//$(document).ready(function(){

// needs this way of loading for webKit browsers...
$(window).load( function(){

    initImageBoxes();

    fancify();

    $(".noJS").removeClass("noJS");

});


function initImageBoxes(){

    $(".imageBoxes li").each ( function() {

        // Get the number of the image
        var imgSrc = $(this).find("img").attr("src").toString();
        var imgNo = imgSrc.charAt( (imgSrc.length - 5) ); // minus the .jpg to get the image number

        // Get the source directory
        var cropLength = imgSrc.length - 10;
        var imgDir = imgSrc.toString().slice(0, cropLength);

        // Add a "big" version of the image
        var bigImgHTML = "<li class=\"big\"><img src=\""+imgDir+"large"+imgNo+".jpg\" alt=\"Work Sample Image\" /></li>";
        $(this).parent().prepend(bigImgHTML);
    });



    // Link the large selected image and the small selected image
    // by giving them a selected class.
    // ----------------------------------------------
    $(".imageBoxes").each( function() {

        // these two lines are needed because :last-child doesn't appear to work.
        var imgCount = $(this).find("li.big").size();
        var selectedBig = $(this).find("li.big:nth-child("+imgCount+")");
        selectedBig.addClass("selected");
        var selectedBigURL = selectedBig.find("img").attr("src").toString();
        var thumbLI = $(this).find("li a[href="+selectedBigURL+"]").parent();
        thumbLI.addClass("selected");

    });
    // ----------------------------------------------




    // Style the list iterms once they're all loaded
    // ----------------------------------------------
    $(".imageBoxes li.big.selected img").each (function(){
        
        $(this).load( function() {

            var imageList = $(this).parent().parent();
 
            // Set the height of the ul to fit the images + thumbs
            var width = $(this).width();
            var bigHeight = $(this).height();
            var smlHeight = imageList.find("li img").not("li.big img").height();

            var height = bigHeight + smlHeight + 20;

            imageList.width(width);
            imageList.height(height);
         
            // Set the height of the containing section to fit the ul
            var ulHeight = imageList.height();
            var secHeight = imageList.parent().height();

            if (ulHeight > secHeight)
                imageList.parent().height(ulHeight);

            // Styles the image thumbnail list items
            var thumbList = imageList.find("li").not("li.big");
            thumbList.css("float", "left");
            height = $(this).height();
            thumbList.css("margin-top", (height+10)+"px");
            thumbList.css("padding-right", "15px");

        });
    });
    // ----------------------------------------------


    // Hide the big images that are not selected
    $(".imageBoxes li.big[class!='big selected']").hide();

    // prevent clicking on the list items loading the big image - it will
    // already be displayed
    $(".imageBoxes li a").click( function(e) {
        e.preventDefault();
    });

    // Add the mouse-over event
    // ----------------------------------------------
    $(".imageBoxes li a").mouseover( function(e) {

        if (!$(this).parent().hasClass("selected"))
        {
            e.preventDefault();
            $(this).parent().parent().find("li.big").not("li.selected").hide();
            var bigImgURL = $(this).attr("href");
            var smallLIs = $(this).parent().parent().find("li").not("li.big");

            smallLIs.removeClass("selected");

            smallLIs.find("a[href$='"+bigImgURL+"']").parent().addClass("selected");

            var bigLIToShow = $(this).parent().parent().find("li img[src$='"+bigImgURL+"']").parent();
            var liToHide = $(this).parent().parent().find("li.big.selected");

            bigLIToShow.fadeIn("slow");
            liToHide.fadeOut("slow");


            liToHide.removeClass("selected");
            bigLIToShow.addClass("selected");
        }
    })
// ----------------------------------------------


    // Add the shortened class to the contentPeice divs for CSS styling
    $(".contentPeice ul.imageBoxes").parent().addClass("shortened");

}

function fancify()
{
    $("#mainContent").prepend("<div id=\"underLeaves\"></div><div id=\"overLeaves\"></div>");

   }