Merge skins into common directory

167 files changed, 6787 insertions, 0 deletions

diff --git a/skins/html/alist.tmpl b/skins/html/alist.tmpl
new file mode 100644
index 0000000..340a68b
--- /dev/null
+++ b/skins/html/alist.tmpl
@@ -0,0 +1,81 @@
+<!-- TableTemplate -->
+<h1><?% gettext("Wished automated recordings") %?></h1>
+
+<?% IF allow('anew') %?>
+<a href="?cmd=anew">[<?% gettext("Create new autotimer") %?>]</a>
+<?% END %?>
+<a href="#" onClick="suche('<?% gettext("Search text") %?>', '?cmd=asearch&data=')"><?% gettext("Search in autotimer") %?></a>
+<?% IF allow('aupdate') %?>
+<a href="?cmd=aupdate">[<?% gettext("Search autotimer") %?>]</a>
+<?% END %?>
+<p>
+
+<table border="0" width="95%">
+<form name='Autotimer'>
+<?% INCLUDE 'widgets/referer.tmpl' %?>
+
+<?% IF data.size %?>
+    <?% fields = data.shift %?>
+        <tr>
+        <?% FOREACH field = fields %?>
+            <th style="white-space: nowrap">
+                <?% field %?>
+                <?% IF param.sortable %?>
+                <a href="?cmd=<?% cgi.param('cmd') %?>&__sortby=<?% field %?>&__desc=0"><img src="images/asc.png"></a>
+                <a href="?cmd=<?% cgi.param('cmd') %?>&__sortby=<?% field %?>&__desc=1"><img src="images/desc.png"></a>
+                <?% END %?>
+            </th>
+        <?% END %?>
+        </tr>
+        <?% x = -1 %?>
+        <?% FOREACH zeile = data %?>
+        <?% IF zeile.1 == 'n' %?>
+            <?% myclass = "deactive" %?>
+        <?% ELSE %?>
+            <?% myclass = "" %?>
+        <?% END %?>
+        <?% x = x + 1 %?>
+        <tr class="<?% myclass %?>" <?% IF (x mod 2) == 0 %?>bgcolor='#F5F5F5'<?% END %?>>
+            <?% c = 0 %?>
+            <?% FOREACH field = zeile %?>
+                <?% c = c + 1 %?>
+                <?% IF c == 1; # Id Field %?>
+                <td><nobr>
+                    <?% IF allow('aedit') %?>
+                    <a title="<?% gettext("Edit autotimer") %?>"
+                       href="?cmd=aedit&amp;data=<?% zeile.0 %?>">[<?% gettext("Edit") %?>]</a>
+                    <?% END %?>
+                    <?% IF allow('adelete') %?>
+                    <a title="<?% gettext("Delete autotimer")  %?>"
+                       href="javascript:sure(document.Autotimer, '<?% gettext("Would you like to delete this autotimer?") %?>\n<?% escape(zeile.2) %?>','?cmd=adelete&amp;data=<?% zeile.0 %?>')">
+                    [<?% gettext("Del") %?>]
+                    </a>
+                    <?% END %?>
+                </td>
+                <?% ELSIF c == 2; # Activ Field %?>
+                <td>
+                    <?% aus = gettext('Off') %?>
+                    <?% an = gettext('On') %?>
+                    <?% IF allow('atoggle') %?>
+                    <a href="javascript:tostatus('?cmd=atoggle&amp;data=<?% zeile.0 %?>')">[<?% zeile.1 == 'n' ? aus : an %?>]</a>
+                    <?% ELSE %?>
+                    [<?% zeile.1 == 'n' ? aus : an %?>]
+                    <?% END %?>
+                </td>
+                <?% ELSIF c == 4; # Channel Field %?>
+                <td>
+                    <select style="width: 100%">
+                    <?% FOREACH ch = field.split(',') %?>
+                        <option><?% ch %?></option>
+                    <?% END %?>
+                    </select>
+                </td>
+                <?% ELSE %?>
+                <td><?% field %?></td>
+                <?% END %?>
+            <?% END %?>
+        </tr>
+        <?% END %?>
+<?% END %?>
+</form>
+</table>
diff --git a/skins/html/bloecke/event_links.tmpl b/skins/html/bloecke/event_links.tmpl
new file mode 100644
index 0000000..952831a
--- /dev/null
+++ b/skins/html/bloecke/event_links.tmpl
@@ -0,0 +1,15 @@
+<div id='icons'>
+    <?% IF with_display_button %?>
+<a href="?cmd=display&data=<?% epgId %?>" title='<?% gettext("Detailed program information") %?>'><img src="images/view_event.png" /></a><?% umbruch %?>
+    <?% END %?>
+<a href="?cmd=search&amp;data=<?% url( data.1 ) %?>"><img src="images/repeat.png" title="<?% gettext("Search for repeats") %?>" /></a><?% umbruch %?>
+    <?% IF data.10 && allow('tedit') %?>
+<a href="?cmd=tedit&amp;data=<?% data.10 %?>"><img src="images/record_blue.png" title="<?% gettext("Edit this timer") %?>" /></a><?% umbruch %?>
+    <?% ELSIF allow('tnew') %?>
+<a href="?cmd=tnew&amp;data=<?% data.0 %?>"><img src="images/record.png" title="<?% gettext("To record") %?>" name='recordlink' id='<?% data.0 %?>' /></a><?% umbruch %?>
+    <?% END %?>
+<?% IF allow('switch') && switch %?>
+    <a href="?cmd=switch&amp;data=<?% url(data.4) %?>"><img src="images/switch.png" title="<?% gettext("Switch to channel") %?>&nbsp;<?% data.4 %?>" /></a><?% umbruch %?>
+<?% END %?>
+<?% INCLUDE 'bloecke/stars.tmpl' eventid=data.0 %?>
+</div>
diff --git a/skins/html/bloecke/links.tmpl b/skins/html/bloecke/links.tmpl
new file mode 100644
index 0000000..67fdf8b
--- /dev/null
+++ b/skins/html/bloecke/links.tmpl
@@ -0,0 +1,9 @@
+<?% BLOCK link %?>
+<div align="center" style='position:absolute'>
+    <img src="images/linkbg.png" width="<?% text.length * 5 %?>">
+    <div style='position:absolute; top:10px; left:10px;'>
+    <?% text %?>%
+    </div>
+    <?% END %?>
+</div>
+<?% END %?>
\ No newline at end of file
diff --git a/skins/html/bloecke/percentbar.tmpl b/skins/html/bloecke/percentbar.tmpl
new file mode 100644
index 0000000..16ebaab
--- /dev/null
+++ b/skins/html/bloecke/percentbar.tmpl
@@ -0,0 +1,21 @@
+<?% barexp = barwidth / 100;
+    IF color_switch;
+        ground = "images/bar_green.png";
+        over = "images/bar_red.png";
+    ELSE;
+        ground = "images/bar_red.png";
+        over = "images/bar_green.png";
+    END;
+     %?>
+
+<div align="center" style='position:absolute'>
+    <img src="<?% ground %?>" width="<?% barwidth %?>" title='<?% percent div 1 | format "%02d" %?>%'>
+    <div style='position:absolute; top:0px; left:0px; clip:rect(0px, <?% ( percent * barexp ) div 1 %?>px, <?% ( percent * barexp ) div 1 %?>px, 0px)'>
+    <img src="<?% over %?>" width="<?% barwidth %?>" title='<?% percent div 1 | format "%02d" %?>%'>
+    </div>
+    <?% IF barwidth > 200 %?>
+    <div style='position:absolute; top:10px; left:<?% barwidth - 70 %?>px; color:#FFFFFF;font-weight:bold'>
+    <?% percent div 1 | format "%02d" %?>%
+    </div>
+    <?% END %?>
+</div>
diff --git a/skins/html/bloecke/stars.tmpl b/skins/html/bloecke/stars.tmpl
new file mode 100644
index 0000000..e3aafad
--- /dev/null
+++ b/skins/html/bloecke/stars.tmpl
@@ -0,0 +1,3 @@
+<?% IF level && allow('topten') %?>
+<img class="stars" src="images/<?% level FILTER format('%d') %?>_stars.png" hspace=0 vspace=0 title="<?% level FILTER format('%d') %?> Stars"><?% umbruch %?>
+<?% END %?>
diff --git a/skins/html/bloecke/tooltip.tmpl b/skins/html/bloecke/tooltip.tmpl
new file mode 100644
index 0000000..a42a414
--- /dev/null
+++ b/skins/html/bloecke/tooltip.tmpl
@@ -0,0 +1,12 @@
+  <?% IF cmd;
+      link="?cmd=${cmd}&amp;data=${linkid}";
+      END;
+      IF !ttp_offset;
+          ttp_offset = 0;
+      END;
+      IF !ttp_offset;ttp_offset = 0;END %?>
+                    <a href="<?% IF link;link;ELSE;"#";END %?>"<?% IF eventid %?> 
+                       onmouseover="ttpreq(this, '<?% escape(title) %?>
+                                                   <?% IF subtitle && subtitle.length > 0 %?>~<?% escape(subtitle) %?>
+                                                   <?% END %?>',<?% eventid %?>, <?% ttp_offset %?>);"
+                      <?% END %?> >
diff --git a/skins/html/clist.tmpl b/skins/html/clist.tmpl
new file mode 100644
index 0000000..4cc980a
--- /dev/null
+++ b/skins/html/clist.tmpl
@@ -0,0 +1,163 @@
+<!-- clist -->
+<?% ######################################################################## %?>
+<?% enableform = allow('cdelete') && data.size > 1  %?>
+<?% ######################################################################## %?>
+<?% IF param.sortable.defined %?>
+    <?% IF cgi.param('__sortby') %?>
+        <?% sortby = cgi.param('__sortby') %?>
+        <?% sortby = "&amp;__sortby=${sortby}" %?>
+        <?% orderby = cgi.param('__desc') %?>
+        <?% orderby = "${sortby}&amp;__desc=${orderby}" %?>
+    <?% END %?>
+    <?% cmd = cgi.param('cmd') %?>
+    <?% IF cgi.param('data') %?>
+        <?% daten = url( cgi.param('data') ) %?>
+        <?% daten = "&amp;data=${daten}" %?>
+    <?% END %?>
+<?% END %?>
+<?% ######################################################################## %?>
+<?% BLOCK SortItem %?>
+        <?% "<strong>" IF cgi.param('__sortby') == row %?>
+        <a href="?cmd=<?% cmd %?><?% daten %?>&amp;__sortby=<?% row %?>&amp;__desc=<?% IF cgi.param('__sortby') == row && cgi.param('__desc') == 1 %?>0<?% ELSE %?>1<?% END %?>" >
+        <?% chop(label,trunc) %?>
+        </a>
+        <?% "</strong>" IF cgi.param('__sortby') == row %?>
+        <?% "<strong>" IF cgi.param('__sortby') == row && cgi.param('__desc') == 0 %?>
+        <a href="?cmd=<?% cmd %?><?% daten %?>&amp;__sortby=<?% row %?>&amp;__desc=0" ><img src="images/asc.png"></a>
+        <?% "</strong>" IF cgi.param('__sortby') == row && cgi.param('__desc') == 0 %?>
+        <?% "<strong>" IF cgi.param('__sortby') == row && cgi.param('__desc') == 1 %?>
+        <a href="?cmd=<?% cmd %?><?% daten %?>&amp;__sortby=<?% row %?>&amp;__desc=1" ><img src="images/desc.png"></a>
+        <?% "</strong>" IF cgi.param('__sortby') == row && cgi.param('__desc') == 1 %?>
+<?% END %?>
+<?% ######################################################################## %?>
+<?% BLOCK RowButtons %?>
+<a href="?cmd=switch&amp;data=<?% id %?>" title="<?% gettext("Switch to channel") %?>">[S]</a>&nbsp;
+<?%- IF allow('cedit') -%?>
+<a href="?cmd=cedit&amp;data=<?% id %?>" title="<?% gettext("Edit channel") %?>">[E]</a>&nbsp;
+<?%- END -%?>
+<?%- IF allow('cdelete') -%?>
+<a href="javascript:sure(document.KanalListe, '<?% gettext("Would you like to delete this channel?") %?>\n\'<?% escape(name) %?>\' ?','?cmd=cdelete&amp;data=<?% id %?>')"
+   title="<?% gettext("Delete channel") %?>" >[D]</a>
+<?%- END -%?>
+<?% END %?>
+<?% ######################################################################## %?>
+<?% BLOCK Item %?>
+        <tr<?% ' bgcolor="#F5F5F5"' IF loop.count mod 2 == 0 %?>>
+          <td>
+            <?% IF enableform %?>
+        			<input type="checkbox" value="<?% id %?>" name="<?% name %?>" />
+             <?% END %?>
+          </td>
+          <td>
+<?% IF allow('cedit') %?>
+            <a href="?cmd=cedit&amp;data=<?% id %?>">
+<?% END %?>
+            <?% POS %?>.<?% name %?>
+<?% IF allow('cedit') %?>
+            </a>
+<?% END %?>
+          </td>
+          <td>
+            <?% frequency %?>
+          </td>
+          <td>
+            <?% parameters %?>
+          </td>
+          <td>
+            <?% source %?>
+          </td>
+          <!--<td>
+            <?% srate %?>
+          </td>-->
+          <td>
+            <?% chop(VPID,16) %?>
+          </td>
+          <td>
+            <?% chop(APID,16) %?>
+          </td>
+          <td>
+            <?% chop(TPID,16) %?>
+          </td>
+          <td>
+            <?% chop(CA,16) %?>
+          </td>
+          <td align="right">
+            <?% PROCESS RowButtons %?>
+           </td>
+        </tr>
+<?% END %?>
+<?% ######################################################################## %?>
+<?% IF cgi.param('data') != "" %?>
+    <?% search = cgi.param('data') %?>
+<?% END %?>
+<h1>
+    <?% gettext("Channels") %?>
+    <?% IF search.defined %?> : "<?% search %?>"
+    <?% END %?>
+</h1>
+    <p>
+      <form name="KanalListe">
+<?% INCLUDE 'widgets/referer.tmpl'%?>
+<?% IF allow( 'cnew' ) %?>
+      <a href="?cmd=cnew">
+        [<?% gettext("Create new channel") %?>]
+      </a>
+<?% END %?>
+<?% IF allow( 'cupdate' ) %?>
+     <a href="?cmd=cupdate">
+        [<?% gettext("Update channels") %?>]
+      </a>
+<?% END %?>
+    <?% gettext("Search for channels") %?> :
+            <input type="hidden" name="cmd" value="clist" />
+            <input type="text" name="data" size="18" <?% IF search.defined %?>value="<?% search %?>"<?% END %?> />
+        </form>
+    </p>
+<?% IF enableform %?>
+    <p>
+        <a href="#" onclick="selAll(document.clist,1)">[<?% gettext("Select all") %?>]</a>&nbsp;
+        <a href="#" onclick="selAll(document.clist,0)">[<?% gettext("Unselect all") %?>]</a>&nbsp;
+        <a href="#" onclick="reverse(document.clist)">[<?% gettext("Reverse select") %?>]</a>&nbsp;
+        <a href="#" onclick="Delete('<?% gettext("Would you like to delete these channels?") %?>',
+                            '<?% gettext("Nothing selected!") %?>','cdelete',document.clist)">
+                            [<?% gettext("Delete channels") %?>]
+        </a>
+    </p>
+<?% END %?>
+
+
+<?% IF data.size > 1 %?>
+<?% fields = data.shift %?>
+<form name="clist" action="">
+    <table border="0" cellspacing="0" cellpadding="0"  summary="" width="100%">
+    <tr><th width="20"><?% PROCESS SortItem row="POS" label="" trunc=5 %?></th>
+        <th width="120"><?% PROCESS SortItem row="Name" label=gettext('Name') trunc=20 %?></th>
+        <th><?% PROCESS SortItem row="Frequency"  label=gettext('Transponder frequency') trunc=6 %?></th>
+        <th><?% PROCESS SortItem row="Parameters"  label=gettext('Various parameters, depending on signal source') trunc=8 %?></th>
+        <th><?% PROCESS SortItem row="Source" label=gettext('Source') trunc=6  %?></th>
+        <th><?% PROCESS SortItem row="VPID" label=gettext('Video PID (VPID)') trunc=10  %?></th>
+        <th><?% PROCESS SortItem row="APID" label=gettext('Audio PID (APID)') trunc=10  %?></th>
+        <th><?% PROCESS SortItem row="TPID" label=gettext('Teletext PID (TPID)') trunc=10  %?></th>
+        <th><?% PROCESS SortItem row="CA" label=gettext('Conditional access (CA)') trunc=10  %?></th>
+        <th width="64" align="right"></th>
+    </tr>
+    <?% FOREACH zeile = data %?>
+        <?% id=zeile.0;name=zeile.1;frequency=zeile.2;parameters=zeile.3;source=zeile.4;srate=zeile.5;VPID=zeile.6;APID=zeile.7;TPID=zeile.8;CA=zeile.9;SID=zeile.10;NID=zeile.11;TID=zeile.12;RID=zeile.13;GRP=zeile.14;POS=zeile.15;CGRP=zeile.16;HOST=zeile.17; %?>
+        <?% IF not sortby.defined && OLDHOST != HOST  %?>
+            <tr>
+                <td colspan=10 bgcolor='#CCCCCC'><b><?% gettext("Video disk recorder") %?> : <?% HOST %?></b></td>
+            <tr>
+        <?% OLDHOST = HOST %?>
+        <?% END %?>
+        <?% IF not sortby.defined && CGRP != CGRP_OLD %?>
+            <tr>
+                <td colspan=10 bgcolor='#DDDDDD'><b><?% CGRP %?></b></td>
+            <tr>
+        <?% END %?>
+        <?% PROCESS Item %?>
+        <?% CGRP_OLD = CGRP %?>
+    <?% END %?>
+   </table>
+</form>
+<?% END %?>
+
diff --git a/skins/html/cmdlist.tmpl b/skins/html/cmdlist.tmpl
new file mode 100644
index 0000000..54e48ce
--- /dev/null
+++ b/skins/html/cmdlist.tmpl
@@ -0,0 +1,38 @@
+<h1><?% gettext("Commands list") %?></h1>
+<!-- TableTemplate -->
+<?% IF param.headingText %?>
+<table width=100%><tr><td class='tableheader'><h3><?% param.headingText %?></h3>
+<?% END %?>
+<table border="0" width="95%">
+<?% fields = data.shift %?>
+    <tr>
+    <?% FOREACH field = fields %?>
+        <?% NEXT IF field.match('^__') %?>
+        <th>
+            <nobr><?% field %?>
+            <?% IF param.sortable %?>
+            <a href="?cmd=<?% cgi.param('cmd') %?>&__sortby=<?% field %?>&__desc=0"><img src="images/asc.png"></a>
+            <a href="?cmd=<?% cgi.param('cmd') %?>&__sortby=<?% field %?>&__desc=1"><img src="images/desc.png"></a>
+            <?% END %?>
+            </nobr>
+        </th>
+    <?% END %?>
+    </tr>
+    <?% FOREACH zeile = data %?>
+    <tr>
+        <?% c = -1 %?>
+        <?% FOREACH field = zeile %?>
+            <?% c = c + 1 %?>
+            <?% NEXT IF fields.$c.match('^__') %?>
+            <td>
+            <a href='?cmd=cmd&data=<?% zeile.first %?>'>
+            <?% field.replace('\|', '<p>').replace('\n', '<br>') %?></td>
+            </a>
+        <?% END %?>
+    </tr>
+    <?% END %?>
+</table>
+<?% IF param.headingText %?>
+</td></tr></table>
+<p>
+<?% END %?>
diff --git a/skins/html/display.tmpl b/skins/html/display.tmpl
new file mode 100644
index 0000000..42432c8
--- /dev/null
+++ b/skins/html/display.tmpl
@@ -0,0 +1,103 @@
+<script language="javascript" type="text/javascript">
+<!--
+
+    <?% INCLUDE javascript/records.js %?>
+
+-->
+</SCRIPT>
+<?% USE date %?>
+
+<h1><?% gettext("Detailed program information") %?></h1>
+<!-- TableTemplate -->
+<table border="0" width="95%">
+<?% fields = data.shift %?>
+<?% values = data.shift %?>
+    <?% c = -1 %?>
+    <?% IF values.13 %?>
+       <?% Image = values.13 %?>
+    <?% END %?>
+    <?% FOREACH field = fields %?>
+        <?% c = c + 1 %?>
+        <?% NEXT UNLESS values.$c %?>
+        <?% NEXT IF field == gettext('Percent') && values.$c > 100 %?>
+        <?% NEXT IF field.match('^__') %?>
+        <tr>
+            <td><?% field %?></td>
+        <?% IF field == gettext('Channel') %?>
+            <td><a href="?cmd=program&amp;data=<?% values.$c %?>"><?% values.$c %?></a></td>
+        <?% ELSIF field == gettext('Service') %?>
+            <td>
+            <a href="?cmd=search&amp;data=<?% url( values.1 ) %?>">[<?% gettext("Search for repeats") %?>]</a>
+            <?% IF values.10 && allow('tedit') %?>
+                <a href="?cmd=tedit&amp;data=<?% values.10 %?>"><span name='recordlink' class='normal'><b>[<?% gettext("Edit this timer") %?>]</b></span></a>
+            <?% ELSIF allow('tnew')%?>
+                <a href="?cmd=tnew&amp;data=<?% values.$c %?>"><span name='recordlink' id='<?% values.$c %?>' class='normal'>[<?% gettext("To record") %?>]</span></a>
+            <?% END %?>
+            <a target="_blank" href="http://german.imdb.com/find?s=tt&amp;site=aka&amp;q=<?% data.last.1 %?>">
+                [<?% gettext("Search with IMDb") %?>]
+            </a>
+            <a target="_blank" href="http://www.ofdb.de/view.php?page=suchergebnis&Kat=Titel&SText=<?% data.last.1 %?>">
+                [<?% gettext("Search with OFDb") %?>]
+            </a>
+            <?% level = values.16 %?>
+            <?% IF level && allow('topten') %?><br/><a href="?cmd=topten" title="<?% gettext("Top Ten entrys") %?>" ><?% "*" FILTER repeat(level) %?></a><?% END %?>
+            </td>
+        <?% ELSIF field == gettext('Percent') %?>
+            <?% NEXT IF values.$c > 100 %?>
+            <td valign='bottom'><nobr>
+                <?% fac = 3 %?>
+                <?% val = values.$c * fac %?>
+                <?% per = (100 * fac) - val  + 0.999 | format('%d') %?>
+                <?% per2 = (100 * fac) - per %?>
+                <?% text = (per / fac) | format("<br><font size='1'>%d%%</font>") %?>
+                <table width="100" cellspacing='0' cellpadding='0'>
+                    <tr>
+                    <td bgcolor="#dedede"><img src='images/blank.png' width="<?% per %?>" height='1' hspace=0 vspace=0><?% (per >= 19 ? text : "&nbsp;") %?></td>
+                    <td bgcolor="#ffffff"><img src='images/blank.png' width="<?% per2 %?>" height='1' hspace=0 vspace=0><?% (per <= 20 ? text : "") %?></td>
+                    <tr>
+                </table>
+            </td>
+
+        <?% ELSIF field == gettext('Description') %?>
+            <td>
+            <?% IF Image %?>
+                <?% FOREACH img = Image.split("\n") %?>
+                <img src='?cmd=eimage&data=<?% img %?>' border=1 align='right'>
+                <?% END %?>
+            <?% END %?>
+            <?% values.$c %?>
+            </td>
+        <?% ELSIF field == gettext('Start') %?>
+            <td>
+			          <?% date.format(values.$c,"%A, %x",locale) %?>&nbsp;
+                <?% date.format(values.$c,"%H:%M",locale) %?>
+                <?% IF values.14 && values.14 != values.$c %?>&nbsp;(<?% gettext("PDC") %?>&nbsp;<?% date.format(values.14,"%H:%M",locale) %?>) <?% END %?>
+            </td>
+        <?% ELSIF field == gettext('Stop') %?>
+            <td>
+			          <?% date.format(values.$c,"%A, %x",locale) %?>&nbsp;
+                <?% date.format(values.$c,"%H:%M",locale) %?>
+            </td>
+        <?% ELSE %?>
+            <td><?% values.$c %?></td>
+        <?% END %?>
+        </tr>
+    <?% END %?>
+    <?% content = values.17.split(" "); %?>
+    <?% IF content.size %?>
+        <tr>
+          <td>
+          <?% gettext("Content") %?>
+          </td>
+          <td>
+<?% FOREACH c=content %?>
+  <?% ct = getModule('EPG').content(c) %?>
+  <?% IF ct && loop.count != 1 %?>,<?% END %?>
+  <a href="?cmd=search&amp;__contentid=<?% c %?>">
+    <?% ct %?>
+  </a>
+<?% END %?>
+          </td>
+          </tr>
+    <?% END %?>
+</table>
diff --git a/skins/html/favicon.ico b/skins/html/favicon.ico
new file mode 100644
index 0000000..615b445
--- /dev/null
+++ b/skins/html/favicon.ico
diff --git a/skins/html/filesys.tmpl b/skins/html/filesys.tmpl
new file mode 100644
index 0000000..da9462a
--- /dev/null
+++ b/skins/html/filesys.tmpl
@@ -0,0 +1,75 @@
+<?%
+statusfiles = [];
+trash = param.usage.shift;
+
+IF param.graphic;
+    FILTER null;
+        FOREACH device = param.usage;
+            name = reentities(device.first).split('/').last;
+
+            free = 100 - device.5;
+            d = [
+                [ device.3, device.4],
+                [ device.5, free],
+            ];
+
+            USE my_graph = GD.Graph.pie(200, 150);
+
+            label = gettext('Total space');
+            label = "${label} ${device.0} ${device.2}";
+            my_graph.set(
+                label => label,
+                pie_height => 6,
+                axislabelclr => 'black',
+                shadow => 1,
+            );
+            my_graph.set_title_font(param.font,8);
+            my_graph.set_value_font(param.font,8);
+            my_graph.set_label_font(param.font,6);
+
+            file = writefile("status_filesys_${name}.gif", my_graph.plot(d).gif );
+            statusfiles.push(file);
+        END;
+    END;
+END;
+%?>
+<!-- Vitals Template -->
+<?% IF param.headingText %?>
+<h3><?% param.headingText %?></h3>
+<?% END %?>
+
+<?% IF param.graphic %?>
+    <table border="0" width="95%">
+    <?% count = 0 %?>
+    <?% FOREACH file = statusfiles %?>
+    	<?% IF count % 2 == 0 %?>
+    		<?% IF count > 0 %?>
+    </tr>
+    		<?% END %?>
+     <tr>
+    	<?% END %?>
+         <td colspan=2 align=center>
+             <img src="<?% file %?>" hspace=5>
+         </td>
+    	<?% count = count + 1 %?>
+     <?% END %?>
+    <?% IF count > 0 %?>
+     </tr>
+    <?% END %?><tr>
+    </table>
+<?% ELSE %?>
+    <table border="0" width="95%">
+            <tr>
+            <?% FOREACH field = trash %?>
+                <th><?% field %?></th>
+            <?% END %?>
+            </tr>
+            <?% FOREACH zeile = data %?>
+            <tr>
+                <?% FOREACH field = zeile %?>
+                <td><?% field %?></td>
+                <?% END %?>
+            </tr>
+            <?% END %?>
+    </table>
+<?% END %?>
diff --git a/skins/html/help.tmpl b/skins/html/help.tmpl
new file mode 100644
index 0000000..d66d361
--- /dev/null
+++ b/skins/html/help.tmpl
@@ -0,0 +1,187 @@
+<?% IF cgi.param('cmd') == 'help' && cgi.param('data') == 'menu' %?>
+<script type="text/javascript" src="javascript/xtree.js"></script>
+<link type="text/css" rel="stylesheet" href="style/xtree.css" />
+
+<script type="text/javascript">
+/// XP Look
+webFXTreeConfig.rootIcon		= "images/xp/folder.png";
+webFXTreeConfig.openRootIcon	= "images/xp/openfolder.png";
+webFXTreeConfig.folderIcon		= "images/xp/folder.png";
+webFXTreeConfig.openFolderIcon	= "images/xp/openfolder.png";
+webFXTreeConfig.fileIcon		= "images/xp/file.png";
+webFXTreeConfig.lMinusIcon		= "images/xp/Lminus.png";
+webFXTreeConfig.lPlusIcon		= "images/xp/Lplus.png";
+webFXTreeConfig.tMinusIcon		= "images/xp/Tminus.png";
+webFXTreeConfig.tPlusIcon		= "images/xp/Tplus.png";
+webFXTreeConfig.iIcon			= "images/xp/I.png";
+webFXTreeConfig.lIcon			= "images/xp/L.png";
+webFXTreeConfig.tIcon			= "images/xp/T.png";
+
+var tree = new WebFXTree("XXV", "?cmd=<?% getModule('HTTPD').StartPage %?>");
+
+<?% IF allow('now') %?>
+    var runnow = new WebFXTreeItem("<?% gettext("Running now") %?>","?cmd=now",tree);
+        runnow.add(new WebFXTreeItem("<?% gettext("Next",12) %?>",  "?cmd=next"));
+
+    <?% USE date %?>
+    <?% FOREACH zeit = param.periods.split(','); %?>
+        <?% runningnext = 0 %?>
+        <?% tom = 0 %?>
+        <?% PERL %?>
+            use Date::Manip;
+            my $z;
+            $z   = UnixDate(ParseDate($stash->{zeit}),"%s") || 0;
+            if($z and $z < time) {
+                $z += 86400;
+                $stash->set('tom', 1);
+            }
+            $stash->set('z', $z);
+        <?% END %?>
+        <?% NEXT UNLESS z %?>
+
+        <?% IF tom %?>
+        runnow.add(new WebFXTreeItem("<?% date.format(z, "%H:%M (%a)", locale) %?>",  "?cmd=now&amp;data=<?% z %?>"));
+        <?% ELSE %?>
+        runnow.add(new WebFXTreeItem("<?% date.format(z, "%H:%M", locale) %?>",  "?cmd=now&amp;data=<?% z %?>"));
+        <?% END %?>
+    <?% END %?>
+<?% END %?>
+
+<?% IF allow('schema') %?>
+    var program = new WebFXTreeItem("<?% gettext("Program guide") %?>","?cmd=schema",tree);
+    <?% IF allow('topten') %?>program.add(new WebFXTreeItem("<?% gettext("Top ten entry") %?>",    "?cmd=t10"));<?% END %?>
+    <?% FOREACH ch = param.CHANNELS %?>
+        <?% IF ch.2 != lastgroup;lastgroup = ch.2 %?>
+        <?% CNT = CNT + 1 %?>
+    var programgroup<?% CNT %?> = new WebFXTreeItem("<?% escape(chop(lastgroup,10)) %?>",  "?cmd=program&amp;data=<?% ch.1 %?>",program);
+        <?% END %?>
+        programgroup<?% CNT %?>.add(new WebFXTreeItem("<?% escape(chop(ch.0,10)) %?>",  "?cmd=program&amp;data=<?% ch.1 %?>"));
+    <?% END %?>
+<?% END %?>
+
+
+<?% IF allow('alist') || allow('tlist') || allow('movetimerlist') %?>
+var control = new WebFXTreeItem("<?% gettext("Programming",15) %?>","?cmd=tlist",tree);
+<?% IF allow('tlist') %?>control.add(new WebFXTreeItem("<?% gettext("Timers",12) %?>",        "?cmd=tlist"));<?% END %?>
+<?% IF allow('alist') %?>control.add(new WebFXTreeItem("<?% gettext("Autotimer",12) %?>",     "?cmd=alist"));<?% END %?>
+<?% IF allow('movetimerlist') %?>control.add(new WebFXTreeItem("<?% gettext("Rules to move timer",12) %?>","?cmd=movetimerlist"));<?% END %?>
+<?% END %?>
+
+<?% IF allow('rlist') || allow('mlist') || allow('mllist') %?>
+var media = new WebFXTreeItem("<?% gettext("Media content",15) %?>","?cmd=rlist",tree);
+<?% IF allow('rlist') %?>media.add(new WebFXTreeItem("<?% gettext("Recordings",12) %?>",    "?cmd=rlist"));<?% END %?>
+<?% IF allow('mlist') %?>media.add(new WebFXTreeItem("<?% gettext("Music",12) %?>",         "?cmd=mlist"));<?% END %?>
+<?% IF allow('mllist') %?>media.add(new WebFXTreeItem("<?% gettext("Media library",12) %?>","?cmd=mllist"));<?% END %?>
+<?% END %?>
+
+<?% IF allow('remote') || allow('vtxpage') || allow('report') || allow('cmdlist') %?>
+var tools = new WebFXTreeItem("<?% gettext("Tools",15) %?>",0,tree);
+<?% IF allow('remote') %?>tools.add(new WebFXTreeItem("<?% gettext("Remote",12) %?>",     "?cmd=remote"));<?% END %?>
+<?% IF allow('vtxpage') %?>tools.add(new WebFXTreeItem("<?% gettext("Teletext",12) %?>",  "?cmd=vtxpage"));<?% END %?>
+<?% IF allow('report') %?>tools.add(new WebFXTreeItem("<?% gettext("Report",12) %?>",     "?cmd=report"));<?% END %?>
+<?% IF allow('cmdlist') %?>tools.add(new WebFXTreeItem("<?% gettext("Commands",12) %?>",  "?cmd=cmdlist"));<?% END %?>
+<?% END %?>
+
+
+<?% IF allow('sa') %?>
+var status = new WebFXTreeItem("<?% gettext("Status") %?>","?cmd=sa",tree);
+status.add(new WebFXTreeItem("<?% gettext("Vitals") %?>",      "?cmd=sv"));
+status.add(new WebFXTreeItem("<?% gettext("Memory") %?>",      "?cmd=sm"));
+status.add(new WebFXTreeItem("<?% gettext("Filesystem") %?>",  "?cmd=sf"));
+status.add(new WebFXTreeItem("<?% gettext("Network") %?>",     "?cmd=sn"));
+status.add(new WebFXTreeItem("<?% gettext("Hardware") %?>",    "?cmd=sh"));
+<?% END %?>
+
+<?% IF allow('more') %?>
+var info = new WebFXTreeItem("<?% gettext("Documentation") %?>",0,tree);
+info.add(new WebFXTreeItem("<?% gettext("History") %?>",   "?cmd=more&data=CHANGELOG"));
+info.add(new WebFXTreeItem("<?% gettext("License") %?>",   "?cmd=more&data=COPYING"));
+info.add(new WebFXTreeItem("<?% gettext("Readme") %?>",   "?cmd=more&data=README"));
+<?% END %?>
+
+<?% IF allow('logger') %?>
+var logger = new WebFXTreeItem("<?% gettext("Log files") %?>",0,tree);
+logger.add(new WebFXTreeItem("<?% gettext("Standard") %?>",  "?cmd=logger&data=main"));
+logger.add(new WebFXTreeItem("<?% gettext("Syslog") %?>",    "?cmd=logger&data=syslog"));
+<?% END %?>
+
+<?% IF allow('ul') || allow('uprefs') || allow('vl') || allow('cl') || allow('rel') %?>
+var admin = new WebFXTreeItem("<?% gettext("Administration") %?>",0,tree);
+<?% IF allow('vl') %?>admin.add(new WebFXTreeItem("<?% gettext("Video disk recorder",12) %?>",  "?cmd=vl"));<?% END %?>
+<?% IF allow('cl') %?>admin.add(new WebFXTreeItem("<?% gettext("Channels",12) %?>",  "?cmd=cl"));<?% END %?>
+<?% IF allow('ul') %?>admin.add(new WebFXTreeItem("<?% gettext("User") %?>","?cmd=ul"));<?% END %?>
+<?% IF allow('uprefs') %?>admin.add(new WebFXTreeItem("<?% gettext("Own settings") %?>","?cmd=uprefs"));<?% END %?>
+<?% IF allow('rel') %?>admin.add(new WebFXTreeItem("<?% gettext("Reload") %?>","?cmd=rel"));<?% END %?>
+<?% END %?>
+
+<?% IF allow('configedit') %?>
+    var prefs = new WebFXTreeItem("<?% gettext("Preferences") %?>","?cmd=configedit",tree);
+    <?% FOREACH co = param.CONFIGS %?>
+      <?% IF co != "CONFIG" %?>
+        prefs.add(new WebFXTreeItem("<?% chop(co,10) %?>",  "?cmd=configedit&amp;data=<?% co %?>"));
+      <?% END %?>
+    <?% END %?>
+<?% END %?>
+
+<?% IF allow('logout') %?>var lout = new WebFXTreeItem("<?% gettext("Logout") %?>","?cmd=logout",tree);<?% END %?>
+
+document.write(tree);
+
+</script>
+
+<p>
+<form>
+    <input type="hidden" name="cmd" value='search'>
+    <?% gettext("search") %?>:<input style='width:100px' type="text" name="data" size='10'>
+</form>
+</div>
+
+<?% global.hidefooter = 1 %?>
+<?% ELSE %?>
+<!-- help -->
+<?% BLOCK item %?>
+        <td>
+            <?% long %?> ( <?% short %?> )
+        </td>
+        <td>
+            <a href="?cmd=<?% short %?>">
+            <font class="title"><?% desc %?></font>
+            </a>
+        </td>
+<?% END %?>
+
+
+<h1>XXV - Version <?% version %?></h1>
+<p><?% data.shift %?></p>
+  <?% IF data.size > 1 %?>
+<table summary=""  width="100%">
+    <?% FOREACH zeile = data %?>
+    <?% IF verbose;"<!-- Item: ";FOREACH x = zeile;loop.count - 1;":";x.replace("-"," ");"|";END;"-->";END %?>
+    <tr<?% " class='two'" IF loop.count mod 2 == 0 %?>>
+        <?% short=zeile.0;long=zeile.1;modul=zeile.2;desc=zeile.3 %?>
+        <?% IF allow(long) %?>
+		<?% IF !old.defined || modul != old %?>
+        <?% IF old.defined; %?>
+  	</tr>
+  	<tr>
+       <?% END %?>
+        <td colspan="12">
+            <h2>
+                <a href="?cmd=doc&amp;data=<?% modul %?>">
+                    <?% modul %?>
+                </a>
+           </h2>
+        </td>
+    </tr>
+    <tr>
+    <?% END %?>
+    <?% IF allow(long) %?>
+        <?% PROCESS item %?>
+    <?% END %?>
+    <?% old = modul %?>
+    </tr>
+    <?% END %?>
+    <?% END %?>
+</table>
+  <?% END %?>
+<?% END %?>
diff --git a/skins/html/images/16_9Screen.png b/skins/html/images/16_9Screen.png
new file mode 100644
index 0000000..6b81670
--- /dev/null
+++ b/skins/html/images/16_9Screen.png
diff --git a/skins/html/images/1_stars.png b/skins/html/images/1_stars.png
new file mode 100644
index 0000000..f06010f
--- /dev/null
+++ b/skins/html/images/1_stars.png
diff --git a/skins/html/images/2_stars.png b/skins/html/images/2_stars.png
new file mode 100644
index 0000000..905316f
--- /dev/null
+++ b/skins/html/images/2_stars.png
diff --git a/skins/html/images/3_stars.png b/skins/html/images/3_stars.png
new file mode 100644
index 0000000..1783294
--- /dev/null
+++ b/skins/html/images/3_stars.png
diff --git a/skins/html/images/4_3Screen.png b/skins/html/images/4_3Screen.png
new file mode 100644
index 0000000..737016e
--- /dev/null
+++ b/skins/html/images/4_3Screen.png
diff --git a/skins/html/images/4_stars.png b/skins/html/images/4_stars.png
new file mode 100644
index 0000000..9be4448
--- /dev/null
+++ b/skins/html/images/4_stars.png
diff --git a/skins/html/images/5_stars.png b/skins/html/images/5_stars.png
new file mode 100644
index 0000000..5ba2ed7
--- /dev/null
+++ b/skins/html/images/5_stars.png
diff --git a/skins/html/images/I.png b/skins/html/images/I.png
new file mode 100644
index 0000000..e8512fb
--- /dev/null
+++ b/skins/html/images/I.png
diff --git a/skins/html/images/L.png b/skins/html/images/L.png
new file mode 100644
index 0000000..eb334ed
--- /dev/null
+++ b/skins/html/images/L.png
diff --git a/skins/html/images/Lminus.png b/skins/html/images/Lminus.png
new file mode 100644
index 0000000..f7c43c0
--- /dev/null
+++ b/skins/html/images/Lminus.png
diff --git a/skins/html/images/Lplus.png b/skins/html/images/Lplus.png
new file mode 100644
index 0000000..848ec2f
--- /dev/null
+++ b/skins/html/images/Lplus.png
diff --git a/skins/html/images/T.png b/skins/html/images/T.png
new file mode 100644
index 0000000..3017325
--- /dev/null
+++ b/skins/html/images/T.png
diff --git a/skins/html/images/Tminus.png b/skins/html/images/Tminus.png
new file mode 100644
index 0000000..2260e42
--- /dev/null
+++ b/skins/html/images/Tminus.png
diff --git a/skins/html/images/Tplus.png b/skins/html/images/Tplus.png
new file mode 100644
index 0000000..2c8d8f4
--- /dev/null
+++ b/skins/html/images/Tplus.png
diff --git a/skins/html/images/arrow.down.png b/skins/html/images/arrow.down.png
new file mode 100644
index 0000000..675d84b
--- /dev/null
+++ b/skins/html/images/arrow.down.png
diff --git a/skins/html/images/arrow.right.png b/skins/html/images/arrow.right.png
new file mode 100644
index 0000000..79abee5
--- /dev/null
+++ b/skins/html/images/arrow.right.png
diff --git a/skins/html/images/asc.png b/skins/html/images/asc.png
new file mode 100644
index 0000000..80b153f
--- /dev/null
+++ b/skins/html/images/asc.png
diff --git a/skins/html/images/at.png b/skins/html/images/at.png
new file mode 100644
index 0000000..4201164
--- /dev/null
+++ b/skins/html/images/at.png
diff --git a/skins/html/images/back.png b/skins/html/images/back.png
new file mode 100644
index 0000000..9627bbb
--- /dev/null
+++ b/skins/html/images/back.png
diff --git a/skins/html/images/back_big.png b/skins/html/images/back_big.png
new file mode 100644
index 0000000..024e4e4
--- /dev/null
+++ b/skins/html/images/back_big.png
diff --git a/skins/html/images/bar_green.png b/skins/html/images/bar_green.png
new file mode 100644
index 0000000..c7ace12
--- /dev/null
+++ b/skins/html/images/bar_green.png
diff --git a/skins/html/images/bar_red.png b/skins/html/images/bar_red.png
new file mode 100644
index 0000000..4086f57
--- /dev/null
+++ b/skins/html/images/bar_red.png
diff --git a/skins/html/images/blank.png b/skins/html/images/blank.png
new file mode 100644
index 0000000..cee9cd3
--- /dev/null
+++ b/skins/html/images/blank.png
diff --git a/skins/html/images/delete.png b/skins/html/images/delete.png
new file mode 100644
index 0000000..a495dad
--- /dev/null
+++ b/skins/html/images/delete.png
diff --git a/skins/html/images/desc.png b/skins/html/images/desc.png
new file mode 100644
index 0000000..675d84b
--- /dev/null
+++ b/skins/html/images/desc.png
diff --git a/skins/html/images/dolby.png b/skins/html/images/dolby.png
new file mode 100644
index 0000000..6eb9a4c
--- /dev/null
+++ b/skins/html/images/dolby.png
diff --git a/skins/html/images/down.png b/skins/html/images/down.png
new file mode 100644
index 0000000..39c9c30
--- /dev/null
+++ b/skins/html/images/down.png
diff --git a/skins/html/images/edit.png b/skins/html/images/edit.png
new file mode 100644
index 0000000..12700d6
--- /dev/null
+++ b/skins/html/images/edit.png
diff --git a/skins/html/images/english.gif b/skins/html/images/english.gif
new file mode 100644
index 0000000..c2eedfc
--- /dev/null
+++ b/skins/html/images/english.gif
diff --git a/skins/html/images/exit.png b/skins/html/images/exit.png
new file mode 100644
index 0000000..19df8c4
--- /dev/null
+++ b/skins/html/images/exit.png
diff --git a/skins/html/images/file.png b/skins/html/images/file.png
new file mode 100644
index 0000000..a20c6fa
--- /dev/null
+++ b/skins/html/images/file.png
diff --git a/skins/html/images/foldericon.png b/skins/html/images/foldericon.png
new file mode 100644
index 0000000..2684748
--- /dev/null
+++ b/skins/html/images/foldericon.png
diff --git a/skins/html/images/french.gif b/skins/html/images/french.gif
new file mode 100644
index 0000000..3886d93
--- /dev/null
+++ b/skins/html/images/french.gif
diff --git a/skins/html/images/german.gif b/skins/html/images/german.gif
new file mode 100644
index 0000000..dbd8ea7
--- /dev/null
+++ b/skins/html/images/german.gif
diff --git a/skins/html/images/leer.png b/skins/html/images/leer.png
new file mode 100644
index 0000000..7a50497
--- /dev/null
+++ b/skins/html/images/leer.png
diff --git a/skins/html/images/linkbg.png b/skins/html/images/linkbg.png
new file mode 100644
index 0000000..cc6a456
--- /dev/null
+++ b/skins/html/images/linkbg.png
diff --git a/skins/html/images/logo.gif b/skins/html/images/logo.gif
new file mode 100755
index 0000000..37f43f5
--- /dev/null
+++ b/skins/html/images/logo.gif
diff --git a/skins/html/images/menu_big.png b/skins/html/images/menu_big.png
new file mode 100644
index 0000000..e378030
--- /dev/null
+++ b/skins/html/images/menu_big.png
diff --git a/skins/html/images/movie.png b/skins/html/images/movie.png
new file mode 100644
index 0000000..0c24571
--- /dev/null
+++ b/skins/html/images/movie.png
diff --git a/skins/html/images/new.png b/skins/html/images/new.png
new file mode 100644
index 0000000..8aa9166
--- /dev/null
+++ b/skins/html/images/new.png
diff --git a/skins/html/images/newfolder.png b/skins/html/images/newfolder.png
new file mode 100644
index 0000000..0695da8
--- /dev/null
+++ b/skins/html/images/newfolder.png
diff --git a/skins/html/images/next.png b/skins/html/images/next.png
new file mode 100644
index 0000000..c3bb0e8
--- /dev/null
+++ b/skins/html/images/next.png
diff --git a/skins/html/images/nocover.gif b/skins/html/images/nocover.gif
new file mode 100644
index 0000000..81cd60e
--- /dev/null
+++ b/skins/html/images/nocover.gif
diff --git a/skins/html/images/notimers.png b/skins/html/images/notimers.png
new file mode 100644
index 0000000..dd8d629
--- /dev/null
+++ b/skins/html/images/notimers.png
diff --git a/skins/html/images/oben.png b/skins/html/images/oben.png
new file mode 100644
index 0000000..72a9633
--- /dev/null
+++ b/skins/html/images/oben.png
diff --git a/skins/html/images/off.png b/skins/html/images/off.png
new file mode 100644
index 0000000..6eda545
--- /dev/null
+++ b/skins/html/images/off.png
diff --git a/skins/html/images/ok.png b/skins/html/images/ok.png
new file mode 100644
index 0000000..f4e67f0
--- /dev/null
+++ b/skins/html/images/ok.png
diff --git a/skins/html/images/on.png b/skins/html/images/on.png
new file mode 100644
index 0000000..98e0765
--- /dev/null
+++ b/skins/html/images/on.png
diff --git a/skins/html/images/openfoldericon.png b/skins/html/images/openfoldericon.png
new file mode 100644
index 0000000..15fcd56
--- /dev/null
+++ b/skins/html/images/openfoldericon.png
diff --git a/skins/html/images/radio.png b/skins/html/images/radio.png
new file mode 100644
index 0000000..e877c02
--- /dev/null
+++ b/skins/html/images/radio.png
diff --git a/skins/html/images/record.png b/skins/html/images/record.png
new file mode 100644
index 0000000..03bf621
--- /dev/null
+++ b/skins/html/images/record.png
diff --git a/skins/html/images/record_blue.png b/skins/html/images/record_blue.png
new file mode 100644
index 0000000..4201164
--- /dev/null
+++ b/skins/html/images/record_blue.png
diff --git a/skins/html/images/record_green.png b/skins/html/images/record_green.png
new file mode 100644
index 0000000..03bf621
--- /dev/null
+++ b/skins/html/images/record_green.png
diff --git a/skins/html/images/record_red.png b/skins/html/images/record_red.png
new file mode 100644
index 0000000..748388b
--- /dev/null
+++ b/skins/html/images/record_red.png
diff --git a/skins/html/images/repeat.png b/skins/html/images/repeat.png
new file mode 100644
index 0000000..b92f130
--- /dev/null
+++ b/skins/html/images/repeat.png
diff --git a/skins/html/images/schnell_back.png b/skins/html/images/schnell_back.png
new file mode 100644
index 0000000..6d27e6f
--- /dev/null
+++ b/skins/html/images/schnell_back.png
diff --git a/skins/html/images/schnell_vor.png b/skins/html/images/schnell_vor.png
new file mode 100644
index 0000000..708c5f6
--- /dev/null
+++ b/skins/html/images/schnell_vor.png
diff --git a/skins/html/images/spanish.gif b/skins/html/images/spanish.gif
new file mode 100644
index 0000000..6fdede8
--- /dev/null
+++ b/skins/html/images/spanish.gif
diff --git a/skins/html/images/star.png b/skins/html/images/star.png
new file mode 100644
index 0000000..5e76158
--- /dev/null
+++ b/skins/html/images/star.png
diff --git a/skins/html/images/stardark.png b/skins/html/images/stardark.png
new file mode 100644
index 0000000..edea55d
--- /dev/null
+++ b/skins/html/images/stardark.png
diff --git a/skins/html/images/switch.png b/skins/html/images/switch.png
new file mode 100644
index 0000000..4191979
--- /dev/null
+++ b/skins/html/images/switch.png
diff --git a/skins/html/images/timers.png b/skins/html/images/timers.png
new file mode 100644
index 0000000..585622d
--- /dev/null
+++ b/skins/html/images/timers.png
diff --git a/skins/html/images/trans.gif b/skins/html/images/trans.gif
new file mode 100644
index 0000000..35d42e8
--- /dev/null
+++ b/skins/html/images/trans.gif
diff --git a/skins/html/images/up.png b/skins/html/images/up.png
new file mode 100644
index 0000000..6dd9846
--- /dev/null
+++ b/skins/html/images/up.png
diff --git a/skins/html/images/view_event.png b/skins/html/images/view_event.png
new file mode 100644
index 0000000..04601b5
--- /dev/null
+++ b/skins/html/images/view_event.png
diff --git a/skins/html/images/vor.png b/skins/html/images/vor.png
new file mode 100644
index 0000000..346d0de
--- /dev/null
+++ b/skins/html/images/vor.png
diff --git a/skins/html/images/vtxgfx.gif b/skins/html/images/vtxgfx.gif
new file mode 100644
index 0000000..d9ed146
--- /dev/null
+++ b/skins/html/images/vtxgfx.gif
diff --git a/skins/html/images/xp/I.png b/skins/html/images/xp/I.png
new file mode 100644
index 0000000..e8512fb
--- /dev/null
+++ b/skins/html/images/xp/I.png
diff --git a/skins/html/images/xp/L.png b/skins/html/images/xp/L.png
new file mode 100644
index 0000000..eb334ed
--- /dev/null
+++ b/skins/html/images/xp/L.png
diff --git a/skins/html/images/xp/Lminus.png b/skins/html/images/xp/Lminus.png
new file mode 100644
index 0000000..bba1a31
--- /dev/null
+++ b/skins/html/images/xp/Lminus.png
diff --git a/skins/html/images/xp/Lplus.png b/skins/html/images/xp/Lplus.png
new file mode 100644
index 0000000..727889b
--- /dev/null
+++ b/skins/html/images/xp/Lplus.png
diff --git a/skins/html/images/xp/T.png b/skins/html/images/xp/T.png
new file mode 100644
index 0000000..3017325
--- /dev/null
+++ b/skins/html/images/xp/T.png
diff --git a/skins/html/images/xp/Tminus.png b/skins/html/images/xp/Tminus.png
new file mode 100644
index 0000000..ca8745a
--- /dev/null
+++ b/skins/html/images/xp/Tminus.png
diff --git a/skins/html/images/xp/Tplus.png b/skins/html/images/xp/Tplus.png
new file mode 100644
index 0000000..64bc9da
--- /dev/null
+++ b/skins/html/images/xp/Tplus.png
diff --git a/skins/html/images/xp/file.png b/skins/html/images/xp/file.png
new file mode 100644
index 0000000..a723c74
--- /dev/null
+++ b/skins/html/images/xp/file.png
diff --git a/skins/html/images/xp/folder.png b/skins/html/images/xp/folder.png
new file mode 100644
index 0000000..7b6835d
--- /dev/null
+++ b/skins/html/images/xp/folder.png
diff --git a/skins/html/images/xp/openfolder.png b/skins/html/images/xp/openfolder.png
new file mode 100644
index 0000000..c8292f4
--- /dev/null
+++ b/skins/html/images/xp/openfolder.png
diff --git a/skins/html/images/xxv.gif b/skins/html/images/xxv.gif
new file mode 100644
index 0000000..b46df28
--- /dev/null
+++ b/skins/html/images/xxv.gif
diff --git a/skins/html/images/zurueck.png b/skins/html/images/zurueck.png
new file mode 100644
index 0000000..39a65bd
--- /dev/null
+++ b/skins/html/images/zurueck.png
diff --git a/skins/html/index.tmpl b/skins/html/index.tmpl
new file mode 100644
index 0000000..eda546d
--- /dev/null
+++ b/skins/html/index.tmpl
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
+   "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+<head>
+<link rel="alternate" type="application/rss+xml" title="RSS-News" href="?cmd=request&data=rss">
+<title>XXV - User:<?% user %?></title>
+<meta name="generator" content="XXV System - Version: <?% version %?>" />
+</head>
+<frameset rows="*,1" frameborder="NO" border="1" framespacing="0">
+    <frameset cols="175,*" frameborder="NO" border="1" framespacing="0">
+        <frame src="?cmd=help&data=menu" name="Navigation">
+        <frame src="?cmd=<?% param.start %?>" name="Daten">
+    </frameset>
+    <frame src="about:blank" name="Status">
+</frameset>
+</html>
diff --git a/skins/html/javascript/XHConn.js b/skins/html/javascript/XHConn.js
new file mode 100644
index 0000000..537b555
--- /dev/null
+++ b/skins/html/javascript/XHConn.js
@@ -0,0 +1,41 @@
+/** XHRequest based on                                                       **
+ ** XHConn - Simple XMLHTTP Interface - bfults@gmail.com - 2005-04-08        **
+ ** Code licensed under Creative Commons Attribution-ShareAlike License      **
+ ** http://creativecommons.org/licenses/by-sa/2.0/                           **/
+
+function XHRequest()
+{
+  var xmlhttp, bComplete = false;
+  try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
+  catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
+  catch (e) { try { xmlhttp = new XMLHttpRequest(); }
+  catch (e) { xmlhttp = false; }}}
+  if (!xmlhttp) 
+    return null;
+
+  this.connect = function(sRequest, fnDone, sData)
+              {
+                if (!xmlhttp) return false;
+                bComplete = false;
+
+                try {
+                     xmlhttp.open("GET", sRequest, true);
+                     xmlhttp.onreadystatechange = function() 
+                          {
+                            if (xmlhttp.readyState == 4 && !bComplete)
+                            {
+                                bComplete = true;
+                                fnDone(xmlhttp, sData);
+                            }
+                          };
+                     xmlhttp.send(null);
+                } catch(z) { alert(z); return false; }
+                return true;
+              };
+  return this;
+}
+
+var ajaxconn = new XHRequest();
+
+if (!ajaxconn)
+    alert("XMLHTTP not available. Try a newer/better browser.");
diff --git a/skins/html/javascript/global.js b/skins/html/javascript/global.js
new file mode 100644
index 0000000..8572445
--- /dev/null
+++ b/skins/html/javascript/global.js
@@ -0,0 +1,173 @@
+// To status frame und dann refresh der seite
+function tostatus(url) {
+    myoldurl = location.href;
+    location.href = url;
+}
+
+// Redirect
+function redirect(url, wait, par) {
+    if(! wait) {
+        wait = 0.1;
+    }
+    if(par) {
+        window.setTimeout(par + '.location.href = "' + url + '"', wait * 1000);
+    } else {
+        window.setTimeout('location.href = "' + url + '"', wait * 1000);
+    }
+}
+
+// Program choose
+function di(wert, url) {
+    location.href = url + wert;
+}
+
+// Question bevor delete
+function sure(form, text, url, id) {
+    id = (id) ? id : '';
+    var erg = confirm(text);
+    var refe = encodeURIComponent(form.referer.value);
+    if(erg == true) {
+        var callurl = url + id + '&referer=' + refe;
+        location.href = callurl;
+    }
+}
+
+function Delete(question,warn,cmd,form) {
+// test on checked Boxes
+    ok = new Array;
+    txt = new Array;
+    x = 0;
+    for(var i=0;i<form.length;++i) {
+        var id;
+        if(form.elements[i].type == 'checkbox' && form.elements[i].checked) {
+            id = form.elements[i].value;
+            ok.push(id);
+            txt.push(form.elements[i].name);
+            form.elements[i].checked = 0;
+            x += 1;
+        }
+    }
+    if(x > 0) {
+        if(confirm(question + '\n' + txt.join("\n"))) {
+            tostatus('?cmd=' + cmd + '&data=' + ok.join('_'));
+        }
+    } else {
+        alert(warn);
+    }
+}
+
+function Toggle(warn,form) {
+// test on checked Boxes
+    ok = new Array;
+    txt = new Array;
+    x = 0;
+    for(var i=0;i<form.length;++i) {
+        var id;
+        if(form.elements[i].type == 'checkbox' && form.elements[i].checked) {
+            id = form.elements[i].value;
+            ok.push(id);
+            txt.push(form.elements[i].name);
+            form.elements[i].checked = 0;
+            x += 1;
+        }
+    }
+    if(x > 0) {
+        tostatus('?cmd=ttoggle&data=' + ok.join('_'));
+    } else {
+        alert(warn);
+    }
+}
+
+function selAll(form, type) {
+// check all Boxes
+    for(var i=0;i<form.length;++i) {
+        if(form.elements[i].type == 'checkbox') {
+            form.elements[i].checked = type;
+        }
+    }
+}
+
+function selSwitch(form, search) {
+// switch Boxes with search in name on or off
+    for(var i=0;i<form.length;++i) {
+        if(form.elements[i].type == 'checkbox' && form.elements[i].name == search) {
+            if(form.elements[i].checked) {
+                form.elements[i].checked = 0;
+            } else {
+                form.elements[i].checked = 1;
+            }
+        }
+    }
+}
+
+function reverse(form) {
+// check all Boxes
+    for(var i=0;i<form.length;++i) {
+        if(form.elements[i].type == 'checkbox') {
+            if(form.elements[i].checked) {
+                form.elements[i].checked = 0;
+            } else {
+                form.elements[i].checked = 1;
+            }
+        }
+    }
+}
+
+function Play(warnmsg,form) {
+// test on checked Boxes
+    ok = new Array;
+    x = 0;
+    for(var i=0;i<form.length;++i) {
+        var id;
+        if(form.elements[i].type == 'checkbox' && form.elements[i].checked) {
+            id = form.elements[i].value;
+            ok.push(id);
+            x += 1;
+        }
+    }
+    if(x > 0) {
+          var url = '?cmd=mplaylist&data=' + ok.join('_');
+          location.href = url;
+    } else {
+        alert(warnmsg);
+    }
+}
+
+/* -------------------- Widget Routines --------------- */
+
+/*
+- An AjaxCall to check for right values in HTML Widget
+checkValue(inputObject, msgId, perlCall, wrongMessage, goodMessage);
+checkValue(this, 'id<?% param.count %?>', 'getip', 'host: %s is not exists!', 'ip address is %s')
+*/
+function checkValue (valobj, msgname, cmd, wrongMsg, goodMsg) {
+
+    var fnWhenDone = function (oXML, sData) {
+        var val = sData[0];
+        var msg = sData[1];
+        var wrongMsg = sData[2];
+        var goodMsg = sData[3];
+
+        var o = eval("("+oXML.responseText+")");

+        if(o && o.data && typeof(o.data) == 'string' 
+             && o.success && o.success == true) {
+            msg.className = 'good';
+            msg.innerHTML = goodMsg.replace('%s', o.data);
+        } else {
+            msg.className = 'error';
+            msg.innerHTML = wrongMsg.replace('%s', o.data);
+        }
+    };
+
+    var inputvalue = valobj.value;
+    var msgobj = document.getElementById(msgname);
+    msgobj.innerHTML = 'Check value ...';
+
+    if(inputvalue) {
+        var url = "?cmd=checkvalue&data=" + cmd + ":" + inputvalue + "&ajax=json";
+        var aconn = new XHRequest();
+        if(!aconn)
+          return false;
+        return aconn.connect(url, fnWhenDone, [valobj, msgobj, wrongMsg, goodMsg]);
+    }
+}
diff --git a/skins/html/javascript/helptip.js b/skins/html/javascript/helptip.js
new file mode 100644
index 0000000..6c129d4
--- /dev/null
+++ b/skins/html/javascript/helptip.js
@@ -0,0 +1,240 @@
+/*----------------------------------------------------------------------------\
+|                               Help Tip 1.12                                 |
+|-----------------------------------------------------------------------------|
+|                         Created by Erik Arvidsson                           |
+|                  (http://webfx.eae.net/contact.html#erik)                   |
+|                      For WebFX (http://webfx.eae.net/)                      |
+|-----------------------------------------------------------------------------|
+|           A tool tip like script that can be used for context help          |
+|-----------------------------------------------------------------------------|
+|                  Copyright (c) 1999 - 2002 Erik Arvidsson                   |
+|-----------------------------------------------------------------------------|
+| This software is provided "as is", without warranty of any kind, express or |
+| implied, including  but not limited  to the warranties of  merchantability, |
+| fitness for a particular purpose and noninfringement. In no event shall the |
+| authors or  copyright  holders be  liable for any claim,  damages or  other |
+| liability, whether  in an  action of  contract, tort  or otherwise, arising |
+| from,  out of  or in  connection with  the software or  the  use  or  other |
+| dealings in the software.                                                   |
+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
+| This  software is  available under the  three different licenses  mentioned |
+| below.  To use this software you must chose, and qualify, for one of those. |
+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
+| The WebFX Non-Commercial License          http://webfx.eae.net/license.html |
+| Permits  anyone the right to use the  software in a  non-commercial context |
+| free of charge.                                                             |
+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
+| The WebFX Commercial license           http://webfx.eae.net/commercial.html |
+| Permits the  license holder the right to use  the software in a  commercial |
+| context. Such license must be specifically obtained, however it's valid for |
+| any number of  implementations of the licensed software.                    |
+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
+| GPL - The GNU General Public License    http://www.gnu.org/licenses/gpl.txt |
+| Permits anyone the right to use and modify the software without limitations |
+| as long as proper  credits are given  and the original  and modified source |
+| code are included. Requires  that the final product, software derivate from |
+| the original  source or any  software  utilizing a GPL  component, such  as |
+| this, is also licensed under the GPL license.                               |
+|-----------------------------------------------------------------------------|
+| 2002-09-27 |                                                                |
+| 2001-11-25 | Added a resize to the tooltip if the document width is too     |
+|            | small.                                                         |
+| 2002-05-19 | IE50 did not recognise the JS keyword undefined so the test    |
+|            | for scroll support was updated to be IE50 friendly.            |
+| 2002-07-06 | Added flag to hide selects for IE                              |
+| 2002-10-04 | (1.1) Restructured and made code more IE garbage collector     |
+|            | friendly. This solved the most nasty memory leaks. Also added  |
+|            | support for hiding the tooltip if ESC is pressed.              |
+| 2002-10-18 | Fixed verrical position in case of scrolled document.          |
+| 2002-12-02 | Mozilla bug workaround related to mousedown and move.          |
+|-----------------------------------------------------------------------------|
+| Dependencies: helptip.css (To set up the CSS of the help-tooltip class)     |
+|-----------------------------------------------------------------------------|
+| Usage:                                                                      |
+|                                                                             |
+|   <script type="text/javascript" src="helptip.js">< /script>                |
+|   <link type="text/css" rel="StyleSheet" href="helptip.css" />              |
+|                                                                             |
+|   <a class="helpLink" href="?" onclick="showHelp(event, 'String to show');  |
+|      return false">Help</a>                                                 |
+|-----------------------------------------------------------------------------|
+| Created 2001-09-27 | All changes are in the log above. | Updated 2002-12-02 |
+\----------------------------------------------------------------------------*/
+
+function showHelpTip(e, sHtml, bHideSelects) {
+
+	// find anchor element
+	var el = e.target || e.srcElement;
+	while (el.tagName != "A")
+		el = el.parentNode;
+	
+	// is there already a tooltip? If so, remove it
+	if (el._helpTip) {
+		helpTipHandler.hideHelpTip(el);
+	}
+
+	helpTipHandler.hideSelects = Boolean(bHideSelects);
+
+	// create element and insert last into the body
+	helpTipHandler.createHelpTip(el, sHtml);
+	
+	// position tooltip
+	helpTipHandler.positionToolTip(e);
+
+	// add a listener to the blur event.
+	// When blurred remove tooltip and restore anchor
+	el.onblur = helpTipHandler.anchorBlur;
+	el.onkeydown = helpTipHandler.anchorKeyDown;
+}
+
+var helpTipHandler = {
+	hideSelects:	false,
+	
+	helpTip:		null,
+	
+	showSelects:	function (bVisible) {
+		if (!this.hideSelects) return;
+		// only IE actually do something in here
+		var selects = [];
+		if (document.all)
+			selects = document.all.tags("SELECT");
+		var l = selects.length;
+		for	(var i = 0; i < l; i++)
+			selects[i].runtimeStyle.visibility = bVisible ? "" : "hidden";	
+	},
+	
+	create:	function () {
+		var d = document.createElement("DIV");
+		d.className = "help-tooltip";
+		d.onmousedown = this.helpTipMouseDown;
+		d.onmouseup = this.helpTipMouseUp;
+		document.body.appendChild(d);		
+		this.helpTip = d;
+	},
+	
+	createHelpTip:	function (el, sHtml) {
+		if (this.helpTip == null) {
+			this.create();
+		}
+
+		var d = this.helpTip;
+		d.innerHTML = sHtml;
+		d._boundAnchor = el;
+		el._helpTip = d;
+		return d;
+	},
+	
+	// Allow clicks on A elements inside tooltip
+	helpTipMouseDown:	function (e) {
+		var d = this;
+		var el = d._boundAnchor;
+		if (!e) e = event;
+		var t = e.target || e.srcElement;
+		while (t.tagName != "A" && t != d)
+			t = t.parentNode;
+		if (t == d) return;
+		
+		el._onblur = el.onblur;
+		el.onblur = null;
+	},
+	
+	helpTipMouseUp:	function () {
+		var d = this;
+		var el = d._boundAnchor;
+		el.onblur = el._onblur;
+		el._onblur = null;
+		el.focus();
+	},	
+	
+	anchorBlur:	function (e) {
+		var el = this;
+		helpTipHandler.hideHelpTip(el);
+	},
+	
+	anchorKeyDown:	function (e) {
+		if (!e) e = window.event
+		if (e.keyCode == 27) {	// ESC
+			helpTipHandler.hideHelpTip(this);
+		}
+	},
+	
+	removeHelpTip:	function (d) {
+		d._boundAnchor = null;
+		d.style.filter = "none";
+		d.innerHTML = "";
+		d.onmousedown = null;
+		d.onmouseup = null;
+		d.parentNode.removeChild(d);
+		//d.style.display = "none";
+	},
+	
+	hideHelpTip:	function (el) {
+		var d = el._helpTip;
+		/*	Mozilla (1.2+) starts a selection session when moved
+			and this destroys the mouse events until reloaded
+		d.style.top = -el.offsetHeight - 100 + "px";
+		*/		
+		
+		d.style.visibility = "hidden";
+		//d._boundAnchor = null;
+
+		el.onblur = null;
+		el._onblur = null;
+		el._helpTip = null;
+		el.onkeydown = null;
+		
+		this.showSelects(true);
+	},
+	
+	positionToolTip:	function (e) {
+		this.showSelects(false);		
+		var scroll = this.getScroll();
+		var d = this.helpTip;
+		
+		// width
+		if (d.offsetWidth >= scroll.width)
+			d.style.width = scroll.width - 10 + "px";
+		else
+			d.style.width = "";
+		
+		// left
+		if (e.clientX > scroll.width - d.offsetWidth)
+			d.style.left = scroll.width - d.offsetWidth + scroll.left + "px";
+		else
+			d.style.left = e.clientX - 2 + scroll.left + "px";
+		
+		// top
+		if (e.clientY + d.offsetHeight + 18 < scroll.height)
+			d.style.top = e.clientY + 18 + scroll.top + "px";
+		else if (e.clientY - d.offsetHeight > 0)
+			d.style.top = e.clientY + scroll.top - d.offsetHeight + "px";
+		else
+			d.style.top = scroll.top + 5 + "px";
+			
+		d.style.visibility = "visible";
+	},
+	
+	// returns the scroll left and top for the browser viewport.
+	getScroll:	function () {
+		if (document.all && typeof document.body.scrollTop != "undefined") {	// IE model
+			var ieBox = document.compatMode != "CSS1Compat";
+			var cont = ieBox ? document.body : document.documentElement;
+			return {
+				left:	cont.scrollLeft,
+				top:	cont.scrollTop,
+				width:	cont.clientWidth,
+				height:	cont.clientHeight
+			};
+		}
+		else {
+			return {
+				left:	window.pageXOffset,
+				top:	window.pageYOffset,
+				width:	window.innerWidth,
+				height:	window.innerHeight
+			};
+		}
+		
+	}
+
+};
\ No newline at end of file
diff --git a/skins/html/javascript/records.js b/skins/html/javascript/records.js
new file mode 100644
index 0000000..c3e8faa
--- /dev/null
+++ b/skins/html/javascript/records.js
@@ -0,0 +1,26 @@
+// Search for epgevents and check for future programming
+function checkrecord (name) {
+    var fnWhenDone = function (oXML, sData) {
+        if(oXML.responseText != 'ok') {
+            var text = oXML.responseText.split(':');
+            document.getElementById(sData).src = 'images/record_red.png';
+            document.getElementById(sData).title = '<?% gettext('When you want this timer save then has him a conflict with timer: ') %?>' + text[0];
+            document.getElementById(sData).className = 'problem';
+        } else {
+            document.getElementById(sData).src = 'images/record_green.png';
+            document.getElementById(sData).className = 'noproblem';
+        }
+     };
+
+    var tags = document.getElementsByName('recordlink');
+    for (var i = 0; i < tags.length; i++) {
+        var epgid = tags[i].id;
+        var url = "?cmd=conflict&data=" + epgid + "&ajax=text";
+        var aconn = new XHRequest();
+        if(!aconn)
+          return false;
+        aconn.connect(url, fnWhenDone, epgid);
+    }
+}
+
+window.onLoad = window.setTimeout("checkrecord('recordlink')", 1000);
diff --git a/skins/html/javascript/tabpane.js b/skins/html/javascript/tabpane.js
new file mode 100644
index 0000000..04b1550
--- /dev/null
+++ b/skins/html/javascript/tabpane.js
@@ -0,0 +1,368 @@
+/*----------------------------------------------------------------------------\

+|                               Tab Pane 1.02                                 |

+|-----------------------------------------------------------------------------|

+|                         Created by Erik Arvidsson                           |

+|                  (http://webfx.eae.net/contact.html#erik)                   |

+|                      For WebFX (http://webfx.eae.net/)                      |

+|-----------------------------------------------------------------------------|

+|                  Copyright (c) 1998 - 2003 Erik Arvidsson                   |

+|-----------------------------------------------------------------------------|

+| This software is provided "as is", without warranty of any kind, express or |

+| implied, including  but not limited  to the warranties of  merchantability, |

+| fitness for a particular purpose and noninfringement. In no event shall the |

+| authors or  copyright  holders be  liable for any claim,  damages or  other |

+| liability, whether  in an  action of  contract, tort  or otherwise, arising |

+| from,  out of  or in  connection with  the software or  the  use  or  other |

+| dealings in the software.                                                   |

+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |

+| This  software is  available under the  three different licenses  mentioned |

+| below.  To use this software you must chose, and qualify, for one of those. |

+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |

+| The WebFX Non-Commercial License          http://webfx.eae.net/license.html |

+| Permits  anyone the right to use the  software in a  non-commercial context |

+| free of charge.                                                             |

+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |

+| The WebFX Commercial license           http://webfx.eae.net/commercial.html |

+| Permits the  license holder the right to use  the software in a  commercial |

+| context. Such license must be specifically obtained, however it's valid for |

+| any number of  implementations of the licensed software.                    |

+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |

+| GPL - The GNU General Public License    http://www.gnu.org/licenses/gpl.txt |

+| Permits anyone the right to use and modify the software without limitations |

+| as long as proper  credits are given  and the original  and modified source |

+| code are included. Requires  that the final product, software derivate from |

+| the original  source or any  software  utilizing a GPL  component, such  as |

+| this, is also licensed under the GPL license.                               |

+|-----------------------------------------------------------------------------|

+| 2002-01-?? | First working version                                          |

+| 2002-02-17 | Cleaned up for 1.0 public version                              |

+| 2003-02-18 | Changed from javascript uri for anchors to return false        |

+| 2003-03-03 | Added dispose methods to release IE memory                     |

+|-----------------------------------------------------------------------------|
+| Dependencies: *.css           a css file to define the layout               |
+|-----------------------------------------------------------------------------|

+| Created 2002-01-?? | All changes are in the log above. | Updated 2003-03-03 |

+\----------------------------------------------------------------------------*/

+

+// This function is used to define if the browser supports the needed

+// features

+function hasSupport() {

+

+	if (typeof hasSupport.support != "undefined")

+		return hasSupport.support;

+	

+	var ie55 = /msie 5\.[56789]/i.test( navigator.userAgent );

+	

+	hasSupport.support = ( typeof document.implementation != "undefined" &&

+			document.implementation.hasFeature( "html", "1.0" ) || ie55 )

+			

+	// IE55 has a serious DOM1 bug... Patch it!

+	if ( ie55 ) {

+		document._getElementsByTagName = document.getElementsByTagName;

+		document.getElementsByTagName = function ( sTagName ) {

+			if ( sTagName == "*" )

+				return document.all;

+			else

+				return document._getElementsByTagName( sTagName );

+		};

+	}

+

+	return hasSupport.support;

+}

+

+///////////////////////////////////////////////////////////////////////////////////

+// The constructor for tab panes

+//

+// el : HTMLElement		The html element used to represent the tab pane

+// bUseCookie : Boolean	Optional. Default is true. Used to determine whether to us

+//						persistance using cookies or not

+//

+function WebFXTabPane( el, bUseCookie ) {

+	if ( !hasSupport() || el == null ) return;

+	

+	this.element = el;

+	this.element.tabPane = this;

+	this.pages = [];

+	this.selectedIndex = null;

+	this.useCookie = bUseCookie != null ? bUseCookie : true;

+	

+	// add class name tag to class name

+	this.element.className = this.classNameTag + " " + this.element.className;

+	

+	// add tab row

+	this.tabRow = document.createElement( "div" );

+	this.tabRow.className = "tab-row";

+	el.insertBefore( this.tabRow, el.firstChild );

+

+	var tabIndex = 0;

+	if ( this.useCookie ) {

+		tabIndex = Number( WebFXTabPane.getCookie( "webfxtab_" + this.element.id ) );

+		if ( isNaN( tabIndex ) )

+			tabIndex = 0;

+	}

+	this.selectedIndex = tabIndex;

+	

+	// loop through child nodes and add them

+	var cs = el.childNodes;

+	var n;

+	for (var i = 0; i < cs.length; i++) {

+		if (cs[i].nodeType == 1 && cs[i].className == "tab-page") {

+			this.addTabPage( cs[i] );

+		}

+	}

+}

+

+WebFXTabPane.prototype.classNameTag = "dynamic-tab-pane-control";

+

+WebFXTabPane.prototype.setSelectedIndex = function ( n ) {

+	if (this.selectedIndex != n) {

+		if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null )

+			this.pages[ this.selectedIndex ].hide();

+		this.selectedIndex = n;

+		this.pages[ this.selectedIndex ].show();

+		

+		if ( this.useCookie )

+			WebFXTabPane.setCookie( "webfxtab_" + this.element.id, n );	// session cookie

+	}

+};

+	

+WebFXTabPane.prototype.getSelectedIndex = function () {

+	return this.selectedIndex;

+};

+	

+WebFXTabPane.prototype.addTabPage = function ( oElement ) {

+	if ( !hasSupport() ) return;

+	

+	if ( oElement.tabPage == this )	// already added

+		return oElement.tabPage;

+

+	var n = this.pages.length;

+	var tp = this.pages[n] = new WebFXTabPage( oElement, this, n );

+	tp.tabPane = this;

+	

+	// move the tab out of the box

+	this.tabRow.appendChild( tp.tab );

+			

+	if ( n == this.selectedIndex )

+		tp.show();

+	else

+		tp.hide();

+		

+	return tp;

+};

+	

+WebFXTabPane.prototype.dispose = function () {

+	this.element.tabPane = null;

+	this.element = null;		

+	this.tabRow = null;

+	

+	for (var i = 0; i < this.pages.length; i++) {

+		this.pages[i].dispose();

+		this.pages[i] = null;

+	}

+	this.pages = null;

+};

+

+

+

+// Cookie handling

+WebFXTabPane.setCookie = function ( sName, sValue, nDays ) {

+	var expires = "";

+	if ( nDays ) {
+		var d = new Date();
+		d.setTime( d.getTime() + nDays * 24 * 60 * 60 * 1000 );
+		expires = "; expires=" + d.toGMTString();
+	}
+
+	document.cookie = sName + "=" + sValue + expires + "; path=/";
+};

+

+WebFXTabPane.getCookie = function (sName) {
+	var re = new RegExp( "(\;|^)[^;]*(" + sName + ")\=([^;]*)(;|$)" );
+	var res = re.exec( document.cookie );
+	return res != null ? res[3] : null;
+};
+
+WebFXTabPane.removeCookie = function ( name ) {
+	setCookie( name, "", -1 );
+};

+

+

+

+

+

+

+

+

+///////////////////////////////////////////////////////////////////////////////////

+// The constructor for tab pages. This one should not be used.

+// Use WebFXTabPage.addTabPage instead

+//

+// el : HTMLElement			The html element used to represent the tab pane

+// tabPane : WebFXTabPane	The parent tab pane

+// nindex :	Number			The index of the page in the parent pane page array

+//

+function WebFXTabPage( el, tabPane, nIndex ) {

+	if ( !hasSupport() || el == null ) return;

+	

+	this.element = el;

+	this.element.tabPage = this;

+	this.index = nIndex;

+	

+	var cs = el.childNodes;

+	for (var i = 0; i < cs.length; i++) {

+		if (cs[i].nodeType == 1 && cs[i].className == "tab") {

+			this.tab = cs[i];

+			break;

+		}

+	}

+	

+	// insert a tag around content to support keyboard navigation

+	

+	

+	var a = document.createElement( "A" );

+	this.aElement = a;

+	a.href = "#";

+	a.onclick = function () { return false; };

+	while ( this.tab.hasChildNodes() )

+		a.appendChild( this.tab.firstChild );

+	this.tab.appendChild( a );

+

+	

+	// hook up events, using DOM0

+	var oThis = this;

+	this.tab.onclick = function () { oThis.select(); };

+	this.tab.onmouseover = function () { WebFXTabPage.tabOver( oThis ); };

+	this.tab.onmouseout = function () { WebFXTabPage.tabOut( oThis ); };

+}

+

+WebFXTabPage.prototype.show = function () {

+	var el = this.tab;

+	var s = el.className + " selected";

+	s = s.replace(/ +/g, " ");

+	el.className = s;

+	

+	this.element.style.display = "block";

+};

+

+WebFXTabPage.prototype.hide = function () {

+	var el = this.tab;

+	var s = el.className;

+	s = s.replace(/ selected/g, "");

+	el.className = s;

+

+	this.element.style.display = "none";

+};

+	

+WebFXTabPage.prototype.select = function () {

+	this.tabPane.setSelectedIndex( this.index );

+};

+	

+WebFXTabPage.prototype.dispose = function () {

+	this.aElement.onclick = null;

+	this.aElement = null;

+	this.element.tabPage = null;

+	this.tab.onclick = null;

+	this.tab.onmouseover = null;

+	this.tab.onmouseout = null;

+	this.tab = null;

+	this.tabPane = null;

+	this.element = null;

+};

+

+WebFXTabPage.tabOver = function ( tabpage ) {

+	var el = tabpage.tab;

+	var s = el.className + " hover";

+	s = s.replace(/ +/g, " ");

+	el.className = s;

+};

+

+WebFXTabPage.tabOut = function ( tabpage ) {

+	var el = tabpage.tab;

+	var s = el.className;

+	s = s.replace(/ hover/g, "");

+	el.className = s;

+};

+

+

+// This function initializes all uninitialized tab panes and tab pages

+function setupAllTabs() {

+	if ( !hasSupport() ) return;

+

+	var all = document.getElementsByTagName( "*" );

+	var l = all.length;

+	var tabPaneRe = /tab\-pane/;

+	var tabPageRe = /tab\-page/;

+	var cn, el;

+	var parentTabPane;

+	

+	for ( var i = 0; i < l; i++ ) {

+		el = all[i]

+		cn = el.className;

+

+		// no className

+		if ( cn == "" ) continue;

+		

+		// uninitiated tab pane

+		if ( tabPaneRe.test( cn ) && !el.tabPane )

+			new WebFXTabPane( el );

+	

+		// unitiated tab page wit a valid tab pane parent

+		else if ( tabPageRe.test( cn ) && !el.tabPage &&

+					tabPaneRe.test( el.parentNode.className ) ) {

+			el.parentNode.tabPane.addTabPage( el );			

+		}

+	}

+}

+

+function disposeAllTabs() {

+	if ( !hasSupport() ) return;

+	

+	var all = document.getElementsByTagName( "*" );

+	var l = all.length;

+	var tabPaneRe = /tab\-pane/;

+	var cn, el;

+	var tabPanes = [];

+	

+	for ( var i = 0; i < l; i++ ) {

+		el = all[i]

+		cn = el.className;

+

+		// no className

+		if ( cn == "" ) continue;

+		

+		// tab pane

+		if ( tabPaneRe.test( cn ) && el.tabPane )

+			tabPanes[tabPanes.length] = el.tabPane;

+	}

+	

+	for (var i = tabPanes.length - 1; i >= 0; i--) {

+		tabPanes[i].dispose();

+		tabPanes[i] = null;

+	}

+}

+

+

+// initialization hook up

+

+// DOM2

+if ( typeof window.addEventListener != "undefined" )

+	window.addEventListener( "load", setupAllTabs, false );

+

+// IE 

+else if ( typeof window.attachEvent != "undefined" ) {

+	window.attachEvent( "onload", setupAllTabs );

+	window.attachEvent( "onunload", disposeAllTabs );

+}

+

+else {

+	if ( window.onload != null ) {

+		var oldOnload = window.onload;

+		window.onload = function ( e ) {

+			oldOnload( e );

+			setupAllTabs();

+		};

+	}

+	else 

+		window.onload = setupAllTabs;

+}
\ No newline at end of file
diff --git a/skins/html/javascript/tooltip.js b/skins/html/javascript/tooltip.js
new file mode 100644
index 0000000..f66f4e8
--- /dev/null
+++ b/skins/html/javascript/tooltip.js
@@ -0,0 +1,210 @@
+var ttp_content;
+ttp_content = "";
+
+var ttp_timer;
+var ttp_x = -1;
+var ttp_y = -1;
+var ttp_visable = 0;
+var ttp_offset_x = 0;
+var ttp_x_start = -1;
+var ttp_y_start = -1;
+var ttp_active  = 1;
+var ttp_inside  = 0;
+
+var ie5=document.all&&document.getElementById;
+var ns6=document.getElementById&&!document.all;
+var opera =window.opera;
+var dom=(!opera && document.compatMode && document.compatMode!="BackCompat");
+
+function iecompattest(){
+    return dom ? document.documentElement : document.body
+}
+
+function getScrollingPosition() {
+ var x = 0, y = 0;
+  if( ns6 || typeof( window.pageYOffset ) == 'number' ) {
+    y = window.pageYOffset;
+    x = window.pageXOffset;
+  } else {
+    y = iecompattest().scrollTop;
+    x = iecompattest().scrollLeft;
+  }
+  return [ x, y ];
+}
+
+function WindowSize () {
+  var width = 0, height = 0;
+  if( ns6 || typeof( window.innerWidth ) == 'number' ) {
+    width = window.innerWidth;
+    height = window.innerHeight;
+  } else {
+    width = iecompattest().clientWidth;
+    height = iecompattest().clientHeight;
+  }
+  return [ width, height ];
+}
+
+function ttp_update_pos(){
+    var Size = WindowSize();
+
+    var x = ttp_x + ttp_offset_x;
+    var y = ttp_y;
+
+    var ele = document.getElementById('TOOLTIP');
+    var scrPos = getScrollingPosition();
+    
+    if(x + 500 > Size[0] + scrPos[0]) {
+      x = Size[0] - 500;
+    }
+    if(y + 150 > Size[1] + scrPos[1]) {
+      y = Size[1] - (y - 10);
+      ele.style.top  = '';
+      if(ie5&&!opera) {
+        ele.style.removeAttribute('top');
+        y += scrPos[1];
+      }
+  		ele.style.bottom  =  y + "px";
+    } else {
+      ele.style.bottom  = '';
+      if(ie5&&!opera) {
+        ele.style.removeAttribute('bottom');
+      }
+  		ele.style.top  = (y + 20) + "px";
+    }
+		ele.style.left = x + "px";
+}
+
+var ttp_ie = document.all?true:false;
+if (!ttp_ie) document.captureEvents(Event.MOUSEMOVE)
+document.onmousemove = ttp_onmousemove;
+
+function ttp_onmousemove(e) {
+if (ttp_ie) { 
+  ttp_x = event.clientX + document.body.scrollLeft;
+  ttp_y = event.clientY + document.body.scrollTop;
+} else { 
+  ttp_x = e.pageX;
+  ttp_y = e.pageY;
+}
+if (ttp_x < 0)  {ttp_x = 0;}
+if (ttp_y < 0)  {ttp_y = 0;}
+if(ttp_visable) {
+  if(Math.abs(ttp_x_start - ttp_x) > 200
+   || Math.abs(ttp_y_start - ttp_y) > 200) {
+    ttp_make_invisable();
+  }
+  ttp_update_pos();
+  }
+}
+
+
+function ttp_update_content(title, description){
+  var utitle = unescape(title);
+  ttp_content =  '<div id="ttwindow"><p class="topic">';
+  ttp_content += utitle.substr(0,50);
+  if (utitle.length > 50)  {ttp_content += '...';}
+  ttp_content += '</p><p class="description">'
+  if(description == 'WAIT') {
+    ttp_content += '<img src="images/repeat.png" alt="" />'; /* TODO => wait.gif */
+  } else {
+    ttp_content += unescape(description);
+  }
+  ttp_content += '</p></div>';
+}
+
+function ttp_make_visable(title, description){
+		ttp_update_pos();
+		ttp_update_content(title, description);
+    var ele = document.getElementById('TOOLTIP');
+		ele.innerHTML = ttp_content;
+		ele.style.visibility = "visible";
+}
+
+function ttp_make_invisable(){
+    var ele = document.getElementById('TOOLTIP');
+
+    if(ttp_visable || ele.style.visibility == "visible") {
+      clearTimeout(ttp_timer);
+	  	ele.style.visibility = "hidden";
+    }
+    ttp_visable = 0;
+    ttp_inside = 0;
+}
+
+function ttp_enable(enable){
+  ttp_make_invisable();
+  ttp_active = enable
+}
+
+function ttp_make_req_visable(title, eventid, x, y){
+
+    if(!eventid || eventid<=0 || ttp_inside==0
+      || Math.abs(x - ttp_x) > 200
+      || Math.abs(y - ttp_y) > 200) {
+        clearTimeout(ttp_timer);
+        ttp_inside = 0;
+        return false;
+    }
+
+    ttp_x_start = ttp_x;
+    ttp_y_start = ttp_y;
+    ttp_make_visable(title,'WAIT');
+
+    var fnWhenDone = function (oXML, sData) {
+
+        var description = eval('(' + oXML.responseText + ')');
+
+        var content;
+        if(description && description.data && typeof(description.data) == 'string'){
+            content = description.data.replace(/\r\n/g,'<br />');
+        } else {
+            content = '...';
+        }
+
+        ttp_make_visable(title,content);
+    };
+
+    var url = "?cmd=edescription&data=" + eventid + "&ajax=json";
+    var aconn = new XHRequest();
+    if(!aconn)
+      return false;
+    return aconn.connect(url, fnWhenDone, eventid);
+}
+
+
+function ttpreq(self, title, eventid, offset_x){
+  if(ttp_active) {
+    self.onmouseout=function(){ ttp_make_invisable(); };
+  	if(eventid && ttp_x != -1 && ttp_y != -1){
+      ttp_offset_x  = offset_x;
+      ttp_inside = 1;
+      ttp_timer = setTimeout("ttp_make_req_visable('"+escape(title)+"', '"+eventid+"', '"+ttp_x+"', '"+ttp_y+"')", 750);
+  	}
+  }
+}
+
+function ttp_make_direct_visable(title, description, x, y){
+
+    if(ttp_inside==0
+      || Math.abs(x - ttp_x) > 200
+      || Math.abs(y - ttp_y) > 200) {
+        clearTimeout(ttp_timer);
+        ttp_inside = 0;
+        return false;
+    }
+
+    ttp_x_start = ttp_x;
+    ttp_y_start = ttp_y;
+    ttp_make_visable(title,description);
+}
+
+function ttp(self, title, description, offset_x){
+  if(ttp_active) {
+    self.onmouseout=function(){ ttp_make_invisable(); };
+  	if(description && ttp_x != -1 && ttp_y != -1){
+      ttp_offset_x  = offset_x;
+      ttp_inside = 1;
+      ttp_timer = setTimeout("ttp_make_direct_visable('"+escape(title)+"', '"+escape(description)+"')", 750);
+  	}
+  }
+}
diff --git a/skins/html/javascript/xtree.js b/skins/html/javascript/xtree.js
new file mode 100644
index 0000000..58d2d95
--- /dev/null
+++ b/skins/html/javascript/xtree.js
@@ -0,0 +1,541 @@
+/*----------------------------------------------------------------------------\
+|                       Cross Browser Tree Widget 1.17                        |
+|-----------------------------------------------------------------------------|
+|                          Created by Emil A Eklund                           |
+|                  (http://webfx.eae.net/contact.html#emil)                   |
+|                      For WebFX (http://webfx.eae.net/)                      |
+|-----------------------------------------------------------------------------|
+| An object based tree widget,  emulating the one found in microsoft windows, |
+| with persistence using cookies. Works in IE 5+, Mozilla and konqueror 3.    |
+|-----------------------------------------------------------------------------|
+|                   Copyright (c) 1999 - 2002 Emil A Eklund                   |
+|-----------------------------------------------------------------------------|
+| This software is provided "as is", without warranty of any kind, express or |
+| implied, including  but not limited  to the warranties of  merchantability, |
+| fitness for a particular purpose and noninfringement. In no event shall the |
+| authors or  copyright  holders be  liable for any claim,  damages or  other |
+| liability, whether  in an  action of  contract, tort  or otherwise, arising |
+| from,  out of  or in  connection with  the software or  the  use  or  other |
+| dealings in the software.                                                   |
+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
+| This  software is  available under the  three different licenses  mentioned |
+| below.  To use this software you must chose, and qualify, for one of those. |
+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
+| The WebFX Non-Commercial License          http://webfx.eae.net/license.html |
+| Permits  anyone the right to use the  software in a  non-commercial context |
+| free of charge.                                                             |
+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
+| The WebFX Commercial license           http://webfx.eae.net/commercial.html |
+| Permits the  license holder the right to use  the software in a  commercial |
+| context. Such license must be specifically obtained, however it's valid for |
+| any number of  implementations of the licensed software.                    |
+| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
+| GPL - The GNU General Public License    http://www.gnu.org/licenses/gpl.txt |
+| Permits anyone the right to use and modify the software without limitations |
+| as long as proper  credits are given  and the original  and modified source |
+| code are included. Requires  that the final product, software derivate from |
+| the original  source or any  software  utilizing a GPL  component, such  as |
+| this, is also licensed under the GPL license.                               |
+|-----------------------------------------------------------------------------|
+| Dependencies: xtree.css (To set up the CSS of the tree classes)             |
+|-----------------------------------------------------------------------------|
+| 2001-01-10 | Original Version Posted.                                       |
+| 2001-03-18 | Added getSelected and get/setBehavior  that can make it behave |
+|            | more like windows explorer, check usage for more information.  |
+| 2001-09-23 | Version 1.1 - New features included  keyboard  navigation (ie) |
+|            | and the ability  to add and  remove nodes dynamically and some |
+|            | other small tweaks and fixes.                                  |
+| 2002-01-27 | Version 1.11 - Bug fixes and improved mozilla support.         |
+| 2002-06-11 | Version 1.12 - Fixed a bug that prevented the indentation line |
+|            | from  updating correctly  under some  circumstances.  This bug |
+|            | happened when removing the last item in a subtree and items in |
+|            | siblings to the remove subtree where not correctly updated.    |
+| 2002-06-13 | Fixed a few minor bugs cased by the 1.12 bug-fix.              |
+| 2002-08-20 | Added usePersistence flag to allow disable of cookies.         |
+| 2002-10-23 | (1.14) Fixed a plus icon issue                                 |
+| 2002-10-29 | (1.15) Last changes broke more than they fixed. This version   |
+|            | is based on 1.13 and fixes the bugs 1.14 fixed withou breaking |
+|            | lots of other things.                                          |
+| 2003-02-15 | The  selected node can now be made visible even when  the tree |
+|            | control  loses focus.  It uses a new class  declaration in the |
+|            | css file '.webfx-tree-item a.selected-inactive', by default it |
+|            | puts a light-gray rectangle around the selected node.          |
+| 2003-03-16 | Adding target support after lots of lobbying...                |
+|-----------------------------------------------------------------------------|
+| Created 2000-12-11 | All changes are in the log above. | Updated 2003-03-16 |
+\----------------------------------------------------------------------------*/
+
+var webFXTreeConfig = {
+	rootIcon        : 'images/foldericon.png',
+	openRootIcon    : 'images/openfoldericon.png',
+	folderIcon      : 'images/foldericon.png',
+	openFolderIcon  : 'images/openfoldericon.png',
+	fileIcon        : 'images/file.png',
+	iIcon           : 'images/I.png',
+	lIcon           : 'images/L.png',
+	lMinusIcon      : 'images/Lminus.png',
+	lPlusIcon       : 'images/Lplus.png',
+	tIcon           : 'images/T.png',
+	tMinusIcon      : 'images/Tminus.png',
+	tPlusIcon       : 'images/Tplus.png',
+	blankIcon       : 'images/blank.png',
+	defaultText     : 'Tree Item',
+	defaultAction   : 'javascript:void(0);',
+	defaultBehavior : 'classic',
+	usePersistence	: true
+};
+
+var webFXTreeHandler = {
+	idCounter : 0,
+	idPrefix  : "webfx-tree-object-",
+	all       : {},
+	behavior  : null,
+	selected  : null,
+	onSelect  : null, /* should be part of tree, not handler */
+	getId     : function() { return this.idPrefix + this.idCounter++; },
+	toggle    : function (oItem) { this.all[oItem.id.replace('-plus','')].toggle(); },
+	select    : function (oItem) { this.all[oItem.id.replace('-icon','')].select(); },
+	focus     : function (oItem) { this.all[oItem.id.replace('-anchor','')].focus(); },
+	blur      : function (oItem) { this.all[oItem.id.replace('-anchor','')].blur(); },
+	keydown   : function (oItem, e) { return this.all[oItem.id].keydown(e.keyCode); },
+	cookies   : new WebFXCookie(),
+	insertHTMLBeforeEnd	:	function (oElement, sHTML) {
+		if (oElement.insertAdjacentHTML != null) {
+			oElement.insertAdjacentHTML("BeforeEnd", sHTML)
+			return;
+		}
+		var df;	// DocumentFragment
+		var r = oElement.ownerDocument.createRange();
+		r.selectNodeContents(oElement);
+		r.collapse(false);
+		df = r.createContextualFragment(sHTML);
+		oElement.appendChild(df);
+	}
+};
+
+/*
+ * WebFXCookie class
+ */
+
+function WebFXCookie() {
+	if (document.cookie.length) { this.cookies = ' ' + document.cookie; }
+}
+
+WebFXCookie.prototype.setCookie = function (key, value) {
+	document.cookie = key + "=" + escape(value);
+}
+
+WebFXCookie.prototype.getCookie = function (key) {
+	if (this.cookies) {
+		var start = this.cookies.indexOf(' ' + key + '=');
+		if (start == -1) { return null; }
+		var end = this.cookies.indexOf(";", start);
+		if (end == -1) { end = this.cookies.length; }
+		end -= start;
+		var cookie = this.cookies.substr(start,end);
+		return unescape(cookie.substr(cookie.indexOf('=') + 1, cookie.length - cookie.indexOf('=') + 1));
+	}
+	else { return null; }
+}
+
+/*
+ * WebFXTreeAbstractNode class
+ */
+
+function WebFXTreeAbstractNode(sText, sAction) {
+	this.childNodes  = [];
+	this.id     = webFXTreeHandler.getId();
+	this.text   = sText || webFXTreeConfig.defaultText;
+	this.action = sAction || webFXTreeConfig.defaultAction;
+	this._last  = false;
+	webFXTreeHandler.all[this.id] = this;
+}
+
+/*
+ * To speed thing up if you're adding multiple nodes at once (after load)
+ * use the bNoIdent parameter to prevent automatic re-indentation and call
+ * the obj.ident() method manually once all nodes has been added.
+ */
+
+WebFXTreeAbstractNode.prototype.add = function (node, bNoIdent) {
+	node.parentNode = this;
+	this.childNodes[this.childNodes.length] = node;
+	var root = this;
+	if (this.childNodes.length >= 2) {
+		this.childNodes[this.childNodes.length - 2]._last = false;
+	}
+	while (root.parentNode) { root = root.parentNode; }
+	if (root.rendered) {
+		if (this.childNodes.length >= 2) {
+			document.getElementById(this.childNodes[this.childNodes.length - 2].id + '-plus').src = ((this.childNodes[this.childNodes.length -2].folder)?((this.childNodes[this.childNodes.length -2].open)?webFXTreeConfig.tMinusIcon:webFXTreeConfig.tPlusIcon):webFXTreeConfig.tIcon);
+			this.childNodes[this.childNodes.length - 2].plusIcon = webFXTreeConfig.tPlusIcon;
+			this.childNodes[this.childNodes.length - 2].minusIcon = webFXTreeConfig.tMinusIcon;
+			this.childNodes[this.childNodes.length - 2]._last = false;
+		}
+		this._last = true;
+		var foo = this;
+		while (foo.parentNode) {
+			for (var i = 0; i < foo.parentNode.childNodes.length; i++) {
+				if (foo.id == foo.parentNode.childNodes[i].id) { break; }
+			}
+			if (i == foo.parentNode.childNodes.length - 1) { foo.parentNode._last = true; }
+			else { foo.parentNode._last = false; }
+			foo = foo.parentNode;
+		}
+		webFXTreeHandler.insertHTMLBeforeEnd(document.getElementById(this.id + '-cont'), node.toString());
+		if ((!this.folder) && (!this.openIcon)) {
+			this.icon = webFXTreeConfig.folderIcon;
+			this.openIcon = webFXTreeConfig.openFolderIcon;
+		}
+		if (!this.folder) { this.folder = true; this.collapse(true); }
+		if (!bNoIdent) { this.indent(); }
+	}
+	return node;
+}
+
+WebFXTreeAbstractNode.prototype.toggle = function() {
+	if (this.folder) {
+		if (this.open) { this.collapse(); }
+		else { this.expand(); }
+}	}
+
+WebFXTreeAbstractNode.prototype.select = function() {
+	document.getElementById(this.id + '-anchor').focus();
+}
+
+WebFXTreeAbstractNode.prototype.deSelect = function() {
+	document.getElementById(this.id + '-anchor').className = '';
+	webFXTreeHandler.selected = null;
+}
+
+WebFXTreeAbstractNode.prototype.focus = function() {
+	if ((webFXTreeHandler.selected) && (webFXTreeHandler.selected != this)) { webFXTreeHandler.selected.deSelect(); }
+	webFXTreeHandler.selected = this;
+	if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) { document.getElementById(this.id + '-icon').src = this.openIcon; }
+	document.getElementById(this.id + '-anchor').className = 'selected';
+	document.getElementById(this.id + '-anchor').focus();
+	if (webFXTreeHandler.onSelect) { webFXTreeHandler.onSelect(this); }
+}
+
+WebFXTreeAbstractNode.prototype.blur = function() {
+	if ((this.openIcon) && (webFXTreeHandler.behavior != 'classic')) { document.getElementById(this.id + '-icon').src = this.icon; }
+	document.getElementById(this.id + '-anchor').className = 'selected-inactive';
+}
+
+WebFXTreeAbstractNode.prototype.doExpand = function() {
+	if (webFXTreeHandler.behavior == 'classic') { document.getElementById(this.id + '-icon').src = this.openIcon; }
+	if (this.childNodes.length) {  document.getElementById(this.id + '-cont').style.display = 'block'; }
+	this.open = true;
+	if (webFXTreeConfig.usePersistence) {
+		webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.length - 18), '1');
+}	}
+
+WebFXTreeAbstractNode.prototype.doCollapse = function() {
+	if (webFXTreeHandler.behavior == 'classic') { document.getElementById(this.id + '-icon').src = this.icon; }
+	if (this.childNodes.length) { document.getElementById(this.id + '-cont').style.display = 'none'; }
+	this.open = false;
+	if (webFXTreeConfig.usePersistence) {
+		webFXTreeHandler.cookies.setCookie(this.id.substr(18,this.id.length - 18), '0');
+}	}
+
+WebFXTreeAbstractNode.prototype.expandAll = function() {
+	this.expandChildren();
+	if ((this.folder) && (!this.open)) { this.expand(); }
+}
+
+WebFXTreeAbstractNode.prototype.expandChildren = function() {
+	for (var i = 0; i < this.childNodes.length; i++) {
+		this.childNodes[i].expandAll();
+} }
+
+WebFXTreeAbstractNode.prototype.collapseAll = function() {
+	this.collapseChildren();
+	if ((this.folder) && (this.open)) { this.collapse(true); }
+}
+
+WebFXTreeAbstractNode.prototype.collapseChildren = function() {
+	for (var i = 0; i < this.childNodes.length; i++) {
+		this.childNodes[i].collapseAll();
+} }
+
+WebFXTreeAbstractNode.prototype.indent = function(lvl, del, last, level, nodesLeft) {
+	/*
+	 * Since we only want to modify items one level below ourself,
+	 * and since the rightmost indentation position is occupied by
+	 * the plus icon we set this to -2
+	 */
+	if (lvl == null) { lvl = -2; }
+	var state = 0;
+	for (var i = this.childNodes.length - 1; i >= 0 ; i--) {
+		state = this.childNodes[i].indent(lvl + 1, del, last, level);
+		if (state) { return; }
+	}
+	if (del) {
+		if ((level >= this._level) && (document.getElementById(this.id + '-plus'))) {
+			if (this.folder) {
+				document.getElementById(this.id + '-plus').src = (this.open)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.lPlusIcon;
+				this.plusIcon = webFXTreeConfig.lPlusIcon;
+				this.minusIcon = webFXTreeConfig.lMinusIcon;
+			}
+			else if (nodesLeft) { document.getElementById(this.id + '-plus').src = webFXTreeConfig.lIcon; }
+			return 1;
+	}	}
+	var foo = document.getElementById(this.id + '-indent-' + lvl);
+	if (foo) {
+		if ((foo._last) || ((del) && (last))) { foo.src =  webFXTreeConfig.blankIcon; }
+		else { foo.src =  webFXTreeConfig.iIcon; }
+	}
+	return 0;
+}
+
+/*
+ * WebFXTree class
+ */
+
+function WebFXTree(sText, sAction, sBehavior, sIcon, sOpenIcon) {
+	this.base = WebFXTreeAbstractNode;
+	this.base(sText, sAction);
+	this.icon      = sIcon || webFXTreeConfig.rootIcon;
+	this.openIcon  = sOpenIcon || webFXTreeConfig.openRootIcon;
+	/* Defaults to open */
+	if (webFXTreeConfig.usePersistence) {
+		this.open  = (webFXTreeHandler.cookies.getCookie(this.id.substr(18,this.id.length - 18)) == '0')?false:true;
+	} else { this.open  = true; }
+	this.folder    = true;
+	this.rendered  = false;
+	this.onSelect  = null;
+	if (!webFXTreeHandler.behavior) {  webFXTreeHandler.behavior = sBehavior || webFXTreeConfig.defaultBehavior; }
+}
+
+WebFXTree.prototype = new WebFXTreeAbstractNode;
+
+WebFXTree.prototype.setBehavior = function (sBehavior) {
+	webFXTreeHandler.behavior =  sBehavior;
+};
+
+WebFXTree.prototype.getBehavior = function (sBehavior) {
+	return webFXTreeHandler.behavior;
+};
+
+WebFXTree.prototype.getSelected = function() {
+	if (webFXTreeHandler.selected) { return webFXTreeHandler.selected; }
+	else { return null; }
+}
+
+WebFXTree.prototype.remove = function() { }
+
+WebFXTree.prototype.expand = function() {
+	this.doExpand();
+}
+
+WebFXTree.prototype.collapse = function(b) {
+	if (!b) { this.focus(); }
+	this.doCollapse();
+}
+
+WebFXTree.prototype.getFirst = function() {
+	return null;
+}
+
+WebFXTree.prototype.getLast = function() {
+	return null;
+}
+
+WebFXTree.prototype.getNextSibling = function() {
+	return null;
+}
+
+WebFXTree.prototype.getPreviousSibling = function() {
+	return null;
+}
+
+WebFXTree.prototype.keydown = function(key) {
+	if (key == 39) {
+		if (!this.open) { this.expand(); }
+		else if (this.childNodes.length) { this.childNodes[0].select(); }
+		return false;
+	}
+	if (key == 37) { this.collapse(); return false; }
+	if ((key == 40) && (this.open) && (this.childNodes.length)) { this.childNodes[0].select(); return false; }
+	return true;
+}
+
+WebFXTree.prototype.toString = function() {
+	var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">" +
+		"<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\">" +
+		"<a href=\"" + this.action + "\" id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.blur(this);\"" +
+		(this.target ? " target=\"" + this.target + "\"" : "") +
+		">" + this.text + "</a></div>" +
+		"<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
+	var sb = [];
+	for (var i = 0; i < this.childNodes.length; i++) {
+		sb[i] = this.childNodes[i].toString(i, this.childNodes.length);
+	}
+	this.rendered = true;
+	return str + sb.join("") + "</div>";
+};
+
+/*
+ * WebFXTreeItem class
+ */
+
+function WebFXTreeItem(sText, sAction, eParent, sIcon, sOpenIcon) {
+	this.base = WebFXTreeAbstractNode;
+	this.base(sText, sAction);
+	/* Defaults to close */
+	if (webFXTreeConfig.usePersistence) {
+		this.open = (webFXTreeHandler.cookies.getCookie(this.id.substr(18,this.id.length - 18)) == '1')?true:false;
+	} else { this.open = false; }
+	if (sIcon) { this.icon = sIcon; }
+	if (sOpenIcon) { this.openIcon = sOpenIcon; }
+	if (eParent) { eParent.add(this); }
+}
+
+WebFXTreeItem.prototype = new WebFXTreeAbstractNode;
+
+WebFXTreeItem.prototype.remove = function() {
+	var iconSrc = document.getElementById(this.id + '-plus').src;
+	var parentNode = this.parentNode;
+	var prevSibling = this.getPreviousSibling(true);
+	var nextSibling = this.getNextSibling(true);
+	var folder = this.parentNode.folder;
+	var last = ((nextSibling) && (nextSibling.parentNode) && (nextSibling.parentNode.id == parentNode.id))?false:true;
+	this.getPreviousSibling().focus();
+	this._remove();
+	if (parentNode.childNodes.length == 0) {
+		document.getElementById(parentNode.id + '-cont').style.display = 'none';
+		parentNode.doCollapse();
+		parentNode.folder = false;
+		parentNode.open = false;
+	}
+	if (!nextSibling || last) { parentNode.indent(null, true, last, this._level, parentNode.childNodes.length); }
+	if ((prevSibling == parentNode) && !(parentNode.childNodes.length)) {
+		prevSibling.folder = false;
+		prevSibling.open = false;
+		iconSrc = document.getElementById(prevSibling.id + '-plus').src;
+		iconSrc = iconSrc.replace('minus', '').replace('plus', '');
+		document.getElementById(prevSibling.id + '-plus').src = iconSrc;
+		document.getElementById(prevSibling.id + '-icon').src = webFXTreeConfig.fileIcon;
+	}
+	if (document.getElementById(prevSibling.id + '-plus')) {
+		if (parentNode == prevSibling.parentNode) {
+			iconSrc = iconSrc.replace('minus', '').replace('plus', '');
+			document.getElementById(prevSibling.id + '-plus').src = iconSrc;
+}	}	}
+
+WebFXTreeItem.prototype._remove = function() {
+	for (var i = this.childNodes.length - 1; i >= 0; i--) {
+		this.childNodes[i]._remove();
+ 	}
+	for (var i = 0; i < this.parentNode.childNodes.length; i++) {
+		if (this == this.parentNode.childNodes[i]) {
+			for (var j = i; j < this.parentNode.childNodes.length; j++) {
+				this.parentNode.childNodes[j] = this.parentNode.childNodes[j+1];
+			}
+			this.parentNode.childNodes.length -= 1;
+			if (i + 1 == this.parentNode.childNodes.length) { this.parentNode._last = true; }
+			break;
+	}	}
+	webFXTreeHandler.all[this.id] = null;
+	var tmp = document.getElementById(this.id);
+	if (tmp) { tmp.parentNode.removeChild(tmp); }
+	tmp = document.getElementById(this.id + '-cont');
+	if (tmp) { tmp.parentNode.removeChild(tmp); }
+}
+
+WebFXTreeItem.prototype.expand = function() {
+	this.doExpand();
+	document.getElementById(this.id + '-plus').src = this.minusIcon;
+}
+
+WebFXTreeItem.prototype.collapse = function(b) {
+	if (!b) { this.focus(); }
+	this.doCollapse();
+	document.getElementById(this.id + '-plus').src = this.plusIcon;
+}
+
+WebFXTreeItem.prototype.getFirst = function() {
+	return this.childNodes[0];
+}
+
+WebFXTreeItem.prototype.getLast = function() {
+	if (this.childNodes[this.childNodes.length - 1].open) { return this.childNodes[this.childNodes.length - 1].getLast(); }
+	else { return this.childNodes[this.childNodes.length - 1]; }
+}
+
+WebFXTreeItem.prototype.getNextSibling = function() {
+	for (var i = 0; i < this.parentNode.childNodes.length; i++) {
+		if (this == this.parentNode.childNodes[i]) { break; }
+	}
+	if (++i == this.parentNode.childNodes.length) { return this.parentNode.getNextSibling(); }
+	else { return this.parentNode.childNodes[i]; }
+}
+
+WebFXTreeItem.prototype.getPreviousSibling = function(b) {
+	for (var i = 0; i < this.parentNode.childNodes.length; i++) {
+		if (this == this.parentNode.childNodes[i]) { break; }
+	}
+	if (i == 0) { return this.parentNode; }
+	else {
+		if ((this.parentNode.childNodes[--i].open) || (b && this.parentNode.childNodes[i].folder)) { return this.parentNode.childNodes[i].getLast(); }
+		else { return this.parentNode.childNodes[i]; }
+} }
+
+WebFXTreeItem.prototype.keydown = function(key) {
+	if ((key == 39) && (this.folder)) {
+		if (!this.open) { this.expand(); }
+		else { this.getFirst().select(); }
+		return false;
+	}
+	else if (key == 37) {
+		if (this.open) { this.collapse(); }
+		else { this.parentNode.select(); }
+		return false;
+	}
+	else if (key == 40) {
+		if (this.open) { this.getFirst().select(); }
+		else {
+			var sib = this.getNextSibling();
+			if (sib) { sib.select(); }
+		}
+		return false;
+	}
+	else if (key == 38) { this.getPreviousSibling().select(); return false; }
+	return true;
+}
+
+WebFXTreeItem.prototype.toString = function (nItem, nItemCount) {
+	var foo = this.parentNode;
+	var indent = '';
+	if (nItem + 1 == nItemCount) { this.parentNode._last = true; }
+	var i = 0;
+	while (foo.parentNode) {
+		foo = foo.parentNode;
+		indent = "<img id=\"" + this.id + "-indent-" + i + "\" src=\"" + ((foo._last)?webFXTreeConfig.blankIcon:webFXTreeConfig.iIcon) + "\">" + indent;
+		i++;
+	}
+	this._level = i;
+	if (this.childNodes.length) { this.folder = 1; }
+	else { this.open = false; }
+	if ((this.folder) || (webFXTreeHandler.behavior != 'classic')) {
+		if (!this.icon) { this.icon = webFXTreeConfig.folderIcon; }
+		if (!this.openIcon) { this.openIcon = webFXTreeConfig.openFolderIcon; }
+	}
+	else if (!this.icon) { this.icon = webFXTreeConfig.fileIcon; }
+	var label = this.text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">" +
+		indent +
+		"<img id=\"" + this.id + "-plus\" src=\"" + ((this.folder)?((this.open)?((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon):((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon)):((this.parentNode._last)?webFXTreeConfig.lIcon:webFXTreeConfig.tIcon)) + "\" onclick=\"webFXTreeHandler.toggle(this);\">" +
+		"<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\">" +
+		"<a href=\"" + this.action + "\" id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.blur(this);\"" +
+		(this.target ? " target=\"" + this.target + "\"" : "") +
+		">" + label + "</a></div>" +
+		"<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
+	var sb = [];
+	for (var i = 0; i < this.childNodes.length; i++) {
+		sb[i] = this.childNodes[i].toString(i,this.childNodes.length);
+	}
+	this.plusIcon = ((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon);
+	this.minusIcon = ((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon);
+	return str + sb.join("") + "</div>";
+}
\ No newline at end of file
diff --git a/skins/html/logger.tmpl b/skins/html/logger.tmpl
new file mode 100644
index 0000000..987c029
--- /dev/null
+++ b/skins/html/logger.tmpl
@@ -0,0 +1,55 @@
+<p><p>
+<!-- TableTemplate -->
+<script type="text/javascript" src="javascript/helptip.js"></script>
+<link type="text/css" rel="StyleSheet" href="style/helptip.css" />
+
+<h1><?% gettext("Read journal file: ") %?><?% param.logfile %?></h1>
+<h3><?% gettext("Size: ") %?><?% param.Size %?>&nbsp;
+    <?% gettext("Last changed: ") %?><?% param.LastChanged %?></h3>
+<br/>
+<a href='?cmd=logger&data=<?% param.type %?>&__full=<?% param.full %?>'>[<?% gettext("Refresh") %?>]</a>
+<a href='?cmd=logger&data=<?% param.type %?>&__full=<?% param.full ? 0 : 1 %?>'>[
+    <?% param.full ? gettext("Short display")
+                   : gettext("Full display") %?>]</a>
+<?%- truncatesize = param.full ? 1000 : param.maxlet -%?>
+<p/>
+<table border="0" width="95%">
+<?% fields = data.shift %?>
+    <tr>
+    <?% FOREACH field = fields %?>
+        <?% NEXT IF field.match('^__') %?>
+        <th>
+            <nobr><?% field %?>
+            <?% IF param.sortable %?>
+                <a href="?cmd=<?% cgi.param('cmd') %?>&__sortby=<?% field %?>&__desc=0"><img src="images/asc.png"></a>
+                <a href="?cmd=<?% cgi.param('cmd') %?>&__sortby=<?% field %?>&__desc=1"><img src="images/desc.png"></a>
+            <?% END %?>
+            </nobr>
+        </th>
+    <?% END %?>
+    </tr>
+    <?% x = -1 %?>
+    <?% FOREACH zeile = data %?>
+    <tr>
+        <?% x = x + 1 %?>
+        <?% c = -1 %?>
+        <?% FOREACH field = zeile %?>
+            <?% c = c + 1 %?>
+            <?% NEXT IF fields.$c.match('^__') %?>
+            <td <?% IF (x mod 2) == 0 %?>bgcolor='#F5F5F5'<?% END %?>>
+                <?% IF field == zeile.last && truncatesize < 100 %?>
+                    <a id="test" href="?" class="helpLink" onclick='showHelpTip(event, "<?% escape(zeile.last.replace("  ", "&nbsp;&nbsp;")) %?>", true); return false'>
+                    <font color='<?% param.color(zeile) %?>'>
+                    <?% chop(field,truncatesize) %?>
+                    </font>
+                    </a>
+                <?% ELSE %?>
+                    <font color='<?% param.color(zeile) %?>'>
+                    <?% chop(field,truncatesize) %?>
+                    </font>
+                <?% END %?>
+            </td>
+        <?% END %?>
+    </tr>
+    <?% END %?>
+</table>
diff --git a/skins/html/memory.tmpl b/skins/html/memory.tmpl
new file mode 100644
index 0000000..0113cb5
--- /dev/null
+++ b/skins/html/memory.tmpl
@@ -0,0 +1,112 @@
+<?%
+    USE date;
+    statusfiles = {};
+    fields = data.shift;
+
+    FILTER null;
+        name = 'memory_stat';
+        swapdata = [];
+        activedata = [];
+        cacheddata = [];
+        inactivedata = [];
+        timestamps = [];
+        FOREACH row = data;
+            t = date.format(row.6, '%H:%M');
+            timestamps.push(t);
+            activedata.push(row.2 / (1024));
+            inactivedata.push(row.3 / (1024));
+            cacheddata.push(row.4 / (1024));
+            swapdata.push(row.5 / (1024));
+        END;
+
+        # Data ...
+        d = [
+             timestamps ,
+             activedata ,
+             inactivedata
+             cacheddata ,
+             swapdata
+        ];
+
+        USE my_graph = GD.Graph.lines(500,300);
+
+        # Xsteps
+        steps = data.size div 5;
+
+        label = gettext('Memory usage since');
+        label = "${label} ${d.first.first}";
+        my_graph.set(
+                title => label,
+                x_label_skip => steps,
+                x_long_ticks => 1,
+
+                y_label => gettext('Memory usage in MB'),
+                y_long_ticks => 1,
+
+                line_width   => 2,
+                box_axis     => 1,
+                boxclr       => '#FFFFCC',
+                fgclr        => '#BBBBBB'
+                legend_placement => 'RD',
+                legend_spacing => 5,
+        );
+        my_graph.set_title_font(param.font,10);
+        my_graph.set_y_label_font(param.font,10);
+        my_graph.set_x_label_font(param.font,10);
+        my_graph.set_x_axis_font(param.font,6);
+        my_graph.set_y_axis_font(param.font,6);
+        my_graph.set_legend( fields.2, fields.3, fields.4, fields.5 );
+        statusfiles.$name = writefile("status_${name}.gif", my_graph.plot(d).gif );
+        END;
+
+        # ------------------- Piegraph für Speicher
+        row = data.last;
+        FILTER null;
+        name = 'memory_now';
+        MemTotal = row.0 div 1024;
+        MemFree = row.1 div 1024;
+        Active = row.2 div 1024;
+        Cached = row.4 div 1024;
+        Inactive = row.3 div 1024;
+        Swapped = row.5 div 1024;
+
+        d2 = [
+            [ "${fields.2} ${Active} MB","${fields.3} ${Inactive} MB","${fields.4} ${Cached} MB","${fields.5} ${Swapped} MB","${fields.1} ${MemFree} MB"],
+            [ row.2, row.3, row.4, row.5, row.1 ]
+        ];
+
+        USE my_graph = GD.Graph.pie(400, 300);
+        label = fields.0;
+        label = "${label} ${MemTotal} MB";
+        my_graph.set(
+                title => label,
+                axislabelclr => 'black',
+                pie_height => 25,
+                transparent => 0,
+        );
+        my_graph.set_title_font(param.font,10);
+        my_graph.set_label_font(param.font,10);
+        my_graph.set_value_font(param.font,8);
+        statusfiles.$name = writefile("status_${name}.gif", my_graph.plot(d2).gif );
+      END;
+ %?>
+<!-- Vitals Template -->
+<?% IF param.headingText %?>
+<table width=100%><tr><td class='tableheader'><h3><?% param.headingText %?></h3>
+<?% END %?>
+<table border="0" width="95%">
+<tr>
+    <td colspan=2 align=center>
+        <img src="<?% statusfiles.memory_now %?>">
+    </td>
+</tr>
+<tr>
+    <td colspan=2 align=center>
+        <img src="<?% statusfiles.memory_stat %?>">
+    </td>
+</tr>
+</table>
+<?% IF param.headingText %?>
+</td></tr></table>
+<p>
+<?% END %?>
diff --git a/skins/html/mlcopy.tmpl b/skins/html/mlcopy.tmpl
new file mode 120000
index 0000000..b15f879
--- /dev/null
+++ b/skins/html/mlcopy.tmpl
@@ -0,0 +1 @@
+mledit.tmpl
\ No newline at end of file
diff --git a/skins/html/mldisplay.tmpl b/skins/html/mldisplay.tmpl
new file mode 100644
index 0000000..c2680f7
--- /dev/null
+++ b/skins/html/mldisplay.tmpl
@@ -0,0 +1,224 @@
+<?% fields = data.shift %?>
+
+<h1><?% gettext("Media details for") %?>: <?% fields.2 %?><?% IF fields.3 %?> - <?% fields.3 %?><?% END %?></h1>
+
+<?% INCLUDE 'mlnavcontainer.tmpl'
+        nav_back = 1
+        nav_copy = 1
+        nav_edit = 1
+        nav_delete = 1
+        nav_newmedia = 1
+        nav_search = 1
+        nav_ranges = 1
+%?>
+
+<table width="100%">
+<tr>    
+    <td width="20%" align="center" rowspan="8">
+        <img src='?cmd=mlcache&__source=<?% fields.10 %?>' width="133" height="200" align="center" />
+    </td>
+    <td colspan="4">
+        <h1><?% fields.2 %?>
+        <?% IF fields.3 %?>
+            - <?% fields.3 %?>
+        <?% END %?>
+        </h1>
+    </td>
+</tr>
+<tr>
+    <td width="10%">
+        <b><?% gettext("Year") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.9 %?>
+            <a href="?cmd=mlsearch&__search&__selfields=year&__searchitem=<?% fields.9 %?>"><?% fields.9 %?></a>
+        <?% END %?>
+    </td>
+    <td width="10%">
+        <b><?% gettext("Runtime") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.13 %?>
+        <?% fields.13 %?>
+        <?% END %?>
+    </td>
+</tr>
+<tr>
+    <td width="10%">
+        <b><?% gettext("Director") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.11 %?>
+            <?% mydirectors = [] %?>
+            <?% FOREACH director = fields.11.split(',') %?>
+                <?% director = director.replace('^\s+|\s+$','') %?>
+                <?% director = "<a href=\"?cmd=mlsearch&__search&__selfields=director&__searchitem=$director\">$director</a>" %?>
+                <?% mydirectors.push(director) %?>
+            <?% END %?>
+            <?% mydirectors.join(', ') %?>
+        <?% END %?>
+    </td>
+    <td width="10%">
+        <b><?% gettext("Language") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.4 %?>
+            <?% mylanguages = [] %?>
+            <?% FOREACH language = fields.4.split(',') %?>
+                <?% language = language.replace('^\s+|\s+$','') %?>
+                <?% language = "<a href=\"?cmd=mlsearch&__search&__selfields=director&__searchitem=$language\">$language</a>" %?>
+                <?% mylanguages.push(language) %?>
+            <?% END %?>
+            <?% mylanguages.join(', ') %?>
+        <?% END %?>
+    </td>
+</tr>
+<tr>
+    <td width="10%">
+        <b><?% gettext("Country") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.14 %?>
+            <?% mycountrys = [] %?>
+            <?% FOREACH country = fields.14.split('&#x2f;') %?>
+                <?% country = country.replace('^\s+|\s+$','') %?>
+                <?% country = "<a href=\"?cmd=mlsearch&__search&__selfields=country&__searchitem=$country\">$country</a>" %?>
+                <?% mycountrys.push(country) %?>
+            <?% END %?>
+            <?% mycountrys.join(' &#x2f; ') %?>
+        <?% END %?>
+    </td>
+    <td width="10%">
+        <b><?% gettext("Mediatype") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF param.mediatype %?>
+        <a href="?cmd=mlsearch&__search&__selfields=mediatype&__searchitem=<?% param.mediatype %?>"><?% param.mediatype %?></a>
+        <?% END %?>
+    </td>
+</tr>
+<tr>
+    <td width="10%">
+        <b><?% gettext("DiskID") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.5 %?>
+            <a href="?cmd=mlsearch&__search&__selfields=diskid&__searchitem=<?% fields.5 %?>"><?% fields.5 %?></a>
+        <?% END %?>
+    </td>
+    <td width="10%">
+        <b><?% gettext("TV-Episode") %?>:</b>
+    </td>
+    <td width="30%">
+        <input type=checkbox disabled="1" value="<?% fields.23 %?>" />
+        &nbsp;&nbsp;
+        <b><?% gettext("Seen") %?>:</b>
+        &nbsp;&nbsp;
+        <input type=checkbox disabled="1" value="<?% fields.25 %?>" />
+    </td>
+</tr>
+<tr>
+    <td width="10%">
+        <b><?% gettext("Filename") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.16 %?>
+            <?% fields.16 %?>
+        <?% END %?>
+    </td>
+    <td width="10%">
+        <b><?% gettext("Filesize") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.17 %?>
+            <?% fields.17 %?>
+        <?% END %?>
+    </td>
+</tr>
+<tr>
+    <td width="10%">
+        <b><?% gettext("Filedate") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.18 %?>
+            <?% fields.18 %?>
+        <?% END %?>
+    </td>
+    <td width="10%">
+        <b><?% gettext("Size") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.21 && fields.22 %?>
+            <?% fields.21 %?>&nbsp;x&nbsp;<?% fields.22 %?>
+        <?% END %?>
+    </td>
+</tr>
+<tr>
+    <td width="10%">
+        <b><?% gettext("Audio Codec") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.19 %?>
+            <?% fields.19 %?>
+        <?% END %?>
+    </td>
+    <td width="10%">
+        <b><?% gettext("Video Codec") %?>:</b>
+    </td>
+    <td width="30%">
+        <?% IF fields.20 %?>
+            <?% fields.20 %?>
+        <?% END %?>
+    </td>
+</tr>
+<?% IF param.genres_sel.0 %?>
+<tr>
+    <td>
+    </td>
+    <td>
+        <b><?% gettext("Genres") %?>:</b>
+    </td>
+    <td colspan=3>
+        <?% selection = param.genres_sel %?>
+        <?% genres = param.genres_all %?>
+        <?% FOREACH id = selection %?>
+        <a href="?cmd=mlsearch&__search&__genres=<?% genres.$id.id %?>"><?% genres.$id.name %?></a>&nbsp;
+        <?% END %?>
+    </td>
+</tr>
+<?% END %?>
+<?% IF fields.15 %?>
+<tr>
+    <td colspan="5">
+        <b><?% gettext("Plot") %?>:</b><br>
+        <?% fields.15 | replace('\n','<br>') %?>
+    </td>
+</tr>
+<?% END %?>
+<?% IF fields.6 %?>
+<tr>
+    <td colspan="5">
+        <b><?% gettext("Comment") %?>:</b><br>
+        <?% fields.6 | replace('\n','<br>') %?>
+    </td>
+</tr>
+<?% END %?>
+<?% IF param.actors.0.0 %?>
+<tr>
+    <td colspan="5">
+        <b><?% gettext("Actors") %?>:</b><br>
+            <div>    
+            <?% WHILE param.actors.size %?>
+                <?% actor = param.actors.shift %?>
+                    <div style="float:left;height:60px;width:160px;overflow:hidden">
+                        <?% IF actor.0 %?>
+                        <img style="float:left;margin-right:10px" src='?cmd=mlcache&__source=<?% actor.1 %?>' alt="" border="0" width="44" height="60" />
+                        <a href="?cmd=mlsearch&__search&__selfields=actors&__searchitem=<?% actor.0 %?>"><?% actor.0 %?></a>
+                        <?% END %?>
+                    </div>
+            <?% END %?>
+            </div>
+    </td>
+</tr>
+<?% END %?>
+</table>
diff --git a/skins/html/mledit.tmpl b/skins/html/mledit.tmpl
new file mode 100644
index 0000000..493dba9
--- /dev/null
+++ b/skins/html/mledit.tmpl
@@ -0,0 +1,207 @@
+<h1><?% IF data.id %?>

+    <?% gettext("Edit Media") %?>

+    <?% ELSE %?>

+    <?% gettext("Create Media") %?>

+<?% END %?></h1>

+

+<?% INCLUDE 'mlnavcontainer.tmpl'

+        nav_back = 1

+        nav_copy = 1

+        nav_edit = 1

+        nav_delete = 1

+        nav_new = 1

+        nav_search = 1

+        nav_ranges = 1

+%?>

+

+<form method="post" action="?cmd=mlsave" name="library">
+<input type="hidden" name="data" value="<?% IF data.id %?><?% data.id %?><?% ELSE %?><?% param.id %?><?% END %?>" />

+<input type="hidden" name="__range" value="<?% param.range %?>" />

+<table border="100%">

+    <tr>

+        <td>

+            <?% gettext('Title') %?>:

+        </td>

+        <td colspan="3">

+            <input type="text" name="__title" id="title" value="<?% data.title || param.title %?>" size="50" maxlength="255" />
+            <!--

+            &nbsp;<input type="submit" name="__search" value="<?% gettext('Search at') %?>"  onfocus="document.library.action='?cmd=mlresearch'" onblur="document.library.action='?cmd=mlsave'" />&nbsp;&nbsp;

+            <input type="radio" name="__source" value="dvdpalace" checked>&nbsp;

+            <a href="http://www.dvd-palace.de" target="_blank">DVD-Palace (DE)</a>
+            -->

+            <!--<img width="100" height="28" src="images/dvdpalace.gif" border="0" alt="www.dvd-palace.de"/ align="bottom">-->

+            <!--<input type="radio" name="__source" value"nix">&nbsp;Nix-->

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('Subtitle') %?>:

+        </td>

+        <td>

+            <input type="text" name="__subtitle" id="subtitle" value="<?% data.subtitle || param.subtitle %?>" size="50" maxlength="255" />

+        </td>

+        <td>

+            <?% gettext('Country') %?>:

+        </td>

+        <td>

+            <input type="text" name="__country" id="country" value="<?% data.country || param.country %?>" size="50" maxlength="255" />

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('Cover URL') %?>:

+        </td>

+        <td>

+            <input type="text" name="__imgurl" id="imgurl" value="<?% data.imgurl || param.imgurl %?>" size="50" maxlength="255" />

+        </td>

+        <td>

+            <?% gettext('Director') %?>:

+        </td>

+        <td>

+            <input type="text" name="__director" id="director" value="<?% data.director || param.director %?>" size="50" maxlength="255" />

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('Language') %?>:

+        </td>

+        <td>

+            <input type="text" size="15" maxlength="255" name="__language" id="language" value="<?% data.language || param.language %?>" />

+            <a href="#" title="set to german" onclick="document.library.__language.value='<?% gettext('german') %?>'">

+                <img src="images/german.gif" border="0" alt="<?% gettext('german') %?>" />

+            </a>

+            <a href="#" title="set to english" onclick="document.library.__language.value='<?% gettext('english') %?>'">

+                <img src="images/english.gif" border="0" alt="<?% gettext('english') %?>" />

+            </a>

+            <a href="#" title="set to french" onclick="document.library.__language.value='<?% gettext('french') %?>'">

+                <img src="images/french.gif" border="0" alt="<?% gettext('french') %?>" />

+            </a>

+            <a href="#" title="set to spanish" onclick="document.library.__language.value='<?% gettext('spanish') %?>'">

+                <img src="images/spanish.gif" border="0" alt="<?% gettext('spanish') %?>" />

+            </a>

+        </td>

+        <td rowspan="5">

+            <?% gettext('Plot') %?>:

+        </td>

+        <td rowspan="5">

+            <textarea cols="40" rows="8" name="__plot" id="plot" wrap="virtual"><?% data.plot || param.plot %?></textarea>

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('DiskID') %?>:

+        </td>

+        <td>

+            <input type="text" name="__diskid" id="diskid" value="<?% data.diskid || param.diskid %?>" size="15" maxlength="255" />

+            <input type="hidden" name="__id" id="id" value="<?% data.id || param.id %?>" size="15" maxlength="255" />

+            <?% gettext('Mediatype') %?>

+            <select name="__mediatype">

+                <option label="" value="0" <?% IF (data.mediatype || param.mediatype) && (data.mediatype == 0 || param.mediatype == 0) %?>selected="selected"<?% END %?>></option>

+                <?% mediatypes = param.mediatypes %?>

+                <?% FOREACH type = mediatypes %?>

+                <option label="<?% type.1 %?>" value="<?% type.0 %?>" <?% IF data.mediatype == type.0 || param.mediatype == type.0 %?>selected="selected"<?% END %?>><?% type.1 %?></option>

+                <?% END %?>

+            </select>

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('TV-Episode') %?>:

+        </td>

+        <td>

+            <input type="checkbox" name="__istv" id="istv" value="<?% data.istv || param.istv %?>" />

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('Seen') %?>:

+        </td>

+        <td>

+            <input type="checkbox" name="__seen" id="seen" value="<?% data.seen || param.seen %?>" />

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('Runtime') %?>:

+        </td>

+        <td>

+            <input type="text" name="__runtime" id="runtime" value="<?% data.runtime || param.runtime %?>" size="5" maxlength="5" />min

+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

+            <?% gettext('Year') %?>:

+            <input type="text" name="__year" id="year" value="<?% data.year || param.year %?>" size="5" maxlength="4" />

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('Filename') %?>:

+        </td>

+        <td>

+            <input type="text" name="__filename" id="filename" value="<?% data.filename || param.filename %?>" size="50" maxlength="255" />

+        </td>

+        <td rowspan="5">

+            <?% gettext('Actors') %?>:

+        </td>

+        <td rowspan="5">

+            <textarea cols="40" rows="8" name="__actors" id="actors" wrap="off"><?% data.actors || param.actors %?></textarea>

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('Filesize') %?>:

+        </td>

+        <td>

+            <input type="text" name="__filesize" id="filesize" value="<?% data.filesize || param.filesize %?>" size="10" maxlength="15" /> bytes

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('Filedate') %?>:

+        </td>

+        <td>

+            <input type="text" name="__filedate" id="filedate" value="<?% data.filedate || param.filedate %?>" size="18" maxlength="20" />

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('Audio Codec') %?>:

+        </td>

+        <td>

+            <input type="text" name="__audio_codec" id="audio_codec" value="<?% data.audio_codec || param.audio_codec %?>" />

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('Video Codec') %?>:

+        </td>

+        <td>

+            <input type="text" name="__video_codec" id="video_codec" value="<?% data.video_codec || param.video_codec %?>" />

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <?% gettext('Size') %?>:

+        </td>

+        <td>

+            <input type="text" name="__video_width" id="video_width" value="<?% data.video_width || param.video_width %?>" size="5" maxlength="4" /> x

+            <input type="text" name="__video_height" id="video_height" value="<?% data.video_height || param.video_height %?>" size="5" maxlength="4" />

+        </td>

+        <td rowspan="2">

+            <?% gettext('Comment') %?>:

+        </td>

+        <td rowspan="2">

+            <textarea cols="40" rows="8" name="__comment" id="comment" wrap="virtual"><?% data.comment || param.comment %?></textarea>

+        </td>

+    </tr>

+    <tr>

+        <td colspan="2"><?% gettext('Genre') %?>:

+            <br/>

+            <?% INCLUDE 'mlgenres.tmpl' %?>

+        </td>

+    </tr>

+    <tr>

+        <td colspan="4">

+            <input type='submit' name="__save" value='<?% gettext('Save') %?>' onfocus="document.library.action='?cmd=mlsave'" onblur="document.library.action='?cmd=mlresearch'"/>&nbsp;

+        </td>

+    </tr>

+</table>

+</form>

diff --git a/skins/html/mlgenres.tmpl b/skins/html/mlgenres.tmpl
new file mode 100644
index 0000000..4fdb73f
--- /dev/null
+++ b/skins/html/mlgenres.tmpl
@@ -0,0 +1,17 @@
+<table class="genreselect" width="100%">
+    <?% allgenres = param.allgenres %?>
+    <?% WHILE allgenres.size %?>
+    <tr>
+    <?% FOREACH [ 1..5 ] %?>
+    <?% set = allgenres.shift %?>
+        <td nowrap="nowrap">
+        <?% IF set.first %?>
+            <input type="checkbox" name="__genres" id="<?% set.0 %?>" value="<?% set.0 %?>" <?% IF  param.genres.grep("^$set.0\$").size > 0 %?>checked="checked"<?% END %?>/>
+            <label for="<?% set.0 %?>"><?% set.1 %?></label>
+        <?% END %?>
+        </td>
+    <?% END %?>
+    </tr>
+    <?% END %?>
+    </tr>
+</table>
diff --git a/skins/html/mlimport.tmpl b/skins/html/mlimport.tmpl
new file mode 120000
index 0000000..b15f879
--- /dev/null
+++ b/skins/html/mlimport.tmpl
@@ -0,0 +1 @@
+mledit.tmpl
\ No newline at end of file
diff --git a/skins/html/mlist.tmpl b/skins/html/mlist.tmpl
new file mode 100644
index 0000000..1384a2b
--- /dev/null
+++ b/skins/html/mlist.tmpl
@@ -0,0 +1,113 @@
+<h1><?% gettext("Music library") %?></h1>
+<!-- TableTemplate -->
+<form name="musicform" onSubmit="location.href = '?cmd=ml&amp;data=' + 'search:' + document.forms[0].search.value; return false">
+<table width="95%" border=1>
+<tr>
+    <th>
+    <?% gettext("Artists") %?>: <select name='artists' onChange="di('artist:' + this.form.artists.options[this.form.artists.options.selectedIndex].value, '?cmd=ml&amp;data=')">
+    <?% FOREACH ch = param.artists %?>
+        <option value="<?% url( ch.0 ) %?>" <?% "selected" IF cgi.param('data').split(':').first == 'artist' && cgi.param('data').split(':').last == ch.0 %?>><?% ch.0 %?></option>
+    <?% END %?>
+    </select>
+    </th>
+
+    <th>
+    <?% gettext("Albums") %?>: <select name='albums' onChange="di('album:' + this.form.albums.options[this.form.albums.options.selectedIndex].value, '?cmd=ml&amp;data=')">
+    <?% FOREACH ch = param.albums %?>
+        <option value="<?% url( ch.0 ) %?>" <?% "selected" IF cgi.param('data').split(':').first == 'album' && cgi.param('data').split(':').last == ch.0 %?>><?% chop(ch.0,50) %?></option>
+    <?% END %?>
+    </select>
+    </th>
+</tr>
+<tr>
+    <th>
+    <?% gettext("Search") %?>: <input name='search' value='<?% cgi.param('data').split(':').last IF cgi.param('data').split(':').first == 'search' %?>'><input type='button' onClick="location.href = '?cmd=ml&amp;data=' + 'search:' + document.forms[0].search.value" value="<?% gettext("Go") %?>">
+    </th>
+    <th>
+    <?% gettext("Genres") %?>: <select name='genres' onChange="di('genre:' + this.form.genres.options[this.form.genres.options.selectedIndex].value, '?cmd=ml&amp;data=')">
+    <?% FOREACH ch = param.genres %?>
+        <option value="<?% url( ch.0 ) %?>" <?% "selected" IF cgi.param('data').split(':').first == 'genre' && cgi.param('data').split(':').last == ch.0 %?>><?% ch.0 %?></option>
+    <?% END %?>
+    </select>
+    </th>
+</tr>
+</table>
+<br>
+
+
+<b>
+<?% IF allow('mplay') %?>
+<a href="#" onClick="Play('<?% gettext("Nothing selected!") %?>',document.musicform)">
+[<?% gettext("Play selected songs") %?>]
+</a>
+<?% END %?>
+<?% IF allow('mrefresh') %?>
+<a href="?cmd=mrefresh">[<?% gettext("Update Music Database") %?>]</a>
+<?% END %?>
+<?% IF allow('mcovers') %?>
+<a href="?cmd=mcovers">[<?% gettext("Get new Covers") %?>]</a>
+<?% END %?>
+</b>
+<?% IF allow('mplay') %?>
+<br>
+<a href="#" onClick="selAll(document.musicform, 1)">[<?% gettext("Select all") %?>]</a>
+<a href="#" onClick="selAll(document.musicform, 0)">[<?% gettext("Unselect all") %?>]</a>
+<a href="#" onClick="reverse(document.musicform)">[<?% gettext("Reverse select") %?>]</a>
+<?% END %?>
+<p>
+<table border="0" width="95%">
+<?% IF data.size %?>
+    <?% fields = data.shift %?>
+        <?% FOREACH zeile = data %?>
+        <?% IF !oldalbum.defined || zeile.2 != oldalbum %?>
+        <tr>
+        <td colspan=<?% zeile.size %?>>
+            &nbsp;
+        </td>
+        </tr>
+        <tr>
+        <td colspan=<?% zeile.size %?>>
+            <img class="cover" src="?cmd=mcoverimage&amp;data=<?% zeile.0 %?>" alt="<?% zeile.2 %?>" align="right" />&nbsp;
+            <?% albummark = "Album"+loop.count %?>
+            <h1>Album: <?% zeile.2 %?>&nbsp;<font size=2><a href="#" onClick="selSwitch(document.musicform, '<?% albummark %?>')">[<?% gettext("Selection") %?> album]</a></font></h1>
+            <h3>
+            <?% gettext("Artist") %?>: <?% zeile.1 %?>,&nbsp;
+            <?% gettext("Year") %?>: <?% zeile.5 %?>,&nbsp;
+            <?% gettext("Genre") %?>: <?% zeile.7 %?>,&nbsp;
+            <?% gettext("Comment") %?>: <?% chop(zeile.last,25) %?>&nbsp;
+            </h3>
+        </td>
+        </tr>
+        <tr>
+        <?% FOREACH field = fields %?>
+        <?% NEXT IF field.match('^__') %?>
+            <th><?% field %?></th>
+        <?% END %?>
+        </tr>
+        <?% END %?>
+        <tr>
+            <?% c = -1 %?>
+            <?% FOREACH field = zeile %?>
+                <?% c = c + 1 %?>
+                <?% NEXT IF fields.$c.match('^__') %?>
+                <?% IF c == 0; # Id Field %?>
+                <td>
+<?% IF allow('mplay') %?>
+                    <input name='<?% albummark %?>' type="checkbox" value="<?% url(field) %?>">
+<?% END %?>
+                </td>
+                <?% ELSIF c == 1 || c == 2; # Artist/Album Field %?>
+                    <?% typ = (c == 1 ? 'artist' : 'album') %?>
+                <td>
+                    <a href="?cmd=ml&data=<?% typ %?>:<?% url(field) %?>"><?% field %?></a>
+                </td>
+                <?% ELSE %?>
+                <td><?% field %?></td>
+                <?% END %?>
+            <?% END %?>
+        </tr>
+            <?% oldalbum = zeile.2 %?>
+        <?% END %?>
+<?% END %?>
+</form>
+</table>
diff --git a/skins/html/mllist.tmpl b/skins/html/mllist.tmpl
new file mode 100644
index 0000000..fc728e1
--- /dev/null
+++ b/skins/html/mllist.tmpl
@@ -0,0 +1,10 @@
+<h1><?% gettext("Media list") %?></h1>
+
+<?% INCLUDE 'mlnavcontainer.tmpl'
+        nav_ranges = 1
+        nav_new = 1
+        nav_search = 1
+%?>
+
+<?% INCLUDE 'mllistmedias.tmpl' %?>
+
diff --git a/skins/html/mllistmedias.tmpl b/skins/html/mllistmedias.tmpl
new file mode 100644
index 0000000..123d2ff
--- /dev/null
+++ b/skins/html/mllistmedias.tmpl
@@ -0,0 +1,49 @@
+<?% IF data.size %?>
+<!-- TableTemplate -->
+<?% WHILE data.size %?>
+    <?% fields = data.shift %?>
+        <?% IF fields.0 %?>
+        <div style="float:left;height:150px;width:325px;overflow:hidden">
+        <table width="100%">
+            <tr>
+                <td>
+                    <a href='?cmd=mldisplay&data=<?% fields.0 %?>&__range=<?% param.range %?>'>
+                    <img src='<?% IF param.usecache == "y" %?>?cmd=mlcache&__source=<?% END %?><?% fields.1 %?>' alt="" border="0" width="97" height="144" align="left">
+                </td>
+                <td width="100%">
+                    <b>
+                    <a href='?cmd=mldisplay&data=<?% fields.0 %?>&__range=<?% param.range %?>'>
+                    <?% fields.2 %?>
+                    <?% IF fields.3 %?>
+                    - <?% fields.3 %?>
+                    <?% END %?>
+                    </a>
+                    </b><br>
+                    <?% IF fields.4 && fields.5 %?>
+                    <font size="-2">[
+                    <?% IF fields.4 %?><a href="?cmd=mlsearch&__search&__selfields=year&__searchitem=<?% fields.4 %?>"><?% fields.4 %?></a><?% END %?>
+                    <?% IF fields.4 && fields.5 %?>;<?% END %?>
+                    <?% IF fields.5 %?>
+                        <?% mydirectors = [] %?>
+                        <?% FOREACH director = fields.5.split(',') %?>
+                            <?% director = director.replace('^\s+|\s+$','') %?>
+                            <?% director = "<a href=\"?cmd=mlsearch&__search&__selfields=director&__searchitem=$director\">$director</a>" %?>
+                            <?% mydirectors.push(director) %?>
+                        <?% END %?>
+                        <?% mydirectors.join(', ') %?>
+                    <?% END %?>]
+                    </font><br>
+                    <?% END %?>
+                    <font size="-4">
+                    <?% fields.6 %?>...
+                    <a href='?cmd=mldisplay&data=<?% fields.0 %?>&__range=<?% param.range %?>'>
+                    <b><?% gettext("more") %?></b>
+                    </a>
+                    </font>
+                </td>
+            </tr>
+        </table>
+        </div>
+        <?% END %?>
+    <?% END %?>
+<?% END %?>
diff --git a/skins/html/mlnavcontainer.tmpl b/skins/html/mlnavcontainer.tmpl
new file mode 100644
index 0000000..97a9264
--- /dev/null
+++ b/skins/html/mlnavcontainer.tmpl
@@ -0,0 +1,33 @@
+<form name='media'>
+<?% IF nav_ranges %?>
+    
+        <select name='ranges' onChange="di(this.form.ranges.options[this.form.ranges.options.selectedIndex].value, '?cmd=mllist&__range=')">
+            <option value="0"><?% gettext('Ranges') %?></option>
+        <?% FOREACH r = param.ranges %?>
+            <option value='<?% r.first %?>'<?% " selected" IF cgi.param('__range') == r.first %?> ><?% r.last %?></option>
+        <?% END %?>
+        </select>
+    
+<?% END %?>
+<?% IF nav_new && allow('mledit') %?>
+<a href="?cmd=mledit&__range=<?% param.range %?>">[<?% gettext("New") %?>]</a>
+<?% END %?>
+<?% IF nav_edit && allow('mledit') %?>
+<a href="?cmd=mledit&data=<?% fields.0 %?>&__range=<?% param.range %?>">[<?% gettext("Edit") %?>]</a>
+<?% END %?>
+<?% IF nav_copy && allow('mlcopy') %?>
+<a href="?cmd=mlcopy&data=<?% fields.0 %?>&__range=<?% param.range %?>">[<?% gettext("Copy") %?>]</a>
+<?% END %?>
+<?% IF nav_delete && allow('mldelete') %?>
+<a href="?cmd=mldelete&data=<?% fields.0 %?>&__range=<?% param.range %?>">[<?% gettext("Delete") %?>]</a>
+<?% END %?>
+<?% IF nav_back %?>
+<a href="<?% info.Referer %?>">[<?% gettext("Back") %?>]</a>
+<?% END %?>
+<?% IF nav_search && allow('mlsearch') %?>
+<a href="?cmd=mlsearch&__range=<?% param.range %?>">[<?% gettext("Search") %?>]</a>
+<?% END %?>
+
+
+<?% INCLUDE 'widgets/referer.tmpl' %?>
+</form>
diff --git a/skins/html/mlresearch.tmpl b/skins/html/mlresearch.tmpl
new file mode 100644
index 0000000..a30dd98
--- /dev/null
+++ b/skins/html/mlresearch.tmpl
@@ -0,0 +1,71 @@
+<h1>
+<?% IF param.hitcount < 1 %?>
+<?% gettext("Search result : None title found.") %?>
+<?% ELSIF param.hitcount == 1 %?>
+<?% gettext("Search result : One title found.") %?>
+<?% ELSE %?>
+<?% topic = gettext("Search results : %s titles found."); topic | replace('%s',param.hitcount) %?>
+<?% END %?>
+</h1>
+

+<?% INCLUDE 'mlnavcontainer.tmpl'

+        nav_back = 1

+        nav_new = 1

+        nav_search = 1

+        nav_ranges = 1

+%?>

+

+

+<table>

+<?% WHILE data.size %?>

+<?% fields = data.shift %?>

+    <tr>

+        <td>

+            <?% IF fields.1 %?>

+            <a href="?cmd=mlimport&__import=<?% fields.0 %?>&__id=<?% param.id %?>&__range=<?% param.range %?>&__source=<?% param.source %?>">

+                <img src="<?% fields.1 %?>">

+            </a>

+            <?% END %?>

+        </td>

+        <td>

+            <?% IF fields.0 %?>

+            <a href="?cmd=mlimport&__import=<?% fields.0 %?>&__id=<?% param.id %?>&__range=<?% param.range %?>&__source=<?% param.source %?>">

+            <?% END %?>

+                <b><?% fields.2 %?></b>

+            <?% IF fields.0 %?>

+            </a>

+            <?% END %?>

+        </td>

+        <td>

+            <?% IF fields.3 %?>

+            <font size="-2">

+                <?% fields.3 | replace('\n', '<br>') %?>

+            </font>

+            <?% END %?>

+        </td>

+    </tr>

+<?% END %?>

+    <tr>

+        <td align="center" colspan="3">

+            <b>

+                <font size="+1">

+                    &nbsp;

+                    <?% c = 1 %?>

+                    <?% d = 0 %?>

+                    <?% WHILE d < param.hitcount %?>

+                    <?% IF ( param.start.defined || d != 0 ) && param.start != d %?>

+                        <a href="?cmd=mlresearch&__source=<?% param.source %?>&__title=<?% param.title %?>&__start=<?% d %?>">

+                    <?% END %?>

+                        <?% c %?>

+                    <?% IF ( param.start.defined || d != 0 ) && param.start != d %?>

+                        </a>

+                    <?% END %?>

+                    <?% c = c + 1 %?>

+                    <?% d = d + 20 %?>

+                    <?% END %?>

+                    &nbsp;

+                </font>

+            </b>

+        </td>

+    </tr>

+</table>

diff --git a/skins/html/mlsearch.tmpl b/skins/html/mlsearch.tmpl
new file mode 100644
index 0000000..b2e94d7
--- /dev/null
+++ b/skins/html/mlsearch.tmpl
@@ -0,0 +1,52 @@
+<h1><?% gettext("Search Media") %?></h1>
+
+<?% INCLUDE 'mlnavcontainer.tmpl'
+        nav_back = 1
+        nav_ranges = 1
+        nav_new = 1
+%?>
+
+<script language="JavaScript" type="text/javascript">
+function selectAllFields()
+{
+	for (var i = 0; i < document.search['__selfields'].length; i++)
+	{
+		document.search['__selfields'].options[i].selected = true;
+	}
+}
+</script>
+
+<form name="search">
+<input type="hidden" name="cmd" value="mlsearch"/>
+<table width="100%">
+    <tr>
+        <td valign="middle" align="center">
+            <?% gettext('Search Item') %?>:
+            <input type="text" name="__searchitem" id="searchitem" value="<?% param.searchitem %?>" size="50" maxlength="255" />
+        </td>
+        <td valign="middle" align="center">
+            <?% gettext('Search in') %?>:<br>
+            <select name='__selfields' size="8" multiple="multiple">
+            <?% fields = param.fields %?>
+            <?% WHILE fields.size %?>
+            <?% field = fields.shift %?>
+                <option value="<?% field.0 %?>" <?% IF param.selfields.grep("^$field.0\$").size > 0 %?>selected<?% END %?>><?% field.1 %?>
+            <?% END %?>
+            </select>
+            <br>
+            <a href="javascript:selectAllFields()" ><?% gettext('Select all') %?></a>
+        </td>
+        <td valign="middle" align="center">
+            <?% gettext('Search in selected Genres') %?>
+            <?% INCLUDE 'mlgenres.tmpl' %?>
+        </td>
+    </tr>
+    <tr>
+        <td colspan="3">
+            <input type='submit' name="__search" value='<?% gettext('Search') %?>'/>
+        </td>
+    </tr>
+</table>
+</form>
+
+<?% INCLUDE 'mllistmedias.tmpl' %?>
diff --git a/skins/html/movetimerlist.tmpl b/skins/html/movetimerlist.tmpl
new file mode 100644
index 0000000..5295ce8
--- /dev/null
+++ b/skins/html/movetimerlist.tmpl
@@ -0,0 +1,98 @@
+<!-- movetimerlist -->
+<?% ######################################################################## %?>
+<?% enableform = allow('movetimerdelete') && data.size > 1  %?>
+<?% ######################################################################## %?>
+<?% BLOCK RowButtons %?>
+<?% IF allow('movetimeredit') %?>
+                        <a title="<?% gettext("Edit rule to move timer") %?>"
+                           name="<?% id %?>" href="?cmd=movetimeredit&amp;data=<?% id %?>">
+                            [E]
+                        </a>
+<?% END %?>
+<?% IF allow('movetimerdelete') %?>
+                        <a title="<?% gettext("Delete rule to move timer") %?>"
+                           href="javascript:sure(document.movetimerlist, '<?% gettext("Would you like to delete this rule?") %?>\n<?% escape(source) %?> - <?% escape(destination) %?>','?cmd=movetimerdelete&amp;data=',<?% id %?>)">
+                            [D]
+                        </a>
+<?% END %?>
+<?% END %?>
+<?% ######################################################################## %?>
+<?% BLOCK Item %?>
+        <tr<?% ' bgcolor="#F5F5F5"' IF loop.count mod 2 == 0 %?>>
+          <td>
+            <?% IF enableform %?>
+        			<input type="checkbox" value="<?% id %?>" name="<?% source %?> - <?% destination %?>" />
+            <?% END %?>
+            <?% PROCESS RowButtons %?>
+          </td>
+          <td>
+<?% IF allow('movetimeredit') %?>
+            <a name="<?% id %?>" href="?cmd=movetimeredit&amp;data=<?% id %?>">
+<?% END %?>
+            <?% source %?>
+<?% IF allow('movetimeredit') %?>
+            </a>
+<?% END %?>
+          </td>
+          <td>
+            <?% destination %?>
+          </td>
+          <td>
+            <?% when %?>
+          </td>
+          <td>
+            <?% action %?>
+          </td>
+        </tr>
+<?% END %?>
+<?% ######################################################################## %?>
+<h1>
+    <?% gettext("Rules to move timer between channels") %?>
+</h1>
+
+<?% IF allow('movetimercreate') %?>
+    <a title="<?% gettext("Create a new rule to move timer") %?>"
+        href="?cmd=movetimercreate">[<?% gettext("Create a new rule to move timer",25) %?>]</a>
+<?% END %?>
+<?% IF data.size > 1 %?>
+  <?% IF allow('movetimer') %?>
+    <a title="<?% gettext("Manual move timer between channels") %?>"
+       href="?cmd=movetimer">[<?% gettext("Manual move timer between channels",25) %?>]</a>
+  <?% END %?>
+  <?% IF allow('movetimerdelete') %?>
+    <a title="<?% gettext("Delete rules to move timer") %?>"
+       href="#" onClick="Delete('<?% gettext("Would you like to delete these rules?") %?>','<?% gettext("Nothing selected!") %?>','movetimerdelete',document.movetimerlist)">
+        [<?% gettext("Delete rules to move timer",25) %?>]</a>
+  <?% END %?>
+<?% END %?>
+
+<?% IF data.size > 1 %?>
+<?% fields = data.shift %?>
+<?% IF enableform %?>
+<br />
+<a href="#" onClick="selAll(document.movetimerlist, 1)">[<?% gettext("Select all") %?>]</a>
+<a href="#" onClick="selAll(document.movetimerlist, 0)">[<?% gettext("Unselect all") %?>]</a>
+<a href="#" onClick="reverse(document.movetimerlist)">[<?% gettext("Reverse select") %?>]</a>
+<form name="movetimerlist" action="">
+  <?% INCLUDE 'widgets/referer.tmpl' %?>
+<?% END %?>
+
+      <table summary="" width="95%">
+            <tr><th width="80"><?% gettext('Service') %?></th>
+                <th><?% gettext('Source') %?></th>
+                <th><?% gettext('Destination')%?></th>
+                <th><?% gettext('Move timer') %?></th>
+                <th><?% gettext('Change original timer') %?></th>
+            </tr>
+     <?% FOREACH zeile = data %?>
+        <?% IF verbose;"<!-- Item: ";FOREACH x = zeile;loop.count - 1;":";x.replace("-"," ");"|";END;"-->";END %?>
+        <?%- id=zeile.0;source=zeile.1;destination=zeile.2;when=zeile.3;action=zeile.4 -%?>
+        <?% PROCESS Item %?>
+     <?% END %?>
+      </table>
+<?% IF enableform %?>
+</form>
+<?% END %?>
+
+<?% END %?>
+
diff --git a/skins/html/network.tmpl b/skins/html/network.tmpl
new file mode 100644
index 0000000..5e39706
--- /dev/null
+++ b/skins/html/network.tmpl
@@ -0,0 +1,100 @@
+<?%
+    USE date;
+    statusfiles = {};
+
+    FILTER null;
+        fields = data.shift;
+
+        timestamps = [];
+        FOREACH row = data;
+            iname = row.0.split(':').first;
+
+            rxbytes.${iname} = [];
+            txbytes.${iname} = [];
+            rxerror.${iname} = [];
+            txerror.${iname} = [];
+
+            oldentry.${iname} = [];
+        END;
+
+        FOREACH row = data;
+            IF ot != row.5;
+             t = date.format(row.5, '%H:%M');
+             timestamps.push(t);
+             ot = row.5;
+            END; 
+
+                iname = row.0.split(':').first;
+
+                UNLESS oldentry.${iname}.size;
+                    oldentry.${iname} = row;
+                END;
+
+                bytes = row.1 - oldentry.${iname}.1;
+                rxbytes.${iname}.push(bytes / (1024*1024));
+
+                bytes = row.3 - oldentry.${iname}.3;
+                txbytes.${iname}.push(bytes / (1024*1024));
+
+                oldentry.${iname} = row;
+        END;
+
+        FOREACH iname = rxbytes.keys.sort;
+
+            # Data ...
+            d = [
+                 timestamps,
+                 rxbytes.${iname},
+                 txbytes.${iname}
+            ];
+
+            USE my_graph = GD.Graph.lines(600,300);
+
+            # Xsteps
+            steps = timestamps.size div 5;
+            label = gettext('Traffic on Interface');
+            y_label = gettext('MB')
+            label = "${label} ${iname} (${y_label})";
+            my_graph.set(
+                    title => label,
+                    x_label_skip => steps,
+                    x_long_ticks => 1,
+
+                    y_long_ticks => 1,
+
+                    line_width   => 2,
+                    box_axis     => 1,
+                    boxclr       => '#FFFFCC',
+                    fgclr        => '#BBBBBB'
+                    legend_placement => 'RD',
+                    legend_spacing => 5,
+            );
+            my_graph.set_title_font(param.font,10);
+            my_graph.set_y_label_font(param.font,10);
+            my_graph.set_x_label_font(param.font,10);
+            my_graph.set_x_axis_font(param.font,6);
+            my_graph.set_y_axis_font(param.font,6);
+            my_graph.set_legend( fields.1, fields.3);
+            statusfiles.$iname = writefile("status_network_${iname}.png", my_graph.plot(d).gif );
+        END;
+    END;
+ %?>
+
+<!-- Network Template -->
+<?% IF param.headingText %?>
+<table width=100%><tr><td class='tableheader'><h3><?% param.headingText %?></h3>
+<?% END %?>
+<table border="0" width="95%">
+
+        <?% FOREACH file = statusfiles.keys %?>
+        <tr>
+            <td colspan="<?% fields.size %?>" align=center>
+                <img src="<?% statusfiles.$file %?>">
+            </td>
+        </tr>
+        <?% END %?>
+</table>
+<?% IF param.headingText %?>
+</td></tr></table>
+<p>
+<?% END %?>
diff --git a/skins/html/next.tmpl b/skins/html/next.tmpl
new file mode 120000
index 0000000..dc903f9
--- /dev/null
+++ b/skins/html/next.tmpl
@@ -0,0 +1 @@
+now.tmpl
\ No newline at end of file
diff --git a/skins/html/now.tmpl b/skins/html/now.tmpl
new file mode 100644
index 0000000..cfd414b
--- /dev/null
+++ b/skins/html/now.tmpl
@@ -0,0 +1,104 @@
+<script language="javascript" type="text/javascript">
+<!--
+
+    <?% INCLUDE javascript/records.js %?>
+
+-->
+</SCRIPT>
+<!-- TableTemplate -->
+<form>
+    <input type="hidden" name="cmd" value="now">
+<?%
+    USE date( );
+    zeitformat = gettext("%A the %D at %H:%M o'clock");
+    IF cgi.param('data') > 2400;
+        t = date.format(cgi.param('data'), '%H:%M', locale);
+        day = date.format(cgi.param('data'), zeitformat, locale) ;
+    ELSIF cgi.param('data') && param.zeit;
+        t = date.format(param.zeit, '%H:%M', locale);
+        day = date.format(param.zeit, zeitformat, locale) ;
+    ELSE;
+        t = date.format(date.now, '%H:%M', locale);
+        day = date.format(date.now, zeitformat, locale) ;
+        now = 1;
+    END;
+%?>
+<h1><?% IF cgi.param('cmd') == 'next' %?>
+    <?% gettext("What is running at next") %?>
+    <?% ELSIF now %?>
+    <?% gettext("What is running now") %?>
+    <?% ELSE %?>
+    <?% gettext("What is running at") %?>&nbsp;<?% day %?>
+    <?% END %?>
+</h1>
+    <select name='cgroups' onChange="di(this.form.cgroups.options[this.form.cgroups.options.selectedIndex].value, '?cmd=<?% cgi.param('cmd') %?>&amp;data=<?% param.zeitvon || cgi.param('data') %?>&amp;__cgrp=')">
+        <?% FOREACH cgrp = param.cgroups %?>
+        <option value='<?% cgrp.last %?>' <?% "selected" IF param.channelgroup == cgrp.last %?>><?% cgrp.first %?>
+        <?% END %?>
+    </select>
+    <input type="text" name="data" value="<?% t %?>" size="5">
+    <input type="hidden" name="__cgrp" value="<?% cgi.param('__cgrp') %?>" />
+    <input type="submit" value="<?% gettext("Go") %?>">
+    <input type="button" value="<?% gettext("Update EPG data") %?>" onclick="location.href='?cmd=erestart'">
+</form>
+
+<table border="0" width="95%">
+<?% IF data.size %?>
+    <?% fields = data.shift %?>
+        <tr>
+        <?% FOREACH field = fields %?>
+            <?% NEXT IF field.match('^__') %?>
+            <th><?% field %?></th>
+        <?% END %?>
+        </tr>
+        <?% FOREACH zeile = data %?>
+        <?% id=zeile.0;title=zeile.1;subtitle=zeile.2;sender=zeile.3;channel=zeile.4;group=zeile.5;start=zeile.6;stop=zeile.7;desc=zeile.8;duration=zeile.9 %?>
+            <?% IF group != old %?>
+                <tr><td colspan="6" bgcolor='#DDDDDD'>
+                <b><?% group %?></b>
+                </td></tr>
+            <?% END %?>
+        <tr class="<?% myclass %?>" <?% IF (loop.count mod 2) == 0 %?>bgcolor='#F5F5F5'<?% END %?>>
+                <td><nobr>
+                <?% IF zeile.11  %?><b><?% END %?>
+                    <a href="?cmd=search&amp;data=<?% url( title ) %?>">[<?% gettext("Rep") %?>]</a>
+                <?% IF zeile.10 && allow('tedit') %?>
+                    <a href="?cmd=tedit&amp;data=<?% zeile.10 %?>">[<?% gettext("Edit") %?>]</a><br>
+                <?% ELSIF allow('tnew') %?>
+                    <a href="?cmd=tnew&amp;data=<?% id %?>"><span name='recordlink' id='<?% id %?>' class='normal'>[<?% gettext("Rec") %?>]</span></a><br>
+                <?% END %?>
+                <?% IF allow('switch') %?>
+                    <a href="?cmd=switch&amp;data=<?% channel %?>" target='Status'>[<?% gettext("Swt") %?>]</a>
+                <?% END %?>
+                </td>
+                <td>
+                    <?% IF zeile.11 %?><b><?% END %?>
+                    <?% INCLUDE bloecke/tooltip.tmpl cmd="display" eventid=id linkid=id ttp_offset=0 %?><?% title %?></a>
+                    <?% IF subtitle != "" %?>
+                    <br><small><?% subtitle %?></small>
+                    <?% END %?>
+                </td>
+                <td>
+                    <?% IF zeile.11  %?><b><?% END %?>
+                    <a href="?cmd=program&amp;data=<?% channel %?>"><?% sender %?></a>
+                </td>
+                <td><?% IF zeile.11 %?><b><?% END %?><?% start %?><?% IF zeile.11 %?></b><?% END %?></td>
+                <td><?% IF zeile.11 %?><b><?% END %?><?% stop %?><?% IF zeile.11 %?></b><?% END %?></td>
+                <?% UNLESS duration > 100 OR duration <= 0 %?>
+                <td width="100" valign='bottom'><nobr>
+                    <?% per = ( (100 - duration) + 0.999 ) div 1 ; per = (per > 100 ? 100 : per)  %?>
+                    <?% per2 = 100 - per %?>
+                    <?% text = per div 1 | format("<br><font size='1'>${per}%%</font>") %?>
+                    <table width="100%" cellspacing='0' cellpadding='0'>
+                        <tr>
+                        <td bgcolor="#dedede"><img src='images/blank.png' width="<?% per %?>" height='1' hspace=0 vspace=0><?% IF zeile.11 %?><b><?% END %?><?% (per > 19 ? text : "&nbsp;") %?></td>
+                        <td bgcolor="#ffffff"><img src='images/blank.png' width="<?% per2 %?>" height='1' hspace=0 vspace=0><?% IF zeile.11 %?><b><?% END %?><?% (per < 20 ? text : "") %?></td>
+                        <tr>
+                    </table>
+                </td>
+                <?% END %?>
+        </tr>
+        <?% old = group %?>
+        <?% END %?>
+<?% END %?>
+</table>
diff --git a/skins/html/opensearch.tmpl b/skins/html/opensearch.tmpl
new file mode 100644
index 0000000..47ff3ae
--- /dev/null
+++ b/skins/html/opensearch.tmpl
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="<?% charset %?>"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+  <ShortName><?% gettext("Search with XXV") %?></ShortName>
+  <Description><?% gettext("Search for TV shows") %?></Description>
+  <InputEncoding><?% charset %?></InputEncoding>
+  <OutputEncoding><?% charset %?></OutputEncoding>
+  <Image width="16" height="16" type="image/vnd.microsoft.icon">http://<?% info.HOST %?>/favicon.ico</Image>
+  <Url type="text/html" rel="results" template="http://<?% info.HOST %?>/?cmd=search&amp;data={searchTerms}" />
+  <Url type="application/json" rel="suggestions" template="http://<?% info.HOST %?>/?cmd=esuggest&amp;ajax=json&amp;data={searchTerms}" />
+  <Url type="application/opensearchdescription+xml" rel="self" template="http://<?% info.HOST %?>/?cmd=opensearch" />
+</OpenSearchDescription>
+
diff --git a/skins/html/program.tmpl b/skins/html/program.tmpl
new file mode 100644
index 0000000..3fdbc0f
--- /dev/null
+++ b/skins/html/program.tmpl
@@ -0,0 +1,115 @@
+<script language="javascript" type="text/javascript">
+<!--
+
+    <?% INCLUDE javascript/records.js %?>
+
+-->
+</SCRIPT>
+
+<!-- TableTemplate -->
+<?% FOREACH ch = param.channels %?>
+    <?% IF cgi.param('data') == ch.1 || cgi.param('data') == ch.0 || param.current == ch.1 %?>
+        <?% channel = ch.0 %?>
+        <?% channelpos = ch.1 %?>
+        <?% LAST %?>
+    <?% END %?>
+<?% END %?>
+<h1><?% gettext("Program guide for") %?>&nbsp;<?% channel %?></h1>
+<table>
+<tr>
+<form>
+    <td>
+        <input type="hidden" name="cmd" value="search" />
+        <input type="hidden" name="__channel" value="<?% channelpos %?>" />
+        <?% gettext("Search on Channel") %?>:<input type="text" name="data" size="10" />
+    </td>
+</form>
+<form>
+    <td>
+    <select name='data' onChange="di(this.form.data.options[this.form.data.options.selectedIndex].value, '?cmd=program&amp;data=')">
+    <?% FOREACH ch = param.channels %?>
+      <?% IF ch.2 && ch.2 != channelgroup %?>
+        <?% IF channelgroup %?>
+        </optgroup>
+        <?% END %?>
+        <optgroup label="<?% channelgroup = ch.2;ch.2 %?>">
+    <?% END %?>
+        <option value="<?% ch.1 %?>"<?% ' selected="selected"' IF channelpos == ch.1 %?>><?% ch.0 %?></option>
+    <?% END %?>
+    <?% IF channelgroup %?>
+      </optgroup>
+    <?% END %?>
+    </select>
+    </td>
+</form>
+    <td>
+        <a href='?cmd=switch&amp;data=<?% channelpos %?>'>[<?% gettext('Switch') %?>]</a>
+        <a href='?cmd=livestream&amp;data=<?% channelpos %?>'>[<?% gettext('Live TV web cast') %?>]</a>
+    </td>
+</tr>
+</table>
+
+<table border="0" width="95%">
+<?% IF data.size %?>
+    <?% fields = data.shift %?>
+        <tr>
+        <?% FOREACH field = fields %?>
+            <?% NEXT IF field.match('^__') || loop.count == 6 %?>
+            <th><?% field %?></th>
+        <?% END %?>
+        </tr>
+        <?% FOREACH zeile = data %?>
+            <?% c = 0 %?>
+            <?% day = zeile.5 %?>
+            <?% IF !oldday.defined || day != oldday %?>
+                <tr><td colspan="<?% zeile.size %?>" bgcolor='#DDDDDD'>
+                <b><?% day %?></b>
+                </td></tr>
+            <?% END %?>
+        <tr class="<?% myclass %?>"<?% IF (loop.count mod 2) == 0 %?> bgcolor='#F5F5F5'<?% END %?>>
+            <?% FOREACH field = zeile %?>
+                <?% c = c + 1 %?>
+                <?% IF c == 1; # Id Field %?>
+                <td>
+                    <a href="?cmd=search&amp;data=<?% url( zeile.1 ) %?>">[<?% gettext("Rep") %?>]</a>
+    <?% IF zeile.10 && allow('tedit') %?>
+                    <a href="?cmd=tedit&amp;data=<?% zeile.10 %?>"><b><span name='recordlink' id='<?% zeile.0 %?>' class='normal'>[<?% gettext("Edit this timer") %?>]</span></b></a>
+    <?% ELSIF allow('tnew') %?>
+                    <a href="?cmd=tnew&amp;data=<?% zeile.0 %?>"><span name='recordlink' id='<?% zeile.0 %?>' class='normal'>[<?% gettext("To record") %?>]</span></a>
+    <?% END %?>
+                <?% level = zeile.13 %?>
+                <?% IF level && allow('topten') %?><br/><a href="?cmd=topten" title="<?% gettext("Top Ten entrys") %?>" ><?% "*" FILTER repeat(level) %?></a><?% END %?>
+                </td>
+                <?% ELSIF c == 2; # Text Field %?>
+                <td>
+                    <?% INCLUDE bloecke/tooltip.tmpl cmd="display" title=field subtitle=zeile.2 desc=zeile.6 eventid=zeile.0 linkid=zeile.0 ttp_offset=0 %?>
+                    <?% IF zeile.11 %?>
+                    <b><?% field %?></b>
+                    <?% ELSE %?>
+                    <?% field %?>
+                    <?% END %?>
+                    <?% IF zeile.2.length > 0  %?>
+                    <br><small><?% zeile.2 %?></small>
+                    <?% END %?>
+                    <?% IF zeile.6.length > 0 %?>
+                    <br><small><em><?% chop(zeile.6,80) | replace('<br />',' ') %?></em></small>
+                    <?% END %?>
+                    </a>
+                </td>
+                <?% ELSIF c == 3; # Subtitle Field %?>
+                <?% ELSIF c == 6; # Day Field %?>
+                <?% ELSIF c >= 7; # Desc Field %?>
+                <?% ELSE %?>
+                    <?% IF zeile.11 %?>
+                            <td><b><?% field %?></b></td>
+                    <?% ELSE %?>
+                            <td><?% field %?></td>
+                    <?% END %?>
+                <?% END %?>
+            <?% END %?>
+        </tr>
+        <?% oldday = day %?>
+        <?% END %?>
+<?% END %?>
+</table>
+
diff --git a/skins/html/rdisplay.tmpl b/skins/html/rdisplay.tmpl
new file mode 100644
index 0000000..9263be8
--- /dev/null
+++ b/skins/html/rdisplay.tmpl
@@ -0,0 +1,200 @@
+<h1><?% gettext("Recording") %?>: <?% data.Title %?></h1>
+<!-- TableTemplate -->
+<?% USE date %?>
+<?% BLOCK marks %?>
+    <?% width = data.Duration > 7200 ? 500 : 400 %?>
+    <?% bgcolor = "red" %?>
+    <table width='<?% width %?>' align='center' cellpadding=0 cellspacing=0 border=1>
+    <tr>
+        <?% c = 0 %?>
+        <?% colspan = 0 %?>
+        <?% abstand = 15 * 60; # 15 Minuten %?>
+        <?% range = (((data.Duration div abstand)+1)) * abstand ; # Aufrunden auf auf die vollen 15 Minuten %?>
+        <?% IF range < abstand ; abstand = ( ( range div 60 ) +  1) * 60 ; END  %?>
+        <?%- WHILE c < range -%?>
+            <?%-
+                 c = c + abstand;
+                 percent = (abstand / data.Duration) * width
+                 colspan = colspan + 1;
+                 Stunden = c div 3600;
+                 Minuten = c div 60 mod 60;
+            -%?>
+        <td bgcolor="white" width="<?% offset = (c % 3600 ? 1 : 2);(percent - offset) div 1 %?>" align='right'>
+            <font size='1'><?% Stunden div 1 | format('%02d') %?>:<?% Minuten div 1 | format('%02d') %?></font>
+        </td>
+        <?% END %?>
+    </tr>
+    <tr>
+        <?% c = 0 %?>
+        <?% abstand = abstand div 3 %?>
+        <td bgcolor="white" colspan="<?% colspan %?>"><nobr><?%- WHILE c < range -%?><?%- c = c + abstand; percent = (abstand / data.Duration) * width -%?><img style="background:white" src='/images/blank.png' width="<?% offset = (c % 3600 ? 1 : 2);(percent - offset) div 1 %?>" height='10'><img style="background:<?% c % 900 ? "gray" : "black" %?>" src='/images/blank.png' width="<?% c % 3600 ? "1" : "2" %?>" height='<?% (c % 900 ? "5" : "10") %?>'><?%- END -%?></td>
+    </tr>
+    <tr>
+        <td colspan="<?% colspan %?>"><nobr><?%- secold = 0;
+        c = -1;
+        ml = d.split(',');
+        FOREACH marker = ml;
+                b = c;
+                c = c + 1;
+                m = marker.split(':');
+                sec = m.0 * 3600;
+                sec = sec + m.1 * 60;
+                sec = sec + m.2;
+                percent = ((sec-secold) / data.Duration) * width;
+                bgcolor = (bgcolor == 'red' ? 'white' : 'red');
+            -%?><img style="background:<?% bgcolor %?>" src='images/blank.png' width="<?% percent div 1 %?>" height='10' title="<?% (b < 0 ? "0:00:00.00" : ml.$b) %?> - <?% ml.$c %?>">
+            <?%- secold = sec;
+            END;
+            IF data.Duration > secold;
+            bgcolor = (bgcolor == 'red' ? 'white' : 'red');
+            percent = ((data.Duration - secold) / data.Duration) * width;
+            -%?><img style="background:<?% bgcolor %?>" src="images/blank.png" width="<?% percent div 1 %?>" height="10" title="<?% (c < 0 ? "0:00:00.00" : ml.$c) %?> - <?% data.Duration div 3600 %?>:<?% data.Duration div 60 mod 60 div 1 | format('%02d') %?>:<?% data.Duration mod 60 div 1 | format('%02d') %?>" />
+            <?% END %?>
+        </td>
+    </tr>
+    </table>
+<?% END %?>
+<?% BLOCK hfs # d in Sekunden %?>
+  <?% d div 3600 %?>:<?% d div 60 mod 60 | format('%02d') %?>:<?% d mod 60 | format('%02d') %?>
+<?% END %?>
+<?% BLOCK dur # d in Sekunden %?>
+<?% IF d > 1 %?>
+    <?% Stunden = d div 3600 %?>
+    <?% Minuten = d div 60 mod 60 %?>
+    <?% Sekunden =  d mod 60 %?>
+    <?% Stunden div 1 %?>:<?% Minuten div 1 | format('%02d') %?>:<?% Sekunden div 1 | format('%02d') %?>
+<?% END %?>
+<?% END %?>
+
+<?% quest=data.Title;IF data.SubTitle.length > 0;quest=data.SubTitle;END %?>
+
+<table>
+<form name='RecordDisplay'>
+<?% INCLUDE 'widgets/referer.tmpl' %?>
+<tr>
+    <td colspan="2"><b>
+    <a href="?cmd=rlist">[<?% gettext("Recording list") %?>]</a>&nbsp;
+<?% IF allow('rdelete') %?>
+    <a href="javascript:sure(document.RecordDisplay, '<?% gettext("Would you like to delete this recording?") %?>?','?cmd=rdelete&amp;data=<?% data.RecordId %?>')">
+    [<?% gettext("Delete recording") %?>]
+    </a>&nbsp;
+<?% END %?>
+<?% IF allow('rcut') %?>
+    <a href="?cmd=rcut&amp;data=<?% data.RecordId %?>">[<?% gettext("Cut recording") %?>]</a>&nbsp;
+<?% END %?>
+<?% IF allow('redit') %?>
+    <a href="?cmd=redit&amp;data=<?% data.RecordId %?>">[<?% gettext("Edit recording") %?>]</a>&nbsp;
+<?% END %?>
+<?% IF allow('playrecord') %?>
+    <a href="?cmd=playrecord&amp;data=<?% data.RecordId %?>">[<?% gettext("Watch recording as web cast") %?>]</a>&nbsp;
+<?% END %?>
+<?% IF allow('rplay') %?>
+    <a href="?cmd=rplay&amp;data=<?% data.RecordId %?>">[<?% gettext("Watch recording in VDR") %?>]</a>&nbsp;
+<?% END %?>
+    <a target="_blank" href="http://german.imdb.com/find?s=tt&amp;site=aka&amp;q=<?% quest %?>">
+        [<?% gettext("Search with IMDb") %?>]
+    </a>
+    <a target="_blank" href="http://www.ofdb.de/view.php?page=suchergebnis&Kat=Titel&SText=<?% quest %?>">
+        [<?% gettext("Search with OFDb") %?>]
+    </a>
+<?% IF allow('rconvert') %?>
+    <br />
+    <select name='data' onChange="di(this.form.data.options[this.form.data.options.selectedIndex].value, '?cmd=rconvert&amp;data=<?% data.RecordId %?>&amp;__action=save&amp;__cmd=')">
+    <?% c = 0 %?>
+        <option value='0'><?% gettext("Choose a command to edit this recording ...") %?>:</option>
+    <?% FOREACH cmd = param.reccmds %?>
+        <?% c = c + 1 %?>
+        <option value='<?% c %?>'><?% cmd %?></option>
+    <?% END %?>
+    </select>
+<?% END %?>
+    </td>
+</tr>
+<tr>
+    <td>
+	<?% files = data.preview.split(',') %?>
+  <?% IF data.Type == 'RADIO' %?>
+    <img src="images/radio.png" alt="" title="<?% gettext('Radio recording') %?>" />
+  <?% ELSIF files.size > 0; %?>
+        <table border="0" align='left'>
+    <?% FOREACH frame = files %?>
+        <tr>
+        <td>
+          <img src="?cmd=ri&data=<?% data.RecordId %?>_<?% frame %?>" alt="" width="200" title="<?% gettext('Television recording') %?> : <?% x=frame / 25;PROCESS hfs d=x %?>" />
+        </td>
+        </tr>
+    <?% END %?>
+        </table>
+  <?% ELSE %?>
+    <img src="images/movie.png" alt="" width="200" title="<?% gettext('Television recording') %?>" />
+  <?% END; %?>
+    </td><td>
+        <table border="0">
+        <th colspan=2>
+        <?% IF data.New > 0 %?><img src="images/new.png" alt="" title="<?% gettext("New recording") %?>" /><?% END %?>
+        <?% data.Title %?><?% IF data.SubTitle %?><br><?% data.SubTitle %?><?% END %?></th>
+        <tr>
+            <td>&nbsp;</td>
+            <td><?% date.format(data.StartTime,"%A, %x",locale) %?>&nbsp;
+                &nbsp;&nbsp;&nbsp;<?% date.format(data.StartTime,"%H:%M",locale) %?>&nbsp;-&nbsp;<?% date.format(data.StopTime,"%H:%M",locale) %?>&nbsp;
+                 (<?% gettext('Duration') %?> : <?% PROCESS dur d=data.Duration %?>
+                  <?% IF ( data.cutlength + 10 ) <  data.Duration %?>&nbsp;<?% gettext("By cut") %?> : <?% PROCESS dur d=data.cutlength %?><?% END %?>
+                 )
+            </td>
+        </tr>
+        <tr>
+            <td>&nbsp;</td>
+            <td>
+            <?% data.Description %?><br>
+            </td>
+        </tr>
+        <tr>
+            <td>&nbsp;</td>
+            <td>
+            <?% PROCESS marks d=data.Marks %?>
+            </td>
+        </tr>
+        <?% IF data.Channel %?>
+        <tr>
+            <td>&nbsp;</td>
+            <td>
+            <?% gettext('Channel') %?> : <?% data.Channel %?>
+            </td>
+        </tr>
+        <?% END %?>
+        <?% allowkeywords = allow('rk') %?>
+        <?% IF data.keywords && data.keywords.size > 0 %?>
+				<tr>
+          <td>&nbsp;</td>
+					<td>
+                  <?% gettext('Keywords') %?>&nbsp;:&nbsp;
+                  <?% FOREACH keyword = data.keywords %?>
+                      <?% IF allowkeywords %?>
+                              <a href="?cmd=rk&amp;data=<?% keyword.0 %?>">
+                      <?% END %?>
+                                <?% keyword.0 %?>
+                      <?% IF allowkeywords %?>
+                              </a>
+                      <?% END %?>
+                      &nbsp;
+                  <?% END %?>
+		      </td>
+				</tr>
+        <?% END %?>
+        <tr>
+            <td>&nbsp;</td>
+            <td>
+            <?% gettext('Lifetime') %?> : <?% data.lifetime %?>
+            </td>
+        </tr>
+        <tr>
+            <td>&nbsp;</td>
+            <td>
+            <?% gettext('Priority') %?> : <?% data.priority %?>
+            </td>
+        </tr>
+        </table>
+    </td>
+</tr>
+</form>
+</table>
diff --git a/skins/html/report.tmpl b/skins/html/report.tmpl
new file mode 100644
index 0000000..8b5c0b0
--- /dev/null
+++ b/skins/html/report.tmpl
@@ -0,0 +1,50 @@
+<h1><?% gettext("Protocol of the activities") %?></h1>
+
+<?% FOREACH name = data.keys.sort %?>
+    <h2><?% gettext("Report for module") %?>&nbsp;
+        <?% name %?>:</h2>
+    <?% IF name == 'RECORDS';
+            link = '?cmd=rdisplay&data=';
+        ELSIF name == 'AUTOTIMER';
+            link = '?cmd=tedit&data=';
+        ELSIF name == 'SVDRP';
+            link = '?cmd=vdredit&data=';
+        ELSE;
+            link = '';
+        END;
+     %?>
+
+    <?% FOREACH typ = data.$name.keys.sort %?>
+        <?% IF typ == 'message' %?>
+            <?% data.$name.$typ %?><p>
+
+        <?% ELSIF typ == 'table' and data.$name.$typ.size > 1 %?>
+           <?% fields = data.$name.$typ.shift %?>
+                <table>
+                    <tr>
+                    <?% FOREACH field = fields %?>
+                        <?% NEXT IF field.match('^__') %?>
+                        <th>
+                            <nobr><?% field %?>
+                            </nobr>
+                        </th>
+                    <?% END %?>
+                    </tr>
+                    <?% FOREACH zeile = data.$name.$typ %?>
+                    <tr>
+                        <?% c = -1 %?>
+                        <?% FOREACH field = zeile %?>
+                            <?% c = c + 1 %?>
+                            <?% NEXT IF fields.$c.match('^__') %?>
+                            <td><?% IF link %?><a href="<?% link %?><?% zeile.first %?>"><?% END %?>
+                                <?% field %?>
+                                <?% IF link %?></a><?% END %?>
+                            </td>
+                        <?% END %?>
+                    </tr>
+                    <?% END %?>
+            </table>
+        <?% END %?>
+    <?% END %?>
+    <p>
+<?% END %?>
diff --git a/skins/html/rlist.tmpl b/skins/html/rlist.tmpl
new file mode 100644
index 0000000..10614c9
--- /dev/null
+++ b/skins/html/rlist.tmpl
@@ -0,0 +1,270 @@
+<body class="frame">
+<?% enableform = allow('rdelete') %?>
+<?% IF cgi.param('cmd')=='rl' || cgi.param('cmd')=='rlist' %?>
+    <?% browse = cgi.param('data') %?>
+<?% END %?>
+<div id="body">
+<?% BLOCK dur # d in Sekunden %?>
+<?% IF d > 1 %?>
+    <?% Stunden = d div 3600 %?>
+    <?% Minuten = d div 60 mod 60 %?>
+    <?% Sekunden =  d mod 60 %?>
+    <?% Stunden | format('%d') %?>:<?% Minuten | format('%02d') %?>:<?% Sekunden | format('%02d') %?>
+<?% END %?>
+<?% END %?>
+<?% ######################################################################## %?>
+<?% BLOCK image %?>
+	<?% files = preview.split(',') %?>
+  <?% IF type == 'RADIO' %?>
+    <img src="images/radio.png" alt="" title="<?% gettext('Radio recording') %?>" />
+  <?% ELSIF files.size > 0;
+      img = (files.size div 2);
+      frame = files.$img %?>
+    <img src="?cmd=ri&data=<?% id %?>_<?% frame %?>" alt="" width="200" title="<?% gettext('Television recording') %?>" />
+  <?% ELSE %?>
+    <img src="images/movie.png" alt="" width="200" title="<?% gettext('Television recording') %?>" />
+  <?% END; %?>
+<?% END %?>
+<?% ######################################################################## %?>
+<?% total = 0 %?>
+<?% BLOCK printsumme %?>
+                <p class="description" style="padding: 0; margin-left: <?% width %?>px;">
+        		<?% IF total > 0;
+                    sec  = total mod 60;
+                    min  = total div 60 mod 60;
+                    hour = total div 3600;
+        		%?>
+						<?% gettext("total time") %?> : 
+						<?% IF hour > 0 %?><?% hour FILTER format('%02d') %?>:<?% END %?><?% min FILTER format('%02d') %?>:<?% sec FILTER format('%02d')%?>
+       			<?% END %?>
+       		    <?% IF param.free;
+                        secf  = param.free mod 60;
+                        minf  = param.free div 60 mod 60;
+                        hourf = param.free div 3600;
+      		    %?>
+    					<br /><?% gettext("available capacity") %?> : 
+						<?% IF hourf > 0 %?><?% hourf FILTER format('%02d') %?>:<?% END %?><?% minf FILTER format('%02d') %?>:<?% secf FILTER format('%02d')%?>
+   			    <?% END %?>
+				</p>
+<?% END %?>
+<?% ######################################################################## %?>
+<?% BLOCK item %?>
+      <td valign="top">
+        <table cellspacing="0" cellpadding="0" width="1">
+          <?% IF folder > 1 %?>
+          <tr>
+            <td>
+                  <a href="?cmd=rlist&amp;data=<?% url( fulltitle ) %?>">
+                  <b><?% foldertitle %?></b><br />
+                  <?% IF new %?>
+                  <img src="images/newfolder.png" alt="" title="<?% gettext("New recording") %?>" />
+                  <?% ELSE %?>
+                  <img src="images/foldericon.png" alt="" />
+                  <?% END %?>
+		          &nbsp;<?% folder %?><?% IF new %?>&nbsp;(<?% new %?>)<?% END %?>&nbsp;<?% gettext("more recordings") %?>&nbsp;...
+                  </a>
+                  <img src="images/blank.png" height="1" width="200" alt="" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+            <?% IF enableform %?>
+            <input type="checkbox" value="all:<?% id %?>" name="<?% gettext("All recordings with title") %?> : '<?% title %?>'" />
+            <?% END %?>
+            </td>
+          </tr>
+          <?% ELSE %?>
+          <tr>
+            <td>
+                  <div style="height:160px; vertical-align:middle;">
+                  <a href="?cmd=rdisplay&amp;data=<?% id %?>">
+                  <?% PROCESS image %?>
+                  </a>
+                  </div>
+                  <div style="height:3em; overflow:hidden;">
+                  <?% INCLUDE bloecke/tooltip.tmpl cmd="rdisplay" linkid=id ttp_offset=0 %?>
+                  <?% IF new %?><img src="images/new.png" alt="" title="<?% gettext("New recording") %?>" /><?% END %?>
+                  <b><?% (title.match('[a-z]') ? title : fulltitle) %?></b>
+                  <?% IF subtitle %?>
+                  <br>&nbsp;<?% subtitle %?>
+                  <?% END %?>
+                  </a>
+                  </div>
+				  </a>
+            </td>
+          </tr>
+          <tr>
+            <td>
+    <?% IF enableform %?>
+                    <input type="checkbox" value="<?% id %?>" name="<?% fulltitle %?>" />
+    <?% END %?>
+                    <?% start %?><br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?% gettext("Duration") %?>: <?% PROCESS dur d=duration %?>
+            </td>
+          </tr>
+          <?% END %?>
+        </table>
+      </td>
+
+<?% END %?>
+<?% IF cgi.param('data') != "" %?>
+    <?% search = cgi.param('data') %?>
+<?% END %?>
+<h1><?% gettext("Stored recordings") %?>
+    <?% IF search.defined %?> : "<?% search %?>" <?% END %?>
+    <br /><small>(<?% param.usage %?>)</small>
+</h1>
+<?% IF data.size %?>
+<?% fields = data.shift %?>
+<form>
+        <a href="?cmd=rupdate">[<?% gettext("Update recordings") %?>]</a>&nbsp;
+<?% IF allow('rdelete') %?>
+<a href="#" onClick="Delete('<?% gettext("Would you like to delete these recordings?") %?>',
+'<?% gettext("Nothing selected!") %?>','rdelete',document.rlist)">
+[<?% gettext("Delete recordings") %?>]</a>&nbsp;
+<?% END %?>
+<?% IF allow('rrecover') %?>
+    <a href="?cmd=rrecover">[<?% gettext("Recover deleted recordings") %?>]</a>&nbsp;
+<?% END %?>
+		<?% gettext("Search for recordings") %?>:
+        <input type="hidden" name="cmd" value='rsearch' >
+        <input type="text" name="data" size='18' <?% IF cgi.param('cmd')=='rs' || cgi.param('cmd')=='rsearch' %?>value='<?% cgi.param('data')%?>'<?% END %?>>
+</form>
+
+<?% IF browse.defined && browse != "" %?>
+    <?% directorys = browse.split('~') %?>
+    <?% IF directorys.size <= 1 %?>
+      <a title="<?% gettext("Back") %?>" href="?cmd=rlist">[^]</a>
+    <?% ELSE %?>
+    <?% t = directorys.pop %?>
+    <?% directory = directorys.join('~') %?>
+      <a title="<?% gettext("Back") %?>" href="?cmd=rlist">[^]</a>&nbsp;
+      <a title="<?% gettext("Back") %?>" href="?cmd=rlist&amp;data=<?% url( directory ) %?>">[<<]</a>
+    <?% END %?>
+    <br />
+<?% END %?>
+<?% IF param.sortable %?>
+    <?% cmd = cgi.param('cmd') %?>
+    <?% IF cgi.param('data') %?>
+        <?% daten = url ( cgi.param('data') ) %?>
+        <?% daten = "&amp;data=${daten}" %?>
+    <?% END %?>
+<?% END %?>
+<?% IF enableform %?>
+<form name='rlist'>
+<?% END %?>
+<?% IF param.previewcommand == 'n' %?>
+    <table border="0" width="95%">
+        <tr>
+        <?% c = -1 %?>
+        <?% FOREACH field = fields %?>
+            <?% c = c + 1 %?>
+            <?% NEXT IF field.match('^__') %?>
+            <th style="white-space: nowrap">
+            <?% field %?>
+            <?% IF param.sortable %?>
+                <?% IF c == 0 %?>
+                  <a href="?cmd=<?% cmd %?><?% daten %?>&__sortby=starttime&__desc=0"><img src="images/asc.png"></a>
+                  <a href="?cmd=<?% cmd %?><?% daten %?>&__sortby=starttime&__desc=1"><img src="images/desc.png"></a>
+                <?% ELSE %?>
+                  <a href="?cmd=<?% cmd %?><?% daten %?>&__sortby=<?% field %?>&__desc=0"><img src="images/asc.png"></a>
+                  <a href="?cmd=<?% cmd %?><?% daten %?>&__sortby=<?% field %?>&__desc=1"><img src="images/desc.png"></a>
+              <?% END %?>
+            <?% END %?>
+            </th>
+        <?% END %?>
+        </tr>
+        <?% FOREACH zeile = data %?>
+        <?%- id=zeile.0;eventid=zeile.1;title=zeile.2.split('~').last;subtitle=zeile.3;
+             duration=zeile.4;start=zeile.5;new=zeile.6;type=zeile.7;folder=zeile.8;fulltitle=zeile.9;
+             isrecording=zeile.10;desc=zeile.11;foldertitle=fulltitle.split('~').last -%?>
+	    <?% total = total + duration %?>
+        <tr>
+            <?% IF folder > 1 %?>
+            <td colspan="5">
+                  <a href="?cmd=rlist&amp;data=<?% url( fulltitle ) %?>">
+                  <?% IF new %?>
+                  <img src="images/newfolder.png" alt="" title="<?% gettext("New recording") %?>" />
+                  <?% ELSE %?>
+                  <img src="images/foldericon.png" alt="" />
+                  <?% END %?>
+                  <b><?% foldertitle.split('~').last %?></b>&nbsp;<?% folder %?><?% IF new %?>&nbsp;(<?% new %?>)<?% END %?>&nbsp;<?% gettext("more recordings") %?>&nbsp;...
+                  </a>
+            </td>
+            <?% ELSE %?>
+            <?% c = -1 %?>
+            <?% FOREACH field = zeile %?>
+             <?%- id=zeile.0;eventid=zeile.1;title=zeile.2.split('~').last;subtitle=zeile.3;
+                   duration=zeile.4;start=zeile.5;new=zeile.6;type=zeile.7;folder=zeile.8;fulltitle=zeile.9;
+                   isrecording=zeile.10;desc=zeile.11;foldertitle=fulltitle.split('~').last -%?>
+                <?% c = c + 1 %?>
+                <?% NEXT IF fields.$c.match('^__') %?>
+            <td>
+                <?% IF c == 0 %?>
+    <?% IF enableform %?>
+                    <input type="checkbox" value="<?% id %?>" name="<?% fulltitle %?>" />
+    <?% END %?>
+                    <?% start %?>
+                <?% ELSIF c == 4 %?>
+                    <?% PROCESS dur d=field %?>
+                <?% ELSIF c == 2 # title %?>
+                    <?% INCLUDE bloecke/tooltip.tmpl cmd="rdisplay" linkid=id ttp_offset=0 %?>
+                    <?% IF new %?><img src="images/new.png" alt="" title="<?% gettext("New recording") %?>" />&nbsp;<?% END %?>
+                    <?% var = (field.split('~').last.match('[a-z]') ? field.split('~').last : zeile.9);chop(var,30) %?>
+                    </a>
+                <?% ELSE %?>
+                    <a href="?cmd=rdisplay&amp;data=<?% id %?>">
+                    <?% field %?>
+                    </a>
+                <?% END %?>
+            </td>
+            <?% END %?>
+            <?% END %?>
+        </tr>
+        <?% END %?>
+	    <tr>
+            <td colspan="5">
+				<?% PROCESS printsumme width=0 %?>
+            </td>
+        </tr>
+    </table>
+<?% ELSE %?>
+<?% IF param.sortable %?>
+<?% BLOCK SortItem %?>
+<a href="?cmd=<?% cmd %?><?% daten %?>&amp;__sortby=<?% row %?>&amp;__desc=0" ><img src="images/asc.png"></a>
+<?% label %?>
+<a href="?cmd=<?% cmd %?><?% daten %?>&amp;__sortby=<?% row %?>&amp;__desc=1" ><img src="images/desc.png"></a>&nbsp;
+<?% END %?>
+        <?% gettext('Sorting') %?> :
+        <?% FOREACH row = fields %?>
+        <?% NEXT IF row.match('^__') %?>
+          <?% PROCESS SortItem label=row %?>
+        <?% END %?>
+<?% END %?>
+      <div>
+        <?% FOREACH zeile = data %?>
+            <!-- Item: <?% FOREACH x = zeile %?><?% loop.count - 1 %?>:<?% x %?>|<?% END %?> -->
+            <?%- id=zeile.0;eventid=zeile.1;title=zeile.2.split('~').last;subtitle=zeile.3;
+             duration=zeile.4;start=zeile.5;new=zeile.6;type=zeile.7;folder=zeile.8;fulltitle=zeile.9;
+             isrecording=zeile.10;desc=zeile.11;preview=zeile.12;foldertitle=fulltitle.split('~').last -%?>
+		    <?% total = total + duration %?>
+			<?% IF old.defined && old != ( folder > 1 ?  2 : 1 ) %?>
+      <div style="clear:both"></div>
+        <?% END %?>
+      <div style="float:left; margin: 2px">
+            <?% PROCESS item %?>
+            <?% old = ( folder > 1 ?  2 : 1 ) %?>
+      </div>
+        <?% END %?>
+    </div>
+    <div style="clear:both"></div>
+	<?% PROCESS printsumme width=0 %?>
+    <?% END %?>
+<?% IF enableform %?>
+</form>
+<a href="#" onClick="selAll(document.rlist, 1)">[<?% gettext("Select all") %?>]</a>
+<a href="#" onClick="selAll(document.rlist, 0)">[<?% gettext("Unselect all") %?>]</a>
+<a href="#" onClick="reverse(document.rlist)">[<?% gettext("Reverse select") %?>]</a>
+<?% END %?>
+
+<?% END %?>
diff --git a/skins/html/schema.tmpl b/skins/html/schema.tmpl
new file mode 100644
index 0000000..ba780ce
--- /dev/null
+++ b/skins/html/schema.tmpl
@@ -0,0 +1,179 @@
+<?%-
+USE date;
+zeitformat = gettext("%A the %D at %H:%M o'clock");
+day = date.format(param.zeitvon, zeitformat, locale);
+
+width = 720;        # Table width
+Duration = param.zeitbis - param.zeitvon;
+
+-%?>
+<script language="javascript" type="text/javascript">
+    var interval = 300
+
+    function reload() {
+        Now = new Date();
+        location.href = '?cmd=schema';
+    }
+
+    inter = interval * 1000;
+    aktiv = window.setTimeout("reload()", inter);
+</script>
+
+<form>
+<h1><?% gettext("What is running at") %?>&nbsp;<?% day %?><br/>
+<?% gettext('Display') %?>&nbsp;
+<?% gettext('from') %?>&nbsp;<?% date.format(param.zeitvon, '%H:%M', locale) %?>&nbsp;
+<?% gettext('to') %?>&nbsp;<?% date.format(param.zeitbis, '%H:%M', locale) %?>&nbsp;
+<?% gettext("o'clock") %?>
+</h1>
+
+<!-- TableTemplate -->
+<select name='cgroups' onChange="di(this.form.cgroups.options[this.form.cgroups.options.selectedIndex].value, '?cmd=schema&amp;data=<?% param.zeitvon %?>&amp;__cgrp=')">
+<?% FOREACH cgrp = param.cgroups %?>
+    <option value='<?% cgrp.last %?>' <?% "selected" IF param.channelgroup == cgrp.last %?>><?% cgrp.first %?>
+<?% END %?>
+</select>
+
+<table width='<?% (width + 100) %?>' cellpadding="0" cellspacing="0">
+<tr>
+    <td><img alt="" src='images/blank.png' width=100 height=1 border=0 /></td>
+    <?% c = 0; colspan = 0; abstand = 15 * 60; # 15 Minuten %?>
+    <?%- WHILE c < Duration -%?>
+        <?%-
+             c = c + abstand;
+             percent = (abstand / Duration) * width
+             colspan = colspan + 1;
+             zeit = param.zeitvon + c;
+        -%?>
+    <td bgcolor="white" width="<?% offset = (c % 3600 ? 1 : 2);(percent - offset) div 1 %?>" align='right'>
+        <?% IF c == abstand && zeit > date.now %?>
+        &nbsp;<a href='?cmd=schema&amp;data=<?% (param.zeitvon - Duration) %?>&amp;__cgrp=<?% param.channelgroup %?>'><</a>
+        <?% END %?>
+        <font size='1'><?% date.format(zeit, '%H:%M', locale) %?>
+        <?% IF c >= Duration %?>
+        &nbsp;<a href='?cmd=schema&amp;data=<?% (param.zeitvon + Duration) %?>&amp;__cgrp=<?% param.channelgroup %?>'>></a>
+        <?% END %?>
+    </font></td>
+    <?% END %?>
+</tr>
+
+<tr>
+    <?% c = 0 %?>
+    <?% abstand = abstand div 3 %?>
+    <td>&nbsp;</td>
+    <td bgcolor="white" colspan="<?% colspan %?>" style="white-space: nowrap">
+        <?%- IF date.now > param.zeitvon && date.now < param.zeitbis -%?>
+        <?% a = date.now - param.zeitvon;
+            p = (a / Duration) * width;
+         %?>
+        <div style="position:absolute; z-index:1">
+            <div style="position:relative; top:0px; left:0px; width:<?% p div 1 %?>px; height:10px; z-index:2; border:thin solid #804000; background-color:#FF0000; text-align: right; -moz-opacity:0.2; filter:Alpha(opacity=20)"><font size="1">&nbsp;</font></div>
+        </div>
+        <div style="position:absolute; z-index:1">
+            <div style="position:relative; top:0px; left:<?% p div 1 %?>px; width:1px; height:100%; border-left:1px solid red; margin:0px; z-Index: 2;"><img alt="" src='images/blank.png' width='1' height='<?% data.keys.size * 23 %?>' border="0" hspace="0" vspace="0" /></div>
+        </div>
+        <?%- END -%?>
+        <?%- WHILE c < Duration;
+             c = c + abstand;
+             percent = (abstand / Duration) * width
+        -%?><img alt="" style="background:white" src='images/blank.png' width="<?%-
+            offset = (c % 3600 ? 1 : 2);
+            (percent - offset) div 1
+        -%?>" height='10' /><img alt=""
+            style="background:<?% c % 900 ? "gray" : "black" %?>"
+            src='images/blank.png'
+            width="<?% c % 3600 ? "1" : "2" %?>"
+            height='<?% (c % 900 ? "5" : "10") %?>' />
+        <?%- END -%?>
+    </td>
+</tr>
+
+<?% x = -1 %?>
+<?% FOREACH cpos = data.keys.nsort %?>
+<tr><td colspan="<?% (colspan + 1) %?>"><img src='images/blank.png' width='10' height=1 border=0 align='left' /></td></tr>
+<?% x = x + 1;
+    channelName = data.$cpos.first.3;
+    channelId = data.$cpos.first.4;
+%?>
+<tr class="<?% myclass %?>" <?% IF (x mod 2) == 0 %?>bgcolor='#E5E5E5'<?% END %?>>
+    <td>
+        <a href="?cmd=program&amp;data=<?% channelId %?>"><?% chop(channelName,12) %?></a>
+    </td>
+    <td colspan="<?% colspan %?>" style="white-space: nowrap">
+        <?%- ges = 0; oldend = param.zeitvon -%?>
+        <?%-
+        FOREACH event = data.$cpos;
+                epgId       = event.0;
+                epgTitle    = event.1;
+                epgSubTitle = event.2;
+                chName      = event.3;
+                chPos       = event.4;
+                epgStart    = event.5;
+                epgStop     = event.6;
+                epgPercent  = event.7;
+                epgDesc     = event.8;
+                second_start= event.9;
+                second_stop = event.10;
+                image       = event.11;
+                timerid     = event.12;
+                recording   = event.13;
+                running     = event.14;
+
+                IF second_start > oldend;
+                    laenge = second_start - oldend;
+                    percent = (laenge / Duration) * width;
+                    ges = ges + percent;
+        -%?>
+        <img alt="" src='images/blank.png' width='<?% percent div 1 %?>' height=8 border=0 align='left' />
+                <?% END;
+                IF second_start < oldend;
+                    dur = second_stop - oldend;
+                ELSE;
+                    dur = second_stop - second_start;
+                END;
+                IF dur < 0; dur = 0; END;
+                percent = (dur / Duration) * width;
+                IF (ges + percent) > width;
+                    percent = width - ges;
+                END;
+                ges = ges + percent;
+                trun = ( percent / 10 ) div 1;
+                IF dur < 300;
+                    trun = 3;
+
+                END;
+                -%?>
+        <?% d=[epgStart, " - ", epgStop ,"<br />", epgDesc ];desc=d.join("") %?>
+<?% IF trun <= 3 %?>
+        <?% INCLUDE bloecke/tooltip.tmpl cmd="display" title=epgTitle subtitle=epgSubTitle eventid=epgId linkid=epgId ttp_offset=-200 %?><img alt="" src='images/blank.png' width='<?% percent div 1 %?>' height=8 border=0 hspace=0 vspace=0 align='left' /></a>
+<?% ELSE %?>
+        <table class='<?% PROCESS getStatus e=event %?>' align="left" width="<?% percent div 1 %?>" cellpadding="0" cellspacing="0"><tr><td>
+        <?% INCLUDE bloecke/tooltip.tmpl cmd="display" title=epgTitle subtitle=epgSubTitle eventid=epgId linkid=epgId ttp_offset=-200 %?>
+        <?% chop(epgTitle,trun) %?></a></td></tr></table>
+<?% END %?>
+        <?% oldend = second_stop %?>
+        <?% END %?>
+    </td>
+</tr>
+<?% END %?>
+</table>
+</form>
+
+<?% BLOCK title %?>
+<?% e.1 %?>&nbsp;
+<?% e.2 IF e.2 %?>&nbsp;
+<?% e.5 %?> - <?% e.6 %?>&nbsp;
+<?% END %?>
+
+<?%- BLOCK getStatus -%?>
+<?%-
+    class = 'schema_normal';
+    IF event.14 && event.15;
+        class = 'schema_record_plan';
+    END;
+    IF event.14 && event.16;
+        class = 'schema_record_now';
+    END;
+class;
+-%?>
+<?%- END -%?>
diff --git a/skins/html/search.tmpl b/skins/html/search.tmpl
new file mode 100644
index 0000000..1689092
--- /dev/null
+++ b/skins/html/search.tmpl
@@ -0,0 +1,174 @@
+<script language="javascript" type="text/javascript">
+<!--
+
+    <?% INCLUDE javascript/records.js %?>
+
+-->
+</SCRIPT>
+<?% enableform = ( allow('tnew') ) && data.size > 1 %?>
+<h1><?% gettext("Advanced Search") %?>
+<?% IF data.size %?>
+    <?% found = data.size - 1 %?>
+   :&nbsp;<?% gettext("Found %s items") | replace("%s", found ) %?>
+<?% END %?>
+</h1>
+
+<table border="0" width="95%">
+<form method='get' name='searchparam'>
+    <input type='hidden' name='cmd' value='search'>
+    <input type='hidden' name='__action' value='save'>
+<tr>
+    <td><?% gettext('Search text') %?>:</td>
+    <td><input type="text" name="data" value="<?% cgi.param('data') || cgi.param('data') %?>"></td>
+</tr>
+<tr>
+    <td><?% gettext('Search in fields') %?>:</td>
+    <td>
+        <input type="radio" name="__Where" value="all" <?% IF ! cgi.param('__Where') || cgi.param('__Where') == 'all' %?>checked<?% END %?>><?% gettext('All') %?>&nbsp;
+        <input type="radio" name="__Where" value="title" <?% IF cgi.param('__Where') == 'title' %?>checked<?% END %?>><?% gettext('Only in title') %?>&nbsp;
+        <input type="radio" name="__Where" value="titlesubtitle" <?% IF cgi.param('__Where') == 'titlesubtitle' %?>checked<?% END %?>><?% gettext('Only in title and subtitle') %?>&nbsp;
+    </td>
+</tr>
+<tr>
+    <td><?% gettext('Minimum length (in minutes)') %?>:</td>
+    <td>
+        <input type="text" name="__MinLength" value="<?% cgi.param('__MinLength') %?>">
+    </td>
+</tr>
+<tr>
+    <td><?% gettext('Channel') %?>:</td>
+    <td>
+    <select name='__channel'>
+        <option value="0"><?% gettext('All channels') %?>
+    <?% FOREACH ch = param.channels %?>
+      <?% IF ch.2 && ch.2 != channelgroup %?>
+        <?% IF channelgroup %?>
+        </optgroup>
+        <?% END %?>
+        <optgroup label="<?% channelgroup = ch.2;ch.2 %?>">
+    <?% END %?>
+        <option value="<?% ch.1 %?>"<?% ' selected="selected"' IF cgi.param('__channel') == ch.1 %?>><?% ch.0 %?></option>
+    <?% END %?>
+    <?% IF channelgroup %?>
+      </optgroup>
+    <?% END %?>
+    </select>
+    </td>
+</tr>
+<tr>
+    <td><?% gettext('Content') %?>:</td>
+    <td>
+            <select name='__contentid'>
+                <option value="0"><?% gettext('All contents') %?></option>
+                <?% h = 1;WHILE h < 16 %?>
+                    <?% c = h | format "%x" %?>
+                    <?% ct = getModule('EPG').content(c) %?>
+                    <?% IF ct %?>
+                      <optgroup label="<?% ct %?>">
+                      <option value="<?% c %?>"<?% ' selected="selected"' IF cgi.param('__contentid') == c %?>><?% gettext('All')%?> - <?% ct %?></option>
+                      <?% l = 0;WHILE l < 16 %?>
+                      <?% c = ((16 * h) + l) | format "%x" %?>
+                      <?% ct = getModule('EPG').content(c) %?>
+                        <?% IF ct %?>
+                          <option value="<?% c %?>"<?% ' selected="selected"' IF cgi.param('__contentid') == c %?>><?% ct %?></option>
+                        <?% END %?>
+                      <?% l = l + 1 %?>
+                      <?% END %?>
+                      </optgroup>
+                    <?% END %?>
+                  <?% h = h + 1 %?>
+                <?% END %?>
+            </select>
+    </td>
+</tr>
+<tr>
+    <td colspan=2>
+        <input type='submit' value='<?% gettext('Search') %?>'>&nbsp;
+        <input type='reset' value='<?% gettext('Reset') %?>'>&nbsp;
+    </td>
+</tr>
+</form>
+</table>
+
+<?% IF data.size > 1 %?>
+
+<?% IF enableform %?>
+<a href="#" onClick="Delete('<?% gettext("Would you like to record these events?") %?>',
+'<?% gettext("Nothing selected!") %?>','tnew&__fast=1',document.searchlist)">
+    [<?% gettext("Record selected events") %?>]
+</a>
+<a href="#" onClick="selAll(document.searchlist, 1)">[<?% gettext("Select all") %?>]</a>
+<a href="#" onClick="selAll(document.searchlist, 0)">[<?% gettext("Unselect all") %?>]</a>
+<a href="#" onClick="reverse(document.searchlist)">[<?% gettext("Reverse select") %?>]</a>
+<form name='searchlist'>
+    <?% INCLUDE 'widgets/referer.tmpl' %?>
+<?% END %?>
+
+<table border="0" width="95%">
+    <?% fields = data.shift %?>
+        <tr>
+            <?% IF enableform %?>
+              <th></th>
+            <?% END %?>
+        <?% FOREACH field = fields %?>
+            <?% NEXT IF field.match('^__') || loop.count == 8 || loop.count == 9 %?>
+            <th><?% field %?></th>
+        <?% END %?>
+        </tr>
+        <?% FOREACH zeile = data %?>
+            <?% c = -1 %?>
+            <?% day = zeile.7 %?>
+            <?% IF !oldday.defined || day != oldday %?>
+                <tr><td colspan="<?% zeile.size %?>" bgcolor='#DDDDDD'>
+                <b><?% day %?></b>
+                </td></tr>
+            <?% END %?>
+            <tr class="<?% myclass %?>"<?% IF (loop.count mod 2) == 0 %?> bgcolor='#F5F5F5'<?% END %?>>
+            <?% FOREACH field = zeile %?>
+                <?% c = c + 1 %?>
+                <?% NEXT IF fields.$c.match('^__') %?>
+                <?% IF c == 0; # Id Field %?>
+                <?% IF enableform %?>
+                <td>
+                <?% IF !zeile.10 %?>
+            			<input type="checkbox" value="<?% zeile.0 %?>" name="<?% zeile.1 %?><?% IF zeile.2 != "";"~";zeile.2;END %?>" />
+	              <?% END %?>
+                </td>
+	              <?% END %?>
+                <td>
+                <?% INCLUDE 'bloecke/event_links.tmpl' data=zeile %?>
+                </td>
+                <?% ELSIF c == 1; # Text Field %?>
+                <td>
+                    <?% INCLUDE bloecke/tooltip.tmpl cmd="display" title=field subtitle=zeile.2 desc=zeile.8 eventid=zeile.0 linkid=zeile.0 ttp_offset=0 %?>
+                    <?% IF zeile.11 %?>
+                    <b><?% field %?></b>
+                    <?% ELSE %?>
+                    <?% field %?>
+                    <?% END %?>
+                    <?% IF zeile.2 != "" %?>
+                    <br><small><?% zeile.2 %?></small>
+                    <?% END %?>
+                    <?% IF zeile.8.length > 0 %?>
+                    <br><small><em><?% chop(zeile.8,80) | replace('<br />',' ') %?></em></small>
+                    <?% END %?>
+                    </a>
+                </td>
+                <?% ELSIF c == 3; # Channel Field %?>
+                <td>
+                    <a href="?cmd=program&amp;data=<?% zeile.4 %?>"><?% field %?></a>
+                </td>
+                <?% ELSIF c == 7; # Day Field %?>
+                <?% ELSIF c == 8; # Desc Field %?>
+                <?% ELSE %?>
+                <td><?% field %?></td>
+                <?% END %?>
+            <?% END %?>
+        </tr>
+        <?% oldday = day %?>
+        <?% END %?>
+</table>
+<?% IF enableform %?>
+</form>
+<?% END %?>
+<?% END %?>
diff --git a/skins/html/skin.cfg b/skins/html/skin.cfg
new file mode 100644
index 0000000..375c631
--- /dev/null
+++ b/skins/html/skin.cfg
@@ -0,0 +1,3 @@
+<?% ######################################################################## %?>
+<?% # How many columns has the Programmenu, 0=Show all entrys %?>
+<?% SET global.cfgMaxChannelMenuEntrys = 40 %?>
diff --git a/skins/html/style/helptip.css b/skins/html/style/helptip.css
new file mode 100644
index 0000000..2293abc
--- /dev/null
+++ b/skins/html/style/helptip.css
@@ -0,0 +1,36 @@
+/*
+	Notice that IE has a display problem if the help link is on
+	the last line of a container with no padding. If this is the
+	case increase the padding bottom to at least 1px
+*/
+
+a.helpLink {
+	color:				Green;
+	text-decoration:	none;
+	cursor:				help;
+}
+
+a.helpLink:hover {
+	color:				Red;
+	text-decoration:	none;
+}
+
+.help-tooltip {
+	position:	absolute;
+	width:		50%;
+	border:		1px Solid WindowFrame;
+	background:	Infobackground;
+	color:		InfoText;
+	font:		StatusBar;
+	font:		Status-Bar;
+	padding:	3px;
+	filter:		progid:DXImageTransform.Microsoft.Shadow(color="#777777", Direction=135, Strength=3);
+	z-index:	10000;
+}
+
+
+.help-tooltip a,
+.help-tooltip a:hover {
+	color:		blue !important;
+	background:	none;
+}
diff --git a/skins/html/style/luna/tab.active.png b/skins/html/style/luna/tab.active.png
new file mode 100644
index 0000000..d85e7f6
--- /dev/null
+++ b/skins/html/style/luna/tab.active.png
diff --git a/skins/html/style/luna/tab.css b/skins/html/style/luna/tab.css
new file mode 100644
index 0000000..d8a4403
--- /dev/null
+++ b/skins/html/style/luna/tab.css
@@ -0,0 +1,84 @@
+.dynamic-tab-pane-control.tab-pane {

+	position:	relative;

+	width:		100%;		/* width needed weird IE bug */

+	margin-right:	-2px;	/* to make room for the shadow */

+}

+

+.dynamic-tab-pane-control .tab-row .tab {

+

+	width:				70px;

+	height:				16px;

+	background-image:	url( "tab.png" );

+

+	position:		relative;

+	top:			0;

+	display:		inline;

+	float:			left;

+	overflow:		hidden;

+

+	cursor:			Default;

+

+	margin:			1px -1px 1px 2px;

+	padding:		2px 0px 0px 0px;

+	border:			0;

+

+	z-index:		1;

+	font:			11px Tahoma;

+	white-space:	nowrap;

+	text-align:		center;

+}

+

+.dynamic-tab-pane-control .tab-row .tab.selected {

+	width:				74px !important;

+	height:				18px !important;

+	background-image:	url( "tab.active.png" ) !important;

+	background-repaet:	no-repeat;

+

+	border-bottom-width:	0;

+	z-index:		3;

+	padding:		2px 0 0px 0;

+	margin:			1px -3px -3px 0px;

+	top:			-2px;

+	font:				11px Tahoma;

+}

+

+.dynamic-tab-pane-control .tab-row .tab a {

+	font:				11px Tahoma;

+	color:				Black;

+	text-decoration:	none;

+	cursor:				default;

+}

+

+.dynamic-tab-pane-control .tab-row .tab.hover {

+	font:				11px Tahoma;

+	width:				70px;

+	height:				16px;

+	background-image:	url( "tab.hover.png" );

+	background-repaet:	no-repeat;

+}

+

+

+.dynamic-tab-pane-control .tab-page {

+	clear:			both;

+	border:			1px solid rgb( 145, 155, 156 );

+	background:		rgb( 252, 252, 254 );

+	z-index:		2;

+	position:		relative;

+	top:			-2px;

+

+	font:				11px Tahoma;

+	color:				Black;

+

+	filter:			progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#fff4f3ee, GradientType=0)

+					progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=2, Direction=135);

+

+	/*244, 243, 238*/

+	/* 145, 155, 156*/

+

+	padding:		10px;

+}

+

+.dynamic-tab-pane-control .tab-row {

+	z-index:		1;

+	white-space:	nowrap;

+}
\ No newline at end of file
diff --git a/skins/html/style/luna/tab.hover.png b/skins/html/style/luna/tab.hover.png
new file mode 100644
index 0000000..53de327
--- /dev/null
+++ b/skins/html/style/luna/tab.hover.png
diff --git a/skins/html/style/luna/tab.png b/skins/html/style/luna/tab.png
new file mode 100644
index 0000000..0f1fb78
--- /dev/null
+++ b/skins/html/style/luna/tab.png
diff --git a/skins/html/style/style.css b/skins/html/style/style.css
new file mode 100644
index 0000000..8a66ebd
--- /dev/null
+++ b/skins/html/style/style.css
@@ -0,0 +1,202 @@
+body{
+ font-family:Verdana, Arial, sans-serif;
+ font-size:80%;
+ border: #005199 1px dashed ;
+ color:#000064;
+ margin:10px;
+ padding:10px;
+}
+
+/* Überschriften */
+h1 { font-size:1.3em;margin-top:0px;}
+h2 { font-size:1.1em;}
+h3 { font-size:1em; margin-top:0px; margin-bottom:0px;}
+h4 { font-size:1em;}
+h2,h4 { margin-top:0px;margin-bottom:0px; }
+h1,h2,h3,h4 { color:#e88229;}
+
+/* Keine Rahmen um Grafiken als Link */
+a img {border-width:0px;}
+
+/* Standard Hyperlinks */
+a:link, a:visited, a:hover, a:active{
+ text-decoration:none;
+ color:#005199;
+ background-color:inherit;
+}
+a:visited { color:#0075e3; }
+a:hover, a:active {
+ color:#770;
+ text-decoration:underline;
+}
+
+/* Tabelle auf den Referenzseiten */
+table {
+    font-size:1em;
+    border:1px solid #000000;
+    }
+td,th {
+    vertical-align:top;
+    border: #eeeeee 1px solid;
+}
+th, .th{
+  background-color:#efefef;
+  border: #eeeeee 1px solid;
+  padding:3px;
+  text-align:left;
+}
+
+.tableheader{
+  padding:3px;
+  text-align:left;
+}
+
+/* funktioniert leider nur im neuesten Firefox fehlerfrei ;(
+input:focus, textarea:focus, select:focus {
+  border: #FF0000 1px solid;
+  background-color:#ffff99;
+}
+*/
+
+input[type~=text],input[type~=password]  {
+    width : 200px;
+}
+
+select  {
+    width : 205px;
+}
+
+.footer {
+ font-size:0.6em;
+}
+
+.timer_On {
+ color:green;
+}
+
+.timer_Off{
+ color:red;
+}
+
+.menu{
+  background-color:#efefef;
+  padding:10px;
+  text-align:left;
+}
+
+.normal{
+    color:#000064;
+    font-weight:normal;
+}
+
+.refresh{
+    color:#0000FF;
+    font-weight:normal;
+}
+
+.deactive{
+    color:#aaaaaa;
+}
+
+.active{
+    color:#00aa00;
+    font-weight:bold;
+}
+
+.problem{
+    color:#ff0000;
+}
+
+.noproblem{
+    color:#00AA00;
+}
+
+.problemred{
+    color:#ff0000;
+    font-weight:bold;
+}
+
+.fastproblem{
+    color:#990000;
+    font-weight:bold;
+}
+
+.fastproblemgreen{
+    font-weight:bold;
+}
+
+.error{
+    color:#ff0000;
+    font-weight:bold;
+}
+
+.good{
+    color:#009900;
+    font-weight:normal;
+}
+
+.schema_normal{
+    font-size:0.9em;
+    border:1px solid #666666;
+    border-right:0px;
+}
+
+.schema_record_plan{
+    font-size:0.9em;
+    font-weight:bold;
+    border:1px solid;
+    border-right:0px;
+}
+
+.schema_record_now{
+    font-size:0.9em;
+    font-weight:bold;
+    border:1px solid #006600;
+    border-right:0px;
+    background-color: #DDFFDD;
+}
+
+.schema_record_conflict{
+    font-size:0.9em;
+    font-weight:bold;
+    border:1px solid #006600;
+    border-right:0px;
+    background-color: #DDFFDD;
+}
+
+.light{
+    background-color: #F5F5F5;
+}
+
+.dark{
+    background-color: #EEEEEE;
+}
+
+
+#TOOLTIP {
+  position:absolute; 
+  width: 400px; 
+  z-index:5; 
+  visibility:hidden;
+}
+
+#ttwindow {
+	width: 400px;
+  font-size: 12px;
+  border:1px solid #666666;
+}
+
+#ttwindow p.topic {
+	text-align: left;
+	font-weight: bold;
+	padding: 3px;
+	color:              #000064;
+	background-color:   #DDDDDD;
+  margin: 0px;
+}
+
+#ttwindow p.description {
+	padding: 5px;
+  margin: 0px;
+	background-color:   #ffffff;
+}
diff --git a/skins/html/style/vtxgfx.css b/skins/html/style/vtxgfx.css
new file mode 100644
index 0000000..f0676e8
--- /dev/null
+++ b/skins/html/style/vtxgfx.css
@@ -0,0 +1,554 @@
+#vt p.vtx {
+font-size:15px;
+line-height:15px;
+font-family:monospace;
+white-space:nowrap;
+}
+
+#vt a.vtx:link,a.vtx:visited,a.vtx:hover,a.vtx:active {
+text-decoration:none;
+}
+
+#vt a.vtx:link,a.vtx:visited {
+color:#0F0;
+}
+
+#vt a.vtx:hover,a.vtx:active {
+color:#FF0;
+}
+
+.vtgfx {
+width:11px;
+height:16px;
+background-image:url(../images/vtxgfx.gif);
+background-repeat:no-repeat;
+}
+
+.vtx-mark{
+  color:black;
+  background-color:lime
+}
+
+.white20	{	background-position:	0px	0px	;}
+.white21	{	background-position:	0px	-16px	;}
+.white22	{	background-position:	0px	-32px	;}
+.white23	{	background-position:	0px	-48px	;}
+.white24	{	background-position:	0px	-64px	;}
+.white25	{	background-position:	0px	-80px	;}
+.white26	{	background-position:	0px	-96px	;}
+.white27	{	background-position:	0px	-112px	;}
+.white28	{	background-position:	0px	-128px	;}
+.white29	{	background-position:	0px	-144px	;}
+.white2A	{	background-position:	0px	-160px	;}
+.white2B	{	background-position:	0px	-176px	;}
+.white2C	{	background-position:	0px	-192px	;}
+.white2D	{	background-position:	0px	-208px	;}
+.white2E	{	background-position:	0px	-224px	;}
+.white2F	{	background-position:	0px	-240px	;}
+.white30	{	background-position:	0px	-256px	;}
+.white31	{	background-position:	0px	-272px	;}
+.white32	{	background-position:	0px	-288px	;}
+.white33	{	background-position:	0px	-304px	;}
+.white34	{	background-position:	0px	-320px	;}
+.white35	{	background-position:	0px	-336px	;}
+.white36	{	background-position:	0px	-352px	;}
+.white37	{	background-position:	0px	-368px	;}
+.white38	{	background-position:	0px	-384px	;}
+.white39	{	background-position:	0px	-400px	;}
+.white3A	{	background-position:	0px	-416px	;}
+.white3B	{	background-position:	0px	-432px	;}
+.white3C	{	background-position:	0px	-448px	;}
+.white3D	{	background-position:	0px	-464px	;}
+.white3E	{	background-position:	0px	-480px	;}
+.white3F	{	background-position:	0px	-496px	;}
+.white60	{	background-position:	0px	-512px	;}
+.white61	{	background-position:	0px	-528px	;}
+.white62	{	background-position:	0px	-544px	;}
+.white63	{	background-position:	0px	-560px	;}
+.white64	{	background-position:	0px	-576px	;}
+.white65	{	background-position:	0px	-592px	;}
+.white66	{	background-position:	0px	-608px	;}
+.white67	{	background-position:	0px	-624px	;}
+.white68	{	background-position:	0px	-640px	;}
+.white69	{	background-position:	0px	-656px	;}
+.white6A	{	background-position:	0px	-672px	;}
+.white6B	{	background-position:	0px	-688px	;}
+.white6C	{	background-position:	0px	-704px	;}
+.white6D	{	background-position:	0px	-720px	;}
+.white6E	{	background-position:	0px	-736px	;}
+.white6F	{	background-position:	0px	-752px	;}
+.white70	{	background-position:	0px	-768px	;}
+.white71	{	background-position:	0px	-784px	;}
+.white72	{	background-position:	0px	-800px	;}
+.white73	{	background-position:	0px	-816px	;}
+.white74	{	background-position:	0px	-832px	;}
+.white75	{	background-position:	0px	-848px	;}
+.white76	{	background-position:	0px	-864px	;}
+.white77	{	background-position:	0px	-880px	;}
+.white78	{	background-position:	0px	-896px	;}
+.white79	{	background-position:	0px	-912px	;}
+.white7A	{	background-position:	0px	-928px	;}
+.white7B	{	background-position:	0px	-944px	;}
+.white7C	{	background-position:	0px	-960px	;}
+.white7D	{	background-position:	0px	-976px	;}
+.white7E	{	background-position:	0px	-992px	;}
+.white7F	{	background-position:	0px	-1008px	;}
+					
+.black20	{	background-position:	-11px	0px	;}
+.black21	{	background-position:	-11px	-16px	;}
+.black22	{	background-position:	-11px	-32px	;}
+.black23	{	background-position:	-11px	-48px	;}
+.black24	{	background-position:	-11px	-64px	;}
+.black25	{	background-position:	-11px	-80px	;}
+.black26	{	background-position:	-11px	-96px	;}
+.black27	{	background-position:	-11px	-112px	;}
+.black28	{	background-position:	-11px	-128px	;}
+.black29	{	background-position:	-11px	-144px	;}
+.black2A	{	background-position:	-11px	-160px	;}
+.black2B	{	background-position:	-11px	-176px	;}
+.black2C	{	background-position:	-11px	-192px	;}
+.black2D	{	background-position:	-11px	-208px	;}
+.black2E	{	background-position:	-11px	-224px	;}
+.black2F	{	background-position:	-11px	-240px	;}
+.black30	{	background-position:	-11px	-256px	;}
+.black31	{	background-position:	-11px	-272px	;}
+.black32	{	background-position:	-11px	-288px	;}
+.black33	{	background-position:	-11px	-304px	;}
+.black34	{	background-position:	-11px	-320px	;}
+.black35	{	background-position:	-11px	-336px	;}
+.black36	{	background-position:	-11px	-352px	;}
+.black37	{	background-position:	-11px	-368px	;}
+.black38	{	background-position:	-11px	-384px	;}
+.black39	{	background-position:	-11px	-400px	;}
+.black3A	{	background-position:	-11px	-416px	;}
+.black3B	{	background-position:	-11px	-432px	;}
+.black3C	{	background-position:	-11px	-448px	;}
+.black3D	{	background-position:	-11px	-464px	;}
+.black3E	{	background-position:	-11px	-480px	;}
+.black3F	{	background-position:	-11px	-496px	;}
+.black60	{	background-position:	-11px	-512px	;}
+.black61	{	background-position:	-11px	-528px	;}
+.black62	{	background-position:	-11px	-544px	;}
+.black63	{	background-position:	-11px	-560px	;}
+.black64	{	background-position:	-11px	-576px	;}
+.black65	{	background-position:	-11px	-592px	;}
+.black66	{	background-position:	-11px	-608px	;}
+.black67	{	background-position:	-11px	-624px	;}
+.black68	{	background-position:	-11px	-640px	;}
+.black69	{	background-position:	-11px	-656px	;}
+.black6A	{	background-position:	-11px	-672px	;}
+.black6B	{	background-position:	-11px	-688px	;}
+.black6C	{	background-position:	-11px	-704px	;}
+.black6D	{	background-position:	-11px	-720px	;}
+.black6E	{	background-position:	-11px	-736px	;}
+.black6F	{	background-position:	-11px	-752px	;}
+.black70	{	background-position:	-11px	-768px	;}
+.black71	{	background-position:	-11px	-784px	;}
+.black72	{	background-position:	-11px	-800px	;}
+.black73	{	background-position:	-11px	-816px	;}
+.black74	{	background-position:	-11px	-832px	;}
+.black75	{	background-position:	-11px	-848px	;}
+.black76	{	background-position:	-11px	-864px	;}
+.black77	{	background-position:	-11px	-880px	;}
+.black78	{	background-position:	-11px	-896px	;}
+.black79	{	background-position:	-11px	-912px	;}
+.black7A	{	background-position:	-11px	-928px	;}
+.black7B	{	background-position:	-11px	-944px	;}
+.black7C	{	background-position:	-11px	-960px	;}
+.black7D	{	background-position:	-11px	-976px	;}
+.black7E	{	background-position:	-11px	-992px	;}
+.black7F	{	background-position:	-11px	-1008px	;}
+					
+.red20	{	background-position:	-22px	0px	;}
+.red21	{	background-position:	-22px	-16px	;}
+.red22	{	background-position:	-22px	-32px	;}
+.red23	{	background-position:	-22px	-48px	;}
+.red24	{	background-position:	-22px	-64px	;}
+.red25	{	background-position:	-22px	-80px	;}
+.red26	{	background-position:	-22px	-96px	;}
+.red27	{	background-position:	-22px	-112px	;}
+.red28	{	background-position:	-22px	-128px	;}
+.red29	{	background-position:	-22px	-144px	;}
+.red2A	{	background-position:	-22px	-160px	;}
+.red2B	{	background-position:	-22px	-176px	;}
+.red2C	{	background-position:	-22px	-192px	;}
+.red2D	{	background-position:	-22px	-208px	;}
+.red2E	{	background-position:	-22px	-224px	;}
+.red2F	{	background-position:	-22px	-240px	;}
+.red30	{	background-position:	-22px	-256px	;}
+.red31	{	background-position:	-22px	-272px	;}
+.red32	{	background-position:	-22px	-288px	;}
+.red33	{	background-position:	-22px	-304px	;}
+.red34	{	background-position:	-22px	-320px	;}
+.red35	{	background-position:	-22px	-336px	;}
+.red36	{	background-position:	-22px	-352px	;}
+.red37	{	background-position:	-22px	-368px	;}
+.red38	{	background-position:	-22px	-384px	;}
+.red39	{	background-position:	-22px	-400px	;}
+.red3A	{	background-position:	-22px	-416px	;}
+.red3B	{	background-position:	-22px	-432px	;}
+.red3C	{	background-position:	-22px	-448px	;}
+.red3D	{	background-position:	-22px	-464px	;}
+.red3E	{	background-position:	-22px	-480px	;}
+.red3F	{	background-position:	-22px	-496px	;}
+.red60	{	background-position:	-22px	-512px	;}
+.red61	{	background-position:	-22px	-528px	;}
+.red62	{	background-position:	-22px	-544px	;}
+.red63	{	background-position:	-22px	-560px	;}
+.red64	{	background-position:	-22px	-576px	;}
+.red65	{	background-position:	-22px	-592px	;}
+.red66	{	background-position:	-22px	-608px	;}
+.red67	{	background-position:	-22px	-624px	;}
+.red68	{	background-position:	-22px	-640px	;}
+.red69	{	background-position:	-22px	-656px	;}
+.red6A	{	background-position:	-22px	-672px	;}
+.red6B	{	background-position:	-22px	-688px	;}
+.red6C	{	background-position:	-22px	-704px	;}
+.red6D	{	background-position:	-22px	-720px	;}
+.red6E	{	background-position:	-22px	-736px	;}
+.red6F	{	background-position:	-22px	-752px	;}
+.red70	{	background-position:	-22px	-768px	;}
+.red71	{	background-position:	-22px	-784px	;}
+.red72	{	background-position:	-22px	-800px	;}
+.red73	{	background-position:	-22px	-816px	;}
+.red74	{	background-position:	-22px	-832px	;}
+.red75	{	background-position:	-22px	-848px	;}
+.red76	{	background-position:	-22px	-864px	;}
+.red77	{	background-position:	-22px	-880px	;}
+.red78	{	background-position:	-22px	-896px	;}
+.red79	{	background-position:	-22px	-912px	;}
+.red7A	{	background-position:	-22px	-928px	;}
+.red7B	{	background-position:	-22px	-944px	;}
+.red7C	{	background-position:	-22px	-960px	;}
+.red7D	{	background-position:	-22px	-976px	;}
+.red7E	{	background-position:	-22px	-992px	;}
+.red7F	{	background-position:	-22px	-1008px	;}
+					
+.blue20	{	background-position:	-33px	0px	;}
+.blue21	{	background-position:	-33px	-16px	;}
+.blue22	{	background-position:	-33px	-32px	;}
+.blue23	{	background-position:	-33px	-48px	;}
+.blue24	{	background-position:	-33px	-64px	;}
+.blue25	{	background-position:	-33px	-80px	;}
+.blue26	{	background-position:	-33px	-96px	;}
+.blue27	{	background-position:	-33px	-112px	;}
+.blue28	{	background-position:	-33px	-128px	;}
+.blue29	{	background-position:	-33px	-144px	;}
+.blue2A	{	background-position:	-33px	-160px	;}
+.blue2B	{	background-position:	-33px	-176px	;}
+.blue2C	{	background-position:	-33px	-192px	;}
+.blue2D	{	background-position:	-33px	-208px	;}
+.blue2E	{	background-position:	-33px	-224px	;}
+.blue2F	{	background-position:	-33px	-240px	;}
+.blue30	{	background-position:	-33px	-256px	;}
+.blue31	{	background-position:	-33px	-272px	;}
+.blue32	{	background-position:	-33px	-288px	;}
+.blue33	{	background-position:	-33px	-304px	;}
+.blue34	{	background-position:	-33px	-320px	;}
+.blue35	{	background-position:	-33px	-336px	;}
+.blue36	{	background-position:	-33px	-352px	;}
+.blue37	{	background-position:	-33px	-368px	;}
+.blue38	{	background-position:	-33px	-384px	;}
+.blue39	{	background-position:	-33px	-400px	;}
+.blue3A	{	background-position:	-33px	-416px	;}
+.blue3B	{	background-position:	-33px	-432px	;}
+.blue3C	{	background-position:	-33px	-448px	;}
+.blue3D	{	background-position:	-33px	-464px	;}
+.blue3E	{	background-position:	-33px	-480px	;}
+.blue3F	{	background-position:	-33px	-496px	;}
+.blue60	{	background-position:	-33px	-512px	;}
+.blue61	{	background-position:	-33px	-528px	;}
+.blue62	{	background-position:	-33px	-544px	;}
+.blue63	{	background-position:	-33px	-560px	;}
+.blue64	{	background-position:	-33px	-576px	;}
+.blue65	{	background-position:	-33px	-592px	;}
+.blue66	{	background-position:	-33px	-608px	;}
+.blue67	{	background-position:	-33px	-624px	;}
+.blue68	{	background-position:	-33px	-640px	;}
+.blue69	{	background-position:	-33px	-656px	;}
+.blue6A	{	background-position:	-33px	-672px	;}
+.blue6B	{	background-position:	-33px	-688px	;}
+.blue6C	{	background-position:	-33px	-704px	;}
+.blue6D	{	background-position:	-33px	-720px	;}
+.blue6E	{	background-position:	-33px	-736px	;}
+.blue6F	{	background-position:	-33px	-752px	;}
+.blue70	{	background-position:	-33px	-768px	;}
+.blue71	{	background-position:	-33px	-784px	;}
+.blue72	{	background-position:	-33px	-800px	;}
+.blue73	{	background-position:	-33px	-816px	;}
+.blue74	{	background-position:	-33px	-832px	;}
+.blue75	{	background-position:	-33px	-848px	;}
+.blue76	{	background-position:	-33px	-864px	;}
+.blue77	{	background-position:	-33px	-880px	;}
+.blue78	{	background-position:	-33px	-896px	;}
+.blue79	{	background-position:	-33px	-912px	;}
+.blue7A	{	background-position:	-33px	-928px	;}
+.blue7B	{	background-position:	-33px	-944px	;}
+.blue7C	{	background-position:	-33px	-960px	;}
+.blue7D	{	background-position:	-33px	-976px	;}
+.blue7E	{	background-position:	-33px	-992px	;}
+.blue7F	{	background-position:	-33px	-1008px	;}
+					
+.yellow20	{	background-position:	-44px	0px	;}
+.yellow21	{	background-position:	-44px	-16px	;}
+.yellow22	{	background-position:	-44px	-32px	;}
+.yellow23	{	background-position:	-44px	-48px	;}
+.yellow24	{	background-position:	-44px	-64px	;}
+.yellow25	{	background-position:	-44px	-80px	;}
+.yellow26	{	background-position:	-44px	-96px	;}
+.yellow27	{	background-position:	-44px	-112px	;}
+.yellow28	{	background-position:	-44px	-128px	;}
+.yellow29	{	background-position:	-44px	-144px	;}
+.yellow2A	{	background-position:	-44px	-160px	;}
+.yellow2B	{	background-position:	-44px	-176px	;}
+.yellow2C	{	background-position:	-44px	-192px	;}
+.yellow2D	{	background-position:	-44px	-208px	;}
+.yellow2E	{	background-position:	-44px	-224px	;}
+.yellow2F	{	background-position:	-44px	-240px	;}
+.yellow30	{	background-position:	-44px	-256px	;}
+.yellow31	{	background-position:	-44px	-272px	;}
+.yellow32	{	background-position:	-44px	-288px	;}
+.yellow33	{	background-position:	-44px	-304px	;}
+.yellow34	{	background-position:	-44px	-320px	;}
+.yellow35	{	background-position:	-44px	-336px	;}
+.yellow36	{	background-position:	-44px	-352px	;}
+.yellow37	{	background-position:	-44px	-368px	;}
+.yellow38	{	background-position:	-44px	-384px	;}
+.yellow39	{	background-position:	-44px	-400px	;}
+.yellow3A	{	background-position:	-44px	-416px	;}
+.yellow3B	{	background-position:	-44px	-432px	;}
+.yellow3C	{	background-position:	-44px	-448px	;}
+.yellow3D	{	background-position:	-44px	-464px	;}
+.yellow3E	{	background-position:	-44px	-480px	;}
+.yellow3F	{	background-position:	-44px	-496px	;}
+.yellow60	{	background-position:	-44px	-512px	;}
+.yellow61	{	background-position:	-44px	-528px	;}
+.yellow62	{	background-position:	-44px	-544px	;}
+.yellow63	{	background-position:	-44px	-560px	;}
+.yellow64	{	background-position:	-44px	-576px	;}
+.yellow65	{	background-position:	-44px	-592px	;}
+.yellow66	{	background-position:	-44px	-608px	;}
+.yellow67	{	background-position:	-44px	-624px	;}
+.yellow68	{	background-position:	-44px	-640px	;}
+.yellow69	{	background-position:	-44px	-656px	;}
+.yellow6A	{	background-position:	-44px	-672px	;}
+.yellow6B	{	background-position:	-44px	-688px	;}
+.yellow6C	{	background-position:	-44px	-704px	;}
+.yellow6D	{	background-position:	-44px	-720px	;}
+.yellow6E	{	background-position:	-44px	-736px	;}
+.yellow6F	{	background-position:	-44px	-752px	;}
+.yellow70	{	background-position:	-44px	-768px	;}
+.yellow71	{	background-position:	-44px	-784px	;}
+.yellow72	{	background-position:	-44px	-800px	;}
+.yellow73	{	background-position:	-44px	-816px	;}
+.yellow74	{	background-position:	-44px	-832px	;}
+.yellow75	{	background-position:	-44px	-848px	;}
+.yellow76	{	background-position:	-44px	-864px	;}
+.yellow77	{	background-position:	-44px	-880px	;}
+.yellow78	{	background-position:	-44px	-896px	;}
+.yellow79	{	background-position:	-44px	-912px	;}
+.yellow7A	{	background-position:	-44px	-928px	;}
+.yellow7B	{	background-position:	-44px	-944px	;}
+.yellow7C	{	background-position:	-44px	-960px	;}
+.yellow7D	{	background-position:	-44px	-976px	;}
+.yellow7E	{	background-position:	-44px	-992px	;}
+.yellow7F	{	background-position:	-44px	-1008px	;}
+					
+.green20	{	background-position:	-55px	0px	;}
+.green21	{	background-position:	-55px	-16px	;}
+.green22	{	background-position:	-55px	-32px	;}
+.green23	{	background-position:	-55px	-48px	;}
+.green24	{	background-position:	-55px	-64px	;}
+.green25	{	background-position:	-55px	-80px	;}
+.green26	{	background-position:	-55px	-96px	;}
+.green27	{	background-position:	-55px	-112px	;}
+.green28	{	background-position:	-55px	-128px	;}
+.green29	{	background-position:	-55px	-144px	;}
+.green2A	{	background-position:	-55px	-160px	;}
+.green2B	{	background-position:	-55px	-176px	;}
+.green2C	{	background-position:	-55px	-192px	;}
+.green2D	{	background-position:	-55px	-208px	;}
+.green2E	{	background-position:	-55px	-224px	;}
+.green2F	{	background-position:	-55px	-240px	;}
+.green30	{	background-position:	-55px	-256px	;}
+.green31	{	background-position:	-55px	-272px	;}
+.green32	{	background-position:	-55px	-288px	;}
+.green33	{	background-position:	-55px	-304px	;}
+.green34	{	background-position:	-55px	-320px	;}
+.green35	{	background-position:	-55px	-336px	;}
+.green36	{	background-position:	-55px	-352px	;}
+.green37	{	background-position:	-55px	-368px	;}
+.green38	{	background-position:	-55px	-384px	;}
+.green39	{	background-position:	-55px	-400px	;}
+.green3A	{	background-position:	-55px	-416px	;}
+.green3B	{	background-position:	-55px	-432px	;}
+.green3C	{	background-position:	-55px	-448px	;}
+.green3D	{	background-position:	-55px	-464px	;}
+.green3E	{	background-position:	-55px	-480px	;}
+.green3F	{	background-position:	-55px	-496px	;}
+.green60	{	background-position:	-55px	-512px	;}
+.green61	{	background-position:	-55px	-528px	;}
+.green62	{	background-position:	-55px	-544px	;}
+.green63	{	background-position:	-55px	-560px	;}
+.green64	{	background-position:	-55px	-576px	;}
+.green65	{	background-position:	-55px	-592px	;}
+.green66	{	background-position:	-55px	-608px	;}
+.green67	{	background-position:	-55px	-624px	;}
+.green68	{	background-position:	-55px	-640px	;}
+.green69	{	background-position:	-55px	-656px	;}
+.green6A	{	background-position:	-55px	-672px	;}
+.green6B	{	background-position:	-55px	-688px	;}
+.green6C	{	background-position:	-55px	-704px	;}
+.green6D	{	background-position:	-55px	-720px	;}
+.green6E	{	background-position:	-55px	-736px	;}
+.green6F	{	background-position:	-55px	-752px	;}
+.green70	{	background-position:	-55px	-768px	;}
+.green71	{	background-position:	-55px	-784px	;}
+.green72	{	background-position:	-55px	-800px	;}
+.green73	{	background-position:	-55px	-816px	;}
+.green74	{	background-position:	-55px	-832px	;}
+.green75	{	background-position:	-55px	-848px	;}
+.green76	{	background-position:	-55px	-864px	;}
+.green77	{	background-position:	-55px	-880px	;}
+.green78	{	background-position:	-55px	-896px	;}
+.green79	{	background-position:	-55px	-912px	;}
+.green7A	{	background-position:	-55px	-928px	;}
+.green7B	{	background-position:	-55px	-944px	;}
+.green7C	{	background-position:	-55px	-960px	;}
+.green7D	{	background-position:	-55px	-976px	;}
+.green7E	{	background-position:	-55px	-992px	;}
+.green7F	{	background-position:	-55px	-1008px	;}
+					
+.cyan20	{	background-position:	-66px	0px	;}
+.cyan21	{	background-position:	-66px	-16px	;}
+.cyan22	{	background-position:	-66px	-32px	;}
+.cyan23	{	background-position:	-66px	-48px	;}
+.cyan24	{	background-position:	-66px	-64px	;}
+.cyan25	{	background-position:	-66px	-80px	;}
+.cyan26	{	background-position:	-66px	-96px	;}
+.cyan27	{	background-position:	-66px	-112px	;}
+.cyan28	{	background-position:	-66px	-128px	;}
+.cyan29	{	background-position:	-66px	-144px	;}
+.cyan2A	{	background-position:	-66px	-160px	;}
+.cyan2B	{	background-position:	-66px	-176px	;}
+.cyan2C	{	background-position:	-66px	-192px	;}
+.cyan2D	{	background-position:	-66px	-208px	;}
+.cyan2E	{	background-position:	-66px	-224px	;}
+.cyan2F	{	background-position:	-66px	-240px	;}
+.cyan30	{	background-position:	-66px	-256px	;}
+.cyan31	{	background-position:	-66px	-272px	;}
+.cyan32	{	background-position:	-66px	-288px	;}
+.cyan33	{	background-position:	-66px	-304px	;}
+.cyan34	{	background-position:	-66px	-320px	;}
+.cyan35	{	background-position:	-66px	-336px	;}
+.cyan36	{	background-position:	-66px	-352px	;}
+.cyan37	{	background-position:	-66px	-368px	;}
+.cyan38	{	background-position:	-66px	-384px	;}
+.cyan39	{	background-position:	-66px	-400px	;}
+.cyan3A	{	background-position:	-66px	-416px	;}
+.cyan3B	{	background-position:	-66px	-432px	;}
+.cyan3C	{	background-position:	-66px	-448px	;}
+.cyan3D	{	background-position:	-66px	-464px	;}
+.cyan3E	{	background-position:	-66px	-480px	;}
+.cyan3F	{	background-position:	-66px	-496px	;}
+.cyan60	{	background-position:	-66px	-512px	;}
+.cyan61	{	background-position:	-66px	-528px	;}
+.cyan62	{	background-position:	-66px	-544px	;}
+.cyan63	{	background-position:	-66px	-560px	;}
+.cyan64	{	background-position:	-66px	-576px	;}
+.cyan65	{	background-position:	-66px	-592px	;}
+.cyan66	{	background-position:	-66px	-608px	;}
+.cyan67	{	background-position:	-66px	-624px	;}
+.cyan68	{	background-position:	-66px	-640px	;}
+.cyan69	{	background-position:	-66px	-656px	;}
+.cyan6A	{	background-position:	-66px	-672px	;}
+.cyan6B	{	background-position:	-66px	-688px	;}
+.cyan6C	{	background-position:	-66px	-704px	;}
+.cyan6D	{	background-position:	-66px	-720px	;}
+.cyan6E	{	background-position:	-66px	-736px	;}
+.cyan6F	{	background-position:	-66px	-752px	;}
+.cyan70	{	background-position:	-66px	-768px	;}
+.cyan71	{	background-position:	-66px	-784px	;}
+.cyan72	{	background-position:	-66px	-800px	;}
+.cyan73	{	background-position:	-66px	-816px	;}
+.cyan74	{	background-position:	-66px	-832px	;}
+.cyan75	{	background-position:	-66px	-848px	;}
+.cyan76	{	background-position:	-66px	-864px	;}
+.cyan77	{	background-position:	-66px	-880px	;}
+.cyan78	{	background-position:	-66px	-896px	;}
+.cyan79	{	background-position:	-66px	-912px	;}
+.cyan7A	{	background-position:	-66px	-928px	;}
+.cyan7B	{	background-position:	-66px	-944px	;}
+.cyan7C	{	background-position:	-66px	-960px	;}
+.cyan7D	{	background-position:	-66px	-976px	;}
+.cyan7E	{	background-position:	-66px	-992px	;}
+.cyan7F	{	background-position:	-66px	-1008px	;}
+					
+.magenta20	{	background-position:	-77px	0px	;}
+.magenta21	{	background-position:	-77px	-16px	;}
+.magenta22	{	background-position:	-77px	-32px	;}
+.magenta23	{	background-position:	-77px	-48px	;}
+.magenta24	{	background-position:	-77px	-64px	;}
+.magenta25	{	background-position:	-77px	-80px	;}
+.magenta26	{	background-position:	-77px	-96px	;}
+.magenta27	{	background-position:	-77px	-112px	;}
+.magenta28	{	background-position:	-77px	-128px	;}
+.magenta29	{	background-position:	-77px	-144px	;}
+.magenta2A	{	background-position:	-77px	-160px	;}
+.magenta2B	{	background-position:	-77px	-176px	;}
+.magenta2C	{	background-position:	-77px	-192px	;}
+.magenta2D	{	background-position:	-77px	-208px	;}
+.magenta2E	{	background-position:	-77px	-224px	;}
+.magenta2F	{	background-position:	-77px	-240px	;}
+.magenta30	{	background-position:	-77px	-256px	;}
+.magenta31	{	background-position:	-77px	-272px	;}
+.magenta32	{	background-position:	-77px	-288px	;}
+.magenta33	{	background-position:	-77px	-304px	;}
+.magenta34	{	background-position:	-77px	-320px	;}
+.magenta35	{	background-position:	-77px	-336px	;}
+.magenta36	{	background-position:	-77px	-352px	;}
+.magenta37	{	background-position:	-77px	-368px	;}
+.magenta38	{	background-position:	-77px	-384px	;}
+.magenta39	{	background-position:	-77px	-400px	;}
+.magenta3A	{	background-position:	-77px	-416px	;}
+.magenta3B	{	background-position:	-77px	-432px	;}
+.magenta3C	{	background-position:	-77px	-448px	;}
+.magenta3D	{	background-position:	-77px	-464px	;}
+.magenta3E	{	background-position:	-77px	-480px	;}
+.magenta3F	{	background-position:	-77px	-496px	;}
+.magenta60	{	background-position:	-77px	-512px	;}
+.magenta61	{	background-position:	-77px	-528px	;}
+.magenta62	{	background-position:	-77px	-544px	;}
+.magenta63	{	background-position:	-77px	-560px	;}
+.magenta64	{	background-position:	-77px	-576px	;}
+.magenta65	{	background-position:	-77px	-592px	;}
+.magenta66	{	background-position:	-77px	-608px	;}
+.magenta67	{	background-position:	-77px	-624px	;}
+.magenta68	{	background-position:	-77px	-640px	;}
+.magenta69	{	background-position:	-77px	-656px	;}
+.magenta6A	{	background-position:	-77px	-672px	;}
+.magenta6B	{	background-position:	-77px	-688px	;}
+.magenta6C	{	background-position:	-77px	-704px	;}
+.magenta6D	{	background-position:	-77px	-720px	;}
+.magenta6E	{	background-position:	-77px	-736px	;}
+.magenta6F	{	background-position:	-77px	-752px	;}
+.magenta70	{	background-position:	-77px	-768px	;}
+.magenta71	{	background-position:	-77px	-784px	;}
+.magenta72	{	background-position:	-77px	-800px	;}
+.magenta73	{	background-position:	-77px	-816px	;}
+.magenta74	{	background-position:	-77px	-832px	;}
+.magenta75	{	background-position:	-77px	-848px	;}
+.magenta76	{	background-position:	-77px	-864px	;}
+.magenta77	{	background-position:	-77px	-880px	;}
+.magenta78	{	background-position:	-77px	-896px	;}
+.magenta79	{	background-position:	-77px	-912px	;}
+.magenta7A	{	background-position:	-77px	-928px	;}
+.magenta7B	{	background-position:	-77px	-944px	;}
+.magenta7C	{	background-position:	-77px	-960px	;}
+.magenta7D	{	background-position:	-77px	-976px	;}
+.magenta7E	{	background-position:	-77px	-992px	;}
+.magenta7F	{	background-position:	-77px	-1008px	;}
+					
+
+
+
diff --git a/skins/html/style/xtree.css b/skins/html/style/xtree.css
new file mode 100644
index 0000000..9764366
--- /dev/null
+++ b/skins/html/style/xtree.css
@@ -0,0 +1,46 @@
+.webfx-tree-container {
+	margin: 0px;
+	padding: 0px;
+	font: icon;
+	white-space: nowrap;
+}
+
+.webfx-tree-item {
+	padding: 0px;
+	margin: 0px;
+	font: icon;
+	color: WindowText;
+	white-space: nowrap;
+	height: 16px;
+}
+
+.webfx-tree-item a, .webfx-tree-item a:active, .webfx-tree-item a:hover {
+	margin-left: 3px;
+	padding: 0px 2px 1px 2px;
+}
+
+.webfx-tree-item a {
+	color: black;
+	text-decoration: none;
+}
+
+.webfx-tree-item a:hover {
+	color: blue;
+	text-decoration: underline;
+}
+
+.webfx-tree-item a:active {
+	background: highlight;
+	color: highlighttext;
+	text-decoration: none;
+}
+
+.webfx-tree-item img {
+	vertical-align: middle;
+	border: 0px;
+}
+
+.webfx-tree-icon {
+	width: 16px;
+	height: 16px;
+}
\ No newline at end of file
diff --git a/skins/html/tlist.tmpl b/skins/html/tlist.tmpl
new file mode 100644
index 0000000..79c12a9
--- /dev/null
+++ b/skins/html/tlist.tmpl
@@ -0,0 +1,147 @@
+<!-- tlist -->
+<?% enableform = allow('tdelete') || allow('ttoggle');
+	rest = param.capacity;
+%?>
+
+<?% IF data.size <= 1 %?>
+<h1><?% gettext("Planned recordings") %?></h1>
+<?% ELSE %?>
+<h1><?% gettext("Planned recordings") %?> - <?% data.1.4 %?></h1>
+<?% END %?>
+
+<?% IF allow('tnew') %?>
+<a href="?cmd=tnew">[<?% gettext("Create new timer") %?>]</a>
+<?% END %?>
+<?% IF allow('tupdate') %?>
+<a href="javascript:tostatus('?cmd=tupdate')">[<?% gettext("Update timers") %?>]</a>
+<?% END %?>
+<form name='Timer'>
+<?% INCLUDE 'widgets/referer.tmpl' %?>
+
+<?% IF allow('ttoggle') %?>
+<a href="#" onClick="Toggle('<?% gettext("Nothing selected!") %?>',document.TimerList)">
+    [<?% gettext("Toggle timer") %?>]
+</a>
+<?% END %?>
+<?% IF allow('tdelete') %?>
+<a href="#" onClick="Delete('<?% gettext("Would you like to delete these timers?") %?>',
+'<?% gettext("Nothing selected!") %?>','tdelete',document.TimerList)">
+    [<?% gettext("Delete timer") %?>]
+</a>
+&nbsp;
+<?% END %?>
+	    <?% gettext("Search for timers") %?>:
+        <input type="hidden" name="cmd" value='tsearch' >
+        <input type="text" name="data" size='18' <?% IF cgi.param('cmd')=='ts' || cgi.param('cmd')=='tsearch' %?>value='<?% cgi.param('data')%?>'<?% END %?>>
+</form>
+<?% IF enableform %?>
+<form name='TimerList'>
+    <?% INCLUDE 'widgets/referer.tmpl' %?>
+<?% END %?>
+<table border="0" width="95%">
+        <tr>
+        <?% fields = data.shift %?>
+        <?% c = -1 %?>
+        <?% FOREACH field = fields %?>
+            <?% c = c + 1 %?>
+            <?% NEXT IF field.match('^__') or c == 4 %?>
+            <th><?% field %?></th>
+        <?% END %?>
+<?% IF param.recorder > 1 %?>
+            <th><?% gettext("Video disk recorder") %?></th>
+<?% END %?>
+<?% IF enableform %?>
+            <th width="64"><?% gettext("Selection",7) %?></th>
+<?% END %?>
+        </tr>
+        <?% FOREACH zeile = data %?>
+            <?% aktiv= ( zeile.1 ? zeile.1 mod 2 : 0 );
+                pdc= ( zeile.1 ? zeile.1 mod 8 div 4 : 0 );
+                day = zeile.4;
+                IF aktiv; rest = rest - zeile.12; END;
+            %?>
+            <?% IF oldDay != day %?>
+            <tr><td colspan='<?% zeile.size %?>' bgcolor='#DDDDDD'><b><?% day %?></b></td><tr>
+            <?% END %?>
+            <?% myclass = "normal" %?>
+            <?% UNLESS aktiv %?>
+                <?% myclass = "deactive" %?>
+            <?% ELSIF zeile.9 %?>
+                <?% myclass = 'problem' %?>
+            <?% ELSIF zeile.14 %?>
+                <?% myclass = "active" %?>
+            <?% END %?>
+            <tr class="<?% myclass %?>" <?% IF (loop.count mod 2) == 0 %?>bgcolor='#F5F5F5'<?% END %?>>
+                <?% c = -1 %?>
+                <?% FOREACH field = zeile %?>
+                    <?% c = c + 1 %?>
+                    <?% NEXT IF fields.$c.match('^__') or c == 4 %?>
+                    <?% IF c == 0; # Id Field %?>
+                    <td nowrap><nobr>
+                        <a href="?cmd=search&amp;data=<?% url( zeile.7.split('~').last ) %?>" title="<?% gettext("Search for repeats") %?>"><div class="<?% myclass %?>">[R]</div></a>
+    <?% IF allow('tedit') %?>
+                        <a href="?cmd=tedit&amp;data=<?% zeile.0 %?>" title="<?% gettext("Edit this timer") %?>"><div class="<?% myclass %?>">[E]</div></a>
+    <?% END %?>
+    <?% IF allow('tdelete') %?>
+                        <a href="javascript:sure(document.TimerList, '<?% gettext("Would you like to delete this timer?") %?> : <?% escape(zeile.7.split('~').first)  %?>','?cmd=tdelete&amp;data=<?% zeile.0 %?>')" title="<?% gettext("Would you like to delete this timer?") %?>"><div class="<?% myclass %?>">[D]</div></a>
+    <?% END %?>
+                    </td>
+                    <?% ELSIF c == 1; # Id Status %?>
+                    <td>
+                        <?% aus = gettext('Off') %?>
+                        <?% an = gettext('On') %?>
+    <?% IF allow('ttoggle') %?>
+            			<a name='<?% zeile.0 %?>' href="javascript:tostatus('?cmd=ttoggle&amp;data=<?% zeile.0 %?>')" title="<?% gettext("Toggle timer") %?>&nbsp;<?% aktiv ? aus : an %?>"><div class="<?% myclass %?>">[<?% aktiv ? an : aus %?>]</div></a>
+            			<?% IF pdc;'(';gettext('PDC');')';END %?>
+                        <?% IF zeile.11 && allow('aedit') %?>
+            			<a href="?cmd=aedit&amp;data=<?% zeile.11 %?>" title="<?% gettext("Edit autotimer") %?>"><div class="<?% myclass %?>">(AT)</div></a><br>
+                        <?% END %?>
+                        <?% IF rest <= 0 %?><a href="javascript:alert('<?% gettext("Not enough space to record this timer!") %?>')">(!)</a><br/><?% END %?>
+    <?% ELSE %?>
+            			[<?% aktiv ? aus : an %?>]<?% IF pdc;'&nbsp;(';gettext('PDC');')';END %?>
+    <?% END %?>
+                		</td>
+                    <?% ELSIF c == 2; # Channel Field %?>
+                    <td nowrap>
+                        <a href="?cmd=program&amp;data=<?% zeile.3 %?>" title="<?% gettext("Jump to program:") %?> <?% field %?>"><div class="<?% myclass %?>"><?% field %?></div></a>
+                    </td>
+                    <?% ELSIF c == 7; # Title %?>
+                    <td>
+                        <?% IF zeile.10 %?><?% INCLUDE bloecke/tooltip.tmpl cmd="display" title=field desc=zeile.13 eventid=zeile.10 linkid=zeile.10 ttp_offset=0 %?><?% END %?>
+                        <?% FOREACH f = field.split('~') %?>
+                            <div class="<?% myclass %?>"><?% f %?></div>
+                        <?% END %?>
+                        <?% IF zeile.10 %?></a><?% END %?>
+                    </td>
+                    <?% ELSIF c == 8; # Prio %?>
+                    <td>
+                        <?% IF myclass == 'fastproblem' %?>
+                        <div class="fastproblemgreen"><?% field %?></div>
+                        <?% ELSIF myclass == 'problem' %?>
+                        <div class="problemred"><?% field %?></div>
+                        <?% ELSE %?>
+                        <?% field %?>
+                        <?% END %?>
+                    </td>
+                    <?% ELSE %?>
+                    <td><?% field %?></td>
+                    <?% END %?>
+                <?% END %?>
+<?% IF param.recorder > 1 %?>
+               <td><div class="<?% myclass %?>"><?% zeile.15 %?></div></td>
+<?% END %?>
+    <?% IF enableform %?>
+                    <td>
+                        <input type="checkbox" value="<?% zeile.0 %?>" name="<?% zeile.7 | replace('~',' ') %?>" />
+                    </td>
+    <?% END %?>
+            </tr>
+            <?% oldDay = day %?>
+        <?% END %?>
+</table>
+<?% IF enableform %?>
+</form>
+<a href="#" onClick="selAll(document.TimerList, 1)">[<?% gettext("Select all") %?>]</a>
+<a href="#" onClick="selAll(document.TimerList, 0)">[<?% gettext("Unselect all") %?>]</a>
+<a href="#" onClick="reverse(document.TimerList)">[<?% gettext("Reverse select") %?>]</a>
+<?% END %?>
diff --git a/skins/html/topten.tmpl b/skins/html/topten.tmpl
new file mode 100644
index 0000000..e175a43
--- /dev/null
+++ b/skins/html/topten.tmpl
@@ -0,0 +1,68 @@
+<script language="javascript" type="text/javascript">
+<!--
+
+    <?% INCLUDE javascript/records.js %?>
+
+-->
+</SCRIPT>
+
+<!-- TableTemplate -->
+<h1><?% gettext("Top Ten entrys") %?></h1>
+<h6><?% gettext("This Screen list the most programmed EPG Events from all XXV Users. Of course, we list only Events these are exists in your EPG Table!") %?></h6>
+<p/>
+
+<table border="0" width="95%">
+<?% IF data.size %?>
+    <?% fields = data.shift %?>
+        <tr>
+        <?% FOREACH field = fields %?>
+            <?% NEXT IF field.match('^__') %?>
+            <th><?% field %?></th>
+        <?% END %?>
+        </tr>
+        <?% FOREACH zeile = data %?>
+        <?% c = 0 %?>
+        <?% id=zeile.0;title=zeile.1;subtitle=zeile.2;sender=zeile.3;
+            channel=zeile.4;start=zeile.5;stop=zeile.6;day=zeile.7;description=zeile.8;
+            pdc=zeile.9;timerid=zeile.10;recording=zeile.11;running=zeile.12;
+            rank=zeile.13 div 1;level=zeile.14;quantity=zeile.15;
+            %?>
+        <tr <?% IF (loop.count mod 2) == 0 %?> bgcolor='#F5F5F5'<?% END %?>>
+            <?% FOREACH field = [id,title,channel,start,stop,day,rank] %?>
+                <?% c = c + 1 %?>
+                <?% IF c == 1; # Id Field %?>
+                <td>
+                <?% INCLUDE 'bloecke/event_links.tmpl' data=zeile umbruch='<br/>' %?>
+                </td>
+                <?% ELSIF c == 2; # Text Field %?>
+                <td>
+                    <?% INCLUDE bloecke/tooltip.tmpl cmd="display" desc=description eventid=id linkid=id ttp_offset=0 %?>
+                    <?% IF timerid && recording %?>
+                    <b><?% field %?></b>
+                    <?% ELSE %?>
+                    <?% field %?>
+                    <?% END %?>
+                    <?% IF subtitle.length > 0  %?>
+                    <br><small><?% subtitle %?></small>
+                    <?% END %?>
+                    <?% IF description.length > 0 %?>
+                    <br><small><em><?% chop(description,30) | replace('<br />',' ') %?></em></small>
+                    <?% END %?>
+                    </a>
+                </td>
+                <?% ELSIF c == 3; # Channel Field %?>
+                <td>
+    						<a href='?cmd=program&data=<?% channel %?>'><?% sender %?></a>
+                </td>
+                <?% ELSE %?>
+                    <?% IF timerid && recording %?>
+                            <td><b><?% field %?></b></td>
+                    <?% ELSE %?>
+                            <td><?% field %?></td>
+                    <?% END %?>
+                <?% END %?>
+            <?% END %?>
+        </tr>
+        <?% END %?>
+<?% END %?>
+</table>
diff --git a/skins/html/ulist.tmpl b/skins/html/ulist.tmpl
new file mode 100644
index 0000000..27811fb
--- /dev/null
+++ b/skins/html/ulist.tmpl
@@ -0,0 +1,41 @@
+<!-- TableTemplate -->
+<h1><?% gettext("User administration") %?></h1>
+
+<a href="?cmd=unew">[<?% gettext("Create new account for user") %?>]</a>
+<p>
+
+<table border="0" width="95%">
+<form name='UserList'>
+<?% INCLUDE 'widgets/referer.tmpl' %?>
+<?% IF data.size %?>
+    <?% fields = data.shift %?>
+        <tr>
+        <?% FOREACH field = fields %?>
+            <th><?% field %?></th>
+        <?% END %?>
+        </tr>
+        <?% x = -1 %?>
+        <?% FOREACH zeile = data %?>
+        <?% x = x + 1 %?>
+        <tr class="<?% myclass %?>" <?% IF (x mod 2) != 0 %?>bgcolor='#F5F5F5'<?% END %?>>
+            <?% c = 0 %?>
+            <?% FOREACH field = zeile %?>
+                <?% c = c + 1 %?>
+                <?% IF c == 1; # Id Field %?>
+                <td>
+                    <a title="<?% gettext("Edit account of user") %?>" href="?cmd=uedit&amp;data=<?% zeile.0 %?>">
+                    [<?% gettext("Edit") %?>]</a>&nbsp;
+                    <a title="<?% gettext("Delete user account") %?>"
+                       href="javascript:sure(document.UserList, '<?% gettext("Would you like to delete this user account?") %?>: <?% escape(zeile.1) %?>','?cmd=udelete&amp;data=<?% zeile.0 %?>')">
+                    [<?% gettext("Delete") %?>]
+                    </a>
+                </td>
+                <?% ELSE %?>
+                <td><?% field %?></td>
+                <?% END %?>
+            <?% END %?>
+        </tr>
+        <?% END %?>
+<?% END %?>
+</form>
+</table>
diff --git a/skins/html/vdrlist.tmpl b/skins/html/vdrlist.tmpl
new file mode 100644
index 0000000..30e360d
--- /dev/null
+++ b/skins/html/vdrlist.tmpl
@@ -0,0 +1,41 @@
+<!-- TableTemplate -->
+<h1><?% gettext("Administration of video disk recorder") %?></h1>
+
+<a href="?cmd=vdrnew">[<?% gettext("Create new definition of video disk recorder") %?>]</a>
+<p>
+
+<table border="0" width="95%">
+<form name='vdrlist'>
+<?% INCLUDE 'widgets/referer.tmpl' %?>
+<?% IF data.size %?>
+    <?% fields = data.shift %?>
+        <tr>
+        <?% FOREACH field = fields %?>
+            <th><?% field %?></th>
+        <?% END %?>
+        </tr>
+        <?% x = -1 %?>
+        <?% FOREACH zeile = data %?>
+        <?% x = x + 1 %?>
+        <tr class="<?% myclass %?>" <?% IF (x mod 2) != 0 %?>bgcolor='#F5F5F5'<?% END %?>>
+            <?% c = 0 %?>
+            <?% FOREACH field = zeile %?>
+                <?% c = c + 1 %?>
+                <?% IF c == 1; # Id Field %?>
+                <td>
+                    <a title="<?% gettext("Edit definition of video disk recorder") %?>" href="?cmd=vdredit&amp;data=<?% zeile.0 %?>">
+                    [<?% gettext("Edit") %?>]</a>&nbsp;
+                    <a title="<?% gettext("Delete definition of video disk recorder") %?>"
+                       href="#" onclick="sure(document.vdrlist, '<?% gettext("Would you like to delete this definition of video disk recorder?") %?>: <?% escape(zeile.3) %?>','?cmd=vdrdelete&amp;data=<?% zeile.0 %?>')">
+                    [<?% gettext("Delete") %?>]
+                    </a>
+                </td>
+                <?% ELSE %?>
+                <td><?% field %?></td>
+                <?% END %?>
+            <?% END %?>
+        </tr>
+        <?% END %?>
+<?% END %?>
+</form>
+</table>
diff --git a/skins/html/vitals.tmpl b/skins/html/vitals.tmpl
new file mode 100644
index 0000000..7704065
--- /dev/null
+++ b/skins/html/vitals.tmpl
@@ -0,0 +1,86 @@
+<?%
+    USE date;
+    statusfiles = {};
+
+    FILTER null;
+        name = 'vitals';
+        loaddata = [];
+        utildata = [];
+        userdata = [];
+        timestamps = [];
+        FOREACH item = param.stack;
+            t = date.format(item.timestamp, '%H:%M:%S');
+            timestamps.push(t);
+            l = item.load.first * 10;
+            loaddata.push(l);
+            utildata.push(item.util);
+            userdata.push(item.users);
+        END;
+
+        # Maximum wert
+        max = loaddata.nsort.last;
+        IF utildata.nsort.last > max;
+            max = utildata.nsort.last;
+        END;
+        IF userdata.nsort.last > max;
+            max = userdata.nsort.last;
+        END;
+        max = max + (max div 10) + 0.9 | format('%d');
+
+        # Data ...
+        d = [
+             timestamps ,
+             loaddata ,
+             userdata ,
+             utildata ,
+        ];
+
+        USE my_graph = GD.Graph.lines(500,300);
+
+        # Xsteps
+        steps = param.stack.size / 5 | format('%d');
+        my_graph.set(
+                x_label_skip => steps,
+                x_long_ticks => 1,
+
+                y_label => gettext('Average load'),
+                y_long_ticks => 1,
+                y_max_value => max,
+
+                line_width   => 2,
+                box_axis     => 1,
+                boxclr       => '#FFFFCC',
+                fgclr        => '#BBBBBB'
+                legend_placement => 'RD',
+                legend_spacing => 5,
+        );
+        my_graph.set_title_font(param.font,10);
+        my_graph.set_y_label_font(param.font,10);
+        my_graph.set_x_label_font(param.font,10);
+        my_graph.set_x_axis_font(param.font,6);
+        my_graph.set_y_axis_font(param.font,6);
+        my_graph.set_legend( 'Load (x10)', 'User', 'Util');
+        statusfiles.load = writefile("status_${name}.gif", my_graph.plot(d).gif );
+        END;
+ %?>
+<!-- Vitals Template -->
+<?% IF param.headingText %?>
+<table width=100%><tr><td class='tableheader'><h3><?% param.headingText %?></h3>
+<?% END %?>
+<table border="0" width="95%">
+<?% FOREACH name = data.keys.sort %?>
+<tr>
+    <td><?% name %?></td>
+    <td><?% data.$name %?></td>
+</tr>
+<?% END %?>
+<tr>
+    <td colspan=2 align=center>
+        <img src="<?% statusfiles.load %?>">
+    </td>
+</tr>
+</table>
+<?% IF param.headingText %?>
+</td></tr></table>
+<p>
+<?% END %?>
diff --git a/skins/html/vtxpage.tmpl b/skins/html/vtxpage.tmpl
new file mode 100644
index 0000000..efd03ad
--- /dev/null
+++ b/skins/html/vtxpage.tmpl
@@ -0,0 +1,45 @@
+<!-- vtx -->
+<?% IF data.0 >= 1 %?>
+<?% channel = data.0.3 %?>
+<?% url = "?cmd=vt&amp;channel=${channel}" %?>
+<?% END %?>
+<h1><?% gettext("Teletext") %?></h1>
+
+<table border="0">
+<tr><td><form>
+    <select name='chan' onChange="di(this.form.chan.options[this.form.chan.options.selectedIndex].value, '?cmd=vt&amp;c')">
+	<?% FOREACH ch = param.channels %?>
+	    <option value="<?% ch.1 %?>" <?% "selected" IF channel == ch.1 %?>><?% ch.0 %?></option>
+	<?% END %?>
+    </select>
+    </form>
+</td>    
+  <?% IF channel %?>
+<td>
+    <form method="post" action="<?% url %?>">
+    	<?% gettext("Page") %?>:<input style='width:50px' type="text" name="page" size="5" value="<?% data.0.1 %?>">
+    </form>
+</td>
+<td>
+<form method="post" action="?cmd=vs&amp;channel=<?% channel %?>">
+	<?% gettext("Search") %?>:<input style='width:250px' type="text" name="data" size="10" value="">
+</form>
+</td>
+<?% END %?>
+</tr>
+</table>
+<?% IF channel %?>
+    <?% IF data.0.4 != 0 %?><a title="<?% gettext("First page") %?>" href="<?% url %?>">[^]</a><?% ELSE %?><span class="shadow">[^]</span><?% END %?>&nbsp;
+    <?% IF data.0.4 != 0 %?><a title="<?% gettext("Previous page") %?>"href="<?% url %?>&amp;page=<?% data.0.4 %?>">[<<]</a><?% ELSE %?><span class="shadow">[<<]</span><?% END %?>&nbsp;
+    <?% IF data.0.5 != 0 %?><a title="<?% gettext("Next page") %?>"href="<?% url %?>&amp;page=<?% data.0.5 %?>">[>>]</a><?% ELSE %?><span class="shadow">[>>]</span><?% END %?>
+<?% END %?>
+
+<br />
+<?% FOREACH zeile = data %?>
+<?% id=zeile.0;page=zeile.1;subpage=zeile.2;channels=zeile.3;prev=zeile.4;next=zeile.5;mtime=zeile.6 %?>
+<div style="float:left; margin:5px;" id="<?% id %?>">
+  <h2><?% gettext("Page") %?>&nbsp;<?% page; IF subpage > 0 %?>/<?% subpage; END %?></h2>
+  <div id="vt">
+    <?% zeile.7 %?>
+  </div>
+</div>
<?% END %?>
diff --git a/skins/html/widgets/checkbox.tmpl b/skins/html/widgets/checkbox.tmpl
new file mode 100644
index 0000000..631db79
--- /dev/null
+++ b/skins/html/widgets/checkbox.tmpl
@@ -0,0 +1,17 @@
+<!-- string -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% val = cgi.param(data.NAME) || data.def %?>
+        <table style="border:0px solid #000000;"><tr>
+        <?% c = 0 %?>
+        <?% FOREACH wert = data.choices %?>
+            <?% "</tr><tr>" IF (c mod 3) == 0 %?>
+            <td><input type="checkbox" name="<?% data.NAME %?>" value="<?% wert %?>" <?% "checked" IF val.grep("^${wert}").size %?> <?% FOREACH p = param.tags; "$p ";END %?>><?% wert %?></td>
+            <?% c = c + 1 %?>
+        <?% END %?>
+        </tr></table>
+    </td>
+</tr>
diff --git a/skins/html/widgets/confirm.tmpl b/skins/html/widgets/confirm.tmpl
new file mode 100644
index 0000000..5bb046b
--- /dev/null
+++ b/skins/html/widgets/confirm.tmpl
@@ -0,0 +1,12 @@
+<!-- confirm -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <nobr>
+        <?% val = cgi.param(data.NAME) || data.def %?>
+        <input type="radio" name="<?% data.NAME %?>" value="y" <?% "checked" IF val == 'y' %?>><?% gettext("yes") %?>&nbsp;
+        <input type="radio" name="<?% data.NAME %?>" value="n" <?% "checked" IF val == 'n' %?>><?% gettext("no") %?>
+    </td>
+</tr>
diff --git a/skins/html/widgets/date.tmpl b/skins/html/widgets/date.tmpl
new file mode 100644
index 0000000..565d3f2
--- /dev/null
+++ b/skins/html/widgets/date.tmpl
@@ -0,0 +1,32 @@
+<script type="text/javascript">
+
+var weekstring = '<?% gettext('MTWTFSS') %?>';
+var weekdays = weekstring.split('');
+
+function ch_input (checkbox, input) {
+    var txt = '';
+    for(var i=0;i<checkbox.length;++i) {
+        if(checkbox[i].checked) {
+          txt = txt + weekdays[i];
+        } else {
+          txt = txt + '-';
+        }
+    }
+    input.value = txt;
+}
+</script>
+<!-- date -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% val = cgi.param(data.NAME) || data.def %?>
+        <input type="text" name="<?% data.NAME %?>" value="<?% val %?>" <?% FOREACH p = param.tags; "$p ";END %?>><br/>
+        <?% valarr = val.split(''); z = 0 %?>
+        <?% FOREACH dd = gettext('Mon Tue Wed Thu Fri Sat Sun').split(' ') %?>
+        <input type="checkbox" name="Weekday" <?% "checked" IF ! val.search('^\d+') && valarr.$z != '-' %?> onchange='ch_input(this.form.Weekday, this.form.<?% data.NAME %?>)'><?% dd %?>
+        <?% z = z + 1;
+        END %?>
+    </td>
+</tr>
diff --git a/skins/html/widgets/dir.tmpl b/skins/html/widgets/dir.tmpl
new file mode 100644
index 0000000..fa41e1b
--- /dev/null
+++ b/skins/html/widgets/dir.tmpl
@@ -0,0 +1,20 @@
+<!-- dir -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% val = cgi.param(data.NAME) || data.def %?>
+        <input type="text" name="<?% data.NAME %?>" value="<?% val %?>" <?% FOREACH p = param.tags; "$p ";END %?>
+            onBlur="check<?% data.NAME %?>Dir()"><br>
+        <span id='id<?% param.count %?>'></span>
+    </td>
+</tr>
+<script>
+function check<?% data.NAME %?>Dir () {
+    checkValue(document.forms[0].<?% data.NAME %?>, 'id<?% param.count %?>', "isdir", 
+	'<?% gettext("Directory does not exist!") %?>', 
+	'<?% gettext("Directory exists!") %?>');
+}
+window.setTimeout("check<?% data.NAME %?>Dir()", 500);
+</script>
diff --git a/skins/html/widgets/err.tmpl b/skins/html/widgets/err.tmpl
new file mode 100644
index 0000000..69f24a3
--- /dev/null
+++ b/skins/html/widgets/err.tmpl
@@ -0,0 +1,2 @@
+<!-- MessageTemplate -->
+<br><h3><font color="red"><?% data.join('<br>') %?></font></h3><br>
diff --git a/skins/html/widgets/file.tmpl b/skins/html/widgets/file.tmpl
new file mode 100644
index 0000000..2c41fe4
--- /dev/null
+++ b/skins/html/widgets/file.tmpl
@@ -0,0 +1,20 @@
+<!-- file -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% val = cgi.param(data.NAME) || data.def %?>
+            <input type="text" name="<?% data.NAME %?>" value="<?% val %?>" <?% FOREACH p = param.tags; "$p ";END %?>
+                onBlur="check<?% data.NAME %?>File()"><br>
+            <span id='id<?% param.count %?>'></span>
+    </td>
+</tr>
+<script>
+function check<?% data.NAME %?>File () {
+    checkValue(document.forms[0].<?% data.NAME %?>, 'id<?% param.count %?>', "isfile",
+	'<?% gettext("File does not exist!") %?>', 
+	'<?% gettext("File exists!") %?>');
+}
+window.setTimeout("check<?% data.NAME %?>File()", 500);
+</script>
diff --git a/skins/html/widgets/footer.tmpl b/skins/html/widgets/footer.tmpl
new file mode 100644
index 0000000..55980ce
--- /dev/null
+++ b/skins/html/widgets/footer.tmpl
@@ -0,0 +1,61 @@
+<?% IF !global.hidefooter %?>
+<?% IF verbose %?>
+    <?% data = bench %?>
+
+<div class="tab-pane" id="tabPane1">
+
+	<div class="tab-page" id="tabPage1">
+		<h2 class="tab">Last Logs</h2>
+
+		<table>
+        <?% FOREACH logline = llog(5) %?>
+        <tr><td>
+            <div style='font-size:10px'><?% logline %?><br></div>
+        </td></tr>
+        <?% END %?>
+		</table>
+
+	</div>
+
+	<div class="tab-page" id="tabPage2">
+		<h2 class="tab">Benchmark</h2>
+            <table width=100%>
+                <?% FOREACH n = data.keys.sort %?>
+                    <?% NEXT IF data.$n > 1000 %?>
+                    <?% ges = data.$n + ges %?>
+                <tr>
+                    <td><div style='font-size:10px'><?% n %?></div></td>
+                    <td><div style='font-size:10px'><?% data.$n %?></div></td>
+                </tr>
+                <?% END %?>
+                <tr>
+                    <td><b><div style='font-size:10px'>Summary:</div></b></td>
+                    <td><b><div style='font-size:10px'><?% ges %?></div></b></td>
+                </tr>
+            </table>
+	</div>
+
+	<div class="tab-page" id="tabPage3">
+		<h2 class="tab">Variables</h2>
+
+		<table><tr><td>
+        <pre><?% PERL %?>
+use Data::Dumper;
+print Dumper($stash->_dump_frame(5));
+        <?% END %?></pre>
+		</td></tr></table>
+
+	</div>
+
+</div>
+<?% END %?>
+
+<!-- ###### Tooltips ###### -->
+<div id="TOOLTIP"></div>
+
+<center class='footer'>
+<a href="http://xxv.berlios.de">XXV System</a> -- Version: <?% version %?>
+</center>
+<?% END; #global.hidefooter %?>
+    </body>
+</HTML>
diff --git a/skins/html/widgets/formEnd.tmpl b/skins/html/widgets/formEnd.tmpl
new file mode 100644
index 0000000..125126f
--- /dev/null
+++ b/skins/html/widgets/formEnd.tmpl
@@ -0,0 +1,11 @@
+<!-- FormEnd -->
+<tr><td colspan=2>&nbsp;</td></tr>
+<tr>
+    <td>
+        <input type='submit' value='<?% gettext("Apply") %?>'>&nbsp;
+        <input type='reset' value='<?% gettext("Reset") %?>'>&nbsp;
+    </td>
+    <td>&nbsp;</td>
+<tr>
+</form>
+</table>
diff --git a/skins/html/widgets/formStart.tmpl b/skins/html/widgets/formStart.tmpl
new file mode 100644
index 0000000..8e5bb25
--- /dev/null
+++ b/skins/html/widgets/formStart.tmpl
@@ -0,0 +1,10 @@
+<!-- FormStart -->
+<?% IF data %?>
+<h1><?% data %?></h1>
+<?% END %?>
+<table border='0' width='95%' style="margin-top:15px">
+<form method="post" action="?cmd=<?% cgi.param('cmd') %?>">
+    <input type='hidden' name='data' value='<?% cgi.param('data') %?>'>
+    <input type='hidden' name='__action' value='save'>
+
+    <?% INCLUDE 'widgets/referer.tmpl' %?>
diff --git a/skins/html/widgets/hidden.tmpl b/skins/html/widgets/hidden.tmpl
new file mode 100644
index 0000000..e641c54
--- /dev/null
+++ b/skins/html/widgets/hidden.tmpl
@@ -0,0 +1,2 @@
+<!-- hidden -->
+<input type="hidden" name="<?% data.NAME %?>" value="<?% cgi.param(data.NAME) || data.def %?>">
diff --git a/skins/html/widgets/host.tmpl b/skins/html/widgets/host.tmpl
new file mode 100644
index 0000000..cf90c8a
--- /dev/null
+++ b/skins/html/widgets/host.tmpl
@@ -0,0 +1,23 @@
+<!-- host -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% val = cgi.param(data.NAME) || data.def %?>
+        <input
+            type="text"
+            name="<?% data.NAME %?>"
+            value="<?% val %?>"
+            <?% FOREACH p = param.tags; "$p ";END %?>
+            onBlur="check<?% data.NAME %?>Host()"
+        ><br/>
+        <span id='id<?% param.count %?>'></span>
+    </td>
+</tr>
+<script>
+function check<?% data.NAME %?>Host () {
+    checkValue(document.forms[0].<?% data.NAME %?>, 'id<?% param.count %?>', 'getip', '<?% gettext("Host does not exist!") %?>', 'IP: %s');
+}
+window.setTimeout("check<?% data.NAME %?>Host()", 500);
+</script>
diff --git a/skins/html/widgets/integer.tmpl b/skins/html/widgets/integer.tmpl
new file mode 100644
index 0000000..bbde2c3
--- /dev/null
+++ b/skins/html/widgets/integer.tmpl
@@ -0,0 +1,9 @@
+<!-- integer -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <input type="text" name="<?% data.NAME %?>" value="<?% cgi.param(data.NAME) || data.def %?>" <?% FOREACH p = param.tags; "$p ";END %?>>
+    </td>
+</tr>
diff --git a/skins/html/widgets/link.tmpl b/skins/html/widgets/link.tmpl
new file mode 100644
index 0000000..5ac989f
--- /dev/null
+++ b/skins/html/widgets/link.tmpl
@@ -0,0 +1,2 @@
+<!-- Link -->
+<a href="<?% reentities(data.url) %?>">[<?% data.text %?>]</a>
diff --git a/skins/html/widgets/list.tmpl b/skins/html/widgets/list.tmpl
new file mode 100644
index 0000000..a4bdcf2
--- /dev/null
+++ b/skins/html/widgets/list.tmpl
@@ -0,0 +1,47 @@
+<!-- list -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% val = cgi.param(data.NAME) || data.def %?>
+        <?% UNLESS val.max %?>
+            <?% values = val.join(',').split(',') %?>
+        <?% ELSE %?>
+            <?% values = val %?>
+        <?% END %?>
+        <?% IF data.options == 'multi' %?>
+            <select name="<?% data.NAME %?>" multiple size="10" <?% FOREACH p = param.tags; "$p ";END %?>>
+        <?% ELSE %?>
+            <select name="<?% data.NAME %?>" <?% FOREACH p = param.tags; "$p ";END %?>>
+        <?% END %?>
+            <?% FOREACH l = data.choices %?>
+                <?% sel = '' %?>
+                <?% dis = '' %?>
+                <?% FOREACH valch = values %?>
+					          <?% IF valch == l.1 %?>
+                    <?% sel = ' selected="selected"';LAST %?>
+                    <?% END %?>
+                <?% END %?>
+                <?% FOREACH valch = data.disabled %?>
+					          <?% IF valch == l.1 %?>
+                    <?% dis = ' disabled="disabled"';LAST %?>
+                    <?% END %?>
+                <?% END %?>
+            <?% IF l.2 && l.2 != optgroup %?>
+              <?% IF optgroup %?>
+              </optgroup>
+              <?% END %?>
+              <optgroup label="<?% optgroup = l.2;l.2 %?>">
+            <?% END %?>
+                <option value='<?% l.1 %?>'<?% sel %?><?% dis %?>><?% l.0 %?></option>
+            <?% END %?>
+            <?% IF optgroup %?>
+              </optgroup>
+            <?% END %?>
+            </select>
+    </td>
+</tr>
+
+<pre>
+</pre>
diff --git a/skins/html/widgets/littlemenu.tmpl b/skins/html/widgets/littlemenu.tmpl
new file mode 100644
index 0000000..8ae191f
--- /dev/null
+++ b/skins/html/widgets/littlemenu.tmpl
@@ -0,0 +1,12 @@
+<!-- LittleMenuTemplate -->
+
+<?% IF data.title %?>
+<h1><?% data.title %?></h1>
+<?% END %?>
+
+<?% FOREACH l = data.links %?>
+<?% "<b>" IF data.highlight == l.key %?>
+<a href="<?% l.value.link %?>">[<?% l.value.text %?>]</a>&nbsp;
+<?% "</b>" IF data.highlight == l.key %?>
+<?% END %?>
+<p>
diff --git a/skins/html/widgets/menu.tmpl b/skins/html/widgets/menu.tmpl
new file mode 100644
index 0000000..41bfc5f
--- /dev/null
+++ b/skins/html/widgets/menu.tmpl
@@ -0,0 +1,21 @@
+<!-- MenuTemplate -->
+<?% message = data.shift %?>
+<?% IF message %?>
+<h1><pre><?% gettext("ERROR")%?> : <?% message %?></pre></h1>
+<?% END %?>
+
+<ul>
+<?% FOREACH field = data %?>
+    <?% group = field.0; short = field.1; name = field.2; descr = field.3 %?>
+    <?% IF ! oldgroup.defined %?>
+<li><?% group %?><ul>
+    <?% ELSIF oldgroup != group && oldgroup.defined %?>
+</ul></li></ul>
+<ul><li><?% group %?><ul>
+    <?% END %?>
+<li><a href="?cmd=<?% name %?>" title="<?% descr %?>"><?% name %?></a></li>
+    <?% oldgroup = group %?>
+<?% END %?>
+</ul>
+</li>
+</ul>
diff --git a/skins/html/widgets/message.tmpl b/skins/html/widgets/message.tmpl
new file mode 100644
index 0000000..aa52e9b
--- /dev/null
+++ b/skins/html/widgets/message.tmpl
@@ -0,0 +1,4 @@
+<!-- MessageTemplate -->
+<?% IF param.tags; param.tags.first; END %?>
+<?% data.join('<br>') %?><br>
+<?% IF param.tags; param.tags.last; END %?>
diff --git a/skins/html/widgets/password.tmpl b/skins/html/widgets/password.tmpl
new file mode 100644
index 0000000..f6b043e
--- /dev/null
+++ b/skins/html/widgets/password.tmpl
@@ -0,0 +1,11 @@
+<!-- password -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% val = cgi.param(data.NAME) || data.def %?>
+        <input type="password" name="<?% data.NAME %?>" value="" <?% FOREACH p = param.tags; "$p ";END %?>><br/>
+        <input type="password" name="<?% data.NAME %?>" value="" <?% FOREACH p = param.tags; "$p ";END %?> title='<?% gettext("Repeat entry") %?>'>
+    </td>
+</tr>
diff --git a/skins/html/widgets/player.tmpl b/skins/html/widgets/player.tmpl
new file mode 100644
index 0000000..d6354e8
--- /dev/null
+++ b/skins/html/widgets/player.tmpl
@@ -0,0 +1,187 @@
+<!-- player -->
+<?% width = param.width %?>
+<?% height = param.height %?>
+<?% widget = param.widget %?>
+
+<?% IF info.http_useragent.match('.*MSIE.*') && !info.http_useragent.match('.*Opera.*');
+    msie = 1;
+ELSE;
+    msie = 0;
+END %?>
+
+
+
+<h1><?% param.title %?></h1>
+
+<?% IF widget == 'vlc' && !msie %?>
+
+<!-- vlc with mozilla -->
+<script language="javascript">
+<!--
+   function volume_up()
+   {
+    var previous =  document.vlc.get_volume();
+        var newvolume = previous + 10;
+    if( newvolume > 200 )  newvolume = 200;
+    document.vlc.set_volume( newvolume );
+    var volume = document.getElementById("volume_status");
+    var current =  document.vlc.get_volume();
+    volume.innerHTML = current + " %";
+   }
+
+   function volume_down()
+   {
+    var previous =  document.vlc.get_volume();
+        var newvolume = previous - 10;
+    if( newvolume < 0 )  newvolume = 0;
+    document.vlc.set_volume( newvolume );
+    var current =  document.vlc.get_volume();
+    volume.innerHTML = current + " %";
+   }
+   function status()
+   {
+        var play_status = document.getElementById("play_status");
+        play_status.innerHTML = document.vlc.isplaying() 
+          ? "<?% gettext("Playing") %?>" 
+          : "<?% gettext("Not playing") %?>";
+        setTimeout("status()", 1000 );
+   }
+//-->
+</script>
+<p align='center'>
+          <embed type="application/x-vlc-plugin"
+            pluginspage="http://www.videolan.org/vlc"
+            name="vlc"
+            autoplay="yes" loop="no" height="<?% height %?>" width="<?% width %?>"
+            target="<?% data %?>" />
+<br />
+  <input type="button" id="play" value="<?% gettext("Playback") %?>" onClick='document.vlc.play()' />
+  <input type="button" id="pause" value="<?% gettext("Pause") %?>" onClick='document.vlc.pause()' />
+  <input type="button" id="stop" value="<?% gettext("Stop") %?>" onClick='document.vlc.stop()' />
+  &nbsp;
+  <input type="button" id="quiet" value="<?% gettext("Decrease volume") %?>" onClick='volume_down()' />
+  <input type="button" id="loud" value="<?% gettext("Increase volume") %?>" onClick='volume_up()' />
+  <input type="button" id="mute" value="<?% gettext("Mute") %?>" onClick='document.vlc.mute()' />
+  &nbsp;
+  <input type="button" id="fullscreen" value="<?% gettext("Full screen") %?>" onClick='document.vlc.fullscreen()' />
+<br />
+        <table summary="">
+            <tr><td><?% gettext("Status") %?> : </td>
+                <td><span id="play_status"><?% gettext("Unknown") %?></span></td></tr>
+            <tr><td><?% gettext("Volume") %?> : </td><td><span id="volume_status"></span></td></tr>
+        </table>
+</p>
+
+<script language="javascript">
+<!--
+  var volume = document.getElementById("volume_status");
+  var current =  document.vlc.get_volume();
+  volume.innerHTML = current + " %";
+  setTimeout("status()", 1 );
+//-->
+</script>
+
+
+<?% ELSIF widget == 'vlc' %?>
+
+<!-- vlc with activeX -->
+<p align='center'>
+        <object classid="clsid:E23FE9C6-778E-49D4-B537-38FCDE4887D8" 
+          codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
+          height="<?% height %?>" width="<?% width %?>" id="vlc" events="True">
+          <param name="Src" value="<?% data %?>" />
+          <param name="ShowDisplay" value="True" />
+          <param name="Loop" value="False" />
+          <param name="AutoPlay" value="True" />
+        </object>
+<br />
+          <input type="button" id="play" value="<?% gettext("Playback") %?>" onClick='doPlayOrPause()' />
+          <input type="button" id="pause" value="<?% gettext("Pause") %?>" onClick='doPlayOrPause()' />
+          <input type="button" id="stop" value="<?% gettext("Stop") %?>" onClick='document.vlc.stop()' />
+          &nbsp;
+          <input type="button" id="mute" value="<?% gettext("Mute") %?>" onClick='document.vlc.toggleMute()' />
+<br />
+          <table summary="">
+            <tr><td><?% gettext("Status") %?> : </td>
+                <td><span id="play_status"><?% gettext("Unknown") %?></span></td></tr>
+          </table>
+</p>
+
+<script LANGUAGE="JScript">
+<!--
+var sliderTimerId = 0;
+
+function onPlay() {
+    document.getElementById("play_status").value = "<?% gettext("Playing") %?>";
+};
+function onPause() {
+    document.getElementById("play_status").value = "<?% gettext("Paused") %?>";
+};
+function onStop() {
+    document.getElementById("play_status").value = "<?% gettext("Not playing") %?>";
+};
+
+function doUpdate() {
+    if( vlc.Playing ) {
+        sliderTimerId = setTimeout("doUpdate()", 1000);
+    }
+    else {
+        onStop();
+        sliderTimerId = 0;
+    }
+};
+
+function doPlayOrPause() {
+    if( document.vlc.playing ) {
+        document.vlc.pause();
+    }
+    else {
+        document.vlc.play();
+    }
+};
+function vlc::play() {
+    if( ! sliderTimerId ) {
+        sliderTimerId = setTimeout("doUpdate()", 1000);
+    }
+    onPlay();
+};
+function vlc::pause() {
+    if( sliderTimerId ) {
+        clearTimeout(sliderTimerId)
+        sliderTimerId = 0;
+    }
+    onPause();
+};
+function vlc::stop() {
+    if( sliderTimerId ) {
+        clearTimeout(sliderTimerId)
+        sliderTimerId = 0;
+    }
+    onStop();
+};
+//-->
+</script>
+<?% ELSE %?>
+<!-- media player with activeX -->
+<p align='center'>
+    <object id="mediaPlayer" width="<?% width %?>" height="<?% height %?>"
+        classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
+        codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
+        standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
+        <param name="fileName" value="<?% data %?>" />
+        <param name="animationatStart" value="true" />
+        <param name="transparentatStart" value="true" />
+        <param name="autoStart" value="true" />
+        <param name="showControls" value="true" />
+        <param name="loop" value="true" />
+        <embed type="application/x-mplayer2"
+            pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
+            id="mediaPlayer" name="mediaPlayer" displaysize="4" autosize="-1"
+            bgcolor='darkblue' showcontrols="true" showtracker="-1"
+            showdisplay="0" showstatusbar="-1" videoborder3d="-1" width="<?% width %?>" height="<?% height %?>"
+            src="<?% data %?>" autostart="true" designtimesp="5311" loop="true">
+        </embed>
+    </object>
+</p>
+<?% END %?>
+
diff --git a/skins/html/widgets/radio.tmpl b/skins/html/widgets/radio.tmpl
new file mode 100644
index 0000000..acd42f5
--- /dev/null
+++ b/skins/html/widgets/radio.tmpl
@@ -0,0 +1,12 @@
+<!-- radio -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% val = cgi.param(data.NAME) || data.def %?>
+        <?% FOREACH wert = data.choices %?>
+            <input type="radio" name="<?% data.NAME %?>" value="<?% wert %?>" <?% "checked" IF val == wert %?><?% FOREACH p = param.tags; " $p";END %?>><?% wert %?><br>
+        <?% END %?>
+    </td>
+</tr>
diff --git a/skins/html/widgets/redirect.tmpl b/skins/html/widgets/redirect.tmpl
new file mode 100644
index 0000000..60f4e73
--- /dev/null
+++ b/skins/html/widgets/redirect.tmpl
@@ -0,0 +1,4 @@
+<!-- Redirect -->
+<script type="text/javascript">
+    redirect('<?% reentities(data.url) %?>', '<?% data.wait ? data.wait : 1 %?>', '<?% data.parent %?>');
+</script>
diff --git a/skins/html/widgets/referer.tmpl b/skins/html/widgets/referer.tmpl
new file mode 100644
index 0000000..152158b
--- /dev/null
+++ b/skins/html/widgets/referer.tmpl
@@ -0,0 +1,8 @@
+    <?% command = cgi.param('cmd') %?>
+    <?% IF info.Referer.match("cmd=help") %?>
+        <input type='hidden' name='referer' value='?cmd=<?% cgi.param('cmd') %?>&data=<?% cgi.param('data') %?>'>
+    <?% ELSIF info.Referer.match("cmd=${command}") %?>
+        <input type='hidden' name='referer' value='<?% cgi.param('referer') %?>'>
+    <?% ELSE %?>
+        <input type='hidden' name='referer' value='<?% info.Referer %?>'>
+    <?% END %?>
diff --git a/skins/html/widgets/remote.tmpl b/skins/html/widgets/remote.tmpl
new file mode 100644
index 0000000..3204c74
--- /dev/null
+++ b/skins/html/widgets/remote.tmpl
@@ -0,0 +1,177 @@
+<!-- remote -->
+<?% IF cgi.param('monitor').defined;monitor = cgi.param('monitor');ELSE;monitor = param.monitor;END %?>
+<img src="images/trans.gif" name="switchimage" width="2" height="1">
+<form name="remoteform" onsubmit="changeInterval(document.remoteform.grabinterval.value); return false">
+
+<script language="javascript" type="text/javascript">
+<!--
+
+var interval = 5
+var last = 0;
+
+function post(url) {
+    var vdr = ( document.remoteform.vdr.options ? document.remoteform.vdr.options[document.remoteform.vdr.options.selectedIndex].value : document.remoteform.vdr.value );
+    // Hmm, brutal und gemein, das Laden der URL als Bild funktioniert...
+    var img = new Image();
+    img.src = url + '&__vdr=' + vdr;
+}
+
+function switch_channel(url) {
+    post(url);
+<?% IF monitor %?>
+    if(last + 1000 < Date.UTC()) {
+        grab();
+    }
+<?% END %?>
+}
+
+<?% IF monitor %?>
+function grab() {
+    if(document.remoteform.grabinterval.value > 0) {
+      Now = new Date();
+      var vdr = ( document.remoteform.vdr.options ? document.remoteform.vdr.options[document.remoteform.vdr.options.selectedIndex].value : document.remoteform.vdr.value );
+    	document.livepicture.src = '?cmd=gdisplay&__vdr='+vdr+'&random=' + Now.getTime();
+    }
+    last = Date.UTC();
+}
+
+function changeInterval(newinterval) {
+    window.clearInterval(aktiv);
+    if(newinterval > 0) {
+        inter = newinterval * 1000;
+        aktiv = window.setInterval("grab()", inter);
+    }
+}
+
+inter = interval * 1000;
+aktiv = window.setInterval("grab()", inter);
+<?% END %?>
+-->
+</script>
+
+<style type="text/css" media="screen">
+<!--
+#small  { font-weight: normal; width: 20px; height: 20px; font-size: 9px; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif}
+-->
+</style>
+<?% USE date %?>
+<!-- remote -->
+<center>
+<table border=0 cellpadding=0 cellspacing=0>
+<tr>
+<?% IF monitor %?>
+  <td rowspan="14">
+    <img src="?cmd=gdisplay&random=<?% date.now %?>&amp;__vdr=<?% param.vdr %?>" width="<?% param.width %?>" height="<?% param.height %?>" name="livepicture">
+  </td>
+<?% END %?>
+  <td colspan="3"><nobr>
+  <input type="button" onclick="self.location.href='?cmd=r&monitor=<?% monitor ? 0 : 1 %?>'" name="monitor" value="<?% gettext("Monitor") %?>">
+  <input type="button" onclick="switch_channel('?cmd=remote&data=Power')" name="power" value="<?% gettext("Switch off") %?>">
+  </td>
+</tr>
+<tr>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=1')" type="button" name="1" value="1"></td>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=2')" type="button" name="2" value="2"></td>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=3')" type="button" name="3" value="3"></td>
+</tr>
+<tr>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=4')" type="button" name="4" value="4"></td>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=5')" type="button" name="5" value="5"></td>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=6')" type="button" name="6" value="6"></td>
+</tr>
+<tr>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=7')" type="button" name="7" value="7"></td>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=8')" type="button" name="8" value="8"></td>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=9')" type="button" name="9" value="9"></td>
+</tr>
+<tr>
+  <td>&nbsp;</td>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=Null')" type="button" name="0" value="0"></td>
+  <td>&nbsp;</td>
+</tr>
+<tr>
+  <td colspan="3" align="center"><nobr>
+    <input id='small' onclick="switch_channel('?cmd=remote&data=Red')" type="button" name="red" value=" " style="background:red">
+    <input id='small' onclick="switch_channel('?cmd=remote&data=Green')" type="button" name="green" value=" " style="background:green">
+    <input id='small' onclick="switch_channel('?cmd=remote&data=Yellow')" type="button" name="yellow" value=" " style="background:yellow">
+    <input id='small' onclick="switch_channel('?cmd=remote&data=Blue')" type="button" name="blue" value=" " style="background:blue">
+  </td>
+</tr>
+<tr>
+  <td>&nbsp;</td>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=Up')" type="button" name="up" value="^"></td>
+  <td>&nbsp;</td>
+</tr>
+<tr>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=Left')" type="button" name="left" value="<"></td>
+  <td align='center'><input            onclick="switch_channel('?cmd=remote&data=Ok')" type="button" name="ok" value="<?% gettext("Ok") %?>"></td>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=Right')" type="button" name="right" value=">"></td>
+</tr>
+<tr>
+  <td>&nbsp;</td>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=Down')" type="button" name="down" value="v"></td>
+  <td>&nbsp;</td>
+</tr>
+<tr>
+  <td colspan="3"><nobr>
+  <input type="button" onclick="switch_channel('?cmd=remote&data=Menu')" name="menu" value="<?% gettext("Menu") %?>">
+  <input onclick="switch_channel('?cmd=remote&data=Back')" type="button" name="back" value="<?% gettext("Back") %?>">
+  </td>
+</tr>
+<tr>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=VolumeMinus')" type="button" name="leiser" value="-"></td>
+  <td align='center'>&nbsp;</td>
+  <td align='center'><input id='small' onclick="switch_channel('?cmd=remote&data=VolumePlus')" type="button" name="lauter" value="+"></td>
+</tr>
+<?% IF param.vdrlist.size > 1 %?>
+<tr>
+  <td colspan="3" align="center">
+      <select style="width:150px;" name="vdr">
+      <?% FOREACH l = param.vdrlist %?>
+          <option value='<?% l.1 %?>'<?% IF l.1 == param.vdr %?> selected<?% END %?>><?% l.0 %?></option>
+      <?% END %?>
+      </select>
+  </td>
+</tr>
+<?% ELSE %?>
+<tr>
+  <td colspan="7" align="center">
+  <input type="hidden" name="vdr" value="<?% param.vdr %?>" />
+  </td>
+</tr>
+<?% END %?>
+<tr>
+  <td colspan="3" align="center">
+      <select style="width:150px;" name="channels" onchange="post('?cmd=switch&amp;data='+ this.form.channels.options[this.form.channels.options.selectedIndex].value)">
+      <?% FOREACH l = param.channels %?>
+      <?% IF l.2 && l.2 != optgroup %?>
+        <?% IF optgroup %?>
+        </optgroup>
+        <?% END %?>
+        <optgroup label="<?% optgroup = l.2;l.2 %?>">
+      <?% END %?>
+          <option value='<?% l.1 %?>'><?% l.0 %?></option>
+      <?% END %?>
+      <?% IF optgroup %?>
+        </optgroup>
+      <?% END %?>
+      </select>
+  </td>
+</tr>
+<?% IF monitor %?>
+<tr>
+    <td align='center' colspan="3">
+        <input style='width:20px' name="grabinterval" type="text" size="2">
+        <input type="button" onclick="changeInterval(document.remoteform.grabinterval.value)" value="<?% gettext("Set") %?>">
+    </td>
+</tr>
+<?% END %?>
+</form>
+</table>
+<?% IF monitor %?>
+<script language="javascript" type="text/javascript">
+<!--
+document.remoteform.grabinterval.value = interval;
+//-->
+</script>
+<?% END %?>
diff --git a/skins/html/widgets/start.tmpl b/skins/html/widgets/start.tmpl
new file mode 100644
index 0000000..d1126af
--- /dev/null
+++ b/skins/html/widgets/start.tmpl
@@ -0,0 +1,30 @@
+<!DOCTYPE html
+	PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+	 "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title><?% IF param.title.defined;param.title;ELSE %?>XXV - <?% user %?><?% END %?></title>
+<?% IF allow('request') %?>
+    <link rel="alternate" type="application/rss+xml" title="RSS-News 1.0" href="?cmd=request&data=rss&__version=1">
+    <link rel="alternate" type="application/rss+xml" title="RSS-News 2.0" href="?cmd=request&data=rss&__version=2">
+<?% END %?>
+    <link rel="search" type="application/opensearchdescription+xml" href="?cmd=opensearch" title="<?% gettext("Search with XXV") %?>" />
+    <meta http-equiv="Content-Type" content="text/html; charset=<?% charset %?>">
+    <meta name="generator" content="XXV System - Version: <?% version %?>" />
+<!-- Styles -->
+    <link href="style/style.css" type="text/css" rel="stylesheet"   />
+<?% IF call == 'vtxpage' %?>
+    <link href="style/vtxgfx.css" type="text/css" rel="stylesheet" />
+<?% END %?>
+<!-- Javascript -->
+    <script type="text/javascript" src="javascript/global.js"></script>
+    <script type="text/javascript" src="javascript/XHConn.js"></script>
+    <script type="text/javascript" src="javascript/tooltip.js"></script>
+    <base target="Daten">
+</head>
+<body>
+
+<?% INCLUDE 'skin.cfg' %?>
+<?%# INCLUDE 'help.tmpl' %?>
+
+<div class="content">
diff --git a/skins/html/widgets/string.tmpl b/skins/html/widgets/string.tmpl
new file mode 100644
index 0000000..3faf4f4
--- /dev/null
+++ b/skins/html/widgets/string.tmpl
@@ -0,0 +1,16 @@
+<!-- string -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% val = cgi.param(data.NAME) || data.def %?>
+        <?% IF data.readonly %?>
+        <span<?% FOREACH p = param.tags; "$p ";END %?>>
+        <?% val %?>
+        </span>
+        <?% ELSE %?>
+        <input type="text" name="<?% data.NAME %?>" value="<?% val %?>" <?% FOREACH p = param.tags; "$p ";END %?>>
+        <?% END %?>
+    </td>
+</tr>
diff --git a/skins/html/widgets/table.tmpl b/skins/html/widgets/table.tmpl
new file mode 100644
index 0000000..01d1303
--- /dev/null
+++ b/skins/html/widgets/table.tmpl
@@ -0,0 +1,47 @@
+<p><p>
+<!-- TableTemplate -->
+<?% IF param.headingText %?>
+<table width=100%><tr><td class='tableheader'><h3><?% param.headingText %?></h3>
+<?% END %?>
+<table border="0" width="95%">
+<?% IF type == 'HASH' %?>
+    <?% IF ! param.hide_HeadRow %?>
+    <th width="1%">Name</th><th>Value</th>
+    <?% END %?>
+    <?% FOREACH name = data.keys.sort %?>
+    <?% NEXT IF name.match('^__') %?>
+    <tr>
+        <td width="50%"><?% name %?></td><td><?% data.$name %?></td>
+    </tr>
+    <?% END %?>
+<?% ELSE %?>
+    <?% fields = data.shift %?>
+        <tr>
+        <?% FOREACH field = fields %?>
+            <?% NEXT IF field.match('^__') %?>
+            <th>
+                <nobr><?% field %?>
+                <?% IF param.sortable %?>
+                <a href="?cmd=<?% cgi.param('cmd') %?>&__sortby=<?% field %?>&__desc=0"><img src="images/asc.png"></a>
+                <a href="?cmd=<?% cgi.param('cmd') %?>&__sortby=<?% field %?>&__desc=1"><img src="images/desc.png"></a>
+                <?% END %?>
+                </nobr>
+            </th>
+        <?% END %?>
+        </tr>
+        <?% FOREACH zeile = data %?>
+        <tr>
+            <?% c = -1 %?>
+            <?% FOREACH field = zeile %?>
+                <?% c = c + 1 %?>
+                <?% NEXT IF fields.$c.match('^__') %?>
+                <td><?% field %?></td>
+            <?% END %?>
+        </tr>
+        <?% END %?>
+<?% END %?>
+</table>
+<?% IF param.headingText %?>
+</td></tr></table>
+<p>
+<?% END %?>
diff --git a/skins/html/widgets/textfield.tmpl b/skins/html/widgets/textfield.tmpl
new file mode 100644
index 0000000..5ab4e7e
--- /dev/null
+++ b/skins/html/widgets/textfield.tmpl
@@ -0,0 +1,17 @@
+<!-- textfield -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% val = cgi.param(data.NAME) || data.def %?>
+        <?% IF data.readonly %?>
+        <span<?% FOREACH p = param.tags; "$p ";END %?>>
+        <?% val %?>
+        </span>
+        <?% ELSE %?>
+            <textarea cols='50' rows='5' name="<?% data.NAME %?>" <?% FOREACH p = param.tags; "$p ";END %?>><?%  val | replace("<br />","
+") %?></textarea>
+        <?% END %?>
+    </td>
+</tr>
diff --git a/skins/html/widgets/time.tmpl b/skins/html/widgets/time.tmpl
new file mode 100644
index 0000000..5519c0c
--- /dev/null
+++ b/skins/html/widgets/time.tmpl
@@ -0,0 +1,16 @@
+<!-- time -->
+<tr>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% data.msg %?>
+    </td>
+    <td class="<?% (param.count mod 2) == 0 ? 'light' : 'dark' %?>" >
+        <?% val = cgi.param(data.NAME) || data.def %?>
+        <?% IF data.readonly %?>
+        <span<?% FOREACH p = param.tags; "$p ";END %?>>
+        <?% val %?>
+        </span>
+        <?% ELSE %?>
+        <input type="text" name="<?% data.NAME %?>" value="<?% val %?>" <?% FOREACH p = param.tags; "$p ";END %?>>
+        <?% END %?>
+    </td>
+</tr>
diff --git a/skins/html/widgets/wait.tmpl b/skins/html/widgets/wait.tmpl
new file mode 100644
index 0000000..4d0b2a5
--- /dev/null
+++ b/skins/html/widgets/wait.tmpl
@@ -0,0 +1,34 @@
+<!DOCTYPE html
+	PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+	 "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>XXV</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=<?% charset %?>">
+    <meta name="copyright" content="copyright 2004 Xpix">
+<style type="text/css">
+<!--
+
+    <?% INCLUDE style/style.css %?>
+
+-->
+</style>
+</head>
+<body>
+<!-- WaitTemplate -->
+<?% percent = (data.current / data.maximum) * 100 %?>
+<?% step = data.maximum / data.steps %?>
+<?% c = 0 %?>
+<center>
+<h3><?% data.msg %?></h3>
+<table border=0 align=center>
+<?% WHILE c < data.steps %?>
+    <?% c = c + 1 %?>
+    <?% color = (step * c) <= data.current ? "red" : "white" %?>
+    <td bgcolor="<?% color %?>">&nbsp;&nbsp;&nbsp;</td>
+<?% END %?>
+    <td>&nbsp;<b><?% percent div 1 | format "%02d" %?>%</b> (<?% data.eta %?>)</td>
+</table>
+</center>
+</body>
+</html>