var photoLinks = new Array();
var timeOut;
var balloonId;
var clockPos = 0;

var backgroundDiv = "div.outer .backgrounddiv";
var backgroundImage = "";

function switchImage(image, fade) {
    $(function () {

        var imageCss = "url('" + image + "')";

        if (backgroundImage == imageCss)
            return;

        if (fade) {
            $(backgroundDiv).stop(true, true).fadeOut(500, function () {
                $(backgroundDiv).css("background-image", imageCss)
                        .fadeIn(500);
                backgroundImage = imageCss;
            });
        }
        else {
            $(backgroundDiv).css("background-image", imageCss);
            backgroundImage = imageCss;
        }
    });
}

function onMouseOver(id) {
    selectLink(id);
    if (timeOut) {
        clearTimeout(timeOut);
        timeOut = null;
    }

    if (balloonId != id) {
        $(".box .desc").css("visibility", "hidden");
        $(".box .arrow").css("visibility", "hidden");
        balloonId = -1;
    }
}

function onMouseClick(id) {
    $(".box .desc").css("visibility", "visible");
    $(".box .arrow").css("visibility", "hidden");
    $("#arrow" + id).css("visibility", "visible");

    if (balloonId != id) {
        balloonId = id;
        return false;
    }
    else
        return true;
}

function onMouseLeave() {
    if(!timeOut)
        resetTimer(false);

    $(".box .desc").css("visibility", "hidden");
    $(".box .arrow").css("visibility", "hidden");
    balloonId = -1;
}

function selectLink(id) {

    if (photoLinks.length == 0)
        return;
    
    var active = 0;
    var fade = true;

    for (i = 1; i <= photoLinks.length; i++) {
        if ($("#link" + i).hasClass("active"))
            active = i;
    }

    if (active == id) fade = false;

    switchImage(photoLinks[id - 1].img, fade);
    $(".box .desc .boxcontent").text(photoLinks[id - 1].desc);
    var url = $("#anchor"+id).attr("href");
    $(".box .desc .readmore").attr("href", url);

    for (i = 1; i <= photoLinks.length; i++) {
        $("#link" + i).removeClass("active");
        $("#link" + i).addClass("inactive");
    }

    $("#link" + id).removeClass("inactive");
    $("#link" + id).addClass("active");

    $("div.clock").css("background-position", "0px 0px");
    clockPos = 0;
}

function onTimer() {

    if (clockPos == 4) {

        var active = 0;

        for (i = 1; i <= photoLinks.length; i++) {
            if ($("#link" + i).hasClass("active"))
                active = i;
        }

        var nextId = ((active + 1) > photoLinks.length ? 1 : active + 1);

        selectLink(nextId);

        clockPos = 0;
    }
    else
        clockPos++;

    $("div.clock").css("background-position", (clockPos*-12)+"px 0px");

    resetTimer(true);
}

function resetTimer(keepClock) {
    if (timeOut)
        clearTimeout(timeOut);

    if (!keepClock) {
        $("div.clock").css("background-position", "0px 0px");
        clockPos = 0;
    }

    timeOut = setTimeout(function () { onTimer(); }, 1250);
}

function initializePhotoLinks(links) {
    photoLinks = links;

    if (photoLinks.length >= 1) {
        $("#link1").mouseover(function () { onMouseOver(1); });
        $("#link1").click(function () { return onMouseClick(1); });
    }
    if (photoLinks.length >= 2) {
        $("#link2").mouseover(function () { onMouseOver(2); });
        $("#link2").click(function () { return onMouseClick(2); });
    }
    if (photoLinks.length >= 3) {
        $("#link3").mouseover(function () { onMouseOver(3); });
        $("#link3").click(function () { return onMouseClick(3); });
    }
    if (photoLinks.length >= 4) {
        $("#link4").mouseover(function () { onMouseOver(4); });
        $("#link4").click(function () { return onMouseClick(4); });
    }

    $(".box").mouseleave(function () { onMouseLeave(); });
}