From 2c835fefb850a3d02add14e9e8aafe13e06a17bb Mon Sep 17 00:00:00 2001
From: Dobrica Pavlinusic <dpavlin@rot13.org>
Date: Fri, 28 Jan 2011 17:41:54 +0100
Subject: [PATCH] move html and javascipt in __DATA__

---
 lib/BackupPC/Search.pm | 819 +++++++++++++++++++++--------------------
 1 file changed, 410 insertions(+), 409 deletions(-)

diff --git a/lib/BackupPC/Search.pm b/lib/BackupPC/Search.pm
index 5e45f35..ad27bb1 100644
--- a/lib/BackupPC/Search.pm
+++ b/lib/BackupPC/Search.pm
@@ -420,346 +420,18 @@ sub displayBackupsGrid($) {
 	my $max_archive_size = $Conf{ArchiveMediaSize} || die "no ArchiveMediaSize";
 	my $max_archive_file_size = $Conf{ArchiveChunkSize}  || die "no MaxFileInSize";
 
-	my $retHTML .= q{
-		<form id="forma" method="POST" action="}.$MyURL.q{?action=burn">
-	};
-
-	$retHTML .= <<'EOF3';
-<style type="text/css">
-<!--
-DIV#fixedBox {
-	position: absolute;
-	top: 50em;
-	left: -24%;
-	padding: 0.5em;
-	width: 20%;
-	background-color: #E0F0E0;
-	border: 1px solid #00C000;
-}
-
-DIV#fixedBox, DIV#fixedBox INPUT, DIV#fixedBox TEXTAREA {
-	font-size: 10pt;
-}
-
-FORM>DIV#fixedBox {
-	position: fixed !important;
-	left: 0.5em !important;
-	top: auto !important;
-	bottom: 1em !important;
-	width: 15% !important;
-}
-
-DIV#fixedBox INPUT[type=text], DIV#fixedBox TEXTAREA {
-	border: 1px solid #00C000;
-}
-
-DIV#fixedBox #note {
-	display: block;
-	width: 100%;
-}
-
-DIV#fixedBox #submitBurner {
-	display: block;
-	width: 100%;
-	margin-top: 0.5em;
-	cursor: pointer;
-}
-
-* HTML {
-	overflow-y: hidden;
-}
-
-* HTML BODY {
-	overflow-y: auto;
-	height: 100%;
-	font-size: 100%;
-}
-
-* HTML DIV#fixedBox {
-	position: absolute;
-}
-
-#mContainer, #gradient, #mask, #progressIndicator {
-	display: block;
-	width: 100%;
-	font-size: 10pt;
-	font-weight: bold;
-	text-align: center;
-	vertical-align: middle;
-	padding: 1px;
-}
-
-#gradient, #mask, #progressIndicator {
-	left: 0;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #000000;
-	color: #404040;
-	margin: 0.4em;
-	position: absolute;
-	margin-left: -1px;
-	margin-top: -1px;
-	margin-bottom: -1px;
-	overflow: hidden;
-}
-
-#mContainer {
-	display: block;
-	position: relative;
-	padding: 0px;
-	margin-top: 0.4em;
-	margin-bottom: 0.5em;
-}
-
-#gradient {
-	z-index: 1;
-	background-color: #FFFF00;
-}
-
-#mask {
-	z-index: 2;
-	background-color: #FFFFFF;
-}
-
-#progressIndicator {
-	z-index: 3;
-	background-color: transparent;
-}
-
-#volumes {
-	padding: 0.4em;
-	display: none;
-	width: 100%;
-	font-size: 80%;
-	color: #ff0000;
-	text-align: center;
-}
--->
-</style>
-<script type="text/javascript">
-<!--
-
-var debug_div;
-EOF3
-
-	# take maximum archive size from configuration
-	$retHTML .= qq{
-var media_size = $max_archive_size ;
-var max_file_size = $max_archive_file_size;
-
-};
-
-	$retHTML .= <<'EOF3';
-
-function debug(msg) {
-	return; // Disable debugging
-
-	if (! debug_div) debug_div = document.getElementById('debug');
-
-	// this will create debug div if it doesn't exist.
-	if (! debug_div) {
-		debug_div = document.createElement('div');
-		if (document.body) document.body.appendChild(debug_div);
-		else debug_div = null;
-	}
-	if (debug_div) {
-		debug_div.appendChild(document.createTextNode(msg));
-		debug_div.appendChild(document.createElement("br"));
-	}
-}
-
-
-var element_id_cache = Array();
-
-function element_id(name,element) {
-	if (! element_id_cache[name]) {
-		element_id_cache[name] = self.document.getElementById(name);
-	}
-	return element_id_cache[name];
-}
-
-function checkAll(location) {
-	var f = element_id('forma') || null;
-	if (!f) return false;
-
-	var len = f.elements.length;
-	var check_all = element_id('allFiles');
-	var suma = check_all.checked ? (parseInt(f.elements['totalsize'].value) || 0) : 0;
-
-	for (var i = 0; i < len; i++) {
-		var e = f.elements[i];
-		if (e.name != 'all' && e.name.substr(0, 3) == 'fcb') {
-			if (check_all.checked) {
-				if (e.checked) continue;
-				var el = element_id("fss" + e.name.substr(3));
-				var size = parseInt(el.value) || 0;
-				debug('suma: '+suma+' size: '+size);
-				if ((suma + size) < media_size) {
-					suma += size;
-					e.checked = true;
-				} else {
-					break;
-				}
-			} else {
-				e.checked = false;
-			}
-		}
-	}
-	update_sum(suma);
-}
-
-function update_sum(suma, suma_disp) {
-	if (! suma_disp) suma_disp = suma;
-	suma_disp = Math.floor(suma_disp / 1024);
-	element_id('forma').elements['totalsize_kb'].value = suma_disp;
-	element_id('forma').elements['totalsize'].value = suma;
-	pbar_set(suma, media_size);
-	debug('total size: ' + suma);
-}
-
-function update_size(name, checked, suma) {
-	var size = parseInt( element_id("fss" + name).value);
-
-	if (checked) {
-		suma += size;
-	} else {
-		suma -= size;
-	}
-
-	debug('update_size('+name+','+checked+') suma: '+suma);
-/* FIXME
-	if (volumes > 1) {
-		if (checked) {
-			element_id("volumes").innerHTML = "This will take "+volumes+" mediums!";
-			element_id("volumes").style.display = 'block';
-			suma = size;
-			update_sum(suma);
-		} else {
-			suma -= size;
-			element_id("volumes").style.display = 'none';
-		}
-	}
-*/
-	return suma;
-}
-
-function sumiraj(e) {
-	var suma = parseInt(element_id('forma').elements['totalsize'].value) || 0;
-	var len = element_id('forma').elements.length;
-	if (e) {
-		suma = update_size(e.name.substr(3), e.checked, suma);
-		if (suma < 0) suma = 0;
-	} else {
-		suma = 0;
-		for (var i = 0; i < len; i++) {
-			var fel = element_id('forma').elements[i];
-			if (fel.name != 'all' && fel.checked && fel.name.substr(0,3) == 'fcb') {
-				suma = update_size(fel.name.substr(3), fel.checked, suma);
-			} 
-		}
-	}
-	update_sum(suma);
-    	return suma;
-}
-
-/* progress bar */
-
-var _pbar_width = null;
-var _pbar_warn = 10;	// change color in last 10%
-
-function pbar_reset() {
-	element_id("mask").style.left = "0px";
-	_pbar_width = element_id("mContainer").offsetWidth - 2;
-	element_id("mask").style.width = _pbar_width + "px";
-	element_id("mask").style.display = "block";
-	element_id("progressIndicator").style.zIndex  = 10;
-	element_id("progressIndicator").innerHTML = "0";
-}
-
-function dec2hex(d) {
-        var hch = '0123456789ABCDEF';
-        var a = d % 16;
-        var q = (d - a) / 16;
-        return hch.charAt(q) + hch.charAt(a);
-}
-
-function pbar_set(amount, max) {
-	debug('pbar_set('+amount+', '+max+')');
-
-	if (_pbar_width == null) {
-		var _mc = element_id("mContainer");
-		if (_pbar_width == null) _pbar_width = parseInt(_mc.offsetWidth ? (_mc.offsetWidth - 2) : 0) || null;
-		if (_pbar_width == null) _pbar_width = parseInt(_mc.clientWidth ? (_mc.clientWidth + 2) : 0) || null;
-		if (_pbar_width == null) _pbar_width = 0;
-	}
-
-	var pcnt = Math.floor(amount * 100 / max);
-	var p90 = 100 - _pbar_warn;
-	var pcol = pcnt - p90;
-	if (Math.round(pcnt) <= 100) {
-		if (pcol < 0) pcol = 0;
-		var e = element_id("submitBurner");
-		debug('enable_button');
-		e.disabled = false;
-		var a = e.getAttributeNode('disabled') || null;
-		if (a) e.removeAttributeNode(a);
-	} else {
-		debug('disable button');
-		pcol = _pbar_warn;
-		var e = element_id("submitBurner");
-		if (!e.disabled) e.disabled = true;
-	}
-	var col_g = Math.floor((_pbar_warn - pcol) * 255 / _pbar_warn);
-	var col = '#FF' + dec2hex(col_g) + '00';
-
-	//debug('pcol: '+pcol+' g:'+col_g+' _pbar_warn:'+ _pbar_warn + ' color: '+col);
-	element_id("gradient").style.backgroundColor = col;
-
-	element_id("progressIndicator").innerHTML = pcnt + '%';
-	//element_id("progressIndicator").innerHTML = amount;
-
-	element_id("mask").style.clip = 'rect(' + Array(
-		'0px',
-		element_id("mask").offsetWidth + 'px',
-		element_id("mask").offsetHeight + 'px',
-		Math.round(_pbar_width * amount / max) + 'px'
-	).join(' ') + ')';
-}
-
-if (!self.body) self.body = new Object();
-self.onload = self.document.onload = self.body.onload = function() {
-	//pbar_reset();
-	sumiraj();
-};
+	my $retHTML .= qq|
+		<form id="forma" method="POST" action="$MyURL?action=burn">
 
