Index: branches/unlabeled/unlabeled-1.1.2/core/admin_templates/js/grid_scroller.js
===================================================================
diff -u -r7036 -r7063
--- branches/unlabeled/unlabeled-1.1.2/core/admin_templates/js/grid_scroller.js	(.../grid_scroller.js)	(revision 7036)
+++ branches/unlabeled/unlabeled-1.1.2/core/admin_templates/js/grid_scroller.js	(.../grid_scroller.js)	(revision 7063)
@@ -1,3 +1,58 @@
+var sheetRules; // all rules in stylesheet Set by initStyleChange()
+var currentRule; // which rule are we editing? Set by assignRule()
+var defaultStyles = new Array();
+
+
+function StyleManager() {}
+
+StyleManager.InitStyles = function() {
+	if (!document.styleSheets) return;
+	var sheets = document.styleSheets;
+
+	this.Map = new Object();
+//	alert('total '+sheets.length+' sheets')
+	for (var i=0;i<sheets.length;i++) {
+		var currentSheet = sheets[i];
+		if (currentSheet.cssRules)
+			sheetRules = currentSheet.cssRules
+		else if (currentSheet.rules)
+			sheetRules = currentSheet.rules;
+		else {
+//			alert('bad sheet '+currentSheet.href);
+			continue;
+		}
+
+//		alert('sheet: '+currentSheet.href)
+
+		for (var ii=0;ii<sheetRules.length;ii++) {
+			var value = sheetRules[ii].selectorText;
+			if (value.match(',')) { // Mozilla does not break comma-separated selectors into separate rules...
+				var subselectors = value.split(',');
+				for (var sub in subselectors) {
+					var real_name = subselectors[sub].replace(/^[ \t]*(.*)[ \t]*/, '$1');
+					this.Map[real_name] = sheetRules[ii]
+				}
+			}
+			else {
+				this.Map[value.toLowerCase()] = sheetRules[ii];
+			}
+		}
+	}
+	this.Inited = true;
+//	preg_print_pre(this.Map, /last/);
+}
+
+StyleManager.ChangeStyle = function(selector, style, value)
+{
+	if (!this.Inited) this.InitStyles()
+	rule = this.Map[selector.toLowerCase()];
+	if (!rule) {
+		alert('rule '+selector+' not found')
+		return;
+	}
+	rule.style[style] = value;
+}
+
 function preg_print_pre(obj, reg)
 {
 	if (!reg) reg = /.*/;
@@ -23,6 +78,8 @@
 	return [curleft,curtop];
 }
 
+var startTime,endTime;
+
 function getDimensions(obj) {
 	var style,correction,height
 	if (obj.currentStyle) {
@@ -49,6 +106,18 @@
 	return result;
 }
 
+var profile = 0;
+var startTime = new Date().getTime();
+
+function Profile(message,force)
+{
+	if (profile || force) {
+		endTime = new Date().getTime();
+		alert(message+' took '+(endTime-startTime)+' ms?')
+		startTime = new Date().getTime();
+	}
+}
+
 function GridScroller(grid_id, w, h)
 {
 	this.GridId = grid_id
@@ -69,17 +138,28 @@
 	this.ScrollerH = 0;
 
 	this.MinWidths = [];
+	this.IDs = [];
+
+	this.Rendered = false;
 }
 
 GridScroller.prototype.Render = function(id)
 {
+//	alert('rendering '+( id ? id : 'defulat'))
+	startTime = new Date().getTime();
 	html = this.GetHTML();
 	if (id && id != '') {
-		document.getElementById(id).innerHTML = html;
+		document.getElementById(id).innerHTML = '<div id="main_div_'+this.GridId+'">'+html+'</div>';
 	}
 	else {
-		document.write(html);
+		if (this.Rendered) {
+			this.Render('main_div_'+this.GridId);
+			return;
+		}
+		document.write('<div id="main_div_'+this.GridId+'">'+html+'</div>');
 	}
+	this.Rendered = true;
+	Profile('Preparing HTML and writing it')
 	document.body.style.height = '100%';
 	document.body.style.overflow = 'hidden';
 	document.body.scroll = 'no'
@@ -88,14 +168,18 @@
 	this.ScrollerW = this.MainInner.offsetWidth - this.MainInner.clientWidth
 	this.ScrollerH = this.MainInner.offsetHeight - this.MainInner.clientHeight
 
-	this.UpdateColWidths();
+	if (!this.UpdateColWidths()) return;
+//	Profile('UpdateColWidths');
+
 	if (this.Width == 'auto') {
 		this.Resize( this.GetAutoSize() );
 	}
 	else {
 		this.Resize();
 	}
 
+//	Profile('Resizing');
+
 	this.TheGrid.style.visibility = 'visible'
 	this.MainScroller.style.visibility = 'visible'
 
@@ -105,8 +189,10 @@
 	} else {
 		$status = window.addEventListener('resize', function(ev) { the_grid.AutoResize() }, true);
 	}
+	Profile('Finalizng', 0);
 }
 
