var selectedClickArea = null;

function DoMouseOver()
{
  if (this != selectedClickArea)
  {
    if (this.Image != null)
    {
      if (this.HoverImage != null)
      {
        this.Image.src = this.HoverImage;
      }
    }

    if (this.ExtraContainer != null)
    {
      if (this.ExtraContainer.HoverClass != null)
      {
        this.ExtraContainer.className = this.ExtraContainer.HoverClass;
      }
    }
    else
    {
      if (this.HoverClass != null)
      {
        this.className = this.HoverClass;
      }
    } 
  }
};

function DoMouseOut()
{
  if (this != selectedClickArea)
  {
    this.onmouseover = DoMouseOver;
    this.onclick = DoClick;
    if (this.Image != null)
    {
      this.Image.src = this.NormalImage;
    }

    if (this.ExtraContainer != null)
    {
      this.ExtraContainer.className = this.ExtraContainer.NormalClass;
    }
    else
    {
      this.className = this.NormalClass;
    }
    this.Content.style.visibility = "hidden";
  }
};

function DoClick()
{
  if (this != selectedClickArea)
  {
    var lastClickArea = selectedClickArea;
    selectedClickArea = this;
    this.onmouseover = null
    this.onclick = null;
    if (lastClickArea != null)
    {
      lastClickArea.onmouseout();
    }
    if (this.Image != null)
    {
      this.Image.src = this.SelectImage;
    }

    if (this.ExtraContainer != null)
    {
      this.ExtraContainer.className = this.ExtraContainer.SelectClass;
    }
    else
    {
      this.className = this.SelectClass;
    }
    this.Content.style.visibility = "visible";
  }
};

function RegisterClickAreaEvents(ClickAreaId, ContentId, HoverClass, SelectClass, ImageId, HoverImage, SelectImage, ExtraContainerId, IsSelected, ReplaceCss)
{
  var newContent = new Object();
  newContent = document.getElementById(ContentId);
  newContent.Name = ContentId;
  newContent.style.position = "absolute";
  newContent.style.visibility = "hidden";

  var newClickArea = new Object();
  newClickArea = document.getElementById(ClickAreaId);
  newClickArea.Name = ClickAreaId;
  newClickArea.Content = newContent;
  newClickArea.style.position = "static";
  newClickArea.onmouseover = DoMouseOver;
  newClickArea.onmouseout = DoMouseOut;
  newClickArea.onclick = DoClick;

  if (ExtraContainerId != "")
  {
    var newExtraContainer = new Object();
    newExtraContainer = document.getElementById(ExtraContainerId);
    newClickArea.ExtraContainer = newExtraContainer;
  }

  if (ImageId != "")
  {
    newClickArea.Image = new Image();
    newClickArea.Image = document.getElementById(ImageId);
    newClickArea.NormalImage = newClickArea.Image.src;
  }

  if (HoverImage != "")
  {
    newClickArea.HoverImage = HoverImage;
  }

  if (SelectImage != "")
  {
    newClickArea.SelectImage = SelectImage;
  }

  if (newClickArea.ExtraContainer != null)
  {
    AssignCssStyles(newClickArea.ExtraContainer, HoverClass, SelectClass, ReplaceCss);
  }
  else
  {
    AssignCssStyles(newClickArea, HoverClass, SelectClass, ReplaceCss);
  }

  if ((IsSelected == true) && (selectedClickArea == null))
  {
    newClickArea.onclick();
  }
};

function AssignCssStyles(theObject, HoverClass, SelectClass, ReplaceCss)
{
  theObject.NormalClass = theObject.className;
  if (ReplaceCss == true)
  {
    if (SelectClass != "")
    {
      theObject.SelectClass = SelectClass;
    }

    if (HoverClass != "")
    {
      theObject.HoverClass = HoverClass;
    }
  }
  else
  {
    if (theObject.className != "")
    {
      if (SelectClass != "")
      {
        theObject.SelectClass = theObject.className + " " + SelectClass;
      }

      if (HoverClass != "")
      {
        theObject.HoverClass = theObject.className + " " + HoverClass;
      }
    }
    else
    {
      if (SelectClass != "")
      {
        theObject.SelectClass = SelectClass;
      }

      if (HoverClass != "")
      {
        theObject.HoverClass = HoverClass;
      }
    }
  }
};