linterna-magica-commit
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[linterna-magica-commit] [310] Changes of the interface.


From: Ivaylo Valkov
Subject: [linterna-magica-commit] [310] Changes of the interface.
Date: Sun, 09 Sep 2012 16:00:53 +0000

Revision: 310
          
http://svn.sv.gnu.org/viewvc/?view=rev&root=linterna-magica&revision=310
Author:   valkov
Date:     2012-09-09 16:00:52 +0000 (Sun, 09 Sep 2012)
Log Message:
-----------
Changes of the interface. Closes tasks #12203. The new code and the
modifications are tested and should not bring new bugs
(theoretically). Should have used a separate branch with incremental
changes and commits. #future_release_0.0.13

Ticket Links:
------------
    http://savannah.gnu.org/task/?12203

Modified Paths:
--------------
    trunk/COPYING.data-files
    trunk/data/style/button-about-90deg.png
    trunk/data/style/template.css
    trunk/src/lm_about.js
    trunk/src/lm_check_for_updates.js
    trunk/src/lm_config_options.js
    trunk/src/lm_constructors.js
    trunk/src/lm_create_video_object.js
    trunk/src/lm_detect_object_in_remote_site.js
    trunk/src/lm_extract_dom_objects.js
    trunk/src/lm_extract_js_scripts.js
    trunk/src/lm_interface_hd_links.js
    trunk/src/lm_interface_player_web_buttons.js
    trunk/src/lm_interface_toggle_plugin.js
    trunk/src/lm_player_button_functions.js
    trunk/src/lm_video_and_flash_objects_helper_functions.js

Added Paths:
-----------
    trunk/data/style/button-about-270deg.png
    trunk/data/style/button-close-270deg.png
    trunk/data/style/button-debug-270deg.png
    trunk/data/style/button-higher-quality-90deg.png
    trunk/data/style/button-toggle-plugin-with-logo-90deg.png
    trunk/data/style/button-update-270deg.png

Removed Paths:
-------------
    trunk/data/style/button-close-90deg.png
    trunk/data/style/button-debug-90deg.png

Modified: trunk/COPYING.data-files
===================================================================
--- trunk/COPYING.data-files    2012-08-18 07:43:35 UTC (rev 309)
+++ trunk/COPYING.data-files    2012-09-09 16:00:52 UTC (rev 310)
@@ -39,7 +39,18 @@
        Distributed under the terms of the GNU GPL either version 3 of
        the License, or (at your option) any later version.
 
+button-toggle-plugin-with-logo-90deg.png
+
+       Based on button-toggle-plugin-with-logo.png
+
+       Copyright (C) 2010  Anton Katsarov <address@hidden>
+       Copyright (C) 2012 Ivaylo Valkov <address@hidden>
+
+       Distributed under the terms of the GNU GPL either version 3 of
+       the License, or (at your option) any later version.
+
 button-about-90deg.png
+button-about-270deg.png
 
        Based on button-about.png
 
@@ -50,9 +61,14 @@
        the License, or (at your option) any later version.
 
 button-close-90deg.png
+button-close-270deg.png
 button-debug-90deg.png
+button-debug-270deg.png
+button-higher-quality-90deg.png
+button-update-270deg.png
 
-       Based on button-close.png and button-debug.png
+       Based on button-close.png, button-debug.png and
+       button-higher-quality.png
 
        Copyright (C) 2011  Anton Katsarov <address@hidden>
        Copyright (C) 2012 Ivaylo Valkov <address@hidden>
@@ -108,4 +124,5 @@
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
-along with Linterna Mágica.  If not, see <http://www.gnu.org/licenses/>.
\ No newline at end of file
+along with Linterna Mágica.  If not, see <http://www.gnu.org/licenses/>.
+

Added: trunk/data/style/button-about-270deg.png
===================================================================
(Binary files differ)


Property changes on: trunk/data/style/button-about-270deg.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Modified: trunk/data/style/button-about-90deg.png
===================================================================
(Binary files differ)

Copied: trunk/data/style/button-close-270deg.png (from rev 307, 
trunk/data/style/button-close-90deg.png)
===================================================================
(Binary files differ)

Deleted: trunk/data/style/button-close-90deg.png
===================================================================
(Binary files differ)

Copied: trunk/data/style/button-debug-270deg.png (from rev 307, 
trunk/data/style/button-debug-90deg.png)
===================================================================
(Binary files differ)

Deleted: trunk/data/style/button-debug-90deg.png
===================================================================
(Binary files differ)

Added: trunk/data/style/button-higher-quality-90deg.png
===================================================================
(Binary files differ)


Property changes on: trunk/data/style/button-higher-quality-90deg.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Added: trunk/data/style/button-toggle-plugin-with-logo-90deg.png
===================================================================
(Binary files differ)


Property changes on: trunk/data/style/button-toggle-plugin-with-logo-90deg.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Added: trunk/data/style/button-update-270deg.png
===================================================================
(Binary files differ)


Property changes on: trunk/data/style/button-update-270deg.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Modified: trunk/data/style/template.css
===================================================================
--- trunk/data/style/template.css       2012-08-18 07:43:35 UTC (rev 309)
+++ trunk/data/style/template.css       2012-09-09 16:00:52 UTC (rev 310)
@@ -32,6 +32,12 @@
     /* Fix header buttons displacement in boozho.com */
     /* Fixes entire interface displacement */
     clear: left !important;
+    height: auto !important;
+    z-index: 99 !important;
+    /* See LinternaMagica.prototype.min_height and */
+    /* LinternaMagica.prototype.min_width in  */
+    /* lm_constructors.js */
+    min-height: 212px !important;
 }
 
 /* The message paragraph in the object */
@@ -44,8 +50,8 @@
 }
 /* The header div */
 body div#top_content_box div.dmpi_video_playerv4
-div.linterna-magica-header,
-.linterna-magica-header {
+div.linterna-magica-controls-time-slider,
+.linterna-magica-controls-time-slider {
     text-align: left  !important;
     color: #333333  !important;
     background: gray url('header-background.png') 0 0 repeat-x !important;
@@ -54,49 +60,120 @@
     border: solid #666666  !important;
     border-width: 1px 0px  !important;
     position: relative  !important;
+    top: 0px !important;
 }
 
 /* The logo/about link in the header */
 .linterna-magica-logo {
     position: absolute  !important;
     display: block  !important;
-    width: 120px  !important;
-    height: 24px  !important;
-    top: 0  !important;
-    right: 0px  !important;
+    width: 24px  !important;
+    height: 116px  !important;
+    top: -1px !important;
+    right: -15px  !important;
     margin: 0px  !important;
-    background: url('button-about.png') 0 0 no-repeat !important;
+    background: url('button-about-90deg.png') 0 0 no-repeat !important;
     line-height: 3000px  !important;
     overflow: hidden  !important;
     /* Hint that there is help */
     cursor: help !important;
+    border: 1px solid #36393E !important;
+    /* Above web page elements. Below video object */
+    z-index: 9999 !important;
 }
 
+.linterna-magica-logo:hover {
+    right: -25px !important;
+}
 
 /* The link that switches between LinternaMagica and the plugin */
 /* (the bottom of a flash object) */
 .linterna-magica-toggle-plugin {
     display: block  !important;
     text-decoration: none  !important;
-    width: 146px  !important;
-    height: 24px  !important;
+    width: 24px  !important;
+    height: 146px  !important;
     position: absolute !important;
-    right: 0px  !important;
-    background: url('button-toggle-plugin-with-logo.png') 0 0 no-repeat 
!important;
+    right: -15px  !important;
+    background: url('button-toggle-plugin-with-logo-90deg.png') 0 0 no-repeat 
!important;
     line-height: 3000px  !important;
     overflow: hidden  !important;
+    border: 1px solid #36393E !important;
 }
 
+.linterna-magica-remote-clip-buttons,
+.linterna-magica-toggle-plugin-wrapper {
+    position:relative!important;
+    z-index: 999999 !important;
+    display: block !important;
+    right: 0px !important;
+    top: 0px !important;
+    width: 100% !important;
+}
+
+.linterna-magica-remote-clip-buttons {
+    width: 100% !important;
+    height: 168px !important; 
+    border: 1px solid #36393E !important;
+}
+
+.linterna-magica-toggle-plugin:hover {
+    right: -24px !important;
+}
+
+p.linterna-magica-remote-clip-buttons:hover {
+    right: -9px !important;
+}
+
+.linterna-magica-remote-clip-buttons a {
+    display: block !important;
+    right: 0px !important;
+    margin: 0 !important;
+    top: 0 !important;
+    position: relative !important;
+    padding: 0 !important;
+    color:#ffffff !important;
+    height: 146px !important;
+    width: 24px !important;
+    text-decoration: none !important;
+    overflow: hidden;
+    line-height: 3000px;
+    float: right !important;
+    right: 0px !important;
+}
+
+a.linterna-magica-remote-clip-visit-page-button {
+    background: url('button-toggle-plugin-with-logo-90deg.png') 0 0 no-repeat 
!important;
+}
+
+/* The link that destroys the remote clip link */
+a.linterna-magica-remote-clip-close-button {
+    background: url('button-close-90deg.png') 0 0 no-repeat !important;
+    height: 24px !important;
+    width: 24px !important;
+    position:relative !important;
+    display: block !important;
+    top: -2px !important;
+    clear: both !important;
+}
+
 /* about message (license, author... every row) */
-.linterna-magica-update-info-box
-body div#top_content_box div.dmpi_video_playerv4
-div.linterna-magica-about-box,
+body div#top_content_box div.dmpi_video_playerv4,
+div.linterna-magica-update-info-box, 
+.linterna-magica-update-info-box,
+div.linterna-magica-about-box, 
 .linterna-magica-about-box {
     background: #000000 !important;
     font-size: 12px !important;
     line-height: 1.3em !important;
     padding-top: 20px !important;
     font-family: 'Liberation Sans', 'Arial', sans-serif  !important;
+    display:block !important;
+    position:relative !important;
+    z-index: 99999 !important;
+    height: auto !important;
+    width: 100% !important;
+    padding-bottom: 20px !important;
 }
 
 .linterna-magica-update-info-box p,
@@ -153,7 +230,7 @@
     font-weight: normal !important;
     display: block !important;
     bottom: 0px !important;
-    position: absolute !important;
+    position: relative !important;
     /* Hides the HD links list. The HD list was */
     /* moved to the controls footer, because of */
     /* https://savannah.nongnu.org/bugs/?34465 */
@@ -212,6 +289,7 @@
 a.linterna-magica-controls-buttons-fullscreen {
     background: url('button-fullscreen.png') 0 0 no-repeat !important;
     width: 26px !important;
+    float: right !important;
 }
 
 /* time && volume slider (div) */
@@ -228,8 +306,8 @@
     height: 22px !important;
     position: relative !important;
     color: #ffffff !important;
-    margin-left: 3px !important;
     background: url('slider-background.png') left bottom repeat-x !important;
+    width: 100% !important;
 }
 
 /* time && volume slider knob (<a>) */
