change position of volume up and down icons
[enigma2-plugins.git] / webinterface / src / web-data / tpl / default / index.html
1 <?xml version="1.0" encoding="iso-8859-1"?>
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
3        "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5
6 <head>
7         <meta content="text/html; charset=UTF-8" http-equiv="content-type">
8         <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
9         
10         <title>Dreambox WebControl</title>
11         
12         <link href="/web-data/tpl/default/style.css" type="text/css" rel="stylesheet">
13         <link rel="shortcut icon" type="/web-data/image/x-icon" href="/web-data/img/favicon.ico">
14         
15         <!-- External libs
16         <script type="text/javascript" src="/web-data/lib/prototype-1.6.1.js"></script>
17         <script type="text/javascript" src="/web-data/lib/scriptaculous.js?load=effects"></script>
18         <script type="text/javascript" src="/web-data/lib/curvycorners.js"></script>
19         <script type="text/javascript" src="/web-data/lib/trimpath-template-1.0.38.js"></script>
20          -->
21  
22         <script type="text/javascript" src="/web-data/lib/libs_minified.js"></script>
23         
24         <!-- userprefs Object -->
25         <script type="text/javascript" src="/web-data/userprefs.js"></script>
26                 
27         <!-- our stuff //-->
28         <script type="text/javascript" src="/web-data/objects.js" ></script>
29         <script type="text/javascript" src="/web-data/statics.js" ></script>
30         <script type="text/javascript" src="/web-data/tools.js" ></script>
31         <script type="text/javascript" src="/web-data/timer.js" ></script>
32
33         <!-- Gears-->
34         <script type="text/javascript" src="/web-data/lib/gears_init.js"></script>
35         <script type="text/javascript" src="/web-data/gears_handler.js" ></script>
36
37         <!-- Live RSS Feeds //-->
38         <link rel="alternate" type="application/rss+xml" title="Movie List" href="/web/movielist.rss?tag" >
39
40
41         <script language="javascript" type="text/javascript">
42                 
43                 if (!window.$) {
44                         window.$ = function(id) { return document.getElementById(id); }
45                 }
46                 
47                 function getWinSize(win) 
48                 { 
49                         if(!win) win = window; 
50                         var s = {}; 
51                         if(typeof win.innerWidth != 'undefined') 
52                         { 
53                                 s.width = win.innerWidth; 
54                                 s.height = win.innerHeight; 
55                         } 
56                         else 
57                         { 
58                                  var obj = getBody(win); 
59                                  s.width = parseInt(obj.clientWidth); 
60                                  s.height = parseInt(obj.clientHeight); 
61                         } 
62                         return s; 
63                 } 
64
65                 function getBody(w) 
66                 { 
67                         return (w.document.compatMode && w.document.compatMode == "CSS1Compat") ? w.document.documentElement : w.document.body || null; 
68                 } 
69                 
70                 function setMaxHeight(element){
71                         try{                    
72                                 var slc = $(element);
73                                 size = getWinSize();
74                                 slc.style.maxHeight = size.height - 200+"px";
75                         } catch (e) {}
76                 }
77
78         </script>
79 </head>
80 <body onresize="setMaxHeight('contentMain')" onload="document.getElementById('notification').style.display='none'">
81         
82         <div id="container">
83                 <div id="banner">
84                         <span id="notification"><div></div></span>
85                         <div id="bannerLeft">
86                                 <div id="bannerText" style="font-size: 24px;">
87                                         <img src="/web-data/img/dreamboxweb.png" alt="Dreambox Web">
88                                 </div>
89                                 <ul id="mainMenu">
90                                         <li><a href="#" onClick="switchMode('TV')">TeleVision</a></li>
91                                         <li><a href="#" onClick="switchMode('Radio')">Radio</a></li>
92                                         <li><a href="#" onClick="switchMode('Movies')">Movies</a></li>
93                                         <li><a href="#" onClick="switchMode('Timer')">Timer</a></li>
94                                         <!-- <li><a href="#" onClick="switchMode('MediaPlayer')">MediaPlayer</a></li>  -->
95                                         <li><a href="#" onClick="switchMode('BoxControl')">BoxControl</a></li>
96                                         <li><a href="#" onClick="switchMode('Extras')">Extras</a></li>
97                                         <li>
98                                                 <a href="#" onClick="openWebTV();">
99                                                         WebTV
100                                                 </a></li>
101                                 </ul>
102                         </div>
103                         <div id="bannerRight">
104                                 <div>                                   
105                                         <a id="openSignalPanel" href="#" >
106                                                 <img id="openSignalPanelImg" border="0" src="/web-data/img/signal.png" alt="Signal" title="Show Signal Panel">
107                                         </a><br>
108                                         <a id="doInstantRecord" href="#" onClick="recordNowPopup()">
109                                                 <img  id="doInstantRecordImg" border="0" src="/web-data/img/record.png" alt="R" title="Instant Record">
110                                         </a>
111                                 </div>                  
112                         </div>
113                 </div>
114                 <div id="current">
115                         <div id="currentContent">
116                                 <table id="currentTable">
117                                         <tr>
118                                                 <td id="currentName">N/A</td>
119                                         </tr>   
120                                 </table>
121                         </div>
122                 </div>
123                 <div id="main">
124                         <div id="navContainer">
125                                 <div id="nav">
126                                         <div id="navHd" class="header"><div>SubNav</div></div>
127                                         <div id="navContent">loading...</div>
128                                 </div>
129                                 <div id="navVolume">
130                                         <div id="volHd" class="header"><div>Volume</div></div>
131                                         <span class="boxContent center" style="width: 94%; display:block;">
132                                                 <!-- Volume "Slider" -->
133                                                 <a href="#" onClick="volumeSet(10)">
134                                                         <img id='volume1' src='/web-data/img/led_off.png' title="Volume to 10%" alt="10%">
135                                                 </a>
136                                                 <a href="#" onClick="volumeSet(20)">
137                                                         <img id='volume2' src='/web-data/img/led_off.png' title="Volume to 20%" alt="20%">
138                                                 </a>
139                                                 <a href="#" onClick="volumeSet(30)">
140                                                         <img id='volume3' src='/web-data/img/led_off.png' title="Volume to 30%" alt="30%">
141                                                 </a>
142                                                 <a href="#" onClick="volumeSet(40)">
143                                                         <img id='volume4' src='/web-data/img/led_off.png' title="Volume to 40%" alt="40%">
144                                                 </a>
145                                                 <a href="#" onClick="volumeSet(50)">
146                                                         <img id='volume5' src='/web-data/img/led_off.png' title="Volume to 50%" alt="50%">
147                                                 </a>
148                                                 <a href="#" onClick="volumeSet(60)">
149                                                         <img id='volume6' src='/web-data/img/led_off.png' title="Volume to 60%" alt="60%">
150                                                 </a>
151                                                 <a href="#" onClick="volumeSet(70)">
152                                                         <img id='volume7' src='/web-data/img/led_off.png' title="Volume to 70%" alt="70%">
153                                                 </a>
154                                                 <a href="#" onClick="volumeSet(80)">
155                                                         <img id='volume8' src='/web-data/img/led_off.png' title="Volume to 80%" alt="80%">
156                                                 </a>
157                                                 <a href="#" onClick="volumeSet(90)">
158                                                         <img id='volume9' src='/web-data/img/led_off.png' title="Volume to 90%" alt="90%">
159                                                 </a>
160                                                 <a href="#" onClick="volumeSet(100)">
161                                                         <img id='volume10' src='/web-data/img/led_off.png' title="Volume to 100%" alt="100%">
162                                                 </a>
163                                                 <br>
164                                                 <!-- Volume Control -->
165                                                 <a href="#" onClick="volumeDown()">
166                                                         <img src='/web-data/img/arrow_down.png'  title="Volume Down" alt="Down">
167                                                 </a>
168                                                 <a href="#" onClick="volumeUp()">
169                                                         <img src='/web-data/img/arrow_up.png'  title="Volume Up" alt="Up">
170                                                 </a>
171                                                 <a href="#" onClick="volumeMute()">
172                                                         <img id='speaker' src='/web-data/img/speak_on.png'  title="Mute" alt="Mute">
173                                                 </a>                                            
174                                         </span>
175                                 </div>
176                                 <div id="navSearch">
177                                         <div id="searchHd" class="header"><div>EPG-Search</div></div>
178                                         <div class="boxContent">
179                                                 <form action="" onSubmit="loadEPGBySearchString($('epgSearch').value); return false;">
180                                                         <input type="text" id="epgSearch" onfocus="this.value=''" value="Search EPG" />
181                                                         <img style="vertical-align:middle" src="/web-data/img/cross.png" alt="clear..." title="Clear Search" onClick="clearSearch()" />
182                                                 </form>                                         
183                                         </div>
184                                 </div>
185                         </div>
186                         <div id="content">
187                                 <table style="margin:0px; padding:0px; background:#000;width:100%" cellpadding="0" cellspacing="0">
188                                         <tr>
189                                                 <td><div id="contentHd" class="header"><div>Content</div></div></td>
190                                                 <td style="text-align: right"><div id="contentHdExt"></div></td>
191                                         </tr>
192                                 </table>
193                                 <div id="contentMain">loading...</div>
194                         </div>  
195                 </div>
196         </div>
197         <script language="javascript" type="text/javascript">   
198                 function setNavHd(content){
199                         set("navHd", '<div style="background-color: #000">'+content+'</div>');
200                 }
201                 
202                 function setContentHd(content){
203                         var div = new Element('div');
204                         div.setStyle({background: 'black'});
205                         div.update(content);
206                         $('contentHd').update(div);
207                         $('contentHdExt').update('');
208                 }
209                 
210                 function getAjaxLoad(){
211                         return ('<center><img style="padding-top: 50px;" src="/web-data/gfx/ajaxload.gif" alt="loading..."></center>');
212                 }
213                 
214                 setMaxHeight('contentMain');            
215                 
216                 init();
217         </script>
218
219 </body>
220 </html>