2006-06-26: 3.4.6beta4v3.4.6beta4

- Changed: CSS a little bit.
- Rewrote: prog_timeline to make it more dynamic (needs JavaScript) (Submitted by Torsten Herz).
- Changed: displaying of audio/video tracks in prog_details (Fixes weird EPG display behaviour).

5 files changed, 1199 insertions, 932 deletions

diff --git a/template/default/default/style.css b/template/default/default/style.css
deleted file mode 100644
index 2d41ac6..0000000
--- a/template/default/default/style.css
+++ /dev/null
@@ -1,715 +0,0 @@
-* {
-	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
-}
-
-#rc,
-#tv {
-	margin: 0px;
-}
-
-body {
-	background-color: #ffffff;
-	margin: 3px;
-	padding: 0;
-}
-
-form {
-	margin: 0px;
-	padding: 0;
-}
-
-td,
-div {
-	color: black;
-	font-weight: normal;
-	font-size: 11px;
-}
-
-input {
-	color: black;
-	font-weight: normal;
-	font-size: 11px;
-}
-
-textarea {
-	color: black;
-	font-weight: normal;
-	font-size: 11px;
-}
-
-select {
-	color: black;
-	font-weight: normal;
-	font-size: 11px;
-}
-/*
-.submit {
-	height: 20px;
-}*/
-
-h1 {
-	margin-right: 5px;
-	margin-left: 5px;
-	font-size: 13px;
-	font-weight: bold;
-	color: black;
-	display: inline;
-}
-h2 {
-	margin: 0px;
-	font-size: 11px;
-	font-weight: bold;
-	color: black;
-	display: inline;
-}
-h3,
-.epg_title {
-	margin: 0px;
-	font-size: 11px;
-	font-weight: bold;
-	color: black;
-}
-#prog_list .epg_title a {
-	margin: 0;
-	padding: 0;
-}
-.col_label h5 {
-	margin: 1px 5px;
-	font-size: 11px;
-	font-weight: normal;
-	color: black;
-	text-align: right;
-}
-h6 {
-	margin: 1px 5px;
-	font-size: 10px;
-	font-weight: normal;
-	color: black;
-	text-align: right;
-}
-
-label {
-	cursor: default;
-}
-
-a,
-a:visited,
-a:active,
-a:hover {
-	color: black;
-	text-decoration: none;
-}
-
-label + input {
-	margin-left: 1em;
-}
-
-#tv input,
-#tv select,
-#tv h5 {
-	font-weight: normal;
-	font-size: 9px;
-	display: inline;
-}
-#rec_list .col_name {
-	font-weight: bold;
-}
-
-#error h2 {
-	font-size: 11px;
-	color: red;
-}
-
-body.help .heading {
-	display: table-row;
-}
-
-.row_odd
-.row_even,
-.heading {
-	height: 17px;
-}
-.heading td {
-	background-color: #6d96a9;
-	xbackground-color: #2089e6; /*TODO*/
-	height: 17px;
-}
-.heading h2,
-.heading .channel_name,
-.heading a {
-	padding-left: 3px;
-	padding-right: 3px;
-	font-weight: bold;
-	color: white;
-	margin-top: 0px;
-	white-space: normal;
-}
-
-.row_even td {
-	background-color: #ffffff;
-}
-.row_odd td {
-	background-color: #dee6ee;
-}
-
-.col_label,
-.col_value,
-.col_active,
-.col_channel,
-.col_start,
-.col_stop,
-.col_date,
-.col_time {
-	padding-left: 3px;
-	padding-right: 3px;
-	white-space: nowrap;
-}
-
-.row_odd,
-.row_even {
-	height: 25px;
-}
-
-.col_channels {
-	text-align: right;
-	padding: 10px;
-	width: 40%;
-}
-
-.col_wanted_channels {
-	text-align: left;
-	padding: 10px;
-	width: 40%;
-}
-
-.col_navi {
-	text-align: right;
-	vertical-align: middle;
-	white-space: nowrap;
-	height: 17px;
-}
-
-.list,
-.group {
-	border: 1px solid #6d96a9;
-}
-.group td {
-	padding: 2px;
-}
-
-#prog_summary .action,
-#prog_detail .action {
-	display: block;
-	margin: 5px 0 0 0;
-}
-.action {
-	margin: 0;
-	padding 0;
-	text-align: center;
-	width: 20px;
-}
-
-/* Summary */
-#prog_summary .group {
-	margin: 0 3px 3px 0;
-	display: inline;
-	float: left;
-}
-#prog_summary .heading td.col_content {
-	height: 17px;
-	width: 246px;
-	color: white;
-	background-color: #6d96a9;
-	white-space: nowrap;
-	overflow: hidden;
-}
-#prog_summary .row_even td.col_content {
-	width: 246px;
-	height: 200px;
-	background-color: #dee6ee;
-	vertical-align: top;
-}
-#prog_summary table.content td.col_buttons {
-	height: 200px;
-}
-#prog_summary .col_epg {
-	vertical-align: top;
-}
-#prog_summary .date_long {
-	text-align: right;
-	margin-top: 3px;
-	float: left;
-}
-#prog_summary .time_duration {
-	text-align: right;
-	margin-top: 3px;
-}
-#prog_summary .epg_title {
-	margin-top: 1em;
-	width: 216px;
-	overflow: hidden;
-	white-space: nowrap;
-}
-#prog_summary .epg_subtitle {
-	width: 216px;
-	overflow: hidden;
-	white-space: nowrap;
-}
-#prog_summary .epg_summary {
-	margin-top: 1em;
-	margin-bottom: 3px;
-	width: 210px;
-	height: 120px;
-	overflow: auto;
-	white-space: normal;
-}
-#prog_summary .heading a {
-	font-weight: bold;
-	color: white;
-	padding: 2px 2px;
-}
-
-#prog_summary2 .newday {
-	height: 17px;
-	background-color: #6d96a9;
-}
-#prog_summary2 .newday td {
-	padding-left: 3px;
-	font-weight: bold;
-	color: white;
-}
-#prog_summary2 .epg_title,
-#prog_summary2 .channel_name {
-	display: block;
-}
-#prog_summary2 .epg_subtitle {
-	font-size: 11px;
-	font-weight: normal;
-	color: black;
-	display: block;
-}
-#prog_summary2 .col_buttons {
-	width: 120px;
-	text-align: right;
-	padding-right: 3px;
-	white-space: nowrap;
-}
-#prog_summary2 table.percent {
-	height: 8px;
-	width: 80px;
-	border: 1px solid #6d96a9;
-}
-#prog_summary2 table.percent .elapsed {
-	background-color: #6d96a9;
-}
-#prog_summary2 table.percent .remaining {
-	background-color: none;
-}
-
-#prog_detail .heading .col_content * {
-	color: white;
-	font-weight: bold;
-}
-#prog_detail .channel_name {
-	white-space: nowrap;
-}
-#prog_detail .date_long {
-	margin-left: 2em;
-	white-space: nowrap;
-}
-#prog_detail .time_vps,
-#prog_detail .time_duration {
-	margin-left: 2em;
-	white-space: nowrap;
-}
-#prog_detail .epg_title {
-	display: block;
-}
-#prog_detail .epg_subtitle {
-	font-size: 11px;
-	font-weight: normal;
-	color: black;
-	display: block;
-}
-#prog_detail .epg_summary {
-	margin: 2em 0;
-	display: block;
-}
-#prog_detail .epg_video h4,
-#prog_detail .epg_audio h4 {
-	margin: 0;
-	font-size: 10px;
-	font-weight: bold;
-}
-#prog_detail .epg_video h5,
-#prog_detail .epg_audio h5 {
-	margin-left: 1em;
-	display: inline;
-	font-size: 10px;
-	font-weight: normal;
-	font-style: italic;
-}
-#prog_detail .col_epg {
-	padding: 1em;
-}
-#prog_summary .row_even td.col_content,
-#prog_detail .row_even td.col_content {
-	padding: 0;
-}
-#prog_summary table.content td.col_buttons,
-#prog_detail table.content td.col_buttons {
-	padding-top: 1em;
-	vertical-align: top;
-	width: 20px;
-	text-align: center;
-	background-color: #dee6ee;
-	border-right: 1px solid #6d96a9;
-}
-
-#prog_list .heading td span,
-#prog_list .heading td {
-	vertical-align: bottom;
-}
-#prog_list .date_long {
-	color: white;
-	font-weight: bold;
-	padding: 0 2em;
-}
-#prog_list .col_buttons {
-	width: 40px;
-	text-align: right;
-	padding-right: 3px;
-	white-space: nowrap;
-}
-
-.col_duration {
-	padding-left: 3px;
-	padding-right: 3px;
-	width: 100px;
-	vertical-align: top;
-}
-	
-.col_name,
-#content .col_title * {
-	padding-left: 3px;
-	padding-right: 3px;
-	min-width: 50px;
-	white-space: normal;
-}
-.col_info,
-.col_record {
-	width: 16px;
-	text-align: center;
-}
-.col_active {
-	width: 90px;
-}
-.col_channel {
-	width: 120px;
-}
-.col_start,
-.col_stop,
-.col_date,
-.col_time {
-	width: 76px;
-	text-align: right;
-}
-.col_edit,
-.col_delete,
-.col_stream,
-.col_checkbox {
-	text-align: center;
-	width: 16px;
-	max-width: 16px;
-}
-
-#heading {
-	height: 29px;
-	border: 1px solid #6d96a9;
-}
-#heading tr {
-	vertical-align: middle;
-	background-color: #dee6ee;
-}
-#heading td {
-	vertical-align: middle;
-	padding: 0px 10px;
-}
-#heading .col_other {
-	text-align: right;
-}
-#heading .col_other table {
-	display: inline;
-}
-#heading .col_help {
-	text-align: center;
-	width: 45px;
-}
-
-#prog_timeline #content {
-	position: absolute;
-	top: 32px + 0.6em;
-	left: 3px;
-}
-#prog_timeline .prgtable {
-	border-color: #c4cdd7;
-}
-#prog_timeline .timertable {
-	background: red;
-	border-color: #ffcdd7;
-}
-#prog_timeline #timeline {
-	background: red;
-}
-#prog_timeline .color_current {
-	background-color: #e6ffe9;
-}
-#prog_timeline .color_broadcast {
-	background-color: #f7fffa;
-}
-#prog_timeline .color_timer {
-	background-color: #ffeee9;
-}
-#prog_timeline .col_spacer {
-	background-color: #e0e0e0;
-}
-#rec_list #path {
-	margin: 1em 10px 0px 10px;
-}
-#rec_edit .col_value {
-	white-space: normal;
-}
-
-#timer_list .list {
-	margin-top: 0.6em;
-}
-#timer_list .blackline {
-	background-color: black;
-}
-#timer_list .color_ok {
-	background-color: #00a317;
-}
-#timer_list .color_conflict {
-	background-color: #a11917;
-}
-#timer_list .color_collision {
-	background-color: #ffde62;
-}
-#timer_list .color_inactive {
-	background-color: #858585;
-}
-#timer_list #prgtable {
-	border-left-color: #000000;
-	border-right-color: #000000;
-}
-#prog_timeline .row_even table td.color1,
-#timer_list .row_even table td.color1 {
-	background-color: #ffffff;
-}
-#prog_timeline .row_even table td.color2,
-#timer_list .row_even table td.color2 {
-	background-color: #dee6ee;
-}
-#prog_timeline table.timestable td.color1 {
-	background-color: #ffffff;
-}
-#prog_timeline table.timestable td.color2 {
-	background-color: #dee6ee;
-}
-#vdr_cmds pre {
-	margin: 0px;
-	padding: 0px;
-}
-
-#content {
-	margin-top: 0.6em;
-}
-#buttons {
-	border: 1px solid #6d96a9;
-	padding: 3px;
-	margin-top: 1em;
-	margin-bottom: 1em;
-	background-color: #dee6ee;
-	text-align: right;
-}
-
-#config .heading {
-	background-color: #dee6ee;
-	border: none;
-}
-#config .heading a {
-	color: black;
-	font-weight: normal;
-}
-#config .group {
-	margin-top: 0.5em;
-	width: 100%;
-}
-#config .col_label {
-	width: 50%;
-}
-.tabs td {
-	padding: 0;
-	margin: 0;
-	background-color: transparent;
-	border-bottom: 2px solid #6d96a9;
-}
-.tab_selected a {
-	color: white;
-	margin: 1px 3px;
-}
-.tab_unselected a {
-	color: black;
-	margin: 1px 3px;
-}
-.tab_selected {
-	border-right: 1px solid #6d96a9;
-	background-color: #6d96a9;
-	color: white;
-	font-weight: bold;
-}
-.tab_unselected {
-	border-right: 1px solid #6d96a9;
-	background-color: white;
-	color: black;
-}
-#about .col_label {
-	width: 20%;
-}
-#about .col_label h5 {
-	white-space: nowrap;
-}
-
-select.channels {
-	min-width: 100px;
-}
-
-/* Tooltips */
-.tt_border {
-	border: 2px solid white;
-}
-.tt_table {
-	width: 250px;
-	border: 2px solid #6d96a9;
-	background-color: #dee6ee;
-}
-.tt_table th {
-	background-color: #6d96a9;
-	font-weight: bold;
-	color: white;
-	padding-left: 2px;
-	padding-right: 2px;
-}
-.tt_table td {
-	color: black;
-	padding-left: 5px;
-	padding-right: 5px;
-}
-
-/* Help */
-#help dt {
-	margin-top: 0.6em;
-	font-weight: bold;
-	font-style: italic;
-}
-#help dd dl dt {
-	margin-top: 0.3em;
-	font-weight: normal;
-	font-style: italic;
-}
-#help dl {
-	padding: 5px;
-}
-#help h3 {
-	font-weight: bold;
-	font-style: italic;
-	letter-spacing: 0.5em;
-	background-color: #6d96a9;
-	color: white;
-	padding: 2px 5px;
-}
-#help h4 {
-	text-decoration: underline;
-	font-style: normal;
-}
-#help strong {
-	font-weight: bold;
-}
-#help .ref_menu {
-	font-style: italic;
-}
-#help .ref_file {
-	text-decoration: underline;
-}
-#help .ref_label {
-	font-style: italic;
-}
-#help .links {
-	padding: 5px;
-	background-color: #dee6ee;
-	text-align: justify;
-}
-#help .links a {
-	white-space: nowrap;
-}
-#help a ,
-#help a:visited,
-#help a:active {
-	color: blue;
-}
-#help .group {
-	margin-top: 0.6em;
-	border: 1px solid #6d96a9;
-	white-space: normal;
-}
-#help .group p {
-	padding: 5px;
-}
-#help .top_link {
-	text-align: right;
-	font-size: 0.8em;
-	background-color: #dee6ee;
-	padding: 1px 5px;
-	margin: 0px;
-}
-
-/* Navigation */
-#navigation {
-	margin: 0px 3px;
-}
-#navigation .nav_bar {
-	border: 1px solid #6d96a9;
-	padding: 1em 0px;
-}
-#navigation .logo {
-	padding-top: 1em;
-	padding-bottom: 2em;
-	width: 150px;
-}
-#navigation .navi {
-	font-size: 12px;
-	padding-top: 6px;
-	padding-bottom: 6px;
-	text-align: center;
-}
-/*TODO Farbe */
-#navigation .navi:hover {
-	xbackground-color: #f0faff;
-	background-color: #dee6ee;
-}
-#navigation .search {
-	padding-top: 6px;
-	font-size: 12px;
-	text-align: center;
-}
-#navigation a,
-#navigation a:visited,
-#navigation a:active {
-	color: #6d96a9;
-	font-weight: bold;
-	text-decoration: none;
-	border: 0px;
-}
-#navigation input {
-	width: 140px;
-}
diff --git a/template/default/prog_detail.html b/template/default/prog_detail.html
index 8e3d6c4..9b6879b 100644
--- a/template/default/prog_detail.html
+++ b/template/default/prog_detail.html
@@ -53,24 +53,30 @@
 								<div class="epg_subtitle"><tmpl_var subtitle></div>
 							</tmpl_if>
 							<div class="epg_summary"><tmpl_var text></div>
