Probllem with Dynamic Column Resizing in Firefox

Hello everyone. I've been working with this piece of code trying to port it over from IE to Firefox. It's supposed to let you resize an iframe column dynamically. I've followed the guidelines at Mozilla http://developer.mozilla.org/en/docs/Migrate_apps_from_Internet_Explorer_to_Mozilla
but I am still stuck. This is my first real attempt at working with JS so any suggestions will be greatly appreciated. Let me know if I need to attach any other info. Thanks!

var sResizableElement = "TH"; //Elements to be resized
var iResizeThreshold = 8;
var iEdgeThreshold = 8;
var iSizeThreshold = 20;
var sVBarID = "VBar";

var oResizeTarget = null; //position and distance moved
var iStartX = null;
var iEndX = null;
var iSizeX = null;

function TableResize_CreateVBar() //Creates VBar on load
{
var objItem = document.getElementById(sVBarID);
//alert(objItem);

if(!objItem)
{
objItem = document.createElement("SPAN");


objItem.id = sVBarID;
objItem.style.position = "absolute";
objItem.style.top = "0px";
objItem.style.left = "0px";
objItem.style.height = "0px";
objItem.style.width = "2px";
objItem.style.background = "silver";
objItem.style.borderleft = "1px solid black";
objItem.style.display = "none";

document.body.appendChild(objItem);
//alert(objItem);
}
}

if(window.addEventListener)
{
window.addEventListener("load", TableResize_CreateVBar,0);
}
else if(window.attachEvent)
{
window.attachEvent("onload", TableResize_CreateVBar);
}

function TableResize_GetOwnerHeader(objReference) //gets the TH
{
var oElement = objReference;
while(oElement != null && oElement.tagName != null && oElement.tagName != "BODY")
{
if(oElement.tagName.toUpperCase() == sResizeableElement)
{
return oElement; //print alert?
}

oElement = oElement.parentNode;
//alert(oElement);
}

return null;
}

function TableResize_GetFirstColumnCell(objTable, iCellIndex)
{
var oHeaderCell = objTable.rows[0].cells[iCellIndex];
//alert(oHeaderCell);
return oHeaderCell; //alert?

}

function TableResize_CleanUp()
{
var oVBar = document.getElementById(sVBarID);


if(oVBar)
{
oVBar.style.display = "none";
}

iEndX = null;
iSizeX = null;
iStartX = null;
oResizeTarget = null;
oAdjacentCell = null;

//alert(oVBar);
return true;
}

function TableResize_OnMouseMove(objTable, event)
{
var objTH = null;

objTH = objTable.createTHead(objTable, event); //creates a new thead or returns the current thead
//alert(objTH);

if(!objTH)
return;

var oVBar = document.getElementById(sVBarID);
alert(oVBar);

if (!oVBar)
return;

var oAdjacentCell = objTH.nextSibling;

if((event.offsetX >= (objTH.offsetWidth - iEdgeThreshold)) && (oAdjacentCell != null))
{
objTH.style.cursor = "e-resize"; //find correct property
}
else
{
if(objTH.style.cursor)
{
objTH.style.cursor = objTH.style.cursor;
}
else
{
objTH.style.cursor = "e-resize";
}
}

if(oVBar.style.display == "inline")
{
oVBar.style.left = window.event.clientX + document.body.scrollLeft;
document.selection.empty(); //window.event?
}
return true
}

function TableResize_OnMouseDown(objTable, event)
{
var oTargetCell = event.target;
//alert(event.target);

if(!oTargetCell)
return;

if(oTargetCell.parentNode.tagName.toUpperCase() == sResizableElement)
{
oTargetCell = oTargetCell.parentNode;
}

var oHeaderCell = TableResize_GetFirstColumnCell(objTable, oTargetCell.cellIndex);

if((oHeaderCell.tagName.toUpperCase() == sResizableElement) && (oTargetCell.style.cursor == ""))
{
iStartX = event.screenX;
oResizeTarget = oHeaderCell;
objTable.setAttribute("Resizing","true");
//Set Capture?

oVBar.style.left = window.event.clientX + document.body.scrollLeft;
oVBar.style.height = objTable.parentNode.clientHeight;
oVBar.style.display = "inline";
}
return true;
}

