$(document).ready(function(){
    var aClock = $('#analog-clock');
    var clockWidthHeight = aClock.width();//width and height of the clock


    function startClock(){

        aClock.css({"height":(clockWidthHeight + 0)+"px"});//sets the height if .js is enabled. If not, height = 0;

        //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 now = new Date();
        var now_c = new Date();
        
        now_c.setHours(now_c.getHours()-1);

        //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": (clockWidthHeight - $('#minuteHand').width())/2 + "px", "top":(clockWidthHeight - $('#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": (clockWidthHeight - $('#hourHand').width())/2 + "px", "top":(clockWidthHeight - $('#hourHand').height())/2 + "px"});//set x and y pos

    };
    startClock();
});