/**
 *  basic functions to control div elements
 *
 *  @author   Tobias Hettinger
 *  @version  $Id: div.js,v 1.21 2009/05/12 13:19:06 tobias Exp $
 */

 
//  array of registered tabs
var WATTabMenus = new Array();
 
 
/**
 *  function to check if a div exists
 *
 *  @param string divId  id of the div to check
 */
function watDivExists(divId)
{
  var element = document.getElementById(divId);
  if (element && element.nodeName.toLowerCase() == 'div') return true;
    else return false;
}


//=====================================================================================================================
//  display and remove a div
//=====================================================================================================================

/**
 *  function to display the div with the passed id
 *
 *  @param string divId  id of the div to display
 */
function watDivDisplay(divId)
{
  var element = document.getElementById(divId);
  if (element && element.nodeName.toLowerCase() == 'div') element.style.display = 'block';
    else alert('watDivDisplay: the "div"-element with id "'+divId+'" does not exist');
}

/**
 *  function to remove the div with the passed id
 *
 *  @param string divId  id of the div to hide
 */
function watDivRemove(divId)
{
  var element = document.getElementById(divId);
  if (element && element.nodeName.toLowerCase() == 'div') element.style.display = 'none';
}

/**
 *  function to check if a div is displayed
 *
 *  @param string divId  id of the div to check
 *
 *  @return bool  the function returns true if the div is displayed or false if the div is not displayed or
 *                if the div was not found
 */
function watDivIsDisplayed(divId)
{
  var element = document.getElementById(divId);
  if (element && element.nodeName.toLowerCase() == 'div')
  {
    //  the element exists, check if it is displayed
    if (element.style.display == 'none') return false;
      else return true;
  }
  
  //  the element does not exist
  return false;
}


//=====================================================================================================================
//  content and position of a div
//=====================================================================================================================

/**
 *  function to decode the passed string
 *
 *  @param string value  value to decode
 *
 *  @return string  the function returns the decoded string
 */
function watDivDecode(value)
{
  if (value)
  {
    value = value.replace(/§!!§/g, '\"');
    value = value.replace(/§!§/g, '\'');  
    value = value.replace(/§!-/g, '<');
    value = value.replace(/-!§/g, '>');   
    value = value.replace(/§!and!§/g, '&');
    value = value.replace(/§!n!§/g, '\n');
    value = value.replace(/§!r!§/g, '\r');
  }
  
  return value;
}

/**
 *  function to modify the content of the div with the passed id
 *
 *  the div itself can have a content div in which the passed value is inserted. In this case, the
 *  div with id 'divId' is required to have an attribute 'contentId' which gives the id of the content div
 *
 *  @param string divId  id of the div
 *  @param string value  value to set as content
 */
function watDivContent(divId, value)
{
  //  get the attributes
  var element = document.getElementById(divId);
  if (element && element.nodeName.toLowerCase() == 'div')
  {
    //  get the content div
    var contentId = element.getAttribute('contentId');
    var contentDiv = null;
    if (contentId) contentDiv = document.getElementById(contentId);
    if (!contentDiv || !contentDiv.nodeName.toLowerCase() == 'div')
      contentDiv = element;

    //  set the content
    contentDiv.innerHTML = watDivDecode(value);
  }
  else alert('watDivContent: the "div"-element with id "'+divId+'" does not exist');
}

/**
 *  function to set the position and the dimensions of the div with the passed id
 *  
 *  @param string divId   id of the specified div
 *  @param int    top     new top position of the div or -1 if it should remain unchanged
 *  @param int    left    new left position of the div or -1 if it should remain unchanged
 *  @param int    width   new with of the div or -1 if it should remain unchanged
 *  @param int    height  new height of the div or -1 if it should remain unchanged
 */
function watDivPos(divId, top, left, width, height)
{
  var element = document.getElementById(divId);
  if (element && element.nodeName.toLowerCase() == 'div')
  {
    if (top > -1) element.style.top = top + 'px';
    if (left > -1) element.style.left = left + 'px';
    if (width > -1) element.style.width = width + 'px';
    if (height > -1) element.style.height = height + 'px';
  }
}