-// -->
+<script type="text/javascript">
+var media_size = $max_archive_size ;
+var max_file_size = $max_archive_file_size;
 </script>
-<div id="fixedBox">
-
-<input type="hidden" name="totalsize"/>
-Size: <input type="text" name="totalsize_kb" size="7" readonly="readonly" style="text-align:right;" value="0" /> kB
-
-<div id="mContainer">
-	<div id="gradient">&nbsp;</div>
-	<div id="mask">&nbsp;</div>
-	<div id="progressIndicator">0%</div>
-</div>
-<br/>
-
-<div id="volumes">&nbsp;</div>
 
-Note:
-<textarea name="note" cols="10" rows="5" id="note"></textarea>
+	|;
 
-<input type="submit" id="submitBurner" value="Burn selected" name="submitBurner" />
+	{ local $/ = undef; $retHTML .= <DATA> }
 
-</div>
-<!--
-<div id="debug" style="float: right; width: 10em; border: 1px #ff0000 solid; background-color: #ffe0e0; -moz-opacity: 0.7;">
-no debug output yet
-</div>
--->
-EOF3
 	$retHTML .= q{
 			<input type="hidden" value="burn" name="action">
 			<input type="hidden" value="results" name="search_results">
@@ -955,113 +627,442 @@ sub displayGrid($) {
 		return $html;
 	}
 
-	my $i = $offset * $on_page;
+	my $i = $offset * $on_page;
+
+	foreach $file (@{ $files }) {
+		$i++;
+
+		my $typeStr  = BackupPC::Attrib::fileType2Text(undef, $file->{'type'});
+		$retHTML .= qq{<tr class="fviewborder">};
+
+		$retHTML .= qq{<td class="fviewborder">$i</td>};
+
+		$retHTML .=
+			qq{<td class="fviewborder" align="right">} . $file->{'hname'} . ':' . $file->{'sname'} . qq{</td>} .
+			qq{<td class="fviewborder"><img src="$Conf{CgiImageDirURL}/icon-$typeStr.png" alt="$typeStr" align="middle">&nbsp;} . hilite_html( $file->{'filepath'}, $hilite ) . qq{</td>} .
+			qq{<td class="fviewborder" align="center">} . restore_link( $typeStr, ${EscURI( $file->{'hname'} )}, $file->{'backupnum'}, ${EscURI( $file->{'sname'})}, ${EscURI( $file->{'filepath'} )}, $file->{'backupnum'} ) . qq{</td>} .
+			qq{<td class="fviewborder" align="right">} . $file->{'size'} . qq{</td>} .
+			qq{<td class="fviewborder">} . epoch_to_iso( $file->{'date'} ) . qq{</td>} .
+			qq{<td class="fviewborder">} . check_archived( $file->{'hname'}, $file->{'sname'}, $file->{'backupnum'} ) . qq{</td>};
+
+		$retHTML .= "</tr>";
+	}
+	$retHTML .= "</table>";
+
+	# all variables which has to be transfered
+	foreach my $n (qw/search_day_from search_month_from search_year_from search_day_to search_month_to search_year_to search_backup_day_from search_backup_month_from search_backup_year_from search_backup_day_to search_backup_month_to search_backup_year_to search_filename offset/) {
+		$retHTML .= qq{<INPUT TYPE="hidden" NAME="$n" VALUE="$In{$n}">\n};
+	}
+
+	my $del = '';
+	my $max_page = int( $results / $on_page );
+	my $page = 0;
+
+	sub page_uri($) {
+		my $param = shift || die "no param?";
+
+		my $uri = $MyURL;
+		my $del = '?';
+		foreach my $k (keys %{ $param }) {
+			if ($param->{$k}) {
+				$uri .= $del . $k . '=' . ${EscURI( $param->{$k} )};
+				$del = '&';
+			}
+		}
+		return $uri;
+	}
+
+	sub page_link($$$) {
+		my ($param,$page,$display) = @_;
+
+		$param->{'offset'} = $page if (defined($page));
+
+		my $html = '<a href = "' . page_uri($param) . '">' . $display . '</a>';
+	}
+
+	$retHTML .= '<div style="text-align: center;">';
+
+	if ($offset > 0) {
+		$retHTML .= page_link($param, $offset - 1, '&lt;&lt;') . ' ';
+	}
+
+	while ($page <= $max_page) {
+		if ($page == $offset) {
+			$retHTML .= $del . '<b>' . ($page + 1) . '</b>';
+		} else {
+			$retHTML .= $del . page_link($param, $page, $page + 1);
+		}
+
+		if ($page < $offset - $pager_pages && $page != 0) {
+			$retHTML .= " ... ";
+			$page = $offset - $pager_pages;
+			$del = '';
+		} elsif ($page > $offset + $pager_pages && $page != $max_page) {
+			$retHTML .= " ... ";
+			$page = $max_page;
+			$del = '';
+		} else {
+			$del = ' | ';
+			$page++;
+		}
+	}
+
+	if ($offset < $max_page) {
+		$retHTML .= ' ' . page_link($param, $offset + 1, '&gt;&gt;');
+	}
+
+	$retHTML .= "</div>";
+
+	return $retHTML;
+}
+
+my @units = qw/b k M G/;
+sub unit {
+	my $v = shift;
+
+	my $o = 0;
+
+	while ( ( $v / 10000 ) >= 1 ) {
+		$o++;
+		$v /= 1024;
+	}
+
+	if ( $v >= 1 ) {
+		return sprintf("%d%s", $v, $units[$o]);
+	} elsif ( $v == 0 ) {
+		return 0;
+	} else {
+		return sprintf("%.1f%s", $v, $units[$o]);
+	}
+}
+
+1;
+
+__DATA__
+
+
+<style type="text/css">
+<!--
+DIV#fixedBox {
+	position: absolute;
+	top: 50em;
+	left: -24%;
+	padding: 0.5em;
+	width: 20%;
+	background-color: #E0F0E0;
+	border: 1px solid #00C000;
+}
+
+DIV#fixedBox, DIV#fixedBox INPUT, DIV#fixedBox TEXTAREA {
+	font-size: 10pt;
+}
+
+FORM>DIV#fixedBox {
+	position: fixed !important;
+	left: 0.5em !important;
+	top: auto !important;
+	bottom: 1em !important;
+	width: 15% !important;
+}
+
+DIV#fixedBox INPUT[type=text], DIV#fixedBox TEXTAREA {
+	border: 1px solid #00C000;
+}
+
+DIV#fixedBox #note {
+	display: block;
+	width: 100%;
+}
+
+DIV#fixedBox #submitBurner {
+	display: block;
+	width: 100%;
+	margin-top: 0.5em;
+	cursor: pointer;
+}
+
+* HTML {
+	overflow-y: hidden;
+}
+
+* HTML BODY {
+	overflow-y: auto;
+	height: 100%;
+	font-size: 100%;
+}
+
+* HTML DIV#fixedBox {
+	position: absolute;
+}
+
+#mContainer, #gradient, #mask, #progressIndicator {
+	display: block;
+	width: 100%;
+	font-size: 10pt;
+	font-weight: bold;
+	text-align: center;
+	vertical-align: middle;
+	padding: 1px;
+}
+
+#gradient, #mask, #progressIndicator {
+	left: 0;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+	color: #404040;
+	margin: 0.4em;
+	position: absolute;
+	margin-left: -1px;
+	margin-top: -1px;
+	margin-bottom: -1px;
+	overflow: hidden;
+}
+
+#mContainer {
+	display: block;
+	position: relative;
+	padding: 0px;
+	margin-top: 0.4em;
+	margin-bottom: 0.5em;
+}
+
+#gradient {
+	z-index: 1;
+	background-color: #FFFF00;
+}
+
+#mask {
+	z-index: 2;
+	background-color: #FFFFFF;
+}
+
+#progressIndicator {
+	z-index: 3;
+	background-color: transparent;
+}
+
+#volumes {
+	padding: 0.4em;
+	display: none;
+	width: 100%;
+	font-size: 80%;
+	color: #ff0000;
+	text-align: center;
+}
+-->
+</style>
+<script type="text/javascript">
+<!--
+
+var debug_div;
 
