$(document).ready(function () {
	
//resize($('.items')); 
	// initialize scrollable
//	$(".scrollable").scrollable();
$('#zonanext').click(function () {pasar_pre();});

$('#zonaprev').click(function () {pasar_atras_pre();});

$('#preload').hide();
actual = 1;


var cantidad;

cantidad = $('#cantidad').val();
//color = 1;

var  rutaimage;

rutaimage = $('#rutaimage').val();

var imagen;
 
imagen = $('.foto', '#caption'+actual).val();

$('.item'+actual).css('opacity', 0);
/*
$('.item'+actual).load(rutaimage+'?i='+imagen, function () {
	resize($('.items'));
	$('.item'+actual).delay(1000).animate( {opacity: 1 });
	$('.cargado', '#caption1').val(1);
	$('.item1').clone().appendTo('.items').css('opacity', 1);
});
*/

$('<img />')
				.attr('src', imagen)
				.load(function(){
				$('.item'+actual).append( $(this) );
				// Your other custom code
				resize($('.items'));
				$('.item'+actual).animate( {opacity: 1 });
				$('.cargado', '#caption1').val(1);
				$('.item1').clone().appendTo('.items').css('opacity', 1);			
					
});


imagen = $('.foto', '#caption'+cantidad).val();

$('<img />')
				.attr('src', imagen)
				.load(function(){
				
				var cantidad;

				cantidad = $('#cantidad').val();

				$('.item'+cantidad).append( $(this) );
				// Your other custom code
				resize($('.items'));
				$('.item'+cantidad).animate( {opacity: 1 });
				$('.cargado', '#caption'+cantidad).val(1);
					
					
});


/*

imagen = $('.foto', '#caption'+cantidad).val();

					$('.item'+cantidad).load(rutaimage+'?i='+imagen, function () {
				
					$('.cargado', '#caption'+cantidad).val(1);
					resize($('.items'));
					}); 
*/







$('#caption'+actual).delay(500).fadeIn();
color = $('.color', '#caption'+actual).val();
		
//alert(color);

$('#logomoka_'+color).delay(500).fadeIn();
			
if (color == 1) $('#captions').delay(500).css('color', '#111');
if (color == 2) $('#captions').delay(500).css('color', '#fff');
if (color == 3) $('#captions').delay(500).css('color', '#666');
	


if ( !$.browser.msie ) {	
$('#prevslide').hide();
$('#nextslide').hide();	
}



resize($('.items')); 	
	
	
$('#logomoka_1').hover(function () {
		$(this).parent().css('background-position', '-3000px 0px');
		$(this).parent().stop().animate( {backgroundPosition: '0px 0px' });
		
		$(this).parent().css('color', '#FFFFFF');
		$(this).fadeOut();
		$('#logomoka_color').fadeIn();
		
		$('#institucional').delay(200).fadeIn();
		$('#contacto').delay(400).fadeIn();
					
			$(this).parent().unbind('mouseleave');					
			$(this).parent().mouseleave(function () {
				$('#institucional').fadeOut();
				$('#contacto').fadeOut();
				$(this).stop().animate( { backgroundPosition: '-3000px 0px' });
				$('#logomoka_color').fadeOut();
				$('#logomoka_1').fadeIn();
			});		
								   
		});	
		
		
		
		
	$('#logomoka_2').hover(function () {
		$(this).parent().css('background-position', '-3000px -280px');
		$(this).parent().stop().animate( {backgroundPosition: '0px -280px' });
		
		$(this).parent().css('color', '#FFFFFF');
		$('#logomoka_color').fadeIn();
		$(this).fadeOut();
		
		$('#institucional').delay(200).fadeIn();
		$('#contacto').delay(400).fadeIn();
					
			$(this).parent().unbind('mouseleave');	
			$(this).parent().mouseleave(function () {
				$('#institucional').fadeOut();
				$('#contacto').fadeOut();
				$(this).stop().animate( { backgroundPosition: '-3000px -280px' });
				$('#logomoka_color').fadeOut();
				$('#logomoka_2').fadeIn();
			});		
								   
		});			
		
		
	$('#logomoka_3').hover(function () {
		$(this).parent().css('background-position', '-3000px -140px');
		$(this).parent().stop().animate( {backgroundPosition: '0px -140px' });
		
		$(this).parent().css('color', '#c3c3c3');
		$('#logomoka_color').fadeIn();
		$(this).fadeOut();
		
		$('#institucional').delay(200).fadeIn();
		$('#contacto').delay(400).fadeIn();
				
			$(this).parent().unbind('mouseleave');	
			$(this).parent().mouseleave(function () {
				$('#institucional').fadeOut();
				$('#contacto').fadeOut();
				$(this).stop().animate( { backgroundPosition: '-3000px -140px' });
				$('#logomoka_color').fadeOut();
				$('#logomoka_3').fadeIn();
			});		
								   
		});	






/*
MANEJO DEL CONTROL PREV. CUANDO SE SALE, LUEGO DE UN SEGUNDO SE LLAMA A LA FUNCION HIDEPREV, PERO SI SE VUELVE A ENTRAR SE PREVIENE LI PIANDO EL INTERVALO ANTES Y CON UNA VAROIABLE DE CONTROL
*/

if ( !$.browser.msie ) {
$('#zonaprev').hover(function () {
			$('#prevslide').show();	
		},function () {
			$('#prevslide').hide();	
		});	
	}		








/*
MANEJO DEL CONTROL NEXT. CUANDO SE SALE, LUEGO DE UN SEGUNDO SE LLAMA A LA FUNCION HIDEPREV, PERO SI SE VUELVE A ENTRAR SE PREVIENE LI PIANDO EL INTERVALO ANTES Y CON UNA VAROIABLE DE CONTROL
*/
	if ( !$.browser.msie ) {
	$('#zonanext').hover(function () {
			$('#nextslide').show();	
		},function () {
			$('#nextslide').hide();	
		});	
	}
	

		
/*		
hidenext_var = 0;
nextInterval = setInterval(hidenext, 3000);		

	$('#zonanext').mousemove(function () {
		
			$('#nextslide').show();	
			hidenext_var = 0;
			clearInterval(nextInterval);						   	   
			nextInterval = setInterval(hidenext, 3000);
			

		});	

	function hidenext () {
		
			clearInterval(nextInterval);
		
			$('#nextslide').hide();	
		
		}
		
*/		
		
		
		
		
		
		
		
		
		
		
	$(document).bind("keydown", function(evt) {

					
				var key = evt.keyCode;
			
				if (key==39) pasar_pre();
				if (key==37) pasar_atras_pre();
				 
				
			}); 	
	
	
	
/*
 	$(document).keypress(function (event) {
		
		
		if (event.keyCode==39) pasar_pre();
		if (event.keyCode==37) pasar_atras_pre();
		//alert(event.keyCode);
		
		});

		*/

}); /******** TERMINA DOCUMENT READY ***************/
	