@@ -245,7 +323,9 @@
     z-index: 9999 !important;
 }
 
-/* The video download link in the header */
+
+
+/* The video download link */
 .linterna-magica-video-download-link {
     background: url('button-download.png') 0 0 no-repeat !important;
     height: 24px !important;
@@ -257,7 +337,7 @@
     line-height: 3000px  !important;
     outline: none  !important;
     display: block !important;
-    float: left !important;
+    float: right !important;
 }
 
 /* The link that switches between LinternaMagica and the plugin */
@@ -284,7 +364,7 @@
     line-height: 3000px  !important;
     outline: none  !important;
     display: block !important;
-    float: left !important;
+    float: right !important;
 }
 
 
@@ -303,6 +383,22 @@
     background-color: transparent !important;
 }
 
+.linterna-magica-controls-volume-slider {
+    margin-left: 3px !important;
+    width: 80px !important;
+    display: block !important;
+}
+
+.linterna-magica-controls-volume-slider-text {
+    left: 35% !important;
+}
+
+.linterna-magica-controls-time-slider-text {
+    top: 6px !important;
+    color: #ffffff !important;
+    margin-left: 10px !important;
+}
+
 /* The hd links wrapper div */
 /* ul ->li->a */
 /* NOTE: The best solution seems to be fixed height with overflow-y */
@@ -324,12 +420,12 @@
     /* which is not what we want. At 16% it */
     /* is fine with YouTube and Vimeo, not */
     /* too wide. */
-    width: 16% !important;
+    width: 350% !important;
     height: auto !important;
     /* ^^^Fix height and width in dailymotion: The site sets them to */
     /* 100% but the list shows partly under the header */
-    bottom: -2px !important;
-    left: 100.5% !important;
+    bottom: 26px !important;
+    left: 12px !important;
     overflow-y: auto !important;
     /* Hide scrollbars for HD links in YouTube */
     overflow-x: hidden !important;
@@ -339,7 +435,8 @@
     position: absolute  !important;
     font-size: 13px  !important;
     padding: 0px 0 !important;
-    z-index: 9999 !important;
+    /* Above web page elements and logo at the right */
+    z-index: 99999 !important;
 }
 
 .linterna-magica-hd-links-list ul {
@@ -378,7 +475,7 @@
 /* <div>hd links list</div> */
 /*</div> */
 .linterna-magica-switch-hd {
-    background: url('button-higher-quality.png') 0 0 no-repeat !important;
+    background: url('button-higher-quality-90deg.png ') 0 0 no-repeat 
!important;
     height: 24px !important;
     width: 24px !important;
     position: relative !important;
@@ -389,8 +486,28 @@
     outline: none  !important;
     display: block !important;
     float: left !important;
+    /* Above web page elements. Below video object */
+    z-index: 9999 !important;
 }
 
+.linterna-magica-hd-wrapper {
+    bottom: 78px !important;
+    display: block !important;
+    float: right !important;
+    position: relative !important;
+    right: -15px !important;
+    width: 24px !important;
+    border: 1px solid #36393E !important;
+}
+
+.linterna-magica-hd-wrapper:hover {
+    right: -25px !important;
+}
+
+.linterna-magica-hd-wrapper:hover > .linterna-magica-hd-links-list {
+    left: 2px !important;
+}
+
 /* Fix displacement in reuters.com. The function delete_object_if_id*/
 /* removes the overlaping flash objects */
 #videoPlayer, div.sectionContent, section,
@@ -401,6 +518,7 @@
 }
 
 /* The update button */
+.linterna-magica-side-update-notifier-button-update-icon,
 .linterna-magica-update-notifier-link {
     background: url('button-update.png') 0 0 no-repeat !important;
     height: 24px !important;
@@ -413,9 +531,13 @@
     outline: none  !important;
     display: block !important;
     float: right !important;
-    right: 122px !important;
 }
 
+.linterna-magica-side-update-notifier-button-update-icon {
+    background: url('button-update-270deg.png') 0 0 no-repeat !important;
+    top: 116px !important;
+}
+
 /* The web log  button */
 .linterna-magica-web-log-link {
     background: url('button-debug.png') 0 0 no-repeat !important;
@@ -429,7 +551,6 @@
     outline: none  !important;
     display: block !important;
     float: right !important;
-    right: 122px !important;
 }
 
 div.linterna-magica-web-log, 
@@ -546,9 +667,10 @@
 }
 
 
+.linterna-magica-side-update-notifier-button-wrap,
 .linterna-magica-web-log-debug-button-wrap {
     position: fixed !important;
-    right: -12px !important;
+    right: -10px !important;
     bottom: 105px !important;
     float: right !important;
     line-height: 10000px !important;
@@ -561,6 +683,11 @@
     z-index: 10000000000000000 !important;
 }
 
+.linterna-magica-side-update-notifier-button-wrap {
+   bottom: 275px !important;
+}
+
+p.linterna-magica-side-update-notifier-button-wrap:hover,
 p.linterna-magica-web-log-debug-button-wrap:hover {
     right: 0px !important;
 }
@@ -572,16 +699,18 @@
     color: black !important;
 }
 
+.linterna-magica-side-update-notifier-button,
 .linterna-magica-web-log-debug-button {
-    background: gray url('button-about-90deg.png') 0 0 no-repeat !important;
+    background: gray url('button-about-270deg.png') 0 0 no-repeat !important;
     height: 116px!important;
     width: 24px!important;
     display:block!important;
     border: none !important;
 }
 
+.linterna-magica-side-update-notifier-button-close,
 .linterna-magica-web-log-debug-button-close {
-    background: url('button-close-90deg.png') 0 0 no-repeat !important;
+    background: url('button-close-270deg.png') 0 0 no-repeat !important;
     width: 24px !important;
     height: 24px !important;
     position:relative !important;
@@ -592,7 +721,7 @@
 }
 
 .linterna-magica-web-log-debug-button-bug {
-    background: gray url('button-debug-90deg.png') 0 0 no-repeat !important;
+    background: gray url('button-debug-270deg.png') 0 0 no-repeat !important;
     height: 24px!important;
     width: 24px!important;
     display:block!important;
@@ -602,30 +731,12 @@
     border: none !important;
 }
 
-.linterna-magica-remote-clip-buttons  {
-    position: relative !important;
+.linterna-magica-video-object-wrapper,
+.linterna-magica-video-object,
+.linterna-magica-video-object p {
+    /* Above HD button and logo at the right */
     z-index: 99999 !important;
-    /* See https://savannah.nongnu.org/bugs/?33303*/
-    margin-bottom: 50px !important;
+    display:block !important;
+    position:relative !important;
+    background-color: black !important;
 }
-
-p.linterna-magica-remote-clip-buttons a {
-    display: block !important;
-    right: 0 !important;
-    margin: 0 !important;
-    top: 0 !important;
-    position: relative !important;
-    padding: 0 !important;
-    color:#ffffff !important;
-    height: 24px !important;
-    /* border: 1px dashed white !important; */
-    float: right !important;
-    text-decoration: none !important;
-    overflow: hidden;
-    line-height: 3000px;
-}
-/* The link that destroys the remote clip link */
-a.linterna-magica-remote-clip-close-button {
-    background: url('button-close.png') 0 0 no-repeat !important;
-    width: 24px !important;
-}

Modified: trunk/src/lm_about.js
===================================================================
--- trunk/src/lm_about.js       2012-08-18 07:43:35 UTC (rev 309)
+++ trunk/src/lm_about.js       2012-09-09 16:00:52 UTC (rev 310)
@@ -147,7 +147,10 @@
 // Information for the script.
 LinternaMagica.prototype.about = function(event, element)
 {
-    event.preventDefault();
+    if (event)
+    {
+       event.preventDefault();
+    }
 
     // Get by Id. Finding the object by tag name is not good idea when
     // there are other objects in the header.
@@ -174,12 +177,12 @@
        if(about.style.display)
        {
            about.style.removeProperty("display");
-           obj.style.setProperty("display","none", "important");
+           this.hide_lm_video_object(id);
        }
        else
        {
            about.style.setProperty("display","none", "important");
-           obj.style.removeProperty("display");
+           this.show_lm_video_object(id);
        }
     }
 }

