// DOM ready

$(document).ready(function() {


    $('#image-holder').fadeIn(1000);
    $("#content").fadeIn(1000, function() { $(this).fixClearType() });

    //Cleartype fix
    jQuery.fn.fixClearType = function() {
        return this.each(function() {
            if (!!(typeof this.style.filter && this.style.removeAttribute))
                this.style.removeAttribute("filter");
        })
    }


    // Image Sources
    var images = new Array(
         	'images/projects/Small/lyddington_1.jpg'
        	, 'images/projects/Small/lyddington_2.jpg'
        	, 'images/projects/Small/lyddington_3.jpg'
			, 'images/projects/Small/lyddington_4.jpg'
			, 'images/projects/Small/lyddington_5.jpg'
			, 'images/projects/Small/lyddington_6.jpg'
			, 'images/projects/Small/lyddington_7.jpg'
			, 'images/projects/Small/lyddington_8.jpg'
			, 'images/projects/Small/lyddington_9.jpg'
			, 'images/projects/Small/lyddington_10.jpg'
			, 'images/projects/Small/lyddington_11.jpg'
			, 'images/projects/Small/lyddington_12.jpg'
			, 'images/projects/Small/lyddington_13.jpg'
			, 'images/projects/Small/lyddington_14.jpg'
    );

    var largeImages = new Array();

    //Loads first image to main pic.
    if (images.length > 0)
        $("#image-holder img").attr("src", images[0].replace(/\/small[\/]/gi, "/large/"));
	

    $(images).each(function() {
        var imgLink = '<a rel="shadowbox[MustangThumbs];options={counterType:\'skip\',continuous:true,animSequence:\'sync\',fadeDuration:0.1,resizeDuration:0.1}" href="' + this.replace(/\/small[\/]/gi, "/largest/") + '"><img src="' + this.replace(/\/small[\/]/gi, "/large/") + '" /></a>';
        $("#image-holder").append(imgLink);
    });
    $("#image-holder a").css({ display: "none" });
    $($("#image-holder a").get(0)).css({ display: "block" });


    // images length
    var max = $(images).length;
    // at least 1 image exist
    if (max > 0) {
        // create the UL element
        var ul = $('<ul id="portfolio"></ul>');
        // append to div#wrapper
        $(ul).appendTo($('#thumbnails'));
        // load the first image
        LoadImage(0, max);
    }

    // function of loading image
    // params: (int) index of image in array, (int) length of images array
    function LoadImage(index, max) {
        // if current index is lower then max element (max-1)
        if (index < max) {
            // create the LI, add loading class
            var list = $('<li id="portfolio_' + index + '"></li>').attr('class', 'loading').css({ cursor: "pointer" });

            list.click(function() {
                $("#image-holder a:visible").fadeOut();
                $($("#image-holder a").get(index)).fadeIn();
            });


            // append to UL
            $('ul#portfolio').append(list);
            // current LI
            var curr = $("ul#portfolio li#portfolio_" + index);
            // new image object
            var img = new Image();
            // image onload
            $(img).load(function() {
                $(this).css('display', 'none'); // since .hide() failed in safari
                $(curr).removeClass('loading').append(this);
                $(this).fadeIn('slow', function() {
                    // once the current loaded, trigger the next image
                    LoadImage(index + 1, max);
                });
            }).error(function() {
                // on error remove current
                $(curr).remove();
                // trigger the next image
                LoadImage(index + 1, max);
            }).attr('src', images[index]);
        }
    }


});