var FlyingButton = new Class({
	Implements: [Events, Options],
	
	options: {
		target : 'menu',
		transition: Fx.Transitions.Quart.easeOut
	},
	
	initialize: function(options) {
		this.setOptions(options);
		
		//this.destroy();
		
		this.build();  
		
		this.fx = new Fx.Morph(this.button, {
			duration: 500,
			wait: false,
			transition: this.options.transition
        });
		
		this.ul = $(this.options.target).getElement('ul');
		this.lis = this.ul.getElements('li');	
		this.s = this.ul.getElement('li.s');

		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%2 == 0){this.firstwidth-=1};	  
			// 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(el){
			this.a = el.getElement('a');			  
							  
			el.colorfx = new Fx.Tween(this.a, {
				duration: 800,
				wait: false,
				transition: this.options.transition
			});	
			
			el.positions = el.getCoordinates();
			el.width = el.getStyle('width').toInt() - this.button.getStyle('padding-left').toInt();
			
			
				
		  	el.addEvent('mouseenter', function(){
				el.colorfx.start('color', '#F9BE43');	
					
				if(!this.s) this.fx.set({'opacity': 1 });					  
				if (el.width%2 == 0){el.width-=1};  
				// correction for a regular dotted background
				var pos = el.getCoordinates();
				this.moveBtnTo(pos, el.width);
			}.bind(this));
		   
			el.addEvent('mouseout', function(){
				if (!this.clicked) {
					if (el != this.s)
						el.colorfx.start('color', '#454545');
					
					if (!this.s)
						this.fx.set({'opacity': 0 });
					
					var pos = this.s.getCoordinates();
					this.moveBtnTo(pos, this.firstwidth);
				}	
			}.bind(this));
			
			el.addEvent('click', function(){
				this.clicked = true;
			}.bind(this));
	 
	 		window.addEvent('resize', function() {
				
										   
			}.bind(this));
			
		}.bind(this));
		
		
		
	}, // end constructor
	
	
	//methods:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
		
	build : function(){  
		// 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.options.target));
		var inner = new Element("div");
		inner.injectInside(this.button);

		return this.button;
	}, // end animate
	
	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.options.target).getPosition();
		
		this.fx.start({
		   top: 1,
		   left: position.left - pos.x,
		   width: width
         });
	}, 
	// end moveBtnTo
	
	setBtnTo : function(position, width){
		var pos = $(this.options.target).getPosition();
		
		this.fx.set({
			top: 1,
			left: position.left - pos.x,
			width: width
		});
	}
}); // end class




////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var Drawer = new Class({
	initialize: function(button,drawer) {	
		this.drawer = drawer;
		this.animate = new Fx.Slide(drawer, {
		   duration: 600,
		   transition: Fx.Transitions.Quad.easeOut
         });
		
		var HashCookie = new Hash.Cookie('HashCookieDemo',{ path : '/' });
	
		var settings = {
			draweris: "closed"
		}

		console.log('test:');
		
		if ($('drawer').hasClass('opened')) {
			console.log('open');
		} else {
			console.log('open if oppen');
			if (HashCookie.get('draweris')) {
				
				settings['draweris'] = HashCookie.get('draweris');
				
				if(settings['draweris'] == "closed"){
					this.animate.hide();
				}
				
				button.addEvent('click', function(){
					if(settings['draweris'] == "open"){
						this.animate.slideOut();
						settings['draweris'] = "closed";
					}
					else {
						this.animate.slideIn();
						settings['draweris'] = "open"
						};
					
					HashCookie.extend(settings);
					HashCookie.save();
				}.bind(this));			
			} else {
				settings['draweris'] = "closed"
				HashCookie.extend(settings);
				HashCookie.save();
				this.animate.hide();
			}
		}
	} //end constructor
}); // end class

/////////////////////////////////////////////////////////////////////////////

var HighlightSearch = new Class({
	initialize: function(target) {
		this.target = target;
		this.input = $('clientinput');
		this.firsttext = this.input.value;
		
		this.cache = new Element('div').injectInside(this.target).addClass('hidesearch').setStyle('opacity',0.8); 
		
		this.showing = new Fx.Morph(this.cache, {
			duration: 300,
			transition: Fx.Transitions.Quad.easeOut,
			wait: true,
			onComplete: function(cache){cache.setStyle('display','none')}
		});

		this.hiding = new Fx.Morph(this.cache, {
			duration: 600,
			transition: Fx.Transitions.Quad.easeOut,
			onStart: function(cache){cache.setStyle('display','')}
		});
		
		this.input.addEvent('focus',function(){this.input.value = ''}.bind(this));

		this.input.addEvent('blur',function(){
			if(this.input.value == '') this.input.value=this.firsttext
			this.hiding.start({'opacity':0.8});
		}.bind(this));

		this.cache.addEvent('mouseover', function(){
			this.showing.start({'opacity':0.1});	
		}.bind(this));
	
	} //end constructor
}); // end class
 


window.addEvent('domready', function(){
									 
	new FlyingButton({
		target : 'mainmenu',
		klass: 'mainmenu'
	});
	
	new HighlightSearch('searchform');
	
	new SlideboxManager();
	
});