animando = 0;
// $('#trace').html(actual +' - '+animando);

function pasar_pre() {


	// $('#trace').html(actual +' - '+animando);
	if(animando==0) {

		animando = 1;
		// $('#trace').html(actual +' - '+animando);
		actualant = actual;
		actual++;

		imagen = $('.foto', '#caption'+actual).val();
		cargado = 0;
		cargado = $('.cargado', '#caption'+actual).val();

		//alert(actual+' - '+cargado);

		if (cargado == 0) {
		
			$('#preload').show();
			
			
			$('<img />')
				.attr('src', imagen)
				.load(function(){
				$('.item'+actual).append( $(this) );
				// Your other custom code
				resizeimg();
				$('.cargado', '#caption'+actual).val(1);
				$('#preload').hide();
				vienedepreload = 1;
				nextloadInterval = setInterval(pasar, 1000);	
			});
			/*
			$('.item'+actual).load(rutaimage+'?i='+imagen, function () {
				
				//imagen = $('img','#item'+actual);
				//alert(imagen);
				
				resizeimg();
				$('.cargado', '#caption'+actual).val(1);
				
				vienedepreload = 1;
				nextloadInterval = setInterval(pasar, 1000);	
				
				
			});*/
		} else {
			vienedepreload = 0;
			pasar();
		}
		
	}

}




