$(document).ready(function(){
	
	var aClock5 = $('#clock5');
	var clockWidthHeight5 = aClock5.width();//width and height of the clock
	
	function startClock5(){
		
		aClock5.css({"height":clockWidthHeight5 +"px"});//sets the height if .js is enabled. If not, height = 0;
		aClock5.show();//fade it in
		
		//call rotatehands function
		setInterval(function(){
		
			rotateHands5();
			
		}, 200);//1000 = 1 second
			
		rotateHands5();//make sure they start in the right position
		
	}
		
	function rotateHands5(){
		
		//get current time/date from local computer
		var now5 = new Date();
		var shanghai = now5.toGMTString();
		var curdate = new Date();
		var offset = curdate.getTimezoneOffset()/60;
		var shanghai = now5.getHours() +offset +8;
		
		// helle Uhr oder dunkle Uhr
		var stunde5 = shanghai;
		 if (stunde5 > 6 && stunde5 < 18) {
			 $("#bg5").attr("src","img/clockBg_tag.png"); 
			 $("#hourHand5").attr("src","img/hourHand_tag.png"); 
			 $("#minuteHand5").attr("src","img/minuteHand_tag.png"); 
		 }
		 else {
		     $("#bg5").attr("src","img/clockBg_nacht.png"); 
			 $("#hourHand5").attr("src","img/hourHand_nacht.png"); 
			 $("#minuteHand5").attr("src","img/minuteHand_nacht.png"); 
		 }
		
		//set the second hand
		/*var secondAngle5 = 360/60 * now5.getSeconds();//turn the time into angle
		$('#secondHand5').rotate(secondAngle5, 'abs');//set the hand angle
		$('#secondHand5').css( { "left": (clockWidthHeight5 - $('#secondHand5').width())/2 + "px", "top":(clockWidthHeight5 - $('#secondHand5').height())/2 + "px" });//set x and y pos*/

		//set the minute hand
		var minuteAngle5 = 360/60 * now5.getMinutes();//turn the time into angle
		$('#minuteHand5').rotate(minuteAngle5, 'abs');//set the hand angle
		$('#minuteHand5').css( { "left": (clockWidthHeight5 - $('#minuteHand5').width())/2 + "px", "top":(clockWidthHeight5 - $('#minuteHand5').height())/2 + "px" });//set x and y pos
		
		//set the hour hand
		var hourAngle5 = 360/12 * shanghai;//turn the time into angle
		$('#hourHand5').rotate((hourAngle5 + minuteAngle5/12)%360, 'abs');//set the hand angle
		$('#hourHand5').css( { "left": (clockWidthHeight5 - $('#hourHand5').width())/2 + "px", "top":(clockWidthHeight5 - $('#hourHand5').height())/2 + "px" });//set x and y pos

	};
	
	startClock5();
	
	
});