--- trunk/lib/BackupPC/SearchLib.pm	2005/10/06 15:01:32	139
+++ trunk/lib/BackupPC/SearchLib.pm	2005/10/07 07:59:28	140
@@ -343,90 +343,113 @@
 sub displayBackupsGrid() {
 
 	my $retHTML .= q{
-		<form id="forma" method="POST" action=};
-		$retHTML .= "\"".$MyURL."\"";
-		$retHTML .= q{?action=burn>
+		<form id="forma" method="POST" action="}.$MyURL.q{?action=burn">
 	};
 
 	$retHTML .= <<'EOF3';
-<style>
+<style type="text/css">
 <!--
-
-div#fixedBox {
+DIV#fixedBox {
 	position: absolute;
-	bottom: 1em;
-	left: 0.5em;
+	top: 50em;
+	left: -24%;
 	padding: 0.5em;
-	width: 10em;
-	background: #e0f0e0;
-	border: 1px solid #00ff00;
-}
-@media screen {
-	div#fixedBox {
-		position: fixed;
-	}
-	/* Don't do this at home */
-	* html {
-		overflow-y: hidden;
-	}
-	* html body {
-		overflow-y: auto;
-		height: 100%;
-		padding: 0 1em 0 12em;
-		font-size: 100%;
-	}
-	* html div#fixedBox {
-		position: absolute;	
-	}
-	/* All done. */
+	width: 20%;
+	background-color: #E0F0E0;
+	border: 1px solid #00C000;
 }
 
-#mContainer {
-	position: relative;
-	width: 100%;
-	height: 1.1em;
-	padding: 0px;
-	border: 1px solid #000000;
+DIV#fixedBox, DIV#fixedBox INPUT, DIV#fixedBox TEXTAREA {
+	font-size: 10pt;
 }
 
-#gradient {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100%;
+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;
-	background-color: #ffff00;
+	width: 100%;
 }
 
-#mask {
-	position: absolute;
-	top: 0px;
-	left: 0px;
+DIV#fixedBox #submitBurner {
+	display: block;
 	width: 100%;
+	margin-top: 0.5em;
+	cursor: pointer;
+}
+
+* HTML {
+	overflow-y: hidden;
+}
+
+* HTML BODY {
+	overflow-y: auto;
 	height: 100%;
-	display: block;
-	font-size: 1px;
-	background-color: #FFFFFF;
-	overflow: hidden;
+	font-size: 100%;
 }
 
-#progressIndicator {
+* HTML DIV#fixedBox {
 	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100%;
+}
+
+#mContainer, #gradient, #mask, #progressIndicator {
 	display: block;
-	font-weight: bold;
-	color: #404040;
+	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;
+}
 -->
 </style>
-<script language="javascript" type="text/javascript">
+<script type="text/javascript">
 <!--
 
 var debug_div = null;
@@ -496,7 +519,7 @@
 	var suma = parseInt(element_id('forma').totalsize.value) || 0;
 	var len = element_id('forma').elements.length;
 	if (e) {
-		var size = parseInt( element_id("fss" + e.name.substr(3)).value );
+		var size = parseInt( element_id("fss" + e.name.substr(3)).value);
 		if (e.checked) {
 			suma += size;
 		} else {
@@ -518,111 +541,98 @@
 
 /* progress bar */
 
-var _pbar_width = 0;
+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("progressIndicator").style.zIndex  = 10;
 	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);
+        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+')');
 
-	debug('pbar_set( '+amount+' , '+max+' )');
-
-	curWidth = parseInt(element_id("mask").offsetWidth);
-	curLeft = parseInt(element_id("mask").offsetLeft);
-
+	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 pcnt = Math.floor(amount * 100 / max);
 	var p90 = 100 - _pbar_warn;
 	var pcol = pcnt - p90;
-	if (pcol < _pbar_warn) {
+	if (Math.round(pcnt) <= 100) {
 		if (pcol < 0) pcol = 0;
 		var e = element_id("submitBurner");
-		if (e && e.disabled) {
-			debug('enable_button');
-			var a = e.getAttributeNode('disabled') || null;
-			if (a) e.removeAttributeNode(a);
-		}
-	} else if (pcol > _pbar_warn) {
+		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;
+		if (!e.disabled) e.disabled = true;
 	}
-	var col_g = Math.floor( ( _pbar_warn - pcol ) * 255 / _pbar_warn );
-	var col = '#ff' + dec2hex( col_g ) + '00';
+	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;
 
-	var size = parseInt( _pbar_width * amount / max );
-
-	curWidth = _pbar_width - size;
-	curLeft = size ;
-
-	//debug('size: '+size+' curWidth '+curWidth+' curLeft: '+curLeft);
-
 	element_id("progressIndicator").innerHTML = pcnt + '%';
 	//element_id("progressIndicator").innerHTML = amount;
 
-	if (curLeft > _pbar_width) {
-		element_id("mask").style.display = "none";
-		return;
-	} else {
-		element_id("mask").style.display = "";
-	}
-
-	//if(parseInt(element_id("mask").offsetWidth)>10)
-	element_id("mask").style.width = curWidth + "px";
-	element_id("mask").style.left = curLeft + "px";
-
+	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();
+	//pbar_reset();
 	sumiraj();
-}
+};
 
-//-->
+// -->
 </script>
 <div id="fixedBox">
 
-Size:
-<input type="text" name="totalsize" size="7" readonly>
+Size: <input type="text" name="totalsize" size="7" readonly="readonly" style="text-align:right;" value="0" /> kB
 
 <div id="mContainer">
-	<div id="gradient"></div>
-	<div id="mask"></div>
-	<div id="progressIndicator">&nbsp;</div>
+	<div id="gradient">&nbsp;</div>
+	<div id="mask">&nbsp;</div>
+	<div id="progressIndicator">0%</div>
 </div>
-
 <br/>
+
 Note:
-<br/>
-<textarea name="note" cols="10" rows="5">
-</textarea>
-<br/>
-<input type="submit" id="submitBurner" value="Burn selected" name="submitBurner">
+<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>
+-->
 EOF3
 	$retHTML .= q{
 			<input type="hidden" value="burn" name="action">