/************************************************************
	Title: 	Collapsible Div JS
	Author:	AgencyNet
	Date: 	Aug 08
	Desc:		Creates the "smartSearch" functionality.
		Uses Mootools built in slide functionality
		Takes a div, a trigger and animates it so its collapsible.
		Good for hiding/displaying forms/information.
	
	Requires:
		mootools V 1.1

************************************************************/

var CollapsibleDiv = new Class({ 
	options: {
		//Type of transtion to use
		transitionType: Fx.Transitions.Quart.easeOut,
		duration: 400,
		variableForSliderIE : 0
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//
	initialize: function(divToCollapse, trigger, options){
		//Set variables	
		this.setOptions(this.options, options);
		this.divToCollapse = $(divToCollapse);
		this.trigger = $(trigger);
		this.transition = this.options.transitionType;
		this.duration = this.options.duration;
		
		//Set up divToCollapse
		this.initDivToCollapse();
		
		//hide the arrow button (for ie problem)
		if(trigger == 'registerButton'){
			this.knob = $('knob');
			this.knob.setStyle('display', 'none');
			this.options.variableForSliderIE = 0;
		}
		//set up trigger
		this.addEvents(trigger);
		
		//alert(this.divToCollapse+'  ::  '+this.trigger);
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//
	initDivToCollapse: function(){
		this.slider = new Fx.Slide(this.divToCollapse,{duration:this.duration, transition:this.transition, wait:false});
		this.slider.hide();
	},
//~~~~~~~~~~~~~~~~~~~~~~>>>>>><<<<<<~~~~~~~~~~~~~~~~~~~~~~//
	addEvents: function(trigger){
		//add focus, blur and keyup Events
		this.trigger.addEvent('mouseover', function(){
			if(trigger == 'forgotPswdBut')
				this.trigger.setStyle('text-decoration', 'underline');
			if(trigger == 'registerButton')
				this.trigger.addClass('over');
		}.bind(this));
		
		this.trigger.addEvent('mouseout', function(){
			if(trigger == 'forgotPswdBut')	
				this.trigger.setStyle('text-decoration', 'none');
			if(trigger == 'registerButton')
				this.trigger.removeClass('over');
		}.bind(this));
		
		this.trigger.addEvent('click', function(){
			this.slider.toggle();	
			//handle ie floating problem
			//alert(this.options.variableForSliderIE == 0);
			if((trigger == 'registerButton') && (this.options.variableForSliderIE == 0)) {
				(function(){ this.knob.setStyle('display', 'block')}.bind(this)).delay(400);
				this.options.variableForSliderIE = 1;
			} else if((trigger == 'registerButton') && (this.options.variableForSliderIE == 1)) {
				this.knob.setStyle('display', 'none');
				this.options.variableForSliderIE = 0;
			}				
		}.bind(this));
	}
});

CollapsibleDiv.implement(new Options);
CollapsibleDiv.implement(new Events);

//Just for reference
//window.onDomReady(CollapsibleDiv.initialize.bind(CollapsibleDiv));