var slideShowImageArray = null;
var smallSlideShowImageArray = null;
var homeSlideShowImageArray = null;
var categorySlideShowImageArray = null;



function SlideShowImageLoaded(imageIndex, type) {

    if (type == 'BigSlideShow') {
        if (slideShowImageArray != null) {
            if (slideShowImageArray.length > imageIndex) {
                slideShowImageArray[imageIndex].IsLoaded = true;
            }
        }
    }

    if (type == 'SmallSlideShow') {
        if (smallSlideShowImageArray != null) {
            if (smallSlideShowImageArray.length > imageIndex) {
                smallSlideShowImageArray[imageIndex].IsLoaded = true;
            }
        }
    }

    if (type == 'HomeSlideShow') {
        if (homeSlideShowImageArray != null) {
            if (homeSlideShowImageArray.length > imageIndex) {
                homeSlideShowImageArray[imageIndex].IsLoaded = true;
            }
        }
    }

    if (type == 'CategorySlideShow') {

        if (categorySlideShowImageArray != null) {

            if (categorySlideShowImageArray.length > imageIndex) {
                categorySlideShowImageArray[imageIndex].IsLoaded = true;
            }
        }
    }
}

function slideSwitch(type) {

    if (type == 'BigSlideShow') {

        DisplayBigSlideShow();

    }

    if (type == 'SmallSlideShow') {

        DisplaySmallSlideShow();

    }

    if (type == 'HomeSlideShow') {

        DisplayHomeSlideShow();
    }

    if (type == 'CategorySlideShow') {
        DisplayCategorySlideShow();
    }
}


function DisplaySmallSlideShow() {

    if ($('#SiteSlide') != undefined && $('#smallslideshowImageDiv').html() != null) {
        var $active = $('#smallslideshowImageDiv IMG.active');

        if ($active.length == 0) $active = $('#smallslideshowImageDiv IMG:last');

        var imageIndex = parseInt($active.attr('id').replace('imgsmallSlideShow', ''));

        if (smallSlideShowImageArray != null) {
            if (smallSlideShowImageArray.length > imageIndex) {
                var nextImageId = 'imgsmallSlideShow' + imageIndex;

                var $nextImageElement = $('#' + nextImageId);

                if ($nextImageElement.attr('src') == '') {
                    $nextImageElement.attr('src', smallSlideShowImageArray[imageIndex].src);
                }
                else if (smallSlideShowImageArray[imageIndex].IsLoaded == true) {

                    imageIndex++;

                    nextImageId = 'imgsmallSlideShow' + imageIndex;
                    $nextImageElement = $('#' + nextImageId);

                    if ($nextImageElement.attr('src') == '') {
                        $nextImageElement.attr('src', smallSlideShowImageArray[imageIndex].src);
                    }

                    // use this to pull the images in the order they appear in the markup
                    var $next = $active.next().length ? $active.next() : $('#smallslideshowImageDiv IMG:first');

                    $active.addClass('last-active');
                    $next.css({ opacity: 0.0 })
                         .addClass('active')
                         .animate({ opacity: 1.0 }, 1000, function () {
                             $active.removeClass('active last-active');
                         });
                }
            }
        }
    }
}

