$(document).ready(function () {
    apply_portfolio_buttons();
    load_portfolio();
    $("#imageViewer").jqm(); //activate modal
    
});

 function apply_portfolio_buttons() {
     $(".portfolio_button").each(function () {
         var this_container = $(this).parent();

         $(this_container).hover(
            function () {
                $("h1", this).css("color", "white");
            },
            function () {
                if( $(this).children("div.portfolio_listing").css("display") == "none" )$("h1", this).css("color", "#dcbcbe");
            }
        );


         $(this).click(function () {
             $(".portfolio_button").removeClass("active");
             if ($(".portfolio_listing", this_container).css("display") == "none") {
                 $(".portfolio_listing").each(function () {
                     if(this_container != $(this).parent())
                     {
                         $(this).slideUp("slow");
                     }
                 });
                 $(".portfolio_listing", this_container).slideDown("slow");
                 $(".portfolio_button",this_container).addClass("active");
             }
             else {
                 $(".portfolio_listing").each(function () {
                     $(this).slideUp("slow");
                 });
             }
         });
     });
}

function load_portfolio() {
    var base_address = "../media/images/portfolio/";
    $.ajax({
        type: "GET",
        url: base_address + "portfolio_guide.xml",
        dataType: "xml",
        success: function (xml) {
            $("category", xml).each(function () {
                var this_title = $("title", this).text();
                var this_container = $("#" + this_title);

                var new_html = "";
                var thumbBox_count = 0;

                $(this).find("thumbBox", "boxes").each(function () {
                    thumbBox_count++;

                    var modalCallString = "popImageViewer(this)";

                    if (thumbBox_count % 4 == 1) {
                        new_html += '<div class="thumbnail_box" onclick="' + modalCallString + '" style="margin-left:25px"><img src="media/images/portfolio/';
                    }
                    else {
                        new_html += '<div class="thumbnail_box" onclick="' + modalCallString + '"><img src="media/images/portfolio/';
                    }
                    new_html += $("thumbPath", this).text();
                    new_html += '" /><h2>';
                    new_html += $("label", this).text();
                    new_html += '</h2><p>';
                    new_html += $("desc", this).text();
                    new_html += ',<br />&nbsp;';
                    new_html += $("size", this).text();
                    new_html += ',&nbsp;';
                    new_html += $("date", this).text();
                    new_html += '.</p>';

                    $("expand > img", this).each(function () {
                        new_html += '<a href="javascript:;" name="' + $("path", this).text() + '">' + $("expandedLabel", this).text() + '</a>';
                    });

                    new_html += '</div>';
                });
                $("div.portfolio_listing", this_container).html(new_html);
            });
        }
    });
}

function popImageViewer(piece) {
    //alert($("h2", piece).html());
    $("#modalTitle").html($("h2", piece).html());
    $("#modalDesc").html(String($("p", piece).html()).replace("<br>", ""));
    var currentImage = "media/images/portfolio/" + String($("a:first", piece).attr("name"));
    
    $("#modalImage").attr("src", currentImage);

    var positionTop = $(window).scrollTop() + 50;
    $("#imageViewer .container").css("marginTop",positionTop);
    
    $("#imageViewer").jqmShow();

}