/* z-indexes of divs:
 * 1			= flash
 * 2			= shadow
 * 1000-9999	= other divs
 * 10k		= menudiv 
 */
 
// global vars
var innerWindowWidth;						// page display width
var innerWindowHeight;					// page display height
var menuDivHeight = 70;					// height of the menu area
var menuSpaceTopBottom = 60;				// the free space on the page (top and bottom)
var loaderSize=24; 							// 20x20px for the initial container size
var previousMenuDetail = -1;		// optimization for the menu details
var previousMenuColor = -1;			// optimization for the menu colors
var activeMenuItem = 0;							// the currently selected menu item
var minPageHeight = 600; 

var myFlashMovie = document.flashBg;

var debugMode = false;
var enableAnimations = true;
var enableDrag = true;

// description of the menu items
var menuItems = new Array(
	new Array("Home", "got lost?", 0),
	new Array("Text", "news & infos", 0),
	new Array("Art", "colored pixels & strokes", 0),
	new Array("Code", "tools & projects", 0),
	new Array("You", "leave your mark", 0)
);

// container variables
var containercount=0;
var containerzindex=1000;

var containers = new Array();
// (headline, url, posX (relative), posY (relative), sizeX, sizeY)

containers["home_1"] = new Array("Welcome to michaelgraf.2012", "welcome.php", "72%", "58%", "25%", "20%");
containers["home_2"] = new Array("Mobile device detected", "mobile.php", "3%", 100, "25%", "20%");

// text
containers["text_1"] = new Array("About", "text_about.php", "15%", -170, "70%", 140);
containers["text_2"] = new Array("News", "text_news.php", "15%", 100, "34%", 500,500);
containers["text_3"] = new Array("Profile", "text_profile.php", "51%", 100, "34%", 500,1000);

// art
containers["art_1"] = new Array("Digital", "art_digital.php", "15%", -330, "70%", 300);
containers["art_2"] = new Array("Analog", "art_analog.php", "15%", 100, "70%", 300,500);

// code
containers["code_1"] = new Array("Info", "code_info.php", "15%", 100, "70%", 120);
containers["code_2"] = new Array("PixelPlaza", "code_pixelplaza.php", "15%", -450, "22%", 420,500);
containers["code_3"] = new Array("DosenMixer", "code_dosenmixer.php", "39%", -450, "22%", 420,1000);
containers["code_4"] = new Array("Tools & Helpers", "code_tools.php", "63%", -450, "22%", 420,1500);

// you
containers["you_1"] = new Array("Guestbook", "you_guest.php", "15%", -550, "34%", 520,0);
containers["you_2"] = new Array("Contact", "you_contact.php", "51%", -550, "34%", 210,500);
containers["you_3"] = new Array("Send a message", "you_form.php", "51%", -320, "34%", 290,1000);

// error
containers["ooops"] = new Array("Ooops", "ooops.php", "40%", "15%", "20%", "12%");

// options
containers["options"] = new Array("Options", "", "72%", "94%a", "25%", 30);

// containers arrays for status handling
var opencontainers = new Array();
var animatedcontainers = new Array();
var draggedcontainers = new Array();

// animation and interaction control
var dragActive = false;					// controls drag&drop behaviour
var menuAnimationActive = false;		// controls menu animation behaviour
var containerAnimationActive = false;		// controls menu animation behaviour

// this function is called whenever the window is resized
function resize() {
	getWindowSize();
	setMenuBarValidLocations();
	configureMenuDiv();
	for(var i in opencontainers) {
		if(opencontainers[i]) {
			initContainer(i);
		}
	}
	initContainer("options");
}

// returns the current page display size
function getWindowSize() {
  var width = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    width = window.innerWidth;
    height = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    width = document.documentElement.clientWidth;
    height = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    width = document.body.clientWidth;
    height = document.body.clientHeight;
  }
  innerWindowWidth = width;
  innerWindowHeight = height;
  return new Array(width, height);
}

// make menu div dragable
function configureMenuDiv() { 
	o = document.getElementById("menuDiv");
	o.style.top = menuItems[activeMenuItem][2];
	Drag.init(o, null, 0, 0, 0, innerWindowHeight-menuDivHeight);
	
	setTimeout("Drag.init(document.getElementById(\"options\"), "+null+", 0, "+innerWindowWidth+", 0, "+innerWindowHeight+")",100);
}

