ThumbnailsPanel = function(container, containingWindow, id) {
    this.ID = id;
    this.Container = container;
}
ThumbnailsPanel.prototype = {
    _originalThumbnailWidth: 0,
    _originalThumbnailHeight: 0,
    _numSlidesPerPage: 0,
    _slideGroupManager: null,
    _pageCalculator: null,
    _isInitialized: false,
    _thumbnailsDiv: null,
    _pagerContainer: null,
    _slidesContainer: null,
    _textListContainer: null,
    _chaptersContainer: null,
    _pageLinkManager: null,
    _slides: null,
    _zoomHelper: null,
    _lastHilitedSingleSlide: null,
    _currentPageNumber: 0,
    _currentPointNumber: 0,

    _widthOfSurroundingElements: 8,
    _heightOfSurroundingElements: 29,
    _rowsOfThumbnails: 3,
    _columnsOfThumbnails: 4,
    _aspectRation: .75,
    _ratio: 1,
    _defaultThumbSizePosition: 4,
    _minimumThumbnailWidth: 92,

    OnLoad: function ThumbnailsArea$OnLoad() {
        this._getViewCookie();
        this._setPresentationThumbnailDimensions();
        this._calculateNumSlidesPerPage();
        this._registerEvents();
        this._initializeSlideGroupManager();
        this._initializePageCalculator();
        this._drawPageIfShowing();
    },

    _getViewCookie: function ThumbnailsArea$_getViewCookie() {
        var viewCookieValue = new MediasitePlayerCookie().GetNumberValue("SlideDisplay", this._defaultThumbSizePosition);
        if (LayoutOptions.SlideWidth <= 320 && viewCookieValue == '4') {
            viewCookieValue = 5;
        }

        if (viewCookieValue == '9') {
            if (Manifest.Chapters.length > 0) {
                this._currentPointNumber = viewCookieValue;
                return viewCookieValue;
            }
            else {
                this._currentPointNumber = this._defaultThumbSizePosition;
                return this._defaultThumbSizePosition;
            }
        }
        else {
            this._currentPointNumber = viewCookieValue;
            this._ratio = this.getThumbnailSizeRatio(viewCookieValue);
            return viewCookieValue;
        }
    },

    _setViewCookie: function ThumbnailsArea$_setViewCookie(viewCookieValue) {
        new MediasitePlayerCookie().SetValue("SlideDisplay", viewCookieValue);
    },

    _setPresentationThumbnailDimensions: function ThumbnailsArea$_setPresentationThumbnailDimensions() {
        var thumbnailsarea = $(this.ID);
        var containerWidth = thumbnailsarea.offsetWidth - 6;  // 6, this._widthOfSurroundingElements
        var containerHeight = thumbnailsarea.offsetHeight - 29; // 29, this._heightOfSurroundingElements        
        var thumbnailMaxTotalWidth = Math.floor(containerWidth / this._columnsOfThumbnails);
        var thumbnailMaxImageWidth = thumbnailMaxTotalWidth - this._widthOfSurroundingElements;
        var thumbnailMaxTotalHeight = Math.floor(containerHeight / this._rowsOfThumbnails);
        var thumbnailMaxImageHeight = thumbnailMaxTotalHeight - this._heightOfSurroundingElements;
        var thumbnailAdjustedImageHeight = Math.floor(thumbnailMaxImageWidth * .75);
        if (thumbnailAdjustedImageHeight < thumbnailMaxImageHeight) {
            this._originalThumbnailHeight = thumbnailAdjustedImageHeight;
            this._originalThumbnailWidth = Math.floor(thumbnailAdjustedImageHeight / .75);
        }
        else {
            this._originalThumbnailHeight = thumbnailMaxImageWidth * .75;
            this._originalThumbnailWidth = thumbnailMaxImageWidth;
        }
        this.OriginalThumbnailHeight = this._originalThumbnailHeight;
        this.OriginalThumbnailWidth = this._originalThumbnailWidth;
        this.ThumbnailHeight = Math.floor(this._originalThumbnailHeight * this._ratio);
        this.ThumbnailWidth = Math.floor(this._originalThumbnailWidth * this._ratio);
        this._calculateNumSlidesPerPage();
        this.SlidesPerPage = this._numSlidesPerPage;
    },

    _calculateNumSlidesPerPage: function ThumbnailsArea$_calculateNumSlidesPerPage() {
        var heightOfListItem = 30;
        var thumbnailsarea = $(this.ID);
        if (this.ThumbnailWidth > 0 && this.ThumbnailHeight > 0) {
            this._columnsOfThumbnails = Math.floor((thumbnailsarea.offsetWidth - 6) / (this.ThumbnailWidth + this._widthOfSurroundingElements));
            this._rowsOfThumbnails = Math.floor((thumbnailsarea.offsetHeight - 29) / (this.ThumbnailHeight + this._heightOfSurroundingElements));
        }
        else {
            this._columnsOfThumbnails = 1;
            this._rowsOfThumbnails = Math.floor((thumbnailsarea.offsetHeight - 29) / heightOfListItem);
        }
        this._numSlidesPerPage = this._rowsOfThumbnails * this._columnsOfThumbnails;
    },

    _registerEvents: function ThumbnailsArea$_registerEvents() {
        mPlayer.EventManager.Events.addHandler(SfKernel.EventType.Script, Function.createDelegate(this, this._onScriptEvent));
        mPlayer.EventManager.Events.addHandler(SfKernel.EventType.PlayingFromBeginning, Function.createDelegate(this, this._onPlayingFromBeginningEvent));
    },

    _onScriptEvent: function ThumbnailsArea$_onScriptEvent(sender, args) {
        var commandType = args['Command'];
        if (commandType !== SfKernel.ScriptCmdType.ShowSlide) {
            return;
        }
        var index = args['Index'];
        if (index < 1) {
            if (this._lastHilitedSingleSlide) {
                this._lastHilitedSingleSlide.unHiliteSlide();
                this._lastHilitedSingleSlide = null;
            }
            return;
        }
        if (mPlayer.DynamicAdd) {
            this._pageCalculator.set_totalSlides(Manifest.Slides.length);
            this._pageCalculator.Calculate();
            var totalSlides = this._pageCalculator.get_totalSlides();
            var maxPage = Math.ceil(totalSlides / this._numSlidesPerPage);
            if (maxPage > this._currentPageNumber) {
                this._pageLinkManager.updatePageLinks(maxPage);
                this._currentPageNumber = maxPage;
            }
        }
        if ($(this.ID).style.display == 'none') {
            return;
        }
        var pageInfo = this._pageCalculator.GetPageInfoForSlide(index);

        if (this._currentPageNumber !== pageInfo.get_pageNumber()) {
            if (this._lastHilitedSingleSlide) {
                this._lastHilitedSingleSlide.unHiliteSlide();
            }
            return;
        }
        if (mPlayer.DynamicAdd) {
            this._drawPage(pageInfo);
        }
        this._hiliteSlideNumber(index);
    },

    _onPlayingFromBeginningEvent: function ThumbnailsArea$_onPlayingFromBeginningEvent(sender, args) {
        if (this._lastHilitedSingleSlide) {
            this._lastHilitedSingleSlide.unHiliteSlide();
            this._lastHilitedSingleSlide = null;
        }
    },

    _initializeSlideGroupManager: function ThumbnailsArea$_initializeSlideGroupManager() {
        this._slideGroupManager = new Thumbnails.SlideGroupManager({ Timings: Manifest.Slides, Threshold: GlobalOptions.SlideGroupThreshold, MinSlidesToTrigger: GlobalOptions.SlideGroupMinToTrigger, MaxInGroup: GlobalOptions.SlideGroupMaxInGroup });
    },

    _initializePageCalculator: function ThumbnailsArea$_initializePageCalculator() {
        this._pageCalculator = new Thumbnails.PageCalculator(this._numSlidesPerPage, Manifest.Slides.length, this._slideGroupManager);
        this._pageCalculator.Calculate();
    },

    _drawPageIfShowing: function ThumbnailsArea$_drawPageIfShowing() {
        if ($(this.ID).style.display != 'none') {
            this._drawPage(this._calculateCurrentSlidePageInfo());
        }
    },

    _calculateCurrentSlidePageInfo: function ThumbnailsArea$_calculateCurrentSlidePageInfo() {
        return this._pageCalculator.GetPageInfoForSlide(mPlayer.CurrentSlideNumber);
    },

    _drawPage: function ThumbnailsArea$_drawPage(pageInfo) {
        if (!this._isInitialized) {
            this._initialize();
        }
        if (pageInfo.get_isDummy()) {
            return;
        }
        this._pageLinkManager.updatePageLinks(pageInfo.get_pageNumber());
        if (this._lastHilitedSingleSlide) {
            this._lastHilitedSingleSlide.unHiliteSlide();
        }
        var pageStartIndex = pageInfo.get_startIndex();
        var pageEndIndex = pageInfo.get_endIndex();
        var counter = 0;
        var currentSlideNumber = mPlayer.CurrentSlideNumber;
        for (var i = pageStartIndex; i <= pageEndIndex; ) {
            var currentSlideGroup = this._slideGroupManager.FindGroupForSlide(i + 1);
            if (!currentSlideGroup) {
                this._slides[counter].set_slideNumber(i + 1);
            }
            else {
                if (currentSlideGroup.get_isExpanded()) {
                    if (currentSlideGroup.get_min() === i + 1) {
                        this._slides[counter].set_group(currentSlideGroup);
                    }
                    else {
                        this._slides[counter].set_slideNumber(i + 1);
                    }
                }
                else {
                    this._slides[counter].set_group(currentSlideGroup);
                }
            }
            if (i + 1 === currentSlideNumber) {
                this._hiliteSlideNumber(i + 1);
            }
            if (currentSlideGroup && !currentSlideGroup.get_isExpanded()) {
                i += currentSlideGroup.GetCount();
            }
            else {
                i += 1;
            }
            this._slides[counter].set_visible(true);
            ++counter;
        }
        for (var i = counter; i < this._numSlidesPerPage && i < this._slides.length; ++i) {
            this._slides[i].set_visible(false);
        }
        this._currentPageNumber = pageInfo.get_pageNumber();
        this._thumbnailsDiv.scrollTop = 0;
    },

    _initialize: function ThumbnailsArea$_initialize() {
        this._initializeElements();
        this._drawBlankPage();
        this._isInitialized = true;
    },

    _initializeElements: function ThumbnailsArea$_initializeElements() {
        this._thumbnailsDiv = $('thumbNailsDiv');
        this._pagerContainer = $('pagerContainer');
        this._slidesContainer = $('thumbNailSlidesContainer');
        this._chaptersContainer = $('ChapterPointsArea');
    },

    _drawBlankPage: function ThumbnailsArea$_drawBlankPage() {
        this._pageLinkManager = new Thumbnails.PageLinkManager(this);
        this._addSlidesContainerElements();
        new Thumbnails.ViewButtonGroup(this);
    },

    _addSlidesContainerElements: function ThumbnailsArea$_addSlidesContainerElements() {
        this._addZoomHelper();
        this._slides = new Array(0);
        //this.updateSlidesPerPage();
        if (this._currentPointNumber == 0) {
            for (var i = 0; i < this._numSlidesPerPage; ++i) {
                this._slides[i] = new Thumbnails.SingleSlide(this, i + 1);
                this._slidesContainer.appendChild(this._slides[i].createListElement());
            }
        }
        else {
            for (var i = 0; i < this._numSlidesPerPage; ++i) {
                this._slides[i] = new Thumbnails.SingleSlide(this, i + 1);
                this._slidesContainer.appendChild(this._slides[i].createThumbnailElement());
            }
        }
    },

    _addZoomHelper: function ThumbnailsArea$_addZoomHelper() {
        this._zoomHelper = new Thumbnails.ZoomHelper(this);
        this._zoomHelper.ThumbnailHeight = this.ThumbnailHeight;
        this._zoomHelper.ThumbnailWidth = this.ThumbnailWidth;
        this._slidesContainer.appendChild(this._zoomHelper.GetZoomElement());
    },

    _hiliteSlideNumber: function ThumbnailsArea$_hiliteSlideNumber(slideNumber) {
        var singleSlide = this._getSingleSlide(slideNumber);
        singleSlide.hiliteSlide();
        if (this._lastHilitedSingleSlide && this._lastHilitedSingleSlide !== singleSlide) {
            this._lastHilitedSingleSlide.unHiliteSlide();
        }
        this._lastHilitedSingleSlide = singleSlide;
    },

    _getSingleSlide: function ThumbnailsArea$_getSingleSlide(slideNumber) {
        for (var i = 0; i < this._slides.length; ++i) {
            if (this._slides[i].containsSlide(slideNumber)) {
                return this._slides[i];
            }
        }
        throw Error.invalidOperation('Could not find slide object for slideNumber: ' + slideNumber);
    },

    _changeImageSize: function ThumbnailsArea$_changeImageSize() {
        for (var i = 0; i < this._slides.length; ++i) {
            this._slides[i].setSize(this.ThumbnailWidth, this.ThumbnailHeight);
        }
        this._zoomHelper.InitializeZoom();
    },

    _reDrawBlankPage: function ThumbnailsArea$_reDrawBlankPage() {
        this._pageLinkManager.updatePageLinks(this._currentPageNumber);
        var firstChild = this._slidesContainer.firstChild;
        while (!SfKernel.Util.IsNullOrUndefined(firstChild)) {
            this._slidesContainer.removeChild(firstChild);
            firstChild = this._slidesContainer.firstChild;
        }
        this._addSlidesContainerElements();
    },

    get_slidesContainer: function ThumbnailsArea$get_slidesContainer() {
        return this._slidesContainer;
    },

    get_pagerContainer: function ThumbnailsArea$get_pagerContainer() {
        return this._pagerContainer;
    },

    getTotalPages: function ThumbnailsArea$getTotalPages() {
        return this._pageCalculator.GetTotalPages();
    },

    drawPageNumber: function ThumbnailsArea$drawPageNumber(pageNumber) {
        this._drawPage(this._pageCalculator.GetPageInfo(pageNumber));
    },

    zoomSingleSlide: function ThumbnailsArea$zoomSingleSlide(slide) {
        this._zoomHelper.ZoomSingleSlide(slide);
    },

    updateSlidesPerPage: function ThumbnailsArea$updateSlidesPerPage(slidesPerPage) {
        this._calculateNumSlidesPerPage();
        var lastPage = Math.floor(Manifest.Slides.length / this._numSlidesPerPage) + 1;
        var targetPage = this._currentPageNumber;
        if (lastPage < this._currentPageNumber) {
            targetPage = lastPage;
        }
        this._pageCalculator = new Thumbnails.PageCalculator(this._numSlidesPerPage, Manifest.Slides.length, this._slideGroupManager);
        this._pageCalculator.Calculate();
        this._reDrawBlankPage();
        this._drawPage(this._pageCalculator.GetPageInfo(targetPage));
    },

    setSlideGroupsIsEnabled: function ThumbnailsArea$setSlideGroupsIsEnabled(isEnabled) {
        this._slideGroupManager.set_isEnabled(isEnabled);
        this._pageCalculator.Calculate();
        this._drawPage(this._calculateCurrentSlidePageInfo());
    },

    getCurrentActualThumbnailWidth: function ThumbnailsArea$getCurrentActualThumbnailWidth() {
        if (this._slides.length > 0) {
            return this._slides[0].getActualWidth();
        }
        return this.ThumbnailWidth;
    },

    getCurrentActualThumbnailHeight: function ThumbnailsArea$getCurrentActualThumbnailHeight() {
        if (this._slides.length > 0) {
            return this._slides[0].getActualHeight();
        }
        return this.ThumbnailHeight;
    },

    getThumbnailSizeRatio: function ThumbnailsArea$getThumbnailSizeRatio(point) {
        switch (point) {
            case 0:
                return 0; // list
                break;
            case 1:
                return 0.53; //6 across
                break;
            case 2:
                return 0.64; //5
                break;
            case 3:
                return 0.75; //? 
                break;
            case 4:
                return 1;    //4
                break;
            case 5:
                return 1.35; //3
                break;
            case 6:
                return 1.5;
                break;
            default:
                return 1;
                break;
        }
    },

    updateThumbnailSize: function ThumbnailsArea$updateThumbnailSize(ratio) {
        if (ratio > 0) {
            var thumbnailWidth = Math.floor(this._originalThumbnailWidth * ratio);
            if (thumbnailWidth >= this._minimumThumbnailWidth) {
                this.ThumbnailWidth = thumbnailWidth;
            }
            else {
                this.ThumbnailWidth = this._minimumThumbnailWidth;
            }
            this.ThumbnailHeight = Math.floor(this._originalThumbnailHeight * ratio);
            this._changeImageSize();
        }
        else {
            this.ThumbnailHeight = 0;
            this.ThumbnailWidth = 0;
        }
        this.updateSlidesPerPage();
    },

    showSlideList: function ThumbnailsArea$showSlideList() {
        var sizeKey = 0;
        this._setViewCookie(sizeKey);
        this.showThumbnailContainer();
        this._currentPointNumber = sizeKey;
        var ratio = this.getThumbnailSizeRatio(sizeKey);
        this.updateThumbnailSize(ratio);
    },

    showSmallThumbnails: function ThumbnailsArea$showSmallThumbnails() {
        var sizeKey = 4;
        this._setViewCookie(sizeKey);
        this.showThumbnailContainer();
        this._currentPointNumber = sizeKey;
        var ratio = this.getThumbnailSizeRatio(sizeKey);
        this.updateThumbnailSize(ratio);
    },

    showLargeThumbnails: function ThumbnailsArea$showLargeThumbnails() {
        var sizeKey = 5;
        this._setViewCookie(sizeKey);
        this.showThumbnailContainer();
        this._currentPointNumber = sizeKey;
        var ratio = this.getThumbnailSizeRatio(sizeKey);
        this.updateThumbnailSize(ratio);
    },

    showChapters: function ThumbnailsArea$showChapters() {
        var sizeKey = 9;
        this._setViewCookie(sizeKey);
        this.showChapterContainer();
    },

    showThumbnailContainer: function ThumbnailsArea$showThumbnailContainer() {
        this._slidesContainer.show();
        this._chaptersContainer.hide();
        this._pagerContainer.show();
    },

    showChapterContainer: function ThumbnailsArea$showChapterContainer() {
        this._slidesContainer.hide();
        this._chaptersContainer.show();
        this._pagerContainer.hide();
    },

    onGroupExpandCollapse: function ThumbnailsArea$onGroupExpandCollapse() {
        this._pageCalculator.Calculate();
        this._reDrawBlankPage();
        this._drawPage(this._pageCalculator.GetPageInfo(this._currentPageNumber));
    },

    showBigSlide: function ThumbnailsArea$showBigSlide(slideNumber) {
        mPlayer.CurrentPreviewImage = mPlayer.GetImageLocation(slideNumber, SfKernel.SlideType.FullSize);

        if (WindowHelper.IsOpen(mPlayer.PopupWindows.PreviewSlide)) {
            var previewSlide = mPlayer.PopupWindows.PreviewSlide.PreviewSlideAreaInstance;
            if (!SfKernel.Util.IsNullOrUndefined(previewSlide)) {
                previewSlide.ChangeImage(mPlayer.CurrentPreviewImage);
            }
        }
        else {
            mPlayer.PopupWindows.PreviewSlide = WindowHelper.CreateNamedPopup(WindowHelper.PopupNames.PreviewSlide, 'PreviewSlide', mPlayer.DefaultPopupWindowWidth, mPlayer.DefaultPopupWindowHeight, true, true);
        }
    }
}


