var Intro = new Class({
	
	options : {
		duration : 250,
		fadeDuration : 1200
	},
	
	initialize : function()
	{
		$('intro').setStyles({"display":"block", "position":"absolute", "z-index":"0"});
		this.spans = $$("#sinFade span"); 
		this.spansFade = $$("#conFade span");
		$("conFade").setStyles({position:"absolute",right:"50px"});
		this.spans.each(this.configuraSpan.bind(this));
		this.spansFade.each(this.configuraSpanFade.bind(this));
		//this.actual = 0;
		this.start();
	},
	configuraSpan : function(span, index)
	{
		var margen = 10;
		if(index == 0)
		{this.anterior = span.getSize().x + margen;
			this.left = 0;
		}
		else
		{this.left = this.anterior;
			this.anterior += span.getSize().x + margen;
		}
		span.setStyles({"position":"absolute", "top":"0", "left":this.left, "opacity":"0"});
	},
	configuraSpanFade : function(span, index)
	{
			span.setStyles({position:"absolute","top":"0",opacity:"0"});
	},
	start : function()
	{
		this.actual = 0;
		this.timer = this.mueve.periodical(this.options.duration,this);
	},
	mueve : function()
	{
		var span = this.spans[this.actual];
		var left = span.getStyle("left").toInt();
		span.setStyle("left",left-20+"px");
		span.set("morph", {duration:this.options.duration});
		span.morph({"opacity":"1","left":left});
		this.actual += 1;
		if(this.actual >= this.spans.length)
		{
			$clear(this.timer);
			this.startFader();
		}
	},
	startFader : function()
	{
		this.spansFade[0].morph({opacity:"1"});
		$("conFade").morph({"right":"0"});
		this.actual = 1;
		this.timer = this.fader.periodical(this.options.fadeDuration,this);
	},
	fader : function()
	{
		//this.spansFade[this.actual-1].set("morph", {onComplete : function(){this.spansFade[this.actual].morph({opacity:1})}.bind(this)})
		this.spansFade[this.actual-1].morph({opacity:0});
		this.spansFade[this.actual].morph({opacity:"1"});
		this.actual += 1;
		if(this.actual >= this.spansFade.length)
		{
			$clear(this.timer);
			this.atras.delay(1000, this);
		}
	},
	atras : function()
	{
		//$("conFade").morph({opacity:"0","right":"40px"});
		this.actual = 0;
		this.timer = this.mueveAtras.periodical(this.options.duration,this);
	},
	mueveAtras : function()
	{
		var span = this.spans[this.actual];
		var left = span.getStyle("left").toInt();
		//span.setStyle("left",left-20+"px");
		span.set("morph", {duration:this.options.duration});
		span.morph({"opacity":"0","left":left-20});
		this.actual += 1;
		if(this.actual >= this.spans.length)
		{
			$clear(this.timer);
			this.fin.delay(this.options.duration,this);
		}
	},
	fin : function()
	{
		$("conFade").morph({opacity:"0","right":"40px"});
	},
	stop: function()
	{
		$clear(this.timer);
		$('intro').setStyle("display","none");
	}
});