Modified: trunk/src/lm_check_for_updates.js
===================================================================
--- trunk/src/lm_check_for_updates.js   2012-08-18 07:43:35 UTC (rev 309)
+++ trunk/src/lm_check_for_updates.js   2012-09-09 16:00:52 UTC (rev 310)
@@ -31,12 +31,13 @@
 {
     // Configured to not update
     // or the build is from SVN
-    if (this.updates == -1 || 
-       /svn/i.test(this.version))
+    if (this.updates == -1)
+       // || 
+       //      /svn/i.test(this.version))
     {
-       return  null;
+       return  null;
     }
-
+  
     if (this.check_for_updates_once)
     {
        return null;
@@ -46,6 +47,8 @@
     // mess. Only the first one will execute the code.
     this.check_for_updates_once = true;
 
+    
+
     var updates_mul;
     var in_seconds ;
 
@@ -117,9 +120,11 @@
 // "frame" (object)
 LinternaMagica.prototype.parse_updated_version_data = function(data)
 {
-    var version = data.version;
+  
+    var new_release_date = new Date(data.date * 1000);
+    var current_release_date  = new Date(this.release_date*1000);
 
-    if ( version != this.version)
+    if ( new_release_date > current_release_date )
     {
 
        var date = data.date;
@@ -138,39 +143,45 @@
        // To be used by other functions
        this.updates_data = new Object();
        this.updates_data.date = date;
-       this.updates_data.version = version;
+       this.updates_data.version = data.version;
        this.updates_data.format_date = format_date;
 
-       var self = this;
-       // Add notifier in the headers of all video objects 
-       for (var n=0, l=this.found_flash_video_objects+1; n<l; n++)
+       // Show the notifier in the controls
+       var notifier_buttons = 
+           document.querySelectorAll('.linterna-magica-update-'+
+                                     'notifier-link');
+
+       for(var i=0, l=notifier_buttons.length; i<l; i++)
        {
-           // header
-           var h = document.getElementById("linterna-magica-header-"+n);
+           var button = notifier_buttons[i];
+           button.style.removeProperty("display");
+           button.setAttribute("title",
+                               this._("New version")+
+                               ": "+data.version+". "+this._("Date")+": "+
+                               this._(format_date[2]) + " "+
+                               this._(format_date[1]) + " " +
+                               this._(format_date[3]));
+           var id = button.getAttribute("id").split(/-/);
+           id = id[id.length-1];
 
-           // container 
-           var lm = document.getElementById("linterna-magica-"+n);
+           var video_object = this.get_video_object(id);
+           var heigh = this.extract_object_height(video_object);
+           var info_box = 
+               document.getElementById("linterna-magica-"+
+                                       "update-info-box-"-id);
 
-           if (h && lm)
+           if (!info_box)
            {
-
-               var notifier = this.create_update_notifier_link(n);
-               var update_info = this.create_update_info_box(n);
-
-               var notifier_click_function = function(ev)
+               var info_box = this.create_update_info_box(id,video_object);
+               var lm = document.getElementById("linterna-magica-"+id);
+               if (lm)
                {
-                   var el = this;
-                   self.show_or_hide_update_info.apply(self, [ev, el]);
-               };
-
-               notifier.addEventListener("click",
-                                         notifier_click_function,
-                                         false);
-
-               h.appendChild(notifier);
-               lm.appendChild(update_info);
+                   lm.appendChild(info_box);
+               }
            }
        }
+
+       var side_button = this.create_side_update_notifier_button();
     }
 }
 
@@ -178,14 +189,21 @@
 // Create a notifier for the user in the header
 LinternaMagica.prototype.create_update_notifier_link = function(id)
 {
-    var date = this.updates_data.date;
-    var version = this.updates_data.version;
-    var format_date =  this.updates_data.format_date;
+    var title = 
+       this._("New version");
 
-    var title = 
-       this._("New version")+
-       ": "+version+". "+this._("Date")+": "+this._(format_date[2]) + " "+
-       this._(format_date[1]) + " " + this._(format_date[3]);
+    if (this.updates_data)
+    {
+       var date = this.updates_data.date;
+       var version = this.updates_data.version;
+       var format_date =  this.updates_data.format_date;
+
+       title +=
+       ": "+version+". "+this._("Date")+": "+
+           this._(format_date[2]) + " "+
+           this._(format_date[1]) + " " +
+           this._(format_date[3]);
+    }
     
     var notifier = document.createElement("a");
 
@@ -201,7 +219,7 @@
 
 //  Information to be showed when the notifier link about updates in
 //  the header is clicked
-LinternaMagica.prototype.create_update_info_box = function(id)
+LinternaMagica.prototype.create_update_info_box = function(id, object_height)
 {
     var date = this.updates_data.date;
     var version = this.updates_data.version;
@@ -212,6 +230,12 @@
     div.setAttribute("class", "linterna-magica-update-info-box");
     div.setAttribute("id", "linterna-magica-update-info-box-"+id);
 
+    div.style.setProperty("height", 
+                         // The about box and the update info box
+                         // have 20px top and bottom padding
+                         parseInt(object_height-40)+"px",
+                         "important");
+
     // Other 
     var p = document.createElement('p');
     var t = document.createTextNode(this._("New version is available."));
@@ -240,7 +264,10 @@
 // Information for updates
 LinternaMagica.prototype.show_or_hide_update_info = function(event, element)
 {
-    event.preventDefault();
+    if (event)
+    {
+       event.preventDefault();
+    }
 
     // Get by Id. Finding the object by tag name is not good idea when
     // there are other objects in the header.
@@ -266,14 +293,91 @@
        }
 
        if (updates.style.display)
-       {
+       {    
            updates.style.removeProperty("display");
-           obj.style.setProperty("display","none", "important");
+           this.hide_lm_video_object(id);
        }
        else
        {
            updates.style.setProperty("display","none", "important");
-           obj.style.removeProperty("display");
+           this.show_lm_video_object(id);
        }
     }
 }
+
+LinternaMagica.prototype.create_side_update_notifier_button = function()
+{
+    var side_button = document.createElement("p");
+    side_button.setAttribute('class', 
'linterna-magica-side-update-notifier-button-wrap');
+    side_button.setAttribute('id', 
'linterna-magica-side-update-notifier-button-wrap');
+
+    var logo = this.create_side_update_notifier_link();
+    logo.textContent = '';
+    logo.setAttribute('class',
+                     'linterna-magica-side-update-notifier-button');
+    
+    side_button.appendChild(logo);
+
+    var update_icon = document.createElement('span');
+    update_icon.setAttribute('class', 'linterna-magica-side-update-'+
+                            'notifier-button-update-icon');
+
+    logo.appendChild(update_icon);
+
+    var close = this.create_side_update_notifier_close_link();
+
+    side_button.appendChild(close);
+
+    close.addEventListener("click", this.remove_side_update_notifier, false);
+
+    document.body.appendChild(side_button);
+}
+
+// The button/link in the header making the web log element visible
+LinternaMagica.prototype.create_side_update_notifier_link = function()
+{
+    var date = this.updates_data.date;
+    var version = this.updates_data.version;
+    var format_date =  this.updates_data.format_date;
+
+    var update_info =
+       this._("New version is available.")+"\n"+
+       "Linterna Mágica"+" "+version+
+       " "+this._("released at")+" "+this._(format_date[2]) + " "+
+       this._(format_date[1]) + " "+this._(format_date[3])+"\n"+
+       this._("Read the news section at the home page");
+
+    var link = this.pack_external_link(
+       this.homepage+"/#news",
+       update_info);
+
+    link.setAttribute("title", update_info);
+
+    return link;
+}
+
+LinternaMagica.prototype.create_side_update_notifier_close_link = function()
+{
+    var close = document.createElement("a");
+    close.textContent="x";
+    close.setAttribute("href", "#");
+    close.setAttribute("class", "linterna-magica-side-update-"+
+                      "notifier-button-close")
+    close.setAttribute("title", this._("Remove update notifier"));
+
+    return close;
+} 
+
+LinternaMagica.prototype.remove_side_update_notifier = function(event, element)
+{
+    var update_notifier = 
+       document.getElementById('linterna-magica-side-update-'+
+                               'notifier-button-wrap');
+
+    if (!update_notifier)
+    {
+       return null;
+    }
+
+    update_notifier.parentNode.removeChild(update_notifier);
+}

Modified: trunk/src/lm_config_options.js
===================================================================
--- trunk/src/lm_config_options.js      2012-08-18 07:43:35 UTC (rev 309)
+++ trunk/src/lm_config_options.js      2012-09-09 16:00:52 UTC (rev 310)
@@ -74,6 +74,7 @@
     {
        var o = set_priority_to[i];
 
+
        // Check for valid option and use only them
        if (/plugin/i.test(o) || /self/i.test(o) || /html5/i.test(o))
        {

Modified: trunk/src/lm_constructors.js
===================================================================
--- trunk/src/lm_constructors.js        2012-08-18 07:43:35 UTC (rev 309)
+++ trunk/src/lm_constructors.js        2012-09-09 16:00:52 UTC (rev 310)
@@ -105,6 +105,10 @@
     // (with JSONP data) on every page. check_for_updates() is called
     // in create_video_object().
 
+    // Examine the option for updates and check if necessary.
+    this.updates_data = null;
+    this.check_for_updates();
+
     // Add the style sheet to the head of the document.
     this.create_stylesheet();
 
@@ -121,8 +125,11 @@
     {
        // setInterval ids for the video time position counter function
        this.player_timers = new Array();
+
+       // setTimout ids that hide the volume sliders
+       this.volume_slider_timers = new Array();
     }
-
+ 
     var position_function = null ;
     if (this.plugin_is_installed)
     {
@@ -195,8 +202,8 @@
 //    version: <version>,  // string 
 //});
 LinternaMagica.prototype.updates_page =
-    "http://linterna-magica.nongnu.org/downloads/updates.js";;
-//    "http://localhost/linterna-magica/downloads/updates.js";;
+//    "http://linterna-magica.nongnu.org/downloads/updates.js";;
+    "http://localhost/lm/downloads/updates.js";;
 
 // When this is a function the internal _() function could be used.
 LinternaMagica.prototype.description = function()
@@ -222,6 +229,22 @@
     );
 }
 
+// Two control bars (2x24)
+// One HD links buttom (1x24)
+// One logo button (1x116)
+// One close button after the logo (1x24) 
+LinternaMagica.prototype.min_height = 212;
+
+// Buttons (8x24)
+// Volume slider when visible (1x83)
+// Time text (1x78)
+LinternaMagica.prototype.min_width = 353;
+
+// One close button (1x24)
+// One logo button (1x146)
+// 1px border
+LinternaMagica.prototype.min_remote_object_height = 169;
+
 LinternaMagica.prototype.license_link =
     "https://www.gnu.org/licenses/gpl.html";;
 
@@ -233,7 +256,7 @@
     "https://savannah.nongnu.org/projects/linterna-magica";;
 
 LinternaMagica.prototype.bug_report_link = 
-    "https://sv.nongnu.org/support/?func=additem&amp;group=linterna-magica";;
+    "https://sv.nongnu.org/bugs/?func=additem&amp;group=linterna-magica";;
 
 LinternaMagica.prototype.microblog_link =
     "https://identi.ca/group/linternamagica";;

Modified: trunk/src/lm_create_video_object.js
===================================================================
--- trunk/src/lm_create_video_object.js 2012-08-18 07:43:35 UTC (rev 309)
+++ trunk/src/lm_create_video_object.js 2012-09-09 16:00:52 UTC (rev 310)
@@ -34,6 +34,8 @@
     if (typeof(object_data) !== "object")
        return;
 
+    var toggle_plugin = null;
+
     var id = object_data.linterna_magica_id;
     this.log("LinternaMagica.create_video_object:\n"+
             "Creating video object with linterna_magica_id "+id,2);
@@ -58,9 +60,8 @@
     }
 
     var container = document.createElement("div");
-    var header = document.createElement("div");
+    var object_tag_wrapper = document.createElement("div");
     var script_name = document.createElement("a");
-    var dw_link = document.createElement("a");
     var object_tag = document.createElement("object");
     var message = document.createElement("p");
     var param = document.createElement("param");
@@ -85,17 +86,11 @@
 
     container.style.setProperty("width",
                                (object_data.width+"px"), "important");
-
-    header.setAttribute("class", "linterna-magica-header");
-    header.setAttribute("id", "linterna-magica-header-"+id);
-    header.style.setProperty("width",
-                            ((parseInt(object_data.width))+"px"),
-                            "important");
-
-
+ 
     script_name.textContent = "Linterna Mágica";
     script_name.setAttribute("href", "#");
-    script_name.setAttribute("title", this._("About")+ " Linterna Mágica");
+    script_name.setAttribute("title", this._("About")+ " Linterna Mágica " +
+                            this.version);
     script_name.setAttribute("id", "linterna-magica-logo-"+id);
     script_name.setAttribute("class", "linterna-magica-logo");
 
@@ -106,77 +101,30 @@
                                     self.about.apply(self, [ev, el]);
                                 }, false);
 