-							<tmpl_if has_video>
+							<tmpl_if video>
 								<div class="epg_video">
 									<h4><%! Video tracks: !%></h4>
-									<tmpl_loop video>
+									<tmpl_var video>
+									<!--
+									<tmpl_loop videox>
 										<h5><%! Language: !%></h5> <tmpl_var lang> <h5><%! Format: !%></h5> <tmpl_var format><br />
 									</tmpl_loop>
+									-->
 								</div>
 							</tmpl_if>
-							<tmpl_if has_audio>
+							<tmpl_if audio>
 								<div class="epg_audio">
 									<h4><%! Audio tracks: !%></h4>
-									<tmpl_loop audio>
+									<tmpl_var audio>
+									<!--
+									<tmpl_loop audiox>
 										<h5><%! Language: !%></h5> <tmpl_var lang>
 										<tmpl_if descr>
 											<h5><%! Description: !%></h5> <tmpl_var descr>
 										</tmpl_if>
 										<br />
 									</tmpl_loop>
+									-->
 								</div>
 							</tmpl_if>
 							<tmpl_if epgimages>
diff --git a/template/default/prog_timeline.html b/template/default/prog_timeline.html
index c040918..406fe0d 100644
--- a/template/default/prog_timeline.html
+++ b/template/default/prog_timeline.html
@@ -15,13 +15,8 @@
 	USE date;

 	show_hours = config.ZEITRAHMEN || 1; # Zeitrahmen der angezeigt werden soll in Stunden

 	times      = config.TIMES.split(',\s*');

