jQuery(function($) {
    $("input").placeholder();
    
    // Restructure HTML, set up category switching
    var galShell = $("#zd-template-image-browse-743");
    if (galShell.length) {
        var ul = galShell.find("ul.image-list"),
            catUls = galShell.find("ul.image-list ul"),
            cats = $("<ul class='categories'></ul>");
        galShell.find("ul.image-list > li").each(function() {
            var catName = $(this).find(".category").text(),
                catUl = $(this).find("ul"),
                catLi = $("<li><a href='#'>" + catName + "</a></li>");
            catLi.find("a").click(function() {
                $(this).parents("ul").find("a.active").removeClass("active");
                $(this).addClass("active");
                catUls.hide();
                catUl.fadeIn();
                return false;
            });
            cats.append(catLi);
        });
        cats.insertBefore(ul);
        $(cats.find("a").get(0)).click();
    }
    
    // Could use an Object for fast lookup, but we're going to want all
    // previous and next images later, and there won't be more than a few
    // dozen images, so using an array and finding them in linear time is fine.
    var images = [];
    $("ul.image-list li.image").each(function() {
        var li = $(this);
        images.push({
            id: li.data("id"),
            title: li.find(".title").text(),
            thumb: li.find(".image img").attr("src"),
            display: li.find(".image a").data("img"),
            url: li.find(".title a").attr("href"),
            description: li.find(".description").html()
        });
    });
    
    // Index into images array for currently-selected image
    var currentIndex;
    
    // Popover    
    function showImage() {
        var image = images[currentIndex],
            div = $("#portfolio-popover"),
            shade = $("#portfolio-shade");
        
        if (!image)
            return;
        
        if (!div.length) {
            div = $("<div id='portfolio-popover'>");
            div.css({
                width: 700,
                height: 560,
                position: "absolute",
                left: $(window).width() / 2 - 380,
                zIndex: 9999999999,
                display: "none"
            });
            $("body").append(div);
            
            div.html(
                "<a class='close' href='#'>X</a>" +
                "<a class='previous' href='#'><span class='text'>Previous</span><span class='arrow-w'></span></a>" +
                "<a class='next' href='#'><span class='text'>Next</span><span class='arrow-e'></span></a>"
            );
            
            $("#portfolio-popover .close").live("click", function() {
                div.hide();
                shade.hide();
                return false;
            });
            
            $("#portfolio-popover .previous").live("click", function() {
                if (currentIndex > 0)
                    currentIndex--;
                showImage();
                return false;
            });
            
            $("#portfolio-popover .next").live("click", function() {
                if (currentIndex < images.length - 1)
                    currentIndex++;
                showImage();
                return false;
            });
            
            shade = $("<div id='portfolio-shade'>");
            shade.css({
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: $(document).height(),
                background: "#000",
                opacity: 0.5,
                zIndex: 999999999,
                display: "none"
            });
            shade.click(function() {
                div.hide();
                $(this).hide();
                return false;
            });
            $("body").append(shade);

        }
        
        shade.show();
        var top = $(window).height() / 2 - 310 + $(window).scrollTop();
        if (top < 0)
            top = 0;
        div.css({top: top}).show();
        
        var slide = $("<div class='slide'>").css({position: "absolute"}).hide();
        var img = "<img src='" + image.display + "'>";
        if (!(/zeedesigns\.com/.test(image.url)))
            img = "<a href='" + image.url + "' target='_blank'>" + img + "</a>"
        slide.html(
            img +
            "<h3>" + image.title + "</h3>" +
            "<div class='description'>" + image.description + "</div>"
        );
        div.find(".slide").fadeOut("fast", function() { $(this).remove(); });
        div.append(slide);
        slide.fadeIn("fast");
        
    }
    
    $("ul.image-list a").live("click", function() {
        var li = $(this).parents("li.image"),
            id = li.data("id"),
            curIdx = false;
            
        $("#portfolio-popover .slide").hide();
        
        for (var i = 0; i < images.length; i++) {
            if (images[i].id == id) {
                curIdx = i;
                break;
            }
        }
        if (curIdx === false)
            return false;
        
        currentIndex = curIdx
        showImage();
        
        return false;
    });
    
});