// used for time-based rendering
function getMicrotime() {
	var d = new Date();
	return d.getTime();
}

/* menu bar locations */
// sets the valid menu bar destinations and draws the dragable areas
function setMenuBarValidLocations() {
	pageHeight = minPageHeight;
	if(innerWindowHeight > minPageHeight) {
		pageHeight = innerWindowHeight;
	}
	menuItemDistance = ( pageHeight - menuSpaceTopBottom*2 - menuItems.length * menuDivHeight) / (menuItems.length-1);
	if(menuItemDistance < menuSpaceTopBottom) {
		menuItemDistance = menuSpaceTopBottom;
	}
	for(i=0; i<menuItems.length; i++) {
		menuItems[i][2] = menuSpaceTopBottom + (i) * (menuItemDistance + menuDivHeight);
		dragTarget = document.getElementById("dragTarget"+i);
		if(dragTarget != null) {
			dragTarget.style.top = menuItems[i][2];
		} else {
			document.body.innerHTML+="<div id=\"dragTarget"+i+"\" class=\"transTwenty\" style=\"position: absolute; left: 0px; top:"+menuItems[i][2]+"; width: 100%; height: "+(menuDivHeight-2)+"; z-index:2;\"><table style=\"border-top: 1px dashed #000000; border-bottom: 1px dashed #000000; width: 100%; height: 100%\"><tr><td valign=\"top\"><span class=\"menutext\" style=\"color:#000000\">"+menuItems[i][0]+"</span></td></tr></table></div>";
		}
	}
}

// sets the menu bar to a new color scheme
function setMenuBarColors(i) {
	if(i != previousMenuColor) {
		document.getElementById("menuLeftCell").className = "menu"+ (i != -1 ? i : "inactive") +"bg";
		document.getElementById("menuLogoYear").className = "menu"+ (i != -1 ? i : "inactive") +"text";
		if(previousMenuColor!=-1) {
			document.getElementById("menu"+previousMenuColor+"text").className = "";
		}
		if(i!=-1) {
			document.getElementById("menu"+i+"text").className = "menu"+i+"text";
		}
		previousMenuColor = i;
	}
}

// sets the menu item details
function setMenuItemDetails(i) {
	if(i!=previousMenuDetail) {
		if(previousMenuDetail!=-1) {
			document.getElementById("menu"+previousMenuDetail+"details").innerHTML = "|";
		}
		if(i!=-1) {
			document.getElementById("menu"+i+"details").innerHTML = menuItems[i][1];
		}
		previousMenuDetail = i;
	}
}

// switches to a certain subpage
function clickMenuItem(which) {
	animationsOnlyForThisItem = which;
	if(which!=activeMenuItem && !menuAnimationActive) {
		o = document.getElementById("menuDiv");
		dragActive = true;
		moveDiv(o.id, parseInt(o.style.left), parseInt(o.style.top), 0, menuItems[which][2], 1000);
		setMenuBarColors(which);
		activeMenuItem = which;
		
		// refresh flash background layout
		setFlashVariable("changeListener", which);
		
		// close all open containers
		for(var i in opencontainers) {
			if(opencontainers[i]) {
				hideContainer(i, which);
			}
		}

		// set delay for container animation
		if(enableAnimations) {
			delay = 1525;
		} else {
			delay = 0;
		}
		
		if(which == 0) {
			// home
			// open new containers after 1 second
			setTimeout("showContainer('home_1', "+which+", 1)", delay);
		} else if (which==1) {
			// text
			setTimeout("showContainer('text_1', "+which+", 1)", delay);
			setTimeout("showContainer('text_2', "+which+", 1)", delay);
			setTimeout("showContainer('text_3', "+which+", 1)", delay);
		} else if (which==2) {
			// art
			setTimeout("showContainer('art_1', "+which+", 1)", delay);
			setTimeout("showContainer('art_2', "+which+", 1)", delay);
		} else if (which==3) {
			// code
			setTimeout("showContainer('code_1', "+which+", 1)", delay);
			setTimeout("showContainer('code_2', "+which+", 1)", delay);
			setTimeout("showContainer('code_3', "+which+", 1)", delay);
			setTimeout("showContainer('code_4', "+which+", 1)", delay);
		} else if (which==4) {
			// you
			setTimeout("showContainer('you_1', "+which+", 1)", delay);
			setTimeout("showContainer('you_2', "+which+", 1)", delay);
			setTimeout("showContainer('you_3', "+which+", 1)", delay);
		} else {
			// oops
			setTimeout("showContainer('ooops', 666)", delay);
		}
		
		// do not allow menu click for 1 seconds until menu div is in new position
		// TODO
		if(enableAnimations) {
			menuAnimationActive = true;
			setTimeout("menuAnimationActive = false;", 1000);
		}
		
		setTimeout("Drag.init(document.getElementById(\"options\"), "+null+", 0, "+innerWindowWidth+", 0, "+innerWindowHeight+")",100);		
	}
}

