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

    var aClock2 = $('#analog-clock2');
    var clockWidthHeight2 = aClock2.width();//width and height of the clock

    function startClock(){

        aClock.css({"height":(clockWidthHeight + 25)+"px"});//sets the height if .js is enabled. If not, height = 0;
        aClock2.css({"height":(clockWidthHeight2 + 25)+"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 second hand
        //var secondAngle = 360/60 * now.getSeconds();//turn the time into angle
        //$('#secondHand').rotate(secondAngle, 'abs');//set the hand angle
        //$('#secondHand').css( { "left": (clockWidthHeight - $('#secondHand').width())/2 + "px", "top":(clockWidthHeight - $('#secondHand').height())/2 + "px" });//set x and y pos

        //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

        var minuteAngle2 = 360/60 * now_c.getMinutes();//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 * now_c.getHours();//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
    };
    startClock();
});