-    var site_html5_player =
-       this.find_site_html5_player_wrapper(object_data.parent);
+    container.appendChild(script_name);
 
-    var toggle_plugin_switch_type = 
-       site_html5_player ? "html5" : "plugin";
+    object_tag_wrapper.setAttribute("id", 
"linterna-magica-video-object-wrapper-"+id);
+    object_tag_wrapper.setAttribute("class", 
"linterna-magica-video-object-wrapper");
 
-    // If the plugin is not installed this is useless
-    if (this.plugin_is_installed || site_html5_player)
-    {
-       // append before download link (first button in the header)
-       var toggle_plugin = 
-           this.create_toggle_plugin_link(null,id,
-                                          toggle_plugin_switch_type);
+    object_tag_wrapper.style.setProperty("height", object_data.height+"px",
+                                "important");
 
-       header.appendChild(toggle_plugin);
-    }
+    object_tag_wrapper.style.setProperty("width", object_data.width+"px",
+                                "important");
 
-    dw_link.textContent = this._("Download");
-    dw_link.setAttribute("title", this._("Save the video clip"));
+    object_tag_wrapper.style.setProperty("display", "block",
+                                        "important");
 
-    dw_link.setAttribute("id", "linterna-magica-video-download-link-"+id);
-    dw_link.setAttribute("class", "linterna-magica-video-download-link");
-    dw_link.setAttribute("href", object_data.link);
+    var site_html5_player =
+       this.find_site_html5_player_wrapper(object_data.parent);
 
-    if (!object_data.link)
-    {
-       dw_link.style.setProperty("display", "none", "important");
-    }
+    var toggle_plugin_switch_type = 
+       site_html5_player ? "html5" : "plugin";
 
-    header.appendChild(dw_link);
-
-    // Create HD links
-    if (object_data.hd_links)
-    {
-       var p = 
-           this.compute_preferred_hd_link(object_data.hd_links);
-
-       // No link is calculated. Set to lowest.
-       if (p == null || isNaN(p))
-       {
-           p = object_data.hd_links[object_data.hd_links.length-1];
-       }
-       
-       object_data.preferred_link = p;
-
-       // Set the link for the player and download link.
-       object_data.link = object_data.hd_links[p].url;
-       dw_link.setAttribute("href", object_data.hd_links[p].url);
-    }
-
-    header.appendChild(script_name);
-
-    // Log to web
-    if (this.debug_level && this.log_to == "web")
-    {
-       var log_link  =  this.create_web_log_link();
-
-       log_link.setAttribute("class", 
-                             "linterna-magica-web-log-link");
-       log_link.setAttribute("id",
-                             "linterna-magica-web-log-link-"+id);
-
-       log_link.addEventListener("click",
-                                 this.show_or_hide_web_log, false);
-
-       header.appendChild(log_link);
-    }
-
     object_tag.setAttribute("width", object_data.width);
     object_tag.setAttribute("height", object_data.height);
     object_tag.setAttribute("id","linterna-magica-video-object-"+id);
+    object_tag.setAttribute("class","linterna-magica-video-object");
     object_tag.setAttribute("standby", this._("Loading video..."));
 
     if (object_data.link)
@@ -205,7 +153,13 @@
     }
 
     message.textContent = this._("Waiting for video plugin...");
+    message.style.setProperty("height", object_data.height+"px",
+                                "important");
 
+    message.style.setProperty("width", object_data.width+"px",
+                                "important");
+
+
     param.setAttribute("name", "autoplay");
     // Find if a clip is already playing.
     var started_clip = this.find_started_clip();
@@ -239,17 +193,11 @@
     object_tag.appendChild(param);
 
     object_tag.appendChild(message);
-    container.appendChild(header);
-    container.appendChild(object_tag);
 
+    object_tag_wrapper.appendChild(object_tag);
+    container.appendChild(object_tag_wrapper);
+
     var about_box = this.create_about_box(id);
-    // Fix dailymotion (otherwise it is set to 100%
-    // and it goes out of the "box")
-    about_box.style.setProperty("height",
-                               // Using the exact height with small
-                               // objects hides the homepage link.
-                               (parseInt(object_data.height)-20)+"px",
-                               "important");
     container.appendChild(about_box);
     
     // Mark the object, so it is not processed and chacked after
@@ -273,17 +221,12 @@
 
        if (this.plugin_is_installed && !site_html5_player)
        {
-           // Vimeo with Flash plugin installed crashes on
-           // this.get_flash_video_object(id).nextSibling stating
-           // this.get_flash_video_object(id) is null. This prevents
-           // it.
-           before = ( this.get_flash_video_object(id) &&
-                      this.get_flash_video_object(id).nextSibling) ? 
-               this.get_flash_video_object(id).nextSibling : null;
+           before = this.get_flash_video_object(id) ?
+               this.get_flash_video_object(id) : null;
        }
        else if (site_html5_player)
        {
-           before = site_html5_player.nextSibling;
+           before = site_html5_player;
        }
 
        if (before)
@@ -307,36 +250,45 @@
        }
     }
 
-    if (this.controls)
+    if (this.updates_data)
     {
-       var controls = this.create_controls(object_data);
-       container.appendChild(controls);
+       var update_info = this.create_update_info_box(id, object_data.height);
+       container.appendChild(update_info);
     }
 
-    var dom_object =  this.get_flash_video_object(id);
+    var controls = this.create_controls(object_data);
+    container.appendChild(controls);
 
-    if (!dom_object)
+    if (object_data.hd_links)
     {
-       dom_object = site_html5_player;
+       var hd_links = this.create_hd_links_button(object_data);
+       container.appendChild(hd_links);
     }
 
