/// <reference name="MicrosoftAjax.js"/>
/// <reference path="../../client_scripts/ClientFoundation/Frameworks/JQuery/jquery.intellisense.js" />
/// <reference path="../../../../../../../Core/Source/Core/client_scripts/ClientFoundation/Frameworks/JQuery/jquery.intellisense.js" />
/// <reference path="../PGM_Commons.js" />
pgm.layouts.BelowLayout = function(containerId) {
    pgm.layouts.BelowLayout.initializeBase(this, [containerId]);
}
pgm.layouts.BelowLayout.prototype = {
    get_cycleGallery_Main: function() {
        var gallery = $(".Current_Picture_Main_Wrapper", this.get_container());
        return gallery;
    },

    setThumbnailsImagesSizes: function() {
        var ulWidth = 0;
        var maxHeight = 0;
        var options = { margins: true, paddings: true };
        var thumbnailsContainer = this.get_thumbnailsContainer();
        var thumbnailsContainerUL = thumbnailsContainer.children("ul");
        var cycleGalleryMainWrapper = this.get_cycleGallery_Main();
        this.get_thumbnails().each(function() {
            ulWidth += $(this).outerWidth(options);
            var outerHeight = $(this).outerHeight(options);
            if (outerHeight > maxHeight) {
                maxHeight = outerHeight;
            }
        });
        if (this._isBrowserInQuirksMode()) {
            if ($.browser.msie) {
                if ($.browser.version.startsWith("6")) {
                    var lastThumbnail = this.get_thumbnails().filter(":last");
                    var marginRight = Number(lastThumbnail.css("margin-right").replace("px",""));
                    var paddingRight = Number(lastThumbnail.css("padding-right").replace("px",""));

                    if (isNaN(marginRight)) {
                        marginRight = 0;
                    }
                    if (isNaN(paddingRight)) {
                        paddingRight = 0;
                    }
                    var rightOffset = marginRight + paddingRight;
                    ulWidth += rightOffset;
                }
                var galleryThumbnailsOffset = thumbnailsContainer.attr("offsetLeft");
                var pictureWidth = cycleGalleryMainWrapper.width() - galleryThumbnailsOffset;
                thumbnailsContainer.width(pictureWidth);
            }
        }
        this.get_currentPictureContainer().height(this.get_cycleGallery().outerHeight(options) + this.get_descriptionContainer().height());

        cycleGalleryMainWrapper.height(
            this.get_currentPictureContainer().outerHeight(options));


        thumbnailsContainerUL.width(ulWidth);
        thumbnailsContainerUL.height(maxHeight);
        if ($.browser.msie) {
            var hasScroll = pgm.layouts.hasVerticalScroll(thumbnailsContainerUL.get(0));
            if (hasScroll) {
                var scrollWidth = pgm.layouts.scrollbarWidth();
                maxHeight += scrollWidth;
                thumbnailsContainerUL.height(maxHeight);
            }
        }
    },
    afterLoadPicture: function(caller) {
        pgm.layouts.BelowLayout.callBaseMethod(this, "afterLoadPicture", [caller]);
        var thumbnailsContainer = this.get_thumbnailsContainer();
        var selectedThumbnail = this.get_selectedThumbnail();
        var thumbnailsContainerWidth = thumbnailsContainer.width();
        var duration = 300;
        var offset = (-1) * (thumbnailsContainerWidth / 2); //move the scroll to the center of the container if possible

        thumbnailsContainer.scrollTo(selectedThumbnail, { axis: 'x', margin: false, duration: duration, offset: offset });
    }
}
pgm.layouts.BelowLayout.registerClass("pgm.layouts.BelowLayout", pgm.layouts.baseLayout);