/* container creation */

//init position and size
function initContainer(id) {		
	// set default position and size
	if(!draggedcontainers[id]) {
		topAbsolute = false;
		leftAbsolute = false;
		
		// get container by id
		container = document.getElementById(id);
	
		// load init container position from settings
		settings = containers[id];
		menuTop = parseInt(document.getElementById("menuDiv").style.top);
		menuLeft = 0;
		containerLeft = settings[2];
		containerTop = settings[3];
		containerWidth = settings[4];
		containerHeight = settings[5];
	
		// calcuate absolute from percentage values if needed
		if(typeof(containerLeft)=="string" && containerLeft.indexOf("%")>=0) {
			if(containerLeft.indexOf("a")>=0) {
				containerLeft.replace("/a/g","");
				leftAbsolute = true;
			}
			containerLeft = Math.max(innerWindowWidth,1000) * parseInt(containerLeft)/100;
		}
	
		if(typeof(containerTop)=="string" && containerTop.indexOf("%")>=0) {
			if(containerTop.indexOf("a")>=0) {
				containerTop.replace("/a/g","");
				topAbsolute = true;
			}
			containerTop = Math.max(innerWindowHeight,700) * parseInt(containerTop)/100;
		}
	
		if(typeof(containerWidth)=="string" && containerWidth.indexOf("%")>=0) {
			containerWidth = Math.max(innerWindowWidth,1000) * parseInt(containerWidth)/100;
		}
		if(typeof(containerHeight)=="string" && containerHeight.indexOf("%")>=0) {
			containerHeight = Math.max(innerWindowHeight,700) * parseInt(containerHeight)/100;
		}
	
		if(id!="options") {
			document.getElementById(id+"contentframe").style.width = containerWidth-24;
			document.getElementById(id+"contentframe").style.height = containerHeight-43;
		}
	
		containerLeft+=menuLeft;
		if(!topAbsolute) {
			containerTop+=menuTop;
		}
		
		if(containerLeft < 0 ){
			containerLeft = 0;
		}
		
		if(containerTop < 0 ){
			containerTop = 0;
		}
	
		container.style.left = containerLeft+"px";
		container.style.top = containerTop+"px";
		container.style.width = containerWidth+"px";
		container.style.height = containerHeight+"px";
	}
		
	debug("<b>init container "+id+":</b> l:"+containerLeft+" / t"+containerTop+" / w:"+containerWidth+" / h"+containerHeight);
}

// creates a new container clone
function createContainer(id) {
	settings = containers[id];
	containercount++;
	document.getElementById("containerArea").innerHTML+="<div id=\""+id+"\" class=\"container\" style=\"position: absolute; top:0px; left: 0px; width:20; height: 20; z-index:"+(containerzindex+containercount)+"; display: none;\"></div>";
	container = document.getElementById(id);
	
	// clone the container
	container.innerHTML = document.getElementById("containerClone").innerHTML;
	container.innerHTML = container.innerHTML.replace(/@@@/g,id)
	
	// set width
	containerWidth = settings[4];
	containerHeight = settings[5];

	if(typeof(containerWidth)=="string" && containerWidth.indexOf("%")>=0) {
		containerWidth = Math.max(innerWindowWidth,1000) * parseInt(containerWidth)/100;
	}
	if(typeof(containerHeight)=="string" && containerHeight.indexOf("%")>=0) {
		containerHeight = Math.max(innerWindowHeight,750) * parseInt(containerHeight)/100;
	}
	
	document.getElementById(id+"contenthead").innerHTML = settings[0];
	document.getElementById(id+"contentframe").src = settings[1];
	document.getElementById(id+"contentframe").style.width = containerWidth-24;
	document.getElementById(id+"contentframe").style.height = containerHeight-43;
	
	debug("<b>creating container "+id+"</b>");
}

