MapImage = function(newID, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility, newMapPanel, newMapObject, newMapType)
{
  if (arguments.length > 0)
    this.init(newID, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility, newMapPanel, newMapObject, newMapType);
};

MapImage.prototype.init = function(newID, newParent, newXPosition, newYPosition, newZIndex, newWidth, newHeight, newVisibility, newMapPanel, newMapObject, newMapType)
{
  this.id = newID;
  this.parentElement = newParent;
  this.xPosition = newXPosition;
  this.yPosition = newYPosition;
  this.zIndex = newZIndex;
  this.visibility = newVisibility;
  this.mapPanel = newMapPanel;
  this.map = newMapObject;
  this.mapType = newMapType;  //valid types are 'MASTER','SLAVE'
 
  this.imageNode = document.cbe.createElement("IMG");
  this.drawPlaneNode = document.cbe.createElement("DIV");
  this.rasterDrawPlaneNode = document.cbe.createElement("DIV");
  this.eventHandlerNode = document.cbe.createElement("IMG");
  this.productLogoNode = document.createElement(((is.ie)?('DIV'):('IMG')));
  
  this.eventHandlerNode.src = './'+GuiWidget.THEME_PATH+GuiWidget.THEME+'/images/'+'blank.gif';
  this.productLogoNode.style.position = 'absolute';
  this.productLogoNode.style.display = ((this.mapType=='MASTER')?('block'):('none'));
  if (is.ie)
  {
    this.productLogoNode.style.width = 1;
    this.productLogoNode.style.height = 1;
  }
  this.productLogoNode.style.right = 5;
  this.productLogoNode.style.bottom = 5;
  this.rasterDrawPlaneNode.appendChild(this.productLogoNode);
  if (is.ie) //fix png
  {
    this.productLogoNode.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+GuiWidget.THEME_PATH+'/'+GuiWidget.THEME+'/images/mapProductLogo.png'+'\', sizingMethod=\'image\')';
  }
  else
  {
    this.productLogoNode.src = GuiWidget.THEME_PATH+'/'+GuiWidget.THEME+'/images/mapProductLogo.png';
  }
  
  this.imageNode.cbe.zIndex(0);
  this.drawPlaneNode.cbe.zIndex(1); 
  this.rasterDrawPlaneNode.cbe.zIndex(2); 
  this.eventHandlerNode.cbe.zIndex(3);
  
  this.imageNode.cbe.objectManagerId = OBJECT_MANAGER.registerObject(this.id+'.imageNode', this);
  this.drawPlaneNode.cbe.objectManagerId = OBJECT_MANAGER.registerObject(this.id+'.drawPlaneNode', this);
  this.rasterDrawPlaneNode.cbe.objectManagerId = OBJECT_MANAGER.registerObject(this.id+'.rasterDrawPlaneNode', this);
  this.eventHandlerNode.cbe.objectManagerId = OBJECT_MANAGER.registerObject(this.id, this);
  if (this.parentElement == null)
  {
    document.cbe.appendChild(this.imageNode);
    document.cbe.appendChild(this.drawPlaneNode);
    document.cbe.appendChild(this.rasterDrawPlaneNode);
    document.cbe.appendChild(this.eventHandlerNode);
  }
  else
  {
	  this.parentElement.cbe.appendChild(this.imageNode);
	  this.parentElement.cbe.appendChild(this.drawPlaneNode);
	  this.parentElement.cbe.appendChild(this.rasterDrawPlaneNode);
	  this.parentElement.cbe.appendChild(this.eventHandlerNode);
  }

  this.imageNode.id = this.id+'.imageNode';
  this.drawPlaneNode.id = this.id+'.drawPlaneNode';
  this.rasterDrawPlaneNode.id = this.id+'.rasterDrawPlaneNode';
  this.eventHandlerNode.id = this.id+'.eventHandlerNode';

  this.imageNode.cbe.id = this.id+'.imageNode';
  this.drawPlaneNode.cbe.id = this.id+'.drawPlaneNode';
  this.rasterDrawPlaneNode.cbe.id = this.id+'.rasterDrawPlaneNode';
  this.eventHandlerNode.cbe.id = this.id+'.eventHandlerNode';

  this.imageNode.cbe.moveTo(this.xPosition, this.yPosition);
  this.drawPlaneNode.cbe.moveTo(this.xPosition, this.yPosition);
  this.rasterDrawPlaneNode.cbe.moveTo(this.xPosition, this.yPosition);
  this.eventHandlerNode.cbe.moveTo(this.xPosition, this.yPosition);

  this.imageNode.cbe.resizeTo(newWidth,newHeight);
  this.drawPlaneNode.cbe.resizeTo(newWidth,newHeight);
  this.rasterDrawPlaneNode.cbe.resizeTo(newWidth,newHeight);
  this.eventHandlerNode.cbe.resizeTo(newWidth,newHeight);

  this.zoomBox = new ZoomBox(this.id+".zoomBox", this.parentElement, this.xPosition, this.yPosition, this);
   
  if (this.visibility)
    this.imageNode.style.display='block';
  else
    this.imageNode.style.display='none';

  this.zoomBoxPending = false;
  this.zoomBoxPendingPosition = null;
  this.zoomBoxMargin = 0;
  
  this.zoomBoxClipLeft = 0;
  this.zoomBoxClipRight = 0;
  this.zoomBoxClipTop = 0;
  this.zoomBoxClipBottom = 0;
  
  this.dragEnabled = false;

  this.eventHandlerNode.cbe.addEventListener('click',     EVENT_LISTENER, false);
  this.eventHandlerNode.cbe.addEventListener('mouseover', EVENT_LISTENER, false);
  this.eventHandlerNode.cbe.addEventListener('mouseout',  EVENT_LISTENER, false);
  this.eventHandlerNode.cbe.addEventListener('mousedown', EVENT_LISTENER, false);
  this.eventHandlerNode.cbe.addEventListener('drag',      EVENT_LISTENER, false);
  this.eventHandlerNode.cbe.addEventListener('mouseup',   EVENT_LISTENER, false);
  
  this.setClass('map');
};

