/****************************
 *Written by : Jared Barrus
 *Date : May 2009
 *
 *This class creates a sliding "drop-down" element (div/span).
 *
 *options:
 *	trigger - the element to be clicked on to toggle the element to open
 *	height - height of the content container element
 *	element - the element that will be sliding in and out (the content container)
 *	scrollEle - the div/span within the content container (element), that will be scrollable. if nothing is passed in, the
 				content container itself will be scrollable
 *	content - the content container that will be sliding (this causes the content to slide with the div, rather than the div sliding
 				over the content)
 *	OFX & CFX - the open and close effects (only applicable for mootools 1.2)
 *	duration - I think you can figure this one out. It is in milliseconds.
 *	mootoolsVer - I think you can figure this one out.
 *	execFirst - This is a function to be executed as the first line of execution in the onStart of the open function
 *		Use this if you need any code to execute before the content is opened. The format of this parameter is as follows:
 			If you have a function called executeMe(), you pass in the execFirst parameter as execFirst : executeMe
 			You do NOT put it in quotation marks, and you do NOT put the () at the end
 *Other function variables you may be interested in:
 *	toggled - true if element is open, false otherwise
 *	isSliding - true if the element is in the process of sliding open or closed, false otherwise
 */
var Slider = new Class({
	Implements : Options,
	options:{
		trigger		:	null,
		height		:	300,
		element		:	null,
		scrollEle	:	null,
		content		:	null,
		OFX			:	Fx.Transitions.Sine.easeIn,
		CFX			:	Fx.Transitions.Bounce.easeOut,
		duration	:	1000,
		mootoolsVer	:	1.2,
		execFirst	:	null
	},
	openEvent 			:	null,
	closeEvent 			:	null,
	openContentEvent	:	null,
	closeContentEvent 	:	null,
	toggled				:	false,
	isSliding			:	false,
	initialize:function(options){
		if(!options.content)options.content = options.element;
		if(!options.scrollEle)
		{
			options.scrollEle = options.element;
		}
		if(options.mootoolsVer==1.2)this.setOptions(options);
		else{
			this.options.trigger = options.trigger || null;
			this.options.height = options.height || 300;
			this.options.padding = options.padding || 30;
			this.options.position = options.position || 'absolute';
			this.options.left = options.left || 0;
			this.options.top = options.top || 0;
			this.options.element = options.element || null;
			this.options.scrollEle = options.scrollEle || options.element || null;
			this.options.content = options.content || null;
			this.options.OFX = options.OFX || Fx.Transitions.Sine.easeIn || null;
			this.options.CFX = options.CFX || Fx.Transitions.Bounce.easeOut || null;
			this.options.duration = options.duration || 1000;
			this.options.mootoolsVer = options.mootoolsVer || 1.2;
			this.options.execFirst = options.execFirst;
		}
		this.applySlider();
		this.setTrigger();
		window.addEvent('click',function(ev){
			//alert(this.toggled);
			if(this.toggled)this.checkParentNodes(ev.target);
		}.bind(this));
	},
	applySlider:function(){
		if(this.options.element!=null){
			if(this.options.mootoolsVer==1.2){
				this.openEvent = new Fx.Tween(this.options.element, {
					transition	:	this.options.OFX,
					duration	:	this.options.duration,
					property	:	'height',
					onStart		:	function(){
						if(this.options.execFirst!=null)this.options.execFirst();
						this.options.element.style.display='';
						this.isSliding = true;
					}.bind(this),
					onComplete	:	function(){
						this.isSliding = false;
					}.bind(this)
				});
				this.closeEvent = new Fx.Tween(this.options.element, {
					transition	:	this.options.CFX,
					duration	:	this.options.duration,
					property	:	'height',
					onStart	:	function(){
						this.isSliding = true;
					}.bind(this),
					onComplete	:	function(){
						this.options.element.style.display='none';
						this.isSliding = false;
					}.bind(this)
				});
				this.openContentEvent = new Fx.Tween(this.options.content, {
					transition	:	this.options.OFX,
					duration	:	this.options.duration,
					property	:	'margin-top',
					onStart		:	function(){
						this.options.content.style.display='';
					}.bind(this),
					onComplete	:	function(){
						this.options.scrollEle.style.overflowY='scroll';
						this.toggled=true;
					}.bind(this)				
				});
				this.closeContentEvent = new Fx.Tween(this.options.content, {
					transition	:	this.options.CFX,
					duration	:	this.options.duration,
					property	:	'margin-top',
					onStart	:	function(){
						this.options.scrollEle.style.overflow='hidden';
					}.bind(this),
					onComplete	:	function(){
						this.options.content.style.display='none';
						this.toggled=false;
					}.bind(this)
				});
			}
			else{
				this.openEvent = new Fx.Styles(this.options.element, {
					//transition	:	this.options.OFX,
					duration	:	this.options.duration,
					onStart		:	function(){
						if(this.options.execFirst!=null)this.options.execFirst();									
						this.options.element.style.display='';
					}.bind(this)
				});
				this.closeEvent = new Fx.Styles(this.options.element, {
					//transition	:	this.options.CFX,
					duration	:	this.options.duration,
					onComplete	:	function(){
						this.options.element.style.display='none';
					}.bind(this)
				});
				this.openContentEvent = new Fx.Styles(this.options.content, {
					//transition	:	this.options.OFX,
					duration	:	this.options.duration,
					onStart		:	function(){
						this.options.content.style.display='';
					}.bind(this),
					onComplete	:	function(){
						this.options.scrollEle.style.overflowY='scroll';
						this.toggled=true;
					}.bind(this)				
				});
				this.closeContentEvent = new Fx.Styles(this.options.content, {
					//transition	:	this.options.CFX,
					duration	:	this.options.duration,
					onStart	:	function(){
						this.options.scrollEle.style.overflow='hidden';
					}.bind(this),
					onComplete	:	function(){
						this.options.content.style.display='none';
						this.toggled=false;
					}.bind(this)
				});
			}
		}
	},
	setTrigger:function(){
		if(this.options.trigger!=null){
			this.options.trigger.addEvent('click',function(){
				if(this.toggled)this.close();
				else this.open();
			}.bind(this));
		}
	},
	open:function(){
		if(!this.isSliding && !this.toggled){
			if(this.options.mootoolsVer==1.2){
				this.openEvent.start(0, this.options.height);
				this.openContentEvent.start(-this.options.height,0);
			}
			else{
				this.openEvent.start({'height':[0,this.options.height]});
				this.openContentEvent.start({'margin-top':[-this.options.height,0]});
			}
		}
	},
	close:function(){
		if(!this.isSliding){
			if(this.options.mootoolsVer==1.2){
				this.closeEvent.start(this.options.height,0);
				this.closeContentEvent.start(0,-this.options.height);
			}
			else{
				this.closeEvent.start({'height':[this.options.height,0]});
				this.closeContentEvent.start({'margin-top':[0,-this.options.height]});
			}
		}
	},
	checkParentNodes:function(ele){
		while(ele!=$(document.body) && ele!=$(document.html)){
			if(!ele || ele.id==this.options.element.id)return;
			else ele = ele.parentNode;
		}
		this.close();
	}
});