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

/*
 * jQuery UI PlayerInfoPanel
 *
 * Depends:
 *   jquery.ui.core.js
 *   jquery.ui.widget.js
 *   jquery.iscroll.js
 *   Mediasite.Player.Localization.js
 *
 */
(function ($) {
    $.widget("ui.playerinfopanel", {
        options: {
            presentaton: null,
            onChapterChanged: null,
            ids: {
                scroll: 'ui-playerinfopanel-scroll',
                scrollWrapper: 'ui-playerinfopanel-scroll-wrapper',
                header: 'ui-playerinfopanel-header',
                presenters: 'ui-playerinfopanel-presenters',
                description: 'ui-playerinfopanel-description',
                date: 'ui-playerinfopanel-date',
                time: 'ui-playerinfopanel-time',
                duration: 'ui-playerinfopanel-duration',
                dateInfoSection: 'ui-playerinfopanel-dateinfo',
                presenterImage: 'ui-playerinfopanel-presenterimage'
            },
            scrollbarColor: 'rgba(255,255,255,0.5)',
            defaultPresenterImageSrc: null
        },

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

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


            this.element.addClass("ui-playerinfopanel");
            var markup =
                        '<div id="' + o.ids.header + '">Presentation Info</div>' +
						'<div id="' + o.ids.scrollWrapper + '">' +
							'<div id="' + o.ids.scroll + '">' +
								'<div id="' + o.ids.presenters + '">' +
									'<ul />' +
								'</div>' +
								'<p id="' + o.ids.description + '" />' +
							'</div>' +
						'</div>' +
						'<div id="' + o.ids.dateInfoSection + '"><span id="' + o.ids.date + '"></span><span id="' + o.ids.time + '"></span>' + Mediasite.Player.Localization.PresentationCard.Duration + '&nbsp;<span id="' + o.ids.duration + '"></span></div>'; 

            this.divMarkup = $(markup).appendTo(this.element);

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

        destroy: function () {
            this.element.removeClass("ui-playerinfopanel");
            this.divMarkup.remove();
        },

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

            // need to set the height of description wrapper for iscroll to work properly
            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 -= $('#' + o.ids.dateInfoSection).outerHeight(true);

            // availableHeight is now space allotted for the scroll wrapper
            // Allow for scroll wrapper's padding and margin (assuming these are set in px)
            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);

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

        updateDuration: function (duration) {
            var self = this;
            var o = self.options;
            $('#' + o.ids.duration, this.divMarkup).text(Mediasite.Player.TimeHelper.getDisplayFromDuration(duration, true));
        },

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

        _bindPresentation: function () {
            var self = this,
                o = self.options,
                p = o.presentation;

            if (p) {
                if (p.Title) {
                    $('#' + o.ids.header).text(p.Title);
                }

                if (p.Description) {
                    // replace line breaks with <br /> -- this is replacing literal \n, do we need to look for \r\n?
                    var desc = p.Description.replace(/\\n/g, "<br />");
                    $('#' + o.ids.description, this.divMarkup).html(desc);
                }

                if (p.Date) {
                    $('#' + o.ids.date, this.divMarkup).text(p.Date);
                }

                if (p.Time) {
                    $('#' + o.ids.time, this.divMarkup).text(p.Time);
                }

                this.updateDuration(p.Duration || 0);

                if (p.Presenters && p.Presenters.length > 0) {
                    var first = p.Presenters[0];

                    if (first.ImageUrl) {
                        $('<img id="' + o.ids.presenterImage + '" src="' + first.ImageUrl + '" alt="' + first.Name + '" title="' + first.Name + '" class="ui-corner-all" />').prependTo($('#' + o.ids.presenters));
                    } else if (o.defaultPresenterImageSrc) {
                        $('<img id="' + o.ids.presenterImage + '" src="' + o.defaultPresenterImageSrc + '" alt="' + first.Name + '" title="' + first.Name + '" class="ui-corner-all" />').prependTo($('#' + o.ids.presenters));
                    }

                    var $item;

                    $.each(p.Presenters, function (i) {
                        if (p.Presenters[i].BioUrl && p.Presenters[i].BioUrl.length > 0) {
                            $item = $('<li><a href="' + p.Presenters[i].BioUrl + '" target="_blank">' + p.Presenters[i].Name + '</a></li>');
                        }
                        else {
                            $item = $('<li>').text(p.Presenters[i].Name);
                        }

                        // on mouseover swap out new presenter img
                        $item.mouseover(function () {
                            var presenter = p.Presenters[i];
                            if (presenter.ImageUrl) {
                                $('#' + o.ids.presenterImage).attr({ 'src': presenter.ImageUrl, 'title': presenter.Name, 'alt': presenter.Name });
                            } else if (o.defaultPresenterImageSrc) {
                                $('#' + o.ids.presenterImage).attr({ 'src': o.defaultPresenterImageSrc, 'title': presenter.Name, 'alt': presenter.Name });
                            }
                        });

                        $('#' + o.ids.presenters + ' ul').append($item);
                    });
                }
            }
        }
    });
})(jQuery);