/*******************************************/

MapImage.prototype.setMapObject = function(newMapObject)
{
  this.map = newMapObject;
};

/*******************************************/

MapImage.prototype.show = function()
{
  this.imageNode.style.display='block';
  this.drawPlaneNode.style.display='block';
  this.rasterDrawPlaneNode.style.display='block';
  this.eventHandlerNode.style.display='block';
};

/*******************************************/

MapImage.prototype.hide = function()
{
  this.imageNode.style.display='none';
  this.drawPlaneNode.style.display='none';
  this.rasterDrawPlaneNode.style.display='none';
  this.eventHandlerNode.style.display='none';
};

/*******************************************/

MapImage.prototype.width = function()
{
  if (arguments.length > 0)
  {
    this.drawPlaneNode.cbe.resizeTo(arguments[0], this.drawPlaneNode.cbe.height());
    this.rasterDrawPlaneNode.cbe.resizeTo(arguments[0], this.drawPlaneNode.cbe.height());
    this.eventHandlerNode.cbe.resizeTo(arguments[0], this.eventHandlerNode.cbe.height());
    return this.imageNode.cbe.resizeTo(arguments[0], this.imageNode.cbe.height());
  }
  return this.imageNode.cbe.width();
};

/*******************************************/

MapImage.prototype.height = function()
{
  if (arguments.length > 0)
  {
    this.rasterDrawPlaneNode.cbe.resizeTo(this.drawPlaneNode.cbe.width(), arguments[0]);
    this.drawPlaneNode.cbe.resizeTo(this.drawPlaneNode.cbe.width(), arguments[0]);
    this.eventHandlerNode.cbe.resizeTo(this.eventHandlerNode.cbe.width(), arguments[0]);
    return this.imageNode.cbe.resizeTo(this.imageNode.cbe.width(), arguments[0]);
  }
  return this.imageNode.cbe.height();
};

/*******************************************/

MapImage.prototype.left = function()
{
  if (arguments.length > 0)
  {
    this.rasterDrawPlaneNode.cbe.left(arguments);
    this.drawPlaneNode.cbe.left(arguments);
    this.eventHandlerNode.cbe.left(arguments);
    return this.imageNode.cbe.left(arguments);
  }
  else
    return this.imageNode.cbe.left();
};

/*******************************************/

MapImage.prototype.top = function()
{
  if (arguments.length > 0)
  {
    this.rasterDrawPlaneNode.cbe.top(arguments);
    this.drawPlaneNode.cbe.top(arguments);
    this.eventHandlerNode.cbe.top(arguments);
    return this.imageNode.cbe.top(arguments);
  }
  else
    return this.imageNode.cbe.top();
};

/*******************************************/

MapImage.prototype.moveTo = function(newXPosition, newYPosition)
{
  this.xPosition = newXPosition;
  this.yPosition = newYPosition;
  this.rasterDrawPlaneNode.cbe.moveTo(this.xPosition, this.yPosition);
  this.drawPlaneNode.cbe.moveTo(this.xPosition, this.yPosition);
  this.eventHandlerNode.cbe.moveTo(this.xPosition, this.yPosition);
  this.imageNode.cbe.moveTo(this.xPosition, this.yPosition);
};