+
 GridScroller.prototype.SetReferences = function() {
 	this.MainOuter = document.getElementById('outer_main_'+this.GridId );
 	this.MainInner = document.getElementById('inner_main_'+this.GridId)
@@ -152,50 +238,87 @@
 	// this.MainOuter.style.padding = '30px';
 
 	this.MainOuter.className = 'grid-scrollable'
+	if (!is.ie) {
+		this.MainOuter.style.marginLeft = '-1px';
+	}
+
 }
 
 GridScroller.prototype.UpdateColWidths = function() {
 
 	var data_cf = 1;
 	var count = 1;
 
-	var header_cf = 0.2;
+	var header_cf = 0;
 	var footer_cf = 0.2;
 
+//	alert('MinWidths: '+this.MinWidths.length + ' vs Data ' + this.Header[0].length)
+	if (this.MinWidths.length < this.Header[0].length) {
+		var widths = new Array();
+		var total = 0;
 
-	var header_widths = this.GetWidths('header_'+this.GridId);
-	data_cf -= header_cf;
-	count++;
+		StyleManager.ChangeStyle('td.grid-header-last-cell', 'width', '123px')
+		StyleManager.ChangeStyle('td.grid-data-last-cell', 'width', 'auto')
+		if (this.HasFooter()) {
+			StyleManager.ChangeStyle('td.grid-footer-last-cell', 'width', 'auto')
+		}
 
-	var data_widths = this.GetWidths('data_'+this.GridId);
+		if (this.LeftCells) {
+			widths.push(this.LeftHeaderTable.clientWidth)
+		}
 
-	if (this.HasFooter()) {
-		var footer_widths = this.GetWidths('footer_'+this.GridId);
-		data_cf -= footer_cf;
-		count++;
-	}
+		var header_widths = this.GetWidths('header_'+this.GridId);
+		var data_widths = this.GetWidths('data_'+this.GridId);
 
-	var widths = new Array();
-	var total = 0;
+		/*if (this.HasFooter()) {
+			var footer_widths = this.GetWidths('footer_'+this.GridId);
+			data_cf -= footer_cf;
+			count++;
+		}*/
 
-	for (var i=0; i<header_widths.length; i++)
+		for (var i=0; i<header_widths.length; i++)
+		{
+			target = data_widths[i] ? data_widths[i] : header_widths[i];
+			if (target < header_widths[i]) target = header_widths[i];
+			widths.push(target);
+			total += target;
+		}
+
+		this.MinWidths = widths;
+
+		StyleManager.ChangeStyle('td.grid-header-last-cell', 'width', '100%')
+		StyleManager.ChangeStyle('td.grid-data-last-cell', 'width', '100%')
+		if (this.HasFooter()) {
+			StyleManager.ChangeStyle('td.grid-footer-last-cell', 'width', '100%')
+		}
+
+		this.Render();
+		return false;
+	}
+
+	/*for (var i=0; i<header_widths.length; i++)
 	{
 //		target = Math.max( Math.max(header_widths[i], data_widths[i]), footer_widths[i]);
 		var sum = header_widths[i]*header_cf*count + (data_widths[i] ? data_widths[i]*data_cf*count : header_widths[i]*data_cf*count);
-//		alert('sum ('+i+') = '+header_widths[i]+' * '+header_cf+' * '+count+' + '+data_widths[i]+' * '+data_cf+' * '+count+' = '+sum)
+		alert('sum ('+i+') = '+header_widths[i]+' * '+header_cf+' * '+count+' + '+data_widths[i]+' * '+data_cf+' * '+count+' = '+sum)
 		if (this.HasFooter()) {
 			sum += footer_widths[i]*footer_cf*count;
-//			alert('sum + '+footer_widths[i]+' * '+footer_cf+' * '+count+' = '+sum)
+			alert('sum + '+footer_widths[i]+' * '+footer_cf+' * '+count+' = '+sum)
 		}
 		target = Math.round( sum / count )
 		widths.push(target);
 //		alert('target: '+target)
 		total += target;
 	}
-	this.MinDataWidth = total;
-	this.SetWidths('header_'+this.GridId, widths, 0, -1);
-	this.SetWidths('data_'+this.GridId, widths, 0, -1);
+	*/
 
+	Profile('Getting widths');
+
+//	preg_print_pre(widths)
+//	this.MinDataWidth = total;
+//	this.SetWidths('header_'+this.GridId, widths, 0, -1);
+//	this.SetWidths('data_'+this.GridId, widths, 0, -1);
+
 	if (this.LeftCells != 0) {
 		this.SetHeights('left_header_'+this.GridId, this.GetHeights('header_'+this.GridId));
 		this.SetHeights('left_data_'+this.GridId, this.GetHeights('data_'+this.GridId));
@@ -204,11 +327,11 @@
 		}
 
 //		alert('setting left widths')
-		this.SetWidths('left_header_'+this.GridId, [10], 0, 1);
-		this.SetWidths('left_data_'+this.GridId, [10], 0, 1);
+//		this.SetWidths('left_header_'+this.GridId, [30], 0, 1);
+//		this.SetWidths('left_data_'+this.GridId, [30], 0, 1);
 	}
 
