function padzero(value) {
    var str = "0"+value;
    return str.substring(str.length-2);
}

var clock_size = 120;
var handsheight;

function drawclock(elem) {


    elem.css({
        position: 'absolute',
        width: clock_size + 'px',
        height: clock_size + 'px',
        right: '20px',
        top: '20px',
    });

    var hourhand = document.createElement('div');
    hourhand.id = 'clock_h';
    elem.append(hourhand);
    jQuery(hourhand).css({
            fontSize: '14pt',
            color: '#FFFFFF'
        });  
        
    var minhand = document.createElement('div');
    minhand.id = 'clock_m';
    elem.append(minhand);
    jQuery(minhand).css({
            fontSize: '10pt',
            color: '#FFFFCC'
        });
        
    var sechand = document.createElement('div');;
    sechand.id = 'clock_s';
    elem.append(sechand);
    jQuery(sechand).css({
            fontSize: '7pt',
            color: '#CCFFFF'
        });    
        
    handsheight = {
            h: parseFloat(jQuery(hourhand).css('height')),
            m: parseFloat(jQuery(minhand).css('height')),
            s: parseFloat(jQuery(sechand).css('height'))
        };
 
        
    var bg1 = document.createElement('img');
    bg1.src = "/wp-content/themes/crazykevin3/images/clockbg1.png";
    elem.append(bg1);
    jQuery(bg1).css({
        position: 'absolute',
        top: clock_size/2 - 55 + 'px',
        left: clock_size/2 - 55 + 'px'
    });
    
    setInterval('animateClock()', 250);

}
function animateClock() {

    var now = new Date();
    
    var secAngle = (now.getSeconds() + now.getMilliseconds()/1000)/60;
    var minAngle = (now.getMinutes() + secAngle)/60;
    secAngle = 360 * secAngle * Math.PI/180;
    minAngle = 360 * minAngle * Math.PI/180;
    
    jQuery('#clock_h').html(padzero(now.getHours()));
    jQuery('#clock_m').html(padzero(now.getMinutes()));
    jQuery('#clock_s').html(padzero(now.getSeconds()));

    var hpos = [ clock_size/2, clock_size/2 ];
    jQuery('#clock_h').css({
        top: (hpos[0] - handsheight.h/2.0) + 'px',
        left: (hpos[1] - parseFloat(jQuery('#clock_h').css('width'))/2.0) + 'px'
    });
    
    var mpos = [ hpos[0] - clock_size/4.0 * Math.cos(minAngle),
                   hpos[1] + clock_size/4.0 * Math.sin(minAngle) ];
                   
    jQuery('#clock_m').css({
        top: (mpos[0] - handsheight.m/2.0) + 'px',
        left: (mpos[1] - parseFloat(jQuery('#clock_m').css('width'))/2) + 'px'
    });
 /*   this.bg2.setStyle({
        top: (mpos[0] - 30) + 'px',
        left: (mpos[1] - 30) + 'px'
    });*/
    var spos = [ mpos[0] - clock_size/8.0 * Math.cos(secAngle),
                   mpos[1] + clock_size/8.0 * Math.sin(secAngle) ];
                   
    jQuery('#clock_s').css({
        top: (spos[0] - handsheight.s/2.0) + 'px',
        left: (spos[1] - parseFloat(jQuery('#clock_s').css('width'))/2.0) + 'px'
    });
}