/**
 * LoginSearchBar for mootools 1.2.1
 * @license MIT-style license
 * @author Anquetil Manuel <manuel.anquetil [at] baphira.com>
 * @copyright Baphira - http://www.baphira.com
 */
var LoginSearchBar = new Class({
	
	Implements: [Options],
	
	options: {
		initPos: 27,
		endPos: 0,
		duration: 500,
		loginBtn: null,
		loginPnl: null,
		searchBtn: null,
		searchPnl: null
	},
	
	initialize: function(el, options) {
		this.setOptions(options);
		
		this.bar = $(el);
		
		this.loginState = 0;
		this.loginBtn = this.options.loginBtn;
		this.loginPnl = this.options.loginPnl;
		
		this.searchState = 0;
		this.searchBtn = this.options.searchBtn;
		this.searchPnl = this.options.searchPnl;
		
		this.loginPnl.setStyle('display','none');
		this.searchPnl.setStyle('display','none');
		
		this.effect = new Fx.Morph (this.bar, {
			transition: Fx.Transitions.Quad.easeInOut,
			duration: this.options.duration
		});
				
		this.loginBtn.addEvent('click', function(e) {
			new Event(e).stop();
			if(this.loginState == 1) {
				this.hideAll();
			} else {
				this.show('LOGIN');
			}
		}.bind(this));
		
		this.searchBtn.addEvent('click', function(e) {
			new Event(e).stop();
			if(this.searchState == 1) {
				this.hideAll();
			} else {
				this.show('SEARCH');
			}
		}.bind(this));
		
		window.addEvent('click', function(e) {
			var event = new Event(e);
			var area = null;
			if (this.loginState == 1) {
				area = $('loginBox').getCoordinates();
			}
			if(this.searchState == 1) {
				area = $('searchBox').getCoordinates();
			}
			if(area != null && !(
				area.left < event.client.x && area.right > event.client.x
				&& area.top < event.client.y && area.bottom > event.client.y)  ) {
				this.hideAll();
			}
		}.bind(this));
	},
	
	hideAll: function() {
		if(this.loginState == 1) {
			this.effect.cancel();
			this.effect.start({
				'margin-top': this.options.initPos
			}).chain(function() {
				this.loginState = 0;
				this.loginPnl.setStyle('display','none');
			}.bind(this));
		}
		if(this.searchState == 1) {
			this.effect.cancel();
			this.effect.start({
				'margin-top': this.options.initPos
			}).chain(function() {
				this.searchState = 0;
				this.searchPnl.setStyle('display','none');
			}.bind(this));
		}
	},
	
	show: function(what) {
		this.effect.cancel();
		if(what == 'LOGIN') {
			if(this.searchState == 1) {
				this.effect.start({
					'margin-top': this.options.initPos + 7
				}).chain(function() {
					this.searchState = 0;
					this.searchPnl.setStyle('display','none');
					this.loginPnl.setStyle('display','block');
					this.effect.start({
						'margin-top': this.options.endPos 
					}).chain(function() {
						this.loginState = 1;
						this.searchState = 0;
					}.bind(this));
				}.bind(this));
			} else {
				this.loginPnl.setStyle('display','block');
				this.effect.start({
					'margin-top': this.options.endPos  
				}).chain(function() {
					this.loginState = 1;
					this.searchState = 0;
				}.bind(this));
			}
		} else if(what == 'SEARCH') {
			if(this.loginState == 1) {
				this.effect.start({
					'margin-top': this.options.initPos + 7
				}).chain(function() {
					this.loginState = 0;
					this.loginPnl.setStyle('display','none');
					this.searchPnl.setStyle('display','block');
					this.effect.start({
						'margin-top': this.options.endPos  
					}).chain(function() {
						this.searchState = 1;
						this.loginState = 0;
					}.bind(this));
				}.bind(this));
			} else {
				this.searchPnl.setStyle('display','block');
				this.effect.start({
					'margin-top': this.options.endPos  
				}).chain(function() {
					this.searchState = 1;
					this.loginState = 0;
				}.bind(this));
			}
		}
	}
	
});