var SideBar = {
	
		init: function (options) {
			// init default options
			this.options = Object.extend({
				scrollDuration: 	200
			}, options || {});
		
		this.isExtended = 0;
		this.height = 550;
		this.width = 300;
		this.slideDuration = 800;
		this.opacityDuration = 500;
		this.sideBar;
		this.sideBarTab;
		this.sideBarContents;
	
		this.sideBar=$('sideBar');
		this.sideBarTab=$('sideBarTab');
		this.sideBarContents = $$("#sideBar #sideBarContents")[0];	
		if (this.sideBarTab)this.sideBarTab.addEvent('click', function(e){e = new Event(e).stop(); this.extendContract();return false;}.bind(this));
	},
	
	extendContract: function (){
	
		if(this.isExtended == 0){		
			this.sideBarSlide(this.height, this.height, 0, this.width);
			this.sideBarOpacity(1, 1);
			this.isExtended = 1;
			
			// make expand tab arrow image face left (inwards)
			this.sideBarTab.style.backgroundImage = "url('images/right.gif')";
		}
		else{
			this.sideBarSlide(this.height, this.height, this.width, 0);
			this.sideBarOpacity(1, 1);
			this.isExtended = 0;
			
			// make expand tab arrow image face right (outwards)
			this.sideBarTab.style.backgroundImage = "url('images/left.gif')";
		}
	},

	sideBarSlide: function (fromHeight, toHeight, fromWidth, toWidth){
		var myEffects = new Fx.Morph(this.sideBarContents, {duration: this.slideDuration, transition: Fx.Transitions.linear});
		myEffects.start({
			 'height': [fromHeight, toHeight],
			 'width': [fromWidth, toWidth]
		});
	},

	sideBarOpacity: function (from, to){
		var myEffects = new Fx.Morph(this.sideBarContents, {duration: this.opacityDuration, transition: Fx.Transitions.linear});
		myEffects.start({
			 'opacity': [from, to]
		});
	}
}

// startup
window.addEvent('domready', SideBar.init.bind(SideBar));