//Menu class using Prototype framework

var Opcion = Class.create({
	initialize: function(id,variable)
	{
		this.id = id;
		this.name = id;
		this.status = '';			
		this.duration = 150; //miliseconds
		this.delay = 5; //miliseconds
		this.start = 0;
		this.variable = variable;
		
		this.maxWidth = $(this.id).getWidth();
		this.actual = $(this.id+'_h').getWidth();	
		this.maxHeight = $(this.id).getHeight();
		this.actualHeight = $(this.id+'_h').getHeight();			
	},
	
	Open: function(){
		this.status = 'open';				
		if(this.actual==0)
		{
			var newDuration = this.duration;
		}
		else
			var newDuration = this.actual / this.maxWidth * this.duration;
							
		this.start = new Date().getTime();
		var end = this.start + newDuration;		
		this.moveOutside(end);	
	},
	
	moveOutside: function(end){		
		var now = new Date().getTime();			
		if(now < end && this.status == 'open')
		{
			this.actual = (now - this.start) * this.maxWidth / (end - this.start);	
			$(this.id+'_h').setStyle({'width':this.actual+'px'});
		
			//Moves the div and its background to the center
			var center = this.maxWidth / 2;
			var left = (center - (this.actual / 2));	
			
			if(!Prototype.Browser.Gecko)
				if(left > parseInt(left))
					left = parseInt(left)+1;
				else
					left = parseInt(left);			
					
			$(this.id+'_h').setStyle({'left':left+'px'});
			
			var fn = this.variable+'.moveOutside('+end+')';
			setTimeout(fn,this.delay);
		}
		else
		{
			this.actual = this.maxWidth;
			$(this.id+'_h').setStyle({'width':this.actual+'px'});
			$(this.id+'_h').setStyle({'left':'0'});	
		}
			
	},
	
	Close: function(){
		this.status = 'close';			
		if(this.actual<this.maxWidth && this.actual != 0)
			var newDuration = this.actual * this.duration / this.maxWidth;
		else
			var newDuration = this.duration;
			
		this.start = new Date().getTime();			
		var end = this.start + newDuration;		
		this.moveInside(end);			
	},
	
	moveInside: function(end){
		var now = new Date().getTime(); 
		
		if( (now < end) && (this.status == 'close') )
		{
			this.actual = (now - this.start) * this.maxWidth / (end - this.start);
			this.actual = this.maxWidth - this.actual;				
			$(this.id+'_h').setStyle({'width':this.actual+'px'});
			
			//Moves the div and its background to the center
			var center = this.maxWidth / 2;
			var left = (center - (this.actual / 2));
			if(!Prototype.Browser.Gecko)
				if(left > parseInt(left))
					left = parseInt(left)+1;			
				else
					left = parseInt(left);			
			
			$(this.id+'_h').setStyle({'left':left+'px'});
			
			var fn =this.variable+'.moveInside('+end+')';
			setTimeout(fn,this.delay);				
		}
		else
		{
			this.actual = 0;
			$(this.id+'_h').setStyle({'width':this.actual+'px'});
			//$(this.id+'_h').setStyle({'left':this.maxWidth / 2});
			//$(this.id+'_h').setStyle({'backgroundPosition':'-'+this.maxWidth / 2});	
		}
	},
	
	Up: function(){
		this.status = 'up';
		if(this.actualHeight==0)	
			var newDuration = this.duration;
		else
			var newDuration = this.actualHeight * this.duration / this.maxHeight;
		
		this.start = new Date().getTime();
		var end = this.start + newDuration;		
		this.moveUp(end);			
	},
	
	moveUp: function(end){		
		var now = new Date().getTime();			
		if(now < end && this.status == 'up')
		{
			this.actualHeight = (now - this.start) * this.maxHeight / (end - this.start);	
			$(this.id+'_h').setStyle({'height':this.actualHeight+'px'});
			
			//Moves the div and its background to the bottom
			$(this.id+'_h').setStyle({'bottom':'0px'});		
			//$(this.id+'_a').setStyle({'backgroundPosition':'0 -'+this.actualHeight+'px'});
					
			var fn = this.variable+'.moveUp('+end+')';
			setTimeout(fn,this.delay);
		}
		else
		{
			this.actualHeight = this.maxHeight; 
			$(this.id+'_h').setStyle({'height':this.actualHeight+'px'});
			$(this.id+'_h').setStyle({'bottom':'0px'});			
		}
			
	},
	
	Down: function(){
		this.status = 'down';			
		if(this.actualHeight<this.maxHeight && this.actualHeight != 0)
		{
			var newDuration = this.actualHeight * this.duration / this.maxHeight;
			this._maxHeight = this.actualHeight;
		}
		else
		{
			var newDuration = this.duration;
		this._maxHeight = this.maxHeight;
		}
		
		this.start = new Date().getTime();			
		var end = this.start + newDuration;		
		this.moveDown(end);			
	},
	
	moveDown: function(end){
		var now = new Date().getTime(); 
		
		if( (now < end) && (this.status == 'down') )
		{
			this.actualHeight = (now - this.start) * this._maxHeight / (end - this.start);
			this.actualHeight = this._maxHeight - this.actualHeight;				
			$(this.id+'_h').setStyle({'height':this.actualHeight+'px'});
			
			//Moves the div and its background to the bottom
			$(this.id+'_h').setStyle({'bottom':'0px'});		
			//$(this.id+'_a').setStyle({'backgroundPosition':'0 -'+this.actualHeight+'px'});
			
			var fn = this.variable+'.moveDown('+end+')';
			setTimeout(fn,this.delay);				
		}
		else
		{
			this.actualHeight = 0;
			$(this.id+'_h').setStyle({'height':this.actualHeight+'px'});
			//$(this.id+'_a').setStyle({'backgroundPosition':'0 0'});
			$(this.id+'_h').setStyle({'bottom':'0px'});	
		}
	},
	
	SlideUp: function(){
		this.status = 'slideup';
		if(this.actualHeight==0)	
			var newDuration = this.duration;
		else
			var newDuration = this.actualHeight * this.duration / this.maxHeight;
		
		this.start = new Date().getTime();
		var end = this.start + newDuration;		
		this.moveSlideUp(end);			
	},
	
	moveSlideUp: function(end){		
		var now = new Date().getTime();			
		if(now < end && this.status == 'slideup')
		{
			this.actualHeight = (now - this.start) * this.maxHeight / (end - this.start);	
			//$(this.id+'_h').setStyle({'height':this.actualHeight+'px'});
			
			//Moves the div and its background to the bottom
			$(this.id+'_h').setStyle({'bottom':'0px'});		
			$(this.id+'_a').setStyle({'backgroundPosition':'0 -'+this.actualHeight+'px'});
					
			var fn = this.variable+'.moveSlideUp('+end+')';
			setTimeout(fn,this.delay);
		}
		else
		{
			this.actualHeight = this.maxHeight; 
			$(this.id+'_h').setStyle({'height':this.actualHeight+'px'});
			(this.id+'_a').setStyle({'backgroundPosition':'0 -'+this.actualHeight+'px'});
			$(this.id+'_h').setStyle({'bottom':'0px'});			
		}
			
	},
	
	SlideDown: function(){
		this.status = 'slidedown';			
		if(this.actualHeight<this.maxHeight && this.actualHeight != 0)
		{
			var newDuration = this.actualHeight * this.duration / this.maxHeight;
			this._maxHeight = this.actualHeight;
		}
		else
		{
			var newDuration = this.duration;
		this._maxHeight = this.maxHeight;
		}
		
		this.start = new Date().getTime();			
		var end = this.start + newDuration;		
		this.moveSlideDown(end);			
	},
	
	moveSlideDown: function(end){
		var now = new Date().getTime(); 
		
		if( (now < end) && (this.status == 'slidedown') )
		{
			this.actualHeight = (now - this.start) * this._maxHeight / (end - this.start);
			this.actualHeight = this._maxHeight - this.actualHeight;				
			//$(this.id+'_h').setStyle({'height':this.actualHeight+'px'});
			
			//Moves the div and its background to the bottom
			$(this.id+'_h').setStyle({'bottom':'0px'});		
			$(this.id+'_a').setStyle({'backgroundPosition':'0 -'+this.actualHeight+'px'});
			
			var fn = this.variable+'.moveSlideDown('+end+')';
			setTimeout(fn,this.delay);				
		}
		else
		{
			this.actualHeight = 0;
			$(this.id+'_h').setStyle({'height':this.actualHeight+'px'});
			$(this.id+'_a').setStyle({'backgroundPosition':'0 0'});
			$(this.id+'_h').setStyle({'bottom':'0px'});	
		}
	}
	
						  
});

