$(document).ready(function() {
    populate("photodiary");
    populate("workportfolio");
    populate("illustration");
    populate("motiongraphics");
    populate("photoarchives");
});

function populate(name) {
    $.getJSON("php/carousel.php?title=" + name, function(data) {
        var carousel = $("div.sectionDIV[src=" + name + "] div.carousel");
        var navigation = $("div.sectionDIV[src=" + name + "] div.carouselNavigation");
        var links = new Array();
        var ul = $("<ul/>");
        var nav = $("<ul/>");
        var linkCount = 0;

        for (x in data.carousel) {
            ul.append(createThumbnail(name, data.carousel[x].item));
            var linkId = name + "Link" + x ;
            links[x] = "#" + linkId;
            if (x % 4 == 0) {
                var link = $("<li id=\"" + linkId + "\">" + (x / 4 + 1) + "</li>");
                link.click(function() {
                    swapSelectedLink($(this));
                    setVisibleLinks(nav.children(":not(.unselectable)"));
                });
                nav.append(link);
                linkCount++;
            }
        }

        nav.children(":first-child").attr("class", "selected");
        setVisibleLinks(nav.children());

        if (linkCount > 2) {
            nav.prepend(createNavPrevLink(name));
            nav.prepend(createNavFirstLink(name));
            nav.append(createNavNextLink(name));
            nav.append(createNavLastLink(name));
        }

        navigation.append(nav);

        carousel.append(ul);
        carousel.jCarouselLite({
            btnNext: "#" + name + "LinkNext",
            btnPrev: "#" + name + "LinkPrev",
            btnFirst: "#" + name + "LinkFirst",
            btnLast: "#" + name + "LinkLast",
            visible: 4,
            scroll: 4,
            circular: false,
            btnGo: links,
            speed: 400,
            afterEnd: function (vis) {
                $(vis).each(function() {
                    if ($("img", this).size() == 0) {
                        var li = this;
                        var img = $("<img/>");
                        img.attr("src", $("input", this).attr("value"));
                        img.prependTo(this);
                        img.load(function() {
                            $(li).removeClass("loading");
                            $(this).attr("alt", $("span.title", $(this).parent()).text())
                        })
                    }
                });
            }
        });
    });
}

function createThumbnail(name, item) {
    var li = $("<li/>").addClass("loading");

    $("<input/>").attr("type", "hidden").attr("value", item.thumbnail).appendTo(li);
    $("<span>" + item.title + "</span>").attr("class", "title").appendTo(li);
    $("<span>" + item.date + "</span>").attr("class", "date").appendTo(li);

    li.click(function() {
        window.location = "/" + name + "/" + item.id;
    });

    return li;
}

function swapSelectedLink(to) {
    if (!to.hasClass("unselectable")) {
        to.siblings(".selected").removeClass("selected");
        to.addClass("selected");
    }
}

function setVisibleLinks(links) {
    var pos = 0;
    var len = links.length;

    for (; pos < len; pos++)
        if ($(links[pos]).hasClass("selected"))
            break;

    var max = 10;
    var half = Math.floor(max / 2);
    var start = Math.max(0, pos - (len - pos > half ? half : max - (len - pos)));
    var end = Math.min(start + max, len);

    links.addClass("hidden");

    if (len == 1)
        return;

    for (x = start; x < end; x++)
        $(links[x]).removeClass("hidden");
}

function createNavPrevLink(name) {
    var prev = $("<li id=\"" + name + "LinkPrev\" class=\"unselectable\" >&lt;</li>");
    prev.click(function() {
        swapSelectedLink(prev.siblings(".selected").prev());
        setVisibleLinks(prev.siblings(":not(.unselectable)"));
    });
    return prev;
}

function createNavNextLink(name) {
    var next = $("<li id=\"" + name + "LinkNext\" class=\"unselectable\" >&gt;</li>");
    next.click(function() {
        swapSelectedLink(next.siblings(".selected").next());
        setVisibleLinks(next.siblings(":not(.unselectable)"));
    });
    return next;
}

function createNavFirstLink(name) {
    var first = $("<li id=\"" + name + "LinkFirst\" class=\"unselectable\" >&lt;&lt;</li>");
    first.click(function() {
        swapSelectedLink(first.next().next());
        setVisibleLinks(first.siblings(":not(.unselectable)"));
    });
    return first;
}

function createNavLastLink(name) {
    var last = $("<li id=\"" + name + "LinkLast\" class=\"unselectable\" >&gt;&gt;</li>");
    last.click(function() {
        swapSelectedLink(last.prev().prev());
        setVisibleLinks(last.siblings(":not(.unselectable)"));
    });
    return last;
}