$(document).ready(function(){
	
	var aClock1 = $('#analog-clock1');
	var clockWidthHeight1 = aClock1.width();//width and height of the clock
	
	var aClock2 = $('#analog-clock2');
	var clockWidthHeight2 = aClock2.width();//width and height of the clock
	
	var aClock3 = $('#analog-clock3');
	var clockWidthHeight3 = aClock3.width();//width and height of the clock
	
	var aClock4 = $('#analog-clock4');
	var clockWidthHeight4 = aClock4.width();//width and height of the clock
	
	
	function startClock(){
		
		aClock1.css({"height":clockWidthHeight1 +"px"});//sets the height if .js is enabled. If not, height = 0;
		aClock1.fadeIn();//fade it in
		
		aClock2.css({"height":clockWidthHeight2 +"px"});//sets the height if .js is enabled. If not, height = 0;
		aClock2.fadeIn();//fade it in
		
		aClock3.css({"height":clockWidthHeight3 +"px"});//sets the height if .js is enabled. If not, height = 0;
		aClock3.fadeIn();//fade it in
		
		aClock4.css({"height":clockWidthHeight4 +"px"});//sets the height if .js is enabled. If not, height = 0;
		aClock4.fadeIn();//fade it in
		
		//call rotatehands function
		setInterval(function(){
		
			rotateHands();
			
		}, 200);//1000 = 1 second
			
		rotateHands();//make sure they start in the right position
		
	}
		
	function rotateHands(){
		
		//get current time/date from local computer
		var now1 = new Date();
		
		//set the second hand
		var secondAngle1 = 360/60 * now1.getSeconds();//turn the time into angle
		$('#secondHand1').rotate(secondAngle1, 'abs');//set the hand angle
		$('#secondHand1').css( { "left": (clockWidthHeight1 - $('#secondHand1').width())/2 + "px", "top":(clockWidthHeight1 - $('#secondHand1').height())/2 + "px" });//set x and y pos

		//set the minute hand
		var minuteAngle1 = 360/60 * ((now1.getMinutes()) - 30);//turn the time into angle
		$('#minuteHand1').rotate(minuteAngle1, 'abs');//set the hand angle
		$('#minuteHand1').css( { "left": (clockWidthHeight1 - $('#minuteHand1').width())/2 + "px", "top":(clockWidthHeight1 - $('#minuteHand1').height())/2 + "px" });//set x and y pos
		
		//set the hour hand
		var hourAngle1 = 360/12 * ((now1.getHours()) - 9);//turn the time into angle
		$('#hourHand1').rotate((hourAngle1 + minuteAngle1/12)%360, 'abs');//set the hand angle
		$('#hourHand1').css( { "left": (clockWidthHeight1 - $('#hourHand1').width())/2 + "px", "top":(clockWidthHeight1 - $('#hourHand1').height())/2 + "px" });//set x and y pos
		
		
		
		var now2 = new Date();
	
	    var secondAngle2 = 360/60 * now2.getSeconds();//turn the time into angle
		$('#secondHand2').rotate(secondAngle2, 'abs');//set the hand angle
		$('#secondHand2').css( { "left": (clockWidthHeight2 - $('#secondHand2').width())/2 + "px", "top":(clockWidthHeight2 - $('#secondHand2').height())/2 + "px" });//set x and y pos

		//set the minute hand
		var minuteAngle2 = 360/60 * ((now2.getMinutes()) - 30);//turn the time into angle
		$('#minuteHand2').rotate(minuteAngle2, 'abs');//set the hand angle
		$('#minuteHand2').css( { "left": (clockWidthHeight2 - $('#minuteHand2').width())/2 + "px", "top":(clockWidthHeight2 - $('#minuteHand2').height())/2 + "px" });//set x and y pos
		
		//set the hour hand
		var hourAngle2 = 360/12 * ((now2.getHours()) - 4);//turn the time into angle
		$('#hourHand2').rotate((hourAngle2 + minuteAngle2/12)%360, 'abs');//set the hand angle
		$('#hourHand2').css( { "left": (clockWidthHeight2 - $('#hourHand2').width())/2 + "px", "top":(clockWidthHeight2 - $('#hourHand2').height())/2 + "px" });//set x and y pos


		var now3 = new Date();
	
	    var secondAngle3 = 360/60 * now3.getSeconds();//turn the time into angle
		$('#secondHand3').rotate(secondAngle3, 'abs');//set the hand angle
		$('#secondHand3').css( { "left": (clockWidthHeight3 - $('#secondHand3').width())/2 + "px", "top":(clockWidthHeight3 - $('#secondHand3').height())/2 + "px" });//set x and y pos

		//set the minute hand
		var minuteAngle3 = 360/60 * ((now3.getMinutes()) - 30);//turn the time into angle
		$('#minuteHand3').rotate(minuteAngle3, 'abs');//set the hand angle
		$('#minuteHand3').css( { "left": (clockWidthHeight3 - $('#minuteHand3').width())/2 + "px", "top":(clockWidthHeight3 - $('#minuteHand3').height())/2 + "px" });//set x and y pos
		
		//set the hour hand
		var hourAngle3 = 360/12 * ((now3.getHours()) + 4);//turn the time into angle
		$('#hourHand3').rotate((hourAngle3 + minuteAngle3/12)%360, 'abs');//set the hand angle
		$('#hourHand3').css( { "left": (clockWidthHeight3 - $('#hourHand3').width())/2 + "px", "top":(clockWidthHeight3 - $('#hourHand3').height())/2 + "px" });//set x and y pos
		
		
		var now4 = new Date();
	
	var secondAngle4 = 360/60 * now4.getSeconds();//turn the time into angle
		$('#secondHand4').rotate(secondAngle4, 'abs');//set the hand angle
		$('#secondHand4').css( { "left": (clockWidthHeight4 - $('#secondHand4').width())/2 + "px", "top":(clockWidthHeight4 - $('#secondHand4').height())/2 + "px" });//set x and y pos

		//set the minute hand
		var minuteAngle4 = 360/60 * now4.getMinutes();//turn the time into angle
		$('#minuteHand4').rotate(minuteAngle4, 'abs');//set the hand angle
		$('#minuteHand4').css( { "left": (clockWidthHeight4 - $('#minuteHand4').width())/2 + "px", "top":(clockWidthHeight4 - $('#minuteHand4').height())/2 + "px" });//set x and y pos
		
		//set the hour hand
		var hourAngle4 = 360/12 * now4.getHours();//turn the time into angle
		$('#hourHand4').rotate((hourAngle4 + minuteAngle4/12)%360, 'abs');//set the hand angle
		$('#hourHand4').css( { "left": (clockWidthHeight4 - $('#hourHand4').width())/2 + "px", "top":(clockWidthHeight4 - $('#hourHand4').height())/2 + "px" });//set x and y pos
	};
	
	startClock();
	
	
	
	
});