var ImageTransition = Class.create( {
		
		 contenedor: "",	
		 imagenes: [], 
		 path: "",
		 frequency: 1.5,
		 actual: 1,
		 sig: 0,

		initialize: function( idContenedor, imagenes, options ){
				
				options = Object.extend({path:"",frequency:1.5,actual:1},options ||{ });
				this.contenedor = idContenedor;
				this.imagenes = imagenes;
				this.path = options.path;
				this.frequency = options.frequency;
				this.actual = options.actual -1;
				
				var img = $(this.contenedor).getElementsByTagName("img")[0];
				img.src = this.path + this.imagenes[this.actual];
				$(img).show();
				this.sig = this.actual+1;
				if(this.sig > this.imagenes.length-1)
				this.sig = 0;
				
				this.start();
			},
		
		transition: function(){
			try{
				
			if(!this.onTransition){
					var elemento = $(this.contenedor).getElementsByTagName("img")[0];
					var height = $(elemento).getHeight();
		
					
					if(this.sig > this.imagenes.length-1)
						this.sig = 0;
									
					var src = this.path + this.imagenes[this.sig];
					var img = new Element("img",{ src:src, style:"position:relative; top:-"+height+"px; " });
					
					img.setOpacity( 0 );
					$(this.contenedor).appendChild(img);
					
					var transicion = this;
					new Effect.Opacity( elemento, { from: 1.0, to: 0, duration: (this.frequency-0.0099),
					afterFinish: function(){
							transicion.eliminarImgs();
							transicion.onTransition = false;
							img.setStyle({ top:0+"px"});
						}				   
					});	
					new Effect.Opacity(img,{ from: 0, to: 1.0, duration: (this.frequency-0.0099)})
					this.sig += 1;
					this.onTransition = true;
				
				}
			
			} catch(e){ }
			
			
			
			},
			
			eliminarImgs: function()
			{
				var imagenes = $(this.contenedor).getElementsByTagName("img");
				var num = imagenes.length-1;
				for(var i=0;i< num; i++)
				{
					$(imagenes[i]).remove();
				}
			},
			
			start: function(){
					this.timer = new PeriodicalExecuter(this.transition.bind(this), this.frequency);
				}
			
			
								   
});

var Tab = Class.create( {
	elementos: [], //TABS
	contenedores: [],// INFORMACION TAB
	className: "",
	selected_className: "",
	initialize: function( tabs, contenedores , options){
		this.elementos = tabs;
		this.contenedores = contenedores;
		options = Object.extend({className:"", selected_className:"" },options || { });
		this.className = options.className;
		this.selected_className = options.selected_className;
		
			
			var tab = this;
			var i = 0;
			//console.log( this.elementos );
			this.elementos.each(function( item ){
					//AGREGAMOS LOS EVENTOS					 
					var muestra = contenedores[i];
					var padre = tab;
					$(item).muestra = muestra;
					$(item).padre = padre;
						
					Event.observe($(item),"click", function(){ padre.onclick_accion( ) ; $(muestra).show(); });

					i += 1;
				
			});
		},
		
	onclick_accion: function(  ){
			//OCULTAMOS LOS ELEMENTOS	
				var className = this.className;
			//	debugger;
				this.elementos.each(function( link ){  
											 
										if( className != "" && !className )
											$(link).className = className;
									});
				
				this.contenedores.each(function( link ){ 
											
												$(link).hide(); 
												});
				
				if(this.selected_className != "")
					this.className = this.selected_className;
				
		}
	
});