Type.registerNamespace('Thumbnails');

////////////////////////////////////////////////////////////////////////////////
// Thumbnails.PageInfo

Thumbnails.PageInfo = function Thumbnails_PageInfo(startIndex, endIndex, pageNumber) {
    this._startIndex = startIndex;
    this._endIndex = endIndex;
    this._pageNumber = pageNumber;
}
Thumbnails.PageInfo.GetDummyPageInfo = function Thumbnails_PageInfo$GetDummyPageInfo() {
    var info = new Thumbnails.PageInfo(0, 0, 1);
    info._isDummy = true;
    return info;
}
Thumbnails.PageInfo.prototype = {
    _startIndex: 0,
    _endIndex: 0,
    _pageNumber: 0,
    _isDummy: false,

    get_startIndex: function Thumbnails_PageInfo$get_startIndex() {
        return this._startIndex;
    },

    get_endIndex: function Thumbnails_PageInfo$get_endIndex() {
        return this._endIndex;
    },

    get_pageNumber: function Thumbnails_PageInfo$get_pageNumber() {
        return this._pageNumber;
    },

    get_isDummy: function Thumbnails_PageInfo$get_isDummy() {
        return this._isDummy;
    },

    ContainsSlide: function Thumbnails_PageInfo$ContainsSlide(slideNumber) {
        return (slideNumber - 1 >= this._startIndex && slideNumber - 1 <= this._endIndex);
    }
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.PageCalculator

Thumbnails.PageCalculator = function Thumbnails_PageCalculator(slidesPerPage, totalSlides, slideGroupManager) {
    this._slidesPerPage = slidesPerPage;
    this._totalSlides = totalSlides;
    this._slideGroupManager = slideGroupManager;
    this._pagesInfo = null;
}
Thumbnails.PageCalculator.prototype = {
    _slidesPerPage: 0,
    _totalSlides: 0,
    _slideGroupManager: null,
    _pagesInfo: null,

    get_totalSlides: function Thumbnails_PageCalculator$get_totalSlides() {
        return this._totalSlides;
    },
    set_totalSlides: function Thumbnails_PageCalculator$set_totalSlides(value) {
        this._totalSlides = value;
        return value;
    },

    get_slidesPerPage: function Thumbnails_PageCalculator$get_slidesPerPage() {
        return this._slidesPerPage;
    },
    set_slidesPerPage: function Thumbnails_PageCalculator$set_slidesPerPage(value) {
        this._slidesPerPage = value;
        return value;
    },

    Calculate: function Thumbnails_PageCalculator$Calculate() {
        this._pagesInfo = new Array(0);
        var slidesCounter = 0;
        var pageStartIndex = 0;
        for (var i = 0; i < this._totalSlides; ) {
            var group = this._slideGroupManager.FindGroupForSlide(i + 1);
            if (group) {
                if (!group.get_isExpanded()) {
                    i += group.GetCount();
                }
                else {
                    i += 1;
                }
            }
            else {
                i += 1;
            }
            ++slidesCounter;
            if (slidesCounter === this._slidesPerPage) {
                var pageEndIndex = i - 1;
                if (pageEndIndex >= this._totalSlides) {
                    pageEndIndex = this._totalSlides - 1;
                }
                this._pagesInfo[this._pagesInfo.length] = new Thumbnails.PageInfo(pageStartIndex, pageEndIndex, this._pagesInfo.length + 1);
                slidesCounter = 0;
                pageStartIndex = i;
            }
        }
        this._collectRemainingSlides();
        return this._pagesInfo;
    },

    GetPageInfoForSlide: function Thumbnails_PageCalculator$GetPageInfoForSlide(slideNumber) {
        if (!this._pagesInfo.length) {
            return Thumbnails.PageInfo.GetDummyPageInfo();
        }
        if (slideNumber < 1) {
            return this._pagesInfo[0];
        }
        for (var i = 0; i < this._pagesInfo.length; ++i) {
            if (this._pagesInfo[i].ContainsSlide(slideNumber)) {
                return this._pagesInfo[i];
            }
        }
        return Thumbnails.PageInfo.GetDummyPageInfo();
        //throw Error.invalidOperation('could not find page for slideNumber: ' + slideNumber);
    },

    GetTotalPages: function Thumbnails_PageCalculator$GetTotalPages() {
        if (!this._pagesInfo.length) {
            return 1;
        }
        else {
            return this._pagesInfo.length;
        }
    },

    GetPageInfo: function Thumbnails_PageCalculator$GetPageInfo(pageNumber) {
        if (pageNumber > this._pagesInfo.length || pageNumber == 0) {
            pageNumber = this._pagesInfo.length;
        }
        return this._pagesInfo[pageNumber - 1];
    },

    _collectRemainingSlides: function Thumbnails_PageCalculator$_collectRemainingSlides() {
        var numPages = this._pagesInfo.length;
        if (!numPages) {
            if (this._totalSlides > 0) {
                this._pagesInfo[0] = new Thumbnails.PageInfo(0, this._totalSlides - 1, 1);
            }
            else {
                this._pagesInfo[0] = Thumbnails.PageInfo.GetDummyPageInfo();
            }
        }
        else {
            if (this._pagesInfo[numPages - 1].get_endIndex() < this._totalSlides - 1) {
                this._pagesInfo[numPages] = new Thumbnails.PageInfo(this._pagesInfo[numPages - 1].get_endIndex() + 1, this._totalSlides - 1, numPages + 1);
            }
        }
    }
}


Thumbnails.PageInfo.registerClass('Thumbnails.PageInfo');
Thumbnails.PageCalculator.registerClass('Thumbnails.PageCalculator');


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.SlideGroup

Thumbnails.SlideGroup = function Thumbnails_SlideGroup(min, max) {
    this._min = min;
    this._max = max;
}
Thumbnails.SlideGroup.prototype = {
    _min: 0,
    _max: 0,
    _isExpanded: false,

    get_max: function Thumbnails_SlideGroup$get_max() {
        return this._max;
    },
    set_max: function Thumbnails_SlideGroup$set_max(value) {
        this._max = value;
        return value;
    },

    get_isExpanded: function Thumbnails_SlideGroup$get_isExpanded() {
        return this._isExpanded;
    },
    set_isExpanded: function Thumbnails_SlideGroup$set_isExpanded(value) {
        this._isExpanded = value;
        return value;
    },

    get_min: function Thumbnails_SlideGroup$get_min() {
        return this._min;
    },
    set_min: function Thumbnails_SlideGroup$set_min(value) {
        this._min = value;
        return value;
    },

    GetCount: function Thumbnails_SlideGroup$GetCount() {
        return this._max - this._min + 1;
    },

    ContainsSlide: function Thumbnails_SlideGroup$ContainsSlide(slideNumber) {
        return (slideNumber >= this._min && slideNumber <= this._max);
    }
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.SlideGroupCalculator

Thumbnails.SlideGroupCalculator = function Thumbnails_SlideGroupCalculator(args) {
    this._groups = new Array(0);
    this._slideTimings = args['Timings'];
    this._threshold = args['Threshold'];
    this._minSlidesToTrigger = args['MinSlidesToTrigger'];
    this._maxInGroup = args['MaxInGroup'];
}
Thumbnails.SlideGroupCalculator.prototype = {
    _slideTimings: null,
    _threshold: 0,
    _minSlidesToTrigger: 0,
    _maxInGroup: 0,
    _currentGroup: null,

    GetGroups: function Thumbnails_SlideGroupCalculator$GetGroups() {
        return this._groups;
    },

    Calculate: function Thumbnails_SlideGroupCalculator$Calculate() {
        if (Manifest.PlayStatus != SfKernel.PresentationPlayStatus.OnDemand) {
            return;
        }
        if (Manifest.Slides.length < this._minSlidesToTrigger) {
            return;
        }
        var lastTiming = 0;
        for (var i = 0; i < this._slideTimings.length; ++i) {
            if (this._slideTimings[i].Time - lastTiming > this._threshold) {
                if (this._currentGroup) {
                    this._addCurrentGroup();
                }
                if (this._isNextBelowThreshold(i)) {
                    this._startNewGroup(i);
                }
                lastTiming = this._slideTimings[i].Time;
                continue;
            }
            if (!this._currentGroup) {
                if (this._isNextBelowThreshold(i)) {
                    this._startNewGroup(i);
                }
            }
            else {
                if (this._currentGroup.GetCount() < this._maxInGroup) {
                    this._addToExistingGroup(i);
                }
                else {
                    this._addCurrentGroup();
                    if (this._isNextBelowThreshold(i)) {
                        this._startNewGroup(i);
                    }
                }
            }
            lastTiming = this._slideTimings[i].Time;
        }
        if (this._currentGroup) {
            this._addCurrentGroup();
        }
    },

    _isNextBelowThreshold: function Thumbnails_SlideGroupCalculator$_isNextBelowThreshold(index) {
        if (index === this._slideTimings.length - 1) {
            return false;
        }
        return (this._slideTimings[index + 1].Time - this._slideTimings[index].Time <= this._threshold);
    },

    _addCurrentGroup: function Thumbnails_SlideGroupCalculator$_addCurrentGroup() {
        this._groups[this._groups.length] = this._currentGroup;
        this._currentGroup = null;
    },

    _startNewGroup: function Thumbnails_SlideGroupCalculator$_startNewGroup(index) {
        this._currentGroup = new Thumbnails.SlideGroup(index + 1, index + 1);
    },

    _addToExistingGroup: function Thumbnails_SlideGroupCalculator$_addToExistingGroup(index) {
        this._currentGroup.set_max(index + 1);
    }
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.SlideGroupManager

Thumbnails.SlideGroupManager = function Thumbnails_SlideGroupManager(args) {
    var calc = new Thumbnails.SlideGroupCalculator(args);
    calc.Calculate();
    this._slideGroups = calc.GetGroups();
}
Thumbnails.SlideGroupManager.prototype = {
    _slideGroups: null,
    _isEnabled: true,

    get_isEnabled: function Thumbnails_SlideGroupManager$get_isEnabled() {
        return this._isEnabled;
    },
    set_isEnabled: function Thumbnails_SlideGroupManager$set_isEnabled(value) {
        this._isEnabled = value;
        return value;
    },

    FindGroupForSlide: function Thumbnails_SlideGroupManager$FindGroupForSlide(slideNumber) {
        if (!this._isEnabled) {
            return null;
        }
        for (var i = 0; i < this._slideGroups.length; ++i) {
            if (slideNumber < this._slideGroups[i].get_min()) {
                return null;
            }
            if (this._slideGroups[i].ContainsSlide(slideNumber)) {
                return this._slideGroups[i];
            }
        }
        return null;
    }
}


Thumbnails.SlideGroup.registerClass('Thumbnails.SlideGroup');
Thumbnails.SlideGroupCalculator.registerClass('Thumbnails.SlideGroupCalculator');
Thumbnails.SlideGroupManager.registerClass('Thumbnails.SlideGroupManager');


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.OneLink

Thumbnails.OneLink = function Thumbnails_OneLink(parentArea) {
    this._parentArea = parentArea;
    this._createElement();
}
Thumbnails.OneLink.prototype = {
    _parentArea: null,
    _element: null,
    _pageNumber: 0,
    _onClickHandler: null,

    get_element: function Thumbnails_OneLink$get_element() {
        return this._element;
    },

    _createElement: function Thumbnails_OneLink$_createElement() {
        this._element = $(document.createElement('div'));
        this._element.className = 'thumbNailPageNormal';
    },

    _removeChildren: function Thumbnails_OneLink$_removeChildren() {
        while (this._element.hasChildNodes()) {
            this._element.removeChild(this._element.firstChild);
        }
    },

    setPrevious: function Thumbnails_OneLink$setPrevious(pageNumber) {
        this._pageNumber = pageNumber;
        this._element.className = 'thumbNailPagePrevious';
        this._removeChildren();
        SfKernel.Util.SetToolTip(this._element, Localization.ThumbnailsResource.Previous);
        this._addClickHandler();
        this.show();
    },

    setDotDotDot: function Thumbnails_OneLink$setDotDotDot() {
        this._makeText('...');
    },

    setPage: function Thumbnails_OneLink$setPage(pageNumber) {
        this._makePage(pageNumber);
    },

    setCurrentPage: function Thumbnails_OneLink$setCurrentPage(pageNumber) {
        this._makeText('' + pageNumber);
    },

    setOf: function Thumbnails_OneLink$setOf() {
        this._makeText(Localization.ThumbnailsResource.Of);
    },

    setTotal: function Thumbnails_OneLink$setTotal(totalPages) {
        this._makeText('' + totalPages);
    },

    setNext: function Thumbnails_OneLink$setNext(pageNumber) {
        this._pageNumber = pageNumber;
        this._element.className = 'thumbNailPageNext';
        this._removeChildren();
        SfKernel.Util.SetToolTip(this._element, Localization.ThumbnailsResource.Next);
        this._addClickHandler();
        this.show();
    },

    _makeText: function Thumbnails_OneLink$_makeText(text) {
        this._removeChildren();
        this._element.className = 'thumbNailPageCurrent';
        this._element.style.textDecoration = 'none';
        SfKernel.Util.SetText(this._element, text);
        SfKernel.Util.SetToolTip(this._element, '');
        this._removeClickHandler();
        this.show();
    },

    _removeClickHandler: function Thumbnails_OneLink$_removeClickHandler() {
        SfKernel.Util.SetCursor(this._element, SfKernel.CursorType.Default);
        this._element.stopObserving('click', this._onClickHandler);
    },

    _makePage: function Thumbnails_OneLink$_makePage(pageNumber) {
        this._pageNumber = pageNumber;
        this._element.className = 'thumbNailPageNormal';
        this._element.style.textDecoration = 'underline';
        this._removeChildren();
        SfKernel.Util.SetText(this._element, '' + pageNumber);
        SfKernel.Util.SetToolTip(this._element, '');
        this._addClickHandler();
        this.show();
    },

    _addClickHandler: function Thumbnails_OneLink$_addClickHandler() {
        SfKernel.Util.SetCursor(this._element, SfKernel.CursorType.Hand);
        this._element.stopObserving('click', this._onClickHandler);
        this._onClickHandler = Function.createDelegate(this, this._onClick);
        this._element.observe('click', this._onClickHandler);
    },

    show: function Thumbnails_OneLink$show() {
        this._element.show();
    },

    hide: function Thumbnails_OneLink$hide() {
        this._element.hide();
    },

    _onClick: function Thumbnails_OneLink$_onClick(sender, args) {
        this._parentArea.drawPageNumber(this._pageNumber);
    }
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.PageIndexCalculator

Thumbnails.PageIndexCalculator = function Thumbnails_PageIndexCalculator(pageNumber, totalPages, toEachSide) {
    this._pageNumber = pageNumber;
    this._totalPages = totalPages;
    this._toEachSide = toEachSide;
}
Thumbnails.PageIndexCalculator.prototype = {
    _pageNumber: 0,
    _totalPages: 0,
    _toEachSide: 0,

    get_startIndex: function Thumbnails_PageIndexCalculator$get_startIndex() {
        return Math.max(1, this._pageNumber - this._toEachSide - this._getLeftOverFromEnd());
    },

    get_endIndex: function Thumbnails_PageIndexCalculator$get_endIndex() {
        return Math.min(this._totalPages, this._pageNumber + this._toEachSide + this._getLeftOverFromStart());
    },

    _getLeftOverFromEnd: function Thumbnails_PageIndexCalculator$_getLeftOverFromEnd() {
        if ((this._totalPages - this._pageNumber) >= this._toEachSide) {
            return 0;
        }
        else {
            return this._toEachSide - (this._totalPages - this._pageNumber);
        }
    },

    _getLeftOverFromStart: function Thumbnails_PageIndexCalculator$_getLeftOverFromStart() {
        if (this._pageNumber > this._toEachSide) {
            return 0;
        }
        else {
            return this._toEachSide - this._pageNumber + 1;
        }
    }
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.PageLinkChain

Thumbnails.PageLinkChain = function Thumbnails_PageLinkChain(parentArea) {
    this._parentArea = parentArea;
    this._createPageTextSpan();
    this._createPageLinks();
}
Thumbnails.PageLinkChain.prototype = {
    _parentArea: null,
    _pageTextSpan: null,
    _pageLinks: null,

    selectPage: function Thumbnails_PageLinkChain$selectPage(pageNumber) {
        var totalPages = this._parentArea.getTotalPages();
        var toEachSide = (Thumbnails.PageLinkChain._numLinks - 1) / 2;
        var pageIndexCalculator = new Thumbnails.PageIndexCalculator(pageNumber, totalPages, toEachSide);
        var counter = 0;
        if (pageNumber > 1) {
            this._pageLinks[counter].setPrevious(pageNumber - 1);
            ++counter;
        }
        if (pageIndexCalculator.get_startIndex() > 1) {
            this._pageLinks[counter].setDotDotDot();
            ++counter;
        }
        for (var i = pageIndexCalculator.get_startIndex(); i <= pageIndexCalculator.get_endIndex(); ++i) {
            if (i === pageNumber) {
                this._pageLinks[counter].setCurrentPage(i);
            }
            else {
                this._pageLinks[counter].setPage(i);
            }
            ++counter;
        }
        if (pageIndexCalculator.get_endIndex() < totalPages) {
            this._pageLinks[counter].setDotDotDot();
            ++counter;
        }
        this._pageLinks[counter].setOf();
        ++counter;
        this._pageLinks[counter].setTotal(totalPages);
        ++counter;
        if (pageNumber < totalPages) {
            this._pageLinks[counter].setNext(pageNumber + 1);
            ++counter;
        }
        for (var i = counter; i < this._pageLinks.length; ++i) {
            this._pageLinks[i].hide();
        }
    },

    _createPageTextSpan: function Thumbnails_PageLinkChain$_createPageTextSpan() {
        this._pageTextSpan = $(document.createElement('div'));
        this._pageTextSpan.className = 'thumbNailPageLabel';
        SfKernel.Util.SetText(this._pageTextSpan, Localization.ThumbnailsResource.Page + ':');
        this._parentArea.get_pagerContainer().appendChild(this._pageTextSpan);
    },

    _createPageLinks: function Thumbnails_PageLinkChain$_createPageLinks() {
        var extraStuff = 6;
        this._pageLinks = new Array(Thumbnails.PageLinkChain._numLinks + extraStuff);
        for (var i = 0; i < Thumbnails.PageLinkChain._numLinks + extraStuff; ++i) {
            this._appendOneLink(i);
        }
    },

    _appendOneLink: function Thumbnails_PageLinkChain$_appendOneLink(index) {
        var link = new Thumbnails.OneLink(this._parentArea);
        this._parentArea.get_pagerContainer().appendChild(link.get_element());
        this._pageLinks[index] = link;
    }
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.PageLinkManager

Thumbnails.PageLinkManager = function Thumbnails_PageLinkManager(parentArea) {
    this._parentArea = parentArea;
    this._topPageLinks = new Thumbnails.PageLinkChain(this._parentArea);
}
Thumbnails.PageLinkManager.prototype = {
    _parentArea: null,
    _topPageLinks: null,

    updatePageLinks: function Thumbnails_PageLinkManager$updatePageLinks(pageNumber) {
        this._topPageLinks.selectPage(pageNumber);
    }
}

Thumbnails.OneLink.registerClass('Thumbnails.OneLink');
Thumbnails.PageIndexCalculator.registerClass('Thumbnails.PageIndexCalculator');
Thumbnails.PageLinkChain.registerClass('Thumbnails.PageLinkChain');
Thumbnails.PageLinkManager.registerClass('Thumbnails.PageLinkManager');
Thumbnails.PageLinkChain._numLinks = 9;


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.SingleSlide

Thumbnails.SingleSlide = function Thumbnails_SingleSlide(parentArea, position) {
    this._parentArea = parentArea;
    this._position = position;
    this._expandCollapse = new Thumbnails.SingleSlideExpandCollapse(this, this._parentArea);
}
Thumbnails.SingleSlide.prototype = {
    _parentArea: null,
    _position: 0,
    _group: null,
    _element: null,
    _imageElement: null,
    _imageContainer: null,
    _previewLinkElement: null,
    //    _playLinkElement: null,
    _slideNumberElement: null,
    _timingElement: null,
    _titleElement: null,
    _expandCollapse: null,
    _zoomHandle: 0,
    _slideNumber: 0,
    _visible: false,

    get_slideNumber: function Thumbnails_SingleSlide$get_slideNumber() {
        return this._slideNumber;
    },
    set_slideNumber: function Thumbnails_SingleSlide$set_slideNumber(value) {
        this._slideNumber = value;
        this._imageElement.setAttribute('src', mPlayer.GetImageLocationUsingWidthAndHeight(this._slideNumber, this._parentArea.ThumbnailWidth, this._parentArea.ThumbnailHeight));
        if (this._parentArea._currentPointNumber != 0) {
            SfKernel.Util.SetToolTip(this._imageElement, '' + SfKernel.EncodeClean(Manifest.Slides[this._slideNumber - 1].Text));
        }
        SfKernel.Util.SetText(this._timingElement, SfKernel.GetDisplayDuration(Manifest.Slides[this._slideNumber - 1].Time));
        SfKernel.Util.SetText(this._slideNumberElement, '' + this._slideNumber);
        if (this._titleElement) {
            SfKernel.Util.SetText(this._titleElement, '' + SfKernel.EncodeClean(Manifest.Slides[this._slideNumber - 1].Text));
            SfKernel.Util.SetToolTip(this._titleElement, SfKernel.EncodeClean(Manifest.Slides[this._slideNumber - 1].Description));
        }
        this._group = null;
        this._expandCollapse.unActivate();
        this._imageElement.setStyle({ display: 'block' })
        return value;
    },

    get_group: function Thumbnails_SingleSlide$get_group() {
        return this._group;
    },
    set_group: function Thumbnails_SingleSlide$set_group(value) {
        this._group = value;
        this._imageElement.setAttribute('src', mPlayer.GetImageLocationUsingWidthAndHeight(this._group.get_min(), this._parentArea.ThumbnailWidth, this._parentArea.ThumbnailHeight));
        if (this._parentArea._currentPointNumber != 0) {
            SfKernel.Util.SetToolTip(this._imageElement, '' + SfKernel.EncodeClean(Manifest.Slides[this._group.get_min() - 1].Text));
        }
        SfKernel.Util.SetText(this._timingElement, SfKernel.GetDisplayDuration(Manifest.Slides[this._group.get_min() - 1].Time));
        SfKernel.Util.SetText(this._slideNumberElement, '' + this._group.get_min());
        if (this._titleElement) {
            SfKernel.Util.SetText(this._titleElement, '' + SfKernel.EncodeClean(Manifest.Slides[this._group.get_min() - 1].Text));
            SfKernel.Util.SetToolTip(this._titleElement, SfKernel.EncodeClean(Manifest.Slides[this._group.get_min() - 1].Description));
        }
        this._slideNumber = this._group.get_min();
        this._expandCollapse.activate();
        return value;
    },

    get_visible: function Thumbnails_SingleSlide$get_visible() {
        return this._visible;
    },
    set_visible: function Thumbnails_SingleSlide$set_visible(value) {
        this._visible = value;
        if (this._visible) {
            this._element.style.visibility = 'visible';
        }
        else {
            this._element.style.visibility = 'hidden';
        }
        return value;
    },

    get_position: function Thumbnails_SingleSlide$get_position() {
        return Thumbnails.$create_Position(this._element.offsetLeft, this._element.offsetTop);
    },

    setSize: function Thumbnails_SingleSlide$setSize(width, height) {
        this._element.style.width = '' + width + 'px';
        this._imageElement.style.width = '' + width + 'px';
        this._imageElement.style.height = '' + height + 'px';
    },

    getActualWidth: function Thumbnails_SingleSlide$getActualWidth() {
        return this._imageElement.getWidth();
    },

    getActualHeight: function Thumbnails_SingleSlide$getActualHeight() {
        return this._imageElement.getHeight();
    },

    containsSlide: function Thumbnails_SingleSlide$containsSlide(slideNumber) {
        if (!this._group) {
            return (this._slideNumber === slideNumber);
        }
        if (this._group.get_isExpanded()) {
            return (this._slideNumber === slideNumber);
        }
        else {
            return this._group.ContainsSlide(slideNumber);
        }
    },

    hiliteSlide: function Thumbnails_SingleSlide$hiliteSlide() {
        //check if we're on list or thumb
        if (this._parentArea._currentPointNumber == 0) {
            this._element.className = 'textSlideListItemCurrent';
        }
        else {
            this._element.className = 'thumbnailItemCurrent';
        }
    },

    unHiliteSlide: function Thumbnails_SingleSlide$unHiliteSlide() {
        // check if we're on the currently running slide or not
        if (this._parentArea._currentPointNumber == 0) {
            this._element.className = 'textSlideListItem';
        }
        else {
            this._element.className = 'thumbNailSlide';
        }
    },

    createThumbnailElement: function Thumbnails_SingleSlide$createThumbnailElement() {
        this._element = $(document.createElement('div'));
        this._element.style.visibility = 'hidden';
        var width = this._parentArea.ThumbnailWidth + 'px';
        var height = this._parentArea.ThumbnailHeight + 'px';
        this._element.className = 'thumbNailSlide';
        var style = {};
        style['position'] = 'relative';
        style['float'] = 'left';
        style['width'] = width;
        this._element.setStyle(style);

        this._imageContainer = document.createElement('div');
        this._imageContainer.className = 'thumbNailImage';
        this._imageElement = $(document.createElement('img'));
        this._imageElement.setStyle({ width: width, height: height, left: '0px' });
        this._imageElement.setAttribute('src', LayoutOptions.ThemeImageBase + '/1x1.gif');
        this._bottomElement = $(document.createElement('div'));
        this._slideNumberElement = $(document.createElement('div'));
        this._slideNumberElement.className = 'thumbNailSlideNumber';
        this._timingElement = $(document.createElement('div'));
        this._timingElement.className = 'thumbNailTiming';

        this._imageContainer.appendChild(this._imageElement);
        this._element.appendChild(this._imageContainer);
        this._element.appendChild(this._bottomElement);
        this._bottomElement.appendChild(this._slideNumberElement);
        this._bottomElement.appendChild(this._expandCollapse.createBlankElement('thumbnailExpandCollapse'));
        this._bottomElement.appendChild(this._timingElement);
        this._bottomElement.className = 'thumbnailHandle';

        this._element.style.visibility = 'hidden';
        this._element.observe('click', Function.createDelegate(this, this._NavOnly));
        this._element.observe('dblclick', Function.createDelegate(this, this._NavAndSwitch));
        this._bottomElement.observe('mouseover', Function.createDelegate(this, this._ThumbnailonMouseOver));
        this._element.observe('mouseout', Function.createDelegate(this, this._ThumbnailonMouseOut));
        return this._element;
    },


    createListElement: function Thumbnails_SingleSlide$createListElement() {
        this._element = $(document.createElement('div'));
        var parentWidth = this._parentArea.get_slidesContainer().offsetWidth;
        this._element.setStyle({ width: (parentWidth - 20) + 'px' });
        this._parentArea.ThumbnailWidth = 28;
        this._parentArea.ThumbnailHeight = 21;
        var width = '28px';
        var height = '21px';
        this._element.className = 'textSlideListItem';

        this._slideNumberElement = $(document.createElement('div'));
        this._slideNumberElement.className = 'textSlideListNumber';
        this._element.appendChild(this._slideNumberElement);

        var imageContainer = document.createElement('div');
        this._imageElement = $(document.createElement('img'));
        this._imageElement.setAttribute('height', '21');
        this._imageElement.setAttribute('width', '28');
        imageContainer.appendChild(this._imageElement);
        this._element.appendChild(imageContainer);
        imageContainer.className = 'textSlideListZoomImage';

        this._addImageElementEvents();

        this._element.appendChild(this._expandCollapse.createBlankElement('slideListExpandCollapse'));

        this._timingElement = $(document.createElement('div'));
        this._timingElement.className = 'textSlideListTime';
        this._element.appendChild(this._timingElement);

        this._titleElement = $(document.createElement('div'));
        this._titleElement.className = 'textSlideListTitleNormal';
        this._titleElement.setStyle({ width: (parentWidth - 153) + 'px' });
        this._element.appendChild(this._titleElement);

        this._element.style.visibility = 'hidden';
        this._element.observe('click', Function.createDelegate(this, this._NavOnly));
        this._element.observe('dblclick', Function.createDelegate(this, this._NavAndSwitch));
        this._element.observe('mouseover', Function.createDelegate(this, this._ListonMouseOver));
        //this._imageElement.observe('mouseover', Function.createDelegate(this, this._ListImageonMouseOver));
        this._element.observe('mouseout', Function.createDelegate(this, this._ListonMouseOut));
        return this._element;
    },

    _addImageElementEvents: function Thumbnails_SingleSlide$_addImageElementEvents() {
        this._imageElement.observe('mouseover', Function.createDelegate(this, this._imageOnMouseOver));
    },

    _imageOnMouseOver: function Thumbnails_SingleSlide$_imageOnMouseOver() {
        this._delayedZoom();
    },

    _NavOnly: function Thumbnails_SingleSlide$_NavOnly(sender, args) {
        mPlayer.EventManager.PostCommandEvent(SfKernel.CommandEventId.NavigateToSlide, this, { SlideNumber: this._slideNumber });
    },

    _NavAndSwitch: function Thumbnails_SingleSlide$_NavAndSwitch() {
        mPlayer.EventManager.PostCommandEvent(SfKernel.CommandEventId.NavigateToSlide, this, { SlideNumber: this._slideNumber });
        mPlayer.btnSlideShowInstance.OnClick();
    },

    _ThumbnailonMouseOver: function Thumbnails_SingleSlide$_ThumbnailonMouseOver(sender, args) {
        this._element.className = 'thumbNailSlideX';
        this._previewLinkThumbnailOnMouseOver();
    },

    _ThumbnailonMouseOut: function Thumbnails_SingleSlide$_ThumbnailonMouseOut(sender, args) {
        this._element.className = 'thumbNailSlide';
        window.clearTimeout(this._zoomHandle);
    },

    //    _ListonClick: function Thumbnails_SingleSlide$_ListonClick(sender, args) {
    //        mPlayer.EventManager.PostCommandEvent(SfKernel.CommandEventId.NavigateToSlide, this, { SlideNumber: this._slideNumber });
    //    },

    _ListonMouseOver: function Thumbnails_SingleSlide$_ListonMouseOver(sender, args) {
        this._element.className = 'textSlideListItemOver';
        this._titleElement.className = 'textSlideListTitleOver';
    },

    _ListonMouseOut: function Thumbnails_SingleSlide$_ListonMouseOut(sender, args) {
        this._element.className = 'textSlideListItem';
        this._titleElement.className = 'textSlideListTitleNormal';
        window.clearTimeout(this._zoomHandle);
    },

    _delayedZoom: function Thumbnails_SingleSlide$_delayedZoom() {
        this._zoomHandle = window.setTimeout(Function.createDelegate(this, this._showZoom), 700);
    },

    _showZoom: function Thumbnails_SingleSlide$_showZoom() {
        this._parentArea.zoomSingleSlide(this);
    },

    _createPreviewLinkElement: function Thumbnails_SingleSlide$_createPreviewLinkElement() {
        this._previewLinkElement = $(document.createElement('div'));
        SfKernel.Util.SetToolTip(this._previewLinkElement, Localization.ThumbnailsResource.PreviewSlide);
        SfKernel.Util.SetCursor(this._previewLinkElement, SfKernel.CursorType.Hand);
    },

    _previewLinkThumbnailOnMouseOver: function Thumbnails_SingleSlide$_previewLinkThumbnailOnMouseOver(sender, args) {
        this._delayedZoom();
    },

    _playLinkOnMouseOver: function Thumbnails_SingleSlide$_playLinkOnMouseOver(sender, args) {
        this._playLinkElement.className = 'thumbNailZoomPlayLinkOver';
    },

    _playLinkOnMouseOut: function Thumbnails_SingleSlide$_playLinkOnMouseOut(sender, args) {
        this._playLinkElement.className = 'thumbNailZoomPlayLinkNormal';
    },

    _playLinkOnClick: function Thumbnails_SingleSlide$_playLinkOnClick(sender, args) {
        mPlayer.btnSlideShowInstance.OnClick();
    }
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.SingleSlideExpandCollapse

Thumbnails.SingleSlideExpandCollapse = function Thumbnails_SingleSlideExpandCollapse(singleSlide, parentArea) {
    this._singleSlide = singleSlide;
    this._parentArea = parentArea;
}
Thumbnails.SingleSlideExpandCollapse.prototype = {
    _singleSlide: null,
    _parentArea: null,
    _element: null,
    _isExpanded: false,
    _isShowing: false,

    get_isExpanded: function Thumbnails_SingleSlideExpandCollapse$get_isExpanded() {
        return this._isExpanded;
    },
    set_isExpanded: function Thumbnails_SingleSlideExpandCollapse$set_isExpanded(value) {
        this._isExpanded = value;
        if (this._isExpanded) {
            this._element.className = 'thumbNailExpandCollapseExpandedSmall';
        }
        else {
            this._element.className = 'thumbNailExpandCollapseCollapsedSmall';
        }
        return value;
    },

    createBlankElement: function Thumbnails_SingleSlideExpandCollapse$createBlankElement(id) {
        var divDom = document.createElement('div');
        this._element = $(divDom);
        this._element.className = 'thumbNailExpandCollapseExpandedSmall';
        this._element.id = id;
        return this._element;
    },

    activate: function Thumbnails_SingleSlideExpandCollapse$activate() {
        this.set_isExpanded(this._singleSlide.get_group().get_isExpanded());
        this._element.show();
    },

    unActivate: function Thumbnails_SingleSlideExpandCollapse$unActivate() {
        this._element.hide();
    }
}


Thumbnails.SingleSlide.registerClass('Thumbnails.SingleSlide');
Thumbnails.SingleSlideExpandCollapse.registerClass('Thumbnails.SingleSlideExpandCollapse');

////////////////////////////////////////////////////////////////////////////////
// Thumbnails.Dimension

Thumbnails.$create_Dimension = function Thumbnails_Dimension(width, height) {
    var $o = {};
    $o.Width = width;
    $o.Height = height;
    return $o;
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.Position

Thumbnails.$create_Position = function Thumbnails_Position(x, y) {
    var $o = {};
    $o.X = x;
    $o.Y = y;
    return $o;
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.Offset

Thumbnails.$create_Offset = function Thumbnails_Offset(top, left) {
    var $o = {};
    $o.Top = top;
    $o.Left = left;
    return $o;
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.Bounds

Thumbnails.$create_Bounds = function Thumbnails_Bounds(top, left, width, height) {
    var $o = {};
    $o.Top = top;
    $o.Left = left;
    $o.Width = width;
    $o.Height = height;
    return $o;
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.BoundsInt

Thumbnails.$create_BoundsInt = function Thumbnails_BoundsInt(top, left, width, height) {
    var $o = {};
    $o.Top = top;
    $o.Left = left;
    $o.Width = width;
    $o.Height = height;
    return $o;
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.ZoomCalculator

Thumbnails.ZoomCalculator = function Thumbnails_ZoomCalculator(containerDimension, zoomedImageDimension, thumbnailDimension) {
    this._containerDimension = containerDimension;
    this._zoomedImageDimension = zoomedImageDimension;
    this._thumbnailDimension = thumbnailDimension;
    this._deltaX = (this._zoomedImageDimension.Width - this._thumbnailDimension.Width) / 2;
    this._deltaY = (this._zoomedImageDimension.Height - this._thumbnailDimension.Height) / 2;
}
Thumbnails.ZoomCalculator.prototype = {
    _containerDimension: null,
    _zoomedImageDimension: null,
    _thumbnailDimension: null,
    _deltaX: 0,
    _deltaY: 0,

    calculatePositionToShow: function Thumbnails_ZoomCalculator$calculatePositionToShow(currentThumbnailPosition) {
        if (currentThumbnailPosition.X >= this._deltaX) {
            if (this._containerDimension.Width >= currentThumbnailPosition.X - this._deltaX + this._zoomedImageDimension.Width) {
                if (currentThumbnailPosition.Y >= this._deltaY) {
                    if (this._containerDimension.Height >= currentThumbnailPosition.Y - this._deltaY + this._zoomedImageDimension.Height) {
                        return Thumbnails.$create_Position((currentThumbnailPosition.X - this._deltaX), (currentThumbnailPosition.Y - this._deltaY));
                    }
                    else {
                        return Thumbnails.$create_Position((currentThumbnailPosition.X - this._deltaX), (this._containerDimension.Height - this._zoomedImageDimension.Height));
                    }
                }
                else {
                    return Thumbnails.$create_Position((currentThumbnailPosition.X - this._deltaX), 0);
                }
            }
            else {
                if (currentThumbnailPosition.Y >= this._deltaY) {
                    if (this._containerDimension.Height >= currentThumbnailPosition.Y - this._deltaY + this._zoomedImageDimension.Height) {
                        return Thumbnails.$create_Position((this._containerDimension.Width - this._zoomedImageDimension.Width), (currentThumbnailPosition.Y - this._deltaY));
                    }
                    else {
                        return Thumbnails.$create_Position((this._containerDimension.Width - this._zoomedImageDimension.Width), (this._containerDimension.Height - this._zoomedImageDimension.Height));
                    }
                }
                else {
                    return Thumbnails.$create_Position((this._containerDimension.Width - this._zoomedImageDimension.Width), 0);
                }
            }
        }
        else {
            if (currentThumbnailPosition.Y >= this._deltaY) {
                if (this._containerDimension.Height >= currentThumbnailPosition.Y - this._deltaY + this._zoomedImageDimension.Height) {
                    return Thumbnails.$create_Position(0, (currentThumbnailPosition.Y - this._deltaY));
                }
                else {
                    return Thumbnails.$create_Position(0, (this._containerDimension.Height - this._zoomedImageDimension.Height));
                }
            }
            else {
                return Thumbnails.$create_Position(0, 0);
            }
        }
    }
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.ZoomHelper

Thumbnails.ZoomHelper = function Thumbnails_ZoomHelper(parentArea) {
    this._parentArea = parentArea;
    this._setThumbDimensions();
    this._createZoomElement();
}
Thumbnails.ZoomHelper.prototype = {
    _parentArea: null,
    _zoomElement: null,
    _imageElement: null,
    _slideNumberElement: null,
    _expandCollapseElement: null,
    _slideTimeElement: null,
    _playLinkElement: null,
    _anchorElement: null,
    _previewLinkElement: null,
    _currentSingleSlide: null,
    _isZoomInitialized: false,
    _isExpanded: false,
    _hideHandle: 0,
    _zoomCalculator: null,
    _zoomHeight: 225,
    _zoomWidth: 300,
    _zoomFactor: 2,
    _zoomBarHeight: 24,

    _setThumbDimensions: function Thumbnails_ZoomHelper$setThumbDimensions() {
        this._zoomHeight = this._parentArea.OriginalThumbnailHeight * 2;
        this._zoomWidth = this._parentArea.OriginalThumbnailWidth * 2;
    },

    ZoomSingleSlide: function Thumbnails_ZoomHelper$ZoomSingleSlide(singleSlide) {
        var thumbnailPos = singleSlide.get_position();
        this._currentSingleSlide = singleSlide;

        this._zoomWidth = Math.floor(this._parentArea.OriginalThumbnailWidth * this._zoomFactor);
        this._zoomHeight = Math.floor(this._parentArea.OriginalThumbnailHeight * this._zoomFactor);
        this._imageElement.setAttribute('src', mPlayer.GetImageLocationUsingWidthAndHeight(singleSlide.get_slideNumber(), this._zoomWidth, this._zoomHeight));

        if (!this._isZoomInitialized) {
            this.InitializeZoom();
        }
        if (!singleSlide.get_group()) {
            this._expandCollapseElement.hide();
        }
        else {
            this._setExpanded(this._currentSingleSlide.get_group().get_isExpanded());
            this._expandCollapseElement.show();
        }
        this._setSlideNumberText();

        SfKernel.Util.SetText(this._slideTimeElement, SfKernel.GetDisplayDuration(Manifest.Slides[singleSlide.get_slideNumber() - 1].Time));
        SfKernel.Util.SetToolTip(this._imageElement, Manifest.Slides[singleSlide.get_slideNumber() - 1].Text); //handles IE
        SfKernel.Util.SetToolTip(this._focusCatcherElement, Manifest.Slides[singleSlide.get_slideNumber() - 1].Text); //handles FF etc.

        var initial = Thumbnails.$create_BoundsInt(thumbnailPos.Y, thumbnailPos.X, this._parentArea.getCurrentActualThumbnailWidth(), this._parentArea.getCurrentActualThumbnailHeight());

        var scrollOffsets = Thumbnails.$create_Offset(this._parentArea.get_slidesContainer().scrollTop, this._parentArea.get_slidesContainer().scrollLeft);
        thumbnailPos.X -= scrollOffsets.Left;
        thumbnailPos.Y -= scrollOffsets.Top;

        var displayPos = this._zoomCalculator.calculatePositionToShow(thumbnailPos);

        if (this._parentArea._currentPointNumber == 0) {
            displayPos.X += 85;
            $('thumbNailZoomAnchorElement').style.top = (thumbnailPos.Y - displayPos.Y - 7) + 'px';

        }
        //displayPos.X += scrollOffsets.Left;   
        //displayPos.Y += scrollOffsets.Top;

        if (displayPos.X + this._zoomElement.getWidth() > this._parentArea.get_slidesContainer().getWidth() - Thumbnails.ZoomHelper._scrollbarWidth) {
            displayPos.X -= Thumbnails.ZoomHelper._scrollbarWidth;
        }

        this.SetBounds(Thumbnails.$create_Bounds(initial.Top + 'px', initial.Left + 'px', initial.Width + 'px', initial.Height + 'px'));
        this._zoomElement.style.visibility = 'visible';
        this.SetBounds(Thumbnails.$create_Bounds(displayPos.Y + 'px', displayPos.X + 'px', this._zoomWidth + 'px', this._zoomHeight + 'px'))
    },

    GetZoomElement: function Thumbnails_ZoomHelper$GetZoomElement() {
        return this._zoomElement;
    },

    SetBounds: function Thumbnails_ZoomHelper$SetBounds(bounds) {
        this._zoomElement.style.top = bounds.Top;
        this._zoomElement.style.left = bounds.Left;
        this._zoomElement.style.width = bounds.Width;
        this._imageElement.style.width = bounds.Width;
        this._imageElement.style.height = bounds.Height;
    },

    _setSlideNumberText: function Thumbnails_ZoomHelper$_setSlideNumberText() {
        var text;
        if (!this._currentSingleSlide.get_group()) {
            text = '' + this._currentSingleSlide.get_slideNumber();
        }
        else {
            text = '' + this._currentSingleSlide.get_group().get_min();
        }
        SfKernel.Util.SetText(this._slideNumberElement, text);
    },

    _setExpanded: function Thumbnails_ZoomHelper$_setExpanded(val) {
        if (val) {
            SfKernel.Util.SetToolTip(this._expandCollapseElement, Localization.ThumbnailsResource.CollapseSlides);
            this._expandCollapseElement.className = 'thumbNailZoomExpandCollapseExpanded';
        }
        else {
            SfKernel.Util.SetToolTip(this._expandCollapseElement, Localization.ThumbnailsResource.ExpandSlides);
            this._expandCollapseElement.className = 'thumbNailZoomExpandCollapseCollapsed';
        }
        this._isExpanded = val;
    },

    InitializeZoom: function Thumbnails_ZoomHelper$InitializeZoom() {
        var containerDimension = this._parentArea.get_slidesContainer().getDimensions();
        this._zoomCalculator = new Thumbnails.ZoomCalculator(Thumbnails.$create_Dimension(containerDimension.width, containerDimension.height), Thumbnails.$create_Dimension(this._zoomElement.getWidth(), this._zoomElement.getHeight()), Thumbnails.$create_Dimension(this._parentArea.getCurrentActualThumbnailWidth(), this._parentArea.getCurrentActualThumbnailHeight()));
        this._isZoomInitialized = true;
    },

    _createZoomElement: function Thumbnails_ZoomHelper$_createZoomElement() {
        this._zoomElement = $(document.createElement('div'));
        this._zoomElement.className = 'thumbNailZoomElement';
        this._zoomElement.id = 'thumbNailZoomElement';

        this._focusCatcherElement = $(document.createElement('div'));
        this._focusCatcherElement.className = 'thumbnailZoomFocusCatcher';
        this._focusCatcherElement.id = 'thumbnailZoomFocusCatcher';
        this._focusCatcherElement.setStyle({ width: (this._zoomWidth) + 'px', height: (this._zoomHeight + this._zoomBarHeight) + 'px' })
        this._zoomElement.appendChild(this._focusCatcherElement);

        if (this._parentArea._currentPointNumber == 0) {
            this._createAnchorElement();
            this._zoomElement.appendChild(this._anchorElement);
        }
        this._zoomElement.setStyle({ width: this._zoomWidth + 'px', height: (this._zoomHeight + this._zoomBarHeight) + 'px' });

        var imgContainer = $(document.createElement('div'));
        imgContainer.className = 'thumbNailZoomImageDiv';
        this._zoomElement.appendChild(imgContainer);

        this._imageElement = $(document.createElement('img'));
        imgContainer.appendChild(this._imageElement);
        this._imageElement.setStyle({ width: this._zoomWidth + 'px', height: this._zoomHeight + 'px' });

        var bottomDiv = document.createElement('div');
        bottomDiv.className = 'thumbNailZoomBottomDiv';
        this._zoomElement.appendChild(bottomDiv);

        this._createSlideNumberElement();
        bottomDiv.appendChild(this._slideNumberElement);

        this._createExpandCollapseElement();
        bottomDiv.appendChild(this._expandCollapseElement);

        this._createSlideTimeElement();
        bottomDiv.appendChild(this._slideTimeElement);

        this._createPreviewLinkElement();
        bottomDiv.appendChild(this._previewLinkElement);

        this._addZoomElementEvents();
    },

    _createAnchorElement: function Thumbnails_ZoomHelper$_createAnchorElement() {
        this._anchorElement = $(document.createElement('div'));
        this._anchorElement.id = 'thumbNailZoomAnchorElement';
        this._anchorElement.className = 'thumbNailZoomAnchorElement';
        this._anchorElement.observe('click', Function.createDelegate(this, this._onImageClick));
        this._anchorElement.observe('mouseover', Function.createDelegate(this, this._resetZoomTimer), true);
        this._anchorElement.observe('mouseout', Function.createDelegate(this, this._onMouseOut), true);
    },

    _addZoomElementEvents: function Thumbnails_ZoomHelper$_addZoomElementEvents() {
        this._focusCatcherElement.observe('mouseover', Function.createDelegate(this, this._resetZoomTimer), true);
        this._slideNumberElement.observe('mouseover', Function.createDelegate(this, this._resetZoomTimer), true);
        this._expandCollapseElement.observe('mouseover', Function.createDelegate(this, this._resetZoomTimer), true);
        this._slideTimeElement.observe('mouseover', Function.createDelegate(this, this._resetZoomTimer), true);
        this._previewLinkElement.observe('mouseover', Function.createDelegate(this, this._resetZoomTimer), true);
        this._imageElement.observe('mouseover', Function.createDelegate(this, this._resetZoomTimer), true);
        this._zoomElement.observe('mouseout', Function.createDelegate(this, this._onMouseOut), true);
        this._focusCatcherElement.observe('click', Function.createDelegate(this, this._onImageClick));
        this._imageElement.observe('click', Function.createDelegate(this, this._onImageClick));
        this._focusCatcherElement.observe('mouseout', Function.createDelegate(this, this._onMouseOut), true);
    },

    _onImageClick: function Thumbnails_ZoomHelper$_onImageClick() {
        mPlayer.btnSlideShowInstance.OnClick();
        mPlayer.EventManager.PostCommandEvent(SfKernel.CommandEventId.NavigateToSlide, this, { SlideNumber: this._currentSingleSlide.get_slideNumber() });
    },

    _resetZoomTimer: function Thumbnails_ZoomHelper$_resetZoomTimer() {
        window.clearTimeout(this._hideHandle);
        this._parentArea.zoomSingleSlide(this._currentSingleSlide);
    },

    _imageOnMouseOver: function Thumbnails_ZoomHelper$_imageOnMouseOver(sender, args) {
        window.clearTimeout(this._hideHandle);
        this._parentArea.zoomSingleSlide(this._currentSingleSlide);
    },

    _createSlideNumberElement: function Thumbnails_ZoomHelper$_createSlideNumberElement() {
        this._slideNumberElement = $(document.createElement('div'));
        this._slideNumberElement.className = 'thumbNailZoomSlideNumber';
    },

    _createExpandCollapseElement: function Thumbnails_ZoomHelper$_createExpandCollapseElement() {
        this._expandCollapseElement = $(document.createElement('div'));
        SfKernel.Util.SetToolTip(this._expandCollapseElement, Localization.ThumbnailsResource.ExpandSlides);
        this._expandCollapseElement.className = 'thumbNailZoomExpandCollapseCollapsed';
        this._expandCollapseElement.observe('click', Function.createDelegate(this, this._expandCollapseOnClick));
    },

    _expandCollapseOnClick: function Thumbnails_ZoomHelper$_expandCollapseOnClick(sender, args) {
        if (this._isExpanded) {
            this._currentSingleSlide.get_group().set_isExpanded(false);
            this._parentArea.onGroupExpandCollapse();
        }
        else {
            this._currentSingleSlide.get_group().set_isExpanded(true);
            this._parentArea.onGroupExpandCollapse();
        }
    },

    _createSlideTimeElement: function Thumbnails_ZoomHelper$_createSlideTimeElement() {
        this._slideTimeElement = $(document.createElement('div'));
        this._slideTimeElement.className = 'thumbNailZoomTiming';
    },

    _createPreviewLinkElement: function Thumbnails_ZoomHelper$_createPreviewLinkElement() {
        this._previewLinkElement = $(document.createElement('div'));
        SfKernel.Util.SetToolTip(this._previewLinkElement, Localization.ThumbnailsResource.PreviewSlide);
        this._previewLinkElement.className = 'thumbNailZoomPreviewLinkOverSmall';
        this._previewLinkElement.observe('click', Function.createDelegate(this, this._previewLinkOnClick));
    },

    _previewLinkOnClick: function Thumbnails_ZoomHelper$_previewLinkOnClick(sender, args) {
        this._parentArea.showBigSlide(this._currentSingleSlide.get_slideNumber());
    },

    _onClick: function Thumbnails_ZoomHelper$_onClick(e) {
        mPlayer.EventManager.PostCommandEvent(SfKernel.CommandEventId.NavigateToSlide, this, { SlideNumber: this._currentSingleSlide.get_slideNumber() });
        Event.stop(e);
        window.clearTimeout(this._hideHandle);
    },

    _onMouseOver: function Thumbnails_ZoomHelper$_onMouseOver(e) {
        Event.stop(e);
        window.clearTimeout(this._hideHandle);
    },

    _onMouseOut: function Thumbnails_ZoomHelper$_onMouseOut(e) {
        Event.stop(e);
        this._hideHandle = window.setTimeout(Function.createDelegate(this, this._hide), 500);
    },

    _hide: function Thumbnails_ZoomHelper$_hide() {
        this._zoomElement.style.visibility = 'hidden';
        this._imageElement.setAttribute('src', LayoutOptions.ThemeImageBase + '/1x1.gif');
    }
}


Thumbnails.ZoomCalculator.registerClass('Thumbnails.ZoomCalculator');
Thumbnails.ZoomHelper.registerClass('Thumbnails.ZoomHelper');
Thumbnails.ZoomHelper._scrollbarWidth = 20;

////////////////////////////////////////////////////////////////////////////////
// Thumbnails.IRadioButtonGroup

Thumbnails.IRadioButtonGroup = function() { };
Thumbnails.IRadioButtonGroup.prototype = {
    selectButton: null
}
Thumbnails.IRadioButtonGroup.registerInterface('Thumbnails.IRadioButtonGroup');


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.RadioImageInfo

Thumbnails.$create_RadioImageInfo = function Thumbnails_RadioImageInfo(overImage, normalImage, checkedImage) {
    var $o = {};
    $o.overImage = overImage;
    $o.normalImage = normalImage;
    $o.checkedImage = checkedImage;
    return $o;
}


////////////////////////////////////////////////////////////////////////////////
// Thumbnails.RadioButton

Thumbnails.RadioButton = function Thumbnails_RadioButton(group, element, imageInfo, tooltip) {
    this._group = group;
    this._element = element;
    this._imageInfo = imageInfo;
    this._tooltip = tooltip;
    this._element.observe('mouseover', Function.createDelegate(this, this._onMouseOver));
    this._element.observe('mouseout', Function.createDelegate(this, this._onMouseOut));
    this._element.observe('click', Function.createDelegate(this, this._onClick));
    if (this._tooltip) {
        SfKernel.Util.SetToolTip(this._element, this._tooltip);
    }
}
Thumbnails.RadioButton.prototype = {
    _group: null,
    _element: null,
    _isChecked: false,
    _imageInfo: null,
    _tooltip: null,

    get_tooltip: function Thumbnails_RadioButton$get_tooltip() {
        return this._tooltip;
    },
    set_tooltip: function Thumbnails_RadioButton$set_tooltip(value) {
        this._tooltip = value;
        return value;
    },

    get_isChecked: function Thumbnails_RadioButton$get_isChecked() {
        return this._isChecked;
    },
    set_isChecked: function Thumbnails_RadioButton$set_isChecked(value) {
        this._isChecked = value;
        this._updateImage();
        return value;
    },

    _onClick: function Thumbnails_RadioButton$_onClick(sender, args) {
        this._group.selectButton(this);
    },

    _onMouseOver: function Thumbnails_RadioButton$_onMouseOver(sender, args) {
        if (this._isChecked) {
            return;
        }
        SfKernel.Util.SetCursor(this._element, SfKernel.CursorType.Hand);
        this._element.setAttribute('src', this._imageInfo.overImage);
    },

    _onMouseOut: function Thumbnails_RadioButton$_onMouseOut(sender, args) {
        this._updateImage();
        SfKernel.Util.SetCursor(this._element, SfKernel.CursorType.Default);
    },

    _updateImage: function Thumbnails_RadioButton$_updateImage() {
        if (this._isChecked) {
            this._element.setAttribute('src', this._imageInfo.checkedImage);
        }
        else {
            this._element.setAttribute('src', this._imageInfo.normalImage);
        }
    }
}

Thumbnails.RadioButton.registerClass('Thumbnails.RadioButton');

////////////////////////////////////////////////////////////////////////////////
// Thumbnails.ViewButtonGroup

Thumbnails.ViewButtonGroup = function Thumbnails_ViewButtonGroup(parentArea) {
    this._parentArea = parentArea;
    this._initialize();
}
Thumbnails.ViewButtonGroup.prototype = {
    _btnSlideList: null,
    _btnSmallThumbnails: null,
    _btnLargeThumbnails: null,
    _btnChapters: null,
    _parentArea: null,

    _initialize: function Thumbnails_ViewButtonGroup$_initialize() {
        this._btnSlideList = new Thumbnails.RadioButton(this, $('thumbNailViewButtonSlideList'), Thumbnails.$create_RadioImageInfo(LayoutOptions.ThemeImageBase + '/SlideSorter/btnSlideListOver.gif', LayoutOptions.ThemeImageBase + '/SlideSorter/btnSlideListNormal.gif', LayoutOptions.ThemeImageBase + '/SlideSorter/btnSlideListChecked.gif'), Localization.ThumbnailsResource.SlideList);
        this._btnSmallThumbnails = new Thumbnails.RadioButton(this, $('thumbNailViewButtonSmallThumbnails'), Thumbnails.$create_RadioImageInfo(LayoutOptions.ThemeImageBase + '/SlideSorter/btnSmallThumbOver.gif', LayoutOptions.ThemeImageBase + '/SlideSorter/btnSmallThumbNormal.gif', LayoutOptions.ThemeImageBase + '/SlideSorter/btnSmallThumbChecked.gif'), Localization.ThumbnailsResource.SmallThumbnails);
        this._btnLargeThumbnails = new Thumbnails.RadioButton(this, $('thumbNailViewButtonLargeThumbnails'), Thumbnails.$create_RadioImageInfo(LayoutOptions.ThemeImageBase + '/SlideSorter/btnLargeThumbOver.gif', LayoutOptions.ThemeImageBase + '/SlideSorter/btnLargeThumbNormal.gif', LayoutOptions.ThemeImageBase + '/SlideSorter/btnLargeThumbChecked.gif'), Localization.ThumbnailsResource.LargeThumbnails);
        this._btnSlideList.set_isChecked(false);
        this._btnSmallThumbnails.set_isChecked(false);
        this._btnLargeThumbnails.set_isChecked(true);

        if (Manifest.Chapters.length > 0) {
            this._btnChapters = new Thumbnails.RadioButton(this, $('thumbNailViewButtonChapters'), Thumbnails.$create_RadioImageInfo(LayoutOptions.ThemeImageBase + '/SlideSorter/btnChaptersOver.gif', LayoutOptions.ThemeImageBase + '/SlideSorter/btnChaptersNormal.gif', LayoutOptions.ThemeImageBase + '/SlideSorter/btnChaptersChecked.gif'), Localization.ThumbnailsResource.Chapters);
            this._btnChapters.set_isChecked(false);
        }
        else {
            $('thumbNailViewButtonChapters').style.display = 'none';
        }
        this.initializeCookieSetting();
    },

    initializeCookieSetting: function ThumbnailsArea$initializeCookieSetting() {
        var cookieValue = this._parentArea._getViewCookie();
        switch (cookieValue) {
            case 0:
                this.activateButton(this._btnSlideList);
                break;
            case 4:
                this.activateButton(this._btnSmallThumbnails);
                break;
            case 5:
                this.activateButton(this._btnLargeThumbnails);
                break;
            case 9:
                this.activateButton(this._btnChapters);
                this._parentArea.showChapters();
                break;
            default:
                this.activateButton(this._btnLargeThumbnails);
                break;
        }
    },

    activateButton: function ThumbnailsArea$activateButton(activeButton) {
        if (this._btnSlideList) { this._btnSlideList.set_isChecked(false); }
        if (this._btnSmallThumbnails) { this._btnSmallThumbnails.set_isChecked(false); }
        if (this._btnLargeThumbnails) { this._btnLargeThumbnails.set_isChecked(false); }
        if (this._btnChapters) { this._btnChapters.set_isChecked(false); }
        if (activeButton) { activeButton.set_isChecked(true); }
    },

    selectButton: function Thumbnails_ViewButtonGroup$selectButton(button) {
        this.activateButton(button);
        if (button == this._btnSlideList) {
            this._parentArea.showSlideList();
        }
        else if (button == this._btnSmallThumbnails) {
            this._parentArea.showSmallThumbnails();
        }
        else if (button == this._btnLargeThumbnails) {
            this._parentArea.showLargeThumbnails();
        }
        else if (button == this._btnChapters) {
            this._parentArea.showChapters();
        }
    }
}


Thumbnails.ViewButtonGroup.registerClass('Thumbnails.ViewButtonGroup', null, Thumbnails.IRadioButtonGroup);

/// Chapter Point Browser Panel

ChapterPointsPanel = function(container, containingWindow, id) {
    this.Container = container;
    this.ContainingWindow = containingWindow;
    this.ID = id;
    this.chaptersContainer = null;
    this.elements = null;

    this.OnLoad = function() {
        this.chaptersContainer = $(this.ID);
        this.Initialize();
    }

    this.Initialize = function() {
        this.elements = new Array(Manifest.Chapters.length);
        for (var i = 0; i < Manifest.Chapters.length; ++i) {
            this.AddChapterElement(i + 1);
            this.elements[i] = new ChapterPointElement(this, i + 1, Manifest.Chapters[i].Time);
            this.elements[i].addEvents();
        }
    }

    this.AddChapterElement = function(chapterNumber) {
        var div1 = this.createDiv('chapterDiv' + chapterNumber, 'chapterItem', null);
        this.chaptersContainer.appendChild(div1);
        var div2 = this.createDiv('chapterNumberSpan' + chapterNumber, 'chapterNumber', 'Chapter ' + chapterNumber);
        div1.appendChild(div2);
        var div3 = this.createDiv('chapterTimeSpan' + chapterNumber, 'chapterTime', SfKernel.GetDisplayDuration(Manifest.Chapters[chapterNumber - 1].Time));
        div1.appendChild(div3);
        var div4 = this.createDiv('chapterTitleSpan' + chapterNumber, 'chapterTitle', SfKernel.EncodeClean(Manifest.Chapters[chapterNumber - 1].Text));
        div4.title = SfKernel.EncodeClean(Manifest.Chapters[chapterNumber - 1].Text);
        div1.appendChild(div4);
    }

    this.createDiv = function(id, className, text) {
        var element = $(document.createElement('div'));
        element.setAttribute('id', id);
        element.className = className;
        if (text) {
            SfKernel.Util.SetText(element, text);
        }
        return element;
    }
}

ChapterPointElement = function(parentArea, chapterNumber, timing) {
    this._parentArea = parentArea;
    this._chapterNumber = chapterNumber;
    this._timing = timing;
    this._titleElement = $('chapterTitleSpan' + this._chapterNumber);
    this._chapterElement = $('chapterDiv' + this._chapterNumber);

    this.addEvents = function() {
        this._chapterElement.observe('mouseover', Function.createDelegate(this, function(sender, args) {
            this._chapterElement.className = 'chapterItemOver';
            this._titleElement.className = 'chapterTitleOver';
            SfKernel.Util.SetCursor(this._chapterElement, SfKernel.CursorType.Hand);
        }));
        this._chapterElement.observe('mouseout', Function.createDelegate(this, function(sender, args) {
            this._chapterElement.className = 'chapterItem';
            this._titleElement.className = 'chapterTitle';
            SfKernel.Util.SetCursor(this._chapterElement, SfKernel.CursorType.Default);
        }));
        this._chapterElement.observe('click', Function.createDelegate(this, function(sender, args) {
            mPlayer.EventManager.PostCommandEvent(SfKernel.CommandEventId.NavigateToChapter, this, { Number: this._chapterNumber, Time: this._timing });
        }));
        this._chapterElement.observe('dblclick', Function.createDelegate(this, function(sender, args) {
            mPlayer.EventManager.PostCommandEvent(SfKernel.CommandEventId.NavigateToChapter, this, { Number: this._chapterNumber, Time: this._timing });
            mPlayer.btnSlideShowInstance.OnClick();
        }));
    }
}