$(document).ready(function(){
	var velocidad = 10;
	var indiceAnterior, indiceActual = 0;
	var contenido = $('#contenido').clone();
	var paginas = contenido.find('.pagina').toArray();
	$('#contenido').empty();
	var renderContenido = $('#contenido');
	var sliderImagenes = $('#slider');
	var slider = $('<div id="sliderContenido"></div>').appendTo($('#contenido'));
	var dir = window.location.toString();
	dir = dir.split('#');
	if(dir.length > 1)
	{
		window.scrollTo(0,0);
		var seccion = '#'+dir[1];
		indiceActual = contenido.find(seccion).index();
	}
	
	var anterior, actual;
	actual = $(paginas[indiceActual]).clone().appendTo(slider);
	slider.find('.imagenes').remove();
	sliderImagenes.html($(paginas[indiceActual]).find('.imagenes').html());
	$('#slider').wowSlider({effect:"blast",prev:"prev",next:"next",duration:10*100,delay:velocidad*1800,outWidth:880,outHeight:320,width:880,height:320,caption:false,controls:false,autoPlay:true,bullets:0,stopOnHover:true});
	actual.css({position:'absolute', top:0});
	slider.css({height:actual.outerHeight(), width:actual.outerWidth(), position:'absolute', overflow:'hidden'});
	
	var posicionFlechas = Math.floor(($(window).width() - renderContenido.outerWidth()) / 2);
	//$('<div>'+posicionFlechas+'</div>').prependTo('body');
	var contenedorFlechas = $('<div></div>').appendTo('body');
	var pos = renderContenido.position();
	contenedorFlechas.css({position:'absolute', top:450, width:renderContenido.outerWidth(), left:posicionFlechas});
	var bt_anterior = $('<a id="bt_anterior"></a>').appendTo(contenedorFlechas);
	var bt_siguiente = $('<a id="bt_siguiente"></a>').appendTo(contenedorFlechas);
	
	var animando = false;
	var X = 0, posX = 0, H = 0, sizeH = 0;
	var animacion;
	var altoMayor = false;
	
	function animarSiguiente()
	{
		X -= Math.ceil((X - posX)/40);
		H -= (altoMayor) ? Math.ceil((H - sizeH)/40) : Math.floor((H - sizeH)/40);
		slider.css({left:X});
		renderContenido.css({height:H});
		if(X == posX)
		{
			anterior.remove();
			actual.css({left:0});
			slider.css({left:0, width:actual.outerWidth()});
			renderContenido.css({height:sizeH});
			window.clearInterval(animacion);
			$('#slider').wowSlider({effect:"blast",prev:"prev",next:"next",duration:10*100,delay:velocidad*1800,outWidth:880,outHeight:320,width:880,height:320,caption:false,controls:false,autoPlay:true,bullets:0,stopOnHover:true});
			animando = false;
		}
	}
	
	function animarAnterior()
	{
		X -= Math.floor((X - posX)/40);
		H -= (altoMayor) ? Math.ceil((H - sizeH)/40) : Math.floor((H - sizeH)/40);
		slider.css({left:X});
		renderContenido.css({height:H});
		if(X == posX)
		{
			anterior.remove();
			actual.css({left:0});
			slider.css({left:0, width:actual.outerWidth()});
			renderContenido.css({height:sizeH});
			window.clearInterval(animacion);
			$('#slider').wowSlider({effect:"blast",prev:"prev",next:"next",duration:10*100,delay:velocidad*1800,outWidth:880,outHeight:320,width:880,height:320,caption:false,controls:false,autoPlay:true,bullets:0,stopOnHover:true});
			animando = false;
		}
	}
	
	$('.menu a').click(function(){
		var seccion = $(this).attr('href');
		if(seccion.toString().split('#').length > 1)
		{
			var indice = contenido.find(seccion).index();
			if(indice != indiceActual && !animando)
			{
				indiceAnterior = indiceActual;
				indiceActual = indice;
				anterior = actual;
				actual = contenido.find(seccion).clone().appendTo(slider);
				slider.find('.imagenes').remove();
				actual.css({position:'absolute', top:0});
				H = anterior.outerHeight();
				sizeH = actual.outerHeight();
				altoMayor = (H > sizeH)?true:false;
				slider.css({height:actual.outerHeight(), width:actual.outerWidth() + anterior.outerWidth()});
				if(indiceActual > indiceAnterior)
				{
					actual.css({left:anterior.outerWidth()});
					slider.css({left:0});
					posX = -anterior.outerWidth();
					X = 0;
					animacion = window.setInterval(animarSiguiente,1/30);
				}
				else
				{
					anterior.css({left:anterior.outerWidth()});
					slider.css({left:-anterior.outerWidth()});
					posX = 0;
					X = -anterior.outerWidth();
					animacion = window.setInterval(animarAnterior,1/30);
				}
				delete $.wowSlider;
				animando = true;
				sliderImagenes.html(contenido.find(seccion).find('.imagenes').html());
			}
			return false;
		}
	});
	
	bt_siguiente.click(function(){
		if(!animando)
		{
			anterior = actual;
			indiceActual++;
			if(indiceActual >= paginas.length)
			indiceActual = 0;
		
			actual = $(paginas[indiceActual]).clone().appendTo(slider);
			slider.find('.imagenes').remove();
			actual.css({position:'absolute', top:0});
			H = anterior.outerHeight();
			sizeH = actual.outerHeight();
			altoMayor = (H > sizeH)?true:false;
			slider.css({height:actual.outerHeight(), width:actual.outerWidth() + anterior.outerWidth()});
			
			actual.css({left:anterior.outerWidth()});
			slider.css({left:0});
			posX = -anterior.outerWidth();
			X = 0;
			delete $.wowSlider;
			animando = true;
			animacion = window.setInterval(animarSiguiente,1/30);
			
			sliderImagenes.html($(paginas[indiceActual]).find('.imagenes').html());
		}
		return false;
	});
	
	bt_anterior.click(function(){
		if(!animando)
		{
			anterior = actual;
			indiceActual--;
			if(indiceActual < 0)
			indiceActual = paginas.length - 1;
			
			actual = $(paginas[indiceActual]).clone().appendTo(slider);
			slider.find('.imagenes').remove();
			actual.css({position:'absolute', top:0});
			H = anterior.outerHeight();
			sizeH = actual.outerHeight();
			altoMayor = (H > sizeH)?true:false;
			slider.css({height:actual.outerHeight(), width:actual.outerWidth() + anterior.outerWidth()});
			
			anterior.css({left:anterior.outerWidth()});
			slider.css({left:-anterior.outerWidth()});
			posX = 0;
			X = -anterior.outerWidth();
			delete $.wowSlider;
			animando = true;
			animacion = window.setInterval(animarAnterior,1/30);
			sliderImagenes.html($(paginas[indiceActual]).find('.imagenes').html());
		}		
		return false;
	});
});