var imageArray = new Array();

$(document).ready(function() {
    // Create an Array of Images from the hidden list
    $(document).find('ul.product-array li').each(function(i, val) {
        imageArray[i] = new Array(2);

        // For each item in the Array, create a new array and append the image link and content for that item.
        imageArray[i][0] = $(val).find('.img-link img').eq(0).attr('src');
        imageArray[i][1] = $(val).find('.img-content').eq(0).html();
    });

    var gallery = {}
    gallery.currentPage = 0;

    // Display the first 8 items.

    //gallery.currentPage++;

    for (i = 0; i < 8; i++) {
        var element = $(document).find('.product-display li').eq(i);
        $(element).html("").hide();

        if (imageArray[i] != undefined) {
            var thumbImage = new Image();
            $(element).append(thumbImage).fadeIn('slow');

            $(element).fadeIn('slow');
            thumbImage.src = imageArray[i][0];
            $(element).find('img').eq(0).ShowInfo(i);
        }
    }

    // Hide/Show the next/previous buttons as needed.

    $('.product-display-previous').hide();

    if (imageArray.length <= 8) {
        $('.product-display-next').hide();
    }

    // Setup the Next/Previous buttons.
    $('.product-display-next').ProductNavigation(8, gallery);
    $('.product-display-previous').ProductNavigation(1, gallery);
});

$.fn.ProductNavigation = function(index, gallery) {
    $(this).click(function() {
        var totalPageCount = imageArray.length / 8;
        totalPageCount = Math.ceil(totalPageCount);

        if (index >= 8) {       // for the next button click
            $('.product-display-previous').show();
            gallery.currentPage++;
        }
        else {       // for the prev button click

            if (gallery.currentPage <= 1) {
                $('.product-display-previous').hide();
            }
            gallery.currentPage--;
        }

        var imagePlaceholders = $(document).find('.product-display li')
        $(imagePlaceholders).empty();

        if (gallery.currentPage >= totalPageCount - 1) {
            $('.product-display-next').hide();
        }
        else {
            $('.product-display-next').show();
        }

        for (i = 0; i < 8; i++) {
            var element = $(document).find('.product-display li').eq(i);
            $(element).html("").hide();

            if (8 * gallery.currentPage + i != undefined) {
                if (8 * gallery.currentPage + i < imageArray.length) 
                {

                    var thumbImage = new Image();

                    $(element).append(thumbImage).fadeIn('slow');
                    thumbImage.src = imageArray[8 * gallery.currentPage + i][0];

                    $(element).find('img').eq(0).ShowInfo(8 * gallery.currentPage + i);
                }
            }
        }

        return false;
    });
}


$.fn.ShowInfo = function(index) {

    var largeDisplayElement = $(document).find('div.product-enlarge').eq(0);
    var descriptionContentElement = $('.description-content').eq(0);

    $(this).click(function() {
        $('.image-counter').text(PadDigits(index +1, 2) + ' / ' + PadDigits(imageArray.length, 2));

        $(largeDisplayElement).fadeOut('fast', function() {
            $(largeDisplayElement).html('');
            $(largeDisplayElement).html('<div class="loading"></div>');
            $(largeDisplayElement).fadeIn('fast');


            var url = imageArray[index][0];
            var newImage = new Image();

            url = url.replace(/width=131&height=178/i, "width=363&height=496");

            newImage.onload = function() {
                $(largeDisplayElement).find('div.loading').remove();
                $(largeDisplayElement).append(newImage).fadeIn('fast');
            }

            newImage.src = url;
        });

        $(descriptionContentElement).fadeOut('fast', function() {
            //Content
            $(descriptionContentElement).html(imageArray[index][1]);
            $(descriptionContentElement).show('fast');
        });
    });
}

function PadDigits(n, totalDigits)
{
    n = n.toString();
    var pd = '';
    if (totalDigits > n.length)
    {
        for (i = 0; i < (totalDigits - n.length); i++)
        {
            pd += '0';
        }
    }
    return pd + n.toString();
}