+	px_per_min = 3; # Make it configurable?

 	

-	# first_sec is the start time of the 24 hours interval in seconds since 1970

-	# last_sec  is the end   time of the 24 hours interval in seconds since 1970

-	first_sec = date.now + 1799 - show_hours * 3600

-	first_sec = first_sec - first_sec % 1800;

-	last_sec  = first_sec + 86400; 

-

 	# now_sec   is the requested browser time  in seconds since 1970

 	# start_sec is the start time of the table in seconds since 1970

 	# end_sec   is the end   time of the table in seconds since 1970

@@ -32,23 +27,9 @@
 	end_min = 60 * show_hours;

 	end_sec = start_sec + (end_min * 60);

 

-	name_w = 100;

-	min5_h = 10;

-

-	# Calculate suitable width for events dependent on the time interval

-	# 1 hour = 60min: 300px -> 5px/min

-	# 2 hours=120min: 600px -> 5px/min

-	# 3 hours=180min: 720px -> 4px/min

-	# 4 hours=240min: 720px -> 3px/min

-	# 5 hours=300min: 600px -> 2px/min

-	# 6 hours=360min: 720px -> 2px/min

-	event_w = show_hours * 300; 

-	IF event_w > 720; event_w = 720; END;

-	px_per_min = (event_w / end_min) | format('%i');

-	event_w = end_min * px_per_min;

 -%?>

 

-<!-- TimeLine: start_sec="<?% date.format(start_sec, '%H:%M:%S') %?>" now="<?% date.format(date.now, '%H:%M:%S') %?>" end_sec="<?% date.format(end_sec, '%H:%M:%S') %?>" -->