-	this.HeadTable.style.width = '100%'
+//	this.HeadTable.style.width = '100%'
 
 	if (this.HasFooter()) {
 		this.SetRowWidths('footer_'+this.GridId, widths);
@@ -253,6 +376,8 @@
 			this.TheGrid.SyncScroll();
 		}, false);
 	}
+
+	return true;
 }
 
 GridScroller.prototype.SetRowWidths = function(table_id, widths, row, from, to)
@@ -285,7 +410,7 @@
 //			alert('correcting minwidth of '+col+': '+this.MinWidths[col]+ ' / '+final_width)
 			final_width = this.MinWidths[col+min_offset]
 		}
-		table.rows[row].cells[col].innerHTML = '<div style="width: '+(final_width) +'px; overflow: hidden; background-color: inherit;">' + table.rows[row].cells[col].innerHTML + '</div>'
+		table.rows[row].cells[col].innerHTML = '<div style="width: '+(final_width) +'px; overflow: hidden; background-color: yellow;">' + table.rows[row].cells[col].innerHTML + '</div>'
 //		alert('setting '+widths[col]+' for col '+col)
 //		if (isNaN(final_width)) {
 //						alert('set '+table_id+'col '+col+' '+table.rows[0].cells[col].innerHTML+' to '+widths[col])
