// JavaScript Document


var FlyingButton = new Class({
	Implements: [Events, Options],
	
	options: {
		target : 'menu',
		fx: {
			duration: 500,
			wait: false,
			transition: Fx.Transitions.Quart.easeOut
        },
		transition: Fx.Transitions.Quart.easeOut
	},
	
	initialize: function(options) {
		this.setOptions(options);
		
		this.target = $(document.body).getElement(this.options.target);
		
		if (!this.target) return;
		
		if (this.target.getElement('ul')) {
			this.build();  
			this.attach();
		}
	},
		
	build : function(){
		this.ul = this.target.getElement('ul');
		this.lis = this.ul.getElements('li');
		this.s = this.ul.getElement('li.s');
		
		if (this.ul.getSize().y > 0)
			this.target.setStyle('height',this.ul.getSize().y) 
		
		// creates the two divs for the flying button
		this.button = new Element("div").setProperties({
			'class': this.options.klass  //this.options.layer_id
        });
			
		this.button.injectInside(this.target);
		
		var first = new Element("div");
		first.injectInside(this.button);
		first.addClass('first');
		
		var second = new Element("div");
		second.addClass('second');
		second.injectInside(first);
		
		this.fx = new Fx.Morph(this.button, this.options.fx);
	}, // end animate
	
	attach: function() {
	
	
		if(this.s) { // positioning the flying button behind the selected menu (behind first li if selected doesn't exists)
			this.firstpos = this.s.getCoordinates();
			this.firstwidth = this.s.getStyle('width').toInt() - this.button.getStyle('padding-left').toInt();
			//if (this.firstwidth%3 == 0 && this.options.pixel){this.firstwidth-=this.options.pixel};	  
			// correction for a regular dotted background	
		} else { 
			this.firstpos = this.lis[0].getCoordinates();
			this.firstwidth = this.lis[0].getStyle('width').toInt() - this.button.getStyle('padding-left').toInt();
			this.fx.set({'opacity': 0 });
		}
	
		this.setBtnTo(this.firstpos, this.firstwidth);	
			
		this.lis.each(function(li){
			this.a = li.getElement('a');			  
			
			if (this.options.color) {	  
				li.colorfx = new Fx.Tween(this.a, {
					duration: 800,
					wait: false,
					transition: this.options.transition
				});	
			}
			
			li.positions = li.getCoordinates();
			li.width = li.getStyle('width').toInt() - this.button.getStyle('padding-left').toInt();
				
		  	li.addEvent('mouseover', function(){
				if (this.options.color) li.colorfx.start('color', this.options.color[1]);	
				
				if(!this.s) this.fx.set({'opacity': 1 });					  
				
				//if (li.width%3 == 0 && this.options.pixel){li.width-=this.options.pixel}; 
				//if (li.width%2 == 0 && this.options.pixel){li.width-=1};  
				// correction for a regular dotted background
				var pos = li.getCoordinates();
			
				this.moveBtnTo(pos, li.width);
			}.bind(this));
		   
			li.addEvent('mouseout', function(){
				if (!this.clicked) {
					if (li != this.s) {
						if (this.options.color) li.colorfx.start('color', this.options.color[0]);	
						if (this.s && this.options.color) this.s.colorfx.start('color', this.options.color[0]);	
					}
					if (!this.s) {
						this.fx.set({'opacity': 0 });
					} else {
						var pos = this.s.getCoordinates();
						this.moveBtnTo(pos, this.firstwidth);
					}
				}	
			}.bind(this));
			
			li.addEvent('click', function(){
				this.clicked = true;
			}.bind(this));
	 
	 		window.addEvent('resize', function() {
				
										   
			}.bind(this));
			
		}.bind(this));	
		
	},
	
	destroy : function(){  
		// creates the two divs for the flying button
		$(document.body).getElements('ul.flyingbtn').each(function(el){
			el.remove();
		});
	}, 
	// end animate
	
	moveBtnTo : function(position, width){
		var pos = this.target.getPosition();
		
		
		this.fx.start({
		   top: position.top - pos.y,
		   left: position.left - pos.x,
		   width: width
         });
	}, 
	// end moveBtnTo
	
	setBtnTo : function(position, width){
		var pos = this.target.getPosition();
		var top = 5;
		if ($('tunnel')) {
		 top=0;	
		}
		
		
		this.fx.set({
			top: position.top - pos.y,
			left: position.left - pos.x,
			width: width
		});	
	}
}); // end class

