$(document).ready(function()
{
	var current = document.location.toString().split('#')[1];
	if( current == undefined ){
		current = 0;
	}else{
		current = parseInt( current.toString().split('img')[1] );
	}
	
	$('#contenedor').serialScroll({
		target: '#imagen', // could be a selector or a jQuery object too.
		items: 'li',
		start: current,
		axis:'x',
		duration: 650,//1000,
		cycle: true,
		constant: false,
		prev: '.flecha_izq',
		next: '.flecha_der',
		navigation: '#lista li a',
		onBefore:function( e, elem, $pane, $items, pos ){			/**
			 * 'this' is the triggered element 
			 * e is the event object
			 * elem is the element we'll be scrolling to
			 * $pane is the element being scrolled
			 * $items is the items collection at this moment
			 * pos is the position of elem in the collection
			 * if it returns false, the event will be ignored
			 */
			 //those arguments with a $ are jqueryfied, elem isn't.
			 /*
			e.preventDefault();
			if( this.blur )
				this.blur();
				*/
				//alert($(elem).attr('rel'));
				var cat = $(elem).attr('rel');
				cat = cat.replace(' ','_');
				$('#menu li').each(function(){
					$(this).removeClass('actual');
				});
				$('#menu li input').each(function(){
					var valor = $(this).val();
					valor = valor.replace('> ','');
					$(this).val(valor);
				});
				$('#'+cat).addClass('actual');
				var valor = $('#'+cat+' input').val();
				valor = valor.replace('> ','');
				$('#'+cat+' input').val('> '+valor);

		},
		onAfter:function( anchor, settings ){
			// The 'this' contains the scrolled element (#content)
		}
	});
	
	/***********************************************/
	
	//El carrusel de imágenes se adapta al ancho de página
	
	$("#lista").css('width', $(window).width()+'px');
	//alert($("#imagen_gal").width());
	//$("#imagen_gal").css('width', $("#imagen_gal").width()+'px');
	
	function scroll_lista(){
		$("#lista").css('width', $(window).width()+'px');
		//Get our elements for faster access and set overlay width
		var div = $("#lista");
		var ul = $("ul.sc_menu");
				   // unordered list's left margin
		var ulPadding = 15;
		
		//Get menu width
		var divWidth = div.width();
		
		//Remove scrollbars
		div.css('overflow', 'hidden');
		
		//Find last image container
		var lastLi = ul.find('li:last-child');
		
		//When user move mouse over menu
		div.mousemove(function(e){
			//As images are loaded ul width increases,
			//so we recalculate it each time
			//var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
			var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
			
			var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
			div.attr({scrollLeft: left});
			//alert($('#lista').scrollLeft() + ' +++ ' + div.scrollLeft());
		});
	}
	scroll_lista();
	
	$(window).resize( function(){
		$("#lista").css('width', $(window).width()+'px');
		//Get our elements for faster access and set overlay width
		scroll_lista();
	});
	
	/*************************************************************************/
	
	// Las flechas que nos permiten movernos entre imágenes desaparecen hasta que nos situamos
	// sobre la imagen
	//$('.flecha_izq img, .flecha_der img').fadeOut('slow');
	$('.flecha_izq').mouseover(function(){
		$('.flecha_izq img').fadeIn('slow');
	});
	$('.flecha_izq').mouseleave(function(){
		$('.flecha_izq img').fadeOut('slow');
	});
	$('.flecha_der').mouseover(function(){
		$('.flecha_der img').fadeIn('slow');
	});
	$('.flecha_der').mouseleave(function(){
		$('.flecha_der img').fadeOut('slow');
	});
	
	/*************************************************************************/
	
	//Símbolo ">" delante de los enlaces
	var orig;
	
	$('#menu ul li input')
		.mouseover(function(){
			orig = $(this).val();
			$(this).val('> '+orig.replace('> ',''));
			$(this).parent().parent().addClass('actual2');
		})
		.mouseleave(function(){
			$(this).val(orig);
			$(this).parent().parent().removeClass('actual2');
		});
});