Add instant record functionality - needs fine-tuning but at least works for now
[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         <title>Dreambox WebControl</title>
9         
10         <script type="text/javascript" src="/web-data/lib/prototype-1.6.0.3.js"></script>
11         <script type="text/javascript" src="/web-data/lib/scriptaculous.js"></script>
12         <script type="text/javascript" src="/web-data/lib/shadedborder.js"></script>
13         <script type="text/javascript" src="/web-data/lib/trimpath-template-1.0.38.js"></script>
14                 
15         <!-- our stuff //-->
16         <script type="text/javascript" src="/web-data/objects.js" ></script>
17         <script type="text/javascript" src="/web-data/config.js" ></script>
18         <script type="text/javascript" src="/web-data/tools.js" ></script>
19         <script type="text/javascript" src="/web-data/timer.js" ></script>
20         
21         <link href="/web-data/tpl/default/style.css" type="text/css" rel="stylesheet">
22         <link rel="shortcut icon" type="/web-data/image/x-icon" href="/web-data/img/favicon.ico">
23
24         <!-- Live RSS Feeds //-->
25         <link rel="alternate" type="application/rss+xml" title="Movie List" href="/web/movielist.rss?tag" >
26
27
28         <script language="javascript" type="text/javascript">
29                 
30                 if (!window.$) {
31                         window.$ = function(id) { return document.getElementById(id); }
32                 }
33                 
34                 function getWinSize(win) 
35                 { 
36                         if(!win) win = window; 
37                         var s = {}; 
38                         if(typeof win.innerWidth != 'undefined') 
39                         { 
40                                 s.width = win.innerWidth; 
41                                 s.height = win.innerHeight; 
42                         } 
43                         else 
44                         { 
45                                  var obj = getBody(win); 
46                                  s.width = parseInt(obj.clientWidth); 
47                                  s.height = parseInt(obj.clientHeight); 
48                         } 
49                         return s; 
50                 } 
51
52                 function getBody(w) 
53                 { 
54                         return (w.document.compatMode && w.document.compatMode == "CSS1Compat") ? w.document.documentElement : w.document.body || null; 
55                 } 
56                 
57                 function setMaxHeight(element){
58                         try{                    
59                                 var slc = $(element);
60                                 size = getWinSize();
61                                 slc.style.maxHeight = size.height - 200+"px";
62                         } catch (e) {}
63                 }
64
65         </script>
66 </head>
67 <body onresize="setMaxHeight('contentMain')" onload="document.getElementById('notification').style.display='none'">
68         
69         <div id="container">
70                 <div id="banner">
71                         <span id="notification"><div></div></span>
72                         <div id="bannerLeft">
73                                 <div id="bannerText" style="font-size: 24px;"><img src="/web-data/img/dreamboxweb.png" alt="Dreambox Web"></div>
74                                 <ul id="mainMenu">
75                                         <li><a href="#" onClick="switchMode('TV')">TeleVision</a></li>
76                                         <li><a href="#" onClick="switchMode('Radio')">Radio</a></li>
77                                         <li><a href="#" onClick="switchMode('Movies')">Movies</a></li>
78                                         <li><a href="#" onClick="switchMode('Timer')">Timer</a></li>
79                                         <!-- <li><a href="#" onClick="switchMode('MediaPlayer')">MediaPlayer</a></li>  -->
80                                         <li><a href="#" onClick="switchMode('BoxControl')">BoxControl</a></li>
81                                         <li><a href="#" onClick="switchMode('About')">About</a></li>
82                                 </ul>
83                         </div>
84                         <div id="bannerRight">
85                                 <div>
86                                         <a href="#" onClick="openSignalPanel()">
87                                                 <img border="0" src="/web-data/img/signal.png" alt="Signal" title="Show Signal Panel">
88                                         </a><br>
89                                         <a href="#" onClick="recordNowPopup()">
90                                                 <img border="0" src="/web-data/img/record.png" alt="R" title="Instant Record">
91                                         </a>
92                                 </div>                  
93                         </div>
94                 </div>
95                 <div id="current">
96                         <div id="currentContent">
97                                 <table id="currentTable">
98                                         <tr>
99                                                 <td id="currentName">N/A</td>
100                                         </tr>   
101                                 </table>
102                         </div>
103                 </div>
104                 <div id="main">
105                         <div id="navContainer">
106                                 <div id="nav">
107                                         <div id="navHd" class="header"><div>SubNav</div></div>
108                                         <div id="navContent">loading...</div>
109                                 </div>
110                                 <div id="navVolume">
111                                         <div id="volHd" class="header"><div>Volume</div></div>
112                                         <span class="boxContent center" style="width: 94%; display:block;">
113                                                 <!-- Volume "Slider" -->
114                                                 <a href="#" onClick="volumeSet(10)">
115                                                         <img id='volume1' src='/web-data/img/led_off.png' title="Volume to 10%" alt="10%">
116                                                 </a>
117                                                 <a href="#" onClick="volumeSet(20)">
118                                                         <img id='volume2' src='/web-data/img/led_off.png' title="Volume to 20%" alt="20%">
119                                                 </a>
120                                                 <a href="#" onClick="volumeSet(30)">
121                                                         <img id='volume3' src='/web-data/img/led_off.png' title="Volume to 30%" alt="30%">
122                                                 </a>
123                                                 <a href="#" onClick="volumeSet(40)">
124                                                         <img id='volume4' src='/web-data/img/led_off.png' title="Volume to 40%" alt="40%">
125                                                 </a>
126                                                 <a href="#" onClick="volumeSet(50)">
127                                                         <img id='volume5' src='/web-data/img/led_off.png' title="Volume to 50%" alt="50%">
128                                                 </a>
129                                                 <a href="#" onClick="volumeSet(60)">
130                                                         <img id='volume6' src='/web-data/img/led_off.png' title="Volume to 60%" alt="60%">
131                                                 </a>
132                                                 <a href="#" onClick="volumeSet(70)">
133                                                         <img id='volume7' src='/web-data/img/led_off.png' title="Volume to 70%" alt="70%">
134                                                 </a>
135                                                 <a href="#" onClick="volumeSet(80)">
136                                                         <img id='volume8' src='/web-data/img/led_off.png' title="Volume to 80%" alt="80%">
137                                                 </a>
138                                                 <a href="#" onClick="volumeSet(90)">
139                                                         <img id='volume9' src='/web-data/img/led_off.png' title="Volume to 90%" alt="90%">
140                                                 </a>
141                                                 <a href="#" onClick="volumeSet(100)">
142                                                         <img id='volume10' src='/web-data/img/led_off.png' title="Volume to 100%" alt="100%">
143                                                 </a>
144                                                 <br>
145                                                 <!-- Volume Control -->
146                                                 <a href="#" onClick="volumeUp()">
147                                                         <img src='/web-data/img/arrow_up.png'  title="Volume Up" alt="Up">
148                                                 </a>
149                                                 <a href="#" onClick="volumeDown()">
150                                                         <img src='/web-data/img/arrow_down.png'  title="Volume Down" alt="Down">
151                                                 </a>
152                                                 <a href="#" onClick="volumeMute()">
153                                                         <img id='speaker' src='/web-data/img/speak_on.png'  title="Mute" alt="Mute">
154                                                 </a>                                            
155                                         </span>
156                                 </div>
157                                 <div id="navSearch">
158                                         <div id="searchHd" class="header"><div>EPG-Search</div></div>
159                                         <div class="boxContent">
160                                                 <form action="" onSubmit="loadEPGBySearchString(document.getElementById('epgSearch').value); return false;">
161                                                         <input type="text" id="epgSearch" onfocus="this.value=''" value="Search EPG"/>
162                                                         <input style="vertical-align:middle" type="image" src="/web-data/img/search.png" alt="search..." title="Search EPG for term">
163                                                 </form>                                         
164                                         </div>
165                                 </div>
166                         </div>
167                         <div id="content">
168                                 <div id="contentHd" class="header"><div>Content</div></div>
169                                 <div id="contentMain">loading...</div>
170                         </div>  
171                 </div>
172         </div>
173         <script language="javascript" type="text/javascript">                   
174                 /****************
175                 Rounded Corners 
176                 *****************/
177                 var menuBorder = RUZEE.ShadedBorder.create({ corner:5, border: 1 });
178
179                 var buttons = $('mainMenu').getElementsByTagName("li");
180
181                 for (var i=0; i < buttons.length; ++i) {                        
182                         menuBorder.render(buttons[i]);
183                 }
184
185                 var bannerBorder = RUZEE.ShadedBorder.create({corner:5, shadow:10});
186                 bannerBorder.render('banner');
187                 bannerBorder.render('current');
188
189                 var contentBorder = RUZEE.ShadedBorder.create({corner:5, border: 2, shadow:10});
190                 contentBorder.render('nav');
191                 contentBorder.render('navSearch');
192                 contentBorder.render('navVolume');
193                 contentBorder.render('content');
194
195                 var hdBorder = RUZEE.ShadedBorder.create({corner:5, edges:"tlr"});
196                 hdBorder.render('navHd');
197                 hdBorder.render('searchHd');
198                 hdBorder.render('volHd');
199                 hdBorder.render('contentHd');
200                 
201                 function setNavHd(content){
202                         set("navHd", "<div>"+content+"</div>");
203                         hdBorder.render('navHd');
204                 }
205                 
206                 function setContentHd(content){
207                         set("contentHd", "<div>"+content+"</div>");
208                         hdBorder.render('contentHd');
209                 }
210                 
211                 function getAjaxLoad(){
212                         return ('<center><img style="padding-top: 50px;" src="/web-data/gfx/ajaxload.gif" alt="loading..."></center>');
213                 }
214                 
215                 setMaxHeight('contentMain');            
216                 
217                 init();
218         </script>
219
220 </body>
221 </html>