Index: branches/unlabeled/unlabeled-1.1.2/core/admin_templates/js/grid_scroller.js
===================================================================
diff -u -r6924 -r6938
--- branches/unlabeled/unlabeled-1.1.2/core/admin_templates/js/grid_scroller.js	(.../grid_scroller.js)	(revision 6924)
+++ branches/unlabeled/unlabeled-1.1.2/core/admin_templates/js/grid_scroller.js	(.../grid_scroller.js)	(revision 6938)
@@ -23,12 +23,41 @@
 	return [curleft,curtop];
 }
 
+function getDimensions(obj) {
+	var style,correction,height
+	if (obj.currentStyle) {
+		style = obj.currentStyle;
+	}
+	else {
+		style = getComputedStyle(obj,'');
+	}
+	padding = [parseInt(style.paddingTop), parseInt(style.paddingRight), parseInt(style.paddingBottom), parseInt(style.paddingLeft)]
+	border = [parseInt(style.borderTopWidth), parseInt(style.borderRightWidth), parseInt(style.borderBottomWidth), parseInt(style.borderLeftWidth)]
+	for (var i in padding)  if ( isNaN( padding[i] ) ) padding[i] = 0
+	for (var i in border)  if ( isNaN( border[i] ) ) border[i] = 0
+
+	correction =  padding[0] + padding[2]; // + border[0] + border[2]
+
+	height = obj.clientHeight - correction
+
+	var result = new Object();
+	result.innerHeight = obj.clientHeight - padding[0] - padding[2];
+	result.innerWidth = obj.clientWidth - padding[1] - padding[3];
+
+	return result;
+}
+
 function GridScroller(grid_id, w, h)
 {
 	this.GridId = grid_id
-	this.FrozenLeft = 0;
-	this.FrozenBottom = 0;
 
+	this.Footer = false;
+
+	this.LeftCells = 0;
+	this.LeftWidth = 0;
+
+	this.BottomOffset = 5;
+
 	this.Width = w;
 	this.Height = h;
 
@@ -72,20 +101,36 @@
 	this.MainScroller = document.getElementById('main_scroller_'+this.GridId)
 	this.TheGrid = document.getElementById(this.GridId );
 
-	this.DataTable = document.getElementById('data_'+this.GridId);
 	this.HeadTable = document.getElementById('header_'+this.GridId);
-	this.FooterTable = document.getElementById('footer_'+this.GridId);
 	this.HeadScroller = document.getElementById('inner_header_'+this.GridId);
-	this.DataScroller = document.getElementById('inner_data_'+this.GridId);
-	this.FooterScroller = document.getElementById('inner_footer_'+this.GridId);
 	this.HeadOuter = document.getElementById('outer_header_'+this.GridId);
+
+	this.DataTable = document.getElementById('data_'+this.GridId);
+	this.DataScroller = document.getElementById('inner_data_'+this.GridId);
 	this.DataOuter = document.getElementById('outer_data_'+this.GridId);
-	this.FooterOuter = document.getElementById('outer_footer_'+this.GridId);
 
-	this.HeadSpacer = this.DataTable.rows[0].cells[this.HeadTable.rows[0].cells.length-1];
-	this.DataSpacer = this.DataTable.rows[0].cells[this.DataTable.rows[0].cells.length-1];
-	this.FooterSpacer = this.DataTable.rows[0].cells[this.FooterTable.rows[0].cells.length-1];
+	if (this.HasFooter) {
+		this.FooterTable = document.getElementById('footer_'+this.GridId);
+		this.FooterScroller = document.getElementById('inner_footer_'+this.GridId);
+		this.FooterOuter = document.getElementById('outer_footer_'+this.GridId);
+	}
 
+	if (this.LeftCells != 0) {
+		this.LeftHeaderTable = document.getElementById('left_header_'+this.GridId);
+		this.LeftHeaderScroller = document.getElementById('inner_left_header_'+this.GridId);
+		this.LeftHeaderOuter = document.getElementById('outer_left_header_'+this.GridId);
+
+		this.LeftDataTable = document.getElementById('left_data_'+this.GridId);
+		this.LeftDataScroller = document.getElementById('inner_left_data_'+this.GridId);
+		this.LeftDataOuter = document.getElementById('outer_left_data_'+this.GridId);
+
+		if (this.HasFooter) {
+			this.LeftFooterTable = document.getElementById('left_footer_'+this.GridId);
+			this.LeftFooterScroller = document.getElementById('inner_left_footer_'+this.GridId);
+			this.LeftFooterOuter = document.getElementById('outer_left_footer_'+this.GridId);
+		}
+	}
+
 	this.DataScroller.TheGrid = this;
 	this.MainInner.TheGrid = this;
 
@@ -98,35 +143,81 @@
 }
 
 GridScroller.prototype.UpdateColWidths = function() {
+
+	var data_cf = 1;
+	var count = 1;
+
+	var header_cf = 0.2;
+	var footer_cf = 0.2;
+
+
 	var header_widths = this.GetWidths('header_'+this.GridId);
+	data_cf -= header_cf;
+	count++;
+
 	var data_widths = this.GetWidths('data_'+this.GridId);
-	var footer_widths = this.GetWidths('footer_'+this.GridId);
 
+	if (this.HasFooter()) {
+		var footer_widths = this.GetWidths('footer_'+this.GridId);
+		data_cf -= footer_cf;
+		count++;
+	}
+
 	var widths = new Array();
 	var total = 0;
+
 	for (var i=0; i<header_widths.length; i++)
 	{
 //		target = Math.max( Math.max(header_widths[i], data_widths[i]), footer_widths[i]);
-		target = Math.round( (header_widths[i]*0.2*3 + footer_widths[i]*0.2*3 + data_widths[i]*0.6*3) / 3 )
+		var sum = header_widths[i]*header_cf*count + data_widths[i]*data_cf*count;
+//		alert('sum = '+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)
+		}
+		target = Math.round( sum / count )
 		widths.push(target);
 //		alert('target: '+target)
 		total += target;
 	}
