var active_workshop=0;
var bg=0, next_bg = 0, bgPeriod=15000, id=0, next_id=0;
var obj=0, next_obj;
var areas=0, next_areas=0, bgs, areas_array, switching=0;

function showWorkshop(div_id, backgrounds, a) {
	hideWorkshop();
	bgs = backgrounds;
	areas_array = a;
	document.getElementById("wsContainer").style.display="block";
	document.getElementById(div_id).style.display="block";
	showPopup(div_id+'_pres', 'media/images/empty.gif');
	active_workshop = div_id;
	loadNextBg();
	clearTimeout(switching);
	switchBackgrounds();	
}

function hideWorkshop() {
	document.getElementById("wsContainer").style.display="none";
	if (active_workshop) document.getElementById(active_workshop).style.display="none";
	active_workshop = 0;
	if (switching) {
		clearTimeout(switching);
		switching = 0;
	}
}

function switchBackgrounds() {
	if (obj==0 || obj.style.opacity == 0) {
		if (areas) document.getElementById(areas).style.display='none';
		bg = next_bg;
		id = next_id;
		areas = next_areas;
		
		obj = document.getElementById('bg'+id)

		obj.style.zIndex = 4;
		obj.style.opacity = 1;
		obj.style.filter = "alpha(opacity=100)";
		document.getElementById(areas).style.display='block';	

		loadNextBg();
		return;
	}

	obj.style.opacity -= 0.2;
	obj.style.filter = "alpha(opacity="+obj.style.opacity*100+")";
	switching = setTimeout("switchBackgrounds()", 50);
}

function loadNextBg() {
	next_bg = (bg + 1) % bgs.length;
	next_id = (id + 1) % 2;
	next_areas = areas_array[next_bg];
	next_obj = document.getElementById('bg'+next_id)
	next_obj.style.zIndex = 3;
	next_obj.src = bgs[next_bg];
	next_obj.style.filter = "alpha(opacity=100)";
	next_obj.style.opacity = 1;
	
	switching = setTimeout('switchBackgrounds()', bgPeriod);
}