/* FRANK */
var state = null; /* 'open' or null: large image state */

var employees = Array(); /* employer data */

function initEmployees ()
{
	initEmployerConfig (); /* init employer config */

	var container 		= document.getElementById('medewerkersContainer');
	var divObjs 		= container.getElementsByTagName('DIV');
	var divObjsLength	= divObjs.length;

	for (var i = 0; i < divObjsLength; i++)
	{
		if (divObjs[i].className == 'Werknemer')
		{
			divObjs[i].onclick = employerClick;
		}
	}
}

function employerClick ()
{
	var objName = this.id.split("_");
	objName = objName[1];

	if (document.getElementById('img_large_'+objName).style.display == 'none')
	{
			/* open */
			if (state > 0 && state != objName) closeManual(state);

			state = objName;
	
			document.getElementById('img_small_'+objName).style.display = 'none';
			document.getElementById('img_large_'+objName).style.display = 'block';
		
			/* position full block */
			var newWidth = employees[objName]['width'];
			var newHeight = employees[objName]['height'];
			var newX = employees[objName]['x'];
			var newY = employees[objName]['y'];
		
			this.style.width = newWidth+"px";
			this.style.height = newHeight+"px";
			this.style.left = newX+"px";
			this.style.top = newY+"px";
			this.style.zIndex = '99';
		
			/* style full block */
			this.style.border = '1px solid #e6e6e6';
		
			/* position h3 */
			objH3 = this.getElementsByTagName('H3');
		
			if (objH3[0].style.padding.length < 1) objH3[0].style.padding = "10px 10px 0px 10px";
		
			var paddingLeft 	= (employees[objName]['oldx'] < 30 ? Math.abs(newX-employees[objName]['oldx'])+9+"px" : objH3[0].style.paddingLeft);
			var paddingRight 	= parseInt(objH3[0].style.paddingRight)-1;
			var paddingTop 		= Math.abs(newY-employees[objName]['oldy'])+9+"px";
			var paddingBottom 	= objH3[0].style.paddingBottom;
		
			objH3[0].style.padding = paddingTop + ' ' + paddingRight + 'px ' + paddingBottom + ' ' + paddingLeft;
					
			/* position p */
			objP = this.getElementsByTagName('P');
		
			if (objP[0].style.padding.length < 1) objP[0].style.padding = "0px 10px 0px 10px";
		
			var paddingPLeft 	= Math.abs(newX-employees[objName]['oldx'])+9+"px";
			var paddingPRight 	= parseInt(objP[0].style.paddingRight)-1;
			var paddingPTop 	= objP[0].style.paddingTop;
			var paddingPBottom 	= objP[0].style.paddingBottom;

			objP[0].style.padding = paddingPTop + ' ' + paddingPRight + 'px ' + paddingPBottom + ' ' + paddingPLeft;
	}
	else
	{
		/* restore */		
		closeManual (objName);
	}
}

function closeManual (idVar)
{
		/* restore */

		var objName = idVar;

		state = null;

		document.getElementById('img_small_'+objName).style.display = 'block';
		document.getElementById('img_large_'+objName).style.display = 'none';

		var newWidth = 322;
		var newHeight = 80;
		var newX = employees[objName]['oldx'];
		var newY = employees[objName]['oldy'];
	
		document.getElementById('div_'+objName).style.width = newWidth+"px";
		document.getElementById('div_'+objName).style.height = newHeight+"px";
		document.getElementById('div_'+objName).style.left = newX+"px";
		document.getElementById('div_'+objName).style.top = newY+"px";
		document.getElementById('div_'+objName).style.zIndex = '9';

		/* style full block */
		document.getElementById('div_'+objName).style.border = '0px solid #e6e6e6';
		document.getElementById('div_'+objName).style.borderBottom = '1px solid #e6e6e6';		

		/* position h3 */
		objH3 = document.getElementById('div_'+objName).getElementsByTagName('H3');
		objH3[0].style.padding = "10px 10px 0px 10px";
	
		/* position p */
		objP = document.getElementById('div_'+objName).getElementsByTagName('P');
		objP[0].style.padding = "0px 10px 0px 10px";
}