+<!-- TimeLine: start_sec="<?% date.format(start_sec, '%H:%M') %?>" request="<?% date.format(date.now, '%H:%M') %?>" end_sec="<?% date.format(end_sec, '%H:%M') %?>" -->

 	<style type="text/css">

 		table.prgname {

 			border-width:1px;

@@ -83,8 +64,78 @@
 		#bigtable { position:absolute; top:0; left: 0; z-index: 1; }

 	</style>

 

-	<script type="text/javascript" language="JavaScript">

-		function Go(x) {

+	<script type="text/javascript" language="JavaScript1.2">

+		var show_tooltips = <?% config.TL_TOOLTIP ? "true" : "false" %?>;

+	</script>

+<?% IF config.TL_TOOLTIP %?>

+	<script type="text/javascript" language="JavaScript1.2" src="infobox.js"></script>

+<?% END %?>

+	<script type="text/javascript" language="JavaScript1.2" src="timeline.js"></script>

+	<script type="text/javascript" language="JavaScript1.2">

+		var trans = new Translation("<%! now !%>", 

+		                          "<%! o'clock !%>", 

+		                          "<%! to !%>",

+		                          "<%! Sunday !%>",

+		                          "<%! Monday !%>",

+		                          "<%! Tuesday !%>",

+		                          "<%! Wednesday !%>",

+		                          "<%! Thursday !%>",

+		                          "<%! Friday !%>",

+		                          "<%! Saturday !%>");

+		

+		function GetWindowW() 

+		{

+			if (window.innerWidth) 

+			{

+				return window.innerWidth;

+			} 

+			else if (document.body && document.body.offsetWidth) 

+			{

+				return document.body.offsetWidth;

+			} 

+			else 

+			{

+				return 0;

+			}

+		}

+		

+		function GetWindowH() 

+		{

+			if (window.innerHeight) 

+			{

+				return window.innerHeight;

+			} 

+			else if (document.body && document.body.offsetHeight) 

+			{

+				return document.body.offsetHeight;

+			} 

+			else 

+			{

+				return 0;

+			}

+		}

+		

+		function Redraw() 

+		{

+			if (redraw_w != GetWindowW() || redraw_h != GetWindowH())

+			{

+				Go('<?% nowurl %?>&time=<?% date.format(now_sec, '%H:%M') %?>');

+			}

+		}

+		

+		function AddEvent(counter, vdr_id, epg_id, start_sec, stop_sec, title, timer, summary)

+		{

+			var e = new EPGEvent(epg_id, start_sec, stop_sec, title, timer, summary);

+<?% IF config.TL_TOOLTIP %?>

+			maketip("VDR-" + vdr_id + "-" + counter, title, 

+					 "<%! Duration: !%> " + e.start_str + " - " + e.stop_str

+					 + " (" + Div(stop_sec - start_sec, 60) + " <%! min !%>)");

+<?% END %?>

+			return e;

+		}

+		

+		function Go(x) 

+		{

 			if(x =="nothing") {

 				document.forms[0].reset();

 				document.forms[0].elements[0].blur();

@@ -95,28 +146,39 @@
 			}

 		}

 	</script>

-<?% IF config.TL_TOOLTIP %?>

-	<script type="text/javascript" language="JavaScript1.2" src="infobox.js"></script>

-<?% END %?>

 </head>

 

 <body id="prog_timeline">

 <?% IF config.TL_TOOLTIP %?>

 	<div id="infodiv" style="position:absolute; visibility:hidden; z-index:20; top:0px; left:0px;"></div>

-	<script language="JavaScript" type="text/javascript">

-	<?%

+<?% END %?>

+	<script type="text/javascript" language="JavaScript">

+		window.onresize = Redraw;

+		redraw_w = GetWindowW();

+		redraw_h = GetWindowH();

+

+		var channels = new Array();

+		var events;

+<?%

+      index = 0;

 		FOREACH name = shows2.keys.nsort;

 			counter = 0;

+%?>

+			events = new Array();

+<?%

 			FOREACH show = shows2.${name};

-	%?>

-				maketip("VDR-<?% show.vdr_id %?>-<?% counter %?>", "<?% show.title %?>", "<%! Duration: !%> <?% date.format(show.start, '%H:%M') %?> - <?% date.format(show.stop, '%H:%M') %?> (<?% (show.stop - show.start) / 60 %?> <%! min !%>)" );

-	<?%

+%?>

+				events[<?% counter %?>] = AddEvent(<?% counter %?>, <?% show.vdr_id %?>, <?% show.anchor %?>, <?% show.start %?>, <?% show.stop %?>, "<?% show.title %?>", <?% show.timer %?>, <?% show.summary ? 1 : 0 %?>);

+<?%

 				counter = counter + 1;

 			END;

+%?>

+			channels[<?% index %?>] = new ChannelInfo(<?% show.vdr_id %?>, "<?% shows.${name}.first.progname %?>", "<?% shows.${name}.first.proglink %?>", events);

+<?%

+			index = index + 1;

 		END;

-	%?>

+%?>

 	</script>

-<?% END %?>

 

 	<form action="<?% nowurl %?>" method="get" name="FormName">

 		<table width="100%" border="0" cellspacing="0" cellpadding="0" id="heading">

@@ -143,185 +205,10 @@
 			</tr>

 		</table>

 

-

-		<div id="content">

-<!-- TimeLine Table TOP -->

- 			<table width="<?% event_w + name_w %?>" border="0" cellspacing="0" cellpadding="0" class="bigtable list">

-				<tr class="heading">

-					<td colspan="3">

-						<h2><?% date.format(start_sec, '%A, %H:%M') %?>&nbsp;<%! o'clock !%>&nbsp;<%! to !%>&nbsp;<?% date.format(end_sec, '%H:%M') %?>&nbsp;<%! o'clock !%></h2>

-						<br/>

-					</td>

-					<td class="col_navi">

-<?% IF start_sec < first_sec + 1800 %?>

-							<img src="bilder/pfeile_nachlinks_soft.png" border="0" />

-<?% 

-	ELSE;

-		diff_sec = start_sec - end_min * 60;

-		IF (diff_sec < first_sec);

-			diff_sec = first_sec;

-		END;

-%?>

-							<a href="<?% nowurl %?>&amp;time=<?% date.format(diff_sec, '%H:%M') %?>">

-								<img src="bilder/pfeile_nachlinks.png" border="0" />

-							</a>

-<?% END %?>

-<?% IF end_sec > last_sec - 1800 %?>

-							<img src="bilder/pfeile_nachrechts_soft.png" border="0" />

-<?% 

-	ELSE;

-		diff_sec = end_sec;

-		IF (diff_sec > last_sec - end_min * 60 - 1800);

-			diff_sec = last_sec - end_min * 60;

-		END;

-%?>

-						<a href="<?% nowurl %?>&amp;time=<?% date.format(diff_sec, '%H:%M') %?>">

-							<img src="bilder/pfeile_nachrechts.png" border="0" />

-						</a>

-<?% END %?>

-					</td>

-				</tr>

-				<tr id="row_timeline" class="row_even">

-					<td colspan="4">

-						<table border="0" cellpadding="0" cellspacing="0" width="<?% name_w + event_w %?>" class="timestable">

-							<tr>

-								<td><img src="bilder/spacer.gif" width="<?% name_w %?>" height="1" border="0" /></td>

-<?% minute = 0 %?>

-<?% WHILE minute < end_min %?>

-								<td colspan="6" class="<?% minute % 60 ? 'color1' : 'color2' %?>">

-									<img src="bilder/spacer.gif" width="<?% px_per_min * 30 %?>" height="1" border="0" /><br />

-	<?% zeit = start_sec + (minute * 60) %?>

-									<span class="date_time"><?% date.format(zeit, '%H:%M') %?></span>

-								</td>

-	<?% minute = minute + 30 %?> 

-<?% END %?>

-							</tr>

-							<tr>

-								<td><img src="bilder/spacer.gif" width="<?% name_w %?>" height="1" border="0" /></td>

-<?% minute = 0 %?>

-<?% WHILE minute < end_min %?>

-								<td width="<?% px_per_min * 5 %?>" height="<?% min5_h %?>" class="<?% minute % 10 ? 'color1' : 'color2' %?>">

- 									<img src="bilder/spacer.gif" width="<?% px_per_min * 5 %?>" height="1" border="0" /><br />

-								</td>

-	<?% minute = minute + 5 %?> 

-<?% END %?>

-							</tr>

-						</table>

-

-						<table border="0" cellpadding="0" cellspacing="0" width="<?% name_w + event_w %?>" class="prgname">

-<?% b = 0;

-	FOREACH name = shows.keys.nsort; 

-		b = b + 1 %?>

-							<tr>

-<!-- Channel: "<?% shows.${name}.first.progname %?>" -->

-								<td width="<?% name_w %?>" class="prgname <?% b % 2 ? 'color2' : 'color1' %?>">

-									<img src="bilder/spacer.gif" width="<?% name_w %?>" height="1" border="0" /><br />

-									<nobr><a href="<?% shows.${name}.first.proglink %?>" class="channel_name"><?% shows.${name}.first.progname %?></a></nobr>

-								</td>

-<!-- Events -->

-								<td class="<?% b % 2 ? 'color2' : 'color1' %?>">

-									<nobr>

-<?%

-		counter = 0;

-		old_stop_minute = 0;

-		FOREACH show = shows.${name}; 

-			start_minute = (show.start - start_sec) / 60 | format('%i');

-			stop_minute = (show.stop - start_sec) / 60 | format('%i');

-			IF (start_minute >= end_min); BREAK; END;

-%?>

-	<!-- <?% show.vdr_id %?>-<?% counter %?>: <?% date.format(show.start, '%H:%M:%S') %?>..<?% date.format(show.stop, '%H:%M:%S') %?> "<?% show.title %?>" -->

-	<!-- ---- old_stop	=<?% old_stop_minute %?>	end_min	=<?% end_min %?> -->

-	<!-- ---- start		=<?% start_minute %?>	stop	=<?% stop_minute %?>  -->

-<?%

-			IF start_minute < 0; start_minute = 0; END;

-			IF stop_minute  > end_min; stop_minute  = end_min; END;

-

-			px_w = (stop_minute - start_minute) * px_per_min;

-

-			IF show.timer; 

-				td_class = "color_timer";

-			ELSE;

-				td_class = date.now >= show.start && date.now < show.stop ? "color_current" : "color_broadcast";

-			END;

-%?>	<!-- ---- start		=<?% start_minute %?>	stop	=<?% stop_minute %?> -->

-<?%

-			IF (start_minute >= old_stop_minute);

-				IF (start_minute  > old_stop_minute + 1);

-					diff = (start_minute - old_stop_minute) * px_per_min;

-%?>	<!-- ---- Time gap detected: fill in space -->

-									<table border="0" align="left" cellpadding="0" cellspacing="0" width="<?% diff %?>" class="prgtable">

-										<tr>

-											<td width="1" class="color_spacer">

-												<img src="bilder/spacer.gif" width="1" height="1" border="0" /><br/>

-												<nobr>

-													<img src="bilder/spacer.gif" width="1" height="8" border="0" />

-												</nobr>

-											</td>

-										</tr>

-									</table>

-<?% 			END 

-%?>	<!-- ---- Show event title: "<?% show.title %?>" -->

-									<table border="0" align="left" cellpadding="0" cellspacing="0" width="<?% px_w %?>" class="<?% show.timer ? "timertable" : "prgtable" %?>">

-										<tr>

-											<td width="1" class="<?% td_class %?>" <?% IF config.TL_TOOLTIP %?>onMouseOver="tip('VDR-<?% show.vdr_id %?>-<?% counter %?>'); return true;" onMouseOut="untip(); return true;"<?% END %?>>

-												<img src="bilder/spacer.gif" width="1" height="1" border="0" /><br />

-												<nobr>

-													<?% IF show.summary %?>

-														<a href="javascript:popup('./vdradmin.pl?aktion=prog_detail&amp;epg_id=<?% show.anchor %?>&amp;vdr_id=<?% show.vdr_id %?>');">

-															<?% show.title %?>

-														</a>

-													<?% ELSE %?>

-														<?% show.title %?>

-													<?% END %?>

-												</nobr>

-											</td>

-										</tr>

-									</table>

-<?% 

-				old_stop_minute = stop_minute;

-			ELSE

-%?>	<!-- ---- Overlapped by previous event: ignored -->

-<?% 

-			END;

-			counter = counter + 1;

-		END %?>

-									</nobr>

-								</td>

-							</tr>

-<?% END %?>

-						</table>

-					</td>

-

-				</tr>

-			</table>

-<!-- TimeLine Table BOTTOM -->

-

-<?% IF (date.now >= start_sec) && (date.now < end_sec) %?>

-	<?% diff = ((date.now - start_sec) / 60) | format('%i') %?> 

-			<script type="text/javascript" language="JavaScript">

-				var tab = document.getElementById("row_timeline");

-				if (tab)

-				{

-					var y = tab.offsetTop;

-					var h = tab.offsetHeight;

-					var style = "position:absolute; "

-								 + "top:" + y + "px; "

-								 + "left:<?% name_w + (px_per_min * diff) + 1 %?>px; "

-								 + "width:1px; "

-								 + "height:" + h + "px; "

-								 + "z-index:2; ";

-					if (document.all)

-					{

-						style = style + "filter:Alpha(opacity=50); ";

-					}

-

-					document.write('<span id="timeline" style="' + style + '">');

-					document.write('   <img src="bilder/spacer.gif" width="1" height="1" border="0" />');

-					document.write('</span>');

-				}

-			</script>

-<?% END %?>

-		</div>

+		<script type="text/javascript" language="JavaScript1.2">

+			var tl = new TimeLine(<?% now_sec %?>, "<?% nowurl %?>", <?% px_per_min %?>, <?% end_min %?>);

+			BuildContent();

+		</script>

 	</form>

 </body>

 </html>

diff --git a/template/default/style.css b/template/default/style.css
index 7da68a3..4dc51e9 120000..100644
--- a/template/default/style.css
+++ b/template/default/style.css
@@ -1 +1,731 @@
-default/style.css
\ No newline at end of file
+* {
+	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
+}
+
+#rc,
+#tv {
+	margin: 0px;
+}
+
+body {
+	background-color: #ffffff;
+	margin: 3px;
+	padding: 0;
+}
+
+form {
+	margin: 0px;
+	padding: 0;
+}
+
+td,
+div {
+	color: black;
+	font-weight: normal;
+	font-size: 11px;
+}
+
+input {
+	color: black;
+	font-weight: normal;
+	font-size: 11px;
+}
+
+textarea {
+	color: black;
+	font-weight: normal;
+	font-size: 11px;
+}
+
+select {
+	color: black;
+	font-weight: normal;
+	font-size: 11px;
+}
+img {
+	border: 0;
+}
+/*
+.submit {
+	height: 20px;
+}*/
+
+h1 {
+	margin-right: 5px;
+	margin-left: 5px;
+	font-size: 13px;
+	font-weight: bold;
+	color: black;
+	display: inline;
+}
+h2 {
+	margin: 0px;
+	font-size: 11px;
+	font-weight: bold;
+	color: black;
+	display: inline;
+}
+h3,
+.epg_title {
+	margin: 0px;
+	font-size: 11px;
+	font-weight: bold;
+	color: black;
+}
+#prog_list .epg_title a {
+	margin: 0;
+	padding: 0;
+}
+.col_label h5 {
+	margin: 1px 5px;
+	font-size: 11px;
+	font-weight: normal;
+	color: black;
+	text-align: right;
+}
+h6 {
+	margin: 1px 5px;
+	font-size: 10px;
+	font-weight: normal;
+	color: black;
+	text-align: right;
+}
+
+label {
+	cursor: default;
+}
+
+a,
+a:visited,
+a:active,
+a:hover {
+	color: black;
+	text-decoration: none;
+}
+
+label + input {
+	margin-left: 1em;
+}
+
+#tv input,
+#tv select,
+#tv h5 {
+	font-weight: normal;
+	font-size: 9px;
+	display: inline;
+}
+#rec_list .col_name {
+	font-weight: bold;
+}
+
+#error h2 {
+	font-size: 11px;
+	color: red;
+}
+
+body.help .heading {
+	display: table-row;
+}
+
+.row_odd
+.row_even,
+.heading {
+	height: 17px;
+}
+.heading td {
+	background-color: #6d96a9;
+	height: 17px;
+}
+.heading h2,
+.heading .channel_name,
+.heading a {
+	padding-left: 3px;
+	padding-right: 3px;
+	font-weight: bold;
+	color: white;
+	margin-top: 0px;
+	white-space: normal;
+}
+
+.row_even td {
+	background-color: #ffffff;
+}
+.row_odd td {
+	background-color: #dee6ee;
+}
+
+.col_label,
+.col_value,
+.col_active,
+.col_channel,
+.col_start,
+.col_stop,
+.col_date,
+.col_time {
+	padding-left: 3px;
+	padding-right: 3px;
+	white-space: nowrap;
+}
+
+.row_odd,
+.row_even {
+	height: 25px;
+}
+
+.col_channels {
+	text-align: right;
+	padding: 10px;
+	width: 40%;
+}
+
+.col_wanted_channels {
+	text-align: left;
+	padding: 10px;
+	width: 40%;
+}
+
+.col_navi img,
+.col_navi a {
+	padding: 0;
+	margin: 0;
+}
+.col_navi {
+	text-align: right;
+	vertical-align: middle;
+	white-space: nowrap;
+	height: 17px;
+}
+
+.list,
+.group {
+	border: 1px solid #6d96a9;
+}
+.group td {
+	padding: 2px;
+}
+
+#prog_summary .action,
+#prog_detail .action {
+	display: block;
+	margin: 5px 0 0 0;
+}
+.action a,
+.action img,
+.heading img,
+.heading .action {
+	margin: 0;
+	padding: 0;
+}
+.action {
+	margin: 0;
+	padding: 0;
+	text-align: center;
+	width: 20px;
+}
+
+/* Summary */
+#prog_summary .group {
+	margin: 0 3px 3px 0;
+	display: inline;
+	float: left;
+}
+#prog_summary .heading td.col_content {
+	height: 17px;
+	width: 246px;
+	color: white;
+	background-color: #6d96a9;
+	white-space: nowrap;
+	overflow: hidden;
+}
+#prog_summary .row_even td.col_content {
+	width: 246px;
+	height: 200px;
+	background-color: #dee6ee;
+	vertical-align: top;
+}
+#prog_summary table.content td.col_buttons {
+	height: 200px;
+}
+#prog_summary .col_epg {
+	vertical-align: top;
+}
+#prog_summary .date_long {
+	text-align: right;
+	margin-top: 3px;
+	float: left;
+}
+#prog_summary .time_duration {
+	text-align: right;
+	margin-top: 3px;
+}
+#prog_summary .epg_title {
+	margin-top: 1em;
+	width: 216px;
+	overflow: hidden;
+	white-space: nowrap;
+}
+#prog_summary .epg_subtitle {
+	width: 216px;
+	overflow: hidden;
+	white-space: nowrap;
+}
+#prog_summary .epg_summary {
+	margin-top: 1em;
+	margin-bottom: 3px;
+	width: 210px;
+	height: 120px;
+	overflow: auto;
+	white-space: normal;
+}
+#prog_summary .heading a {
+	font-weight: bold;
+	color: white;
+	padding: 2px 2px;
+}
+
+#prog_summary2 .newday {
+	height: 17px;
+	background-color: #6d96a9;
+}
+#prog_summary2 .newday td {
+	padding-left: 3px;
+	font-weight: bold;
+	color: white;
+}
+#prog_summary2 .epg_title,
+#prog_summary2 .channel_name {
+	display: block;
+}
+#prog_summary2 .epg_subtitle {
+	font-size: 11px;
+	font-weight: normal;
+	color: black;
+	display: block;
+}
+#prog_summary2 .col_buttons {
+	width: 120px;
+	text-align: right;
+	padding-right: 3px;
+	white-space: nowrap;
+}
+#prog_summary2 table.percent {
+	height: 8px;
+	width: 80px;
+	border: 1px solid #6d96a9;
+}
+#prog_summary2 table.percent .elapsed {
+	background-color: #6d96a9;
+}
+#prog_summary2 table.percent .remaining {
+	background-color: none;
+}
+
+#prog_detail .heading .col_content * {
+	color: white;
+	font-weight: bold;
+}
+#prog_detail .channel_name {
+	white-space: nowrap;
+}
+#prog_detail .date_long {
+	margin-left: 2em;
+	white-space: nowrap;
+}
+#prog_detail .time_vps,
+#prog_detail .time_duration {
+	margin-left: 2em;
+	white-space: nowrap;
+}
+#prog_detail .epg_title {
+	display: block;
+}
+#prog_detail .epg_subtitle {
+	font-size: 11px;
+	font-weight: normal;
+	color: black;
+	display: block;
+}
+#prog_detail .epg_summary {
+	margin: 2em 0;
+	display: block;
+}
+#prog_detail .epg_video h4,
+#prog_detail .epg_audio h4 {
+	margin: 0;
+	font-size: 10px;
+	font-weight: bold;
+	display: inline;
+}
+#prog_detail .epg_video h5,
+#prog_detail .epg_audio h5 {
+	margin-left: 1em;
+	display: inline;
+	font-size: 10px;
+	font-weight: normal;
+	font-style: italic;
+}
+#prog_detail .col_epg {
+	padding: 1em;
+}
+#prog_summary .row_even td.col_content,
+#prog_detail .row_even td.col_content {
+	padding: 0;
+}
+#prog_summary table.content td.col_buttons,
+#prog_detail table.content td.col_buttons {
+	padding-top: 1em;
+	vertical-align: top;
+	width: 20px;
+	text-align: center;
+	background-color: #dee6ee;
+	border-right: 1px solid #6d96a9;
+}
+
+.heading,
+#prog_list .heading td span,
+#prog_list .heading td {
+	vertical-align: middle;
+}
+#prog_list .date_long {
+	color: white;
+	font-weight: bold;
+	padding: 0 2em;
+}
+#prog_list .col_buttons {
+	width: 120px;
+	text-align: right;
+	padding-right: 3px;
+	white-space: nowrap;
+}
+
+.col_duration {
+	padding-left: 3px;
+	padding-right: 3px;
+	width: 100px;
+	vertical-align: top;
+}
+	
+.col_name,
+#content .col_title * {
+	padding-left: 3px;
+	padding-right: 3px;
+	min-width: 50px;
+	white-space: normal;
+}
+.col_info,
+.col_record {
+	width: 16px;
+	text-align: center;
+}
+.col_active {
+	width: 90px;
+}
+.col_channel {
+	width: 120px;
+}
+.col_start,
+.col_stop,
+.col_date,
+.col_time {
+	width: 76px;
+	text-align: right;
+}
+.col_edit,
+.col_delete,
+.col_stream,
+.col_checkbox {
+	text-align: center;
+	width: 16px;
+	max-width: 16px;
+}
+
+#heading {
+	height: 29px;
+	border: 1px solid #6d96a9;
+}
+#heading tr {
+	vertical-align: middle;
+	background-color: #dee6ee;
+}
+#heading td {
+	vertical-align: middle;
+	padding: 0px 10px;
+}
+#heading .col_other {
+	text-align: right;
+}
+#heading .col_other table {
+	display: inline;
+}
+#heading .col_help {
+	text-align: center;
+	width: 45px;
+}
+
+#prog_timeline #content {
+	position: absolute;
+	top: 32px;
+	left: 3px;
+}
+#prog_timeline .prgtable {
+	border-color: #c4cdd7;
+}
+#prog_timeline .timertable {
+	background: red;
+	border-color: #ffcdd7;
+}
+#prog_timeline #timeline {
+	background: red;
+}
+#prog_timeline .color_current {
+	background-color: #e6ffe9;
+}
+#prog_timeline .color_broadcast {
+	background-color: #f7fffa;
+}
+#prog_timeline .color_timer {
+	background-color: #ffeee9;
+}
+#prog_timeline .color_spacer {
+	background-color: #e0e0e0;
+}
+#rec_list #path {
+	margin: 1em 10px 0px 10px;
+}
+#rec_edit .col_value {
+	white-space: normal;
+}
+
+#timer_list .list {
+	margin-top: 0.6em;
+}
+#timer_list .blackline {
+	background-color: black;
+}
+#timer_list .color_ok {
+	background-color: #00a317;
+}
+#timer_list .color_conflict {
+	background-color: #a11917;
+}
+#timer_list .color_collision {
+	background-color: #ffde62;
+}
+#timer_list .color_inactive {
+	background-color: #858585;
+}
+#timer_list #prgtable {
+	border-left-color: #000000;
+	border-right-color: #000000;
+}
+#prog_timeline .row_even table td.color1,
+#timer_list .row_even table td.color1 {
+	background-color: #ffffff;
+}
+#prog_timeline .row_even table td.color2,
+#timer_list .row_even table td.color2 {
+	background-color: #dee6ee;
+}
+#prog_timeline table.timestable td.color1 {
+	background-color: #ffffff;
+}
+#prog_timeline table.timestable td.color2 {
+	background-color: #dee6ee;
+}
+#vdr_cmds pre {
+	margin: 0px;
+	padding: 0px;
+}
+
+#content {
+	margin-top: 0.6em;
+}
+#buttons {
+	border: 1px solid #6d96a9;
+	padding: 3px;
+	margin-top: 1em;
+	margin-bottom: 1em;
+	background-color: #dee6ee;
+	text-align: right;
+}
+
+#config .heading {
+	background-color: #dee6ee;
+	border: none;
+}
+#config .heading a {
+	color: black;
+	font-weight: normal;
+}
+#config .group {
+	margin-top: 0.5em;
+	width: 100%;
+}
+#config .col_label {
+	width: 50%;
+}
+.tabs td {
+	padding: 0;
+	margin: 0;
+	background-color: transparent;
+	border-bottom: 2px solid #6d96a9;
+}
+.tab_selected a {
+	color: white;
+	margin: 1px 3px;
+}
+.tab_unselected a {
+	color: black;
+	margin: 1px 3px;
+}
+.tab_selected {
+	border-right: 1px solid #6d96a9;
+	background-color: #6d96a9;
+	color: white;
+	font-weight: bold;
+}
+.tab_unselected {
+	border-right: 1px solid #6d96a9;
+	background-color: white;
+	color: black;
+}
+#about .col_label {
+	width: 20%;
+}
+#about .col_label h5 {
+	white-space: nowrap;
+}
+
+select.channels {
+	min-width: 100px;
+}
+
+/* Tooltips */
+.tt_border {
+	border: 2px solid white;
+}
+.tt_table {
+	width: 250px;
+	border: 2px solid #6d96a9;
+	background-color: #dee6ee;
+}
+.tt_table th {
+	background-color: #6d96a9;
+	font-weight: bold;
+	color: white;
+	padding-left: 2px;
+	padding-right: 2px;
+}
+.tt_table td {
+	color: black;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+/* Help */
+#help dt {
+	margin-top: 0.6em;
+	font-weight: bold;
+	font-style: italic;
+}
+#help dd dl dt {
+	margin-top: 0.3em;
+	font-weight: normal;
+	font-style: italic;
+}
+#help dl {
+	padding: 5px;
+}
+#help h3 {
+	font-weight: bold;
+	font-style: italic;
+	letter-spacing: 0.5em;
+	background-color: #6d96a9;
+	color: white;
+	padding: 2px 5px;
+}
+#help h4 {
+	text-decoration: underline;
+	font-style: normal;
+}
+#help strong {
+	font-weight: bold;
+}
+#help .ref_menu {
+	font-style: italic;
+}
+#help .ref_file {
+	text-decoration: underline;
+}
+#help .ref_label {
+	font-style: italic;
+}
+#help .links {
+	padding: 5px;
+	background-color: #dee6ee;
+	text-align: justify;
+}
+#help .links a {
+	white-space: nowrap;
+}
+#help a ,
+#help a:visited,
+#help a:active {
+	color: blue;
+}
+#help .group {
+	margin-top: 0.6em;
+	border: 1px solid #6d96a9;
+	white-space: normal;
+}
+#help .group p {
+	padding: 5px;
+}
+#help .top_link {
+	text-align: right;
+	font-size: 0.8em;
+	background-color: #dee6ee;
+	padding: 1px 5px;
+	margin: 0px;
+}
+
+/* Navigation */
+#navigation {
+	margin: 0px 3px;
+}
+#navigation .nav_bar {
+	border: 1px solid #6d96a9;
+	padding: 1em 0px;
+}
+#navigation .logo {
+	padding-top: 1em;
+	padding-bottom: 2em;
+	width: 150px;
+}
+#navigation .navi {
+	font-size: 12px;
+	padding-top: 6px;
+	padding-bottom: 6px;
+	text-align: center;
+}
+/*TODO Farbe */
+#navigation .navi:hover {
+	xbackground-color: #f0faff;
+	background-color: #dee6ee;
+}
+#navigation .search {
+	padding-top: 6px;
+	font-size: 12px;
+	text-align: center;
+}
+#navigation a,
+#navigation a:visited,
+#navigation a:active {
+	color: #6d96a9;
+	font-weight: bold;
+	text-decoration: none;
+	border: 0px;
+}
+#navigation input {
+	width: 140px;
+}
diff --git a/template/default/timeline.js b/template/default/timeline.js
new file mode 100644
index 0000000..4cd9e29
--- /dev/null
+++ b/template/default/timeline.js
@@ -0,0 +1,359 @@
+/*##########################################################################*/