function pasar() {

	$('#preload').hide();
	if (vienedepreload == 1) clearInterval(nextloadInterval);
	//resize($('.items'));
	//actual++;

	browserwidth = $(window).width();
	
	
		
	
	
	$('.items').animate({ left: '-='+browserwidth }, 1000, function () {
		posicion = $('.items').offset();
		$('#trace3').html('browserwidth'+browserwidth+'<br>'+posicion.left );
		
		
		if (actual == 1) {
			$('.items').css('left', 0);
		
		//$('#item'+cantidad).clone().prependTo('.items');
		}
		
		animando = 0;
		// $('#trace').html(actual +' - '+animando);
		//alert('animando'+animando);
		
		});


		var cantidad;

		cantidad = $('#cantidad').val();
		
		if (actual > cantidad) {
			actual = 1;
		}
		
		//alert(actual +' - '+cantidad);
		
		$('#caption'+(actualant)).fadeOut(1000);	
		$('#caption'+actual).delay(1000).fadeIn();
		
		colorant = color;
		color = $('.color', '#caption'+actual).val();
			if (colorant!=color) {
				$('#logomoka_'+colorant).fadeOut(function(){
				
				if (color == 1) 
					{ $('#captions').css('color', '#FFFFFF');
						$('a','#captions').css('color', '#FFFFFF');
						$('h2','#captions').css('color', '#FFFFFF');
					}
				if (color == 2) 
					{ $('#captions').css('color', '#FFFFFF');
						$('a','#captions').css('color', '#FFFFFF');
						$('h2','#captions').css('color', '#FFFFFF');
					}
				if (color == 3) 
					{ $('#captions').css('color', '#666666');
						$('a','#captions').css('color', '#666666');
						$('h2','#captions').css('color', '#666666');
					}
				
				
				});
				$('#logomoka_'+color).fadeIn();
				
				
			
			
			}
		
		



}






















function pasar_atras_pre() {

	if(animando==0) {

		animando=1;	
		// $('#trace').html(actual +' - '+animando);
		actualant = actual;
		actual--;

		imagen = $('.foto', '#caption'+actual).val();
		cargado = 0;
		cargado = $('.cargado', '#caption'+actual).val();

		//alert(actual+' - '+cargado);

		if (cargado == 0) {
		
			$('#preload').show();
			
			
			$('<img />')
				.attr('src', imagen)
				.load(function(){
				$('.item'+actual).append( $(this) );
				// Your other custom code
				resizeimg();
				$('.cargado', '#caption'+actual).val(1);
				$('#preload').hide();
				
				vienedepreload = 1;
				atrasloadInterval = setInterval(pasar_atras, 1000);
			});
			/*
			$('.item'+actual).load(rutaimage+'?i='+imagen, function () {
				
				//imagen = $('img','#item'+actual);
				//alert(imagen);
				$('#preload').hide();
				resizeimg();
				$('.cargado', '#caption'+actual).val(1);
				
				vienedepreload = 1;
				atrasloadInterval = setInterval(pasar_atras, 1000);
				
			});*/
		} else {
			vienedepreload = 0;
			pasar_atras();
	}

	}
}