+    var site_player =  this.get_flash_video_object(id);
+
+    if (!site_player)
+    {
+       site_player = site_html5_player;
+    }
+
     // Remove/hide the object if it is in DOM
     if ((((this.priority.self > this.priority.plugin) &&
          !site_html5_player) || 
         ((this.priority.self > this.priority.html5) &&
          site_html5_player)) &&
-       dom_object &&
+       site_player &&
        // The object is still in DOM some scripts remove it
-       dom_object.parentNode)
+       site_player.parentNode)
     {
-       if(dom_object.nextSibling)
+       if(site_player.nextSibling)
        {
-           object_data.use_sibling = dom_object.nextSibling;
+           object_data.use_sibling = site_player.nextSibling;
        }
 
        if (!site_html5_player)
        {
-           this.hide_flash_video_object(id,dom_object.parentNode);
+           this.hide_flash_video_object(id,site_player.parentNode);
        }
        else 
        {
@@ -371,40 +323,34 @@
        ((this.priority.self < this.priority.html5) && 
         site_html5_player))
     {
-       this.hide_lm_video(object_data.linterna_magica_id);
+       this.hide_lm_interface(object_data.linterna_magica_id);
     }
 
-    // Defaults style fixes applied always.
-    about_box.style.setProperty("overflow", "auto", "important");
-
-    container.style.setProperty("height",
-                               ((parseInt(object_data.height)+26+
-                                 (this.controls ? 24 : 0))+"px"),
-                               "important");
-
     if (object_data.parent)
     {
        object_data.parent.style.setProperty("height",
-                                            (parseInt(object_data.height)+
-                                             26+
-                                             // borders 1px x 2
-                                             2+
-                                             (this.controls ? 24 : 0))+"px",
+                                            "auto",
                                             "important");
     }
-
-    
-
-    var dom_object = this.get_flash_video_object(id);
+   
     // Objects extracted from script usually does not have cloned object
     // For example youtube
-    if (dom_object)
+    if (site_player)
     {
        // Prevent the object to fill the container at 100% (if set)
        // This way the toggle plugin link after the object is not
        // overlaping elements.
-       dom_object.style.setProperty("height", object_data.height+"px",
+       site_player.style.setProperty("height", object_data.height+"px",
                                     "important");
+
+
+       // Render site player above Linterna Mágica's button
+       site_player.style.setProperty("position", "relative", "important");
+       site_player.style.setProperty("z-index", "9999999", "important");
+       site_player.style.setProperty("background-color",
+                                     "black", "important");
+       site_player.style.setProperty("border",
+                                    "1px solid #36393E", "important");
     }
 
     // Prevent the video object to fill the area at 100% and overlap
@@ -451,10 +397,7 @@
        {
            object_data.parent.parentNode.style.
                setProperty("height",
-                           (parseInt(object_data.height)+26+
-                            // borders 1px x 2
-                            2+
-                            (this.controls ? 24 : 0)  )+"px",
+                           "auto",
                            "important");
 
            this.log("LinternaMagica.create_video_object:\n"+
@@ -464,6 +407,7 @@
        }
     }
 
+
     // Init the web controls functions
     // only if Linterna Mágica has priority
     if (this.controls &&
@@ -472,9 +416,18 @@
        this.player.init.apply(this,[id]);
     }
 
-    // Examine the option for updates and check if necessary.
-    this.check_for_updates();
+    // The player name is needed for the this.player.stop function,
+    // which is called when LM is hidden. It is used in the toggle
+    // plugin button's function to stop the audio when LM is not
+    // visible to work-around dual playback. If the video plugin
+    // controls are used the this.player.init function is not called
+    // and the player name is not set. We need to set it manually. 
+    if (!this.controls && !this.get_player_name(id))
+    {
+       this.player.set_player_name.apply(this,[id]);
+    }
 
+
     // Various CSS fixes
     var self = this;
     var val = this.call_site_function_at_position.apply(self,[

Modified: trunk/src/lm_detect_object_in_remote_site.js
===================================================================
--- trunk/src/lm_detect_object_in_remote_site.js        2012-08-18 07:43:35 UTC 
(rev 309)
+++ trunk/src/lm_detect_object_in_remote_site.js        2012-09-09 16:00:52 UTC 
(rev 310)
@@ -180,7 +180,7 @@
     var title = this.
        _("Watch this video at it's original site with Linterna Mágica");
 
-    a.setAttribute("class", "linterna-magica-toggle-plugin");
+    a.setAttribute("class", "linterna-magica-remote-clip-visit-page-button");
     a.setAttribute("title", title + " ("+object_data.remote_site_link+")");
 
     p.appendChild(a);
@@ -195,6 +195,7 @@
     {
        ev.preventDefault();
        var wrapper =  this.parentNode;
+       wrapper.nextSibling.style.removeProperty("top");
        wrapper.parentNode.removeChild(wrapper);
     };
 

Modified: trunk/src/lm_extract_dom_objects.js
===================================================================
--- trunk/src/lm_extract_dom_objects.js 2012-08-18 07:43:35 UTC (rev 309)
+++ trunk/src/lm_extract_dom_objects.js 2012-09-09 16:00:52 UTC (rev 310)
@@ -192,7 +192,7 @@
                var remote_site = 
                    this.create_remote_site_link(object_data);
 
-               var before =  object.nextSibling;
+               var before =  object;
 
                if (before)
                {
@@ -203,6 +203,36 @@
                    object_data.parent.appendChild(remote_site);
                }
 
+               object.style.setProperty("position", "relative", "important");
+               object.style.setProperty("background-color", "black", 
"important");
+               object.style.setProperty("z-index", "9999999", "important");
+               object.style.setProperty("display", "block", "important");
+               object.style.setProperty("border",
+                                             "1px solid #36393E", "important");
+
+               var top = (remote_site.offsetTop - object.offsetTop);
+               var w = this.extract_object_width(object, true);
+               var h = this.extract_object_height(object, true);
+               h = (this.min_remote_object_height > h || h == this.min_height) 
? 
+                   this.min_remote_object_height : h;
+
+               remote_site.style.setProperty("width",
+                                             (w+13)+"px", "important");
+               object.style.setProperty("width", (w-2)+"px", "important");
+
+               object.style.setProperty("top", top+"px", "important");
+               object.style.setProperty("min-height", h+"px", "important");
+
+               object.parentNode.style.setProperty("overflow",
+                                                   "visible", "important");
+
+               object.parentNode.parentNode.
+                   style.setProperty("overflow", 
+                                     "visible", "important");
+               object.parentNode.parentNode.
+                   parentNode.style.setProperty("overflow", "visible",
+                                                "important");
+
                // We only need:
                // * linetrna_magica_id to be set;
                // * object_data.parent to be set;
@@ -305,7 +335,8 @@
 }
 
 // Find the flash object width
-LinternaMagica.prototype.extract_object_width = function(element)
+LinternaMagica.prototype.extract_object_width =
+function(element, dont_force_min)
 {
     if (!/HTML(embed|iframe|object)element/i.test(element))
     {
@@ -318,7 +349,8 @@
     var width = null ;
 
     if (element.hasAttribute("width")
-       && !/\%/.test(element.getAttribute("width")))
+       && !/\%/.test(element.getAttribute("width"))
+       && !isNaN(element.getAttribute("width")))
     {
        width = element.getAttribute("width");
     }
@@ -340,16 +372,17 @@
     }
 
 
-    if (!width)
+    if (!width || (width < this.min_width && !dont_force_min))
     {
-       width = 300;
+       width = this.min_width;
     }
 
     return parseInt(width);
 }
 
 // Find the flash object height
-LinternaMagica.prototype.extract_object_height = function(element)
+LinternaMagica.prototype.extract_object_height =
+function(element, dont_force_min)
 {
     if (!/HTML(embed|iframe|object)element/i.test(element))
     {
@@ -363,7 +396,8 @@
     var height = null ;
 
     if (element.hasAttribute("height")
-       && !/\%/.test(element.getAttribute("height")))
+       && !/\%/.test(element.getAttribute("height"))
+       && !isNaN(element.getAttribute("height")))
     {
        height = element.getAttribute("height");
     }
@@ -392,9 +426,9 @@
        height = element.parentNode.offsetHeight;
     }
 
-    if (!height)
+    if (!height || (height<this.min_height && !dont_force_min))
     {
-       height = 150;
+       height = this.min_height;
     }
 
     return parseInt(height);

Modified: trunk/src/lm_extract_js_scripts.js
===================================================================
--- trunk/src/lm_extract_js_scripts.js  2012-08-18 07:43:35 UTC (rev 309)
+++ trunk/src/lm_extract_js_scripts.js  2012-09-09 16:00:52 UTC (rev 310)
@@ -125,6 +125,19 @@
                this.extract_object_from_script_pokkariplayer();
        }
 
+       if (object_data && object_data.width && object_data.height)
+       {
+           if(object_data.height < this.min_height)
+           {
+               object_data.height = this.min_height;
+           }
+           
+           if (object_data.width < this.min_width)
+           {
+               object_data.width = this.min_width;
+           }
+       }
+
        if(object_data && object_data.video_id && !object_data.link)
        {
            this.log("LinternaMagica.constructor:\n"+

Modified: trunk/src/lm_interface_hd_links.js
===================================================================
--- trunk/src/lm_interface_hd_links.js  2012-08-18 07:43:35 UTC (rev 309)
+++ trunk/src/lm_interface_hd_links.js  2012-09-09 16:00:52 UTC (rev 310)
@@ -3,7 +3,7 @@
 //
 //  This file is part of Linterna Mágica
 //
-//  Copyright (C) 2010, 2011  Ivaylo Valkov <address@hidden>
+//  Copyright (C) 2010, 2011, 2012  Ivaylo Valkov <address@hidden>
 //  Copyright (C) 2010  Anton Katsarov <address@hidden>
 //
 //  The JavaScript code in this page (or file) is free software: you
@@ -77,7 +77,14 @@
 
        // The ticker function stops and deletes the previous
        // timer/interval when there is no acces to the object.
-       this.player.init.apply(this,[id]);
+       if (this.controls)
+       {
+           this.player.init.apply(this,[id]);
+       }
+       else if(!this.controls && !this.get_player_name(id))
+       {
+           this.player.set_player_name.apply(this,[id]);
+       }
 
        var control_id = "linterna-magica-controls-button-play-"+id;
        var play = document.getElementById(control_id);
@@ -216,6 +223,7 @@
 
     var hd_wrapper = document.createElement("div");
     hd_wrapper.setAttribute("id", "linterna-magica-hd-wrapper-"+id);
+    hd_wrapper.setAttribute("class", "linterna-magica-hd-wrapper");
 
     var hd_button = document.createElement("a");
 
@@ -297,3 +305,4 @@
 
     return hd_links;
 }
+

Modified: trunk/src/lm_interface_player_web_buttons.js
===================================================================
--- trunk/src/lm_interface_player_web_buttons.js        2012-08-18 07:43:35 UTC 
(rev 309)
+++ trunk/src/lm_interface_player_web_buttons.js        2012-09-09 16:00:52 UTC 
(rev 310)
@@ -30,217 +30,360 @@
 // Create web controls
 LinternaMagica.prototype.create_controls = function(object_data)
 {
-    var id= object_data.linterna_magica_id;
+    var id = object_data.linterna_magica_id;
+    var controls_wrapper = document.createElement("div");
 
-    var controls = document.createElement("div");
-    controls.setAttribute("class", "linterna-magica-controls");
+    if (this.controls)
+    {
+       // setTimout timers for the volume slider hide function
+       this.volume_slider_timers[id] = new Array();
 
-    var self =this;
+       var controls_time_slider = document.createElement("div");
+       controls_time_slider.setAttribute("class", 
"linterna-magica-controls-time-slider");
+       controls_time_slider.setAttribute("id", 
"linterna-magica-controls-time-slider-wrapper-"+id);
+       controls_time_slider.style.setProperty("width",
+                                              
((parseInt(object_data.width))+"px"),
+                                              "important");
 
-    var started_clip = this.find_started_clip();
+       // User agent sniffing is ugly and not recommended. Is it there a
+       // better way?
+       var mouse_scroll = /WebKit/i.test(navigator.userAgent) ?
+           "mousewheel" : "DOMMouseScroll";
 
-    var play = this.create_play_button(object_data);
+       var time_slider = this.create_time_slider(object_data);
 
-    // Only pause button should be visible on autostart
-    // Auto start only if no other clip is playing.
-    if (this.autostart && started_clip == null)
-    {
-       play.style.setProperty("display", "none", "important");
-    }
+       var time_slider_scroll_function = function(ev)
+       {
+           var el = this;
+           self.time_slider_scroll_event.apply(self, [ev, el]);
+       };
 
-    var play_click_function = function(ev)
-    {
-       var el = this;
-       self.play_button_click_event.apply(self, [ev, el]);
-    };
+       time_slider.addEventListener(mouse_scroll, 
+                                    time_slider_scroll_function, false);
 
-    play.addEventListener("click", play_click_function, false);
-    controls.appendChild(play);
+       var time_slider_click_function =  function(ev)
+       {
+           var el = this;
+           self.time_slider_click_event.apply(self, [ev, el]);
+       };
 
-    var pause = this.create_pause_button(object_data);
+       time_slider.addEventListener("click", time_slider_click_function, 
false);
 
-    // Only play button should be visible if !autostart or another
-    // clip is strated.
-    if (!this.autostart || started_clip !== null)
-    {
-       pause.style.setProperty("display", "none", "important");
+       var time_knob = time_slider.getElementsByTagName("a")[0];
+
+       time_knob.addEventListener("mousedown", function(ev)
+                                  {
+                                      ev.preventDefault();
+                                      // Stop the time ticker
+                                      clearInterval(self.player_timers[id]);
+                                      delete self.player_timers[id];
+
+                                      self.slider_control.apply(self, [ev]);
+                                  }, false);
+
+       controls_time_slider.appendChild(time_slider);
+       
+       controls_wrapper.appendChild(controls_time_slider);
     }
 
-    var pause_click_function = function(ev)
+    var controls = document.createElement("div");
+    controls.setAttribute("class", "linterna-magica-controls");
+    controls.setAttribute("id", "linterna-magica-controls-"+id);
+    controls.style.setProperty("width",
+                            ((parseInt(object_data.width))+"px"),
+                            "important");
+
+    if (this.controls)
     {
-       var el = this;
-       self.pause_button_click_event.apply(self, [ev, el]);
-    };
+       var self = this;
 
-    pause.addEventListener("click", pause_click_function, false);
-    controls.appendChild(pause);
+       var started_clip = this.find_started_clip();
 
-    var stop = this.create_stop_button(object_data);
+       var play = this.create_play_button(object_data);
 
-    var stop_click_function = function(ev)
-    {
-       var el = this;
-       self.stop_button_click_event.apply(self, [ev, el]);
-    };
+       // Only pause button should be visible on autostart
+       // Auto start only if no other clip is playing.
+       if (this.autostart && started_clip == null)
+       {
+           play.style.setProperty("display", "none", "important");
+       }
 
-    stop.addEventListener("click", stop_click_function, false);
-    controls.appendChild(stop);
+       var play_click_function = function(ev)
+       {
+           var el = this;
+           self.play_button_click_event.apply(self, [ev, el]);
+       };
 
-    var time_slider = this.create_time_slider(object_data);
+       play.addEventListener("click", play_click_function, false);
+       controls.appendChild(play);
 
-    // User agent sniffing is ugly and not recommended. Is it there a
-    // better way?
-    var mouse_scroll = /WebKit/i.test(navigator.userAgent) ?
-       "mousewheel" : "DOMMouseScroll";
+       var pause = this.create_pause_button(object_data);
 
-    var time_slider_scroll_function = function(ev)
-    {
-       var el = this;
-       self.time_slider_scroll_event.apply(self, [ev, el]);
-    };
+       // Only play button should be visible if !autostart or another
+       // clip is strated.
+       if (!this.autostart || started_clip !== null)
+       {
+           pause.style.setProperty("display", "none", "important");
+       }
 
-    time_slider.addEventListener(mouse_scroll, 
-                                time_slider_scroll_function, false);
+       var pause_click_function = function(ev)
+       {
+           var el = this;
+           self.pause_button_click_event.apply(self, [ev, el]);
+       };
 
-    var time_slider_click_function =  function(ev)
-    {
-       var el = this;
-       self.time_slider_click_event.apply(self, [ev, el]);
-    };
+       pause.addEventListener("click", pause_click_function, false);
+       controls.appendChild(pause);
 
-    time_slider.addEventListener("click", time_slider_click_function, false);
+       var stop = this.create_stop_button(object_data);
 
-    var time_knob = time_slider.getElementsByTagName("a")[0];
+       var stop_click_function = function(ev)
+       {
+           var el = this;
+           self.stop_button_click_event.apply(self, [ev, el]);
+       };
 
-    time_knob.addEventListener("mousedown", function(ev)
-                              {
-                                  ev.preventDefault();
-                                  // Stop the time ticker
-                                  clearInterval(self.player_timers[id]);
-                                  delete self.player_timers[id];
+       stop.addEventListener("click", stop_click_function, false);
+       controls.appendChild(stop);
 
-                                  self.slider_control.apply(self, [ev]);
-                              }, false);
+       var mute = this.create_mute_button(object_data);
 
-    controls.appendChild(time_slider);
+       var mute_click_function = function(ev)
+       {
+           var el = this;
+           self.mute_button_click_event.apply(self, [ev, el]);
+       };
 
-    var volume_slider  = this.create_volume_slider(object_data);
-    var volume_text = volume_slider.getElementsByTagName("span")[0];
+       mute.addEventListener("click", mute_click_function, false);
 
-    var volume_slider_scroll_function = function(ev)
-    {
-       var el = this;
-       self.volume_slider_scroll_event.apply(self, [ev, el]);
-    };
+       var mute_mouse_over_function = function(ev)
+       {
+           var el = this;
+           var id = el.getAttribute("id").split('-');
+           id = id[id.length-1];
 
-    volume_slider.addEventListener(mouse_scroll,
-                                  volume_slider_scroll_function, false);
+           self.mute_button_mouse_over_event.apply(self, [ev, el]);
 
-    var volume_slider_click_function = function(ev)
+           for(var i=0,l=self.volume_slider_timers[id].length; i<l; i++)
+           {
+               clearTimeout(self.volume_slider_timers[id][i]);
+               self.volume_slider_timers[id].pop(i);
+           }
+
+           el.addEventListener("mouseout", volume_slider_hide_function, false);
+       }
+
+       mute.addEventListener("mouseover", mute_mouse_over_function, false);
+       mute.addEventListener("mousemove", mute_mouse_over_function, false);
+
+       var volume_slider_hide_function = function(ev)
+       {
+           var el = this;
+           var id = el.getAttribute("id").split('-');
+           id = id[id.length-1];
+
+           var volume_slider_hide_timeout_function = function ()
+           {
+               self.volume_slider_hide_event.apply(self, [ev, el]);
+           }
+
+           var time_id = setTimeout(volume_slider_hide_timeout_function, 700);
+           self.volume_slider_timers[id].push(time_id);
+       }
+
+       mute.addEventListener("mouseout", volume_slider_hide_function, false);
+
+       controls.appendChild(mute);
+
+       var volume_slider  = this.create_volume_slider(object_data);
+       var volume_text = volume_slider.getElementsByTagName("span")[0];
+
+       var volume_slider_scroll_function = function(ev)
+       {
+           var el = this;
+           self.volume_slider_scroll_event.apply(self, [ev, el]);
+       };
+
+       volume_slider.addEventListener(mouse_scroll,
+                                      volume_slider_scroll_function, false);
+
+       var volume_slider_click_function = function(ev)
+       {
+           var el = this;
+           self.volume_slider_click_event.apply(self, [ev, el]);
+       };
+
+       volume_slider.addEventListener("click",
+                                      volume_slider_click_function, false);
+
+       volume_slider.addEventListener("mouseover", mute_mouse_over_function, 
false);
+       volume_slider.addEventListener("mousemove", mute_mouse_over_function, 
false);
+
+       volume_slider.addEventListener("mouseout", volume_slider_hide_function, 
false);
+
+       var volume_knob = volume_slider.getElementsByTagName("a")[0];
+
+       volume_knob.addEventListener("mousedown", function(ev)
+                                    {
+                                        ev.preventDefault();
+                                        self.slider_control.apply(self, [ev]);
+                                    }, false);
+
+       controls.appendChild(volume_slider);
+
+       var time_text = document.createElement("span");
+       time_text.style.display = "none";
+       time_text.setAttribute("class", "linterna-magica-controls-slider-text "+
+                              " linterna-magica-controls-time-slider-text");
+       time_text.setAttribute("id", "linterna-magica-controls-"+
+                              "time-slider-text-"+id);
+
+       time_text.textContent="--:--:--";
+
+       controls.appendChild(time_text);
+
+       var fullscreen = this.create_fullscreen_button(object_data);
+
+       var fullscreen_click_function = function(ev)
+       {
+           var el = this;
+           self.fullscreen_button_click_event.apply(self, [ev, el]);
+       };
+       
+       fullscreen.addEventListener("click",
+                                   fullscreen_click_function, false);
+       controls.appendChild(fullscreen);
+    }
+
+    var dw_link = document.createElement("a");
+
+    dw_link.textContent = this._("Download");
+    dw_link.setAttribute("title", this._("Save the video clip"));
+
+    dw_link.setAttribute("id", "linterna-magica-video-download-link-"+id);
+    dw_link.setAttribute("class", "linterna-magica-video-download-link");
+    dw_link.setAttribute("href", object_data.link);
+
+    if (!object_data.link)
     {
-       var el = this;
-       self.volume_slider_click_event.apply(self, [ev, el]);
-    };
+       dw_link.style.setProperty("display", "none", "important");
+    }
 
-    volume_slider.addEventListener("click",
-                                  volume_slider_click_function, false);
+    controls.appendChild(dw_link);
 
-    var volume_knob = volume_slider.getElementsByTagName("a")[0];
+    var site_html5_player =
+       this.find_site_html5_player_wrapper(object_data.parent);
 
-    volume_knob.addEventListener("mousedown", function(ev)
-                                {
-                                    ev.preventDefault();
-                                    self.slider_control.apply(self, [ev]);
-                                }, false);
+    var toggle_plugin_switch_type = 
+       site_html5_player ? "html5" : "plugin";
 
-    controls.appendChild(volume_slider);
+    // If the plugin is not installed this is useless
+    if (this.plugin_is_installed || site_html5_player)
+    {
+       // append before download link (first button in the header)
+       var toggle_plugin = 
+           this.create_toggle_plugin_link(null,id,
+                                          toggle_plugin_switch_type);
 
-    var mute = this.create_mute_button(object_data);
+       controls.appendChild(toggle_plugin);
+    }
 
-    var mute_click_function = function(ev)
+    // Log to web
+    if (this.debug_level && this.log_to == "web")
     {
-       var el = this;
-       self.mute_button_click_event.apply(self, [ev, el]);
-    };
+       var log_link  =  this.create_web_log_link();
 
-    mute.addEventListener("click", mute_click_function, false);
-    controls.appendChild(mute);
+       log_link.setAttribute("class", 
+                             "linterna-magica-web-log-link");
+       log_link.setAttribute("id",
+                             "linterna-magica-web-log-link-"+id);
 
-    var fullscreen = this.create_fullscreen_button(object_data);
+       log_link.addEventListener("click",
+                                 this.show_or_hide_web_log, false);
 
-    var fullscreen_click_function = function(ev)
+       controls.appendChild(log_link);
+    }
+
+    var self = this;
+    var update_notifier = this.create_update_notifier_link(id);
+
+    if (!this.updates_data)
     {
+       update_notifier.style.setProperty("display", "none", "important");
+    }
+
+    var notifier_click_function = function(ev)
+    {
        var el = this;
-       self.fullscreen_button_click_event.apply(self, [ev, el]);
+       self.show_or_hide_update_info.apply(self, [ev, el]);
     };
-                               
-    fullscreen.addEventListener("click",
-                               fullscreen_click_function, false);
-    controls.appendChild(fullscreen);
+    
+    update_notifier.addEventListener("click",
+                                    notifier_click_function,
+                                    false);
 
+    controls.appendChild(update_notifier);
+   
+    // Create HD links
     if (object_data.hd_links)
     {
-       var hd_links = this.create_hd_links_button(object_data);
-       controls.appendChild(hd_links);
+       var p = 
+           this.compute_preferred_hd_link(object_data.hd_links);
 
-       // For RTL pages and LM translations we order the controls
-       // from right to left. 
+       // No link is calculated. Set to lowest.
+       if (p == null || isNaN(p))
+       {
+           p = object_data.hd_links[object_data.hd_links.length-1];
+       }
+       
+       object_data.preferred_link = p;
 
-       // For RTL translations we are using Totem
-       // (LANGUAGE=ar_SA.utf8 totem) for reference. Any RTL LANGUAGE
-       // should do.
+       // Set the link for the player and download link.
+       object_data.link = object_data.hd_links[p].url;
+       dw_link.setAttribute("href", object_data.hd_links[p].url);
+    }
 
-       // For RTL pages it is needed, because otherwise in YouTube
-       // the HD links list is rendered at the right end of the
-       // screen, where it might not be visible.
+    // For RTL pages and LM translations we order the controls
+    // from right to left. 
 
-       if (this.get_document_direction() == "rtl" || 
-           this.languages[this.lang].__direction == "rtl")
-       {
-           controls.setAttribute("dir", "rtl");
+    // For RTL translations we are using Totem
+    // (LANGUAGE=ar_SA.utf8 totem) for reference. Any RTL LANGUAGE
+    // should do.
 
-           var children = controls.childNodes;
+    // For RTL pages it is needed, because otherwise in YouTube
+    // the HD links list is rendered at the right end of the
+    // screen, where it might not be visible.
 
-           var class_b = "linterna-magica-controls-buttons";
-           var class_hs = "linterna-magica-controls-horizontal-slider";
-           var hd_wrapper_id = "linterna-magica-hd-wrapper-"+id;
+    if (this.get_document_direction() == "rtl" || 
+       this.languages[this.lang].__direction == "rtl")
+    {
+       controls.setAttribute("dir", "rtl");
 
-           for(var b=0,l=children.length; b<l; b++)
-           {
-               var child = children[b];
+       var children = controls.childNodes;
 
-               var has_b_class = 
-                   this.object_has_css_class(child, class_b);
+       var class_b = "linterna-magica-controls-buttons";
+       var class_hs = "linterna-magica-controls-horizontal-slider";
 
-               var has_hs_class = 
-                   this.object_has_css_class(child, class_hs);
+       for(var b=0,l=children.length; b<l; b++)
+       {
+           var child = children[b];
 
-               var is_hd_wrapper = (child.hasAttribute("id") && 
-                                    child.getAttribute("id") ==
-                                    hd_wrapper_id) ? true : false;
+           var has_b_class = 
+               this.object_has_css_class(child, class_b);
 
-               if (has_b_class || has_hs_class)
-               {
-                   child.style.setProperty("float", "right", "important");
-               }
+           var has_hs_class = 
+               this.object_has_css_class(child, class_hs);
 
-               if (is_hd_wrapper)
-               {
-                   // HD list
-                   // If the CSS changes the 100.5% value should be
-                   // changed.
-                   child.lastChild.style.setProperty("right",
-                                           "100.5%", "important");
-
-                   // HD switch 
-                   child.firstChild.style.setProperty("float", "right",
-                                                      "important");
-               }
+           if (has_b_class || has_hs_class)
+           {
+               child.style.setProperty("float", "right", "important");
            }
        }
     }
+        
+    controls_wrapper.appendChild(controls);
 
-    return controls;
+    return controls_wrapper;
 }
 
 // Create play button
@@ -394,21 +537,6 @@
     time_slider.setAttribute("id",
                             "linterna-magica-controls-time-slider-"+lm_id);
 
-    // The slider width is calculated from the object width.
-    // 
-    // We have 5 (4) buttons (width + border +padding + margin).
-    // 
-    // Remove the padding, margin, border for each slider (2): 2*x
-    // (padding + border + margin)
-
-    var buttons = object_data.hd_links ? 5 : 4;
-
-    // The time slider uses 3/4 of the space
-    var time_width = parseInt(((object_data.width - (buttons * 21)) * 3/4)-12);
-    time_slider.style.setProperty("width", time_width+"px", "important");
-
-    time_slider.style.setProperty("position", "relative", "important");
-
     var time_knob_move = null;
 
     var doc_dir = this.get_document_direction();
@@ -435,19 +563,6 @@
 
     time_slider.appendChild(time_knob);
 
-    var time_text = document.createElement("span");
-    time_text.style.display = "none";
-    time_text.setAttribute("class", "linterna-magica-controls-slider-text");
-    time_text.setAttribute("id", "linterna-magica-controls-"+
-                          "time-slider-text-"+lm_id);
-
-    time_text.textContent="--:--:--";
-    time_text.style.setProperty("left",
-                               parseInt(time_width/2)+"px",
-                               "important");
-
-    time_slider.appendChild(time_text);
-
     return time_slider;
 }
 
@@ -515,28 +630,14 @@
     var volume_slider = document.createElement("div");
 
     volume_slider.setAttribute("class",
-                              "linterna-magica-controls-horizontal-slider");
+                              "linterna-magica-controls-horizontal-slider "+
+                              "linterna-magica-controls-volume-slider");
     volume_slider.setAttribute("id", "linterna-magica-controls-"+
                               "volume-slider-"+lm_id);
     volume_slider.setAttribute("title", this._("Volume control"));
 
