// JavaScript Document
//Menu class using Prototype framework
var clientX = 0;
var clientY = 0;

var Opcion = Class.create({
	initialize: function(id,variable)
	{
		this.id = id;
		this.name = id;
		this.status = '';			
		this.duration = 400; //miliseconds
		this.delay = 5; //miliseconds
		this.start = 0;
		this.variable = variable;
		
		this.maxWidth = $(this.id).getWidth();
		this.actual = $(this.id+'_h').getWidth();			
		
	},
	
	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.IE)
				if(left > parseInt(left))
					left = parseInt(left)+1;
				else
					left = parseInt(left);			
					
			$(this.id+'_h').setStyle({'left':'0'});
			
			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.IE)
				if(left > parseInt(left))
					left = parseInt(left)+1;			
				else
					left = parseInt(left);			
			
			$(this.id+'_h').setStyle({'left':'0px'});
			
			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});	
		}
	}
						  
});