// JavaScript Document
$(document).ready(function() {
		homeAnimControler(".slideFotoPeqCont",".slideFotoCont")
	});
	
var itmsHomeAnim
var cntAnimation
var cont = 0;
var contMax = 0;//maximo de portadas
var timeOut = false;
var imgLoaded = false;//asegura que no se active los click si no se carga la imagen
var nextFunction = "showText"

function homeAnimControler(itms,cntAnim){ //itms puede definirse como una clase
	itmsHomeAnim=$(itms)
	cntAnimation=$(cntAnim)
	
	$(itmsHomeAnim).click(function(){itmClicked(this)}) // llama funcion itmClicked
	$(itms).hover(function(){hoverAnim(this)},function(){unhoverAnim(this); //pone y saca opacidad al pasar el mouse
		hoverAnim(itmsHomeAnim[cont]); // deja la opacidad la sacar el mouse
	})
	
	contMax=cntAnimation.length
	//$(cntAnimation[contMax-1]).find("img").delay(500).load(function(){hideLoading()});
	$(cntAnimation[contMax-1]).find("img").load(function(){setTimeout("hideLoading()",500)})//1000
	
	//pause play
	$("#pause").click(function(){
		pause(); //ejecuta la funcion pausa
		$(this).css("display","none"); //lo esconde
		$("#play").show() //muestra el alterno
	})
	$("#play").click(function(){
		play(); //ejecuta la funcion play
		$(this).css("display","none"); //lo esconde
		$("#pause").show() //muestra el alterno
	})
	$("#pause").hover(function(){$(this).css("opacity","1")},function(){$(this).css("opacity","0.8")})
	$("#play").hover(function(){$(this).css("opacity","1")},function(){$(this).css("opacity","0.8")})
	$("#play").css("display","none")
}

function hideLoading(){ // esconde el div loading cuando este lista la carga
	$(".animLoading").animate({"opacity":0},500,animation) //1000
	imgLoaded=true
}
function resetAnimation(){
	$(".animLoading").css({"display":"block"},{"opacity":"1"})
	$(cntAnimation[cont]).css("opacity","0")
	$(cntAnimation[cont]).css("display","block")
	$(cntAnimation[cont]).find(".animTitle").css({"marginTop":"0"})
	$(cntAnimation[cont]).find(".animDesc").css({"marginTop":"0"})
	$(cntAnimation[cont]).find("img").css({"opacity":"1"})
}
function animation(){
	resetAnimation()
	showImage()
}
function showImage(){
	hoverAnim(itmsHomeAnim[cont]) //item seleccionado
	$(".animLoading").css("display","none") // escondo loading
	$(cntAnimation[cont]).animate({"opacity":1},500)//1000
	$(".controls").show()
	var timeOut=setTimeout("showText()",2000)//3000
	//showText()
	nextFunction="showText"
}
function showText(){
	$(cntAnimation[cont]).find("img").animate({"width":"615","height":"210","marginLeft":"0"},1000)
	timeOut=setTimeout("hideDesc()",600)//4000
	//hideDesc()
	nextFunction="hideDesc"
}
function hideDesc(){
	$(cntAnimation[cont]).find(".animDesc").animate({"marginLeft":"0"},1000,hideTitle)
	nextFunction="hideTitle"
}
function hideTitle(){
	$(cntAnimation[cont]).find(".animTitle").animate({"marginLeft":"0"},200,normalImage)
	nextFunction="normalImage"
}
function normalImage(){
	$(cntAnimation[cont]).find("img").animate({"width":"615","height":"210","marginLeft":"0"},1000)
	timeOut=setTimeout("hideImage()",600)//4000
	//hideImage()
	nextFunction="hideImage"
}
function hideImage(){
	$(cntAnimation[cont]).find("img").animate({"opacity":"0.1"},500,next)
	$(".controls").css("display","none")
}
function next(){
	$(cntAnimation[cont]).css("display","none")
	unhoverAnim(itmsHomeAnim[cont])
	cont++
	if(cont==contMax)
		cont=0
	animation()
}
function hoverAnim(itm){$(itm).css("opacity",1)}
function unhoverAnim(itm){$(itm).css("opacity",0.45)}

function itmClicked(itm){
	if(imgLoaded){
		breakAnim(); 
		cont=$(itm).attr("itm");
		animation();
	}
}
function breakAnim(){ 
	clearTimeout(timeOut)
	$(cntAnimation[cont]).find("img").stop()
	$(cntAnimation[cont]).find(".animDesc").stop()
	$(cntAnimation[cont]).find(".animTitle").stop()	
	$(cntAnimation[cont]).find("img").css({"width":"615px","height":"210px","marginLeft":"0"})
	$(cntAnimation[cont]).css("display","none")
	unhoverAnim(itmsHomeAnim[cont])
	$("#play").css("display","none");$("#pause").show()
	$(".controls").css("display","none")
}
function pause(){
	clearTimeout(timeOut)
}
//despues de pause --> play
function play(){
	setTimeout(nextFunction+"()",1)
}		