function TableResize_OnMouseUp(objTable, event)
{
var oAdjacentCell = null;
var iAdjCellOldWidth = 0;
var iResizeOldWidth = 0;

if(iStartX != null && oResizeTarget != null)
{
iEndX = event.screenX;
iSizeX = iEndX - iStartX;

objTable.setAttribute("Resizing", "false");

if((oResizeTarget.offsetWidth + iSizeX) >= iSizeThreshold)
{
if(Math.abs(iSizeX) >= iResizeThreshold)
{
if(oResizeTarget.nextSibling != null)
{
oAdjacentCell = oResizeTarget.nextSibling;
iAdjCellOldWidth = (oAdjacentCell.offsetWidth);
}
else
{
oAdjacentCell = null;
}

iResizeOldWidth = (oResizeTarget.offsetWidth);
oResizeTarget.style.width = iResizeOldWidth + iSizeX;

if((oAdjacentCell != null) && (oAdjacentCell.tagName.toUpperCase() == sResizableElement))
{
oAdjacentCell.style.width = (((iAdjacentCellOldWidth - iSizeX) >= iSizeThreshold) ? (iAdjCellOldWidth - iSizeX):(oAdjacentCell.style.width = iSizeThreshold))
}
}
}
else
{
oResizeTarget.style.width = iSizeThreshold;
}
}

TableResize_CleanUp();
return true;
}

Hey can anyone help me please? I don't know how to get this to work correctly in FF. It's supposed to allow you to resize a column via the black vertical bar in the middle of the page.

Here's the HTML part:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<title>Table Test</title>
<link rel="stylesheet" type="text/css" href="tabletest.css" />
<script type="text/javascript" src="libs/tableresize.js"></script>


</head>

<body>


<div class="tablecontainer">
<table border="0" cellspacing="0" cellpadding="0" class="mytable"
onmousemove="TableResize_OnMouseMove(this, event);"
onmouseup="TableResize_OnMouseUp(this, event);"
onmousedown="TableResize_OnMouseDown(this, event);">

<tr>
<th><iframe id="left_frame" name="left_frame" src="" frameborder=0 onload="resize_iframe()"></iframe></th>
<th><iframe id="right_frame" name="right_frame" src="" frameborder=0 onload="resize_iframe()"></iframe></th>
</tr>

</table>

</div>



</body>
</html>


Here's the JS part:

/*
Global constants to store elements that may be resized.
*/
var sResizableElement = "TH"; //Elements to be resized
var iResizeThreshold = 8;
var iEdgeThreshold = 8;
var iSizeThreshold = 20;
var sVBarID = "VBar";

/*
Global variables to store position and distance moved.
*/
var oResizeTarget = null; //position and distance moved
var iStartX = null;
var iEndX = null;
var iSizeX = null;
var oAdjacentCell = null;

function TableResize_CreateVBar() //Creates VBar on load
{
var objItem = document.getElementById(sVBarID);
//alert(objItem);

if(!objItem)
{
objItem = document.createElement("SPAN");


objItem.id = sVBarID;
objItem.style.position = "absolute";
objItem.style.top = "0px";
objItem.style.left = "0px";
objItem.style.height = "0px";
objItem.style.width = "2px";
objItem.style.background = "silver";
objItem.style.borderleft = "1px solid black";
objItem.style.display = "none";

document.body.appendChild(objItem);
//alert(objItem);
}
}


window.addEventListener("load", TableResize_CreateVBar, 0);


/*
Returns a valid resizable element, even if it contains another element
which was actually clicked otherwise it returns the top body element.
*/
function TableResize_GetOwnerHeader(objReference) //gets the TH
{
var oElement = objReference;
while(oElement != null && oElement.tagName != null && oElement.tagName != "BODY")
{
if(oElement.tagName.toUpperCase() == sResizableElement)
{
return oElement; //print alert?
}

oElement = oElement.parentNode;
//alert(oElement);

}
//alert(oElement);
return null;
}

/*
Find cell at column iCellIndex in the first row of the table
needed because you can only resize a column from the first row.
by using this, we can resize from any cell in the table if we want to.
*/
function TableResize_GetFirstColumnCell(objTable, cellIndex)
{
var oHeaderCell = document.body.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('*')[0];
//var oHeaderCell = objTable.rows[0].cells[0];
//alert(objTable.cells[cellIndex]);
//var cellIndex = objTable.rows[0].cells[0];
//alert(cellIndex);
return oHeaderCell; //alert?

}

