function show(x) {
	document.getElementById("about").style.visibility = "hidden";
	document.getElementById("interaktiv").style.visibility = "hidden";
	document.getElementById("kontakt").style.visibility = "hidden";
	document.getElementById("save").style.visibility = "hidden";
	document.getElementById(x).style.visibility = "visible";
	if (x == "interaktiv") {
		document.getElementById("save").style.visibility = "visible";

		var myurl = './cgi-bin/save.pl';
		myRand = parseInt(Math.random()*999999999999999);
		// add random number to URL to avoid cache problems
		var modurl = myurl+"?action=load&rand="+myRand;
		http.open("GET", modurl, true);
		// set up the callback function
		http.onreadystatechange = function() { useHttpResponse(1);}
		http.send(null); 
	}
}

var dragobj = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;

function draginit() {
	document.onmousemove = drag;
	document.onmouseup = dragstop;
	initobj();
}

function dragstart(element) {
  dragobj = element;			
  if (dragobj.offsetLeft >= 0) {
  	dragx = posx - dragobj.offsetLeft;
	}
	if (dragobj.offsetTop > 0) {
		dragy = posy - dragobj.offsetTop;
	}
}
function dragstop() {
	if (dragobj != null) {
 		if (dragobj.offsetLeft < 0) {
			dragobj.style.left = 0;
		}
		if (dragobj.offsetTop < 0){
			dragobj.style.top = 0;
		}
		if (dragobj.offsetLeft + dragobj.offsetWidth > 400) {
			dragobj.style.left = 400 - dragobj.offsetWidth + "px";
		}
		if (dragobj.offsetTop + dragobj.offsetHeight > 400) {
			dragobj.style.top = (400-dragobj.offsetHeight) + "px";
		}
		dragobj=null;
	}
}
	

function drag(ereignis) {
	posx = document.all ? window.event.clientX : ereignis.pageX;
	posy = document.all ? window.event.clientY : ereignis.pageY;
	if(dragobj != null) {
		dragobj.style.left = (posx - dragx) + "px";
		dragobj.style.top = (posy - dragy) + "px";
	}
}