-	total += 0;
+	this.MinDataWidth = total;
 	this.SetRowWidths('header_'+this.GridId, widths, total);
 	this.SetWidths('data_'+this.GridId, widths, total);
-	this.SetRowWidths('footer_'+this.GridId, widths, total);
 
+	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));
+		if (this.HasFooter()) {
+			this.SetHeights('left_footer_'+this.GridId, this.GetHeights('footer_'+this.GridId));
+		}
+
+	}
+
 	this.HeadTable.style.width = '100%'
-	this.FooterTable.style.width = '100%'
 
+	if (this.HasFooter()) {
+		this.SetRowWidths('footer_'+this.GridId, widths, total);
+		this.FooterTable.style.width = '100%'
+		this.FooterHeight = this.FooterTable.offsetHeight;
+		this.FooterOuter.style.height = this.FooterHeight + 'px'
+	}
+	else {
+		this.FooterHeight = 0;
+	}
+
 	this.HeadHeight = this.HeadTable.offsetHeight;
 	this.DataHeight = this.DataTable.offsetHeight;
-	this.FooterHeight = this.FooterTable.offsetHeight;
-
 	this.HeadOuter.style.height = (this.HeadHeight) + 'px'
-	this.FooterOuter.style.height = this.FooterHeight + 'px'
 
+	if (this.LeftCells != 0) {
+		this.LeftWidth = Math.max(this.LeftHeaderTable.offsetWidth, this.LeftDataTable.offsetWidth)
+		this.LeftHeaderOuter.style.height = (this.HeadHeight) + 'px'
+		if (this.HasFooter()) {
+			this.LeftFooterOuter.style.height = (this.FooterHeight) + 'px'
+			this.LeftWidth = Math.max(this.LeftWidth, this.LeftFooterTable.offsetWidth);
+		}
+	}
+
 	this.MainInner.onscroll = function() {
 		this.TheGrid.SyncScroll()
 	}
@@ -156,52 +247,74 @@
 	var inner_width = 0;
 	for (var col=0; col<table.rows[row].cells.length-1; col++)
 	{
-		table.rows[row].cells[col].innerHTML = '<div style="width: '+(widths[col]) +'px; overflow: hidden; border: 1px solid red;">' + table.rows[row].cells[col].innerHTML + '</div>'
+		table.rows[row].cells[col].innerHTML = '<div style="width: '+(widths[col]) +'px; overflow: hidden; background-color: inherit;">' + table.rows[row].cells[col].innerHTML + '</div>'
 		table.rows[row].cells[col].style.width =  widths[col]+'px';
 //		alert('set ('+col+')'+table.rows[0].cells[col].innerHTML+' to '+widths[col])
 	}
 }
 
