/// <reference path="../ScriptReference/jquery-1.7.1-vsdoc.js"/>

/*
* jQuery UI PlayerChaptersPanel
*
* Depends:
*   jquery.ui.core.js
*   jquery.ui.widget.js
*   Mediasite.Player.Localization.js
*
*/
(function ($) {
    $.widget("ui.playerchapterspanel", {
        options: {
            chapters: null,
            onChapterChanged: null,
            ids: {
                header: 'ui-playerchapterspanel-header',
                scroll: 'ui-playerchapterspanel-scroll',
                scrollWrapper: 'ui-playerchapterspanel-scroll-wrapper'
            },
            classes: {
                panel: "ui-playerchapterspanel",
                header: 'panel-header',
                chapterList: 'ui-playerchapterspanel-list',
                chapterItem: 'ui-playerchapterspanel-chapteritem',
                chapterText: 'ui-playerchapterspanel-chaptertext',
                chapterTime: 'ui-playerchapterspanel-chaptertime'
            },
            scrollbarColor: 'rgba(255,255,255,0.5)'
        },

        _setOption: function (key, value) {
            this.options[key] = value;
            this._bindChapters();
            this._super("_setOption", key, value);
        },

        _create: function () {
            var self = this,
                o = self.options;

            self.element.addClass(o.classes.panel);
            var markup = '<p id="' + o.ids.header + '" class="' + o.classes.header + '">' + Mediasite.Player.Localization.Buttons.Chapters + '</p>' +
							'<div id="' + o.ids.scrollWrapper + '">' +
								'<div id="' + o.ids.scroll + '">' +
									'<div class="' + o.classes.chapterList + '" />' +
								'</div>' +
							'</div>';
            self.divMarkup = $(markup).appendTo(self.element);

            $(window).resize(function () {
                self.updateLayout();
            });
        },

        updateLayout: function () {
            var self = this,
                o = self.options;

            var $scrollWrapper = $('#' + o.ids.scrollWrapper);
            var availableHeight = self.element.height();   // Start with panel's inner height
            // Subtract height of pertinent siblings
            availableHeight -= $('#' + o.ids.header).outerHeight(true);
            // availableHeight is now space alloted for the scroll wrapper
            // Allow for scroll wrapper's padding and margin
            availableHeight -= parseInt($scrollWrapper.css('margin-top'), 10) || 0;
            availableHeight -= parseInt($scrollWrapper.css('margin-bottom'), 10) || 0;
            availableHeight -= parseInt($scrollWrapper.css('padding-top'), 10) || 0;
            availableHeight -= parseInt($scrollWrapper.css('padding-bottom'), 10) || 0;

            availableHeight = availableHeight > 0 ? availableHeight : 20; // just in case

            $scrollWrapper.height(availableHeight);

            $('#' + o.ids.scroll).iscroll({ scrollbarColor: o.scrollbarColor });
        },

        destroy: function () {
            var o = this.options;
            this.element.removeClass(o.classes.panel);
            this.divMarkup.remove();
        },

        _init: function () {
            this._bindChapters();
            this.updateLayout();
        },

        _bindChapters: function () {
            var self = this,
                o = self.options,
                chapters = o.chapters;

            if (chapters && chapters.length > 0) {
                $.each(chapters, function (i, chapter) {

                    var time = Mediasite.Player.TimeHelper.Duration(chapter.Time);
                    var localizeTimeString = Mediasite.Player.Localization.Common.TimeAriaLabel.replaceholders(time.hours, time.minutes, time.seconds);
                    var ariaLabel = Mediasite.Player.Localization.Common.ChapterAriaLabel.replaceholders((i + 1), localizeTimeString, chapter.Text);

                    var item = $('<div class="' + o.classes.chapterItem + '" tabindex="0" role="button" aria-label="' + ariaLabel + '"><div class="' + o.classes.chapterTime + '">' + Mediasite.Player.TimeHelper.getDisplayFromDuration(chapter.Time, true) + '</div><div class="' + o.classes.chapterText + '">' + chapter.Text + '</div></div>').click(function () {
                        if (o.onChapterChanged) {
                            o.onChapterChanged(chapter.Time);
                        }
                    }).on('keyup', function (e) {
                        if (e.keyCode == 32 || e.keyCode == 13) {
                            if (o.onChapterChanged) {
                                o.onChapterChanged(chapter.Time);
                            }
                        }
                    });

                    $('.' + o.classes.chapterList, self.element).append(item);
                });
            }
        }
    });
})(jQuery);