function DisplayBigSlideShow() {


    if ($('#slideshowImageDiv').html() != null) {

        var $active = $('#slideshowImageDiv IMG.active');

        if ($active.length == 0) $active = $('#slideshowImageDiv IMG:last');

        var imageIndex = parseInt($active.attr('id').replace('imgSlideShow', ''));

        if (slideShowImageArray != null) {
            if (slideShowImageArray.length > imageIndex) {
                var nextImageId = 'imgSlideShow' + imageIndex;

                var $nextImageElement = $('#' + nextImageId);

                if ($nextImageElement.attr('src') == '') {
                    $nextImageElement.attr('src', slideShowImageArray[imageIndex].src);
                }
                else if (slideShowImageArray[imageIndex].IsLoaded == true) {

                    imageIndex++;

                    nextImageId = 'imgSlideShow' + imageIndex;
                    $nextImageElement = $('#' + nextImageId);

                    if ($nextImageElement.attr('src') == '') {
                        $nextImageElement.attr('src', slideShowImageArray[imageIndex].src);
                    }

                    // use this to pull the images in the order they appear in the markup
                    var $next = $active.next().length ? $active.next() : $('#slideshowImageDiv IMG:first');

                    $active.addClass('last-active');
                    $next.css({ opacity: 0.0 })
                         .addClass('active')
                         .animate({ opacity: 1.0 }, 1000, function () {
                             $active.removeClass('active last-active');
                         });
                }
            }
        }
    }
}

function DisplayHomeSlideShow() {

    if ($('#homeslideshowImageDiv').html() != null) {

        var $active = $('#homeslideshowImageDiv IMG.active');

        if ($active.length == 0) $active = $('#homeslideshowImageDiv IMG:last');

        var imageIndex = parseInt($active.attr('id').replace('imgHomeSlideShow', ''));

        if (homeSlideShowImageArray != null) {
            if (homeSlideShowImageArray.length > imageIndex) {
                var nextImageId = 'imgHomeSlideShow' + imageIndex;

                var $nextImageElement = $('#' + nextImageId);

                if ($nextImageElement.attr('src') == '') {
                    $nextImageElement.attr('src', homeSlideShowImageArray[imageIndex].src);
                }
                else if (homeSlideShowImageArray[imageIndex].IsLoaded == true) {

                    imageIndex++;

                    nextImageId = 'imgHomeSlideShow' + imageIndex;
                    $nextImageElement = $('#' + nextImageId);

                    if ($nextImageElement.attr('src') == '') {
                        $nextImageElement.attr('src', homeSlideShowImageArray[imageIndex].src);
                    }

                    // use this to pull the images in the order they appear in the markup
                    var $next = $active.next().length ? $active.next() : $('#homeslideshowImageDiv IMG:first');

                    $active.addClass('last-active');
                    $next.css({ opacity: 0.0 })
                         .addClass('active')
                         .animate({ opacity: 1.0 }, 1000, function () {
                             $active.removeClass('active last-active');
                         });
                }
            }
        }
    }
}

function DisplayCategorySlideShow() {


    if ($('#categorySlideshowImageDiv').html() != null) {
        var $active = $('#categorySlideshowImageDiv IMG.active');

        if ($active.length == 0) $active = $('#categorySlideshowImageDiv IMG:last');

        var imageIndex = parseInt($active.attr('id').replace('imgCategorySlideShow', ''));

        if (categorySlideShowImageArray != null) {
            if (categorySlideShowImageArray.length > imageIndex) {
                var nextImageId = 'imgCategorySlideShow' + imageIndex;

                var $nextImageElement = $('#' + nextImageId);

                if ($nextImageElement.attr('src') == '') {
                    $nextImageElement.attr('src', categorySlideShowImageArray[imageIndex].src);
                }
                else if (categorySlideShowImageArray[imageIndex].IsLoaded == true) {

                    imageIndex++;

                    nextImageId = 'imgCategorySlideShow' + imageIndex;
                    $nextImageElement = $('#' + nextImageId);

                    if ($nextImageElement.attr('src') == '') {
                        $nextImageElement.attr('src', categorySlideShowImageArray[imageIndex].src);
                    }

                    // use this to pull the images in the order they appear in the markup
                    var $next = $active.next().length ? $active.next() : $('#categorySlideshowImageDiv IMG:first');

                    $active.addClass('last-active');
                    $next.css({ opacity: 0.0 })
                         .addClass('active')
                         .animate({ opacity: 1.0 }, 1000, function () {
                             $active.removeClass('active last-active');
                         });
                }
            }
        }
    }
}