+GridScroller.prototype.SetHeights = function(table_id, heights)
+{
+	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>'
+		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)
+	}
+//	return heights;
+}
+
 GridScroller.prototype.SetWidths = function(table_id, widths, total)
 {
-	table = document.getElementById(table_id);
+	var table = document.getElementById(table_id);
 	for (var row=0; row<table.rows.length; row++)
 	{
 		this.SetRowWidths(table_id, widths, total, row)
 	}
 	table.style.width = '100%'
 }
 
+GridScroller.prototype.GetHeights = function(table_id)
+{
+	var table = document.getElementById(table_id);
+	var heights = new Array();
+	var style,height,correction;
+	for (var row=0; row<table.rows.length; row++)
+	{
+			height = getDimensions( table.rows[row].cells[0] ).innerHeight
+			heights.push( height )
+//			alert('get ('+row+')'+table.rows[row].cells[0].innerHTML+' height (offset/client/computed (coorection)): '+table.rows[row].cells[0].offsetHeight + '/' + table.rows[row].cells[0].clientHeight + '/ ' +height + ' ('+correction+')')
+	}
+	return heights;
+}
+
+
 GridScroller.prototype.GetWidths = function(table_id)
 {
 	var table = document.getElementById(table_id);
 	table.style.width = 'auto'
-//	alert('auto width of '+table_id+': '+table.offsetWidth)
 	if (table.offsetWidth < document.body.clientWidth * 0.8) {
 		table.style.width = Math.round( document.body.clientWidth * 0.8 ) + 'px'
 	}
-//	alert('auto width of '+table_id+': '+table.offsetWidth)
 	var widths = new Array();
 	for (var col=0; col<table.rows[0].cells.length; col++)
 	{
-		widths.push( table.rows[0].cells[col].offsetWidth )
+		widths.push( table.rows[0].cells[col].clientWidth )
 //		alert('get ('+col+')'+table.rows[0].cells[col].innerHTML+' to '+table.rows[0].cells[col].offsetWidth)
 	}
 	return widths;
 }
 
 GridScroller.prototype.GetAutoSize = function()
 {
-//	this.DataTable.style.width = 'auto'
-//	this.DataTable.style.width = 'auto'
 	this.MainOuter.style.width = 'auto'
 	var w = this.MainInner.offsetWidth;
 	var h = document.body.clientHeight;
 
-	alert('w: '+w+' doc width '+document.body.clientWidth)
-
 	var pos = findPos(this.MainOuter);
-	h -= pos[1] + 150;
+	h -= pos[1] + this.BottomOffset;
 
 	return [w,h]
 }
@@ -231,53 +344,68 @@
 	if (w) this.Width = w;
 	if (h) this.Height = h;
 
+	pos = findPos(this.Dot)
+
+	this.MainOuter.style.height = (this.Height)+'px'
+	this.MainOuter.style.width = (this.Width)+'px'
+
 	var data_width = this.HeadTable.offsetWidth;
 	var data_height = this.DataHeight + this.HeadHeight + this.FooterHeight;
 
-//	alert(this.HeadHeight + ' / ' + this.DataHeight + ' / ' + this.FooterHeight)
-
-//	alert('data_width: '+data_width+' theGrid: '+this.TheGrid.clientWidth + ' offset '+this.TheGrid.offsetWidth+' this width: '+this.Width)
-//	alert('data_height: '+data_height+' theGrid: '+this.TheGrid.clientHeight + ' offset '+this.TheGrid.offsetHeight+' this height: '+this.Height)
-
 	scroller_height = data_width > this.Width ? this.ScrollerH : 0;
 	scroller_width =  data_height > this.Height - scroller_height ? this.ScrollerW : 0;
 	scroller_height = data_width > this.Width - scroller_width ? this.ScrollerH : 0;
 
