var color = 0;
var path = "";
var showTime = false;

function displayTime() {
	date = new Date();
	off = "url(" + path + "off.png)";
	on = "url(" + path +  getImage(color) + ")";
	h = date.getHours();
	m = date.getMinutes();
	s = date.getSeconds();
	
	// time
	if(showTime) {
		document.getElementById("binary_clock_string").innerHTML = (h < 10 ? "0" + h : h) + ":"
													+ (m < 10 ? "0" + m : m) + ":"
													+ (s < 10 ? "0" + s : s);
	}
	
	// hours
	rest = displayFirstRow("h", h);
	displaySecondRow("h", rest);
	
	// minutes
	rest = displayFirstRow("m", m);
	displaySecondRow("m", rest);
	
	// seconds
	rest = displayFirstRow("s", s);
	displaySecondRow("s", rest);
}

function displayFirstRow(type, value) {
	if(value / 50 >= 1) {
		document.getElementById(type + "1_4").style.backgroundImage = on;
		document.getElementById(type + "1_2").style.backgroundImage = off;
		document.getElementById(type + "1_1").style.backgroundImage = on;
		value = value - 50;
	}
	else if(value / 40 >= 1) {
		document.getElementById(type + "1_4").style.backgroundImage = on;
		document.getElementById(type + "1_2").style.backgroundImage = off;
		document.getElementById(type + "1_1").style.backgroundImage = off;
		value = value - 40;
	}
	else if(value / 30 >= 1) {
		document.getElementById(type + "1_4").style.backgroundImage = off;
		document.getElementById(type + "1_2").style.backgroundImage = on;
		document.getElementById(type + "1_1").style.backgroundImage = on;
		value = value - 30;
	}
	else if(value / 20 >= 1) {
		document.getElementById(type + "1_4").style.backgroundImage = off;
		document.getElementById(type + "1_2").style.backgroundImage = on;
		document.getElementById(type + "1_1").style.backgroundImage = off;
		value = value - 20;
	}
	else if(value / 10 >= 1) {
		document.getElementById(type + "1_4").style.backgroundImage = off;
		document.getElementById(type + "1_2").style.backgroundImage = off;
		document.getElementById(type + "1_1").style.backgroundImage = on;
		value = value - 10;
	} else {
		document.getElementById(type + "1_4").style.backgroundImage = off;
		document.getElementById(type + "1_2").style.backgroundImage = off;
		document.getElementById(type + "1_1").style.backgroundImage = off;
	}
	return value;
}

function displaySecondRow(type, value) {
	for(i = 3; i >= 0; i--) {
		if(value / Math.pow(2,i) >= 1) {
			document.getElementById(type + "2_" + Math.pow(2,i)).style.backgroundImage = on;
			value = value - Math.pow(2,i);
		} else
			document.getElementById(type + "2_" + Math.pow(2,i)).style.backgroundImage = off;
	}
}

function getImage(index) {
	switch(index) {
		case 0:
			return "red.png";
		case 1:
			return "green.png";
		case 2:
			return "blue.png";
		case 3:
			return "orange.png";
		case 4:
			return "pink.png";
	}
}

function startClock(st, c, p) {
	st == 0 ? showTime = false : showTime = true;
	color = parseInt(c);
	path = p;
	setInterval("displayTime()", 1000);
}