window.onload = init;

function init() {
	setTijd();
}

function setTijd() {
	//var time = new Array();
	var hours1;
	var hours2;
	var mins1;
	var mins2;
	
	hours1Element = document.getElementById("hours1");
	hours2Element = document.getElementById("hours2");
	mins1Element = document.getElementById("mins1");
	mins2Element = document.getElementById("mins2");
	
	var now = new Date();
	if (now.getHours().toString().length == 1) {
		hours1 = "0";
		hours2 = now.getHours().toString();
	} else {
		hours1 = now.getHours().toString().substr(0,1);
		hours2 = now.getHours().toString().substr(1,1);
	}
	if (now.getMinutes().toString().length == 1) {
		mins1 = "0";
		mins2 = now.getMinutes().toString();
	} else {
		mins1 = now.getMinutes().toString().substr(0,1);
		mins2 = now.getMinutes().toString().substr(1,1);
	}
	setTimeElements(hours1, hours1Element);
	setTimeElements(hours2, hours2Element);
	setTimeElements(mins1, mins1Element);
	setTimeElements(mins2, mins2Element);
	if (now.getSeconds() % 2 == 1) {
		document.getElementById("separ").style.visibility = "hidden";
	} else {
		document.getElementById("separ").style.visibility = "visible";
	}
	setTimeout("setTijd()", 1000);
}

function setTimeElements(value, id) {
		switch (value) {
		case ("0"):
			id.src =  "images/icons/0.png";
		break; 
		case ("1"):
			id.src =  "images/icons/1.png";
		break; 
		case ("2"):
			id.src =  "images/icons/2.png";
		break; 
		case ("3"):
			id.src =  "images/icons/3.png";
		break; 
		case ("4"):
			id.src =  "images/icons/4.png";
		break; 
		case ("5"):
			id.src =  "images/icons/5.png";
		break; 
		case ("6"):
			id.src =  "images/icons/6.png";
		break; 
		case ("7"):
			id.src =  "images/icons/7.png";
		break; 
		case ("8"):
			id.src =  "images/icons/8.png";
		break; 
		case ("9"):
			id.src =  "images/icons/9.png";
		break;
	}
}