// JavaScript Document
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)
	$(itmsHomeAnim).click(function (){itmClicked(this)})
	$(itms).hover(function(){hoverAnim(this)},function(){unhoverAnim(this);hoverAnim(itmsHomeAnim[cont])})
	cntAnimation=$(cntAnim)
	contMax=cntAnimation.length
	$(cntAnimation[contMax-1]).find("img").load(function(){setTimeout("hideLoading()",1000)})
	
	//pause play
	$("#pause").click(function(){pause();$(this).css("display","none");$("#play").show()})
	$("#play").click(function(){play();$(this).css("display","none");$("#pause").show()})
	$("#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(){
	$(".animLoading").animate({"opacity":0},1000,animation)
	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(){
	$(".controls").show()
	hoverAnim(itmsHomeAnim[cont])
	$(".animLoading").css("display","none")
	$(cntAnimation[cont]).animate({"opacity":1},1000)
	timeOut=setTimeout("showText()",3000)
	nextFunction="showText"
}
function showText(){
	$(cntAnimation[cont]).find("img").animate({"width":"590","height":"255","marginLeft":"72"},1000)
	timeOut=setTimeout("hideDesc()",4000)
	nextFunction="hideDesc"
}
function hideDesc(){
	$(cntAnimation[cont]).find(".animDesc").animate({"marginTop":"200"},200,hideTitle)
	nextFunction="hideTitle"
}
function hideTitle(){
	$(cntAnimation[cont]).find(".animTitle").animate({"marginTop":"200"},200,normalImage)
	nextFunction="normalImage"
}
function normalImage(){
	$(cntAnimation[cont]).find("img").animate({"width":"734","height":"317","marginLeft":"0"},1000)
	timeOut=setTimeout("hideImage()",4000)
	nextFunction="hideImage"
}
function hideImage(){
	$(cntAnimation[cont]).find("img").animate({"opacity":"0.1"},1000,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":"734px","height":"317px","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)
}