//=====================================================================================================================
//  tab menu functions
//=====================================================================================================================

/**
 *  function to register a tab for the specified tab menu. If there is no menu
 *  with the specified name, it is created
 *
 *  @param string tabMenuName  name of the tab menu
 *  @param string tabId        id of the tab to register
 */
function watTabRegister(tabMenuName, tabId)
{
  //  initialize the variables
  var index = 0;

  //  search the tab menu  
  while (index < WATTabMenus.length && WATTabMenus[index][0] != tabMenuName)
    index++;
 
  //  add the tab to an existing menu if it was found ...
  if (WATTabMenus.length > index && WATTabMenus[index][0] == tabMenuName)
    WATTabMenus[index].push(tabId);  
  else
  {
    //  ... or create a new menu
    var newTabMenu = Array(2);
    newTabMenu[0] = tabMenuName;
    newTabMenu[1] = tabId;
    WATTabMenus.push(newTabMenu);
  }
}

/**
 *  function to select a tab from the selected tab menu
 *
 *  @param string tabMenuName  name of the selected tab menu
 *  @param string tabId        id of the tab to show
 */
function watTabSelect(tabMenuName, tabId)
{
  //  initialize the variables
  var index = 0;
  
  //  search the tab menu
  while (index < WATTabMenus.length && WATTabMenus[index][0] != tabMenuName)
    index++;

  //  select the tab if the menu was found
  if (WATTabMenus[index][0] == tabMenuName)
  {
    for (i=1; i<WATTabMenus[index].length; i++)
    {
      if (WATTabMenus[index][i] == tabId)
        watDivDisplay(WATTabMenus[index][i]);
      else
        watDivRemove(WATTabMenus[index][i]);
    }
  } 
}

/**
 *  function to toggle a div
 *
 *  @param string  id of the tab to toggle
 */
function watTabToggle(tabId)
{
  if (watDivIsDisplayed(tabId))
    watDivRemove(tabId);
  else
    watDivDisplay(tabId);
}


//=====================================================================================================================
//  balloon tooltip
//=====================================================================================================================

/**
 *  constructor of the balloon manager
 *
 *  @param string name           name of the balloon object
 *  @param string imgBasePath    path of the balloon image directory
 *  @param string divId          id of the balloon-div (the div is created if it does not exist)
 *  @param string content        content of the balloon
 *  @param string baseClassName  css base class name of the balloon
 */
var WATBalloon = function(name, imgBasePath, divId, content, baseClassName)
{
  //  set the member variables
  this.name = name;
  this.imgBasePath = imgBasePath;
  this.divId = divId;
  this.content = content;
  this.width = 200;
  this.imgExt = (WATBrowserInfo.IsIE && !WATBrowserInfo.IsIE7) ? 'gif' : 'png';
  this.baseClassName = baseClassName;
}

/**
 *  function to create the balloon manually
 *
 *  @param bool   leftAlign      if true, the tooltip is shown left aligned, if false it is shown right aligned
 *  @param bool   stemBottom     if true, the bottom stem is shown
 *  @param bool   stemTop        if true, the top stem is shown
 *  @param int    stemPadding    distance of the stem in pixel from the left or right corner
 *  @param string content        content (HTML code) of the tooltip
 *  @param int    contentWidth   width of the content div or -1 if the width should be automatically set
 *  @param int    contentHeight  height of the content div or -1 if the height should be automatically set
 */
