var ui_utils = {

  showWorking: function(elem, hPos, vPos, img)
  {
    var x = util.getXCoord(elem);
    var y = util.getYCoord(elem);

    img.style.position = "absolute";
    img.style.display = "inline";
    //img.style.border = "1px solid";

    if(hPos == 'right')
    {
      x += elem.clientWidth + img.clientWidth / 2 + 5;
    }

    if(vPos == 'middle')
    {
      y += elem.clientHeight / 2 - img.clientHeight / 2;
    }

    img.style.top = y + "px";
    img.style.left = x + "px";
  },

  hideWorking: function(img)
  {
    img.style.display='none';
  },

  showMarker: function(x, y, img)
  {
    img.style.position = "absolute";
    img.style.display = "inline";
    img.style.top = y - 5 + "px";
    img.style.left = x - 5 + "px";
  },

  hideMarker: function(img)
  {
    img.style.display='none';
  },

  setPaneMaxHeight: function(left, right)
  {
    if(!left || !right) return;

    //getMaxCoordY returns the absolute position of the bottom of the tallest element, so it must be adjusted to deduct
    //the top of the pane.
    var maxY = util.getMaxCoordY(left, 0);
    //this.showMarker(420, maxY, $('imgMarker'));
    //maxY -= util.getYCoord(left);
    //this.showMarker(420, util.getYCoord(left), $('imgMarker'));
    //this.showMarker(420, util.getMaxCoordY(left, 0), $('imgMarker'));

    //alert(maxY);

    //I have to explicitly remove the padding from the offsetHeight value.
    var nh = Math.max(left.offsetHeight, right.offsetHeight) - 20;
    //alert(left.offsetHeight + "\n" + right.offsetHeight);

    //Set both columns to equal height...
    left.style.display="block";
    left.style.height=nh+"px";

    right.style.display="block";
    right.style.height=nh+"px";
  }

}