+/* Utility functions                                                        */

+/*##########################################################################*/

+function W(s)

+{

+   document.write(s);

+}

+

+function Div(x, y)

+{

+   return (x - x % y) / y;

+}

+

+function Translation(_now, _o_clock, _to, 

+                     _sunday, _monday, _tuesday, _wednesday, 

+                     _thursday, _friday, _saturday)

+{

+   this.now = _now;

+   this.o_clock = _o_clock;

+   this.to = _to;

+   this.week_day = new Array(_sunday, _monday, _tuesday, _wednesday, 

+                             _thursday, _friday, _saturday);

+}

+

+function ChannelInfo(vdr_id, name, url, events)

+{

+   this.vdr_id = vdr_id;

+   this.name = name;

+   this.url = url;

+   this.events = events;

+}

+

+function EPGEvent(epg_id, start_sec, stop_sec, title, timer, summary)

+{

+   this.epg_id = epg_id;

+   this.start_sec = start_sec;

+   this.stop_sec = stop_sec;

+   this.start_str = format_date('%H:%M', start_sec);

+   this.stop_str = format_date('%H:%M', stop_sec);

+   this.title = title;

+   this.timer = timer;

+   this.summary = summary;

+}

+

+function format_date(fmt, time)

+{	

+   var date = new Date(time * 1000);

+   switch (fmt)

+   {

+      case "%H:%M":

+      {

+         var h = '0' + date.getHours();

+         var m = '0' + date.getMinutes();

+         return h.substr(h.length-2, 2) + ':' + m.substr(m.length-2, 2);

+      }

+      case "%A, %H:%M":

+      {

+         var d = trans.week_day[date.getDay()];

+         var h = '0' + date.getHours();

+         var m = '0' + date.getMinutes();

+         return d + ", " + h.substr(h.length-2, 2) + ':' + m.substr(m.length-2, 2);

+      }

+   }

+   return "[WRONG_FMT:" + fmt + "]";

+}

