$(document).ready(function(){
	url = window.location.href.split("/");
	url = "http://"+url[2]+"/";
	
	var clockWidth = 224;//width and height of the clock
	var i = 0;
	//add all the images to the page
	//$('#clock').append("<img id='bg' src='"+url+"theme/helderziendenTheme/images/clock-bg.png' width='224px' height='224px' alt='clock face' /><img id='hourHand' src='"+url+"theme/helderziendenTheme/images/clock-small.png' alt='hour hand' /><img id='minuteHand' src='"+url+"theme/helderziendenTheme/images/clock-big.png' alt='minute hand' /><img id='secondHand' src='"+url+"theme/helderziendenTheme/images/clock-seconds.png' alt='second hand' /><div class='bullet'></div>");
	
	rotateHands();//make sure they start in the right position
	
	//call rotatehands function every second (1000 ms)
	setInterval(function(){
		rotateHands();
	}, 1000);
		
	function rotateHands()
	{
		//get current time/date from local computer
		var now = new Date();
		
		//set the second hand
		var secondAngle = 360/60 * now.getSeconds();//turn the time into angle
		$('#secondHand').rotate(secondAngle, 'abs');//set the hand angle
		$('#secondHand').css( { "left": (224 - $('#secondHand').width())/2 + "px", "top":(224 - $('#secondHand').height())/2 + "px" });//set x and y pos

		//set the minute hand
		var minuteAngle = 360/60 * now.getMinutes();//turn the time into angle
		$('#minuteHand').rotate(minuteAngle, 'abs');//set the hand angle
		$('#minuteHand').css( { "left": (224 - $('#minuteHand').width())/2 + "px", "top":(224 - $('#minuteHand').height())/2 + "px" });//set x and y pos
		
		//set the hour hand
		var hourAngle = 360/12 * now.getHours();//turn the time into angle
		$('#hourHand').rotate((hourAngle + minuteAngle/12)%360, 'abs');//set the hand angle
		$('#hourHand').css( { "left": (224 - $('#hourHand').width())/2 + "px", "top":(224 - $('#hourHand').height())/2 + "px" });//set x and y pos
		
		if(i == 0 && !$.browser.msie)
		{
			$('#hourHand').hide();
			$('#minuteHand').hide();
			$('#secondHand').hide();
		}
		else
		{
			$('#hourHand').show();
			$('#minuteHand').show();
			$('#secondHand').show();
		}
		i++;
	};
	
});