/*** fade in functions ***/

// init and show container
function showContainer(id, group, animate) {
	containerAnimationActive = group;
	draggedcontainers[o.id] = false;
	container = document.getElementById(id);
	if(container == null) {
		// create new container if not loaded yet
		createContainer(id);
	}	
		
	// init and fade in
	initContainer(id);
	if(enableAnimations && animate) {
		if(containers[id][6]) {
			setTimeout("fadeInContainer(\""+id+"\", "+group+", 2000 )",containers[id][6]);
		} else {
			fadeInContainer(id, group, 2000);
		}
	} else {
		container.style.display = "block";
		container.style.opacity = 1;
		container.style.filter = "alpha(opacity=100)";
		containerContent = document.getElementById(id+"content");
		containerContent.style.display="block";
		containerContent.style.opacity = 1;
		containerContent.style.filter = "alpha(opacity=100)";
	}	
	
	opencontainers[id]=true;
	animatedcontainers[id]=true;
		
	// init drag&drop (works only for last container if not done with setTimeout)
	setTimeout("Drag.init(document.getElementById(\""+id+"\"), "+null+", 0, "+innerWindowWidth+", 0, "+innerWindowHeight+")",100);
	
	// debug
	debug("<b>show container "+id+"</b>");
}

// sets parameters for the fade in loop
function showContainerInit(id, group, sizeX, sizeY) {
	if(animatedcontainers[id]) {
	//	return;
	}
	container = document.getElementById(id);
	deltaX = sizeX - loaderSize;
	deltaY = sizeY - loaderSize;
	start = getMicrotime();
	total = 1000;
	showContainerDo(id, group, deltaX, deltaY, start, total, Math.round(Math.random()+1),0);
}

// fade in loop function
function showContainerDo(id, group, deltaX, deltaY, start, total, mode, finishAfterThis) {
	// quick hide animation for next containers
	if(containerAnimationActive != group) {
		hideContainerInit(id, group);
		return;
	}
	
	if(mode==0) {
		xani=true;
		yani=true;
		finishAfterThis = true;
	} else if(mode==1) {
		xani=true;
		yani=false;
	} else if(mode==2) {
		xani=false;
		yani=true;
	}
		
	// animation setup
	container = document.getElementById(id);
	now = getMicrotime();
	if(now < start+total) {
		if(now != start) {
			currentTime = Math.pow(Math.sin((now - start) / total *Math.PI/2),3);
			if(xani) {
				currentX = currentTime * deltaX;
			}
			if(yani) {
				currentY = currentTime * deltaY;
			}
			// set new values and loop
			if(xani) {
				container.style.width = ( currentX < loaderSize ? loaderSize : currentX ) + "px";
			}
			if(yani) {
				container.style.height = ( currentY < loaderSize ? loaderSize : currentY ) + "px";
			}
		}
		setTimeout("showContainerDo(\""+id+"\", "+group+", "+deltaX+", "+deltaY+", "+start+", "+total+", "+mode+", "+finishAfterThis+")",25);
	} else {
		// set end values
		if(xani) {
			container.style.width = deltaX + loaderSize + "px";
		}
		if(yani) {
			container.style.height = deltaY + loaderSize + "px";
		}
		if(xani && !yani && !finishAfterThis) {
			setTimeout("showContainerDo(\""+id+"\", "+group+", "+deltaX+", "+deltaY+", "+getMicrotime()+", "+500+", 2,1)",25);
		} else if(yani && !xani && !finishAfterThis) {
			setTimeout("showContainerDo(\""+id+"\", "+group+", "+deltaX+", "+deltaY+", "+getMicrotime()+", "+500+", 1,1)",25);
		}
		if(finishAfterThis) {
			fadeInContainerContent(id, group, 500);
		}
	}
}

// sets parameters for the container fade in loop
function fadeInContainer(id, group, total) {
	container = document.getElementById(id);
	startX = parseInt(container.style.left);
	startY = parseInt(container.style.top);
	sizeX = parseInt(container.style.width);
	sizeY = parseInt(container.style.height);
	//document.getElementById(id+'contenthead').innerHTML = sizeX+"x"+sizeY + "<br>pos: "+startX+"/"+startY+"";
	container.style.width = loaderSize;
	container.style.height = loaderSize;
	container.style.opacity = 0;
	container.style.filter = "alpha(opacity=0.0)";
	container.style.display = "block";
	fadeInContainerDo(id, group, 200, getMicrotime(), total, startX, startY, sizeX, sizeY);
}

