document.addEvent("domready", function()
{
	
	var images = ["sea.jpg", "ship.jpg","opera.jpg"];
	var imageCounter = 0;
	var max = 3;
	var interval = 20000;
	
	var url = document.baseURL;
	
	images.each(function(){
		new Element("li").inject($("transitions"));
	});
	
	
	loadNextImage = function()
	{
		new Request({url:url+"main/gettitleimage", 
			data :{
				id : imageCounter+1
			},
			onComplete : function(title)
			{
				var imgSrc 		= url+"public/pool/images/"+images[imageCounter];
				var container 	= $('transitions').getChildren("li")[imageCounter+1];
				var img 		= new Element("img", {src:imgSrc, alt:title});
				img.inject(container);
				imageCounter += 1;
			}
		}).send();
	}
	loadNextImage();
	var siguiente = "siguiente en";
	if($(document.body).hasClass("en"))
		var siguiente = "next in";
	this.wrapperFotos = new Element("div").wraps($('transitions'));
	this.wrapperFotos.setStyles({"overflow":"hidden", position:"relative", "height":"330px","margin-bottom":"1.5em"});
	this.controls = new Element("div",{"id":"controlsTransitions", "html":"<div>"+siguiente+" <span id='counter'>20</span> s</div>"}).inject(this.wrapperFotos);
	this.controls.setStyles({"opacity":".7"});
	this.controls.set("morph", {transition:"Quint:out"});
	var Transitions = new viewer($$('#transitions li'),{mode:"alpha", interval:interval, onNext:function(){
		if(imageCounter < max)
		{
			loadNextImage(); 
		}
	}});
	
	var timer = new Counter({	interval:interval,
					onInterval : function()
					{Transitions.next(true);}
				});
	
	
	var author = $("auth"); 
	author.setStyles({left:"15px", top:"20px"});
	author.inject(this.controls);
	
	this.next = new Element("span",{"class":"control",id:"next"}).inject(this.controls);
	this.next.addEvent('click',Transitions.next.bind(Transitions));
	this.next.addEvent('click',function(e){
		e.preventDefault();
		if(timer.going)
			{timer.initSecs();timer.options.element.set("text", timer.secs);}
	});
	this.pause = new Element("span", {"class":"control",id:"pause"}).inject(this.controls);
	this.pause.addEvent("click", function(e){
		e.preventDefault();
		timer.pause();
	})
	this.play = new Element("span", {"class":"control",id:"play"}).inject(this.controls);
	this.play.addEvent("click", function(e){
		e.preventDefault();
		if(!timer.going)
			timer.start();	
	})
	
	
	this.wrapperFotos.addEvent("mouseenter", function(e){
		e.preventDefault();
		document.controls.morph({"bottom":"0"});
	})
	this.wrapperFotos.addEvent("mouseleave", function(e){
		e.preventDefault();
		document.controls.morph({"bottom":"-45px"});
	})
});