$(document).ready(function() {
    
    // cacheamos objetos del listado
    var oDiv = $("#thumbsWrapper"),
        oUl = $("ul.sc_menu",oDiv),
        ulPadding = 15;
    
    // Cacheamos el ancho
    var oDivWidth = oDiv.width();
    
    // Quitamos las barras
    oDiv.css({overflow: 'hidden'});
  
    // Último objeto de la lista
    var lastLi = $("li:last",oUl);

    
    // Evento al mover el ratón por encima de la lista
    oDiv.one("mouseover",function(e){
        // Recalculamos el ancho de la lista cada vez, por sin hubiera cargado otra foto, y se modificara....
        var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
        var left = (e.pageX - oDiv.offset().left) * (ulWidth-oDivWidth) / oDivWidth;
        var that = $(this);
        oDiv.animate({scrollLeft:left},function() {
            $(this).bind("mousemove",function(e){
                var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
                var left = (e.pageX - oDiv.offset().left) * (ulWidth-oDivWidth) / oDivWidth;
                oDiv.scrollLeft(left);
             });
         });
    });
    
    
    // Animación de los botones del menú superior y sociales
    $('#navigation img:not(.active),#nav_sozial img:not(.active)').hover(
        function(){
            $(this).stop().animate({'opacity':'1.0'},200);
        },
        function(){
            $(this).stop().animate({'opacity': 0.45},200);
        }
    );
    
    
    // Animación para el menú de cada sección    
    $('#thumbsWrapper img:not(.active_img)').hover(
        function(){
            $(this).stop().animate({
                'opacity':'1.0'
                //'width':'51px',
                //'height':'51px',
                //'margin-top':'-1px',
                //'margin-left':'-1px'
            },200);
            $(this).next("p:eq(0)").show();
        },
        function() {
            $(this).stop().animate({
                'opacity':'0.65'
            },200);
            $(this).next("p:eq(0)").hide();
        }
    ).css("opacity","0.65");

    // Mostramos la etiqueta del elemento activo
    $('#thumbsWrapper img.active_img').next("p:eq(0)").show();

    
    var slider = {
        current : 1,
        offset : 0,
        itemWidth : 850,
        offsetTime : 700,
        numItems : function() {
            return $("#slider-client-inner .slider-client-item").length;
        },
        next : function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            if ($(this).parent("a").hasClass("inactive")) return;
            
            var limit = ($(this).hasClass("last"))? slider.numItems():slider.current+1;
            var time = 0;
            for (var i=slider.current;i<limit;i++) {
                time += slider.offsetTime;
                slider.offset -= slider.itemWidth;
                slider.current++;
            }
            
            slider.slide(time);
            
            
        },
        prev : function(e) {
            e.preventDefault();
            e.stopPropagation();
            if ($(this).parent("a").hasClass("inactive")) return;
            
            var limit = ($(this).hasClass("first"))? 1:slider.current-1; 
            var time = 0;
            for (var i=slider.current;i>limit;i--) {
                time += slider.offsetTime;
                slider.offset += slider.itemWidth;
                slider.current--;
            }
            
            slider.slide(time);
        },
        slide : function(time) {
            $('#slider-client-inner').animate({'left':slider.offset+190},time,'easeInOutExpo');
            slider.updateLinks();
        },
        updateLinks : function() {
            if(slider.current >= slider.numItems() ){
				$('.slider-client-nav-links-right a').removeClass('active').addClass('inactive');
			}else{
				$('.slider-client-nav-links-right a').addClass('active').removeClass('inactive');
			}
			if(slider.current <= 1){
				$('.slider-client-nav-links-left a').removeClass('active').addClass('inactive');
			}else{
				$('.slider-client-nav-links-left a').addClass('active').removeClass('inactive');
			}
			$('#client-story-counter').text(' '+slider.current+' / '+slider.numItems());
				
        }
    };
    

    $("#slider-client-nav .next,#slider-client-nav .last").live("click",slider.next);
    $("#slider-client-nav .prev,#slider-client-nav .first").live("click",slider.prev);
    slider.updateLinks();

});