function setUpScrolling(table, width, height) {

	table = $("#" + table)[0];

	var cropRight = table.offsetWidth - width;
	var cropBottom = table.offsetHeight - height;

	var scrollBarWidth = getScrollbarWidth();
	
	var lw = 0;//width of left held columns.
	var leftLimitCol = 0;
	var rw = 0;//width of right held columns.
	var rightLimitCol = 0;


	var addLeft = function(th, totalColCount) {
		lw += th.offsetWidth;
		leftLimitCol = totalColCount;
	}

	var addRight = function(th, totalColCount) {
		rw += th.offsetWidth;
		if (rightLimitCol == 0) {
			rightLimitCol = totalColCount;
		}
	}

	//from the bodies first row
	var fr = table.tBodies[0].rows[0].cells;
	var totalColCount = 0;
	for (var i=0; i<fr.length; i++) {
		var col = fr[i];
		totalColCount += col.colSpan; 
		if (col.tagName == 'TH') {
			addLeft(col, totalColCount);
			addRight(col, totalColCount);
		} else {
			addLeft = function(){};
			rw = 0;
			rightLimitCol = 0;
		}
	}

	var rowwidth = table.tHead.rows[0].offsetWidth;

	var rp = rowwidth - rw;

	var h = table.offsetHeight;
	var th = table.tHead.offsetHeight;
	var mh = table.tBodies[0].offsetHeight;
	var bh = table.tFoot.offsetHeight;
	
	var c = table.parentNode.insertBefore(document.createElement('div'), table);
	var id = table.id;
	if (id) {
		table.removeAttribute('id');
		c.id = id;
	}
	c.style.position = 'relative';
	c.style.zIndex = 1;
	
	var dtl = c.appendChild(document.createElement('div'));
	table.style.position = 'relative';	
	dtl.appendChild(table);
	dtl.style.position = 'absolute';
	dtl.style.top = '0';
	dtl.style.left = '0';
	dtl.style.overflow = 'hidden';
/*
    var DIVWithoutTDs = dtl.cloneNode(true);
    var TableWithoutTDs = DIVWithoutTDs.firstChild;
    var TDs = TableWithoutTDs.getElementsByTagName('TD');
    
    for (var i = TDs.length - 1; i > 0; i--) {
        DeleteNode(TDs[i]);
    }
*/
var DIVWithoutTDs = dtl;
    
	//copy and clip table elements
	clip(dtl, 'tl', 0, lw, th, 0);

	var dtm = c.appendChild(cloneClip(DIVWithoutTDs, 'tm', 0, rp - cropRight, th, lw));
	var dtr = c.appendChild(cloneClip(DIVWithoutTDs, 'tr', 0, rowwidth, th, rp, 0, 0 - cropRight + scrollBarWidth));	
	
	var dml = c.appendChild(cloneClip(DIVWithoutTDs, 'ml', th, lw, h - bh - cropBottom, 0));		
	var dmm = c.appendChild(cloneClip(dtl, 'mm', th, rp - cropRight, h - bh - cropBottom, lw));	
	var dmr = c.appendChild(cloneClip(DIVWithoutTDs, 'mr', th, rowwidth, h - bh - cropBottom, rp, 0, 0 - cropRight + scrollBarWidth));	
	
	var dbl = c.appendChild(cloneClip(DIVWithoutTDs, 'bl', h - bh, lw, h, 0, scrollBarWidth - cropBottom, 0));	
	var dbm = c.appendChild(cloneClip(DIVWithoutTDs, 'bm', h - bh, rp - cropRight, h, lw, scrollBarWidth - cropBottom,0));	
	var dbr = c.appendChild(cloneClip(DIVWithoutTDs, 'br', h - bh, rowwidth, h, rp, scrollBarWidth - cropBottom, 0 - cropRight + scrollBarWidth));

	//add scrolling div
	var sd = c.appendChild(document.createElement('div'));
	sd.style.width = ((rp - cropRight) - lw + scrollBarWidth) + 'px';
	sd.style.height = ((h - bh - cropBottom) - th + scrollBarWidth) + 'px';
	sd.style.left = lw + 'px';
	sd.style.top = th + 'px';
	sd.style.overflow = 'scroll';
	sd.style.position = 'absolute';
	sd.style.zIndex = 2;	
	
	var scrollBlock = sd.appendChild(document.createElement('div'));
	scrollBlock.style.width = (rp - lw) + 'px';
	scrollBlock.style.height = (h - bh - th) + 'px';

	//Size container
	c.style.height = (h + scrollBarWidth - cropBottom) + 'px';
	c.style.width = (rowwidth + scrollBarWidth - cropRight) + 'px';
	
	sd.onscroll = function(ev) {
		if (parseInt(dmm.firstChild.style.top) != parseInt(dml.firstChild.style)) {
			dml.firstChild.style.top = (0 - sd.scrollTop) + 'px';
			dmm.firstChild.style.top = dml.firstChild.style.top;
			dmr.firstChild.style.top = dml.firstChild.style.top;
		}

		if (parseInt(dmm.firstChild.style.lef) != parseInt(dtm.firstChild.style.left)) {
			dtm.firstChild.style.left = (0 - sd.scrollLeft) + 'px';
			dmm.firstChild.style.left = dtm.firstChild.style.left;
			dbm.firstChild.style.left = dtm.firstChild.style.left;
		}
	}
}

function clip(div, className, top, right, bottom, left, offsetTop, offsetLeft) {
	div.style.clip = 'rect(' + top + 'px ' + right + 'px ' + bottom + 'px ' + left + 'px)';
	div.style.left = ((offsetLeft) ? offsetLeft : 0) + 'px';
	div.style.top = ((offsetTop) ? offsetTop : 0) + 'px';
	div.className = className;
	div.style.zIndex = 3;
	return div;
}

function cloneClip(div, className, top, right, bottom, left, offsetTop, offsetLeft) {
	return clip(div.cloneNode(true), className, top, right, bottom, left, offsetTop, offsetLeft);
}

function DeleteNode(node) {
	node.parentNode.removeChild(node);
}

function getScrollbarWidth() {
     var inner = document.createElement('p');  
     inner.style.width = "100%";  
     inner.style.height = "200px";  
   
     var outer = document.createElement('div');  
     outer.style.position = "absolute";  
     outer.style.top = "0px";  
     outer.style.left = "0px";  
     outer.style.visibility = "hidden";  
     outer.style.width = "200px";  
     outer.style.height = "150px";  
     outer.style.overflow = "hidden";  
     outer.appendChild (inner);  
   
     document.body.appendChild (outer);  
     var w1 = inner.offsetWidth;  
     outer.style.overflow = 'scroll';  
     var w2 = inner.offsetWidth;  
     if (w1 == w2) w2 = outer.clientWidth;  
   
     document.body.removeChild (outer);  
   
     return (w1 - w2);
}