function initEmployerConfig ()
{
	employees[22] = Array();
	employees[22]['name'] 		=	'Erik Zoomers';
	employees[22]['x'] 		=	0;
	employees[22]['y'] 		=	-21;
	employees[22]['oldx'] 		=	0;
	employees[22]['oldy'] 		=	0;
	employees[22]['width'] 		=	459;
	employees[22]['height'] 	=	548;

	employees[25] = Array();
	employees[25]['name'] 		=	'Jeroen';
	employees[25]['x'] 		=	0;
	employees[25]['y'] 		=	20;
	employees[25]['oldx'] 		=	0;
	employees[25]['oldy'] 		=	85;
	employees[25]['width'] 		=	586;
	employees[25]['height'] 	=	434;

	employees[27] = Array();
	employees[27]['name'] 		=	'Eric';
	employees[27]['x'] 		=	0;
	employees[27]['y'] 		=	-45;
	employees[27]['oldx'] 		=	0;
	employees[27]['oldy'] 		=	170;
	employees[27]['width'] 		=	527;
	employees[27]['height'] 	=	636;

	employees[29] = Array();
	employees[29]['name'] 		=	'Fred-Jan';
	employees[29]['x'] 		=	0;
	employees[29]['y'] 		=	226;
	employees[29]['oldx'] 		=	0;
	employees[29]['oldy'] 		=	255;
	employees[29]['width'] 		=	613;
	employees[29]['height'] 	=	504;

	employees[31] = Array();
	employees[31]['name'] 		=	'Tjeerd';
	employees[31]['x'] 		=	0;
	employees[31]['y'] 		=	317;
	employees[31]['oldx'] 		=	0;
	employees[31]['oldy'] 		=	340;
	employees[31]['width'] 		=	437;
	employees[31]['height'] 	=	509;

	employees[32] = Array();
	employees[32]['name'] 		=	'Key';
	employees[32]['x'] 		=	0;
	employees[32]['y'] 		=	368;
	employees[32]['oldx'] 		=	0;
	employees[32]['oldy'] 		=	425;
	employees[32]['width'] 		=	587;
	employees[32]['height'] 	=	359;

	employees[102] = Array();
	employees[102]['name'] 		=	'Tom';
	employees[102]['x'] 		=	0;
	employees[102]['y'] 		=	391;
	employees[102]['oldx'] 		=	0;
	employees[102]['oldy'] 		=	425;
	employees[102]['width'] 	=	559;
	employees[102]['height'] 	=	529;

	employees[23] = Array();
	employees[23]['name'] 		=	'Sander';
	employees[23]['x'] 		=	207;
	employees[23]['y'] 		=	-21;
	employees[23]['oldx'] 		=	327;
	employees[23]['oldy'] 		=	0;
	employees[23]['width'] 		=	440;
	employees[23]['height'] 	=	588;

	employees[26] = Array();
	employees[26]['name'] 		=	'Thea';
	employees[26]['x'] 		=	293;
	employees[26]['y'] 		=	66;
	employees[26]['oldx'] 		=	327;
	employees[26]['oldy'] 		=	85;
	employees[26]['width'] 		=	354;
	employees[26]['height'] 	=	470;

	employees[76] = Array();
	employees[76]['name'] 		=	'Iris';
	employees[76]['x'] 		=	51;
	employees[76]['y'] 		=	146;
	employees[76]['oldx'] 		=	327;
	employees[76]['oldy'] 		=	170;
	employees[76]['width'] 		=	596;
	employees[76]['height'] 	=	297;

	employees[28] = Array();
	employees[28]['name'] 		=	'Ivanka';
	employees[28]['x'] 		=	233;
	employees[28]['y'] 		=	232;
	employees[28]['oldx'] 		=	327;
	employees[28]['oldy'] 		=	255;
	employees[28]['width'] 		=	414;
	employees[28]['height'] 	=	515;

	employees[30] = Array();
	employees[30]['name'] 		=	'Carlos';
	employees[30]['x'] 		=	193;
	employees[30]['y'] 		=	316;
	employees[30]['oldx'] 		=	327;
	employees[30]['oldy'] 		=	340;
	employees[30]['width'] 		=	454;
	employees[30]['height'] 	=	530;

	employees[32] = Array();
	employees[32]['name'] 		=	'Femke';
	employees[32]['x'] 		=	260;
	employees[32]['y'] 		=	397;
	employees[32]['oldx'] 		=	327;
	employees[32]['oldy'] 		=	425;
	employees[32]['width'] 		=	387;
	employees[32]['height'] 	=	370;
}

/* CARLOS */

var delay=500;
var inSpeed=0.2;
var outSpeed=0.5;
var timer=null;
var holder;
var busy=false;

function sleep(mode,origin) {
	holder=origin;
	
	if (mode) timer=setTimeout('flipOut("hover","")',delay);
	else {
		if(timer) {
			clearTimeout(timer);
			timer=null;
		}
	}
}

