/// <reference name="MicrosoftAjax.js"/>

Type.registerNamespace("BlueSites");

BlueSites.ImageViewer = function(element) {
    BlueSites.ImageViewer.initializeBase(this, [element]);
    this._firstTimeSelectedImageChanged = true;
    this._firstTimeDisplay = true;
}

BlueSites.ImageViewer.prototype =
{
    initialize: function() {
        Sys.UI.Control.callBaseMethod(this, 'initialize');

        if (Sys.UI.DomElement.containsCssClass(this.get_element(), 'image-viewer-small')) {
            $(this.get_element()).find('a.show-large-images, img.large').click(
                Function.createDelegate(this,
                function() {
                    // Add overlay if supported
                    if (typeof document.body.style.maxHeight !== 'undefined') {
                        $('#image-viewer-overlay').addClass('image-viewer-overlay-background').show();
                    }

                    // Show ImageViewer
                    $('#image-viewer-shim').show().focus();
                    $('div.image-viewer-large').get(0).control.start(this.get_imageSlider().get_currentImage().control.get_positionIdentifier());
                    $('#image-viewer-container').show();
                })
            );
        }
        else if (Sys.UI.DomElement.containsCssClass(this.get_element(), 'image-viewer-large')) {
            // Bind to close click event handler
            $('#image-viewer-overlay, div.image-viewer-large a.close, div.image-viewer-large a.close-button').click
            (
	            Function.createDelegate(this, function() {
	                // Remove overlay if supported
	                if (typeof document.body.style.maxHeight !== "undefined") {
	                    $("#image-viewer-overlay").unbind('click').removeClass("image-viewer-overlay-background").hide();
	                }
	                $('#image-viewer-shim').hide();

	                // Hide ImageViewer
	                $('#image-viewer-container').hide();

	                this.get_imageSlider().pauseSlideShow();
	                $(this.get_element()).find('div.navigation a.button-play-pause').css('background-image', 'url(/Includes/Images/BlueSites/MediaViewer/ImageViewer/button-play.png)');
	            })
            );
        }
    },
    start: function(startupPositionIdentifier) {
        if (this.get_firstTimeDisplay()) {
            // Bind to events
            var 
                $imageViewer = $(this.get_element()),
                $navigation = $imageViewer.find('div.navigation'),
                $mediaViewer = $("#media-viewer");

            $navigation.find('a.button-previous').click(Function.createDelegate(this, function() { $(this.get_imageSlider().get_element()).find('div.button-previous').trigger('click'); }));
            $navigation.find('a.button-next').click(Function.createDelegate(this, function() { $(this.get_imageSlider().get_element()).find('div.button-next').trigger('click'); }));
            $navigation.find('a.button-play-pause').click
            (
                Function.createDelegate(this,
                function() {
                    if (this.get_imageSlider().get_slideShowRunning()) {
                        this.get_imageSlider().pauseSlideShow();
                        $navigation.find('a.button-play-pause').addClass('button-play').removeClass('button-pause');
                    }
                    else {
                        this.get_imageSlider().startSlideShow();
                        $navigation.find('a.button-play-pause').addClass('button-pause').removeClass('button-play');
                    }
                })
            );
            this.get_imageSlider().add_selectedImageChanged(Function.createDelegate(this, this.selectedImageChanged));
            this.get_imageSlider().add_imageRetrievalFailed(Function.createDelegate(this, this.imageRetrievalFailed));

            // Start internal ImageSlider 
            if (typeof startupPositionIdentifier != 'undefined') {
                this.get_imageSlider().set_startupPositionIdentifier(startupPositionIdentifier);
            }
            this.get_imageSlider().start();
            this.set_firstTimeDisplay(false);
        }

        if ((!isTemaSite) && ($("#media-viewer").find("span.video-viewer-tab").length === 0 && $("#media-viewer").find("span.panorama-viewer-tab").length === 0)) {
            $("#media-viewer").find("span.pictures-viewer-tab").remove();
            $("div#main-header .logo").css("margin-bottom", "15px");
        }
    },
    selectedImageChanged: function(sender, args) {
        var 
            $imageViewer = $(this.get_element()),
            $infoPanel = $imageViewer.find('div.info-panel'),
            selectedImageControl = sender.get_currentImage().control;

        $imageViewer.find('img.large').attr('src', selectedImageControl.get_UrlLarge()).attr('title', selectedImageControl.get_thumbnailImageTitle());
        $infoPanel.find('span.current-image-position').text(selectedImageControl.get_positionIdentifier());

        if (this.get_firstTimeSelectedImageChanged()) {
            $infoPanel.find('span.total-images').text(sender.get_totalImagesCount());
        }
        else {
            this.set_firstTimeSelectedImageChanged(false);
        }
    },
    imageRetrievalFailed: function(sender, args) {
        var 
            $imageViewer = $(this.get_element()),
            $infoPanel = $imageViewer.find('div.info-panel'),
            $mediaViewer = $("#media-viewer");

        $imageViewer.find(".large").attr("src", "/EPiShare/EnokPictures/BlueSites/Misc/1/media-image-missing.jpg").css("width", "641px");
        $imageViewer.find(".info-panel, .current-image-arrow, .button-previous, .button-next, .image-list-container").remove();
        $mediaViewer.find("span.pictures-viewer-tab").hide();
    },
    get_imageSlider: function() {
        return this._imageSlider;
    },
    set_imageSlider: function(value) {
        this._imageSlider = value;
    },
    get_firstTimeSelectedImageChanged: function() {
        return this._firstTimeSelectedImageChanged;
    },
    set_firstTimeSelectedImageChanged: function(value) {
        this._firstTimeSelectedImageChanged = value;
    },
    get_firstTimeDisplay: function() {
        return this._firstTimeDisplay;
    },
    set_firstTimeDisplay: function(value) {
        this._firstTimeDisplay = value;
    }
}
BlueSites.ImageViewer.registerClass('BlueSites.ImageViewer', Sys.UI.Control);

if (typeof (Sys) !== 'undefined') { Sys.Application.notifyScriptLoaded(); }