-	foreach $file (@{ $files }) {
-		$i++;
+function debug(msg) {
+	return; // Disable debugging
 
-		my $typeStr  = BackupPC::Attrib::fileType2Text(undef, $file->{'type'});
-		$retHTML .= qq{<tr class="fviewborder">};
+	if (! debug_div) debug_div = document.getElementById('debug');
 
-		$retHTML .= qq{<td class="fviewborder">$i</td>};
+	// this will create debug div if it doesn't exist.
+	if (! debug_div) {
+		debug_div = document.createElement('div');
+		if (document.body) document.body.appendChild(debug_div);
+		else debug_div = null;
+	}
+	if (debug_div) {
+		debug_div.appendChild(document.createTextNode(msg));
+		debug_div.appendChild(document.createElement("br"));
+	}
+}
 
-		$retHTML .=
-			qq{<td class="fviewborder" align="right">} . $file->{'hname'} . ':' . $file->{'sname'} . qq{</td>} .
-			qq{<td class="fviewborder"><img src="$Conf{CgiImageDirURL}/icon-$typeStr.png" alt="$typeStr" align="middle">&nbsp;} . hilite_html( $file->{'filepath'}, $hilite ) . qq{</td>} .
-			qq{<td class="fviewborder" align="center">} . restore_link( $typeStr, ${EscURI( $file->{'hname'} )}, $file->{'backupnum'}, ${EscURI( $file->{'sname'})}, ${EscURI( $file->{'filepath'} )}, $file->{'backupnum'} ) . qq{</td>} .
-			qq{<td class="fviewborder" align="right">} . $file->{'size'} . qq{</td>} .
-			qq{<td class="fviewborder">} . epoch_to_iso( $file->{'date'} ) . qq{</td>} .
-			qq{<td class="fviewborder">} . check_archived( $file->{'hname'}, $file->{'sname'}, $file->{'backupnum'} ) . qq{</td>};
 
-		$retHTML .= "</tr>";
-	}
-	$retHTML .= "</table>";
+var element_id_cache = Array();
 
