// timer.js

// global vars
var kleuren = new Array()
// var blokken = new Array()
var blokje
var tijd
var teller = 0
var start
var percent
var divT
var divB
var i


window.onload = function() {
	kleuren[0] = '#360'
	kleuren[1] = '#690'
	kleuren[2] = '#993'
	kleuren[3] = '#CC0'
	kleuren[4] = '#F90'
	kleuren[5] = '#900'

	i = -1
	if(document.getElementById('timer') && document.getElementById('blokjes')) {
		divT = document.getElementById('timer')
		divB = document.getElementById('blokjes')
		// tijd = document.timer_form.timer_field.value
		tijd = document.getElementById('timer_field').value;
		timer(tijd)
	}
}

function timer(seconden) {
	if(i < 0) {
		tijd = seconden
		start = tijd
		percent = start/6	// zes delen (Donger groen -> donker rood)
		i++
	}
	if(tijd < start - percent * (i + 1) + 1) { i++ }
	toonBlokjes(kleuren[i]);
	divT.innerHTML = '<div style="color:' + kleuren[i] + '; font-weight:bold;">' + tijd-- + '</div>'
	if(tijd >= 0) {
		setTimeout('timer(tijd)',1000)
	} else {
		divT.innerHTML = '<div style="color:' + kleuren[5] + '; font-weight:bold;">BUITEN TIJD</div>'
	}
}

function toonBlokjes(kleur) {
	var teller
	var leftPx
	var tiendeTijd = Math.round(start/10)
	var blokjesHTML = ''
	var aantal

	if(tijd <= start - 10 * tiendeTijd) {
		aantal = 0
	} else if (tijd <= start - 9 * tiendeTijd) {
			aantal = 1
	} else if (tijd <= start - 8 * tiendeTijd) {
			aantal = 2
	} else if (tijd <= start - 7 * tiendeTijd) {
			aantal = 3
	} else if (tijd <= start - 6 * tiendeTijd) {
			aantal = 4
	} else if (tijd <= start - 5 * tiendeTijd) {
			aantal = 5
	} else if (tijd <= start - 4 * tiendeTijd) {
			aantal = 6
	} else if (tijd <= start - 3 * tiendeTijd) {
			aantal = 7
	} else if (tijd <= start - 2 * tiendeTijd) {
			aantal = 8
	} else if (tijd <= start - 1 * tiendeTijd) {
			aantal = 9
	} else {
		aantal = 10
	}

	for(teller = 0; teller < aantal; teller++) {
		leftPx = teller == 0 ? 13 * (teller) + 27 : 13 * (teller) + 27 + teller
		blokjesHTML += '<span style="background-color:' + kleur + '; left:' + leftPx + 'px; font-size:1px; position:absolute; width:13px; height:13px;"></span>'
	}
	divB.innerHTML = blokjesHTML
}