WATBalloon.prototype.Create = function(leftAlign, stemBottom, stemTop, stemPadding, content, contentWidth, contentHeight)
{
  //  create a div if it does not yet exist
  var divElement = document.getElementById(this.divId);
  if (!divElement)
  {
    divElement = document.createElement('div');
    divElement.id = this.divId;
    divElement.style.position = 'absolute';
    divElement.style.display = 'none';
    divElement.style.zIndex = 88888;
    if (this.baseClassName) divElement.className = this.baseClassName;
    document.body.appendChild(divElement);
  }

  //  create the balloon
  var balloon = '<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"><tr>' +
                '<td style="vertical-align:bottom;"><img src="' + this.imgBasePath + 'lefttop.' + this.imgExt +
                '" style="display:block;"></td>' + '<td style="background-image:url(' + this.imgBasePath + 'top.' +
                this.imgExt + '); background-repeat:repeat-x; background-position:bottom;"><img src="' + this.imgBasePath +
                (stemTop ? 'stemtop.' + this.imgExt : 'top.' + this.imgExt) + '" style="display:block; margin-' +
                (leftAlign ? 'left' : 'right') + ':' + stemPadding + 'px; margin-' + (leftAlign ? 'right' : 'left') +
                ':auto;"></td><td style="vertical-align:bottom;"><img src="' + this.imgBasePath + 'righttop.' +
                this.imgExt + '" style="display:block;"></td></tr>' +
                '<tr><td style="background-image:url(' + this.imgBasePath + 'left.' + this.imgExt + ');"><img src="' + 
                this.imgBasePath + 'left.' + this.imgExt + '" style="display:block;"></td><td style="' +
                'padding-bottom:5px; padding-right:5px; background-image:url(' + this.imgBasePath +
                'background.gif);"><div style="overflow:auto; ' + (contentWidth > -1 ? (' width:' + contentWidth +
                'px;') : '') + (contentHeight > -1 ? (' height:' + contentHeight + 'px;') : '') + '">' + content +
                '</div></td><td style="background-image:url(' + this.imgBasePath + 'right.' + this.imgExt +
                ');"><img src="' + this.imgBasePath + 'rightblank.' + this.imgExt + '" style="display:block;">' +
                '</td></tr><tr><td style="vertical-align:top;"><img src="' + this.imgBasePath + 'leftbottom.' +
                this.imgExt + '" style="display:block;"></td>' + '<td style="background-image:url(' + this.imgBasePath +
                'bottom.' + this.imgExt + '); background-repeat:repeat-x; background-position:top;"><img src="' +
                this.imgBasePath + (stemBottom ? 'stembottom.' + this.imgExt : 'bottomblank.' + this.imgExt) +
                '" style="display:block; margin-' + (leftAlign ? 'left' : 'right') + ':' + stemPadding + 'px; margin-' +
                (leftAlign ? 'right' : 'left') + ':auto;"></td><td style="vertical-align:top;"><img src="' +
                this.imgBasePath + 'rightbottom.' + this.imgExt + '" style="display:block;"></td></tr></table>';
  //  insert the balloon into the div
  watDivContent(this.divId, balloon);
}

/**
 *  function to automatically create the balloon by setting the content and the position of the balloon
 */
WATBalloon.prototype.AutoCreate = function()
{
  //  create the balloon to get the dimensions
  this.Create(true, true, false, 10, this.content, this.width, -1);

  //  check if the balloon is already displayed    
  var display = watDivIsDisplayed(this.divId);
  //  display the balloon with 100% transparency
  if (!display)
  {
    //  set the transparency
    if (WATBrowserInfo.IsIE)
      window.document.getElementById(this.divId).style.filter="Alpha(opacity=0, finishopacity=0, style=1)";
    else
      window.document.getElementById(this.divId).style.opacity = 0;
    //  "show" the balloon
    watDivDisplay(this.divId);
  }
    
  //  get the height
  height = window.document.getElementById(this.divId).offsetHeight;
  //  remove the balloon again if it has not been shown before the "create"-function was called
  if (!display) watDivRemove(this.divId);
  
  //  get the best position of the balloon
  leftAlign = (watGetWindowWidth() - watMousePosX < (this.width+40)) ? false : true;
  if ((watMousePosY - watMouseGetScrollTop()) > (height+40))
  {
    this.Create(leftAlign, true, false, 10, this.content, this.width, -1);
    watDivPos(this.divId, watMousePosY - height - 10 - watMouseGetScrollTop(),
              leftAlign ? watMousePosX-20 : watMousePosX-this.width, -1, -1); 
  }
  else
  {
    this.Create(leftAlign, false, true, 10, this.content, this.width, -1);
    watDivPos(this.divId, watMousePosY + 18 - watMouseGetScrollTop(),
              leftAlign ? watMousePosX-20 : watMousePosX-this.width, -1, -1); 
  }
}