Changeset 23370

Show
Ignore:
Timestamp:
01.12.2010 14:45:35 (9 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:
5 added
1 modified

Legend:

Unmodified
Added
Removed
  • gs2-extensions/video-and-audio/trunk/src/web/script/replayer.js

    r23295 r23370  
    11/*! 
    2  * Replayme Player v1.0.1 
    3  * Based on JQueryUI v1.8.4 
     2 * Replayme Player v1.5.0 
     3 * Based on JQuery UI v1.8.4 
    44 *  
    55 * 
    6  * Copyright 2010, Maxime Rouast 
     6 * Copyright 2010, Maxime Roüast 
    77 * Released under the GPL 2 License. 
    88 * 
     
    1414var user_is_dragging=0; 
    1515var checkStatusTimer; 
     16var checkStatusTimer_is_on=0; 
    1617var checkVideoSizeTimer; 
    1718var previousHeight=0; 
     
    2324function checkStatus() 
    2425{ 
    25  
    26     if(vlc.subtitle.count < 1) 
    27     { 
    28         $( "#subtitles" ).button( "option", "disabled", true ); 
    29     } 
    30     else if (vlc.subtitle.count > 0) 
    31     { 
    32         $( "#subtitles" ).button( "option", "disabled", false ); 
    33     } 
    34  
    35     if (vlc.input.state == 0) { 
    36         // current media has stopped 
    37         //onStop(); 
    38         } 
    39     else if (vlc.input.state == 1) { 
    40         // current media is connecting 
    41         onOpening(); 
    42         } 
    43     else if (vlc.input.state == 2) { 
    44         // current media is buffering data 
    45         onBuffering(); 
    46         } 
    47     else if (vlc.input.state == 3) { 
    48         // current media is now playing 
    49         onPlaying(); 
    50         } 
    51     else if (vlc.input.state == 4) { 
    52         // current media is now paused 
    53         //onPaused(); 
    54         } 
    55     else if (vlc.input.state == 5) { 
    56         // current media is stopping 
    57         //onStopping(); 
    58         } 
    59     else if (vlc.input.state == 6) { 
    60         // current media has finished playback 
    61         onEnd(); 
    62         } 
    63  
    64     checkStatusTimer=setTimeout(function(){checkStatus()},1000); 
     26    if (!checkStatusTimer_is_on) 
     27        { 
     28            checkStatusTimer_is_on=1; 
     29         
     30            if(vlc.subtitle.count < 1) 
     31            { 
     32                $( "#subtitles" ).button( "option", "disabled", true ); 
     33            } 
     34            else if (vlc.subtitle.count > 0) 
     35            { 
     36                $( "#subtitles" ).button( "option", "disabled", false ); 
     37                $( "#subtitles" ).button( "option", "label", "Subtitles: " + vlc.subtitle.description(vlc.subtitle.track)); 
     38            } 
     39             
     40             
     41            //For the audio tracks we only enable the button if there is more than two tracks (in vlc world disabled count for one track) 
     42            if(vlc.audio.count < 3) 
     43            { 
     44                $( "#audiotracks" ).button( "option", "disabled", true ); 
     45                $( "#audiotracks" ).button( "option", "label", vlc.audio.description(vlc.audio.track)); 
     46            } 
     47            else if (vlc.audio.count > 2) 
     48            { 
     49                $( "#audiotracks" ).button( "option", "disabled", false ); 
     50                $( "#audiotracks" ).button( "option", "label", vlc.audio.description(vlc.audio.track)); 
     51            } 
     52             
     53             
     54            if (vlc.input.state == 0) { 
     55                // current media has stopped 
     56                //onStop(); 
     57                } 
     58            else if (vlc.input.state == 1) { 
     59                // current media is connecting 
     60                onOpening(); 
     61                } 
     62            else if (vlc.input.state == 2) { 
     63                // current media is buffering data 
     64                onBuffering(); 
     65                } 
     66            else if (vlc.input.state == 3) { 
     67                // current media is now playing 
     68                onPlaying(); 
     69                } 
     70            else if (vlc.input.state == 4) { 
     71                // current media is now paused 
     72                //onPaused(); 
     73                } 
     74            else if (vlc.input.state == 5) { 
     75                // current media is stopping 
     76                //onStopping(); 
     77                } 
     78            else if (vlc.input.state == 6) { 
     79                // current media has finished playback 
     80                onEnd(); 
     81                } 
     82 
     83            checkStatusTimer=setTimeout(function(){checkStatus()},5000); 
     84        } 
    6585}; 
    6686 
     
    108128    }); 
    109129    $( "#subtitles" ).button( "option", "disabled", true ); 
     130    $( "#audiotracks" ).button( "option", "disabled", true); 
    110131} 
    111132 
     
    117138setTimeout(function(){vlc.playlist.add(safeMRL)},350); 
    118139setTimeout(function(){play()},500); 
    119 setTimeout(function(){checkStatus()},500); 
     140setTimeout(function(){checkStatus()},1000); 
    120141}; 
    121142 
     
    123144{ 
    124145    vlc.playlist.play(); 
    125     vlc.video.deinterlace.enable("blend"); 
    126     //if (relPosTimer_is_on!=1) 
    127     //{ 
    128         relPosTimer_is_on=1; 
    129         showRelPos(); 
    130     //} 
     146    vlc.video.deinterlace.enable("Yadif"); 
     147    relPosTimer_is_on=1; 
     148    showRelPos(); 
     149 
     150    if (!checkStatusTimer_is_on) 
     151    { 
     152        setTimeout(function(){checkStatus()},1000); 
     153    } 
    131154}; 
    132155 
     
    147170    clearTimeout(relpos); 
    148171    clearTimeout(checkStatusTimer); 
     172    checkStatusTimer_is_on=0; 
    149173    relPosTimer_is_on=0; 
    150174    vlc.playlist.stop(); 
     
    152176    $('#slider').slider( "option", "value", 0 ); 
    153177    $( "#subtitles" ).button( "option", "label", "Subtitles"); 
     178    $( "#subtitles" ).button( "option", "disabled", true ); 
     179    $( "#audiotracks" ).button( "option", "label", "Audio Track(s)"); 
     180    $( "#audiotracks" ).button( "option", "disabled", true); 
    154181}; 
    155182 
     
    180207        } 
    181208        else { 
    182             // Quirks mode 
     209            // in Quirks mode 
    183210            xWidth = document.body.clientWidth; 
    184211        } 
     
    203230        } 
    204231        else { 
    205             // Quirks mode 
     232            // in Quirks mode 
    206233            xHeight = document.body.clientHeight; 
    207234        } 
     
    223250function toggleFullscreen() 
    224251{ 
    225     vlc.video.toggleFullscreen(); 
    226      
    227     if (vlc.video.fullscreen == true) 
     252    if (vlc.input.state == 3) 
    228253    { 
    229         previousHeight = $( "#replaymePlayer" ).dialog( "option", "height" ); 
    230         previousWidth = $( "#replaymePlayer" ).dialog( "option", "width" ); 
    231         setFullscreenSize(); 
     254        vlc.video.toggleFullscreen(); 
     255         
     256        if (vlc.video.fullscreen == true) 
     257        { 
     258            previousHeight = $( "#replaymePlayer" ).dialog( "option", "height" ); 
     259            previousWidth = $( "#replaymePlayer" ).dialog( "option", "width" ); 
     260            setFullscreenSize(); 
     261        } 
     262        else if (vlc.video.fullscreen == false) 
     263        { 
     264            clearTimeout(checkVideoSizeTimer); 
     265            $( "#replaymePlayer" ).dialog( "option", "height", previousHeight ); 
     266            $( "#replaymePlayer" ).dialog( "option", "width", previousWidth ); 
     267            setPlayerSize(); 
     268            $( "#replaymePlayer" ).dialog( "option", "position", 'center' ); 
     269        } 
    232270    } 
    233     else if (vlc.video.fullscreen == false) 
     271    else 
    234272    { 
    235         clearTimeout(checkVideoSizeTimer); 
    236         $( "#replaymePlayer" ).dialog( "option", "height", previousHeight ); 
    237         $( "#replaymePlayer" ).dialog( "option", "width", previousWidth ); 
    238         setPlayerSize(); 
    239         $( "#replaymePlayer" ).dialog( "option", "position", 'center' ); 
     273        alert("You can switch between fullscreen and windowed mode only when playing the video."); 
    240274    } 
    241275}; 
     
    249283   else 
    250284   { 
    251         vlc.subtitle.track = vlc.subtitle.track + 1; 
     285        vlc.subtitle.track += 1; 
    252286   } 
    253     $( "#subtitles" ).button( "option", "label", "Subtitles: " + vlc.subtitle.description(vlc.subtitle.track) ); 
     287    $( "#subtitles" ).button( "option", "label", "Subtitles: " + vlc.subtitle.description(vlc.subtitle.track)); 
     288}; 
     289 
     290function changeAudioTrack() 
     291{ 
     292   if (vlc.audio.track == vlc.audio.count - 1) 
     293   { 
     294        vlc.audio.track = 1; 
     295   } 
     296   else 
     297   { 
     298        vlc.audio.track += 1; 
     299   } 
     300    $( "#audiotracks" ).button( "option", "label", vlc.audio.description(vlc.audio.track)); 
    254301}; 
    255302 
     
    267314    height = $( "#replaymePlayer" ).dialog( "option", "height" ); 
    268315    width = width - 25; 
    269     height = height - 130; 
     316    height = height - 150; 
    270317 
    271318    if (document.getElementById("vlc") != null) 
     
    278325//JQuery Stuff 
    279326$(function() { 
     327 
     328//Section taken from JQuery UI 1.8.4 and adapted to properly show dialog over VLC plugin in Firefox 
     329//it actually disable the rounded corners for that window, to use it use "mydialog" instead of "dialog" 
     330var uiMyDialogClasses = 
     331    'ui-dialog ' + 
     332    'ui-widget ' + 
     333    'ui-widget-content '; 
     334 
     335$.widget("ui.mydialog", { 
     336    options: { 
     337        autoOpen: true, 
     338        buttons: {}, 
     339        closeOnEscape: true, 
     340        closeText: 'close', 
     341        dialogClass: '', 
     342        draggable: true, 
     343        hide: null, 
     344        height: 'auto', 
     345        maxHeight: false, 
     346        maxWidth: false, 
     347        minHeight: 150, 
     348        minWidth: 150, 
     349        modal: false, 
     350        position: { 
     351            my: 'center', 
     352            at: 'center', 
     353            of: window, 
     354            collision: 'fit', 
     355            // ensure that the titlebar is never outside the document 
     356            using: function(pos) { 
     357                var topOffset = $(this).css(pos).offset().top; 
     358                if (topOffset < 0) { 
     359                    $(this).css('top', pos.top - topOffset); 
     360                } 
     361            } 
     362        }, 
     363        resizable: true, 
     364        show: null, 
     365        stack: true, 
     366        title: '', 
     367        width: 300, 
     368        zIndex: 1000 
     369    }, 
     370 
     371    _create: function() { 
     372        this.originalTitle = this.element.attr('title'); 
     373        // #5742 - .attr() might return a DOMElement 
     374        if ( typeof this.originalTitle !== "string" ) { 
     375            this.originalTitle = ""; 
     376        } 
     377 
     378        var self = this, 
     379            options = self.options, 
     380 
     381            title = options.title || self.originalTitle || '&#160;', 
     382            titleId = $.ui.mydialog.getTitleId(self.element), 
     383 
     384            uiMyDialog = (self.uiMyDialog = $('<div></div>')) 
     385                .appendTo(document.body) 
     386                .hide() 
     387                .addClass(uiMyDialogClasses + options.dialogClass) 
     388                .css({ 
     389                    zIndex: options.zIndex 
     390                }) 
     391                // setting tabIndex makes the div focusable 
     392                // setting outline to 0 prevents a border on focus in Mozilla 
     393                .attr('tabIndex', -1).css('outline', 0).keydown(function(event) { 
     394                    if (options.closeOnEscape && event.keyCode && 
     395                        event.keyCode === $.ui.keyCode.ESCAPE) { 
     396                         
     397                        self.close(event); 
     398                        event.preventDefault(); 
     399                    } 
     400                }) 
     401                .attr({ 
     402                    role: 'dialog', 
     403                    'aria-labelledby': titleId 
     404                }) 
     405                .mousedown(function(event) { 
     406                    self.moveToTop(false, event); 
     407                }), 
     408 
     409            uiMyDialogContent = self.element 
     410                .show() 
     411                .removeAttr('title') 
     412                .addClass( 
     413                    'ui-dialog-content ' + 
     414                    'ui-widget-content') 
     415                .appendTo(uiMyDialog), 
     416 
     417            uiMyDialogTitlebar = (self.uiMyDialogTitlebar = $('<div></div>')) 
     418                .addClass( 
     419                    'ui-dialog-titlebar ' + 
     420                    'ui-widget-header ' + 
     421                    'ui-helper-clearfix' 
     422                ) 
     423                .prependTo(uiMyDialog), 
     424 
     425            uiMyDialogTitlebarClose = $('<a href="#"></a>') 
     426                .addClass( 
     427                    'ui-dialog-titlebar-close ' 
     428                ) 
     429                .attr('role', 'button') 
     430                .hover( 
     431                    function() { 
     432                        uiMyDialogTitlebarClose.addClass('ui-state-hover'); 
     433                    }, 
     434                    function() { 
     435                        uiMyDialogTitlebarClose.removeClass('ui-state-hover'); 
     436                    } 
     437                ) 
     438                .focus(function() { 
     439                    uiMyDialogTitlebarClose.addClass('ui-state-focus'); 
     440                }) 
     441                .blur(function() { 
     442                    uiMyDialogTitlebarClose.removeClass('ui-state-focus'); 
     443                }) 
     444                .click(function(event) { 
     445                    self.close(event); 
     446                    return false; 
     447                }) 
     448                .appendTo(uiMyDialogTitlebar), 
     449 
     450            uiMyDialogTitlebarCloseText = (self.uiMyDialogTitlebarCloseText = $('<span></span>')) 
     451                .addClass( 
     452                    'ui-icon ' + 
     453                    'ui-icon-closethick' 
     454                ) 
     455                .text(options.closeText) 
     456                .appendTo(uiMyDialogTitlebarClose), 
     457 
     458            uiMyDialogTitle = $('<span></span>') 
     459                .addClass('ui-dialog-title') 
     460                .attr('id', titleId) 
     461                .html(title) 
     462                .prependTo(uiMyDialogTitlebar); 
     463 
     464        //handling of deprecated beforeclose (vs beforeClose) option 
     465        //Ticket #4669 http://dev.jqueryui.com/ticket/4669 
     466        //TODO: remove in 1.9pre 
     467        if ($.isFunction(options.beforeclose) && !$.isFunction(options.beforeClose)) { 
     468            options.beforeClose = options.beforeclose; 
     469        } 
     470 
     471        uiMyDialogTitlebar.find("*").add(uiMyDialogTitlebar).disableSelection(); 
     472 
     473        if (options.draggable && $.fn.draggable) { 
     474            self._makeDraggable(); 
     475        } 
     476        if (options.resizable && $.fn.resizable) { 
     477            self._makeResizable(); 
     478        } 
     479 
     480        self._createButtons(options.buttons); 
     481        self._isOpen = false; 
     482 
     483        if ($.fn.bgiframe) { 
     484            uiMyDialog.bgiframe(); 
     485        } 
     486    }, 
     487 
     488    _init: function() { 
     489        if ( this.options.autoOpen ) { 
     490            this.open(); 
     491        } 
     492    }, 
     493 
     494    destroy: function() { 
     495        var self = this; 
     496         
     497        if (self.overlay) { 
     498            self.overlay.destroy(); 
     499        } 
     500        self.uiMyDialog.hide(); 
     501        self.element 
     502            .unbind('.dialog') 
     503            .removeData('dialog') 
     504            .removeClass('ui-dialog-content ui-widget-content') 
     505            .hide().appendTo('body'); 
     506        self.uiMyDialog.remove(); 
     507 
     508        if (self.originalTitle) { 
     509            self.element.attr('title', self.originalTitle); 
     510        } 
     511 
     512        return self; 
     513    }, 
     514 
     515    widget: function() { 
     516        return this.uiMyDialog; 
     517    }, 
     518 
     519    close: function(event) { 
     520        var self = this, 
     521            maxZ; 
     522         
     523        if (false === self._trigger('beforeClose', event)) { 
     524            return; 
     525        } 
     526 
     527        if (self.overlay) { 
     528            self.overlay.destroy(); 
     529        } 
     530        self.uiMyDialog.unbind('keypress.ui-dialog'); 
     531 
     532        self._isOpen = false; 
     533 
     534        if (self.options.hide) { 
     535            self.uiMyDialog.hide(self.options.hide, function() { 
     536                self._trigger('close', event); 
     537            }); 
     538        } else { 
     539            self.uiMyDialog.hide(); 
     540            self._trigger('close', event); 
     541        } 
     542 
     543        $.ui.mydialog.overlay.resize(); 
     544 
     545        // adjust the maxZ to allow other modal dialogs to continue to work (see #4309) 
     546        if (self.options.modal) { 
     547            maxZ = 0; 
     548            $('.ui-dialog').each(function() { 
     549                if (this !== self.uiMyDialog[0]) { 
     550                    maxZ = Math.max(maxZ, $(this).css('z-index')); 
     551                } 
     552            }); 
     553            $.ui.mydialog.maxZ = maxZ; 
     554        } 
     555 
     556        return self; 
     557    }, 
     558 
     559    isOpen: function() { 
     560        return this._isOpen; 
     561    }, 
     562 
     563    // the force parameter allows us to move modal dialogs to their correct 
     564    // position on open 
     565    moveToTop: function(force, event) { 
     566        var self = this, 
     567            options = self.options, 
     568            saveScroll; 
     569 
     570        if ((options.modal && !force) || 
     571            (!options.stack && !options.modal)) { 
     572            return self._trigger('focus', event); 
     573        } 
     574 
     575        if (options.zIndex > $.ui.mydialog.maxZ) { 
     576            $.ui.mydialog.maxZ = options.zIndex; 
     577        } 
     578        if (self.overlay) { 
     579            $.ui.mydialog.maxZ += 1; 
     580            self.overlay.$el.css('z-index', $.ui.mydialog.overlay.maxZ = $.ui.mydialog.maxZ); 
     581        } 
     582 
     583        //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed. 
     584        //  http://ui.jquery.com/bugs/ticket/3193 
     585        saveScroll = { scrollTop: self.element.attr('scrollTop'), scrollLeft: self.element.attr('scrollLeft') }; 
     586        $.ui.mydialog.maxZ += 1; 
     587        self.uiMyDialog.css('z-index', $.ui.mydialog.maxZ); 
     588        self.element.attr(saveScroll); 
     589        self._trigger('focus', event); 
     590 
     591        return self; 
     592    }, 
     593 
     594    open: function() { 
     595        if (this._isOpen) { return; } 
     596 
     597        var self = this, 
     598            options = self.options, 
     599            uiMyDialog = self.uiMyDialog; 
     600 
     601        self.overlay = options.modal ? new $.ui.mydialog.overlay(self) : null; 
     602        if (uiMyDialog.next().length) { 
     603            uiMyDialog.appendTo('body'); 
     604        } 
     605        self._size(); 
     606        self._position(options.position); 
     607        uiMyDialog.show(options.show); 
     608        self.moveToTop(true); 
     609 
     610        // prevent tabbing out of modal dialogs 
     611        if (options.modal) { 
     612            uiMyDialog.bind('keypress.ui-dialog', function(event) { 
     613                if (event.keyCode !== $.ui.keyCode.TAB) { 
     614                    return; 
     615                } 
     616 
     617                var tabbables = $(':tabbable', this), 
     618                    first = tabbables.filter(':first'), 
     619                    last  = tabbables.filter(':last'); 
     620 
     621                if (event.target === last[0] && !event.shiftKey) { 
     622                    first.focus(1); 
     623                    return false; 
     624                } else if (event.target === first[0] && event.shiftKey) { 
     625                    last.focus(1); 
     626                    return false; 
     627                } 
     628            }); 
     629        } 
     630 
     631        // set focus to the first tabbable element in the content area or the first button 
     632        // if there are no tabbable elements, set focus on the dialog itself 
     633        $(self.element.find(':tabbable').get().concat( 
     634            uiMyDialog.find('.ui-dialog-buttonpane :tabbable').get().concat( 
     635                uiMyDialog.get()))).eq(0).focus(); 
     636 
     637        self._trigger('open'); 
     638        self._isOpen = true; 
     639 
     640        return self; 
     641    }, 
     642 
     643    _createButtons: function(buttons) { 
     644        var self = this, 
     645            hasButtons = false, 
     646            uiMyDialogButtonPane = $('<div></div>') 
     647                .addClass( 
     648                    'ui-dialog-buttonpane ' + 
     649                    'ui-widget-content ' + 
     650                    'ui-helper-clearfix' 
     651                ), 
     652            uiButtonSet = $( "<div></div>" ) 
     653                .addClass( "ui-dialog-buttonset" ) 
     654                .appendTo( uiMyDialogButtonPane ); 
     655 
     656        // if we already have a button pane, remove it 
     657        self.uiMyDialog.find('.ui-dialog-buttonpane').remove(); 
     658 
     659        if (typeof buttons === 'object' && buttons !== null) { 
     660            $.each(buttons, function() { 
     661                return !(hasButtons = true); 
     662            }); 
     663        } 
     664        if (hasButtons) { 
     665            $.each(buttons, function(name, fn) { 
     666                var button = $('<button type="button"></button>') 
     667                    .text(name) 
     668                    .click(function() { fn.apply(self.element[0], arguments); }) 
     669                    .appendTo(uiButtonSet); 
     670                if ($.fn.button) { 
     671                    button.button(); 
     672                } 
     673            }); 
     674            uiMyDialogButtonPane.appendTo(self.uiMyDialog); 
     675        } 
     676    }, 
     677 
     678    _makeDraggable: function() { 
     679        var self = this, 
     680            options = self.options, 
     681            doc = $(document), 
     682            heightBeforeDrag; 
     683 
     684        function filteredUi(ui) { 
     685            return { 
     686                position: ui.position, 
     687                offset: ui.offset 
     688            }; 
     689        } 
     690 
     691        self.uiMyDialog.draggable({ 
     692            cancel: '.ui-dialog-content, .ui-dialog-titlebar-close', 
     693            handle: '.ui-dialog-titlebar', 
     694            containment: 'document', 
     695            start: function(event, ui) { 
     696                heightBeforeDrag = options.height === "auto" ? "auto" : $(this).height(); 
     697                $(this).height($(this).height()).addClass("ui-dialog-dragging"); 
     698                self._trigger('dragStart', event, filteredUi(ui)); 
     699            }, 
     700            drag: function(event, ui) { 
     701                self._trigger('drag', event, filteredUi(ui)); 
     702            }, 
     703            stop: function(event, ui) { 
     704                options.position = [ui.position.left - doc.scrollLeft(), 
     705                    ui.position.top - doc.scrollTop()]; 
     706                $(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag); 
     707                self._trigger('dragStop', event, filteredUi(ui)); 
     708                $.ui.mydialog.overlay.resize(); 
     709            } 
     710        }); 
     711    }, 
     712 
     713    _makeResizable: function(handles) { 
     714        handles = (handles === undefined ? this.options.resizable : handles); 
     715        var self = this, 
     716            options = self.options, 
     717            // .ui-resizable has position: relative defined in the stylesheet 
     718            // but dialogs have to use absolute or fixed positioning 
     719            position = self.uiMyDialog.css('position'), 
     720            resizeHandles = (typeof handles === 'string' ? 
     721                handles : 
     722                'n,e,s,w,se,sw,ne,nw' 
     723            ); 
     724 
     725        function filteredUi(ui) { 
     726            return { 
     727                originalPosition: ui.originalPosition, 
     728                originalSize: ui.originalSize, 
     729                position: ui.position, 
     730                size: ui.size 
     731            }; 
     732        } 
     733 
     734        self.uiMyDialog.resizable({ 
     735            cancel: '.ui-dialog-content', 
     736            containment: 'document', 
     737            alsoResize: self.element, 
     738            maxWidth: options.maxWidth, 
     739            maxHeight: options.maxHeight, 
     740            minWidth: options.minWidth, 
     741            minHeight: self._minHeight(), 
     742            handles: resizeHandles, 
     743            start: function(event, ui) { 
     744                $(this).addClass("ui-dialog-resizing"); 
     745                self._trigger('resizeStart', event, filteredUi(ui)); 
     746            }, 
     747            resize: function(event, ui) { 
     748                self._trigger('resize', event, filteredUi(ui)); 
     749            }, 
     750            stop: function(event, ui) { 
     751                $(this).removeClass("ui-dialog-resizing"); 
     752                options.height = $(this).height(); 
     753                options.width = $(this).width(); 
     754                self._trigger('resizeStop', event, filteredUi(ui)); 
     755                $.ui.mydialog.overlay.resize(); 
     756            } 
     757        }) 
     758        .css('position', position) 
     759        .find('.ui-resizable-se').addClass('ui-icon ui-icon-grip-diagonal-se'); 
     760    }, 
     761 
     762    _minHeight: function() { 
     763        var options = this.options; 
     764 
     765        if (options.height === 'auto') { 
     766            return options.minHeight; 
     767        } else { 
     768            return Math.min(options.minHeight, options.height); 
     769        } 
     770    }, 
     771 
     772    _position: function(position) { 
     773        var myAt = [], 
     774            offset = [0, 0], 
     775            isVisible; 
     776 
     777        if (position) { 
     778            // deep extending converts arrays to objects in jQuery <= 1.3.2 :-( 
     779    //      if (typeof position == 'string' || $.isArray(position)) { 
     780    //          myAt = $.isArray(position) ? position : position.split(' '); 
     781 
     782            if (typeof position === 'string' || (typeof position === 'object' && '0' in position)) { 
     783                myAt = position.split ? position.split(' ') : [position[0], position[1]]; 
     784                if (myAt.length === 1) { 
     785                    myAt[1] = myAt[0]; 
     786                } 
     787 
     788                $.each(['left', 'top'], function(i, offsetPosition) { 
     789                    if (+myAt[i] === myAt[i]) { 
     790                        offset[i] = myAt[i]; 
     791                        myAt[i] = offsetPosition; 
     792                    } 
     793                }); 
     794 
     795                position = { 
     796                    my: myAt.join(" "), 
     797                    at: myAt.join(" "), 
     798                    offset: offset.join(" ") 
     799                }; 
     800            }  
     801 
     802            position = $.extend({}, $.ui.mydialog.prototype.options.position, position); 
     803        } else { 
     804            position = $.ui.mydialog.prototype.options.position; 
     805        } 
     806 
     807        // need to show the dialog to get the actual offset in the position plugin 
     808        isVisible = this.uiMyDialog.is(':visible'); 
     809        if (!isVisible) { 
     810            this.uiMyDialog.show(); 
     811        } 
     812        this.uiMyDialog 
     813            // workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781 
     814            .css({ top: 0, left: 0 }) 
     815            .position(position); 
     816        if (!isVisible) { 
     817            this.uiMyDialog.hide(); 
     818        } 
     819    }, 
     820 
     821    _setOption: function(key, value){ 
     822        var self = this, 
     823            uiMyDialog = self.uiMyDialog, 
     824            isResizable = uiMyDialog.is(':data(resizable)'), 
     825            resize = false; 
     826 
     827        switch (key) { 
     828            //handling of deprecated beforeclose (vs beforeClose) option 
     829            //Ticket #4669 http://dev.jqueryui.com/ticket/4669 
     830            //TODO: remove in 1.9pre 
     831            case "beforeclose": 
     832                key = "beforeClose"; 
     833                break; 
     834            case "buttons": 
     835                self._createButtons(value); 
     836                resize = true; 
     837                break; 
     838            case "closeText": 
     839                // convert whatever was passed in to a string, for text() to not throw up 
     840                self.uiMyDialogTitlebarCloseText.text("" + value); 
     841                break; 
     842            case "dialogClass": 
     843                uiMyDialog 
     844                    .removeClass(self.options.dialogClass) 
     845                    .addClass(uiMyDialogClasses + value); 
     846                break; 
     847            case "disabled": 
     848                if (value) { 
     849                    uiMyDialog.addClass('ui-dialog-disabled'); 
     850                } else { 
     851                    uiMyDialog.removeClass('ui-dialog-disabled'); 
     852                } 
     853                break; 
     854            case "draggable": 
     855                if (value) { 
     856                    self._makeDraggable(); 
     857                } else { 
     858                    uiMyDialog.draggable('destroy'); 
     859                } 
     860                break; 
     861            case "height": 
     862                resize = true; 
     863                break; 
     864            case "maxHeight": 
     865                if (isResizable) { 
     866                    uiMyDialog.resizable('option', 'maxHeight', value); 
     867                } 
     868                resize = true; 
     869                break; 
     870            case "maxWidth": 
     871                if (isResizable) { 
     872                    uiMyDialog.resizable('option', 'maxWidth', value); 
     873                } 
     874                resize = true; 
     875                break; 
     876            case "minHeight": 
     877                if (isResizable) { 
     878                    uiMyDialog.resizable('option', 'minHeight', value); 
     879                } 
     880                resize = true; 
     881                break; 
     882            case "minWidth": 
     883                if (isResizable) { 
     884                    uiMyDialog.resizable('option', 'minWidth', value); 
     885                } 
     886                resize = true; 
     887                break; 
     888            case "position": 
     889                self._position(value); 
     890                break; 
     891            case "resizable": 
     892                // currently resizable, becoming non-resizable 
     893                if (isResizable && !value) { 
     894                    uiMyDialog.resizable('destroy'); 
     895                } 
     896 
     897                // currently resizable, changing handles 
     898                if (isResizable && typeof value === 'string') { 
     899                    uiMyDialog.resizable('option', 'handles', value); 
     900                } 
     901 
     902                // currently non-resizable, becoming resizable 
     903                if (!isResizable && value !== false) { 
     904                    self._makeResizable(value); 
     905                } 
     906                break; 
     907            case "title": 
     908                // convert whatever was passed in o a string, for html() to not throw up 
     909                $(".ui-dialog-title", self.uiMyDialogTitlebar).html("" + (value || '&#160;')); 
     910                break; 
     911            case "width": 
     912                resize = true; 
     913                break; 
     914        } 
     915 
     916        $.Widget.prototype._setOption.apply(self, arguments); 
     917        if (resize) { 
     918            self._size(); 
     919        } 
     920    }, 
     921 
     922    _size: function() { 
     923        /* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content 
     924         * divs will both have width and height set, so we need to reset them 
     925         */ 
     926        var options = this.options, 
     927            nonContentHeight; 
     928 
     929        // reset content sizing 
     930        // hide for non content measurement because height: 0 doesn't work in IE quirks mode (see #4350) 
     931        this.element.css({ 
     932            width: 'auto', 
     933            minHeight: 0, 
     934            height: 0 
     935        }); 
     936 
     937        if (options.minWidth > options.width) { 
     938            options.width = options.minWidth; 
     939        } 
     940 
     941        // reset wrapper sizing 
     942        // determine the height of all the non-content elements 
     943        nonContentHeight = this.uiMyDialog.css({ 
     944                height: 'auto', 
     945                width: options.width 
     946            }) 
     947            .height(); 
     948 
     949        this.element 
     950            .css(options.height === 'auto' ? { 
     951                    minHeight: Math.max(options.minHeight - nonContentHeight, 0), 
     952                    height: 'auto' 
     953                } : { 
     954                    minHeight: 0, 
     955                    height: Math.max(options.height - nonContentHeight, 0)               
     956            }) 
     957            .show(); 
     958 
     959        if (this.uiMyDialog.is(':data(resizable)')) { 
     960            this.uiMyDialog.resizable('option', 'minHeight', this._minHeight()); 
     961        } 
     962    } 
     963}); 
     964 
     965 
     966$.extend($.ui.mydialog, { 
     967    version: "1.8.4", 
     968 
     969    uuid: 0, 
     970    maxZ: 0, 
     971 
     972    getTitleId: function($el) { 
     973        var id = $el.attr('id'); 
     974        if (!id) { 
     975            this.uuid += 1; 
     976            id = this.uuid; 
     977        } 
     978        return 'ui-dialog-title-' + id; 
     979    }, 
     980 
     981    overlay: function(dialog) { 
     982        this.$el = $.ui.mydialog.overlay.create(dialog); 
     983    } 
     984}); 
     985 
     986 
     987$.extend($.ui.mydialog.overlay, { 
     988    instances: [], 
     989    // reuse old instances due to IE memory leak with alpha transparency (see #5185) 
     990    oldInstances: [], 
     991    maxZ: 0, 
     992    events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','), 
     993        function(event) { return event + '.dialog-overlay'; }).join(' '), 
     994    create: function(dialog) { 
     995        if (this.instances.length === 0) { 
     996            // prevent use of anchors and inputs 
     997            // we use a setTimeout in case the overlay is created from an 
     998            // event that we're going to be cancelling (see #2804) 
     999            setTimeout(function() { 
     1000                // handle $(el).dialog().dialog('close') (see #4065) 
     1001                if ($.ui.mydialog.overlay.instances.length) { 
     1002                    $(document).bind($.ui.mydialog.overlay.events, function(event) { 
     1003                        // stop events if the z-index of the target is < the z-index of the overlay 
     1004                        return ($(event.target).zIndex() >= $.ui.mydialog.overlay.maxZ); 
     1005                    }); 
     1006                } 
     1007            }, 1); 
     1008 
     1009            // allow closing by pressing the escape key 
     1010            $(document).bind('keydown.dialog-overlay', function(event) { 
     1011                if (dialog.options.closeOnEscape && event.keyCode && 
     1012                    event.keyCode === $.ui.keyCode.ESCAPE) { 
     1013                     
     1014                    dialog.close(event); 
     1015                    event.preventDefault(); 
     1016                } 
     1017            }); 
     1018 
     1019            // handle window resize 
     1020            $(window).bind('resize.dialog-overlay', $.ui.mydialog.overlay.resize); 
     1021        } 
     1022 
     1023        var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay')) 
     1024            .appendTo(document.body) 
     1025            .css({ 
     1026                width: this.width(), 
     1027                height: this.height() 
     1028            }); 
     1029 
     1030        if ($.fn.bgiframe) { 
     1031            $el.bgiframe(); 
     1032        } 
     1033 
     1034        this.instances.push($el); 
     1035        return $el; 
     1036    }, 
     1037 
     1038    destroy: function($el) { 
     1039        this.oldInstances.push(this.instances.splice($.inArray($el, this.instances), 1)[0]); 
     1040 
     1041        if (this.instances.length === 0) { 
     1042            $([document, window]).unbind('.dialog-overlay'); 
     1043        } 
     1044 
     1045        $el.remove(); 
     1046         
     1047        // adjust the maxZ to allow other modal dialogs to continue to work (see #4309) 
     1048        var maxZ = 0; 
     1049        $.each(this.instances, function() { 
     1050            maxZ = Math.max(maxZ, this.css('z-index')); 
     1051        }); 
     1052        this.maxZ = maxZ; 
     1053    }, 
     1054 
     1055    height: function() { 
     1056        var scrollHeight, 
     1057            offsetHeight; 
     1058        // handle IE 6 
     1059        if ($.browser.msie && $.browser.version < 7) { 
     1060            scrollHeight = Math.max( 
     1061                document.documentElement.scrollHeight, 
     1062                document.body.scrollHeight 
     1063            ); 
     1064            offsetHeight = Math.max( 
     1065                document.documentElement.offsetHeight, 
     1066                document.body.offsetHeight 
     1067            ); 
     1068 
     1069            if (scrollHeight < offsetHeight) { 
     1070                return $(window).height() + 'px'; 
     1071            } else { 
     1072                return scrollHeight + 'px'; 
     1073            } 
     1074        // handle "good" browsers 
     1075        } else { 
     1076            return $(document).height() + 'px'; 
     1077        } 
     1078    }, 
     1079 
     1080    width: function() { 
     1081        var scrollWidth, 
     1082            offsetWidth; 
     1083        // handle IE 6 
     1084        if ($.browser.msie && $.browser.version < 7) { 
     1085            scrollWidth = Math.max( 
     1086                document.documentElement.scrollWidth, 
     1087                document.body.scrollWidth 
     1088            ); 
     1089            offsetWidth = Math.max( 
     1090                document.documentElement.offsetWidth, 
     1091                document.body.offsetWidth 
     1092            ); 
     1093 
     1094            if (scrollWidth < offsetWidth) { 
     1095                return $(window).width() + 'px'; 
     1096            } else { 
     1097                return scrollWidth + 'px'; 
     1098            } 
     1099        // handle "good" browsers 
     1100        } else { 
     1101            return $(document).width() + 'px'; 
     1102        } 
     1103    }, 
     1104 
     1105    resize: function() { 
     1106        /* If the dialog is draggable and the user drags it past the 
     1107         * right edge of the window, the document becomes wider so we 
     1108         * need to stretch the overlay. If the user then drags the 
     1109         * dialog back to the left, the document will become narrower, 
     1110         * so we need to shrink the overlay to the appropriate size. 
     1111         * This is handled by shrinking the overlay before setting it 
     1112         * to the full document size. 
     1113         */ 
     1114        var $overlays = $([]); 
     1115        $.each($.ui.mydialog.overlay.instances, function() { 
     1116            $overlays = $overlays.add(this); 
     1117        }); 
     1118 
     1119        $overlays.css({ 
     1120            width: 0, 
     1121            height: 0 
     1122        }).css({ 
     1123            width: $.ui.mydialog.overlay.width(), 
     1124            height: $.ui.mydialog.overlay.height() 
     1125        }); 
     1126    } 
     1127}); 
     1128 
     1129$.extend($.ui.mydialog.overlay.prototype, { 
     1130    destroy: function() { 
     1131        $.ui.mydialog.overlay.destroy(this.$el); 
     1132    } 
     1133}); 
     1134 
    2801135                         
    2811136// Open Video Player link 
     
    2901145            autoOpen: false, 
    2911146            height: 620, 
    292             width: 645, 
     1147            width: 785, 
    2931148            modal: true, 
    2941149            beforeclose: function(event, ui) { 
     
    3011156                                                }); 
    3021157                                                $( "#subtitles" ).button( "option", "label", "Subtitles"); 
     1158                                                $( "#audiotracks" ).button( "option", "label", "Audio Track(s)"); 
    3031159                                            }, 
    3041160            resizeStart: function(event, ui) {  
     
    3071163            resizeStop: function(event, ui) { setPlayerSize(); } 
    3081164        }); 
     1165 
     1166 
     1167//Video Player info sub-window       
     1168    $( "#infodialog" ).mydialog({ 
     1169            autoOpen: false, 
     1170            zIndex: 100000, 
     1171            show: "clip", 
     1172            hide: "clip", 
     1173            position: 'top', 
     1174            width: 460, 
     1175            buttons: { 
     1176                Ok: function() { 
     1177                    $( this ).mydialog( "close" ); 
     1178                } 
     1179            } 
     1180        }); 
     1181 
    3091182         
    3101183//Hover states on the Video Player link 
     
    4061279        }); 
    4071280         
     1281        $('#audiotracks').button({ 
     1282            icons: {primary: 'ui-icon-comment'}, 
     1283            disabled: true 
     1284        }) 
     1285        .click(function() { 
     1286        changeAudioTrack(); 
     1287        }); 
     1288         
     1289        $('#info').button({ 
     1290            text: false, 
     1291            icons: { 
     1292                primary: 'ui-icon-info' 
     1293            } 
     1294        }) 
     1295        .click(function() { 
     1296            $('#infodialog').mydialog('open'); 
     1297        }); 
     1298         
    4081299//Seeking bar 
    4091300        $('#slider').slider({