$(document).ready(function(){
	
	var aClock4 = $('#clock4');
	var clockWidthHeight4 = aClock4.width();//width and height of the clock
	
	function startClock4(){
		
		aClock4.css({"height":clockWidthHeight4 +"px"});//sets the height if .js is enabled. If not, height = 0;
		aClock4.show();//fade it in
		
		//call rotatehands function
		setInterval(function(){
		
			rotateHands4();
			
		}, 200);//1000 = 1 second
			
		rotateHands4();//make sure they start in the right position
		
	}
		
	function rotateHands4(){
		
		//get current time/date from local computer
		var now4 = new Date();
		var sidney = now4.toGMTString();
		var curdate = new Date();
		var offset = curdate.getTimezoneOffset()/60;
		var sidney = now4.getHours() +offset +10;
		
		// helle Uhr oder dunkle Uhr
		var stunde4 = sidney;
		 if (stunde4 > 6 && stunde4 < 18) {
			 $("#bg4").attr("src","img/clockBg_tag.png"); 
			 $("#hourHand4").attr("src","img/hourHand_tag.png"); 
			 $("#minuteHand4").attr("src","img/minuteHand_tag.png"); 
		 }
		 else {
		     $("#bg4").attr("src","img/clockBg_nacht.png"); 
			 $("#hourHand4").attr("src","img/hourHand_nacht.png"); 
			 $("#minuteHand4").attr("src","img/minuteHand_nacht.png"); 
		 }
		
		/*//set the second hand
		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 * sidney;//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

	};
	
	startClock4();
	
	
});