function createDiv( parent, xPos, yPos, width, height )
{
  var elem = document.createElement( 'div' );
  var style = elem.style;

  elem.style.position = 'absolute';
  elem.style.left = xPos + 'px';
  elem.style.top = yPos + 'px';
  elem.style.width = width + 'px';
  elem.style.height = height + 'px';
  
  if( parent )
    parent.appendChild( elem );

  return elem;
}

// XXX: Terminology: Change coordinate to position and position to value

// Returns a position between minVal and maxVal.  This function
// gets added to zoombar objects as a method
function getPosition()
{
  return this.coordinateToPosition( parseInt( this.sliderButton.style.left ) );
}

function coordinateToPosition( coordinate )
{
  var obj = this.sliderButton;
  
  if( coordinate < obj.hdragmin )
    coordinate = obj.hdragmin;

  if( coordinate > obj.hdragmax )
    coordinate = obj.hdragmax;
  
  var percent = (coordinate - obj.hdragmin) / 
                  (obj.hdragmax - obj.hdragmin);
  
  return this.minVal + ( this.maxVal - this.minVal ) * percent;
}

// Sets the position of the zoom bar.  Should be between minVal and maxVal
function setPosition( position )
{
  if( position < this.minVal )
    position = this.minVal;

  if( position > this.maxVal )
    position = this.maxVal;

  var obj = this.sliderButton;

  var percent = (position - this.minVal )/ ( this.maxVal - this.minVal );
  
  obj.style.left = ( obj.hdragmin + (obj.hdragmax - obj.hdragmin) * percent ) + "px";

  if( this.onPositionChange )
  {
    this.onPositionChange( position );
  }
}

function createZoomBar( xPos, yPos, width, height )
{
  // Create a div to wrap all the inner zoombbar controls
  var zoomBar = createDiv( null, xPos, yPos, width, height );
  zoomBar.style.position = 'relative';

  zoomBar.getPosition = getPosition;
  zoomBar.setPosition = setPosition;
  zoomBar.coordinateToPosition = coordinateToPosition;

  // Caller can override if they want
  zoomBar.minVal = 0;
  zoomBar.maxVal = 1;
  
  var obj;
  
  var centerX = width / 2;
  var centerY = height / 2
  
  var lineHeight = 4;
  obj = createLine( zoomBar, xPos, yPos + centerY - lineHeight/2, width, lineHeight );

  function nudgeDown()
  {
    var nudgeValue = (zoomBar.maxVal - zoomBar.minVal) / 10;
    zoomBar.setPosition( zoomBar.getPosition() - nudgeValue );
  }
  
  function nudgeUp()
  {
    // XXX: duplicated code
    var nudgeValue = (zoomBar.maxVal - zoomBar.minVal) / 10;
    zoomBar.setPosition( zoomBar.getPosition() + nudgeValue );
  }


  obj = createButton( zoomBar, '-', xPos, yPos, height, height );
  obj.onclick = nudgeDown;
  
  obj = createButton( zoomBar, '+', xPos + width - height, yPos, height, height );
  obj.onclick = nudgeUp;

  zoomBar.sliderButton = createButton( zoomBar, '', xPos + centerX, yPos, height, height );
  
  function mouseDown()
  {
    dragMe = zoomBar.sliderButton;
  }

  function sliderMoved()
  {
    if( zoomBar.onPositionChange )
    {
      zoomBar.onPositionChange( zoomBar.getPosition() );
    }
  }
  
  zoomBar.sliderButton.vdrag = false;
  zoomBar.sliderButton.hdrag = true;
  zoomBar.sliderButton.hdragmin = xPos + height;
  zoomBar.sliderButton.hdragmax = xPos + width - height * 2;
  zoomBar.sliderButton.onPositionChange = sliderMoved;
  zoomBar.sliderButton.onmousedown = mouseDown;

  return zoomBar;
}

function createLine( parent, xPos, yPos, width, height )
{
  var elem = createDiv( parent, xPos, yPos, width, height );
  var style = elem.style;

  style.backgroundColor = 'white';
  style.borderWidth = '1px';
  style.borderStyle = 'solid';
  style.overflow = 'hidden'; // Without this, IE will force the height to be at least 20px
  
  function onMouseDown( event )
  {
    if( !event )
      event = window.event;

    var xPos = event.layerX;
    if( !xPos )
      xPos = event.offsetX;
      
    parent.setPosition( parent.coordinateToPosition( xPos ) );
   
    dragMe = parent.sliderButton;
  }

  elem.onmousedown = onMouseDown;
  
  parent.appendChild( elem );
  
  return elem;
}

function createButton( parent, text, xPos, yPos, width, height )
{
  var elem = createDiv( parent, xPos, yPos, width, height );
  elem.innerHTML = text;
  
  // XXX: Is is possible to make the text in these buttons
  // unselectable?
  var style = elem.style;
  style.backgroundColor = "white";
  style.borderWidth = '1px';
  style.borderColor = 'black';
  style.borderStyle = 'solid';
  style.textAlign = 'center';
  style.cursor = 'pointer';
  
  parent.appendChild( elem );

  return elem;
}