-    // The slider width is calculated from the object width.
-    // 
-    // We have 5 (4) buttons (width + border +padding + margin)
-    // 
-    // Remove the padding, margin, border for each slider (2): 2 * x
-    // (padding + border + margin)
+    volume_slider.style.setProperty("display", "none", "important");
 
-    var buttons = object_data.hd_links ? 5 : 4;
-
-    // The volume slider uses 1/4 of the space
-    var volume_width = parseInt(((object_data.width -
-                                 (buttons * 21)) * 1/4)-12);
-
-    volume_slider.style.setProperty("width",
-                                   volume_width+"px",
-                                   "important");
-
     var volume_knob_move = null;
 
     var doc_dir = this.get_document_direction();
@@ -564,12 +665,10 @@
 
     var volume_text = document.createElement("span");
     volume_text.setAttribute("class",
-                            "linterna-magica-controls-slider-text");
+                            "linterna-magica-controls-slider-text "+
+                           " linterna-magica-controls-volume-slider-text");
     volume_text.setAttribute("id", "linterna-magica-controls-"+
                             "volume-slider-text-"+lm_id);
-    volume_text.style.setProperty("left",
-                                 parseInt(volume_width/3)+"px",
-                                 "important");
 
     volume_text.textContent = "--";
     volume_slider.appendChild(volume_text);
