﻿function DynamicImageGallery(imageGalleryVarName, carrouselId, items, imageGalleryBaseUrl, imageGalleryCarrouselImageId,
        imageGalleryCarrouselTitleId, imageGalleryCarrouselLinkId) {

    this.imageGalleryVarName = imageGalleryVarName;
    this.carrouselId = carrouselId;
    this.items = items;
    this.imageGalleryBaseUrl = imageGalleryBaseUrl;
    this.imageGalleryCarrouselImageId = imageGalleryCarrouselImageId;
    this.imageGalleryCarrouselTitleId = imageGalleryCarrouselTitleId;
    this.imageGalleryCarrouselLinkId = imageGalleryCarrouselLinkId;
    this.imageGalleryCarrouselObj = null;

    this.init = function (vertical, animation, wrap, auto) {
        jQuery("#" + carrouselId).jcarousel({
            vertical: vertical,
            size: items.length,
            itemLoadCallback: { onBeforeAnimation: this.imageGalleryCarrousel_itemLoadCallback },
            auto: auto,
            scroll: 1,
            animation: animation,
            wrap: wrap,
            initCallback: this.imageGalleryCarrousel_initCallback,
            itemFirstInCallback: this.imageGalleryCarrousel_itemFirstInCallback
        });
    }

    this.imageGalleryCarrousel_initCallback = function (carousel) {

        imageGalleryCarrouselObj = carousel;

        // Disable autoscrolling if the user clicks the prev or next button.
        carousel.buttonNext.bind('click', function () {
            carousel.startAuto(0);
        });

        carousel.buttonPrev.bind('click', function () {
            carousel.startAuto(0);
        });

        // Pause autoscrolling if the user moves with the cursor over the clip.
        //    carousel.clip.hover(function () {
        //        carousel.stopAuto();
        //    }, function () {
        //        carousel.startAuto();
        //    });
    };

    this.imageGalleryCarrousel_itemLoadCallback = function (carousel, state) {
        for (var i = carousel.first; i <= carousel.last; i++) {
            if (carousel.has(i)) {
                continue;
            }

            if (i > items.length) {
                break;
            }

            carousel.add(i, this.imageGalleryCarrousel_getItemHTML(items[i - 1]));
        }
    };

    this.imageGalleryCarrousel_itemFirstInCallback = function (carousel, item, idx, state) {
        var index = idx;

        if (index == 0) {
            index = items.length - 1; //ultima imagen
        }
        else if (index > 0) {
            index = (index - 1) % items.length;
        }
        else {
            var absIndex = Math.abs(index);
            index = items.length - 1 - (absIndex % items.length);
        }

        var item = items[index];

        DynamicImageGallery.imageGalleryCarrousel_select(item.url, item.title, item.navigateUrl, false, imageGalleryBaseUrl,
            imageGalleryCarrouselImageId, imageGalleryCarrouselTitleId, imageGalleryCarrouselLinkId);
    }

    imageGalleryCarrousel_getItemHTML = function (item) {
        var onclick = "return DynamicImageGallery.imageGalleryCarrousel_select('" + item.url + "', '" + item.title + "', '" + item.navigateUrl + "', true, '"
            + imageGalleryBaseUrl + "', '" + imageGalleryCarrouselImageId + "', '" + imageGalleryCarrouselTitleId
            + "', '" + imageGalleryCarrouselLinkId + "');";
        return '<a href="#" onclick="' + onclick + '">'
            + '<img src="' + imageGalleryBaseUrl + item.thumbUrl + '" alt="' + item.url + '" /></a>';
    };
}

DynamicImageGallery.imageGalleryCarrousel_select = function (url, title, navigateUrl, stop, imageGalleryBaseUrl, imageGalleryCarrouselImageId,
        imageGalleryCarrouselTitleId, imageGalleryCarrouselLinkId) {
    var image = jQuery('#' + imageGalleryCarrouselImageId);
    image.attr("src", imageGalleryBaseUrl + url);
    image.attr("title", title);
    jQuery('#' + imageGalleryCarrouselTitleId).text(title);

    if (navigateUrl != '') {
        jQuery('#' + imageGalleryCarrouselLinkId).attr('href', navigateUrl);
        jQuery('#' + imageGalleryCarrouselLinkId).attr('target', '_blank');
    }
    else {
        jQuery('#' + imageGalleryCarrouselLinkId).attr('href', '#');
        jQuery('#' + imageGalleryCarrouselLinkId).attr('target', '');
    }


    //    if (stop) {
    //        jQuery(this.imageGalleryCarrouselObj).stopAuto();
    //    }

    return false;
}