+

+function TimeLine(_req_sec, _now_url, _px_per_min, _end_min)

+{

+   this.now_url = _now_url;

+   

+   this.name_w = 100;

+   var tab = document.getElementById("heading");

+   if (tab)

+   {

+      this.table_w = tab.clientWidth;

+   }

+   else

+   {

+      this.table_w = this.innerWidth - 8;

+   }

+   this.px_per_min = _px_per_min;

+   

+   this.end_min = Div(this.table_w - this.name_w, this.px_per_min);

+   if (this.end_min > _end_min)

+   {

+      this.end_min = _end_min;

+   }

+   this.end_min -= this.end_min % 30;

+   this.event_w = this.end_min * this.px_per_min;

+   this.name_w = this.table_w - this.event_w;

+   this.min5_h = 10;

+   

+   var d = new Date();

+   this.now_sec = Div(d.getTime(), 1000);

+   

+   this.req_sec = _req_sec;

+   this.start_sec = _req_sec - _req_sec % 1800;

+   this.end_sec = this.start_sec + this.end_min * 60;

+   

+   this.first_sec = this.now_sec + 1799 - this.end_min * 60;

+   this.first_sec -= this.first_sec % 1800;

+   this.last_sec = this.first_sec + 86400;

+}

+

+

+/*##########################################################################*/