function getXMLHTTPRequest() {
	try {
	req = new XMLHttpRequest();
	} catch(err1) {
		try {
			req = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (err2) {
		try {
			req = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (err3) {
			req = false;
			}
		}
	}
	return req;
}

var http = getXMLHTTPRequest();

function submitvalues() {
	var myurl = './cgi-bin/save.pl';
	var stripes1 = document.getElementById("stripes").offsetTop
	var stripes2 = document.getElementById("stripes").offsetLeft
	var name1 = document.getElementById("name").offsetTop
	var name2 = document.getElementById("name").offsetLeft
	var title1 = document.getElementById("title").offsetTop
	var title2 = document.getElementById("title").offsetLeft
	var about1 = document.getElementById("about").offsetTop
	var about2 = document.getElementById("about").offsetLeft
	var interaktiv1 = document.getElementById("interaktiv").offsetTop
	var interaktiv2 = document.getElementById("interaktiv").offsetLeft
	var kontakt1 = document.getElementById("kontakt").offsetTop
	var kontakt2 = document.getElementById("kontakt").offsetLeft
	var mainmenu1 = document.getElementById("mainmenu").offsetTop
	var mainmenu2 = document.getElementById("mainmenu").offsetLeft
	var modurl = myurl+"?action=save&top0="+stripes1+"&left0="+stripes2+"&top1="+name1+"&left1="+name2+"&top2="+title1+"&left2="+title2+"&top3="+about1+"&left3="+about2+"&top4="+interaktiv1+"&left4="+interaktiv2+"&top5="+kontakt1+"&left5="+kontakt2+"&top6="+mainmenu1+"&left6="+mainmenu2;
	http.open("GET", modurl, true);
	// set up the callback function
	http.onreadystatechange = function() { useHttpResponse(2);}
	http.send(null);
}

function useHttpResponse(x) {
	if (x===2){
		if (http.readyState == 4) {
			if(http.status == 200) {
				var statusValue = http.responseXML.getElementsByTagName("status")[0];
				document.getElementById('display1').innerHTML = statusValue.childNodes[0].nodeValue;
				var myurl = './cgi-bin/save.pl';
				myRand = parseInt(Math.random()*999999999999999);
				// add random number to URL to avoid cache problems
				var modurl = myurl+"?action=load&rand="+myRand;
				http.open("GET", modurl, true);
				// set up the callback function
				http.onreadystatechange = function() { useHttpResponse(1);}
				http.send(null); 
				document.getElementById('display1').innerHTML = 'Ihr Layout wurde gespeichert.';
			}
		} else {
			document.getElementById('display1').innerHTML = 'Bitte warten ...';
		}
	}
	if (x===3){
		if (http.readyState == 4) {
			if(http.status == 200) {
				var statusValue = http.responseXML.getElementsByTagName("status")[0];
				document.getElementById('display3').innerHTML = statusValue.childNodes[0].nodeValue;
				document.getElementById("stripes").style.top = http.responseXML.getElementsByTagName("wert1")[0].childNodes[0].nodeValue +"px";
				document.getElementById("stripes").style.left = http.responseXML.getElementsByTagName("wert2")[0].childNodes[0].nodeValue +"px";
				document.getElementById("name").style.top = http.responseXML.getElementsByTagName("wert3")[0].childNodes[0].nodeValue +"px";
				document.getElementById("name").style.left = http.responseXML.getElementsByTagName("wert4")[0].childNodes[0].nodeValue +"px";
				document.getElementById("title").style.top = http.responseXML.getElementsByTagName("wert5")[0].childNodes[0].nodeValue +"px";
				document.getElementById("title").style.left = http.responseXML.getElementsByTagName("wert6")[0].childNodes[0].nodeValue +"px";
				document.getElementById("about").style.top = http.responseXML.getElementsByTagName("wert7")[0].childNodes[0].nodeValue +"px";
				document.getElementById("about").style.left = http.responseXML.getElementsByTagName("wert8")[0].childNodes[0].nodeValue +"px";
				document.getElementById("interaktiv").style.top = http.responseXML.getElementsByTagName("wert9")[0].childNodes[0].nodeValue +"px";
				document.getElementById("interaktiv").style.left = http.responseXML.getElementsByTagName("wert10")[0].childNodes[0].nodeValue +"px";
				document.getElementById("kontakt").style.top = http.responseXML.getElementsByTagName("wert11")[0].childNodes[0].nodeValue +"px";
				document.getElementById("kontakt").style.left = http.responseXML.getElementsByTagName("wert12")[0].childNodes[0].nodeValue +"px";
				document.getElementById("mainmenu").style.top = http.responseXML.getElementsByTagName("wert13")[0].childNodes[0].nodeValue +"px";
				document.getElementById("mainmenu").style.left = http.responseXML.getElementsByTagName("wert14")[0].childNodes[0].nodeValue +"px";
			}
		} else {
			document.getElementById('display3').innerHTML = 'Layout wird geladen. Bitte warten ...';
		}
	}
	if (x===4){
		if (http.readyState == 4) {
			if(http.status == 200) {
				var statusValue = http.responseXML.getElementsByTagName("status")[0];
				document.getElementById('display3').innerHTML = statusValue.childNodes[0].nodeValue;
				document.getElementById("stripes").style.top = http.responseXML.getElementsByTagName("wert1")[0].childNodes[0].nodeValue +"px";
				document.getElementById("stripes").style.left = http.responseXML.getElementsByTagName("wert2")[0].childNodes[0].nodeValue +"px";
				document.getElementById("name").style.top = http.responseXML.getElementsByTagName("wert3")[0].childNodes[0].nodeValue +"px";
				document.getElementById("name").style.left = http.responseXML.getElementsByTagName("wert4")[0].childNodes[0].nodeValue +"px";
				document.getElementById("title").style.top = http.responseXML.getElementsByTagName("wert5")[0].childNodes[0].nodeValue +"px";
				document.getElementById("title").style.left = http.responseXML.getElementsByTagName("wert6")[0].childNodes[0].nodeValue +"px";
				document.getElementById("about").style.top = http.responseXML.getElementsByTagName("wert7")[0].childNodes[0].nodeValue +"px";
				document.getElementById("about").style.left = http.responseXML.getElementsByTagName("wert8")[0].childNodes[0].nodeValue +"px";
				document.getElementById("interaktiv").style.top = http.responseXML.getElementsByTagName("wert9")[0].childNodes[0].nodeValue +"px";
				document.getElementById("interaktiv").style.left = http.responseXML.getElementsByTagName("wert10")[0].childNodes[0].nodeValue +"px";
				document.getElementById("kontakt").style.top = http.responseXML.getElementsByTagName("wert11")[0].childNodes[0].nodeValue +"px";
				document.getElementById("kontakt").style.left = http.responseXML.getElementsByTagName("wert12")[0].childNodes[0].nodeValue +"px";
				document.getElementById("mainmenu").style.top = http.responseXML.getElementsByTagName("wert13")[0].childNodes[0].nodeValue +"px";
				document.getElementById("mainmenu").style.left = http.responseXML.getElementsByTagName("wert14")[0].childNodes[0].nodeValue +"px";
			}
		} 
	}

	if (x===1){
		if (http.readyState == 4) {
			if(http.status == 200) {
				var statusValue = http.responseXML.getElementsByTagName("gesamt")[0];
				document.getElementById('display2').innerHTML = statusValue.childNodes[0].nodeValue +" Besucherlayouts";
			}
		} else {
			//document.getElementById('display1').innerHTML = 'Layout gespeichert!';
		}
	}	
}

function prev() {
	var myurl = './cgi-bin/save.pl';
	myRand = parseInt(Math.random()*999999999999999);
	// add random number to URL to avoid cache problems
	var modurl = myurl+"?action=load&rand="+myRand;
	http.open("GET", modurl, true);
	// set up the callback function
	http.onreadystatechange = function() { useHttpResponse(3);}
	http.send(null);
}

function initobj() {
	var myurl = './cgi-bin/save.pl';
	myRand = parseInt(Math.random()*999999999999999);
	// add random number to URL to avoid cache problems
	var modurl = myurl+"?action=load&rand="+myRand;
	http.open("GET", modurl, true);
	// set up the callback function
	http.onreadystatechange = function() { useHttpResponse(4); }
	http.send(null);
}

function resetpage() {
	document.getElementById("stripes").style.top = "0px";
	document.getElementById("stripes").style.left = "0px";
	document.getElementById("name").style.top = "55px";
	document.getElementById("name").style.left = "10px";
	document.getElementById("title").style.top = "80px";
	document.getElementById("title").style.left = "10px";
	document.getElementById("about").style.top = "150px";
	document.getElementById("about").style.left = "10px";
	document.getElementById("interaktiv").style.top = "150px";
	document.getElementById("interaktiv").style.left = "10px";
	document.getElementById("kontakt").style.top = "150px";
	document.getElementById("kontakt").style.left = "10px";
	document.getElementById("mainmenu").style.top = "340px";
	document.getElementById("mainmenu").style.left = "20px";
}