Changeset 23370 for gs2-extensions/video-and-audio/trunk

Timestamp:

2010-12-01T14:45:35+13:00 (13 years ago)

Author:

max

Message:

Update the ReplayMe VLC player plugin for Firefox to V 1.5.0 and add images.

Location:

gs2-extensions/video-and-audio/trunk/src/web

Files:

• images/CC.png (added)
• images/HD.png (added)
• images/MA.png (added)
• images/close.png (added)
• images/open.png (added)
• script/replayer.js (modified) (18 diffs)

gs2-extensions/video-and-audio/trunk/src/web/script/replayer.js

@@ -1 +1 @@
 /*!
- * Replayme Player v1.0.1
- * Based on JQueryUI v1.8.4
+ * Replayme Player v1.5.0
+ * Based on JQuery UI v1.8.4
  * 
  *
- * Copyright 2010, Maxime Rouast
+ * Copyright 2010, Maxime Roüast
  * Released under the GPL 2 License.
  *
@@ -14 +14 @@
 var user_is_dragging=0;
 var checkStatusTimer;
+var checkStatusTimer_is_on=0;
 var checkVideoSizeTimer;
 var previousHeight=0;
@@ -23 +24 @@
 function checkStatus()
 {
-
-    if(vlc.subtitle.count < 1)
-    {
-        $( "#subtitles" ).button( "option", "disabled", true );
-    }
-    else if (vlc.subtitle.count > 0)
-    {
-        $( "#subtitles" ).button( "option", "disabled", false );
-    }
-
-    if (vlc.input.state == 0) {
-        // current media has stopped
-        //onStop();
-        }
-    else if (vlc.input.state == 1) {
-        // current media is connecting
-        onOpening();
-        }
-    else if (vlc.input.state == 2) {
-        // current media is buffering data
-        onBuffering();
-        }
-    else if (vlc.input.state == 3) {
-        // current media is now playing
-        onPlaying();
-        }
-    else if (vlc.input.state == 4) {
-        // current media is now paused
-        //onPaused();
-        }
-    else if (vlc.input.state == 5) {
-        // current media is stopping
-        //onStopping();
-        }
-    else if (vlc.input.state == 6) {
-        // current media has finished playback
-        onEnd();
-        }
-
-    checkStatusTimer=setTimeout(function(){checkStatus()},1000);
+    if (!checkStatusTimer_is_on)
+        {
+            checkStatusTimer_is_on=1;
+        
+            if(vlc.subtitle.count < 1)
+            {
+                $( "#subtitles" ).button( "option", "disabled", true );
+            }
+            else if (vlc.subtitle.count > 0)
+            {
+                $( "#subtitles" ).button( "option", "disabled", false );
+                $( "#subtitles" ).button( "option", "label", "Subtitles: " + vlc.subtitle.description(vlc.subtitle.track));
+            }
+            
+            
+            //For the audio tracks we only enable the button if there is more than two tracks (in vlc world disabled count for one track)
+            if(vlc.audio.count < 3)
+            {
+                $( "#audiotracks" ).button( "option", "disabled", true );
+                $( "#audiotracks" ).button( "option", "label", vlc.audio.description(vlc.audio.track));
+            }
+            else if (vlc.audio.count > 2)
+            {
+                $( "#audiotracks" ).button( "option", "disabled", false );
+                $( "#audiotracks" ).button( "option", "label", vlc.audio.description(vlc.audio.track));
+            }
+            
+            
+            if (vlc.input.state == 0) {
+                // current media has stopped
+                //onStop();
+                }
+            else if (vlc.input.state == 1) {
+                // current media is connecting
+                onOpening();
+                }
+            else if (vlc.input.state == 2) {
+                // current media is buffering data
+                onBuffering();
+                }
+            else if (vlc.input.state == 3) {
+                // current media is now playing
+                onPlaying();
+                }
+            else if (vlc.input.state == 4) {
+                // current media is now paused
+                //onPaused();
+                }
+            else if (vlc.input.state == 5) {
+                // current media is stopping
+                //onStopping();
+                }
+            else if (vlc.input.state == 6) {
+                // current media has finished playback
+                onEnd();
+                }
+
+            checkStatusTimer=setTimeout(function(){checkStatus()},5000);
+        }
 };
 
@@ -108 +128 @@
     });
     $( "#subtitles" ).button( "option", "disabled", true );
+    $( "#audiotracks" ).button( "option", "disabled", true);
 }
 
@@ -117 +138 @@
 setTimeout(function(){vlc.playlist.add(safeMRL)},350);
 setTimeout(function(){play()},500);
-setTimeout(function(){checkStatus()},500);
+setTimeout(function(){checkStatus()},1000);
 };
 
@@ -123 +144 @@
 {
     vlc.playlist.play();
-    vlc.video.deinterlace.enable("blend");
-    //if (relPosTimer_is_on!=1)
-    //{
-        relPosTimer_is_on=1;
-        showRelPos();
-    //}
+    vlc.video.deinterlace.enable("Yadif");
+    relPosTimer_is_on=1;
+    showRelPos();
+
+    if (!checkStatusTimer_is_on)
+    {
+        setTimeout(function(){checkStatus()},1000);
+    }
 };
 
@@ -147 +170 @@
     clearTimeout(relpos);
     clearTimeout(checkStatusTimer);
+    checkStatusTimer_is_on=0;
     relPosTimer_is_on=0;
     vlc.playlist.stop();
@@ -152 +176 @@
     $('#slider').slider( "option", "value", 0 );
     $( "#subtitles" ).button( "option", "label", "Subtitles");
+    $( "#subtitles" ).button( "option", "disabled", true );
+    $( "#audiotracks" ).button( "option", "label", "Audio Track(s)");
+    $( "#audiotracks" ).button( "option", "disabled", true);
 };
 
@@ -180 +207 @@
         }
         else {
-            // Quirks mode
+            // in Quirks mode
             xWidth = document.body.clientWidth;
         }
@@ -203 +230 @@
         }
         else {
-            // Quirks mode
+            // in Quirks mode
             xHeight = document.body.clientHeight;
         }
@@ -223 +250 @@
 function toggleFullscreen()
 {
-    vlc.video.toggleFullscreen();
-    
-    if (vlc.video.fullscreen == true)
+    if (vlc.input.state == 3)
     {
-        previousHeight = $( "#replaymePlayer" ).dialog( "option", "height" );
-        previousWidth = $( "#replaymePlayer" ).dialog( "option", "width" );
-        setFullscreenSize();
+        vlc.video.toggleFullscreen();
+        
+        if (vlc.video.fullscreen == true)
+        {
+            previousHeight = $( "#replaymePlayer" ).dialog( "option", "height" );
+            previousWidth = $( "#replaymePlayer" ).dialog( "option", "width" );
+            setFullscreenSize();
+        }
+        else if (vlc.video.fullscreen == false)
+        {
+            clearTimeout(checkVideoSizeTimer);
+            $( "#replaymePlayer" ).dialog( "option", "height", previousHeight );
+            $( "#replaymePlayer" ).dialog( "option", "width", previousWidth );
+            setPlayerSize();
+            $( "#replaymePlayer" ).dialog( "option", "position", 'center' );
+        }
     }
-    else if (vlc.video.fullscreen == false)
+    else
     {
-        clearTimeout(checkVideoSizeTimer);
-        $( "#replaymePlayer" ).dialog( "option", "height", previousHeight );
-        $( "#replaymePlayer" ).dialog( "option", "width", previousWidth );
-        setPlayerSize();
-        $( "#replaymePlayer" ).dialog( "option", "position", 'center' );
+        alert("You can switch between fullscreen and windowed mode only when playing the video.");
     }
 };
@@ -249 +283 @@
    else
    {
-        vlc.subtitle.track = vlc.subtitle.track + 1;
+        vlc.subtitle.track += 1;
    }
-    $( "#subtitles" ).button( "option", "label", "Subtitles: " + vlc.subtitle.description(vlc.subtitle.track) );
+    $( "#subtitles" ).button( "option", "label", "Subtitles: " + vlc.subtitle.description(vlc.subtitle.track));
+};
+
+function changeAudioTrack()
+{
+   if (vlc.audio.track == vlc.audio.count - 1)
+   {
+        vlc.audio.track = 1;
+   }
+   else
+   {
+        vlc.audio.track += 1;
+   }
+    $( "#audiotracks" ).button( "option", "label", vlc.audio.description(vlc.audio.track));
 };
 
@@ -267 +314 @@
     height = $( "#replaymePlayer" ).dialog( "option", "height" );
     width = width - 25;
-    height = height - 130;
+    height = height - 150;
 
     if (document.getElementById("vlc") != null)
@@ -278 +325 @@
 //JQuery Stuff
 $(function() {
+
+//Section taken from JQuery UI 1.8.4 and adapted to properly show dialog over VLC plugin in Firefox
+//it actually disable the rounded corners for that window, to use it use "mydialog" instead of "dialog"
+var uiMyDialogClasses =
+    'ui-dialog ' +
+    'ui-widget ' +
+    'ui-widget-content ';
+
+$.widget("ui.mydialog", {
+    options: {
+        autoOpen: true,
+        buttons: {},
+        closeOnEscape: true,
+        closeText: 'close',
+        dialogClass: '',
+        draggable: true,
+        hide: null,
+        height: 'auto',
+        maxHeight: false,
+        maxWidth: false,
+        minHeight: 150,
+        minWidth: 150,
+        modal: false,
+        position: {
+            my: 'center',
+            at: 'center',
+            of: window,
+            collision: 'fit',
+            // ensure that the titlebar is never outside the document
+            using: function(pos) {
+                var topOffset = $(this).css(pos).offset().top;
+                if (topOffset < 0) {
+                    $(this).css('top', pos.top - topOffset);
+                }
+            }
+        },
+        resizable: true,
+        show: null,
+        stack: true,
+        title: '',
+        width: 300,
+        zIndex: 1000
+    },
+
+    _create: function() {
+        this.originalTitle = this.element.attr('title');
+        // #5742 - .attr() might return a DOMElement
+        if ( typeof this.originalTitle !== "string" ) {
+            this.originalTitle = "";
+        }
+
+        var self = this,
+            options = self.options,
+
+            title = options.title || self.originalTitle || '&#160;',
+            titleId = $.ui.mydialog.getTitleId(self.element),
+
+            uiMyDialog = (self.uiMyDialog = $('<div></div>'))
+                .appendTo(document.body)
+                .hide()
+                .addClass(uiMyDialogClasses + options.dialogClass)
+                .css({
+                    zIndex: options.zIndex
+                })
+                // setting tabIndex makes the div focusable
+                // setting outline to 0 prevents a border on focus in Mozilla
+                .attr('tabIndex', -1).css('outline', 0).keydown(function(event) {
+                    if (options.closeOnEscape && event.keyCode &&
+                        event.keyCode === $.ui.keyCode.ESCAPE) {
+                        
+                        self.close(event);
+                        event.preventDefault();
+                    }
+                })
+                .attr({
+                    role: 'dialog',
+                    'aria-labelledby': titleId
+                })
+                .mousedown(function(event) {
+                    self.moveToTop(false, event);
+                }),
+
+            uiMyDialogContent = self.element
+                .show()
+                .removeAttr('title')
+                .addClass(
+                    'ui-dialog-content ' +
+                    'ui-widget-content')
+                .appendTo(uiMyDialog),
+
+            uiMyDialogTitlebar = (self.uiMyDialogTitlebar = $('<div></div>'))
+                .addClass(
+                    'ui-dialog-titlebar ' +
+                    'ui-widget-header ' +
+                    'ui-helper-clearfix'
+                )
+                .prependTo(uiMyDialog),
+
+            uiMyDialogTitlebarClose = $('<a href="#"></a>')
+                .addClass(
+                    'ui-dialog-titlebar-close '
+                )
+                .attr('role', 'button')
+                .hover(
+                    function() {
+                        uiMyDialogTitlebarClose.addClass('ui-state-hover');
+                    },
+                    function() {
+                        uiMyDialogTitlebarClose.removeClass('ui-state-hover');
+                    }
+                )
+                .focus(function() {
+                    uiMyDialogTitlebarClose.addClass('ui-state-focus');
+                })
+                .blur(function() {
+                    uiMyDialogTitlebarClose.removeClass('ui-state-focus');
+                })
+                .click(function(event) {
+                    self.close(event);
+                    return false;
+                })
+                .appendTo(uiMyDialogTitlebar),
+
+            uiMyDialogTitlebarCloseText = (self.uiMyDialogTitlebarCloseText = $('<span></span>'))
+                .addClass(
+                    'ui-icon ' +
+                    'ui-icon-closethick'
+                )
+                .text(options.closeText)
+                .appendTo(uiMyDialogTitlebarClose),
+
+            uiMyDialogTitle = $('<span></span>')
+                .addClass('ui-dialog-title')
+                .attr('id', titleId)
+                .html(title)
+                .prependTo(uiMyDialogTitlebar);
+
+        //handling of deprecated beforeclose (vs beforeClose) option
+        //Ticket #4669 http://dev.jqueryui.com/ticket/4669
+        //TODO: remove in 1.9pre
+        if ($.isFunction(options.beforeclose) && !$.isFunction(options.beforeClose)) {
+            options.beforeClose = options.beforeclose;
+        }
+
+        uiMyDialogTitlebar.find("*").add(uiMyDialogTitlebar).disableSelection();
+
+        if (options.draggable && $.fn.draggable) {
+            self._makeDraggable();
+        }
+        if (options.resizable && $.fn.resizable) {
+            self._makeResizable();
+        }
+
+        self._createButtons(options.buttons);
+        self._isOpen = false;
+
+        if ($.fn.bgiframe) {
+            uiMyDialog.bgiframe();
+        }
+    },
+
+    _init: function() {
+        if ( this.options.autoOpen ) {
+            this.open();
+        }
+    },
+
+    destroy: function() {
+        var self = this;
+        
+        if (self.overlay) {
+            self.overlay.destroy();
+        }
+        self.uiMyDialog.hide();
+        self.element
+            .unbind('.dialog')
+            .removeData('dialog')
+            .removeClass('ui-dialog-content ui-widget-content')
+            .hide().appendTo('body');
+        self.uiMyDialog.remove();
+
+        if (self.originalTitle) {
+            self.element.attr('title', self.originalTitle);
+        }
+
+        return self;
+    },
+
+    widget: function() {
+        return this.uiMyDialog;
+    },
+
+    close: function(event) {
+        var self = this,
+            maxZ;
+        
+        if (false === self._trigger('beforeClose', event)) {
+            return;
+        }
+
+        if (self.overlay) {
+            self.overlay.destroy();
+        }
+        self.uiMyDialog.unbind('keypress.ui-dialog');
+
+        self._isOpen = false;
+
+        if (self.options.hide) {
+            self.uiMyDialog.hide(self.options.hide, function() {
+                self._trigger('close', event);
+            });
+        } else {
+            self.uiMyDialog.hide();
+            self._trigger('close', event);
+        }
+
+        $.ui.mydialog.overlay.resize();
+
+        // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
+        if (self.options.modal) {
+            maxZ = 0;
+            $('.ui-dialog').each(function() {
+                if (this !== self.uiMyDialog[0]) {
+                    maxZ = Math.max(maxZ, $(this).css('z-index'));
+                }
+            });
+            $.ui.mydialog.maxZ = maxZ;
+        }
+
+        return self;
+    },
+
+    isOpen: function() {
+        return this._isOpen;
+    },
+
+    // the force parameter allows us to move modal dialogs to their correct
+    // position on open
+    moveToTop: function(force, event) {
+        var self = this,
+            options = self.options,
+            saveScroll;
+
+        if ((options.modal && !force) ||
+            (!options.stack && !options.modal)) {
+            return self._trigger('focus', event);
+        }
+
+        if (options.zIndex > $.ui.mydialog.maxZ) {
+            $.ui.mydialog.maxZ = options.zIndex;
+        }
+        if (self.overlay) {
+            $.ui.mydialog.maxZ += 1;
+            self.overlay.$el.css('z-index', $.ui.mydialog.overlay.maxZ = $.ui.mydialog.maxZ);
+        }
+
+        //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed.
+        //  http://ui.jquery.com/bugs/ticket/3193
+        saveScroll = { scrollTop: self.element.attr('scrollTop'), scrollLeft: self.element.attr('scrollLeft') };
+        $.ui.mydialog.maxZ += 1;
+        self.uiMyDialog.css('z-index', $.ui.mydialog.maxZ);
+        self.element.attr(saveScroll);
+        self._trigger('focus', event);
+
+        return self;
+    },
+
+    open: function() {
+        if (this._isOpen) { return; }
+
+        var self = this,
+            options = self.options,
+            uiMyDialog = self.uiMyDialog;
+
+        self.overlay = options.modal ? new $.ui.mydialog.overlay(self) : null;
+        if (uiMyDialog.next().length) {
+            uiMyDialog.appendTo('body');
+        }
+        self._size();
+        self._position(options.position);
+        uiMyDialog.show(options.show);
+        self.moveToTop(true);
+
+        // prevent tabbing out of modal dialogs
+        if (options.modal) {
+            uiMyDialog.bind('keypress.ui-dialog', function(event) {
+                if (event.keyCode !== $.ui.keyCode.TAB) {
+                    return;
+                }
+
+                var tabbables = $(':tabbable', this),
+                    first = tabbables.filter(':first'),
+                    last  = tabbables.filter(':last');
+
+                if (event.target === last[0] && !event.shiftKey) {
+                    first.focus(1);
+                    return false;
+                } else if (event.target === first[0] && event.shiftKey) {
+                    last.focus(1);
+                    return false;
+                }
+            });
+        }
+
+        // set focus to the first tabbable element in the content area or the first button
+        // if there are no tabbable elements, set focus on the dialog itself
+        $(self.element.find(':tabbable').get().concat(
+            uiMyDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
+                uiMyDialog.get()))).eq(0).focus();
+
+        self._trigger('open');
+        self._isOpen = true;
+
+        return self;
+    },
+
+    _createButtons: function(buttons) {
+        var self = this,
+            hasButtons = false,
+            uiMyDialogButtonPane = $('<div></div>')
+                .addClass(
+                    'ui-dialog-buttonpane ' +
+                    'ui-widget-content ' +
+                    'ui-helper-clearfix'
+                ),
+            uiButtonSet = $( "<div></div>" )
+                .addClass( "ui-dialog-buttonset" )
+                .appendTo( uiMyDialogButtonPane );
+
+        // if we already have a button pane, remove it
+        self.uiMyDialog.find('.ui-dialog-buttonpane').remove();
+
+        if (typeof buttons === 'object' && buttons !== null) {
+            $.each(buttons, function() {
+                return !(hasButtons = true);
+            });
+        }
+        if (hasButtons) {
+            $.each(buttons, function(name, fn) {
+                var button = $('<button type="button"></button>')
+                    .text(name)
+                    .click(function() { fn.apply(self.element[0], arguments); })
+                    .appendTo(uiButtonSet);
+                if ($.fn.button) {
+                    button.button();
+                }
+            });
+            uiMyDialogButtonPane.appendTo(self.uiMyDialog);
+        }
+    },
+
+    _makeDraggable: function() {
+        var self = this,
+            options = self.options,
+            doc = $(document),
+            heightBeforeDrag;
+
+        function filteredUi(ui) {
+            return {
+                position: ui.position,
+                offset: ui.offset
+            };
+        }
+
+        self.uiMyDialog.draggable({
+            cancel: '.ui-dialog-content, .ui-dialog-titlebar-close',
+            handle: '.ui-dialog-titlebar',
+            containment: 'document',
+            start: function(event, ui) {
+                heightBeforeDrag = options.height === "auto" ? "auto" : $(this).height();
+                $(this).height($(this).height()).addClass("ui-dialog-dragging");
+                self._trigger('dragStart', event, filteredUi(ui));
+            },
+            drag: function(event, ui) {
+                self._trigger('drag', event, filteredUi(ui));
+            },
+            stop: function(event, ui) {
+                options.position = [ui.position.left - doc.scrollLeft(),
+                    ui.position.top - doc.scrollTop()];
+                $(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag);
+                self._trigger('dragStop', event, filteredUi(ui));
+                $.ui.mydialog.overlay.resize();
+            }
+        });
+    },
+
+    _makeResizable: function(handles) {
+        handles = (handles === undefined ? this.options.resizable : handles);
+        var self = this,
+            options = self.options,
+            // .ui-resizable has position: relative defined in the stylesheet
+            // but dialogs have to use absolute or fixed positioning
+            position = self.uiMyDialog.css('position'),
+            resizeHandles = (typeof handles === 'string' ?
+                handles :
+                'n,e,s,w,se,sw,ne,nw'
+            );
+
+        function filteredUi(ui) {
+            return {
+                originalPosition: ui.originalPosition,
+                originalSize: ui.originalSize,
+                position: ui.position,
+                size: ui.size
+            };
+        }
+
+        self.uiMyDialog.resizable({
+            cancel: '.ui-dialog-content',
+            containment: 'document',
+            alsoResize: self.element,
+            maxWidth: options.maxWidth,
+            maxHeight: options.maxHeight,
+            minWidth: options.minWidth,
+            minHeight: self._minHeight(),
+            handles: resizeHandles,
+            start: function(event, ui) {
+                $(this).addClass("ui-dialog-resizing");
+                self._trigger('resizeStart', event, filteredUi(ui));
+            },
+            resize: function(event, ui) {
+                self._trigger('resize', event, filteredUi(ui));
+            },
+            stop: function(event, ui) {
+                $(this).removeClass("ui-dialog-resizing");
+                options.height = $(this).height();
+                options.width = $(this).width();
+                self._trigger('resizeStop', event, filteredUi(ui));
+                $.ui.mydialog.overlay.resize();
+            }
+        })
+        .css('position', position)
+        .find('.ui-resizable-se').addClass('ui-icon ui-icon-grip-diagonal-se');
+    },
+
+    _minHeight: function() {
+        var options = this.options;
+
+        if (options.height === 'auto') {
+            return options.minHeight;
+        } else {
+            return Math.min(options.minHeight, options.height);
+        }
+    },
+
+    _position: function(position) {
+        var myAt = [],
+            offset = [0, 0],
+            isVisible;
+
+        if (position) {
+            // deep extending converts arrays to objects in jQuery <= 1.3.2 :-(
+    //      if (typeof position == 'string' || $.isArray(position)) {
+    //          myAt = $.isArray(position) ? position : position.split(' ');
+
+            if (typeof position === 'string' || (typeof position === 'object' && '0' in position)) {
+                myAt = position.split ? position.split(' ') : [position[0], position[1]];
+                if (myAt.length === 1) {
+                    myAt[1] = myAt[0];
+                }
+
+                $.each(['left', 'top'], function(i, offsetPosition) {
+                    if (+myAt[i] === myAt[i]) {
+                        offset[i] = myAt[i];
+                        myAt[i] = offsetPosition;
+                    }
+                });
+
+                position = {
+                    my: myAt.join(" "),
+                    at: myAt.join(" "),
+                    offset: offset.join(" ")
+                };
+            } 
+
+            position = $.extend({}, $.ui.mydialog.prototype.options.position, position);
+        } else {
+            position = $.ui.mydialog.prototype.options.position;
+        }
+
+        // need to show the dialog to get the actual offset in the position plugin
+        isVisible = this.uiMyDialog.is(':visible');
+        if (!isVisible) {
+            this.uiMyDialog.show();
+        }
+        this.uiMyDialog
+            // workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781
+            .css({ top: 0, left: 0 })
+            .position(position);
+        if (!isVisible) {
+            this.uiMyDialog.hide();
+        }
+    },
+
+    _setOption: function(key, value){
+        var self = this,
+            uiMyDialog = self.uiMyDialog,
+            isResizable = uiMyDialog.is(':data(resizable)'),
+            resize = false;
+
+        switch (key) {
+            //handling of deprecated beforeclose (vs beforeClose) option
+            //Ticket #4669 http://dev.jqueryui.com/ticket/4669
+            //TODO: remove in 1.9pre
+            case "beforeclose":
+                key = "beforeClose";
+                break;
+            case "buttons":
+                self._createButtons(value);
+                resize = true;
+                break;
+            case "closeText":
+                // convert whatever was passed in to a string, for text() to not throw up
+                self.uiMyDialogTitlebarCloseText.text("" + value);
+                break;
+            case "dialogClass":
+                uiMyDialog
+                    .removeClass(self.options.dialogClass)
+                    .addClass(uiMyDialogClasses + value);
+                break;
+            case "disabled":
+                if (value) {
+                    uiMyDialog.addClass('ui-dialog-disabled');
+                } else {
+                    uiMyDialog.removeClass('ui-dialog-disabled');
+                }
+                break;
+            case "draggable":
+                if (value) {
+                    self._makeDraggable();
+                } else {
+                    uiMyDialog.draggable('destroy');
+                }
+                break;
+            case "height":
+                resize = true;
+                break;
+            case "maxHeight":
+                if (isResizable) {
+                    uiMyDialog.resizable('option', 'maxHeight', value);
+                }
+                resize = true;
+                break;
+            case "maxWidth":
+                if (isResizable) {
+                    uiMyDialog.resizable('option', 'maxWidth', value);
+                }
+                resize = true;
+                break;
+            case "minHeight":
+                if (isResizable) {
+                    uiMyDialog.resizable('option', 'minHeight', value);
+                }
+                resize = true;
+                break;
+            case "minWidth":
+                if (isResizable) {
+                    uiMyDialog.resizable('option', 'minWidth', value);
+                }
+                resize = true;
+                break;
+            case "position":
+                self._position(value);
+                break;
+            case "resizable":
+                // currently resizable, becoming non-resizable
+                if (isResizable && !value) {
+                    uiMyDialog.resizable('destroy');
+                }
+
+                // currently resizable, changing handles
+                if (isResizable && typeof value === 'string') {
+                    uiMyDialog.resizable('option', 'handles', value);
+                }
+
+                // currently non-resizable, becoming resizable
+                if (!isResizable && value !== false) {
+                    self._makeResizable(value);
+                }
+                break;
+            case "title":
+                // convert whatever was passed in o a string, for html() to not throw up
+                $(".ui-dialog-title", self.uiMyDialogTitlebar).html("" + (value || '&#160;'));
+                break;
+            case "width":
+                resize = true;
+                break;
+        }
+
+        $.Widget.prototype._setOption.apply(self, arguments);
+        if (resize) {
+            self._size();
+        }
+    },
+
+    _size: function() {
+        /* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
+         * divs will both have width and height set, so we need to reset them
+         */
+        var options = this.options,
+            nonContentHeight;
+
+        // reset content sizing
+        // hide for non content measurement because height: 0 doesn't work in IE quirks mode (see #4350)
+        this.element.css({
+            width: 'auto',
+            minHeight: 0,
+            height: 0
+        });
+
+        if (options.minWidth > options.width) {
+            options.width = options.minWidth;
+        }
+
+        // reset wrapper sizing
+        // determine the height of all the non-content elements
+        nonContentHeight = this.uiMyDialog.css({
+                height: 'auto',
+                width: options.width
+            })
+            .height();
+
+        this.element
+            .css(options.height === 'auto' ? {
+                    minHeight: Math.max(options.minHeight - nonContentHeight, 0),
+                    height: 'auto'
+                } : {
+                    minHeight: 0,
+                    height: Math.max(options.height - nonContentHeight, 0)              
+            })
+            .show();
+
+        if (this.uiMyDialog.is(':data(resizable)')) {
+            this.uiMyDialog.resizable('option', 'minHeight', this._minHeight());
+        }
+    }
+});
+
+
+$.extend($.ui.mydialog, {
+    version: "1.8.4",
+
+    uuid: 0,
+    maxZ: 0,
+
+    getTitleId: function($el) {
+        var id = $el.attr('id');
+        if (!id) {
+            this.uuid += 1;
+            id = this.uuid;
+        }
+        return 'ui-dialog-title-' + id;
+    },
+
+    overlay: function(dialog) {
+        this.$el = $.ui.mydialog.overlay.create(dialog);
+    }
+});
+
+
+$.extend($.ui.mydialog.overlay, {
+    instances: [],
+    // reuse old instances due to IE memory leak with alpha transparency (see #5185)
+    oldInstances: [],
+    maxZ: 0,
+    events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
+        function(event) { return event + '.dialog-overlay'; }).join(' '),
+    create: function(dialog) {
+        if (this.instances.length === 0) {
+            // prevent use of anchors and inputs
+            // we use a setTimeout in case the overlay is created from an
+            // event that we're going to be cancelling (see #2804)
+            setTimeout(function() {
+                // handle $(el).dialog().dialog('close') (see #4065)
+                if ($.ui.mydialog.overlay.instances.length) {
+                    $(document).bind($.ui.mydialog.overlay.events, function(event) {
+                        // stop events if the z-index of the target is < the z-index of the overlay
+                        return ($(event.target).zIndex() >= $.ui.mydialog.overlay.maxZ);
+                    });
+                }
+            }, 1);
+
+            // allow closing by pressing the escape key
+            $(document).bind('keydown.dialog-overlay', function(event) {
+                if (dialog.options.closeOnEscape && event.keyCode &&
+                    event.keyCode === $.ui.keyCode.ESCAPE) {
+                    
+                    dialog.close(event);
+                    event.preventDefault();
+                }
+            });
+
+            // handle window resize
+            $(window).bind('resize.dialog-overlay', $.ui.mydialog.overlay.resize);
+        }
+
+        var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
+            .appendTo(document.body)
+            .css({
+                width: this.width(),
+                height: this.height()
+            });
+
+        if ($.fn.bgiframe) {
+            $el.bgiframe();
+        }
+
+        this.instances.push($el);
+        return $el;
+    },
+
+    destroy: function($el) {
+        this.oldInstances.push(this.instances.splice($.inArray($el, this.instances), 1)[0]);
+
+        if (this.instances.length === 0) {
+            $([document, window]).unbind('.dialog-overlay');
+        }
+
+        $el.remove();
+        
+        // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
+        var maxZ = 0;
+        $.each(this.instances, function() {
+            maxZ = Math.max(maxZ, this.css('z-index'));
+        });
+        this.maxZ = maxZ;
+    },
+
+    height: function() {
+        var scrollHeight,
+            offsetHeight;
+        // handle IE 6
+        if ($.browser.msie && $.browser.version < 7) {
+            scrollHeight = Math.max(
+                document.documentElement.scrollHeight,
+                document.body.scrollHeight
+            );
+            offsetHeight = Math.max(
+                document.documentElement.offsetHeight,
+                document.body.offsetHeight
+            );
+
+            if (scrollHeight < offsetHeight) {
+                return $(window).height() + 'px';
+            } else {
+                return scrollHeight + 'px';
+            }
+        // handle "good" browsers
+        } else {
+            return $(document).height() + 'px';
+        }
+    },
+
+    width: function() {
+        var scrollWidth,
+            offsetWidth;
+        // handle IE 6
+        if ($.browser.msie && $.browser.version < 7) {
+            scrollWidth = Math.max(
+                document.documentElement.scrollWidth,
+                document.body.scrollWidth
+            );
+            offsetWidth = Math.max(
+                document.documentElement.offsetWidth,
+                document.body.offsetWidth
+            );
+
+            if (scrollWidth < offsetWidth) {
+                return $(window).width() + 'px';
+            } else {
+                return scrollWidth + 'px';
+            }
+        // handle "good" browsers
+        } else {
+            return $(document).width() + 'px';
+        }
+    },
+
+    resize: function() {
+        /* If the dialog is draggable and the user drags it past the
+         * right edge of the window, the document becomes wider so we
+         * need to stretch the overlay. If the user then drags the
+         * dialog back to the left, the document will become narrower,
+         * so we need to shrink the overlay to the appropriate size.
+         * This is handled by shrinking the overlay before setting it
+         * to the full document size.
+         */
+        var $overlays = $([]);
+        $.each($.ui.mydialog.overlay.instances, function() {
+            $overlays = $overlays.add(this);
+        });
+
+        $overlays.css({
+            width: 0,
+            height: 0
+        }).css({
+            width: $.ui.mydialog.overlay.width(),
+            height: $.ui.mydialog.overlay.height()
+        });
+    }
+});
+
+$.extend($.ui.mydialog.overlay.prototype, {
+    destroy: function() {
+        $.ui.mydialog.overlay.destroy(this.$el);
+    }
+});
+
                         
 // Open Video Player link