@@ -301,7 +426,8 @@
 	var table = document.getElementById(table_id);
 	for (var row=0; row<table.rows.length; row++)
 	{
-		table.rows[row].cells[0].innerHTML = '<div style="height: '+(heights[row]) +'px; overflow: hidden; background-color: inherit;">' + table.rows[row].cells[0].innerHTML + '</div>'
+		var width = this.MinWidths[0] ? this.MinWidths[0] + 'px' : 'auto';
+		table.rows[row].cells[0].innerHTML = '<div style="display: table-cell; line-height: '+(heights[row])+'px; height: '+(heights[row]) +'px; width: '+width+' overflow: hidden; background-color: inherit;">' + table.rows[row].cells[0].innerHTML + '</div>'
 		table.rows[row].cells[0].style.height =  heights[row]+'px';
 //		heights.push( table.rows[0].cells[0].offsetHeight )
 //		alert('get ('+row+')'+table.rows[0].cells[0].innerHTML+' height '+table.rows[0].cells[0].offsetHeight)
@@ -312,7 +438,8 @@
 GridScroller.prototype.SetWidths = function(table_id, widths, from, to)
 {
 	var table = document.getElementById(table_id);
-	for (var row=0; row<table.rows.length; row++)
+	table.style.layout = 'fixed'
+	for (var row=0; row<1; row++)
 	{
 		this.SetRowWidths(table_id, widths, row, from, to)
 	}
@@ -346,7 +473,7 @@
 	if (!table.rows[0]) return [];
 	for (var col=0; col<table.rows[0].cells.length; col++)
 	{
-		widths.push( table.rows[0].cells[col].clientWidth )
+		widths.push( table.rows[0].cells[col].offsetWidth )
 //		alert('get ('+col+')'+table.rows[0].cells[col].innerHTML+' width '+table.rows[0].cells[col].offsetWidth)
 	}
 	return widths;
@@ -385,6 +512,7 @@
 
 GridScroller.prototype.Resize = function(w,h)
 {
+	Profile('Resize 0')
 	if (typeof(w) == 'object') {
 		h = w[1];
 		w = w[0];
@@ -397,7 +525,7 @@
 	this.MainOuter.style.height = (this.Height)+'px'
 	this.MainOuter.style.width = (this.Width)+'px'
 
-	var data_width = this.HeadTable.offsetWidth;
+	var data_width = this.DataTable.offsetWidth + this.LeftWidth;
 	var data_height = this.DataHeight + this.HeadHeight + this.FooterHeight;
 
 	scroller_height = data_width > this.Width ? this.ScrollerH : 0;
@@ -406,15 +534,14 @@
 
 //	alert('min: '+this.MinDataWidth+' pos: '+pos[0]+','+pos[1]+' scroller W x H: '+scroller_width+' x '+scroller_height+' will resize to '+this.Width+' x '+this.Height+' data: '+data_width+' x '+data_height)
 
-	this.TheGrid.style.width = (this.Width - scroller_width) + 'px';
-	this.TheGrid.style.height = (this.Height - scroller_height) + 'px';
-
 	this.TheGrid.style.left = (pos[0])+ 'px'
 	this.TheGrid.style.top = (pos[1]) + 'px'
 
 	this.HeadOuter.style.width = (this.Width -scroller_width -this.LeftWidth)+ 'px';
 	this.DataOuter.style.width = (this.Width -scroller_width -this.LeftWidth)+ 'px';
 
+	Profile('Resize 0.3')
+
 	if (this.LeftCells != 0) {
 		this.LeftHeaderOuter.style.width = (this.LeftWidth) + 'px'
 		this.LeftDataOuter.style.width = (this.LeftWidth) + 'px'
@@ -423,23 +550,42 @@
 		}
 	}
 
+	Profile('Resize 1')
+
 	if (this.HasFooter()) {
 		this.FooterOuter.style.width = (this.Width -scroller_width -this.LeftWidth)+ 'px';
 	}
 
+	Profile('Resize 1.1')
+
 	if (data_height < this.Height - scroller_height) {
 		var adjusted_data_height = data_height - this.HeadHeight - this.FooterHeight
 	}
 	else {
 		var adjusted_data_height = this.Height - this.HeadHeight - this.FooterHeight - scroller_height
 	}
+
+	Profile('Resize 1.2')
+
 	this.DataOuter.style.height = adjusted_data_height + 'px'
 	if (this.LeftCells != 0) {
 		this.LeftDataOuter.style.height = adjusted_data_height + 'px'
 	}
 
+	Profile('Resize 2')
+
 	this.MainScroller.style.width = (this.HeadTable.offsetWidth + this.LeftWidth)+'px'
 	this.MainScroller.style.height = ( this.DataTable.offsetHeight + this.HeadHeight + this.FooterHeight)+'px'
+
+
+	Profile('Resize 0.1')
+
+	this.TheGrid.style.width = (this.Width - scroller_width) + 'px';
+	this.TheGrid.style.height = (this.Height - scroller_height) + 'px';
+
+	Profile('Resize 0.2')
+
+	Profile('Full resize')
 }
 
 GridScroller.prototype.SyncScroll = function()
@@ -473,7 +619,7 @@
 		var left_data = this.CreateScroller( this.CreateTable( this.GetLeftData(), 'left_data_'+this.GridId), 20, 10, 'left_data_'+this.GridId, true, 5 )
 		var left_footer = this.CreateScroller( this.CreateTable( this.GetLeftFooter(), 'left_footer_'+this.GridId), 20, 10, 'left_footer_'+this.GridId, true, 5 )
 		o += '<table style="width: 100%; border-collapse: collapse;">'
-		o += '<tr><td style="vertical-align: top; margin: 0px; padding: 0px">' + left_header + '</td>'
+		o += '<tr><td style="vertical-align: top; margin: 0px; padding: 0px;">' + left_header + '</td>'
 		o += '<td style="vertical-align: top; margin: 0px; padding: 0px;">' + header + '</td></tr>'
 		o += '<tr><td style="vertical-align: top; margin: 0px; padding: 0px">' + left_data + '</td>'
 		o += '<td style="vertical-align: top; margin: 0px; padding: 0px">' + data + '</td></tr>'
@@ -500,7 +646,7 @@
 
 GridScroller.prototype.CreateTable = function(content, id)
 {
-	return '<table style="width: 100%;" id="'+id+'">'+content+'</table>';
+	return '<table style="width: 100%" id="'+id+'">'+content+'</table>';
 }
 
 GridScroller.prototype.CreateScroller = function(content, w, h, id, hidden, z)
@@ -536,22 +682,12 @@
 	for (var row in this.Header) {
 		o +='<tr class="grid-header-row grid-header-row-'+row+'">'
 		for (var col=0; col<this.LeftCells; col++) {
-			o += '<td class="grid-header-'+col+'">'+this.Header[row][col]+'</td>'
+			width = this.MinWidths[col] ? this.MinWidths[col] + 'px' : 'auto';
+			o += '<td class="grid-header-col-'+col+'"><div class="grid-cell-div" style="width: '+width+';">'+this.Header[row][col]+'</div></td>'
 		}
-		o += '<td class="grid-header-last-cell" style="width: auto"><img src="'+this.Spacer+'" width="1" height="1" alt=""/></td>'
 		o += '</tr>'
 	}
 	return o
-
-	var o = '';
-
-	o += '<tr class="grid-header-row">'
-	for (var col=0; col<this.LeftCells; col++) {
-		o += '<td class="grid-header-col-'+col+'">'+this.Header[col]+'</td>'
-	}
-	o += '</tr>'
-
-	return o
 }
 
 GridScroller.prototype.GetLeftData = function()
@@ -563,7 +699,8 @@
 		o += even ? '<tr class="grid-row grid-row-even grid-row-'+row+'" '+id+'>' : '<tr class="grid-row grid-row-'+row+'" '+id+'>'
 		even = !even;
 		for (var col=0; col<this.LeftCells; col++) {
-			o += '<td class="grid-col-'+col+'">'+this.Data[row][col]+'</td>'
+			width = this.MinWidths[col] ? this.MinWidths[col] + 'px' : 'auto';
+			o += '<td class="grid-col-'+col+'"><div class="grid-cell-div" style="width: '+width+';">'+this.Data[row][col]+'</div></td>'
 		}
 		o += '</tr>'
 	}
