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