function loadElements(){
	
	document.getElementById('scheidingskolom').style.height = document.getElementById('apDiv1').offsetHeight + 40 + "px";
	$('patterndiv').style.left = getThem('scheidingskolom').curleft + "px";
	$('patterndiv').style.visibility = "visible";
	
	stretchDelay();
	
	//set cssFloat, otherwise first time event is fired it won't go
	element = document.getElementById('apDiv1');
	element.style.cssFloat = "left";
	element.style.styleFloat = "left";
	
	$('linkerkolom').style.cursor = "pointer";
	$('linkerkolom').style.cursor = "hand";
	
	// draw orange lines inbetween questions
	myDrawFunction();
	
	window.onresize = resizeAll;
	
		
	testobj = new Object();
	testobj.im1 = "images/im1.png";
	testobj.im2 = "images/im2.png";
	testobj.im3 = "images/im3.png";
	testobj.im4 = "images/im4.png";
	testobj.im5 = "images/im5.png";
	testobj.im6 = "images/im6.png";
	testobj.im7 = "images/im7.png";
	testobj.im8 = "images/header_p3.png";
	
	testobj.im1s = "images/im1_s.png";
	testobj.im2s = "images/im2_s.png";
	testobj.im3s = "images/im3_s.png";
	testobj.im4s = "images/im4_s.png";
	testobj.im5s = "images/im5_s.png";
	testobj.im6s = "images/im6_s.png";
	testobj.im7s = "images/im7_s.png";
	testobj.im8s = "images/header_p3_s.png";
	
	
	// set all mouseover and out's
	for (i=1;i<9;i++){
		
		imageid = "im" + i;
		
		$(imageid).onmouseover = function() {
			overandout(this.id,'over');
		}
		
		$(imageid).onmouseout = function() {
			overandout(this.id,'out');
		}
		
	}
	
	// show 'news' link highlighted on load
	overandout('im7','click');
	
}



function clear(){
	jg.clear();	
}
			


// use a delay function to make sure column is stretched
// in order for the pattern to display properly
function stretchDelay(){
	var t=setTimeout(function(){stretchPattern()},125);
}


function stretchPattern(){
	if ($('apDiv1').offsetHeight > $('rechterkolom').offsetHeight){
		$('patterndiv').style.height = $('apDiv1').offsetHeight + 40 + "px";
	} else {
		$('patterndiv').style.height = $('rechterkolom').offsetHeight + 40 + "px";
	}
}

function resizeAll(){
	$('patterndiv').style.left = getThem('scheidingskolom').curleft + "px";
	if(jg != null){
		jg.clear();
	}
	if(rewind != ""){
		rewindjg.clear();
	}
	
	myDrawFunction();
	drawPath(rewind);
}

function swap(){
	
	// if lines were drawn already,
	// remove these first
	if(jg){
		jg.clear();
	}


	if(rewind != ""){
		rewindjg.clear();
	}

	element = $('apDiv1');
	leftdiv = $('linkerkolom');
	rightdiv = $('rechterkolom');


	if(element.style.cssFloat == "right" || element.style.styleFloat == "right"){
		
		element.style.cssFloat = "left";
		element.style.styleFloat = "left";
		
		$('patterndiv').style.left = getThem('scheidingskolom').curleft + "px";

		// en swap ook de onclick event!
		leftdiv.onclick = swap;
		leftdiv.style.cursor = "pointer";
		leftdiv.style.cursor = "hand";
		
		rightdiv.style.cursor = "", rightdiv.onclick = "",rightdiv.onmouseover = "", rightdiv.onmouseout = "";
		
	} else if(element.style.cssFloat == "left" || element.style.styleFloat == "left"){
		
		element.style.cssFloat = "right";
		element.style.styleFloat = "right";
		
		$('patterndiv').style.left = getThem('scheidingskolom').curleft + "px";
		
		// en swap ook de onclick event!
		rightdiv.onclick = swap;
		rightdiv.style.cursor = "pointer";
		rightdiv.style.cursor = "hand";
		
		leftdiv.style.cursor = "", leftdiv.onclick = "", leftdiv.onmouseover = "", leftdiv.onmouseout = "";
	}
	// redraw!
	myDrawFunction();
	
	if(rewind != ""){
		
		drawPath(rewind);
	}
	
	
}



thing = new Object();

// function for determining proper offset values
function getThem(obj){
	
	thing.curleft = 0;
	thing.curtop = 0;

	obj = document.getElementById(obj);

	do {
		thing.curleft += obj.offsetLeft;
		thing.curtop += obj.offsetTop;
	} while (obj = obj.offsetParent);
	
	return thing;
}


	
function myDrawFunction(){
	
	jg = new jsGraphics("drawdiv");
	jg.setColor("#ffc692");
	jg.setStroke("1");
		
	drawBranches();
 
}

clicked = "";

function overandout(arg1,arg2){
	
	if(arg2 == "over"){
		$(arg1).src = testobj[arg1 + "s"];
	}
	else if (arg2 == "out"){
		if (clicked == arg1){
			// do nothing
		} else {
			$(arg1).src = testobj[arg1];
		}
	}
	else if (arg2 == "click"){
		
		// if another item was clicked already
		if(clicked != ""){
			$(clicked).src = testobj[clicked];
			
		}
		
		$(arg1).src = testobj[arg1 + "s"];
		
		//8 being the "map" link
		if (arg1 != "8"){
			clicked = arg1;

		}
	}
	
}