-	# all variables which has to be transfered
-	foreach my $n (qw/search_day_from search_month_from search_year_from search_day_to search_month_to search_year_to search_backup_day_from search_backup_month_from search_backup_year_from search_backup_day_to search_backup_month_to search_backup_year_to search_filename offset/) {
-		$retHTML .= qq{<INPUT TYPE="hidden" NAME="$n" VALUE="$In{$n}">\n};
+function element_id(name,element) {
+	if (! element_id_cache[name]) {
+		element_id_cache[name] = self.document.getElementById(name);
 	}
+	return element_id_cache[name];
+}
 
-	my $del = '';
-	my $max_page = int( $results / $on_page );
-	my $page = 0;
+function checkAll(location) {
+	var f = element_id('forma') || null;
+	if (!f) return false;
 
-	sub page_uri($) {
-		my $param = shift || die "no param?";
+	var len = f.elements.length;
+	var check_all = element_id('allFiles');
+	var suma = check_all.checked ? (parseInt(f.elements['totalsize'].value) || 0) : 0;
 
-		my $uri = $MyURL;
-		my $del = '?';
-		foreach my $k (keys %{ $param }) {
-			if ($param->{$k}) {
-				$uri .= $del . $k . '=' . ${EscURI( $param->{$k} )};
-				$del = '&';
+	for (var i = 0; i < len; i++) {
+		var e = f.elements[i];
+		if (e.name != 'all' && e.name.substr(0, 3) == 'fcb') {
+			if (check_all.checked) {
+				if (e.checked) continue;
+				var el = element_id("fss" + e.name.substr(3));
+				var size = parseInt(el.value) || 0;
+				debug('suma: '+suma+' size: '+size);
+				if ((suma + size) < media_size) {
+					suma += size;
+					e.checked = true;
+				} else {
+					break;
+				}
+			} else {
+				e.checked = false;
 			}
 		}
-		return $uri;
 	}
+	update_sum(suma);
+}
 
-	sub page_link($$$) {
-		my ($param,$page,$display) = @_;
-
-		$param->{'offset'} = $page if (defined($page));
-
-		my $html = '<a href = "' . page_uri($param) . '">' . $display . '</a>';
-	}
+function update_sum(suma, suma_disp) {
+	if (! suma_disp) suma_disp = suma;
+	suma_disp = Math.floor(suma_disp / 1024);
+	element_id('forma').elements['totalsize_kb'].value = suma_disp;
+	element_id('forma').elements['totalsize'].value = suma;
+	pbar_set(suma, media_size);
+	debug('total size: ' + suma);
+}
 
-	$retHTML .= '<div style="text-align: center;">';
+function update_size(name, checked, suma) {
+	var size = parseInt( element_id("fss" + name).value);
 
-	if ($offset > 0) {
-		$retHTML .= page_link($param, $offset - 1, '&lt;&lt;') . ' ';
+	if (checked) {
+		suma += size;
+	} else {
+		suma -= size;
 	}
 
-	while ($page <= $max_page) {
-		if ($page == $offset) {
-			$retHTML .= $del . '<b>' . ($page + 1) . '</b>';
+	debug('update_size('+name+','+checked+') suma: '+suma);
+/* FIXME
+	if (volumes > 1) {
+		if (checked) {
+			element_id("volumes").innerHTML = "This will take "+volumes+" mediums!";
+			element_id("volumes").style.display = 'block';
+			suma = size;
+			update_sum(suma);
 		} else {
-			$retHTML .= $del . page_link($param, $page, $page + 1);
+			suma -= size;
+			element_id("volumes").style.display = 'none';
 		}
+	}
+*/
+	return suma;
+}
 
-		if ($page < $offset - $pager_pages && $page != 0) {
-			$retHTML .= " ... ";
-			$page = $offset - $pager_pages;
-			$del = '';
-		} elsif ($page > $offset + $pager_pages && $page != $max_page) {
-			$retHTML .= " ... ";
-			$page = $max_page;
-			$del = '';
-		} else {
-			$del = ' | ';
-			$page++;
+function sumiraj(e) {
+	var suma = parseInt(element_id('forma').elements['totalsize'].value) || 0;
+	var len = element_id('forma').elements.length;
+	if (e) {
+		suma = update_size(e.name.substr(3), e.checked, suma);
+		if (suma < 0) suma = 0;
+	} else {
+		suma = 0;
+		for (var i = 0; i < len; i++) {
+			var fel = element_id('forma').elements[i];
+			if (fel.name != 'all' && fel.checked && fel.name.substr(0,3) == 'fcb') {
+				suma = update_size(fel.name.substr(3), fel.checked, suma);
+			} 
 		}
 	}
+	update_sum(suma);
+    	return suma;
+}
 
-	if ($offset < $max_page) {
-		$retHTML .= ' ' . page_link($param, $offset + 1, '&gt;&gt;');
-	}
+/* progress bar */
 
-	$retHTML .= "</div>";
+var _pbar_width = null;
+var _pbar_warn = 10;	// change color in last 10%
 
-	return $retHTML;
+function pbar_reset() {
+	element_id("mask").style.left = "0px";
+	_pbar_width = element_id("mContainer").offsetWidth - 2;
+	element_id("mask").style.width = _pbar_width + "px";
+	element_id("mask").style.display = "block";
+	element_id("progressIndicator").style.zIndex  = 10;
+	element_id("progressIndicator").innerHTML = "0";
 }
 
-my @units = qw/b k M G/;
-sub unit {
-	my $v = shift;
+function dec2hex(d) {
+        var hch = '0123456789ABCDEF';
+        var a = d % 16;
+        var q = (d - a) / 16;
+        return hch.charAt(q) + hch.charAt(a);
+}
 
-	my $o = 0;
+function pbar_set(amount, max) {
+	debug('pbar_set('+amount+', '+max+')');
 
-	while ( ( $v / 10000 ) >= 1 ) {
-		$o++;
-		$v /= 1024;
+	if (_pbar_width == null) {
+		var _mc = element_id("mContainer");
+		if (_pbar_width == null) _pbar_width = parseInt(_mc.offsetWidth ? (_mc.offsetWidth - 2) : 0) || null;
+		if (_pbar_width == null) _pbar_width = parseInt(_mc.clientWidth ? (_mc.clientWidth + 2) : 0) || null;
+		if (_pbar_width == null) _pbar_width = 0;
 	}
 
-	if ( $v >= 1 ) {
-		return sprintf("%d%s", $v, $units[$o]);
-	} elsif ( $v == 0 ) {
-		return 0;
+	var pcnt = Math.floor(amount * 100 / max);
+	var p90 = 100 - _pbar_warn;
+	var pcol = pcnt - p90;
+	if (Math.round(pcnt) <= 100) {
+		if (pcol < 0) pcol = 0;
+		var e = element_id("submitBurner");
+		debug('enable_button');
+		e.disabled = false;
+		var a = e.getAttributeNode('disabled') || null;
+		if (a) e.removeAttributeNode(a);
 	} else {
-		return sprintf("%.1f%s", $v, $units[$o]);
+		debug('disable button');
+		pcol = _pbar_warn;
+		var e = element_id("submitBurner");
+		if (!e.disabled) e.disabled = true;
 	}
+	var col_g = Math.floor((_pbar_warn - pcol) * 255 / _pbar_warn);
+	var col = '#FF' + dec2hex(col_g) + '00';
+
+	//debug('pcol: '+pcol+' g:'+col_g+' _pbar_warn:'+ _pbar_warn + ' color: '+col);
+	element_id("gradient").style.backgroundColor = col;
+
+	element_id("progressIndicator").innerHTML = pcnt + '%';
+	//element_id("progressIndicator").innerHTML = amount;
+
+	element_id("mask").style.clip = 'rect(' + Array(
+		'0px',
+		element_id("mask").offsetWidth + 'px',
+		element_id("mask").offsetHeight + 'px',
+		Math.round(_pbar_width * amount / max) + 'px'
+	).join(' ') + ')';
 }
 
-1;
+if (!self.body) self.body = new Object();
+self.onload = self.document.onload = self.body.onload = function() {
+	//pbar_reset();
+	sumiraj();
+};
+
+// -->
+</script>
+<div id="fixedBox">
+
+<input type="hidden" name="totalsize"/>
+Size: <input type="text" name="totalsize_kb" size="7" readonly="readonly" style="text-align:right;" value="0" /> kB
+
+<div id="mContainer">
+	<div id="gradient">&nbsp;</div>
+	<div id="mask">&nbsp;</div>
+	<div id="progressIndicator">0%</div>
+</div>
+<br/>
+
+<div id="volumes">&nbsp;</div>
+
+Note:
+<textarea name="note" cols="10" rows="5" id="note"></textarea>
+
+<input type="submit" id="submitBurner" value="Burn selected" name="submitBurner" />
+
+</div>
+<!--
+<div id="debug" style="float: right; width: 10em; border: 1px #ff0000 solid; background-color: #ffe0e0; -moz-opacity: 0.7;">
+no debug output yet
+</div>
+-->
+
-- 
2.20.1