@@ -639,6 +738,30 @@
     return mute;
 }
 
+LinternaMagica.prototype.mute_button_mouse_over_event = function (event, 
element)
+{
+    var self = this;
+    var mute = element;
+
+    // Linterna Magica object id
+    var id = element.getAttribute("id").
+       replace(/linterna-magica-controls-button-mute-/,"");
+
+    var id_string = "linterna-magica-controls-volume-slider-"+id;
+
+    var volume_slider = 
+       document.getElementById(id_string);
+
+
+    if (!volume_slider)
+    {
+       return null;
+    }
+
+    volume_slider.style.removeProperty("display");
+}
+
+
 // The function executed on DOM click event for the mute button
 LinternaMagica.prototype.mute_button_click_event = function (event, element)
 {
@@ -692,6 +815,16 @@
        // muted.
        volume_knob.setAttribute("title",this._("Muted"));
        volume_text.textContent = "0%";
+
+       mute.lm_volume_knob_direction = 
+           volume_knob.style.getPropertyValue('left') ? "left" : "right";
+
+       mute.lm_volume_knob_position =
+           volume_knob.style.getPropertyValue(
+               mute.lm_volume_knob_direction);
+
+       volume_knob.style.setProperty(mute.lm_volume_knob_direction,
+                                     "0px", "important");
     }
     else
     {
@@ -716,9 +849,35 @@
        // cursor is above the volume slider knob and the sound is
        // *not* muted.
        volume_knob.setAttribute("title", this._("Volume control"));
+
+       volume_knob.style.setProperty(mute.lm_volume_knob_direction,
+                                     mute.lm_volume_knob_position,
+                                     "important");
     }
 }
 