function flipOut (mode,origin) {

	var moveIn=inSpeed;
	var moveOut=outSpeed

	switch(mode) {
		case 'click':
			var target=getElementsByClassName(origin.parentNode,'div','Detail')[0];
			var closer=getElementsByClassName(origin.parentNode.parentNode,'div','Detail');
		break;
		
		case 'hover':
			if (busy==true) return;
			var target=getElementsByClassName(holder,'div','Detail')[0];
			var closer=getElementsByClassName(holder.parentNode,'div','Detail');
		break;

		case 'vacature':
			var target=getElementsByClassName(origin.parentNode,'div','Detail')[0];
			var closer=getElementsByClassName(origin.parentNode.parentNode,'div','Detail');
			moveIn=moveIn*2;
			moveOut=moveOut*2;
		break;
	}
			
	for(var i=0; i<closer.length; i++){
		if (closer[i].value=='open') {
			if (closer[i] == target && mode != 'vacature') return;
			Safari('up');
			new Effect.BlindUp(closer[i], { queue: {position: 'end', scope: 'project', limit: 3}, duration: moveIn, afterFinish: function() { closer[i].value='closed' } });
			if (closer[i] == target && mode == 'vacature') { return }
			break;
		}
	}

	busy=true;
	target.value='open';
	Safari('down');
	new Effect.BlindDown(target, { queue: {position: 'end', scope: 'project', limit: 3}, duration: moveOut, afterFinish: function () { busy=false;  } });
}
function Safari (mode) {
	if(navigator.userAgent.match("Safari")) {
		if (mode=='up') {
			document.getElementById("Footer").style.position="relative";
			document.getElementById("Footer").style.bottom="-84px";
			document.getElementById("Footer").style.marginTop="0px";
		}
		else {
			document.getElementById("Footer").style.position="relative";
			document.getElementById("Footer").style.bottom="0px";
			document.getElementById("Footer").style.marginTop="-50px";
		}
	}
}

function Active(ID) {
	var moveIn=inSpeed;
	var moveOut=outSpeed

	var target=getElementsByClassName(document.getElementById(ID),'div','Detail')[0];

	target.value='open';
	Safari('down');
	new Effect.BlindDown(target, { queue: {position: 'end', scope: 'project', limit: 3}, duration: moveOut, afterFinish: function () { busy=false; Jumper(ID) } });
}

function Jumper(ID) {
	target=document.getElementById(ID);
	if ((target.offsetTop+target.offsetHeight+50) > document.body.clientHeight) location.hash=ID;
}

function MP () {
	replacements=getElementsByClassName(document,'p','customMovie');
	
	for (i=0;i<replacements.length;i++)
	{
		origin = replacements[i];

		if (origin.style.content.substr(0,1)=="'" || origin.style.content.substr(0,1) == '"')
			data = origin.style.content.substr(1,origin.style.content.length-2);
		else
			data = origin.style.content;

		data = data.split(',');
		
		url = '/client/websight/upload/video/'+data[0];
		width = data[1];
		height = parseInt(data[2])+70;
		image = '/client/websight/upload/video/'+data[3];
	
		mediaHTML = '<span style="background-image: url('+image+'); background-repeat: no-repeat; background-position: top; display: block">';
		mediaHTML += '<OBJECT ID="Video'+parseInt(Math.random(100))+'" width="'+width+'" height="'+height+'" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" type="application/x-oleobject" VIEWASTEXT><PARAM NAME="FileName" VALUE="'+url+'"><PARAM NAME="ShowControls" VALUE="True"><PARAM NAME="ShowStatusBar" VALUE="True"><PARAM NAME="TransparentAtStart" Value="True"><PARAM NAME="AutoStart" Value="False"><PARAM NAME="AnimationatStart" Value="True"><PARAM NAME="autoSize" Value="false"><PARAM NAME="displaySize" Value="False"><PARAM NAME="enableContextMenu" Value="False"><PARAM NAME="uiMode" Value="invisible"><EMBED type="application/x-mplayer2" pluginspage = "http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" SRC="'+url+'" Name="MediaPlayer1" Width="'+width+'" Height="'+height+'" autoStart=0 transparentAtStart=1 animationAtStart=1 autoSize=0 ShowStatusBar=1 ShowControls=1 displaySize=0 enableContextMenu=0 uiMode="invisible" align="center"></EMBED></OBJECT>';
		mediaHTML += '</span>';

		//origin.innerHTML = mediaHTML;
		
		var Container = document.createElement('div');
		Container.style.width = width + "px";
		Container.style.height = height + "px";
		origin.parentNode.appendChild(Container);
		origin.parentNode.removeChild(origin);
		Container.innerHTML = mediaHTML;
	}

}


function getElementsByClassName(oElm, strTagName, strClassName){
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/-/g, "\-");
	var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++){
		oElement = arrElements[i];
		if(oRegExp.test(oElement.className)){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}