// opacity + movement fade in for the container
function fadeInContainerDo(id, group, delta, start, total, startX, startY, sizeX, sizeY) {
	// quick hide animation for next containers
	if(containerAnimationActive != group) {
		hideContainerInit(id, group);
		return;
	}
	
	// animation setup
	container = document.getElementById(id);
	containerContent = document.getElementById(id+"content");
	now = getMicrotime();
	if(now < start+total) {
		if(now != start) {
			currentOpacity = (now - start) / total;
			currentX = delta - currentOpacity * delta;
			currentY = Math.sin(currentOpacity *Math.PI * 4) * delta/2 * (1-currentOpacity) * 2;
			container.style.opacity = currentOpacity;
			container.style.filter = "alpha(opacity="+ (currentOpacity*100) +")";
			container.style.left = startX - currentX + "px";
			container.style.top = startY + currentY + "px";
			container.style.width = (2-currentOpacity) * loaderSize + "px";
			container.style.height = (2-currentOpacity) * loaderSize + "px";	
		}
		setTimeout("fadeInContainerDo(\""+id+"\", "+group+", "+delta+", "+start+", "+total+", "+startX+", "+startY+", "+sizeX+", "+sizeY+")",25);
	} else {
		container.style.opacity = 1;
		container.style.filter = "alpha(opacity=100)";
		container.style.left = startX;
		container.style.top = startY;
		showContainerInit(id, group, sizeX, sizeY);
		animatedcontainers[id] = false;
	}
}

// sets parameters for the content opacity loop
function fadeInContainerContent(id, group, total) {
	containerContent = document.getElementById(id+"content");
	containerContent.style.opacity = 0;
	containerContent.style.filter = "alpha(opacity=0)";
	containerContent.style.display="block";
	fadeInContainerContentDo(id, group, 100, getMicrotime(), total);
}

// changes the opacity of the content
function fadeInContainerContentDo(id, group, delta, start, total) {
	// quick hide animation for next containers
	if(containerAnimationActive != group) {
		hideContainerInit(id, group);
		return;
	}
	// animation setup
	containerContent = document.getElementById(id+"content");
	now = getMicrotime();
	if(now < start+total) {
		if(now != start) {
			currentTime = (now - start) / total;
			current = currentTime * delta;
			containerContent.style.opacity = current/100;
			containerContent.style.filter = "alpha(opacity="+current+")";
		}
		setTimeout("fadeInContainerContentDo(\""+id+"\", "+group+", "+delta+", "+start+", "+total+")",25);
	} else {
		// set opacity to 1 for final step
		containerContent.style.opacity = 1;
		containerContent.style.filter = "alpha(opacity=100)";
	}
}

/*** fade out functions ***/

// inits the fade out
function hideContainer(id, group) {
	debug("<b>hide container "+id+"</b>");
	if(enableAnimations) {
		fadeOutContainerContent(id, group, 500);
	} else {
		container = document.getElementById(id);
		container.style.display = "none";
		container.style.opacity = 0;
		container.style.filter = "alpha(opacity=0)";
		containerContent = document.getElementById(id+"content");
		containerContent.style.display="none";
		containerContent.style.opacity = 0;
		containerContent.style.filter = "alpha(opacity=0)";
	}
}

// sets parameters for the fade out loop
function hideContainerInit(id, group) {
	container = document.getElementById(id);
	deltaX = parseInt(container.style.width) - loaderSize;
	deltaY = parseInt(container.style.height) - loaderSize;
	start = getMicrotime();
	total = 500;
	hideContainerDo(id, group, deltaX, deltaY, start, total, Math.round(Math.random()+1),0);
}

