// JavaScript Document
var visable_pane = 'ecommerce';

//set the other panes to hidden
window.addEvent('domready', function(){
	$('marketing').setStyles({
		opacity: 0
	});
	$('ecommerce').setStyles({
		opacity: 0
	});
	$('design').setStyles({
		opacity: 0
	});
	showtab('design');
});

function showtab(which){
	if (which != visable_pane){
		$(visable_pane).fade('out');
		$(which).fade('in');
		var size_old = $(visable_pane).getSize();
		var size = $(which).getSize();
		var myEffect = new Fx.Morph('tab_holder', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
		myEffect.start({
			'height': [size_old.y, size.y] //Morphs the 'height' style from 10px to 100px.
		});

		visable_pane = which;
	}
}