-	pos = findPos(this.Dot)
+//	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.MainOuter.style.height = (this.Height)+'px'
-//	this.MainOuter.style.width = (this.Width)+'px'
-
-	alert('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)+ 'px';
-	this.DataOuter.style.width = (this.Width -scroller_width)+ 'px';
-	this.FooterOuter.style.width = (this.Width -scroller_width)+ 'px';
+	this.HeadOuter.style.width = (this.Width -scroller_width -this.LeftWidth)+ 'px';
+	this.DataOuter.style.width = (this.Width -scroller_width -this.LeftWidth)+ 'px';
 
+	if (this.LeftCells != 0) {
+		this.LeftHeaderOuter.style.width = (this.LeftWidth) + 'px'
+		this.LeftDataOuter.style.width = (this.LeftWidth) + 'px'
+		if (this.HasFooter()) {
+			this.LeftFooterOuter.style.width = (this.LeftWidth) + 'px'
+		}
+	}
+
+	if (this.HasFooter()) {
+		this.FooterOuter.style.width = (this.Width -scroller_width -this.LeftWidth)+ 'px';
+	}
+
 	if (data_height < this.Height - scroller_height) {
-		this.DataOuter.style.height = (data_height - this.HeadHeight - this.FooterHeight) + 'px'
+		var adjusted_data_height = data_height - this.HeadHeight - this.FooterHeight
 	}
 	else {
-		this.DataOuter.style.height = (this.Height - this.HeadHeight - this.FooterHeight - scroller_height) + 'px'
+		var adjusted_data_height = this.Height - this.HeadHeight - this.FooterHeight - scroller_height
 	}
+	this.DataOuter.style.height = adjusted_data_height + 'px'
+	if (this.LeftCells != 0) {
+		this.LeftDataOuter.style.height = adjusted_data_height + 'px'
+	}
 
-	this.MainScroller.style.width = (this.HeadTable.offsetWidth)+'px'
-	this.MainScroller.style.height = ( this.DataTable.offsetHeight + this.HeadTable.offsetHeight + this.FooterTable.offsetHeight)+'px'
+	this.MainScroller.style.width = (this.HeadTable.offsetWidth + this.LeftWidth)+'px'
+	this.MainScroller.style.height = ( this.DataTable.offsetHeight + this.HeadHeight + this.FooterHeight)+'px'
 }
 
 GridScroller.prototype.SyncScroll = function()
 {
 	this.HeadScroller.scrollLeft = this.MainInner.scrollLeft;
 	this.DataScroller.scrollLeft = this.MainInner.scrollLeft;
-	this.FooterScroller.scrollLeft = this.MainInner.scrollLeft;
+	if (this.HasFooter()) {
+		this.FooterScroller.scrollLeft = this.MainInner.scrollLeft;
+	}
 
 	this.DataScroller.scrollTop = this.MainInner.scrollTop;
+	if (this.LeftCells != 0) {
+		this.LeftDataScroller.scrollTop = this.MainInner.scrollTop;
+	}
 }
 
 GridScroller.prototype.GetHTML = function()
@@ -287,16 +415,41 @@
 	var o = '';
 	o += this.CreateScroller( '<div id="main_scroller_'+this.GridId+'" style="background-color: green; position: relative; width: auto;"><img src="'+this.Spacer+'" id="dot_'+this.GridId+'" width="200" height="200"><br/><br/></div>', 100, 100, 'main_'+this.GridId, false, 1 );
 
-	o += '<div id="'+this.GridId+'" class="grid-container" style="top: 0px; background-color: yellow; visibility: visible; z-index: 10; width: auto; height: '+300+'px; position: absolute; overflow: hidden;">';
+	o += '<div id="'+this.GridId+'" class="grid-container" style="top: 0px; visibility: hidden; z-index: 10; width: auto; height: '+300+'px; position: absolute; overflow: hidden;">';
 	var header = this.CreateScroller( this.CreateTable( this.GetHeaderCells(), 'header_'+this.GridId), 100, 10, 'header_'+this.GridId, true, 5 )
 	var data = this.CreateScroller( this.CreateTable( this.GetDataCells(), 'data_'+this.GridId ), 100, 10, 'data_'+this.GridId, true, 5  )