function TableResize_CleanUp()
{
var oVBar = document.getElementById(sVBarID);


if(oVBar)
{
oVBar.style.display = "none";
}

iEndX = null;
iSizeX = null;
iStartX = null;
oResizeTarget = null;
oAdjacentCell = null;

//alert(oVBar.style.display);
return true;
}

/*
MouseMove event.
On resizable table This checks if you are in an allowable 'resize start' position.
It also puts the vertical bar (visual feedback) directly under the mouse cursor.
The vertical bar may NOT be currently visible, that depnds on if you're resizing.
*/
function TableResize_OnMouseMove(objTable, event)
{
var objTH = null;

//objTH = TableResize_GetOwnerHeader(objTable, event);
objTH = objTable.createTHead(objTable, event); //creates a new thead or returns the current thead
//alert(objTH);

if(!objTH)
return;

var oVBar = document.getElementById(sVBarID);
//alert(oVBar);

if (!oVBar)
return;

var oAdjacentCell = objTH.nextSibling;
//alert(objTH.clientWidth);


if((event.layerX >= (objTH.offsetWidth - iEdgeThreshold)) && (oAdjacentCell != null))
{
document.body.style.cursor = "e-resize"; //find correct property
}
else
{

document.body.style.cursor = "pointer";
}

if(oVBar.style.display == "inline")
{
oVBar.style.left = event.clientX + document.body.scrollLeft - document.body.clientLeft;
document.body.focus();
}
//alert(event.clientX + document.body.scrollLeft);
return true
}

/*
MouseDown event.
This fills the globals with tracking information, and displays the
vertical bar. This is only done if you are allowed to start resizing.
*/
function TableResize_OnMouseDown(objTable, event)
{
var oTargetCell = event.currentTarget;
//alert(oTargetCell);

if(!oTargetCell)
return;

if(oTargetCell.parentNode.tagName.toUpperCase() == sResizableElement)
{
oTargetCell = oTargetCell.parentNode;

}
//alert(oTargetCell);
var oHeaderCell = TableResize_GetFirstColumnCell(objTable, oTargetCell.cellIndex);
alert(oTargetCell.cellIndex);

if((oHeaderCell.tagName.toUpperCase() == sResizableElement) && (oTargetCell.style.cursor == "e-resize"))
{
iStartX = event.screenX;
oResizeTarget = oHeaderCell;
objTable.setAttribute("Resizing","true");
//Set Capture?

oVBar.style.left = document.body.scrollLeft - document.body.clientLeft;
oVBar.style.top = objTable.parentNode.offsetTop + objTable.offsetTop;
oVBar.style.height = objTable.parentNode.offsetHeight;
oVBar.style.display = "inline";
}
//alert(document.body.scrollLeft - document.body.clientLeft);
return true;
}

//Finishes Resize
function TableResize_OnMouseUp(objTable, event)
{
var oAdjacentCell = null;
var iAdjCellOldWidth = 0;
var iResizeOldWidth = 0;

if(iStartX != null && oResizeTarget != null)
{
iEndX = event.screenX;
iSizeX = iEndX - iStartX;

objTable.setAttribute("Resizing", "false");

if((oResizeTarget.offsetWidth + iSizeX) >= iSizeThreshold)
{
if(Math.abs(iSizeX) >= iResizeThreshold)
{
if(oResizeTarget.nextSibling != null)
{
oAdjacentCell = oResizeTarget.nextSibling;
iAdjCellOldWidth = (oAdjacentCell.offsetWidth);
}
else
{
oAdjacentCell = null;
}

iResizeOldWidth = (oResizeTarget.offsetWidth);
oResizeTarget.style.width = iResizeOldWidth + iSizeX;

if((oAdjacentCell != null) && (oAdjacentCell.tagName.toUpperCase() == sResizableElement))
{
oAdjacentCell.style.width = (((iAdjacentCellOldWidth - iSizeX) >= iSizeThreshold) ? (iAdjCellOldWidth - iSizeX):(oAdjacentCell.style.width = iSizeThreshold))
}
}
}
else
{
oResizeTarget.style.width = iSizeThreshold;
}
}

TableResize_CleanUp();
return true;

}