/*
 * Project:     zdk-portal
 *
 * Copyright:   Copyright (c) 2007
 * Company:     SecureNet GmbH
 * Created:     Sep 26, 2007
 * Author:      Knut Sander, knut.sander@securenet.de (ks)
 * Version:     1.0
 *
 * SVN-Info:    $Revision:: 801    $ by $Author:: ks    $
 *              $LastChangedDate:: 2008-12-17 17:39:01 #$
 */
 
/**
 * JS-Code to create a overlay div on mouse over an help icon. 
 *
 * Example:
 * - in you HTML head:
 *   <script type="text/javascript" src="/zdk-portal/js/helptip.js"></script>
 *
 * - exactly once in you HTML page:
 *    <div id="helpTip"></div>
 *
 * - for each help icon (you can use any tag instead of an image):
 *  <img class="helpTip" src="images/help-icon.gif" 
 *       onmouseover="toggleHelpTip(this);" 
 *       onmouseout="toggleHelpTip(this);" 
 *       title="The help text to show">
 *
 * - in your css something like that:
 *   #helpTip {
 *     position: absolute;
 *     background-color: #e5e5e5;
 *     border: 1px solid #d0d0d0;
 *     padding: 5px;
 *     width: 250px;
 *     z-index: 99;
 *     display: none;
 *   }
 *   img.helpTip {
 *     cursor: help;
 *     vertical-align: top;
 *   }
 */
 
/**
 * Global variable to hold and trac mouse position on mouse move event and set coordinates into the global variable.
 */ 
var mouse = new Object();
mouse.x = 0;
mouse.y = 0;
document.onmousemove = getCoordinate;
function getCoordinate(event)
{ 
  if (!event) event = window.event;
  if (event.pageX || event.pageY)   {
    mouse.x = event.pageX;
    mouse.y = event.pageY;
  }
  else if(document.body && document.documentElement)
  {
    if (event.clientX || event.clientY)  {
      mouse.x = event.clientX + document.body.scrollLeft
        + document.documentElement.scrollLeft;
      mouse.y = event.clientY + document.body.scrollTop
        + document.documentElement.scrollTop;
    }
  }
  // document.title = "(x="+ mouse.x +", y=" + mouse.y +")";
}

/**
 * Global variable and toggle function for positioning help tip overlay div to mouse position,
 * containing the source (trigger) element title as texts.
 */
var helpTip = new Object();
helpTip.element = null;
helpTip.offsetX = -215;  // - left // 10 - right
helpTip.offsetY = -35;


/**
 * Toggle display of Help-DIV with right top corner on the upper left of the cursor.
 */
function toggleHelpTip(trigger, id) {
  if (id == null) 
  {
    id = "helpTip";
  }
  if (helpTip.element == null) 
  {
    helpTip.element = document.getElementById(id);
    //alert("helpTip.element=" + helpTip.element)
  }
  if (helpTip.element != null)
  {
    if(helpTip.element.style.display != "block") 
    {
      var helpText = trigger.getAttribute("title");
      if((helpText != null) && (helpText != ""))
      {
        trigger.setAttribute("title", "");
        helpTip.element.innerHTML = helpText;
        helpTip.element.style.display = "block";
        helpTip.element.style.left = (mouse.x + helpTip.offsetX) + "px";
        helpTip.element.style.top  = (mouse.y + helpTip.offsetY) + "px";
      }
    }
    else {
      helpTip.element.style.display = "none";
      trigger.setAttribute("title", helpTip.element.innerHTML);
    }
  }
}

/**
 * Toggle display of Help-DIV with left top corner on the lower right of the cursor.
 */
function toggleHelpTipRight(trigger, id) {
  helpTip.offsetX_orig = helpTip.offsetX;
  helpTip.offsetY_orig = helpTip.offsetY;
  
  helpTip.offsetX = 10;
  helpTip.offsetY = 10;
  
  toggleHelpTip(trigger, id)
  
  helpTip.offsetX = helpTip.offsetX_orig;
  helpTip.offsetY = helpTip.offsetY_orig;
}

/* -- eof ----------------------------------------------------------------------------------------------------------- */