/// <reference path="../ScriptReference/jquery-1.5.2.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'
            },
            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("ui-playerchapterspanel");
            var markup = '<p class="' + o.ids.header + '">' + Mediasite.Player.Localization.Buttons.Chapters + '</p>' +
							'<div id="' + o.ids.scrollWrapper + '">' +
								'<div id="' + o.ids.scroll + '">' +
									'<ul class="ui-playerchapterspanel-list" />' +
								'</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 () {
            this.element.removeClass("ui-playerchapterspanel");
            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) {
                    var item = $('<li title="' + chapters[i].Text + '">' + Mediasite.Player.TimeHelper.getDisplayFromDuration(chapters[i].Time, true) + '<span class="ui-playerchapterspanel-chaptertext">' + chapters[i].Text + '</span></li>').click(function () {
                        if (o.onChapterChanged) {
                            o.onChapterChanged(i + 1);
                        }
                    });
                    $('ul', self.element).append(item);
                });
            }
        }
    });
})(jQuery);