$(document).ready(function() {
    function twister_count(count) {
        var odd;

        // convert count to string
        count += "";

        // add leading zeros
        if (count.length < 7) {
            var zeros = "0000000";
            zeros = zeros.substr(0, 7 - count.length);
            count = zeros + count;
        }

        // remove the number
        $("#twister_count #counter").text("");

        // split the string
        count = count.split("");

        // and wrap each number with a span with a number-class to position the background sprite
        // and add odd/even class for tilted numbers. Each number gets appended to the counter-div
        $.each(count, function(k, v) {
            odd = !odd;
            $("<span />").text("").addClass("num_" + v).addClass((odd) ? "odd" : "even").appendTo("#counter");
        })

        // repeat each lap
        setTimeout(function() {
            twist_count++;
            twister_count(twist_count)
        }, twist_lap);
    }
    // TODO: these variables should be calculated from backend
    var twist_count = 98742; // number of laps on page load
    var twist_lap = 10000; // in milliseconds

    twister_count(twist_count);
 /*   $("#crew .prev").css({
        opacity: 0.5,
        cursor: "default"
    })

    function slideshow_callback(direction) {
        if (direction == "prev") {
            if ($("#crew .slideshow ul").css("left") == -($("#crew ul li").width()) + "px") {
                $("#crew .prev").css({
                    opacity: 0.25,
                    cursor: "default"
                })
                $("#crew .prev").unbind("click");
                $("#crew .prev").attr("disabled", "disabled");
            }
            else {
                if ($("#crew .next").attr("disabled") == "disabled") {
                    $("#crew .next").removeAttr("disabled");
                    $("#crew .next").click(function(e) {
                        e.preventDefault();
                        $("#crew .next").attr("disabled", "disabled");
                        $("#crew .slideshow ul").stop().animate({
                            left: "+=" + $("#crew li").width()
                        }, { queue: false }, 500, slideshow_callback("next"))
                        $("#crew .next").removeAttr("disabled");
                    })
                }
                $("#crew .prev").css({
                    opacity: 1,
                    cursor: "pointer"
                })
                $("#crew .next").css({
                    opacity: 1,
                    cursor: "pointer"
                })
            }
        }
        if (direction == "next") {
            if ($("#crew .slideshow ul").css("left") == -($("#crew ul").width() - ($("#crew ul li").width() * 2)) + "px") {
                $("#crew .next").css({
                    opacity: 0.25,
                    cursor: "default"
                })
                $("#crew .next").unbind("click");
                $("#crew .next").attr("disabled", "disabled");
            }
            else {
                if ($("#crew .prev").attr("disabled") == "disabled") {
                    $("#crew .prev").removeAttr("disabled");
                    $("#crew .prev").click(function(e) {
                        e.preventDefault();
                        $("#crew .prev").attr("disabled", "disabled");
                        $("#crew .slideshow ul").stop().animate({
                            left: "+=" + $("#crew li").width()
                        }, { queue: false }, 500, slideshow_callback("prev"))
                        $("#crew .prev").removeAttr("disabled");
                    })
                }

                $("#crew .prev").css({
                    opacity: 1,
                    cursor: "pointer"
                })
                $("#crew .next").css({
                    opacity: 1,
                    cursor: "pointer"
                })
            }
        }
    }


    function slideshowCallBackNew(direction) {
        if (direction == "prev") {
        }
    }


/*    $("#crew .slideshow").each(function() {
        $("ul", this).css({ width: $("li", this).length * $("li", this).width() });
        $("#crew .next").click(function() {
            $("#crew .slideshow ul").stop().animate({
                left: "-=" + $("#crew li").width()
            }, { queue: false }, 500, slideshow_callback("next"))
        })
        $("#crew .prev").click(function() {
            $("#crew .slideshow ul").stop().animate({
                left: "+=" + $("#crew li").width()
            }, { queue: false }, 500, slideshow_callback("prev"))
        })
    }) */

    $("span.tens, span.ones").prepend("<span class='overlay' />");

    $(".timer .numbers").each(function() {

        $(this).animate({
            top: -parseInt($(this).text()) * 37
        })
    })

    var $sec = $(".sec");
    var $tsec = $(".tsec");
    var $min = $(".minutes .ones .numbers");
    var $tmin = $(".minutes .tens .numbers");
    var $hr = $(".hours .ones .numbers");
    var $thr = $(".hours .tens .numbers");
    var $days = $(".days .ones .numbers");
    var $tdays = $(".days .tens .numbers");

    var sec = parseInt($sec.val());
    var tsec = parseInt($tsec.val());
    var min = parseInt($min.text());
    var tmin = parseInt($tmin.text());
    var hr = parseInt($hr.text());
    var thr = parseInt($thr.text());
    var days = parseInt($days.text());
    var tdays = parseInt($tdays.text());

    var t = setInterval(function() {
        if (sec == 0) {
            sec = 10;
            tsec--;
            if (tsec == -1) {
                tsec = 5;
                min--;
                if (min == -1) {
                    min = 9;
                    tmin--;
                    if (tmin == -1) {
                        tmin = 5;
                        hr--;
                        if (hr == -1) {
                            if (thr == 2 || thr == 1) {
                                hr = 9;
                                thr--;
                            }
                            if (thr == 0) {
                                hr = 4;
                                thr = 2;
                                days--;
                                if (days == -1) {
                                    days = 9;
                                    tdays--;
                                    if (tdays == -1) {
                                        clearInterval(t);
                                        // console.log("klar");
                                        //TODO fixa callback
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        sec--;
        $min.animate({
            top: -min * 37
        }, function() {
            if (min == 0 && sec == 0 && tsec == 0) {
                $(this).css({
                    top: -370
                })
            }
        })

        $tmin.animate({
            top: -tmin * 37
        }, function() {
            if (tmin == 0 && sec == 0 && tsec == 0 && min == 0) {
                $(this).css({
                    top: -370
                })
            }
        })

        $hr.animate({
            top: -hr * 37
        }, function() {
            if (hr == 0 && sec == 0 && tsec == 0 && min == 0 && tmin == 0) {
                $(this).css({
                    top: -370
                })
            }
        })

        $thr.animate({
            top: -thr * 37
        }, function() {
            if (thr == 0 && sec == 0 && tsec == 0 && min == 0 && tmin == 0 && hr == 0) {
                $(this).css({
                    top: -370
                })
            }
        })

        $days.animate({
            top: -days * 37
        }, function() {
            if (days == 0 && sec == 0 && tsec == 0 && min == 0 && tmin == 0 && hr == 0 && thr == 0) {
                $(this).css({
                    top: -370
                })
            }
        })

        $tdays.animate({
            top: -tdays * 37
        }, function() {
            if (tdays == 0 && sec == 0 && tsec == 0 && min == 0 && tmin == 0 && hr == 0 && thr == 0 && days == 0) {
                $(this).css({
                    top: -370
                })
            }
        })

    }, 1000)

    $(".stop").click(function(e) {
        e.preventDefault()
        clearInterval(t);
    })

});