Index: branches/unlabeled/unlabeled-1.1.2/core/admin_templates/js/grid_scroller.js
===================================================================
diff -u
--- branches/unlabeled/unlabeled-1.1.2/core/admin_templates/js/grid_scroller.js	(revision 0)
+++ branches/unlabeled/unlabeled-1.1.2/core/admin_templates/js/grid_scroller.js	(revision 6920)
@@ -0,0 +1,461 @@
+function preg_print_pre(obj, reg)
+{
+	if (!reg) reg = /.*/;
+	var p = ''
+	for (var prop in obj) {
+		if (prop.match(reg) ) {
+			p += prop + ': '+obj[prop] + '\n'
+		}
+	}
+	alert(p)
+}
+
+function findPos(obj) {
+	var curleft = curtop = 0;
+	if (obj.offsetParent) {
+		curleft = obj.offsetLeft
+		curtop = obj.offsetTop
+		while (obj = obj.offsetParent) {
+			curleft += obj.offsetLeft
+			curtop += obj.offsetTop
+		}
+	}
+	return [curleft,curtop];
+}
+
+function GridScroller(grid_id, w, h)
+{
+	this.GridId = grid_id
+	this.FrozenLeft = 0;
+	this.FrozenBottom = 0;
+
+	this.Width = w;
+	this.Height = h;
+
+	this.AutoWidth = true;
+
+	this.ScrollerW = 0;
+	this.ScrollerH = 0;
+}
+
+GridScroller.prototype.Render = function(id)
+{
+	html = this.GetHTML();
+	if (id && id != '') {
+		document.getElementById(id).innerHTML = html;
+	}
+	else {
+		document.write(html);
+	}
+	document.body.style.overflow = 'hidden';
+	this.SetReferences()
+
+	this.ScrollerW = this.MainInner.offsetWidth - this.MainInner.clientWidth
+	this.ScrollerH = this.MainInner.offsetHeight - this.MainInner.clientHeight
+
+	this.UpdateColWidths();
+	if (this.Width == 'auto') {
+		this.Resize( this.GetAutoSize() );
+	}
+	else {
+		this.Resize();
+	}
+	this.TheGrid.style.visibility = 'visible'
+	this.MainScroller.style.visibility = 'visible'
+}
+
+GridScroller.prototype.SetReferences = function() {
+	this.MainOuter = document.getElementById('outer_main_'+this.GridId );
+	this.MainInner = document.getElementById('inner_main_'+this.GridId)
+	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.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];
+
+	this.DataScroller.TheGrid = this;
+	this.MainInner.TheGrid = this;
+
+	this.Dot = document.getElementById('dot_'+this.GridId)
+
+	// this.MainOuter.style.border = '5px solid red';
+	// this.MainOuter.style.padding = '30px';
+
+	this.MainOuter.className = 'grid-scrollable'
+}
+
+GridScroller.prototype.UpdateColWidths = function() {
+	var header_widths = this.GetWidths('header_'+this.GridId);
+	var data_widths = this.GetWidths('data_'+this.GridId);
+	var footer_widths = this.GetWidths('footer_'+this.GridId);
+
+	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])+10;
+		widths.push(target);
+//		alert('target: '+target)
+		total += target;
+	}
+	total += 150;
+	this.SetWidths('header_'+this.GridId, widths, total);
+	this.SetWidths('data_'+this.GridId, widths, total);
+	this.SetWidths('footer_'+this.GridId, widths, total);
+
+	this.MainInner.onscroll = function() {
+		this.TheGrid.SyncScroll()
+	}
+
+	if (document.all) {
+		this.DataScroller.onmousewheel = function(ev) {
+			var e = document.all ? window.event : ev;
+			this.TheGrid.MainInner.scrollTop += -e.wheelDelta/2
+			this.TheGrid.SyncScroll();
+		}
+	}
+	else {
+		this.DataScroller.addEventListener("DOMMouseScroll", function(ev) {
+			var e = document.all ? window.event : ev;
+			this.TheGrid.MainInner.scrollTop += e.detail*10
+			this.TheGrid.SyncScroll();
+		}, false);
+	}
+}
+
+GridScroller.prototype.SetWidths = function(table_id, widths, total)
+{
+	table = document.getElementById(table_id);
+	table.style.width = total+'px';
+	for (var col=0; col<table.rows[0].cells.length; col++)
+	{
+		table.rows[0].cells[col].style.width =  widths[col]+'px';
+		table.rows[0].cells[col].minWidth =  widths[col];
+//		alert('set ('+col+')'+table.rows[0].cells[col].innerHTML+' to '+widths[col])
+	}
+}
+
+GridScroller.prototype.GetWidths = function(table_id)
+{
+	var table = document.getElementById(table_id);
+	table.style.width = 'auto'
+	var widths = new Array();
+	for (var col=0; col<table.rows[0].cells.length; col++)
+	{
+		widths.push( table.rows[0].cells[col].offsetWidth )
+	}
+	return widths;
+}
+
+GridScroller.prototype.GetAutoSize = function()
+{
+//	this.TheGrid.style.width = '100%';
+//	var w = this.TheGrid.offsetWidth;
+
+	this.MainOuter.style.width = 'auto'
+
+//	alert(this.MainInner.offsetWidth - this.MainInner.clientWidth)
+//	alert(this.MainInner.offsetHeight - this.MainInner.clientHeight)
+
+	var w = this.MainInner.offsetWidth;
+	var h = document.body.clientHeight;
+
+	var pos = findPos(this.MainOuter);
+	h -= pos[1] + 100;
+
+//	alert('got auto size: '+w+' x '+h)
+
+	return [w,h]
+}
+
+
+GridScroller.prototype.AutoResize = function()
+{
+	var obj = this;
+	if (this.ResizeHappening && this.ResizeTimer) {
+		window.clearTimeout(this.ResizeTimer);
+		this.ResizeTimer = false;
+	}
+	this.ResizeHappening = true;
+	this.ResizeTimer = window.setTimeout(function() {
+			obj.Resize( obj.GetAutoSize() );
+			obj.ResizeHappening = false;
+//			alert('resized')
+		}, 300)
+}
+
+GridScroller.prototype.Resize = function(w,h)
+{
+	if (typeof(w) == 'object') {
+		h = w[1];
+		w = w[0];
+	}
+	if (w) this.Width = w;
+	if (h) this.Height = h;
+
+	var data_width = this.HeadTable.offsetWidth;
+	var data_height = this.DataTable.offsetHeight + this.HeadTable.offsetHeight + this.FooterTable.offsetHeight;
+
+//	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)
+
+	this.MainOuter.style.height = (this.Height)+'px'
+	this.MainOuter.style.width = (this.Width)+'px'
+
+//	alert('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.height = this.HeadTable.offsetHeight + 'px'
+
+	if (data_height < this.Height - scroller_height) {
+		this.DataOuter.style.height = (data_height - this.HeadTable.offsetHeight - this.FooterTable.offsetHeight) + 'px'
+	}
+	else {
+		this.DataOuter.style.height = (this.Height - this.HeadTable.offsetHeight - this.FooterTable.offsetHeight - scroller_height) + 'px'
+	}
+	this.FooterOuter.style.height = this.FooterTable.offsetHeight + 'px'
+
+	this.MainScroller.style.width = (this.HeadTable.offsetWidth)+'px'
+	this.MainScroller.style.height = ( this.DataTable.offsetHeight + this.HeadTable.offsetHeight + this.FooterTable.offsetHeight)+'px'
+}
+
+GridScroller.prototype.Test = function()
+{
+
+
+}
+
+GridScroller.prototype.OldResize = function(w,h)
+{
+	if (typeof(w) == 'object') {
+		h = w[1];
+		w = w[0];
+	}
+
+	var scroller_width = this.MainInner.offsetWidth - this.MainInner.clientWidth;
+	var scroller_height = this.MainInner.offsetHeight - this.MainInner.clientHeight;
+
+	var v_scroller = scroller_width == 0;
+	var h_scroller = scroller_height == 0;
+
+	var w_original = w;
+	var h_original = h;
+	w -= scroller_width;
+	h -= scroller_height;
+
+	alert('scroller W x H: '+scroller_width+' x '+scroller_height+' will resize to '+w+' x '+h)
+
+	if (w) this.Width = w;
+	if (h) this.Height = h;
+
+	this.HeadOuter.style.width = (this.Width)+ 'px';
+	this.DataOuter.style.width = (this.Width)+ 'px';
+	this.FooterOuter.style.width = (this.Width)+ 'px';
+
+	this.HeadOuter.style.height = this.HeadTable.offsetHeight + 'px'
+
+	var data_height = this.DataTable.offsetHeight + this.HeadTable.offsetHeight + this.FooterTable.offsetHeight;
+	if (data_height < this.Height) {
+		this.DataOuter.style.height = (data_height - this.HeadTable.offsetHeight - this.FooterTable.offsetHeight) + 'px'
+	}
+	else {
+		this.DataOuter.style.height = (this.Height - this.HeadTable.offsetHeight - this.FooterTable.offsetHeight) + 'px'
+	}
+	this.FooterOuter.style.height = this.FooterTable.offsetHeight + 'px'
+
+	/*var cur_spacer = this.DataSpacer.style.width;
+	var cur_width = this.DataTable.style.width;
+	alert('before: '+this.DataTable.offsetWidth)
+	this.DataSpacer.style.width = '100px'
+//	this.DataTable.style.width = '100%'
+	this.DataSpacer.style.width = 1 + 'px'
+	alert('now '+this.DataTable.offsetWidth)
+	var cur_width = this.DataTable.offsetWidth;
+	var new_width = Math.max(cur_width, this.Width);
+	alert('current width: '+this.DataTable.offsetWidth+' new: '+new_width)
+
+	this.DataTable.style.width = cur_width;
+	this.DataSpacer.style.width = cur_spacer;
+*/
+	/*if (cur_width != new_width) {
+		this.HeadSpacer.style.width = (new_width - cur_width)  + 'px';
+		this.DataSpacer.style.width = (new_width - cur_width)  + 'px';
+		this.FooterSpacer.style.width = (new_width - cur_width)  + 'px';
+		this.HeadTable.style.width = (new_width)  + 'px';
+		this.DataTable.style.width = (new_width)  + 'px';
+		this.FooterTable.style.width = (new_width)  + 'px';
+	}
+	else {
+		this.DataTable.style.width = cur_width;
+		this.DataSpacer.style.width = cur_spacer;
+	}*/
+
+	this.MainScroller.style.width = (this.HeadTable.offsetWidth - scroller_width)+'px'
+	this.MainScroller.style.height = ( this.DataTable.offsetHeight + this.HeadTable.offsetHeight + this.FooterTable.offsetHeight)+'px'
+
+	var correction_x = Math.round((this.MainOuter.offsetWidth - this.MainOuter.clientWidth) / 2);
+	var correction_y = Math.round((this.MainOuter.offsetHeight - this.MainOuter.clientHeight) / 2);
+
+	alert('corrections: '+correction_x+','+correction_y)
+
+	this.ResizeOuter(scroller_width, scroller_height)
+
+	this.MainOuter.style.width = (this.Width + scroller_width)+'px'
+	this.MainOuter.style.height = (this.Height + scroller_height)+'px'
+
+//	this.MainOuter.style.top = (this.TheGrid.offsetTop - correction_y ) + 'px';
+//	this.MainOuter.style.left = (this.TheGrid.offsetLeft - correction_x ) + 'px' ;
+
+	this.TheGrid.style.width = (this.Width)+ 'px';
+	this.TheGrid.style.height = (this.Height) + 'px'
+
+	preg_print_pre(findPos(this.MainOuter), /.*/i)
+	preg_print_pre(this.MainOuter.style , /padding/i)
+
+	this.TheGrid.style.top = this.MainOuter.offsetTop + 'px';
+
+
+	scroller_width = this.MainInner.offsetWidth - this.MainInner.clientWidth;
+	scroller_height = this.MainInner.offsetHeight - this.MainInner.clientHeight;
+	if ( (scroller_width == 0) != v_scroller || (scroller_height == 0) != h_scroller ) {
+		this.Resize(w_original,h_original);
+	}
+}
+
+GridScroller.prototype.SyncScroll = function()
+{
+	this.HeadScroller.scrollLeft = this.MainInner.scrollLeft;
+	this.DataScroller.scrollLeft = this.MainInner.scrollLeft;
+	this.FooterScroller.scrollLeft = this.MainInner.scrollLeft;
+
+	this.DataScroller.scrollTop = this.MainInner.scrollTop;
+}
+
+GridScroller.prototype.GetHTML = function()
+{
+	w = this.Width;
+	h = this.Height;
+	var o = '';
+	o += this.CreateScroller( '<div id="main_scroller_'+this.GridId+'" style="background-color: green; position: relative; width: auto;"><img src="core/admin_templates/img/spacer.gif" id="dot_'+this.GridId+'" width="200" height="200"><br/><br/></div>', 100, 100, 'main_'+this.GridId, false, 1 );
+
+	o += '<div id="'+this.GridId+'" style="top: 0px; background-color: yellow; 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
+	o += '</div>';
+
+	return o
+}
+
+GridScroller.prototype.CreateTable = function(content, id)
+{
+	return '<table style="width: auto" id="'+id+'">'+content+'</table>';
+}
+
+GridScroller.prototype.CreateScroller = function(content, w, h, id, hidden, z)
+{
+	if (hidden) {
+		overflow = 'hidden'
+	}
+	else {
+		overflow = 'auto'
+	}
+	if (!z) {
+		z = 0;
+	}
+	if (id && id != '') {
+		outer_id = 'id="outer_'+id+'"';
+		inner_id = 'id="inner_'+id+'"';
+	}
+	else {
+		outer_id = '';
+		inner_id = '';
+	}
+	var o = '';
+	o += '<div '+outer_id+' class="scroller-outer" style="z-index: '+z+'; width: '+w+'px; height: '+h+'px; overflow: hidden;">'
+	o += '<div '+inner_id+' class="scroller-inner" style="z-index: '+z+'; width: 100%; height: 100%; overflow: '+overflow+'; position: relative">'
+	o += content
+	o += '</div></div>'
+	return o
+}
+
+GridScroller.prototype.GetHeaderCells = function()
+{
+	var o = '<tr class="grid-header-row">'
+	for (var col=0; col<this.Header.length; col++) {
+		o += '<td nowrap="nowrap">'+this.Header[col]+'</td>'
+	}
+	o += '<td nowrap="nowrap">Header</td>'
+	o += '</tr>'
+	return o
+}
+
+
+GridScroller.prototype.GetDataCells = function()
+{
+	var o = '';
+	var even = false;
+	for (var row in this.Data) {
+		o += even ? '<tr class="grid-row grid-row-even">' : '<tr class="grid-row">'
+		even = !even;
+		for (var col=0; col<this.Data[row].length; col++) {
+			o += '<td nowrap="nowrap">'+this.Data[row][col]+'</td>'
+		}
+		o += '<td nowrap="nowrap">D&nbsp;</td>'
+		o += '</tr>'
+	}
+	return o
+}
+
+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>'
+	}
+	o += '<td nowrap="nowrap">F&nbsp;</td>'
+	o += '</tr>'
+	return o
+}
+
+GridScroller.prototype.SetData = function(a_data)
+{
+	this.Data = a_data;
+}
+
+GridScroller.prototype.SetHeader = function(a_header)
+{
+	this.Header = a_header;
+}
+
+GridScroller.prototype.SetFooter = function(a_footer)
+{
+	this.Footer = a_footer;
+}
\ No newline at end of file