paddingContent = 16;

completed = true; //init de la variable
lopen = true; //left open
ropen = true; //right open
speed = 1000; //vitesse de l'animation
dwidth = '226px' //default width
rwidth = '40px'; //retracted width
rheight = '25px';
loadingClass = "loading";

function switchcol(ele){
	if(completed == true){
		initAnim();	
		switch (ele) {
			case 'left':
				if(lopen == true){
					closecol(ele);lopen = false;
				} else { 
					opencol(ele);lopen = true;
				}
			break;
			case 'right':
				if(ropen == true){
					closecol(ele);ropen = false;
				} else { 
					opencol(ele);ropen = true;
				}
			break;
			case 'all':
				if(lopen == true && ropen == true){
					closecol(ele);ropen = false;lopen = false;
				} else { 
					opencol(ele);ropen = true;lopen = true;
				}
			break;
			default: 
				//none
			break;
		}
	}
}

function initAnim(){
	completed = false;
	$('#tools').addClass(loadingClass);
	$('.loading .btnCols').css('opacity', '0.5');	
	
}

widget = new Array();
cols = new Array("left", "right");
function saveWidgetHeight(){
	for(i=0; i<cols.length; i++){
		col = cols[i];
		widget[col] = new Array(); 
		getContent(col).each(function(j){
			widget[col][j] = $(this).height()+paddingContent;
		});
	}
}

function setHeight(ele){
	if($('#'+ele).width() != rwidth.substr(0, 2)){
		getContent(ele).parent().each(function(j){
			$(this).height(widget[ele][j]+'px');
		});
	}
}

function closecol(col){
	saveWidgetHeight(); //sauvegarde des hauteurs des contenus
	
	//retract col
	if(col != 'all'){
		dspShadow(col, false)
		setHeight(col); //le contenu va être caché, il faut maintenir la hauteur
		coldone = false;
		getContent(col).fadeOut(
			function(){
				if (!coldone) {
					coldone = true;
					$('#'+col).animate({ width: rwidth }, speed, function(){ 
						rwidget(col);
					});
				}
			}
		);
	} else {
		dspShadow('left', false);
		dspShadow('right', false);
		setHeight('left');setHeight('right');
		coldone = false;
		$('.widget .content').fadeOut(
			function(){
				if (!coldone) {
					coldone = true;
					contentdone = false;	
					$('#left, #right').animate({ width: rwidth }, speed, function(){ 
						if (!contentdone) {
							contentdone = true;
							rwidget('left');
							rwidget('right'); 
						}
					});
				}
			}
		);	
	}
}

function dspShadow(col, action){
	widgets = $('#'+col+' .widget');
	widgets.css('background-position', col+' 0');
	if(action == false){
		widgets.animate({ backgroundPosition: col+' 0' });		
	} else {	
		widgets.animate({ backgroundPosition: reverse(col)+' 0' }, 1000);	
		animCompleted();
	}	
}

function reverse(lbl){
	return (lbl == 'left') ? 'right' : 'left';
}


function opencol(col){
	//expand col
	if(col != 'all'){
		$('#'+col).animate({ width: dwidth }, speed, function(){ ewidget(col)} );
	} else {
		$('#left').animate({ width: dwidth }, speed, function(){ ewidget('left'); });
		$('#right').animate({ width: dwidth }, speed, function(){ ewidget('right'); });
	}
}

function rwidget(ele){ //retract widget
	rdone = false;
	getContent(ele).parent().animate({ height: rheight }, function(){
		if (!rdone) {
			rdone = true;
			animCompleted();
		}
	});
}

function ewidget(col){ //expand widget
	getContent(col).each(function (l) {
		$(this).parent().animate({ height: widget[col][l] }, 
			function(){ 
				$(this).find(':first-child').fadeIn();
				$(this).css('height', 'auto');		
			});			
	});
	dspShadow(col, true);
}


function getContent(col){
	return $('#'+col).find('.widget .content');	
}

function animCompleted(){
	$('.loading .btnCols').animate({ opacity:1 }, function(){
		completed = true;	
	});
	$('#tools').removeClass(loadingClass);
}