/*
Script: drawer.js
	UI class for drawers
	Effect definitions are css based :)

License:
	MIT-style license.

Author:
	Chris Esler, <http://www.chrisesler.com/mootools>

*/

Drawer = new Class({
	Implements: Options,
	/*
		options will contain only effect parameters
	*/
	options: {
		// drawer fx
		DFX: {
			open: {
				duration: 1000,
				fx: Fx.Transitions.Expo.easeOut
			},
			close: {
				duration: 1000,
				fx: Fx.Transitions.Back.easeOut
			}
		},
		// content fx
		CFX: {
			open: {
				duration: 1000,
				fx: Fx.Transitions.Expo.easeOut
			},
			close: {
				duration: 1000,
				fx: Fx.Transitions.Back.easeOut
			}
		}	
	},
	/* 
		containers for 
		- drawer
		- tab
		- content
	*/
	drawer: null,
	tab: null,
	content: null,
	/*
		FX containers 
	*/
	drawerFx: {
		open: null,
		close: null
	},
	contentFx: {
		open: null,
		close: null
	},
	/* toggle boolean */
	toggled: false,
	
	initialize: function(el, options){
		// set options
		if(options) this.setOptions(options);
		
		
		this.drawer = $(el); // the drawer
		this.tab = this.drawer.getFirst(); // the tab
		this.content = this.tab.getNext(); // the content box
		
		/*
			need to setup the fx and assign
			them to their container
		*/
		
		this.drawerFx.open = new Fx.Morph(this.drawer, {
			duration: this.options.DFX.open.duration, 
			transition: this.options.DFX.open.fx
		}).set('.'+this.drawer.get('id')+'_close');
		
		this.drawerFx.close = new Fx.Morph(this.drawer, {
			duration: this.options.DFX.close.duration, 
			transition: this.options.DFX.close.fx
		});
		
		/*this.contentFx.open = new Fx.Morph(this.content, {
			duration: this.options.CFX.open.duration, 
			transition: this.options.CFX.open.fx
		}).set('.'+this.drawer.get('id')+'_content_close');
		
		this.contentFx.close = new Fx.Morph(this.content, {
			duration: this.options.CFX.close.duration, 
			transition: this.options.CFX.close.fx
		});*/
		
		// add events to tab
		
		this.tab.addEvent('click',function(){
			if(!this.toggled){
				this.toggled = true;
			
				this.drawerFx.open.start('.'+this.drawer.get('id')+'_open');
				//this.contentFx.open.start('.'+this.drawer.get('id')+'_content_open');
				
			}else{
				this.toggled = false;
				//this.contentFx.close.start('.'+this.drawer.get('id')+'_content_close');
				this.drawerFx.close.start('.'+this.drawer.get('id')+'_close');
			}
		}.bind(this));
		
	}
	
});