function pasar_atras() {
/*
	actualant = actual;
	actual--;*/

	var cantidad;

	cantidad = $('#cantidad').val();
	
	browserwidth = $(window).width();
	
	
	
	if (vienedepreload == 1) clearInterval(atrasloadInterval);
	
	
	
	if (actual == 0) {
		actual = cantidad;
		$('.items').css('left', -(cantidad)*browserwidth);
		
		
		}
	
	
	
	
	
	
	

	$('.items').animate({ left: '+='+browserwidth }, 1000, function () {
		posicion = $('.items').offset();
		
		animando = 0;
		// $('#trace').html(actual +' - '+animando);
		});
	

		$('#caption'+(actualant)).fadeOut();
		//actual--;
		
		//if (actual == 0) actual = cantidad;
		
		$('#caption'+actual).delay(1000).fadeIn();
		
		colorant = color;
		color = $('.color', '#caption'+actual).val();
		if (colorant!=color) {
			$('#logomoka_'+colorant).fadeOut(function () {
			
				if (color == 1) $('#captions').delay(1000).css('color', '#FFF');
				if (color == 2) $('#captions').delay(1000).css('color', '#fff');
				if (color == 3) $('#captions').delay(1000).css('color', '#666');
			
			});
			$('#logomoka_'+color).fadeIn();
			
			
			
		}


}



	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
function resize(objeto) {
		
		//objeto.fadeIn();
		
	  	$(objeto).each(function() {
	  		
			
			//alert(this);
			//Define image ratio
			var ratio = 1112/1920;
			
			//Gather browser and current image size
			var imagewidth = $(this).width();
			var imageheight = $(this).height();
			var browserwidth = $(window).width();
			var browserheight = $(window).height();
			
			$('.scrollable').width(browserwidth);
			$('.scrollable').height(browserheight);
			
			//$('#zonanext').height(browserheight);
			//$('#zonaprev').height(browserheight);
			
			var offset;

			//Resize image to proper ratio
			//$('img',this).fadeOut('slow');
			
			if ((browserheight/browserwidth) > ratio){
			   $('div',this).height(browserheight);
			    $('div',this).width(browserwidth);
				
				childerwidth = browserheight / ratio;
				$('img', this).width(childerwidth);
				
				childerheight = browserheight;
			    $('img', this).height(childerheight);
				
				
				
				
				
				
			} else {
			    $('div',this).width(browserwidth);
			    $('div',this).height(browserheight);
				
				childerwidth = browserwidth;
				$('img', this).width(browserwidth);
				
				childerheight = browserwidth * ratio;
			    $('img', this).height(childerheight);
				
				
				
			}
				leftparent = (actual-1)*browserwidth;
				$(this).css('left', -leftparent);
			
				left = (browserwidth - $('img', this).width())/2;
				topx = (browserheight - $('img', this).height())/2;
				
				$('img', this).css('left', left);
				$('img', this).css('top', topx);
				
		
			return false;
		});
};
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
function resizeimg() {
		
			//alert(this);
			//Define image ratio
			objeto = $('img','.item'+actual);
			
			var ratio = 1112/1920;
			
			//Gather browser and current image size
			var imagewidth = $(objeto).width();
			var imageheight = $(objeto).height();
			var browserwidth = $(window).width();
			var browserheight = $(window).height();
			
			var offset;

			//Resize image to proper ratio
			//$('img',this).fadeOut('slow');
			
			if ((browserheight/browserwidth) > ratio){
			  
			  //alert('>');
				childerwidth = browserheight / ratio;
				$(objeto).width(childerwidth);

			    $(objeto).height(browserheight);

				
			} else {
				//alert('<');
			    $(objeto).width(browserwidth);
			    
				childerheight = browserwidth * ratio;
				
				$(objeto).height(childerheight);

				
			}
			
			
				left = (browserwidth - $(objeto).width())/2;
				topx = (browserheight - $(objeto).height())/2;
				$(objeto).css('left', left);
				$(objeto).css('top', topx);

			return false;
};
		
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

		 


	
$(window).bind("resize", function(){
    		resize($('.items')); 
		});