namesArray = new Array();
cookieName = 'WieIsDeSjaak'


function enterField(fieldID, defaultFieldValue) {
	// Empty field if it contains the default value
	if (document.getElementById(fieldID).value == defaultFieldValue) {
		document.getElementById(fieldID).value = '';		
	}	 
}


function clearField(field) {
	// Remove ':' from input fields
	field.value = field.value.replace(/\:/g,'');
}


function processField(fieldID, defaultFieldValue) {
	// Check field value
	if (document.getElementById(fieldID).value == '') {
		formatField(fieldID, '#bbbbbb', 'italic');
		document.getElementById(fieldID).value = defaultFieldValue;
	}	 
	else if (document.getElementById(fieldID).value != defaultFieldValue) {
		formatField(fieldID, '#50404d', 'normal');
	}
	else {
		formatField(fieldID, '#bbbbbb', 'italic');
	}
	saveNames();
}


function formatField(fieldID, textColor, textStyle) {
	// Restyle field
	document.getElementById(fieldID).style.color = textColor;
	document.getElementById(fieldID).style.fontStyle = textStyle;
}


function saveNames() {
	// Save names to Array and Cookie
	namesArray[0] = document.getElementById('field1').value;
	namesArray[1] = document.getElementById('field2').value;
	namesArray[2] = document.getElementById('field3').value;
	namesArray[3] = document.getElementById('field4').value;
	namesArray[4] = document.getElementById('field5').value;
	namesArray[5] = document.getElementById('field6').value;
	namesCookieValue = escape(document.getElementById('field1').value)
						 + ':' + escape(document.getElementById('field2').value) 
						 + ':' + escape(document.getElementById('field3').value) 
						 + ':' + escape(document.getElementById('field4').value) 
						 + ':' + escape(document.getElementById('field5').value) 
						 + ':' + escape(document.getElementById('field6').value);
	var today = new Date();
	var expire = new Date();
	expire.setTime(today.getTime() + 3600000*24*365);
	document.cookie = cookieName + '=' + namesCookieValue + ';expires='+expire.toGMTString();
}


window.onload=function() {
	// Show homepage only
	document.getElementById('result').style.display = 'none';
	document.getElementById('doorsturen').style.display = 'none';
	document.getElementById('doorsturenoke').style.display = 'none';
	document.getElementById('socialmedia').style.display = 'none';
	// Show thankyou page after Mail-A-Friend
	if(location.search.indexOf('page=') != -1) {
		var whichPage = location.search.substring(6);
		Show(whichPage, '');
	}
	// Load names from cookie and place in Array and Form
	if (document.cookie.length>0) {
		cookieStart = document.cookie.indexOf(cookieName + '=');
		if (cookieStart != -1) {
		  cookieStart = cookieStart + cookieName.length+1;
		  cookieEnd = document.cookie.indexOf(';', cookieStart);
		  if (cookieEnd == -1) cookieEnd = document.cookie.length;
		  namesCookieValue = unescape(document.cookie.substring(cookieStart, cookieEnd));
		}
	}
	namesArray = namesCookieValue.split(':');
	document.getElementById('field1').value = namesArray[0];
	document.getElementById('field2').value = namesArray[1]; 
	document.getElementById('field3').value = namesArray[2]; 
	document.getElementById('field4').value = namesArray[3]; 
	document.getElementById('field5').value = namesArray[4]; 
	document.getElementById('field6').value = namesArray[5]; 
	processField('field1', 'Sjaak 1');
	processField('field2', 'Sjaak 2');
	processField('field3', 'Sjaak 3');
	processField('field4', 'Sjaak 4');
	processField('field5', 'Sjaak 5');
	processField('field6', 'Sjaak 6');
}


function Sjaak() {
	// Determine de sjaak
	competitorsArray = new Array(); c=0;
	for(var s=0; s<namesArray.length; s++) {
		var noCompetitor = /Sjaak [1|2|3|4|5|6]/.test(namesArray[s])
		if (!noCompetitor) {
			competitorsArray[c] = namesArray[s];
			c++
		}
	}
	if (competitorsArray.length > 1) {	
		sjaak = Math.floor(Math.random()*competitorsArray.length);
		Show('result', competitorsArray[sjaak]);
	} else {
		alert('Voor a.u.b. minimaal 2 personen in.');
	}
}

function Show(page, desjaak) {
	// Show form or de sjaak
	if (page == 'result') {
		document.getElementById('desjaak').innerHTML = desjaak;
		document.getElementById('form').style.display = 'none';
		document.getElementById('doorsturen').style.display = 'none';
		document.getElementById('doorsturenoke').style.display = 'none';
		document.getElementById('result').style.display = 'block';
		document.getElementById('socialmedia').style.display = 'block';
	} else if (page == 'doorsturen') {
		document.getElementById('form').style.display = 'none';
		document.getElementById('doorsturen').style.display = 'block';
		document.getElementById('doorsturenoke').style.display = 'none';
		document.getElementById('result').style.display = 'none';
		document.getElementById('socialmedia').style.display = 'none';
	} else if (page == 'doorsturenoke') {
		document.getElementById('form').style.display = 'none';
		document.getElementById('doorsturen').style.display = 'none';
		document.getElementById('doorsturenoke').style.display = 'block';
		document.getElementById('result').style.display = 'none';
		document.getElementById('socialmedia').style.display = 'none';
	} else {
		document.getElementById('result').style.display = 'none';
		document.getElementById('doorsturen').style.display = 'none';
		document.getElementById('doorsturenoke').style.display = 'none';
		document.getElementById('socialmedia').style.display = 'none';
		document.getElementById('form').style.display = 'block';
	}
}