/*
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('domready',function(){
			if(!this.toggled){
				this.toggled = true;
				this.drawerFx.open.start('.'+this.drawer.get('id')+'_open');
			}		
		}.bind(this));*/
		
		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));
		
	}
	
});



document.write("<style type='text/css'>#mainimage {visibility:hidden;}</style>");

function initImage() {
	imageId = 'mainimage';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}