/*******************************************/

MapImage.prototype.resizeTo = function(newWidth, newHeight)
{
  this.rasterDrawPlaneNode.cbe.resizeTo(newWidth, newHeight);
  this.drawPlaneNode.cbe.resizeTo(newWidth, newHeight);
  this.eventHandlerNode.cbe.resizeTo(newWidth, newHeight);
  this.imageNode.cbe.resizeTo(newWidth, newHeight);
};

/*******************************************/

MapImage.prototype.setClass = function (newClass)
{
  if (is.ie)
    this.eventHandlerNode.setAttribute("className", newClass);
  else
    if (is.gecko)
      this.eventHandlerNode.setAttribute("class", newClass);
};

/****************************************************************/
/* Event Callback Functions                                     */
/* Calls the appropriate functions if they exist.               */
/****************************************************************/


MapImage.prototype.mouseOverCallback = function(e)
{
   if (this.zoomBox.hasFocus)
     this.zoomBox.setInactive(e.offsetX, e.offsetY);
   this.dragEnabled = true;
};

/*******************************************/

MapImage.prototype.clickCallback = function(e)
{
   if (this.mapPanel.clickMode != 'ZoomBox')
     this.map.click(e, this.mapPanel.clickMode);
};

/*******************************************/

MapImage.prototype.mouseOutCallback = function(e)
{
  if ((this.mapPanel.clickMode == 'ZoomBox') && (this.zoomBox.isActive) && this.dragEnabled)
    if (!((e.pageX > this.imageNode.cbe.pageX()) &&
        (e.pageX < (this.imageNode.cbe.pageX()+this.imageNode.cbe.width())) &&
        (e.pageY > this.imageNode.cbe.pageY()) &&
        (e.pageY < (this.imageNode.cbe.pageY()+this.imageNode.cbe.height())))
       )
      this.zoomBox.setInactive(e.offsetX, e.offsetY);
  this.dragEnabled = false;
};

/*******************************************/

MapImage.prototype.mouseDownCallback = function(e)
{
  if (this.mapPanel.clickMode == 'ZoomBox')
  {
    this.zoomBoxPending = true;
    this.zoomBoxPendingPosition = new Array(e.offsetX, e.offsetY);
    this.zoomBoxStartGlobal = new Array(e.pageX, e.pageY);
    this.zoomBoxStartLocal = new Array(e.offsetX, e.offsetY);
    document.mouseUpCallbackObject = this;
  }
};

/*******************************************/

MapImage.prototype.dragCallback = function(e)
{
  if (this.zoomBoxPending)
  {
    this.zoomBox.setActive(this.zoomBoxPendingPosition[0], this.zoomBoxPendingPosition[1]);
    this.zoomBoxPending = false;
  }
  if ((this.mapPanel.clickMode == 'ZoomBox') && (this.zoomBox.isActive) && this.dragEnabled)
  {
    this.zoomBox.update(e.offsetX, e.offsetY);
  }
  return false;
};

/*******************************************/

MapImage.prototype.mouseUpCallback = function(e)
{
  //if zoom box is active, then the offsetx, offsety coordinates will be unreliable.
  document.mouseUpCallbackObject = null;
  if (this.zoomBoxPending)
  {
    this.zoomBoxPending = false;
  }
  if ((this.mapPanel.clickMode == 'ZoomBox') && this.zoomBox.isActive)
  {
    this.zoomBoxGlobalEnd = new Array(e.pageX - this.left(), e.pageY - this.top()); 
    this.zoomBoxLocalEnd = new Array(e.offsetX, e.offsetY); 
    this.zoomBoxGlobalEnd[0] = e.pageX - this.left();
    this.zoomBoxGlobalEnd[1] = e.pageY - this.top();
    
    zoomBoxResults = new Array((this.zoomBox.left()-this.xPosition),(this.zoomBox.top()- this.yPosition),(this.zoomBox.left()+this.zoomBox.width()-this.xPosition),(this.zoomBox.top()+this.zoomBox.height()-this.yPosition));
    this.zoomBox.setInactive(e.offsetX, e.offsetY);
    if ((e.pageX > this.imageNode.cbe.pageX()) &&
        (e.pageX < (this.imageNode.cbe.pageX()+this.imageNode.cbe.width())) &&
        (e.pageY > this.imageNode.cbe.pageY()) &&
        (e.pageY < (this.imageNode.cbe.pageY()+this.imageNode.cbe.height()))
       )
      this.map.zoomBoxDrawn(zoomBoxResults[0], zoomBoxResults[1], zoomBoxResults[2], zoomBoxResults[3]);
  }
};