+LinternaMagica.prototype.volume_slider_hide_event = function(event, element)
+{
+    if (!element.hasAttribute('id'))
+    {
+       return null;
+    }
+
+    var id = element.getAttribute("id").split('-');
+    id = id[id.length-1];
+
+    var volume_slider = 
+       document.getElementById("linterna-magica-controls-"+
+                               "volume-slider-"+id);
+
+    if (!volume_slider)
+    {
+       return null;
+    }
+
+    volume_slider.style.setProperty("display", "none", "important");
+}
+
 // Create fullscreen button
 LinternaMagica.prototype.create_fullscreen_button = function(object_data)
 {

Modified: trunk/src/lm_interface_toggle_plugin.js
===================================================================
--- trunk/src/lm_interface_toggle_plugin.js     2012-08-18 07:43:35 UTC (rev 
309)
+++ trunk/src/lm_interface_toggle_plugin.js     2012-09-09 16:00:52 UTC (rev 
310)
@@ -58,11 +58,10 @@
        toggle_plugin.textContent = "Linterna Mágica >>";
        toggle_plugin.setAttribute("id", 
                                   "linterna-magica-toggle-plugin-"+id);
-       // Fix link displacement after an object (vbox7 and others)
+
        wrapper = document.createElement("p");
        wrapper.appendChild(toggle_plugin);
-       wrapper.style.setProperty("position", "relative", "important");
-       wrapper.style.setProperty("z-index", "999999", "important");
+       wrapper.setAttribute("class", "linterna-magica-toggle-plugin-wrapper");
     }
     else
     {
@@ -91,7 +90,8 @@
     else
     {
        var flash_mime_type = 
navigator.mimeTypes['application/x-shockwave-flash'];
-       var flash_plugin = flash_mime_type.enabledPlugin.filename;
+       var flash_plugin = flash_mime_type.enabledPlugin ? 
+           flash_mime_type.enabledPlugin.filename : '';
 
        // TRANSLATORS: The tooltip for the buttons that switch
        // between LM and a flash plugin.
@@ -143,11 +143,10 @@
     linterna_magica_id = linterna_magica_id.split("-");
     linterna_magica_id = linterna_magica_id[linterna_magica_id.length-1];
 
-    var video_object =
-       document.getElementById("linterna-magica-video-object-"+
-                               linterna_magica_id);
+    var lm_interface =
+       document.getElementById("linterna-magica-"+linterna_magica_id);
 
-    if (!video_object)
+    if (!lm_interface)
     {
        return null;
     }
@@ -158,10 +157,10 @@
        this.get_flash_video_object(linterna_magica_id,
                                    // The parent of the div holding
                                    // Linterna Mágica
-                                   video_object.parentNode.parentNode);
+                                   lm_interface.parentNode);
     if (!site_player)
     {
-       html5_parent = video_object.parentNode.parentNode;
+       html5_parent = lm_interface.parentNode;
        site_player = 
            this.find_site_html5_player_wrapper(html5_parent);
 
@@ -174,7 +173,7 @@
     // Visible flash, hidden video object. Display has value (none)
     // when the object is hidden.
     if (!site_player.style.getPropertyValue("display") &&
-       video_object.parentNode.style.getPropertyValue("display"))
+       lm_interface.style.getPropertyValue("display"))
     {
        this.log("LinternaMagica.toggle_plugin:\n"+
                 "Replacing/hiding swf object (id:"+
@@ -192,7 +191,9 @@
            this.hide_site_html5_player(html5_parent);
        }
 
-       this.show_lm_video(linterna_magica_id);
+       lm_interface.parentNode.style.setProperty("height",
+                                                 "auto", "important");
+       this.show_lm_interface(linterna_magica_id);
 
        // Init the web controls
        if (this.controls)
@@ -201,12 +202,12 @@
        }
        
        // Hide the external toggle plugin link
-       var ext_toggle_wrapper = video_object.parentNode.nextSibling;
+       var ext_toggle_wrapper = lm_interface.nextSibling;
        ext_toggle_wrapper.style.setProperty("display", "none", "important");
     }
     // Hidden flash, visible video object. Display has value (none)
     // when the object is hidden.
-    else if (!video_object.parentNode.style.getPropertyValue("display") &&
+    else if (!lm_interface.style.getPropertyValue("display") &&
             site_player.style.getPropertyValue("display"))
     {
        this.log("LinternaMagica.toggle_plugin:\n"+
@@ -225,10 +226,28 @@
            this.show_site_html5_player(html5_parent);
        }
 
-       this.hide_lm_video(linterna_magica_id);
+       var about = document.getElementById("linterna-magica-about-box-"+
+                                           linterna_magica_id);
+
+       var update_info =
+           document.getElementById("linterna-magica-update-info-box-"+
+                                   linterna_magica_id);
+
+       if (about && !about.style.display)
+       {
+           this.about(null, about);
+       }
+
+       if (update_info && !update_info.style.display)
+       {
+           this.show_or_hide_update_info(null, update_info);
+       }
+
+       lm_interface.parentNode.style.removeProperty("height");
+       this.hide_lm_interface(linterna_magica_id);
        
        // External toggle plugin link
-       var ext_toggle_wrapper = video_object.parentNode.nextSibling;
+       var ext_toggle_wrapper = lm_interface.nextSibling;
        ext_toggle_wrapper.style.removeProperty("display");
     }
 }

Modified: trunk/src/lm_player_button_functions.js
===================================================================
--- trunk/src/lm_player_button_functions.js     2012-08-18 07:43:35 UTC (rev 
309)
+++ trunk/src/lm_player_button_functions.js     2012-09-09 16:00:52 UTC (rev 
310)
@@ -283,7 +283,7 @@
     time.string = (hour_pos ?
                   (hour_pos+":") : "")+
        (min_pos+":")+
-       ((sec_pos<10)?"0"+sec_pos:sec_pos) +"/"+
+       ((sec_pos<10)?"0"+sec_pos:sec_pos) +" / "+
        (hour_dur ? (hour_dur+":") : "") +
        (min_dur+":")+
        ((sec_dur<10)?"0"+sec_dur:sec_dur);
@@ -370,7 +370,10 @@
     }
     else if (/vlc/i.test(player_name))
     {
-       video_object.playlist.stop();
+       if (video_object.playlist)
+       {
+           video_object.playlist.stop();
+       }
     }
     else if (/xine/i.test(player_name))
     {

Modified: trunk/src/lm_video_and_flash_objects_helper_functions.js
===================================================================
--- trunk/src/lm_video_and_flash_objects_helper_functions.js    2012-08-18 
07:43:35 UTC (rev 309)
+++ trunk/src/lm_video_and_flash_objects_helper_functions.js    2012-09-09 
16:00:52 UTC (rev 310)
@@ -125,24 +125,52 @@
 }
 
 // Show the video object and the interface
-LinternaMagica.prototype.show_lm_video = function(linterna_magica_id)
+LinternaMagica.prototype.show_lm_interface = function(linterna_magica_id)
 {
-    var lm = this.get_video_object(linterna_magica_id).parentNode;
+    var lm_interface = document.getElementById("linterna-magica-"+
+                                              linterna_magica_id);
+    this.__show_lm(lm_interface);
+}
 
-    if (!lm)
+// Hide the video object and the interface
+LinternaMagica.prototype.hide_lm_interface = function(linterna_magica_id)
+{
+    var lm_interface = document.getElementById("linterna-magica-"+
+                                              linterna_magica_id);
+    this.__hide_lm(lm_interface, linterna_magica_id);
+}
+
+// Hide the video object and the interface
+LinternaMagica.prototype.hide_lm_video_object = function(linterna_magica_id)
+{
+    var video_object = document.getElementById("linterna-magica-"+
+                                              "video-object-wrapper-"+
+                                              linterna_magica_id);
+    this.__hide_lm(video_object, linterna_magica_id);
+}
+
+// Show the video object
+LinternaMagica.prototype.show_lm_video_object = function(linterna_magica_id)
+{
+    var video_object = document.getElementById("linterna-magica-"+
+                                              "video-object-wrapper-"+
+                                              linterna_magica_id);
+    this.__show_lm(video_object);
+}
+
+LinternaMagica.prototype.__show_lm = function(element)
+{
+    if (!element)
     {
        return null;
     }
 
-    lm.style.removeProperty("display");
+    element.style.removeProperty("display");
 }
 
-// Hide the video object and the interface
-LinternaMagica.prototype.hide_lm_video = function(linterna_magica_id)
+LinternaMagica.prototype.__hide_lm = function(element, linterna_magica_id)
 {
-    var lm = this.get_video_object(linterna_magica_id).parentNode;
-
-    if (!lm)
+    if (!element)
     {
        return null;
     }
@@ -150,9 +178,10 @@
     var self = this;
     this.player.stop.apply(self, [linterna_magica_id]);
 
-    lm.style.setProperty("display", "none", "important");
+    element.style.setProperty("display", "none", "important");
 }
 
+
 // Show the flash video object
 LinternaMagica.prototype.show_flash_video_object =
 function(linterna_magica_id,parent)
@@ -338,7 +367,7 @@
 // Hide the HTML5 player wrapper found in the parent element.
 LinternaMagica.prototype.hide_site_html5_player =
 function(parent)
-{    
+{
     var html5_player =
        this.find_site_html5_player_wrapper(parent);
 




reply via email to

[Prev in Thread] Current Thread [Next in Thread]