+/* Build the HTML code                                                      */

+/*##########################################################################*/

+function BuildContent()

+{

+   W('<div id="content">');

+   

+      W('<table width="' + tl.table_w + '" border="0" cellspacing="0" cellpadding="0" class="bigtable list">');

+         BuildHeader();

+         BuildTable();

+      W('</table>');

+   

+      DrawTimeLine();

+   W('</div>');

+}

+

+function BuildHeader()

+{

+   W('<tr class="heading">');

+      W('<td id="header_title" colspan="3">');

+         W('<h2>');

+            W(format_date('%A, %H:%M', tl.start_sec) + '&nbsp;' + trans.o_clock 

+              + '&nbsp;' + trans.to + '&nbsp;' 

+              + format_date('%H:%M', tl.end_sec) + '&nbsp;' + trans.o_clock);

+         W('</h2>');

+         W('<br/>');

+      W('</td>');

+      W('<td id="header_navi" class="col_navi">');

+      if (tl.start_sec < tl.first_sec + 1800)

+      {

+         W('<img src="bilder/pfeile_nachlinks_soft.png" border="0" />');

+      }

+      else

+      {

+         var diff_sec = tl.start_sec - tl.end_min * 60;

+         if (diff_sec < tl.first_sec)

+         {

+            diff_sec = tl.first_sec;

+         }

+         W('<a href="' + tl.now_url + '&amp;time=' + format_date('%H:%M', diff_sec) + '">');

+            W('<img src="bilder/pfeile_nachlinks.png" border="0" />');

+         W('</a>');

+      }

+      if (tl.end_sec > tl.last_sec - 1800)

+      {

+         W('<img src="bilder/pfeile_nachrechts_soft.png" border="0" />');

+      }

+      else

+      {

+         var diff_sec = tl.end_sec;

+         if (diff_sec > tl.last_sec - tl.end_min * 60 - 1800)

+         {

+            diff_sec = tl.last_sec - tl.end_min * 60;

+         }

+         W('<a href="' + tl.now_url + '&amp;time=' + format_date('%H:%M', diff_sec) + '">');

+            W('<img src="bilder/pfeile_nachrechts.png" border="0" />');

+         W('</a>');

+      }

+      W('</td>');

+   W('</tr>');

+}

