function time() {
    var d = new Date();
    var hours = d.getHours();
    var minutes = d.getMinutes();
    var seconds = d.getSeconds();
    setTime(hours, "hou");
    setTime(minutes, "min");
    setTime(seconds, "sec");
    var time = (hours < 10 ? "0"+hours : hours)+":"+
               (minutes < 10 ? "0"+minutes : minutes)+":"+
               (seconds < 10 ? "0"+seconds : seconds);
    $('#time').text(time);
    window.setTimeout("time()",250);
}

function getarray(value) {
    var result = new Array(4);
    for(var i=0;i<4;i++) {
        result[i] = value%2 == 1;
        value >>= 1;
    }
    return result;
}

function setTime(value, type) {
    var einer = value%10;
    var einera = getarray(einer);
    $('#'+type+'e_1').toggleClass('ui-icon-bullet', einera[0]);
    $('#'+type+'e_2').toggleClass('ui-icon-bullet', einera[1]);
    $('#'+type+'e_4').toggleClass('ui-icon-bullet', einera[2]);
    $('#'+type+'e_8').toggleClass('ui-icon-bullet', einera[3]);
    $('#'+type+'e_1').toggleClass('ui-icon-radio-on', !einera[0]);
    $('#'+type+'e_2').toggleClass('ui-icon-radio-on', !einera[1]);
    $('#'+type+'e_4').toggleClass('ui-icon-radio-on', !einera[2]);
    $('#'+type+'e_8').toggleClass('ui-icon-radio-on', !einera[3]);
    var zehner = (value-einer)/10;
    var zehnera = getarray(zehner);
    $('#'+type+'z_1').toggleClass('ui-icon-bullet', zehnera[0]);
    $('#'+type+'z_2').toggleClass('ui-icon-bullet', zehnera[1]);
    $('#'+type+'z_4').toggleClass('ui-icon-bullet', zehnera[2]);
    $('#'+type+'z_1').toggleClass('ui-icon-radio-on', !zehnera[0]);
    $('#'+type+'z_2').toggleClass('ui-icon-radio-on', !zehnera[1]);
    $('#'+type+'z_4').toggleClass('ui-icon-radio-on', !zehnera[2]);
}

$(function() {
    time();
    $('#clock').hover(function() {
        $('#time').fadeIn(500);
    }, function() {
        $('#time').fadeOut(500);
    });
});