var timelineAnimating = false;

function showTimeline(xmlUrl) {
    showLightbox();
    var timeline = $("#timelinePopup");

    if (timeline.length === 0) {
        timeline = $("<div id='timelinePopup'/>");
        timeline.html("<a href=\"#\" class=\"close\">" +
                      "</a><h1></h1><p></p>" +
                      "<div class=\"itemsContainer\"><ul></ul>" +
                      "<div class=\"leftScroll\"></div>" +
                      "<div class=\"rightScroll\"></div></div>" +
                      "<div class=\"thumbsContainer\"><ul></ul></div>");
        $("body").append(timeline);
    }

    centerElement(timeline);

    $.ajax({
        url: xmlUrl,
        cache: true,
        type: "GET",
        dataType: "xml",
        success: function(data) { setupTimeline(timeline, data); },
        error: function() { setupTimeline(timeline, null);  }
    });

}

function hideTimeline(timeline) {
    timeline.hide();
    hideLightbox();
}

function setupTimeline(timeline, data) {
    timeline.find("a.close").click(function() { hideTimeline(timeline); return false; });

    //clean up the timeline
    timeline.find("> h1, > p, ul").html("");

    if (data != null) {
        var xml = $(data).find("timeline");
        timeline.find("> h1").html(xml.find("> title").text());
        timeline.find("> p").html(xml.find("> headline").text());

        var itemsList = timeline.find("div.itemsContainer ul");
        var thumbsList = timeline.find("div.thumbsContainer ul");

        itemsList.css("left", "188px");
        thumbsList.css("width", (26 * xml.find("item").length) +  "px");

        xml.find("item").each(function() {
            var year = $(this).find("year").text();
            var image = $(this).find("image").text();
            var headline = $(this).find("headline").text();
            var text = $(this).find("text").text();
            $("<li/>").append(
                    $("<div />").addClass("smallView").append(
                        $("<img/>").attr("src", image)).append(
                        $("<p/>").addClass("year").html(year)).append(
                        $("<p/>").addClass("headline").html(headline))
                    ).append(
                    $("<div/>").addClass("detailView").append(
                        $("<div/>").addClass("left").append(
                            $("<img/>").attr("src", image)).append(
                            $("<p/>").html(year)))
                        .append(
                        $("<div/>").addClass("right").append(
                            $("<h2/>").html(headline)).append(
                            $("<p/>").html(text)))
                    ).appendTo(itemsList);
            $("<li/>").append($("<a/>")).appendTo(thumbsList);
        });

        itemsList.find("li:first").addClass("first");
        itemsList.find("li:last").addClass("last");

        thumbsList.find("a").click(timelineThumbClick);
        thumbsList.find("a:first").click();

        timeline.find("div.leftScroll").mousemove(timelineLeftScroll);
        timeline.find("div.rightScroll").mousemove(timelineRightScroll);
    }

    timeline.show();
    centerElement(timeline);
}

function timelineThumbClick() {
    timelineAnimating = true;

    var timeline = $(this).closest("#timelinePopup");
    var as = $(this).closest("ul").find("a");
    var items = timeline.find("div.itemsContainer ul li");

    var index = as.index(this);
    as.removeClass("selected");
    $(this).addClass("selected");
    items.removeClass("selected");
    items.eq(index).addClass("selected");

    timeline.find("div.itemsContainer ul").stop().animate({
        left: (188 - 365 * index ) + "px"
    }, 300, "swing", function() { setTimeout(function() { timelineAnimating = false; }, 500); });
}

function timelineLeftScroll() {
    if (timelineAnimating) return;

    var timeline = $(this).closest("#timelinePopup");
    var as = timeline.find("div.thumbsContainer a");
    var selected = as.filter(".selected");
    if (selected.length == 0) return;

    var newSelected = as.eq(as.index(selected[0]) - 1);
    newSelected.click();
}

function timelineRightScroll() {
    if (timelineAnimating) return;

    var timeline = $(this).closest("#timelinePopup");
    var as = timeline.find("div.thumbsContainer a");
    var selected = as.filter(".selected");
    if (selected.length == 0) return;

    var newSelected = as.eq(as.index(selected[0]) + 1);
    newSelected.click();
}

function timelineLinkClick() {
    var xml = $(this).attr("rev");
    if (xml != null && xml.length > 0) {
        showTimeline(xml);
    }
    return false;
}