+

+function BuildTable()

+{

+   W('<tr id="row_timeline" class="row_even">');

+      W('<td colspan="4">');

+         BuildTimeScale();

+         BuildProgTable();

+      W('</td>');

+   W('</tr>');

+}

+

+function BuildTimeScale()

+{

+   W('<table width="' + tl.table_w + '" border="0" cellspacing="0" cellpadding="0" class="timestable">');

+      W('<tr>');

+         W('<td><img src="bilder/spacer.gif" width="' + tl.name_w + '" height="1" border="0" /></td>');

+         for (var min = 0; min < tl.end_min; min += 30)

+         {

+            var c = min % 60 ? 'color1' : 'color2';

+            var w = tl.px_per_min * (tl.end_min - min < 30) ? tl.end_min - min : 30;

+            var t = tl.start_sec + min * 60;

+            W('<td colspan="6" class="' + c + '">');

+               W('<img src="bilder/spacer.gif" width="' + w + '" height="1" border="0" /><br/>');

+               W('<span class="date_time">' + format_date('%H:%M', t) + '</span>');

+            W('</td>');

+         }

+      W('</tr>');

+      W('<tr>');

+         W('<td><img src="bilder/spacer.gif" width="' + tl.name_w + '" height="1" border="0" /></td>');

+         for (var min = 0; min < tl.end_min; min += 5)

+         {

+            var c = min % 10 ? 'color1' : 'color2';

+            var w = tl.px_per_min * 5;

+            W('<td width="' + tl.px_per_min + '" height="' + tl.min5_h + '" class="' + c + '">');

+               W('<img src="bilder/spacer.gif" width="' + w + '" height="1" border="0" /><br/>');

+            W('</td>');

+         }

+      W('</tr>');

+   W('</table>');

+}

+

+function BuildProgTable()

+{

+   W('<table border="0" cellpadding="0" cellspacing="0" width="' + tl.table_w + '" class="prgname">');

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

+      {

+         var c = "prgname " + (i % 2 ? "color1" : "color2");

+         BuildChannel(channels[i], c);

+      }

+   W('</table>');

+}

+

+function BuildChannel(channel, td_class)

+{

+   W('<tr>');

+      /* Channel name */

+      W('<td width="' + tl.name_w + '" class="' + td_class + '">');

+         W('<img src="bilder/spacer.gif" width="' + tl.name_w + '" height="1" border="0"/><br/>');

+         W('<nobr>');

+            W('<a href="' + channel.url + '" class="channel_name">');

+               W(channel.name);

+            W('</a>');

+         W('</nobr>');

+      W('</td>');

+      

+      /* Events */

+      W('<td class="' + td_class + '">');

+         W('<nobr>');

+         var old_stop_min = 0;

+         for (var i = 0; i < channel.events.length; i++)

+         {

+            var event = channel.events[i];

+            

+            /* Calculate event start and stop time in minutes from table begin. */

+            var start_min = Div(event.start_sec - tl.start_sec, 60);

+            var stop_min = Div(event.stop_sec - tl.start_sec, 60);

+            if (start_min >= tl.end_min) break;

+   

+            /* Adjust times to regard end of last event and end of table. */

+            td_class = "";

+            if (start_min < old_stop_min)

+            {

+               start_min = old_stop_min;

+					if (start_min > 0)

+					{

+						td_class = "color_spacer"; /* overlapped event */

+					}

+            }

+            if (stop_min > tl.end_min) stop_min = tl.end_min;

+   

+            /* Ignore completely overlapped events. */

+            if (start_min >= stop_min) continue;

+   

+            if (!td_class)

+            {

+               if (event.timer)

+               {

+                  td_class = "color_timer";

+               }

+               else if ((event.start_sec <= tl.now_sec) && (tl.now_sec < event.stop_sec))

+               {

+                  td_class = "color_current";

+               }

+               else

+               {

+                  td_class = "color_broadcast";

+               }

+            }

+            

+            if (start_min  > old_stop_min + 1)

+            {

+               BuildSpacer((start_min - old_stop_min) * tl.px_per_min);

+            }

+            

+            var px_w = (stop_min - start_min) * tl.px_per_min;

+            BuildEvent(channel.vdr_id, i, event, td_class, px_w);

+            old_stop_min = stop_min;

+         }

+         W('</nobr>');

+      W('</td>');

+   W('</tr>');

+}

+

+function BuildSpacer(width)

+{

+   W('<table border="0" align="left" cellpadding="0" cellspacing="0" width="' + width + '" class="prgtable">');

+      W('<tr>');

+         W('<td width="1" class="color_spacer">');

+            W('<img src="bilder/spacer.gif" width="1" height="1" border="0"/><br/>');

+            W('<nobr>');

+               W('<img src="bilder/spacer.gif" width="1" height="8" border="0"/>');

+            W('</nobr>');

+         W('</td>');

+      W('</tr>');

+   W('</table>');

+}

+

+function BuildEvent(vdr_id, counter, event, td_class, px_w)

+{

+   var table_class = event.timer ? "timertable" : "prgtable";

+   W('<table border="0" align="left" cellpadding="0" cellspacing="0" width="' + px_w + '" class="' + table_class + '">');

+      W('<tr>');

+         W('<td width="1" class="' + td_class + '" ');

+         if (show_tooltips)

+         {

+            W('onMouseOver="tip(' + "'VDR-" + vdr_id + "-" + counter + "'); " + 'return true;" ');

+            W('onMouseOut="untip(); return true;" ');

+         }

+         W('>');

+            W('<img src="bilder/spacer.gif" width="1" height="1" border="0" /><br />');

+            W('<nobr>');

+               var anchor_start = "";

+               var anchor_end = "";

+               if (event.summary)

+               {

+                  anchor_start = '<a href="javascript:popup(' 

+                               + "'./vdradmin.pl?aktion=prog_detail&amp;epg_id=" 

+						             + event.epg_id + "&amp;vdr_id=" + vdr_id + "');" + '">';

+                  anchor_end = '</a>';

+               }

+               W(anchor_start);

+                  W(event.title);

+               W(anchor_end);

+            W('</nobr>');

+         W('</td>');

+      W('</tr>');

+   W('</table>');

+}

+

+function DrawTimeLine()

+{

+   var tab = document.getElementById("row_timeline");

+   if (tab && (tl.start_sec <= tl.now_sec) && (tl.now_sec < tl.end_sec))

+   {

+      var x = tl.name_w + tl.px_per_min * Div(tl.now_sec - tl.start_sec, 60) + 1;

+      var y = tab.offsetTop;

+      var h = tab.offsetHeight;

+      var style = "position:absolute; "

+                + "top:" + y + "px; "

+                + "left:" + x + "px; "

+                + "width:1px; "

+                + "height:" + h + "px; "

+                + "z-index:2; ";

+      if (document.all)

+      {

+         style = style + "filter:Alpha(opacity=50); ";

+      }

+

+      W('<span id="timeline" style="' + style + '">');

+      W('   <img src="bilder/spacer.gif" width="1" height="1" border="0" />');

+      W('</span>');

+   }

+}