git.sesse.net Git - vlc/blob - share/http/js/functions.js

   1 /*****************************************************************************
   2  * functions.js: VLC media player web interface
   3  *****************************************************************************
   4  * Copyright (C) 2005-2006 the VideoLAN team
   5  * $Id$
   6  *
   7  * Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
   8  *
   9  * This program is free software; you can redistribute it and/or modify
  10  * it under the terms of the GNU General Public License as published by
  11  * the Free Software Foundation; either version 2 of the License, or
  12  * (at your option) any later version.
  13  *
  14  * This program is distributed in the hope that it will be useful,
  15  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  16  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  17  * GNU General Public License for more details.
  18  *
  19  * You should have received a copy of the GNU General Public License
  20  * along with this program; if not, write to the Free Software
  21  * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
  22  *****************************************************************************/
  23
  24 /**********************************************************************
  25  * Global variables
  26  *********************************************************************/
  27
  28 var old_time = 0;
  29 var pl_cur_id;
  30
  31 /**********************************************************************
  32  * Slider functions
  33  *********************************************************************/
  34
  35 var slider_mouse_down = 0;
  36 var slider_dx = 0;
  37
  38 /* findPosX() from http://www.quirksmode.rg/js/indpos.html */
  39 function findPosX(obj)
  40 {
  41     var curleft = 0;
  42     if (obj.offsetParent)
  43     {
  44         while (obj.offsetParent)
  45         {
  46             curleft += obj.offsetLeft
  47             obj = obj.offsetParent;
  48         }
  49     }
  50     else if (obj.x)
  51         curleft += obj.x;
  52     return curleft;
  53 }
  54
  55 function slider_seek( e, bar )
  56 {
  57     seek(Math.floor(( e.clientX + document.body.scrollLeft - findPosX( bar )) / 4)+"%25");
  58 }
  59 function slider_down( e, point )
  60 {
  61     slider_mouse_down = 1;
  62     slider_dx = e.clientX - findPosX( point );
  63 }
  64 function slider_up( e, bar )
  65 {
  66     slider_mouse_down = 0;
  67     /* slider_seek( e, bar ); */
  68 }
  69 function slider_move( e, bar )
  70 {
  71     if( slider_mouse_down == 1 )
  72     {
  73         var slider_position  = Math.floor( e.clientX - slider_dx + document.body.scrollLeft - findPosX( bar ));
  74         document.getElementById( 'main_slider_point' ).style.left = slider_position+"px";
  75         slider_seek( e, bar );
  76     }
  77 }
  78
  79 /**********************************************************************
  80  * Misc utils
  81  *********************************************************************/
  82
  83 /* XMLHttpRequest wrapper */
  84 function loadXMLDoc( url, callback )
  85 {
  86   // branch for native XMLHttpRequest object
  87   if ( window.XMLHttpRequest )
  88   {
  89     req = new XMLHttpRequest();
  90     req.onreadystatechange = callback;
  91     req.open( "GET", url, true );
  92     req.send( null );
  93   // branch for IE/Windows ActiveX version
  94   }
  95   else if ( window.ActiveXObject )
  96   {
  97     req = new ActiveXObject( "Microsoft.XMLHTTP" );
  98     if ( req )
  99     {
 100       req.onreadystatechange = callback;
 101       req.open( "GET", url, true );
 102       req.send();
 103     }
 104   }
 105 }
 106
 107 /* fomat time in second as hh:mm:ss */
 108 function format_time( s )
 109 {
 110     var hours = Math.floor(s/3600);
 111     var minutes = Math.floor((s/60)%60);
 112     var seconds = Math.floor(s%60);
 113     if( hours < 10 ) hours = "0"+hours;
 114     if( minutes < 10 ) minutes = "0"+minutes;
 115     if( seconds < 10 ) seconds = "0"+seconds;
 116     return hours+":"+minutes+":"+seconds;
 117 }
 118
 119 /* delete all a tag's children and add a text child node */
 120 function set_text( id, val )
 121 {
 122     var elt = document.getElementById( id );
 123     while( elt.hasChildNodes() )
 124         elt.removeChild( elt.firstChild );
 125     elt.appendChild( document.createTextNode( val ) );
 126 }
 127
 128 /* set item's 'element' attribute to value */
 129 function set_css( item, element, value )
 130 {
 131     for( var j = 0; j < document.styleSheets.length; j++ )
 132     {
 133         var cssRules = document.styleSheets[j].cssRules;
 134         if( !cssRules ) cssRules = document.styleSheets[j].rules;
 135         for( var i = 0; i < cssRules.length; i++)
 136         {
 137             if( cssRules[i].selectorText == item )
 138             {
 139                 if( cssRules[i].style.setProperty )
 140                     cssRules[i].style.setProperty( element, value, null );
 141                 else
 142                     cssRules[i].style.setAttribute( toCamelCase( element ), value );
 143                 return;
 144             }
 145         }
 146     }
 147 }
 148
 149 /* get item's 'element' attribute */
 150 function get_css( item, element )
 151 {
 152     for( var j = 0; j < document.styleSheets.length; j++ )
 153     {
 154         var cssRules = document.styleSheets[j].cssRules;
 155         if( !cssRules ) cssRules = document.styleSheets[j].rules;
 156         for( var i = 0; i < cssRules.length; i++)
 157         {
 158             if( cssRules[i].selectorText == item )
 159             {
 160                 if( cssRules[i].style.getPropertyValue )
 161                     return cssRules[i].style.getPropertyValue( element );
 162                 else
 163                     return cssRules[i].style.getAttribute( toCamelCase( element ) );
 164             }
 165         }
 166     }
 167 }
 168
 169 function toggle_show( id )
 170 {
 171     var element = document.getElementById( id );
 172     if( element.style.display == 'block' || element.style.display == '' )
 173     {
 174         element.style.display = 'none';
 175     }
 176     else
 177     {
 178         element.style.display = 'block';
 179     }
 180 }
 181 function toggle_show_node( id )
 182 {
 183     var element = document.getElementById( 'pl_'+id );
 184     var img = document.getElementById( 'pl_img_'+id );
 185     if( element.style.display == 'block' || element.style.display == '' )
 186     {
 187         element.style.display = 'none';
 188         img.setAttribute( 'src', 'images/plus.png' );
 189         img.setAttribute( 'alt', '[+]' );
 190     }
 191     else
 192     {
 193         element.style.display = 'block';
 194         img.setAttribute( 'src', 'images/minus.png' );
 195         img.setAttribute( 'alt', '[-]' );
 196     }
 197 }
 198
 199 function show( id ){ document.getElementById( id ).style.display = 'block'; }
 200 function showinline( id ){ document.getElementById( id ).style.display = 'inline'; }
 201
 202 function hide( id ){ document.getElementById( id ).style.display = 'none'; }
 203
 204 function checked( id ){ return document.getElementById( id ).checked; }
 205
 206 function value( id ){ return document.getElementById( id ).value; }
 207
 208 function setclass( obj, value )
 209 {
 210     obj.setAttribute( 'class', value ); /* Firefox */
 211     obj.setAttribute( 'className', value ); /* IE */
 212 }
 213
 214 function radio_value( name )
 215 {
 216     var radio = document.getElementsByName( name );
 217     for( var i = 0; i < radio.length; i++ )
 218     {
 219         if( radio[i].checked )
 220         {
 221             return radio[i].value;
 222         }
 223     }
 224     return "";
 225 }
 226
 227 function check_and_replace_int( id, val )
 228 {
 229     var objRegExp = /^\d+$/;
 230     if( value( id ) != ''
 231         && ( !objRegExp.test( value( id ) )
 232              || parseInt( value( id ) ) < 1 ) )
 233         return document.getElementById( id ).value = val;
 234     return document.getElementById( id ).value;
 235 }
 236
 237 function addslashes( str ){ return str.replace(/\'/g, '\\\''); }
 238 function escapebackslashes( str ){ return str.replace(/\\/g, '\\\\'); }
 239
 240 function toCamelCase( str )
 241 {
 242     str = str.split( '-' );
 243     var cml = str[0];
 244     for( var i=1; i<str.length; i++)
 245         cml += str[i].charAt(0).toUpperCase()+str[i].substring(1);
 246     return cml;
 247 }
 248
 249 function disable( id ){ document.getElementById( id ).disabled = true; }
 250
 251 function enable( id ){ document.getElementById( id ).disabled = false; }
 252
 253 function button_over( element ){ element.style.border = "1px solid #000"; }
 254
 255 function button_out( element ){ element.style.border = "1px solid #fff"; }
 256 function button_out_menu( element ){ element.style.border = "1px solid transparent"; }
 257
 258 function show_menu( id ){ document.getElementById(id).style.display = 'block'; }
 259 function hide_menu( id ){ document.getElementById(id).style.display = 'none'; }
 260
 261 /* toggle show help under the buttons */
 262 function toggle_btn_text()
 263 {
 264     if( get_css( '.btn_text', 'display' ) == 'none' )
 265     {
 266         set_css( '.btn_text', 'display', 'block' );
 267     }
 268     else
 269     {
 270         set_css( '.btn_text', 'display', 'none' );
 271     }
 272 }
 273
 274 function clear_children( elt )
 275 {
 276     if( elt )
 277         while( elt.hasChildNodes() )
 278             elt.removeChild( elt.firstChild );
 279 }
 280
 281 /**********************************************************************
 282  * Interface actions
 283  *********************************************************************/
 284 /* input actions */
 285 function in_play()
 286 {
 287     var input = value('input_mrl');
 288     if( value('sout_mrl') != '' )
 289         input += ' '+value('sout_mrl');
 290     var url = 'requests/status.xml?command=in_play&input='+encodeURIComponent( addslashes(escapebackslashes(input)) );
 291     loadXMLDoc( url, parse_status );
 292     setTimeout( 'update_playlist()', 1000 );
 293 }
 294 function in_enqueue()
 295 {
 296     var input = value('input_mrl');
 297     if( value('sout_mrl') != '' )
 298         input += ' '+value('sout_mrl');
 299     var url = 'requests/status.xml?command=in_enqueue&input='+encodeURIComponent( addslashes(escapebackslashes(input)) );
 300     loadXMLDoc( url, parse_status );
 301     setTimeout( 'update_playlist()', 1000 );
 302 }
 303
 304 /* playlist actions */
 305 function pl_play( id )
 306 {
 307     loadXMLDoc( 'requests/status.xml?command=pl_play&id='+id, parse_status );
 308     pl_cur_id = id;
 309     setTimeout( 'update_playlist()', 1000 );
 310 }
 311 function pl_pause()
 312 {
 313     loadXMLDoc( 'requests/status.xml?command=pl_pause&id='+pl_cur_id, parse_status );
 314 }
 315 function pl_stop()
 316 {
 317     loadXMLDoc( 'requests/status.xml?command=pl_stop', parse_status );
 318     setTimeout( 'update_playlist()', 1000 );
 319 }
 320 function pl_next()
 321 {
 322     loadXMLDoc( 'requests/status.xml?command=pl_next', parse_status );
 323     setTimeout( 'update_playlist()', 1000 );
 324 }
 325 function pl_previous()
 326 {
 327     loadXMLDoc( 'requests/status.xml?command=pl_previous', parse_status );
 328     setTimeout( 'update_playlist()', 1000 );
 329 }
 330 function pl_delete( id )
 331 {
 332     loadXMLDoc( 'requests/status.xml?command=pl_delete&id='+id, parse_status );
 333     setTimeout( 'update_playlist()', 1000 );
 334 }
 335 function pl_empty()
 336 {
 337     loadXMLDoc( 'requests/status.xml?command=pl_empty', parse_status );
 338     setTimeout( 'update_playlist()', 1000 );
 339 }
 340 function pl_sort( sort, order )
 341 {
 342     loadXMLDoc( 'requests/status.xml?command=pl_sort&id='+order+'&val='+sort, parse_status );
 343     setTimeout( 'update_playlist()', 1000 );
 344 }
 345 function pl_shuffle()
 346 {
 347     loadXMLDoc( 'requests/status.xml?command=pl_random', parse_status );
 348     setTimeout( 'update_playlist()', 1000 );
 349 }
 350 function pl_loop()
 351 {
 352     loadXMLDoc( 'requests/status.xml?command=pl_loop', parse_status );
 353 }
 354 function pl_repeat()
 355 {
 356     loadXMLDoc( 'requests/status.xml?command=pl_repeat', parse_status );
 357 }
 358 function pl_sd( value )
 359 {
 360     loadXMLDoc( 'requests/status.xml?command=pl_sd&val='+value, parse_status );
 361 }
 362
 363 /* misc actions */
 364 function volume_down()
 365 {
 366     loadXMLDoc( 'requests/status.xml?command=volume&val=-20', parse_status );
 367 }
 368 function volume_up()
 369 {
 370     loadXMLDoc( 'requests/status.xml?command=volume&val=%2B20', parse_status );
 371 }
 372 function seek( pos )
 373 {
 374     loadXMLDoc( 'requests/status.xml?command=seek&val='+pos, parse_status );
 375 }
 376 function fullscreen()
 377 {
 378     loadXMLDoc( 'requests/status.xml?command=fullscreen', parse_status );
 379 }
 380 function snapshot()
 381 {
 382     loadXMLDoc( 'requests/status.xml?command=snapshot', parse_status );
 383 }
 384 function hotkey( str )
 385 {
 386     /* Use hotkey name (without the "key-" part) as the argument to simulate a hotkey press */
 387     loadXMLDoc( 'requests/status.xml?command=key&val='+str, parse_status );
 388 }
 389 function update_status()
 390 {
 391     loadXMLDoc( 'requests/status.xml', parse_status );
 392 }
 393 function update_playlist()
 394 {
 395     loadXMLDoc( 'requests/playlist.xml', parse_playlist );
 396 }
 397
 398 /**********************************************************************
 399  * Parse xml replies to XMLHttpRequests
 400  *********************************************************************/
 401 /* parse request/status.xml */
 402 function parse_status()
 403 {
 404     if( req.readyState == 4 )
 405     {
 406         if( req.status == 200 )
 407         {
 408             var status = req.responseXML.documentElement;
 409             var timetag = status.getElementsByTagName( 'time' );
 410             if( timetag.length > 0 )
 411             {
 412                 var new_time = timetag[0].firstChild.data;
 413             }
 414             else
 415             {
 416                 new_time = old_time;
 417             }
 418             var lengthtag = status.getElementsByTagName( 'length' );
 419             var length;
 420             if( lengthtag.length > 0 )
 421             {
 422                 length = lengthtag[0].firstChild.data;
 423             }
 424             else
 425             {
 426                 length = 0;
 427             }
 428             var slider_position;
 429             positiontag = status.getElementsByTagName( 'position' );
 430             if( length < 100 && positiontag.length > 0 )
 431             {
 432                 slider_position = ( positiontag[0].firstChild.data * 4 ) + "px";
 433             }
 434             else if( length > 0 )
 435             {
 436                 /* this is more precise if length > 100 */
 437                 slider_position = Math.floor( ( new_time * 400 ) / length ) + "px";
 438             }
 439             else
 440             {
 441                 slider_position = 0;
 442             }
 443             if( old_time > new_time )
 444                 setTimeout('update_playlist()',50);
 445             old_time = new_time;
 446             set_text( 'time', format_time( new_time ) );
 447             set_text( 'length', format_time( length ) );
 448             if( status.getElementsByTagName( 'volume' ).length != 0 )
 449                 set_text( 'volume', Math.floor(status.getElementsByTagName( 'volume' )[0].firstChild.data/5.12)+'%' );
 450             var statetag = status.getElementsByTagName( 'state' );
 451             if( statetag.length > 0 )
 452             {
 453                 set_text( 'state', statetag[0].firstChild.data );
 454             }
 455             else
 456             {
 457                 set_text( 'state', '(?)' );
 458             }
 459             if( slider_mouse_down == 0 )
 460             {
 461                 document.getElementById( 'main_slider_point' ).style.left = slider_position;
 462             }
 463             var statustag = status.getElementsByTagName( 'state' );
 464             if( statustag.length > 0 ? statustag[0].firstChild.data == "playing" : 0 )
 465             {
 466                 document.getElementById( 'btn_pause_img' ).setAttribute( 'src', 'images/pause.png' );
 467                 document.getElementById( 'btn_pause_img' ).setAttribute( 'alt', 'Pause' );
 468                 document.getElementById( 'btn_pause' ).setAttribute( 'title', 'Pause' );
 469             }
 470             else
 471             {
 472                 document.getElementById( 'btn_pause_img' ).setAttribute( 'src', 'images/play.png' );
 473                 document.getElementById( 'btn_pause_img' ).setAttribute( 'alt', 'Play' );
 474                 document.getElementById( 'btn_pause' ).setAttribute( 'title', 'Play' );
 475             }
 476
 477             var randomtag = status.getElementsByTagName( 'random' );
 478             if( randomtag.length > 0 ? randomtag[0].firstChild.data == "1" : 0)
 479                 setclass( document.getElementById( 'btn_shuffle'), 'on' );
 480             else
 481                 setclass( document.getElementById( 'btn_shuffle'), 'off' );
 482
 483             var looptag = status.getElementsByTagName( 'loop' );
 484             if( looptag.length > 0 ? looptag[0].firstChild.data == "1" : 0)
 485                 setclass( document.getElementById( 'btn_loop'), 'on' );
 486             else
 487                 setclass( document.getElementById( 'btn_loop'), 'off' );
 488
 489             var repeattag = status.getElementsByTagName( 'repeat' );
 490             if( repeattag.length > 0 ? repeattag[0].firstChild.data == "1" : 0 )
 491                 setclass( document.getElementById( 'btn_repeat'), 'on' );
 492             else
 493                 setclass( document.getElementById( 'btn_repeat'), 'off' );
 494
 495             var tree = document.createElement( "ul" );
 496             var categories = status.getElementsByTagName( 'category' );
 497             var i;
 498             for( i = 0; i < categories.length; i++ )
 499             {
 500                 var item = document.createElement( "li" );
 501                 item.appendChild( document.createTextNode( categories[i].getAttribute( 'name' ) ) );
 502                 var subtree = document.createElement( "dl" );
 503                 var infos = categories[i].getElementsByTagName( 'info' );
 504                 var j;
 505                 for( j = 0; j < infos.length; j++ )
 506                 {
 507                     var subitem = document.createElement( "dt" );
 508                     subitem.appendChild( document.createTextNode( infos[j].getAttribute( 'name' ) ) );
 509                     subtree.appendChild( subitem );
 510                     if( infos[j].hasChildNodes() )
 511                     {
 512                         var subitem = document.createElement( "dd" );
 513                         subitem.appendChild( document.createTextNode( infos[j].firstChild.data ) );
 514                         subtree.appendChild( subitem );
 515                     }
 516                 }
 517                 item.appendChild( subtree );
 518                 tree.appendChild( item );
 519             }
 520             var infotree = document.getElementById('infotree' );
 521             clear_children( infotree );
 522             infotree.appendChild( tree );
 523
 524         }
 525         else
 526         {
 527             /*alert( 'Error! HTTP server replied: ' + req.status );*/
 528         }
 529     }
 530 }
 531
 532 /* parse playlist.xml */
 533 function parse_playlist()
 534 {
 535     if( req.readyState == 4 )
 536     {
 537         if( req.status == 200 )
 538         {
 539             var answer = req.responseXML.documentElement;
 540             var playtree = document.getElementById( 'playtree' );
 541             var pos = document.createElement( "div" );
 542             var pos_top = pos;
 543             var elt = answer.firstChild;
 544
 545             pl_cur_id = 0;  /* changed to the current id is there actually
 546                              * is a current id */
 547             while( elt )
 548             {
 549                 if( elt.nodeName == "node" )
 550                 {
 551                     if( pos.hasChildNodes() )
 552                         pos.appendChild( document.createElement( "br" ) );
 553                     var nda = document.createElement( 'a' );
 554                     nda.setAttribute( 'href', 'javascript:toggle_show_node(\''+elt.getAttribute( 'id' )+'\');' );
 555                     var ndai = document.createElement( 'img' );
 556                     ndai.setAttribute( 'src', 'images/minus.png' );
 557                     ndai.setAttribute( 'alt', '[-]' );
 558                     ndai.setAttribute( 'id', 'pl_img_'+elt.getAttribute( 'id' ) );
 559                     nda.appendChild( ndai );
 560                     pos.appendChild( nda );
 561                     pos.appendChild( document.createTextNode( ' ' + elt.getAttribute( 'name' ) ) );
 562
 563                     if( elt.getAttribute( 'ro' ) == 'rw' )
 564                     {
 565                         pos.appendChild( document.createTextNode( ' ' ) );
 566                         var del = document.createElement( "a" );
 567                         del.setAttribute( 'href', 'javascript:pl_delete('+elt.getAttribute( 'id' )+')' );
 568                             var delimg = document.createElement( "img" );
 569                             delimg.setAttribute( 'src', 'images/delete_small.png' );
 570                             delimg.setAttribute( 'alt', '(delete)' );
 571                         del.appendChild( delimg );
 572                         pos.appendChild( del );
 573                     }
 574
 575                     var nd = document.createElement( "div" );
 576                     setclass( nd, 'pl_node' );
 577                     nd.setAttribute( 'id', 'pl_'+elt.getAttribute( 'id' ) );
 578                     pos.appendChild( nd );
 579                 }
 580                 else if( elt.nodeName == "leaf" )
 581                 {
 582                     if( pos.hasChildNodes() )
 583                     pos.appendChild( document.createElement( "br" ) );
 584                     var pl = document.createElement( "a" );
 585                     setclass( pl, 'pl_leaf' );
 586                     pl.setAttribute( 'href', 'javascript:pl_play('+elt.getAttribute( 'id' )+');' );
 587                     pl.setAttribute( 'id', 'pl_'+elt.getAttribute( 'id' ) );
 588                     if( elt.getAttribute( 'current' ) == 'current' )
 589                     {
 590                         pl.style.fontWeight = 'bold';
 591                         var nowplaying = document.getElementById( 'nowplaying' );
 592                         clear_children( nowplaying );
 593                         nowplaying.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
 594                         pl.appendChild( document.createTextNode( '* '));
 595                         pl_cur_id = elt.getAttribute( 'id' );
 596                     }
 597                     pl.setAttribute( 'title', elt.getAttribute( 'uri' ));
 598                     pl.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
 599                     var duration = elt.getAttribute( 'duration' );
 600                     if( duration > 0 )
 601                         pl.appendChild( document.createTextNode( " (" + format_time( elt.getAttribute( 'duration' ) / 1000000 ) + ")" ) );
 602                     pos.appendChild( pl );
 603
 604                     if( elt.getAttribute( 'ro' ) == 'rw' )
 605                     {
 606                         pos.appendChild( document.createTextNode( ' ' ) );
 607                         var del = document.createElement( "a" );
 608                         del.setAttribute( 'href', 'javascript:pl_delete('+elt.getAttribute( 'id' )+')' );
 609                             var delimg = document.createElement( "img" );
 610                             delimg.setAttribute( 'src', 'images/delete_small.png' );
 611                             delimg.setAttribute( 'alt', '(delete)' );
 612                         del.appendChild( delimg );
 613                         pos.appendChild( del );
 614                     }
 615                 }
 616                 if( elt.firstChild )
 617                 {
 618                     elt = elt.firstChild;
 619                     pos = pos.lastChild;
 620                 }
 621                 else if( elt.nextSibling )
 622                 {
 623                     elt = elt.nextSibling;
 624                     pos = pos;
 625                 }
 626                 else
 627                 {
 628                     while( ! elt.parentNode.nextSibling )
 629                     {
 630                         elt = elt.parentNode;
 631                         if( ! elt.parentNode ) break;
 632                     }
 633                     if( ! elt.parentNode ) break;
 634                     elt = elt.parentNode.nextSibling;
 635                     pos = pos.parentNode;
 636                 }
 637             }
 638             clear_children( playtree );
 639             playtree.appendChild( pos_top );
 640         }
 641         else
 642         {
 643             /*alert( 'Error! HTTP server replied: ' + req.status );*/
 644         }
 645     }
 646 }
 647
 648 /* parse browse.xml */
 649 function parse_browse_dir( )
 650 {
 651     if( req.readyState == 4 )
 652     {
 653         if( req.status == 200 )
 654         {
 655             var answer = req.responseXML.documentElement;
 656             if( !answer ) return;
 657             var browser = document.getElementById( 'browser' );
 658             var pos = document.createElement( "div" );
 659             var elt = answer.firstChild;
 660             while( elt )
 661             {
 662                 if( elt.nodeName == "element" )
 663                 {
 664                     var item = document.createElement( "a" );
 665                     setclass( item, 'browser' );
 666                     if( elt.getAttribute( 'type' ) == 'directory' )
 667                     {
 668                         item.setAttribute( 'href', 'javascript:browse_dir(\''+addslashes(escapebackslashes(elt.getAttribute( 'path' )))+'\');');
 669                     }
 670                     else
 671                     {
 672                         item.setAttribute( 'href', 'javascript:browse_path(\''+addslashes(escapebackslashes(elt.getAttribute( 'path' )))+'\');' );
 673                     }
 674                     item.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
 675                     pos.appendChild( item );
 676                     if( elt.getAttribute( 'type' ) == 'directory' )
 677                     {
 678                         pos.appendChild( document.createTextNode( ' ' ) );
 679                         var item = document.createElement( "a" );
 680                         setclass( item, 'browser' );
 681                         item.setAttribute( 'href', 'javascript:browse_path(\''+addslashes(escapebackslashes(elt.getAttribute( 'path' )))+'\');');
 682                         item.appendChild( document.createTextNode( '(select)' ) );
 683                         pos.appendChild( item );
 684                     }
 685                     pos.appendChild( document.createElement( "br" ) );
 686                 }
 687                 elt = elt.nextSibling;
 688             }
 689             clear_children( browser );
 690             browser.appendChild( pos );
 691         }
 692         else
 693         {
 694             /*alert( 'Error! HTTP server replied: ' + req.status );*/
 695         }
 696     }
 697 }
 698
 699 /**********************************************************************
 700  * Input dialog functions
 701  *********************************************************************/
 702 function hide_input( )
 703 {
 704     document.getElementById( 'input_file' ).style.display = 'none';
 705     document.getElementById( 'input_disc' ).style.display = 'none';
 706     document.getElementById( 'input_network' ).style.display = 'none';
 707     document.getElementById( 'input_fake' ).style.display = 'none';
 708 }
 709
 710 /* update the input MRL using data from the input file helper */
 711 /* FIXME ... subs support */
 712 function update_input_file()
 713 {
 714     var mrl = document.getElementById( 'input_mrl' );
 715
 716     mrl.value = value( 'input_file_filename' );
 717 }
 718
 719 /* update the input MRL using data from the input disc helper */
 720 function update_input_disc()
 721 {
 722     var mrl     = document.getElementById( 'input_mrl' );
 723     var type    = radio_value( "input_disc_type" );
 724     var device  = value( "input_disc_dev" );
 725
 726     var title   = check_and_replace_int( 'input_disc_title', 0 );
 727     var chapter = check_and_replace_int( 'input_disc_chapter', 0 );
 728     var subs    = check_and_replace_int( 'input_disc_subtrack', '' );
 729     var audio   = check_and_replace_int( 'input_disc_audiotrack', 0 );
 730
 731     mrl.value = "";
 732
 733     if( type == "dvd" )
 734     {
 735         mrl.value += "dvd://";
 736     }
 737     else if( type == "dvdsimple" )
 738     {
 739         mrl.value += "dvdsimple://";
 740     }
 741     else if( type == "vcd" )
 742     {
 743         mrl.value += "vcd://";
 744     }
 745     else if( type == "cdda" )
 746     {
 747         mrl.value += "cdda://";
 748     }
 749
 750     mrl.value += device;
 751
 752     if( title )
 753     {
 754         mrl.value += "@"+title;
 755         if( chapter && type != "cdda" )
 756             mrl.value += ":"+chapter;
 757     }
 758
 759     if( type != "cdda" )
 760     {
 761         if( subs != '' )
 762             mrl.value += " :sub-track="+subs;
 763         if( audio != '' )
 764             mrl.value += " :audio-track="+audio;
 765     }
 766
 767 }
 768
 769 /* update the input MRL using data from the input network helper */
 770 function update_input_net()
 771 {
 772     var mrl = document.getElementById( 'input_mrl' );
 773     var type = radio_value( "input_net_type" );
 774
 775     check_and_replace_int( 'input_net_udp_port', 1234 );
 776     check_and_replace_int( 'input_net_udpmcast_port', 1234 );
 777
 778     mrl.value = "";
 779
 780     if( type == "udp" )
 781     {
 782         mrl.value += "udp://";
 783         if( checked( 'input_net_udp_forceipv6' ) )
 784             mrl.value += "[::]";
 785         if( value( 'input_net_udp_port' ) )
 786             mrl.value += ":"+value( 'input_net_udp_port' );
 787     }
 788     else if( type == "udpmcast" )
 789     {
 790         mrl.value += "udp://@"+value( 'input_net_udpmcast_address');
 791         if( value( 'input_net_udpmcast_port' ) )
 792             mrl.value += ":"+value( 'input_net_udpmcast_port' );
 793     }
 794     else if( type == "http" )
 795     {
 796         var url = value( 'input_net_http_url' );
 797         if( url.substring(0,7) != "http://"
 798             && url.substring(0,8) != "https://"
 799             && url.substring(0,6) != "ftp://"
 800             && url.substring(0,6) != "mms://"
 801             && url.substring(0,7) != "mmsh://" )
 802             mrl.value += "http://";
 803         mrl.value += url;
 804     }
 805     else if( type == "rtsp" )
 806     {
 807         var url = value( 'input_net_rtsp_url' );
 808         if( url.substring(0,7) != "rtsp://" )
 809             mrl.value += "rtsp://";
 810         mrl.value += url;
 811     }
 812
 813     if( checked( "input_net_timeshift" ) )
 814         mrl.value += " :access-filter=timeshift";
 815 }
 816
 817 /* update the input MRL using data from the input fake helper */
 818 function update_input_fake()
 819 {
 820     var mrl = document.getElementById( 'input_mrl' );
 821
 822     mrl.value = "fake:";
 823     mrl.value += " :fake-file=" + value( "input_fake_filename" );
 824
 825     if( value( "input_fake_width" ) )
 826         mrl.value += " :fake-width=" + value( "input_fake_width" );
 827     if( value( "input_fake_height" ) )
 828         mrl.value += " :fake-height=" + value( "input_fake_height" );
 829     if( value( "input_fake_ar" ) )
 830         mrl.value += " :fake-ar=" + value( "input_fake_ar" );
 831 }
 832
 833 /**********************************************************************
 834  * Sout dialog functions
 835  *********************************************************************/
 836 /* toggle show the full sout interface */
 837 function toggle_show_sout_helper()
 838 {
 839     var element = document.getElementById( "sout_helper" );
 840     if( element.style.display == 'block' )
 841     {
 842         element.style.display = 'none';
 843         document.getElementById( "sout_helper_toggle" ).value = 'Full sout interface';
 844     }
 845     else
 846     {
 847         element.style.display = 'block';
 848         document.getElementById( "sout_helper_toggle" ).value = 'Hide sout interface';
 849     }
 850 }
 851
 852 /* update the sout MRL using data from the sout_helper */
 853 function update_sout()
 854 {
 855     var mrl = document.getElementById( 'sout_mrl' );
 856     mrl.value = "";
 857
 858     check_and_replace_int( 'sout_http_port', 8080 );
 859     check_and_replace_int( 'sout_mmsh_port', 8080 );
 860     check_and_replace_int( 'sout_rtp_port', 1234 );
 861     check_and_replace_int( 'sout_udp_port', 1234 );
 862     check_and_replace_int( 'sout_ttl', 1 );
 863
 864     if( checked( 'sout_soverlay' ) )
 865     {
 866         disable( 'sout_scodec' );
 867         disable( 'sout_sub' );
 868     }
 869     else
 870     {
 871         enable( 'sout_scodec' );
 872         enable( 'sout_sub' );
 873     }
 874
 875     var transcode =  checked( 'sout_vcodec_s' ) || checked( 'sout_acodec_s' )
 876                   || checked( 'sout_sub' )      || checked( 'sout_soverlay' );
 877
 878     if( transcode )
 879     {
 880         mrl.value += ":sout=#transcode{";
 881         var alot = false; /* alot == at least one transcode */
 882         if( checked( 'sout_vcodec_s' ) )
 883         {
 884             mrl.value += "vcodec="+value( 'sout_vcodec' )+",vb="+value( 'sout_vb' )+",scale="+value( 'sout_scale' );
 885             alot = true;
 886         }
 887         if( checked( 'sout_acodec_s' ) )
 888         {
 889             if( alot ) mrl.value += ",";
 890             mrl.value += "acodec="+value( 'sout_acodec' )+",ab="+value( 'sout_ab' );
 891             if( value( 'sout_channels' ) )
 892                 mrl.value += ",channels="+value( 'sout_channels' );
 893             alot = true;
 894         }
 895         if( checked( 'sout_soverlay' ) )
 896         {
 897             if( alot ) mrl.value += ",";
 898             mrl.value += "soverlay";
 899             alot = true;
 900         }
 901         else if( checked( 'sout_sub' ) )
 902         {
 903             if( alot ) mrl.value += ",";
 904             mrl.value += "scodec="+value( 'sout_scodec' );
 905             alot = true;
 906         }
 907         mrl.value += value( 'sout_transcode_extra' );
 908
 909         mrl.value += "}";
 910     }
 911
 912     var output = checked( 'sout_display' ) + checked( 'sout_file' )
 913                + checked( 'sout_http' )    + checked( 'sout_mmsh' )
 914                + checked( 'sout_rtp' )     + checked( 'sout_udp' );
 915
 916     if( output )
 917     {
 918         if( transcode )
 919             mrl.value += ":";
 920         else
 921             mrl.value += ":sout=#";
 922         var aloo = false; /* aloo == at least one output */
 923         var mux = radio_value( 'sout_mux' );
 924         var ttl = parseInt( value( 'sout_ttl' ) );
 925         if( output > 1 ) mrl.value += "duplicate{";
 926         if( checked( 'sout_display' ) )
 927         {
 928             if( output > 1 ) mrl.value += "dst="
 929             mrl.value += "display";
 930             aloo = true;
 931         }
 932         if( checked( 'sout_file' ) )
 933         {
 934             if( aloo ) mrl.value += ",";
 935             if( output > 1 ) mrl.value += "dst="
 936             mrl.value += "std{access=file,mux="+mux+",dst="+value( 'sout_file_filename' )+"}";
 937             aloo = true;
 938         }
 939         if( checked( 'sout_http' ) )
 940         {
 941             if( aloo ) mrl.value += ",";
 942             if( output > 1 ) mrl.value += "dst="
 943             mrl.value += "std{access=http,mux="+mux+",dst="+value( 'sout_http_addr' );
 944             if( value( 'sout_http_port' ) )
 945                 mrl.value += ":"+value( 'sout_http_port' );
 946             mrl.value += "}";
 947             aloo = true;
 948         }
 949         if( checked( 'sout_mmsh' ) )
 950         {
 951             if( aloo ) mrl.value += ",";
 952             if( output > 1 ) mrl.value += "dst="
 953             mrl.value += "std{access=mmsh,mux="+mux+",dst="+value( 'sout_mmsh_addr' );
 954             if( value( 'sout_mmsh_port' ) )
 955                 mrl.value += ":"+value( 'sout_mmsh_port' );
 956             mrl.value += "}";
 957             aloo = true;
 958         }
 959         if( checked( 'sout_rtp' ) )
 960         {
 961             if( aloo ) mrl.value += ",";
 962             if( output > 1 ) mrl.value += "dst="
 963             mrl.value += "std{access=rtp";
 964             if( ttl ) mrl.value += "{ttl="+ttl+"}";
 965             mrl.value += ",mux="+mux+",dst="+value( 'sout_rtp_addr' );
 966             if( value( 'sout_rtp_port' ) )
 967                 mrl.value += ":"+value( 'sout_rtp_port' );
 968             if( checked( 'sout_sap' ) )
 969             {
 970                 mrl.value += ",sap";
 971                 if( value( 'sout_sap_group' ) != '' )
 972                 {
 973                     mrl.value += ",group=\""+value( 'sout_sap_group' )+"\"";
 974                 }
 975                 mrl.value += ",name=\""+value( 'sout_sap_name' )+"\"";
 976             }
 977             mrl.value += "}";
 978             aloo = true;
 979         }
 980         if( checked( 'sout_udp' ) )
 981         {
 982             if( aloo ) mrl.value += ",";
 983             if( output > 1 ) mrl.value += "dst="
 984             mrl.value += "std{access=udp";
 985             if( ttl ) mrl.value += "{ttl="+ttl+"}";
 986             mrl.value += ",mux="+mux+",dst="+value( 'sout_udp_addr' );
 987             if( value('sout_udp_port' ) )
 988                 mrl.value += ":"+value( 'sout_udp_port' );
 989             if( checked( 'sout_sap' ) )
 990             {
 991                 mrl.value += ",sap";
 992                 if( value( 'sout_sap_group' ) != '' )
 993                 {
 994                     mrl.value += ",group=\""+value( 'sout_sap_group' )+"\"";
 995                 }
 996                 mrl.value += ",name=\""+value( 'sout_sap_name' )+"\"";
 997             }
 998             mrl.value += "}";
 999             aloo = true;
1000         }
1001         if( output > 1 ) mrl.value += "}";
1002     }
1003
1004     if( ( transcode || output ) && checked( 'sout_all' ) )
1005         mrl.value += " :sout-all";
1006 }
1007
1008 /* reset sout mrl value */
1009 function reset_sout()
1010 {
1011     document.getElementById('sout_mrl').value = value('sout_old_mrl');
1012 }
1013
1014 /* save sout mrl value */
1015 function save_sout()
1016 {
1017     document.getElementById('sout_old_mrl').value = value('sout_mrl');
1018 }
1019
1020 /**********************************************************************
1021  * Browser dialog functions
1022  *********************************************************************/
1023 /* only browse() should be called directly */
1024 function browse( dest )
1025 {
1026     document.getElementById( 'browse_dest' ).value = dest;
1027     document.getElementById( 'browse_lastdir' ).value;
1028     browse_dir( document.getElementById( 'browse_lastdir' ).value );
1029     show( 'browse' );
1030 }
1031 function browse_dir( dir )
1032 {
1033     document.getElementById( 'browse_lastdir' ).value = dir;
1034     loadXMLDoc( 'requests/browse.xml?dir='+encodeURIComponent(dir), parse_browse_dir );
1035 }
1036 function browse_path( p )
1037 {
1038     document.getElementById( value( 'browse_dest' ) ).value = p;
1039     hide( 'browse' );
1040     document.getElementById( value( 'browse_dest' ) ).focus();
1041 }
1042 function refresh_albumart()
1043 {
1044     var now = new Date();
1045     var albumart = document.getElementById( 'albumart' );
1046     albumart.src = '/art?timestamp=' + now.getTime();
1047 }
1048 /**********************************************************************
1049  * Periodically update stuff in the interface
1050  *********************************************************************/
1051 function loop_refresh_status()
1052 {
1053     setTimeout( 'loop_refresh_status()', 1000 );
1054     update_status();
1055 }
1056 function loop_refresh_playlist()
1057 {
1058     /* setTimeout( 'loop_refresh_playlist()', 10000 ); */
1059     update_playlist();
1060 }
1061 function loop_refresh_albumart()
1062 {
1063     setTimeout( 'loop_refresh_albumart()', 10000 );
1064     refresh_albumart();
1065 }
1066 function loop_refresh()
1067 {
1068     setTimeout( 'loop_refresh_status()', 1 );
1069     setTimeout( 'loop_refresh_playlist()', 1 );
1070     setTimeout( 'loop_refresh_albumart()', 1 );
1071 }
1072