jQuery.fn.rotate = function(angle,whence) {
	var p = this.get(0);

	// we store the angle inside the image tag for persistence
	if (!whence) {
		p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
	} else {
		p.angle = angle;
	}

	if (p.angle >= 0) {
		var rotation = Math.PI * p.angle / 180;
	} else {
		var rotation = Math.PI * (360+p.angle) / 180;
	}
	var costheta = Math.cos(rotation);
	var sintheta = Math.sin(rotation);

	if (document.all && !window.opera) {
		var canvas = document.createElement('img');

		canvas.src = p.src;
		canvas.height = p.height;
		canvas.width = p.width;

		canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
	} else {
		var canvas = document.createElement('canvas');
		if (!p.oImage) {
			canvas.oImage = new Image();
			canvas.oImage.src = p.src;
		} else {
			canvas.oImage = p.oImage;
		}

		canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
		canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);

		var context = canvas.getContext('2d');
		context.save();
		if (rotation <= Math.PI/2) {
			context.translate(sintheta*canvas.oImage.height,0);
		} else if (rotation <= Math.PI) {
			context.translate(canvas.width,-costheta*canvas.oImage.height);
		} else if (rotation <= 1.5*Math.PI) {
			context.translate(-costheta*canvas.oImage.width,canvas.height);
		} else {
			context.translate(0,-sintheta*canvas.oImage.width);
		}
		context.rotate(rotation);
	try{	context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
	}catch(err) {}
		context.restore();
	}
	canvas.id = p.id;
	canvas.angle = p.angle;
	p.parentNode.replaceChild(canvas, p);
}

jQuery.fn.rotateRight = function(angle) {
	this.rotate(angle==undefined?90:angle);
}

jQuery.fn.rotateLeft = function(angle) {
	this.rotate(angle==undefined?-90:-angle);
}




$(document).ready(function(){
	
	var aClock = $('#analog-clock');
	var clockWidthHeight = aClock.width();
	var aClock2 = $('#analog-clock2');
	var clockWidthHeight2 = aClock2.width();
	var aClock3 = $('#analog-clock3');
	var clockWidthHeight2 = aClock2.width();
	
	function startClock(){
		
		aClock.css({"height":clockWidthHeight +"px"});
		aClock.fadeIn();
		aClock2.css({"height":clockWidthHeight +"px"});
		aClock2.fadeIn();
		aClock3.css({"height":clockWidthHeight +"px"});
		aClock3.fadeIn();
		//call rotatehands function
		setInterval(function(){
		
			rotateHands();
			
		}, 200);
			
		rotateHands();
	}
		
	function rotateHands(){
		
		var now = new Date((new Date()).setHours((new Date()).getHours()+shift3));
		
                var  now3=new Date((new Date()).setHours((new Date()).getHours()+shift2));
		
		var secondAngle = 360/60 * now.getSeconds();//turn the time into angle
		$('#secondHand3').rotate(secondAngle, 'abs');//set the hand angle
		$('#secondHand3').css( { "left": (clockWidthHeight - $('#secondHand3').width())/2 + "px", "top":(clockWidthHeight - $('#secondHand3').height())/2 + "px" });
		
		
		var minuteAngle = 360/60 * now.getMinutes();//turn the time into angle
		$('#minuteHand3').rotate(minuteAngle, 'abs');//set the hand angle
		$('#minuteHand3').css( { "left": (clockWidthHeight - $('#minuteHand3').width())/2 + "px", "top":(clockWidthHeight - $('#minuteHand3').height())/2 + "px" });
		
		
		var hourAngle = 360/12 * now.getHours();//turn the time into angle
		$('#hourHand3').rotate((hourAngle + minuteAngle/12)%360, 'abs');//set the hand angle
		$('#hourHand3').css( { "left": (clockWidthHeight - $('#hourHand3').width())/2 + "px", "top":(clockWidthHeight - $('#hourHand3').height())/2 + "px" });

                now=new Date((new Date()).setHours((new Date()).getHours()+shift1));
		//now.setHours((new Date).getHours()+1);
		 var secondAngle2 = 360/60 * now.getSeconds();//turn the time into angle
		$('#secondHand').rotate(secondAngle2, 'abs');//set the hand angle
		$('#secondHand').css( { "left": (clockWidthHeight - $('#secondHand').width())/2 + "px", "top":(clockWidthHeight - $('#secondHand').height())/2 + "px" });
		
		
		var minuteAngle2 = 360/60 * now.getMinutes();//turn the time into angle
		$('#minuteHand').rotate(minuteAngle2, 'abs');//set the hand angle
		$('#minuteHand').css( { "left": (clockWidthHeight - $('#minuteHand').width())/2 + "px", "top":(clockWidthHeight - $('#minuteHand').height())/2 + "px" });
		
		
		var hourAngle2 = 360/12 * now.getHours();//turn the time into angle
		$('#hourHand').rotate((hourAngle2 + minuteAngle2/12)%360, 'abs');//set the hand angle
		$('#hourHand').css( { "left": (clockWidthHeight - $('#hourHand').width())/2 + "px", "top":(clockWidthHeight - $('#hourHand').height())/2 + "px" });

              var secondAngle3 = 360/60 * now3.getSeconds();//turn the time into angle
		$('#secondHand2').rotate(secondAngle3, 'abs');//set the hand angle
		$('#secondHand2').css( { "left": (clockWidthHeight - $('#secondHand2').width())/2 + "px", "top":(clockWidthHeight - $('#secondHand2').height())/2 + "px" });
		
		
		var minuteAngle3 = 360/60 * now3.getMinutes();//turn the time into angle
		$('#minuteHand2').rotate(minuteAngle3, 'abs');//set the hand angle
		$('#minuteHand2').css( { "left": (clockWidthHeight - $('#minuteHand2').width())/2 + "px", "top":(clockWidthHeight - $('#minuteHand2').height())/2 + "px" });
		
		
		var hourAngle3 = 360/12 * now3.getHours();//turn the time into angle
		$('#hourHand2').rotate((hourAngle3 + minuteAngle3/12)%360, 'abs');//set the hand angle
		$('#hourHand2').css( { "left": (clockWidthHeight - $('#hourHand2').width())/2 + "px", "top":(clockWidthHeight - $('#hourHand2').height())/2 + "px" });
	};
	
	startClock();
	
	
});