@@ -577,7 +714,8 @@
 	if (this.HasFooter()) {
 		o += '<tr class="grid-footer-row">'
 		for (var col=0; col<this.LeftCells; col++) {
-			o += '<td class="grid-footer-col-'+col+'">'+this.Footer[col]+'</td>'
+			width = this.MinWidths[col] ? this.MinWidths[col] + 'px' : 'auto';
+			o += '<td class="grid-footer-col-'+col+'"><div class="grid-cell-div" style="width: '+width+';">'+this.Footer[col]+'</div></td>'
 		}
 		o += '</tr>'
 	}
@@ -590,9 +728,10 @@
 	for (var row in this.Header) {
 		o +='<tr class="grid-header-row grid-header-row-'+row+'">'
 		for (var col=this.LeftCells; col<this.Header[row].length; col++) {
-			o += '<td class="grid-header-'+col+'">'+this.Header[row][col]+'</td>'
+			width = this.MinWidths[col] ? this.MinWidths[col] + 'px' : 'auto';
+			o += '<td class="grid-header-col-'+col+'"><div class="grid-cell-div" style="width: '+width+';">'+this.Header[row][col]+'</div></td>'
 		}
-		o += '<td class="grid-header-last-cell" style="width: auto"><img src="'+this.Spacer+'" width="1" height="1" alt=""/></td>'
+		o += '<td class="grid-header-last-cell"><img src="'+this.Spacer+'" width="1" height="1" alt=""/></td>'
 		o += '</tr>'
 	}
 	return o
