$(document).ready(function () {
    updateTimeFromServer();
    showHideSeparator();
});

function updateTimeFromServer() {
    fillValuesData();
    setTimeout("updateClockFirstCall()", secondsToNextMinuteLeft);
}

function updateClockFirstCall() {
    updateClock();
}

function updateClock() {
    serverMinutes = serverMinutes + 1;

    if (serverMinutes == 60) {

        if (serverDesignatorLocalized != '') {
            if (serverHours == 11 && serverMinutes == 60) {
                if (serverDesignatorLocalized == pmDesignator)
                    serverDesignatorLocalized = amDesignator;
                else
                    serverDesignatorLocalized = pmDesignator;
            }
        }

        serverHours = serverHours + 1;
        serverMinutes = 0;

        if (serverDesignatorLocalized != '') {
            if (serverHours == 13)
                serverHours = 1;
        }

        if (serverHours == 24) {
            serverHours = 0;
        }
    }

    fillValuesData();
}

var showSeparator;

function showHideSeparator() {
    var backPos = "left";
    if (timeSeparator == ".")
        backPos = "center";
    if (showSeparator == true) {
        $(".clock_dote_s1").css("background-position", backPos);
        showSeparator = false;
    }
    else {
        $(".clock_dote_s1").css("background-position", "right");
        showSeparator = true;
    }

    serverSeconds = serverSeconds + 1;

    if (serverSeconds == 60)
        serverSeconds = 0;

    setTimeout("showHideSeparator()", 500);
}

function fillValuesData() {
    var srvHrs = serverHours.toString().length == 1 ? "0" + serverHours.toString() : serverHours.toString();
    $("#spnHoursLeft").css("background-position", -parseInt(srvHrs.charAt(0)) * 18 + "px 0px");
    $("#spnHoursRight").css("background-position", -parseInt(srvHrs.charAt(1)) * 18 + "px 0px");
    var srvMins = serverMinutes.toString().length == 1 ? "0" + serverMinutes.toString() : serverMinutes.toString();
    $("#spnMinsLeft").css("background-position", -parseInt(srvMins.charAt(0)) * 18 + "px 0px");
    $("#spnMinsRight").css("background-position", -parseInt(srvMins.charAt(1)) * 18 + "px 0px");

    $("#spnDay").text(serverDay);
    $("#spnMonth").text(serverMonth);
    $("#spnYear").text(serverYear);

    $('#spnClientClockDesignator').text(serverDesignatorLocalized);
    $('#spnDayOfWeek').text(dayOfWeek);
}