function hideContainerDo(id, group, deltaX, deltaY, start, total, mode, finishAfterThis) {
	if(mode==0) {
		xani=true;
		yani=true;
		finishAfterThis = true;
	} else if(mode==1) {
		xani=true;
		yani=false;
	} else if(mode==2) {
		xani=false;
		yani=true;
	}
	
	// animation setup
	container = document.getElementById(id);
	containerContent = document.getElementById(id+"content");
	now = getMicrotime();
	if(now < start+total) {
		if(now != start) {
			currentTime = Math.pow(Math.sin((now - start) / total *Math.PI/2),3);
			if(xani) {
				currentX = currentTime * deltaX;
			}
			if(yani) {
				currentY = currentTime * deltaY;
			}
			// set new values and loop
			if(xani) {
				container.style.width = ( deltaX-currentX < loaderSize ? loaderSize : deltaX-currentX ) + "px";
			}
			if (yani) {
				container.style.height = ( deltaY-currentY < loaderSize ? loaderSize : deltaY-currentY ) + "px";
			}
		}
		setTimeout("hideContainerDo(\""+id+"\", "+group+", "+deltaX+", "+deltaY+", "+start+", "+total+", "+mode+", "+finishAfterThis+")",25);
	} else {
		// set end values
		if(xani && !yani) {
			container.style.width = loaderSize + "px";
		}
		if(yani && !xani) {
			container.style.height = loaderSize + "px";
		}		

		if(xani && !yani && !finishAfterThis) {
			setTimeout("hideContainerDo(\""+id+"\", "+group+", "+deltaX+", "+deltaY+", "+getMicrotime()+", "+250+", "+2+", 1)",25);
		} else if(yani && !xani && !finishAfterThis) {
			setTimeout("hideContainerDo(\""+id+"\", "+group+", "+deltaX+", "+deltaY+", "+getMicrotime()+", "+250+", "+1+", 1)",25);
		} 
		if(finishAfterThis) {
			container.style.width = (deltaX + loaderSize) + "px";
			container.style.height = (deltaY + loaderSize) + "px";
			containerContent.style.opacity = 0;
			containerContent.style.filter = "alpha(opacity=0)";
			containerContent.style.display="none";
			container.style.opacity = 0;
			container.style.filter = "alpha(opacity=0)";
			container.style.display="none";
			opencontainers[id]=false;
		}
	}
}

// sets parameters for the fade out loop
function fadeOutContainerContent(id, group, total) {
	fadeOutContainerContentDo(id, group, 100, getMicrotime(), total);
}

function fadeOutContainerContentDo(id, group, delta, start, total) {
	// animation setup
	containerContent = document.getElementById(id+"content");
	now = getMicrotime();
	if(now < start+total) {
		if(now != start) {
			currentTime = (now - start) / total;
			current = 100 - currentTime * delta;
			containerContent.style.opacity = current/100;
			containerContent.style.filter = "alpha(opacity="+current+")";
		}
		setTimeout("fadeOutContainerContentDo(\""+id+"\", "+group+", "+delta+", "+start+", "+total+")",25);
	} else {
		containerContent.style.opacity = 0;
		containerContent.style.filter = "alpha(opacity=0)";
		containerContent.style.display="none";
		hideContainerInit(id);
	}
}

/**** misc functions ***/

//F. Permadi May 2000
function getFlashMovieObject(movieName) {
	if (window.document[movieName]) {
		return window.document[movieName];
	}
	if (navigator.appName.indexOf("Microsoft Internet")==-1) {
		if (document.embeds && document.embeds[movieName]) {
			return document.embeds[movieName];
		}
	} else { // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
		return document.getElementById(movieName);
	}
}

function setFlashVariableOld(key, value){	
	movie = getFlashMovieObject("flashBg");
	if(movie) {
		if(movie.SetVariable(key, value)) {
			// yeah
		}
	}
}

function setFlashVariable(key, value){		
	var flashBg = swfobject.getObjectById("flashBg");
	if(flashBg && typeof(flashBg.SetVariable) != 'unknown') {
		flashBg.SetVariable(key, value);
	} else {
		setFlashVariableOld(key, value);
	}
}

function debug(text) {
	if(debugMode) {
		document.getElementById("debug").innerHTML+=text+"<br>";
	}
}

function toggleAni() {
	enableAnimations = !enableAnimations;
	document.getElementById("toggleAniPic").src = "images/home/bulp" + ( enableAnimations ? 1 : 0 ) + ".gif";
}

function toggleDrag() {
	enableDrag = !enableDrag;
	document.getElementById("toggleDragPic").src = "images/home/bulp" + ( enableDrag ? 1 : 0 ) + ".gif";
}

function toggleOptions() {
	document.getElementById("options").style.display = "none";
}