-	var footer = this.CreateScroller( this.CreateTable( this.GetFooterCells(), 'footer_'+this.GridId ), 100, 10, 'footer_'+this.GridId, true, 5 )
-	o += header + data + footer
+	var footer = this.HasFooter() ? this.CreateScroller( this.CreateTable( this.GetFooterCells(), 'footer_'+this.GridId ), 100, 10, 'footer_'+this.GridId, true, 5 ) : '';
+
+	if (this.LeftCells != 0) {
+		var left_header = this.CreateScroller( this.CreateTable( this.GetLeftHeader(), 'left_header_'+this.GridId), 20, 10, 'left_header_'+this.GridId, true, 5 )
+		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 += '<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>'
+
+		if (this.HasFooter()) {
+			o += '<tr><td style="vertical-align: top; margin: 0px; padding: 0px">' + left_footer + '</td>'
+			o += '<td style="vertical-align: top; margin: 0px; padding: 0px">' + footer + '</td></tr>'
+		}
+		o += '</table>'
+	}
+	else {
+		o += header + data + footer;
+	}
 	o += '</div>';
 
 	return o
 }
 
+
+GridScroller.prototype.HasFooter = function()
+{
+	return (this.Footer != false)
+}
+
 GridScroller.prototype.CreateTable = function(content, id)
 {
 	return '<table style="width: 100%;" id="'+id+'">'+content+'</table>';
@@ -329,13 +482,55 @@
 	return o
 }
 
+GridScroller.prototype.GetLeftHeader = function()
+{
+	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()
+{
+	var o = '';
+	var even = false;
+	for (var row in this.Data) {
+		o += even ? '<tr class="grid-row grid-row-even grid-row-'+row+'">' : '<tr class="grid-row grid-row-'+row+'">'
+		even = !even;
+		for (var col=0; col<this.LeftCells; col++) {
+			o += '<td class="grid-col-'+col+'">'+this.Data[row][col]+'</td>'
+		}
+		o += '</tr>'
+	}
+
+	return o
+}
+
+GridScroller.prototype.GetLeftFooter = function()
+{
+	var o = '';
+	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>'
+		}
+		o += '</tr>'
+	}
+	return o
+}
+
 GridScroller.prototype.GetHeaderCells = function()
 {
 	var o = '<tr class="grid-header-row">'
-	for (var col=0; col<this.Header.length; col++) {
-		o += '<td>'+this.Header[col]+'</td>'
+	for (var col=this.LeftCells; col<this.Header.length; col++) {
+		o += '<td class="grid-header-col-'+col+'">'+this.Header[col]+'</td>'
 	}
-	o += '<td style="width: auto">H&nbsp;</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
 }
@@ -346,12 +541,12 @@
 	var o = '';
 	var even = false;
 	for (var row in this.Data) {
-		o += even ? '<tr class="grid-row grid-row-even">' : '<tr class="grid-row">'
+		o += even ? '<tr class="grid-row grid-row-even grid-row-'+row+'">' : '<tr class="grid-row grid-row-'+row+'">'
 		even = !even;
-		for (var col=0; col<this.Data[row].length; col++) {
-			o += '<td>'+this.Data[row][col]+'</td>'
+		for (var col=this.LeftCells; col<this.Data[row].length; col++) {
+			o += '<td class="grid-col-'+col+'">'+this.Data[row][col]+'</td>'
 		}
-		o += '<td style="width: auto">D&nbsp;</td>'
+		o += '<td class="grid-data-last-cell" style="width: auto"><img src="'+this.Spacer+'" width="1" height="1" alt=""/></td>'
 		o += '</tr>'
 	}
 	return o
@@ -360,10 +555,10 @@
 GridScroller.prototype.GetFooterCells = function()
 {
 	var o = '<tr class="grid-footer-row">'
-	for (var col=0; col<this.Footer.length; col++) {
-		o += '<td>'+this.Footer[col]+'</td>'
+	for (var col=this.LeftCells; col<this.Footer.length; col++) {
+		o += '<td class="grid-footer-col-'+col+'">'+this.Footer[col]+'</td>'
 	}
-	o += '<td style="width: auto">F&nbsp;</td>'
+	o += '<td class="grid-footer-last-cell" style="width: auto"><img src="'+this.Spacer+'" width="1" height="1" alt=""/></td>'
 	o += '</tr>'
 	return o
 }