var h = 34;
var m = 46;
var s = 58;
var dial = "3 4 5 6 7 8 9 10 11 12 1 2";
dial = dial.split(" ");
var e = 360/dial.length;
var y = 100;
var x = 100;
var cyx = 1;
var theDial = [];
var theDots = [];
var theHours = [];
var theMinutes = [];
var theSeconds = [];
var idx = document.getElementsByTagName('div').length;
var pix = "px";

function clock(){
	var time = new Date();

	var secs = time.getSeconds();
	var secOffSet = secs - 15;
	if (secs < 15){ 
	 secOffSet = secs+45;
	}
	var sec = Math.PI * (secOffSet/30);

	var mins = time.getMinutes(); 
	var minOffSet = mins - 15;
	if (mins < 15){ 
	 minOffSet = mins+45;
	}
	var min = Math.PI * (minOffSet/30);

	var hrs = time.getHours();
	if (hrs > 12){
	 hrs -= 12;
	}
	var hrOffSet = hrs - 3;
	if (hrs < 3){ 
	 hrOffSet = hrs+9;
	}
	var hr = Math.PI * (hrOffSet/6) + Math.PI * time.getMinutes()/360;

	for (i=0; i < s; i++){
	 theSeconds[i].top = y + (i*cyx) * Math.sin(sec) + pix;
	 theSeconds[i].left = x + (i*cyx) * Math.cos(sec) + pix;
	}
	for (i=0; i < m; i++){
	 theMinutes[i].top = y + (i*cyx) * Math.sin(min) + pix;
	 theMinutes[i].left = x + (i*cyx) * Math.cos(min) + pix;
	}
	for (i=0; i < h; i++){
	 theHours[i].top = y + (i*cyx) * Math.sin(hr) + pix;
	 theHours[i].left = x + (i*cyx) * Math.cos(hr) + pix;
	}
	setTimeout(clock,100);
}

function init(){
	for (i=0; i < h; i++){
	 theHours[i] = document.getElementById("H"+(idx+i)).style;
	}
	for (i=0; i < m; i++){
	 theMinutes[i] = document.getElementById("M"+(idx+i)).style;
	}
	for (i=0; i < s; i++){
	 theSeconds[i] = document.getElementById("S"+(idx+i)).style;
	}
	clock();
}

function print_clock() {
	var fCol="#000000"; //face colour.
	var dCol="#000000"; //dots colour.
	var hCol="#000000"; //hours colour.
	var mCol="#000000"; //minutes colour.
	var sCol="#000000"; //seconds colour.
	
	//Alter nothing below! Alignments will be lost!
	
	var clockhtml='';
	
	clockhtml+='<div style="position:absolute;top:17px;left:7px;width:'+(x*2)+'px;height:'+(y*2)+'px">';
	
	for (i=0; i < h; i++){
		clockhtml+='<div id="H'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
		+'width:3px;height:3px;font-size:3px;background-color:'+hCol+'"><\/div>';
	}
	for (i=0; i < m; i++){
		clockhtml+='<div id="M'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
		+'width:2px;height:2px;font-size:2px;background-color:'+mCol+'"><\/div>';
	}

	for (i=0; i < s; i++){
		clockhtml+='<div id="S'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
		+'width:1px;height:1px;font-size:1px;background-color:'+sCol+'"><\/div>';
	}

	clockhtml+='<\/div>';
	document.getElementById('clock').innerHTML=clockhtml;
}