@@ -290 +1145 @@
             autoOpen: false,
             height: 620,
-            width: 645,
+            width: 785,
             modal: true,
             beforeclose: function(event, ui) {
@@ -301 +1156 @@
                                                 });
                                                 $( "#subtitles" ).button( "option", "label", "Subtitles");
+                                                $( "#audiotracks" ).button( "option", "label", "Audio Track(s)");
                                             },
             resizeStart: function(event, ui) { 
@@ -307 +1163 @@
             resizeStop: function(event, ui) { setPlayerSize(); }
         });
+
+
+//Video Player info sub-window      
+    $( "#infodialog" ).mydialog({
+            autoOpen: false,
+            zIndex: 100000,
+            show: "clip",
+            hide: "clip",
+            position: 'top',
+            width: 460,
+            buttons: {
+                Ok: function() {
+                    $( this ).mydialog( "close" );
+                }
+            }
+        });
+
         
 //Hover states on the Video Player link
@@ -406 +1279 @@
         });
         
+        $('#audiotracks').button({
+            icons: {primary: 'ui-icon-comment'},
+            disabled: true
+        })
+        .click(function() {
+        changeAudioTrack();
+        });
+        
+        $('#info').button({
+            text: false,
+            icons: {
+                primary: 'ui-icon-info'
+            }
+        })
+        .click(function() {
+            $('#infodialog').mydialog('open');
+        });
+        
 //Seeking bar
         $('#slider').slider({