var isExtended = new Array();
isExtended[1] = 0;
isExtended[2] = 0;
isExtended[3] = 0;

var is = new Array();
is[1] = 0;
is[2] = 0;
is[3] = 0;

var height = 152;
var width = 148;
var slideDuration = 300;
var opacityDuration = 500;

var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf( "opera" ) != -1 ) {
	browserName = "opera";
} else if ( ua.indexOf( "msie" ) != -1 ) {
	browserName = "msie";
} else if ( ua.indexOf( "chrome" ) != -1 ) {
	browserName = "chrome";
} else if ( ua.indexOf( "safari" ) != -1 ) {
	browserName = "safari";
} else if ( ua.indexOf( "mozilla" ) != -1 ) {
	if ( ua.indexOf( "firefox" ) != -1 ) {
		browserName = "firefox";
	} else {
		browserName = "mozilla";
	}
}


function extendA(num){

	if(isExtended[num] == 0 && is[num] == 0){

		is[num] = 1;
		
		sideBarSlide(0, height, 0, width, num);
		
		/*sideBarOpacity(0, 1, num);*/
		
		isExtended[num] = 1;
		setTimeOut(done(num), 1000 );	
		
		
		// make expand tab arrow image face left (inwards)
		/*$('sideBarTab'+num).childNodes[0].src = $('sideBarTab'+num).childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');*/
		
	}

}

function done(num) {
	//is[num] = 0;
}

function contractA(num){

	setTimeOut(contractB(num), 1000 );


}

function contractB(num){


	if(isExtended[num] == 1 && is[num] == 0){

		is[num] = 1;
		
		sideBarSlide(height, 0, width, 0, num);
		
		/*sideBarOpacity(0, 1, num);*/
		
		isExtended[num] = 0;

		setTimeOut(is[num] = 0, 1000 );
		
		
		
		// make expand tab arrow image face left (inwards)
		/*$('sideBarTab'+num).childNodes[0].src = $('sideBarTab'+num).childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');*/
		
	}

}

function easyExtendContract(num)
{
	var bar = document.getElementById( "sideBar" + num );
	var contents = document.getElementById( "sideBarContents" + num );
	if( bar && bar.style.width == "47px" )
	{
		bar.style.width = "189px";
		contents.style.display = "block";
		contents.style.width = "142px";
		contents.style.height = "152px";
	}
	else if( bar )
	{
		bar.style.width = "47px";
		contents.style.width = "0px";
	}
}

function extendContract(num){
	if( browserName == "chrome" || browserName == "safari" )
	{
		easyExtendContract(num);
	}
	else
	{
		if(isExtended[num] == 0){
		
			sideBarSlide(0, height, 0, width, num);
		
			/*sideBarOpacity(0, 1, num);*/

			isExtended[num] = 1;
		
			// make expand tab arrow image face left (inwards)
			/*$('sideBarTab'+num).childNodes[0].src = $('sideBarTab'+num).childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');*/
		
		}
		else{
		
			sideBarSlide(height, 0, width, 0, num);
		
			/*sideBarOpacity(1, 0, num);*/

			isExtended[num] = 0;
		
		
		
			// make expand tab arrow image face right (outwards)
		
			/*$('sideBarTab'+num).childNodes[0].src = $('sideBarTab'+num).childNodes[0].src.replace(/-active(\.[^.]+)$/, '$1');*/
		}
	}
}

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

function sideBarOpacity(from, to, num){
		var myEffects = new Fx.Styles('sideBarContents'+num, {duration: opacityDuration, transition: Fx.Transitions.linear});
		myEffects.custom({
			 'opacity': [from, to]
		});
}

function init(){
	$('sideBarTab'+1).addEvent('click', function(){extendContract(1)}); 
	$('sideBarTab'+2).addEvent('click', function(){extendContract(2)});
	$('sideBarTab'+3).addEvent('click', function(){extendContract(3)});

	if( browserName == "chrome" || browserName == "safari" )
	{
		easyExtendContract(1);
		easyExtendContract(2);
		easyExtendContract(3);
	}

}

window.addEvent('load', function(){init()});