@@ -611,14 +750,17 @@
 {
 	var o = '';
 	var even = false;
+	var width;
+
 	for (var row in this.Data) {
 		var id = this.IDs[row] ? 'id="'+this.IDs[row]+'"' : '';
 		o += even ? '<tr class="grid-row grid-row-even grid-row-'+row+'" '+id+' sequence="'+(row+1)+'">' : '<tr class="grid-row grid-row-'+row+'" '+id+' sequence="'+(row+1)+'">'
 		even = !even;
 		for (var col=this.LeftCells; col<this.Data[row].length; col++) {
-			o += '<td class="grid-col-'+col+'">'+this.Data[row][col]+'</td>'
+			width = this.MinWidths[col] ? this.MinWidths[col] + 'px' : 'auto';
+			o += '<td class="grid-col-'+col+'"><div class="grid-cell-div" style="width: '+width+';">'+this.Data[row][col]+'</div></td>'
 		}
-		o += '<td class="grid-data-last-cell" style="width: auto"><img src="'+this.Spacer+'" width="1" height="1" alt=""/></td>'
+		o += '<td class="grid-data-last-cell"><img src="'+this.Spacer+'" width="1" height="1" alt=""/></td>'
 		o += '</tr>'
 	}
 	return o
@@ -628,9 +770,10 @@
 {
 	var o = '<tr class="grid-footer-row">'
 	for (var col=this.LeftCells; col<this.Footer.length; col++) {
+		width = this.MinWidths[col] ? this.MinWidths[col] + 'px' : 'auto';
 		o += '<td class="grid-footer-col-'+col+'">'+this.Footer[col]+'</td>'
 	}
-	o += '<td class="grid-footer-last-cell" style="width: auto"><img src="'+this.Spacer+'" width="1" height="1" alt=""/></td>'
+	o += '<td class="grid-footer-last-cell" style="width: 100%"><img src="'+this.Spacer+'" width="1" height="1" alt=""/></td>'
 	o += '</tr>'
 	return o
 }