//*****************************************************************************************************
//*** Author:     Ruediger von Creytz     ruediger.creytz@globalbit.net                             ***
//*** Copyright:  globalBIT, LLC          http://www.globalbit.net                                  ***
//*** Version:    20100301                                                                          ***
//*****************************************************************************************************


//*****************************************************************************************************
//*** Implement following lines into the head of your template: ***************************************
//*****************************************************************************************************
/*

<script src="/sap/bw/Mime/Customer/IAS/JavaScript/infoBox.js" type="text/javascript"></script>

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

var infoBoxAlign = "center";
var infoBoxAutoClose = true;
var infoBoxDelay = 500;
var infoBoxMaxWidth = 250;
var infoBoxMaxHeight = 250;
var infoBoxTimer = false;

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

/**
 * Displays an info box that has been created by "writeInfoBoxLayer(delay, width, height)".
 * @param event Actual event.
 * @param content Content to put into the info box.
 * @param delay Delay in ms for displaying the info box.
 * @param maxWidth Maximum width of the info box layer.
 * @param maxHeight Maximum height of the info box layer.
 * @param overflowX Defines the horizontal overflow. Default is "hidden".
 * @param noAutoClose If "true" info box is not closing by onmouseout.
 * @param cursor CSS Style of the mouse cursor. Examples: "pointer", "url(/images/img.cur),pointer"
 */
function displayInfoBoxLayer(event, content, delay, maxWidth, maxHeight, overflowX, noAutoClose, cursor) {
  if(content == null || content == "")
    return;
  if(isNaN(delay))
    delay = infoBoxDelay;
  if(isNaN(maxWidth))
    maxWidth = infoBoxMaxWidth;
  if(isNaN(maxHeight))
    maxHeight = infoBoxMaxHeight;
  if(overflowX == null || overflowX == "")
    overflowX = "hidden";
  infoBoxAutoClose = true;
  if(noAutoClose != null && noAutoClose)
    infoBoxAutoClose = false;
  if(cursor == null) {
    cursor = "default";
    if(!infoBoxAutoClose)
      cursor = "pointer";
  }

  var theWindowWidth;
  if(document.documentElement)
    theWindowWidth = document.documentElement.clientWidth;
  else
    theWindowWidth = window.innerWidth;
  if(maxWidth + 20 > theWindowWidth)
    maxWidth = theWindowWidth - 20;

  var theWindowHeight;
  if(document.documentElement)
    theWindowHeight = document.documentElement.clientHeight;
  else
    theWindowHeight = window.innerHeight;
  if(maxHeight + 20 > theWindowHeight)
    maxHeight = theWindowHeight - 20;

  var infoBoxDiv = document.getElementById("infoBox");

  hideInfoBoxLayerDelayed();

  //Defaultwerte wieder herstellen
  infoBoxDiv.style.overflowX = "hidden";
  infoBoxDiv.style.overflowY = "hidden";
  infoBoxDiv.style.height = "auto";
  infoBoxDiv.style.width = "auto";

  //Cursor-Style setzen
  infoBoxDiv.style.cursor = cursor;

  //Write content
  infoBoxDiv.innerHTML = content;

  // Reduce width to max width
  if(infoBoxDiv.offsetWidth > maxWidth) {
    infoBoxDiv.style.overflowX = overflowX;
    if(window.event) {
      infoBoxDiv.style.width = maxWidth;
    }
    else {
      infoBoxDiv.style.width = maxWidth + "px";
    }
  }

  // Reduce height to max height
  if(infoBoxDiv.offsetHeight > maxHeight) {
    infoBoxDiv.style.overflowY = "auto";
    if(window.event)
      infoBoxDiv.style.height = maxHeight;
    else
      infoBoxDiv.style.height = maxHeight + "px";

    if(window.event)
      infoBoxDiv.style.width = infoBoxDiv.offsetWidth + 20;
    else
      infoBoxDiv.style.width = (infoBoxDiv.offsetWidth + 20) + "px";
    if(infoBoxDiv.offsetWidth > maxWidth) {
      infoBoxDiv.style.overflowX = overflowX;
      if(window.event)
        infoBoxDiv.style.width = maxWidth;
      else
        infoBoxDiv.style.width = maxWidth + "px";
    }
  }

  //X-Positioning
  var varX;
  if(window.event)
    varX = window.event.clientX;
  else
    varX = event.clientX;
  if(varX) {
    var x;
    if((varX * 2) <= theWindowWidth) {
      //infoBox right from mouse pointer
      x = varX + 5;
    }
    else {
      //infoBox left from mouse pointer
      x = varX - infoBoxDiv.offsetWidth - 10;
    }
    x += window.document.documentElement.scrollLeft;
    //move infoBox to the right if there is an overflow on the left hand side
    if(x - window.document.documentElement.scrollLeft < 10)
      x = window.document.documentElement.scrollLeft + 10;
    //move infoBox to the left if there is an overflow on the right hand side
    if(x - window.document.documentElement.scrollLeft + infoBoxDiv.offsetWidth > theWindowWidth - 20)
      x = window.document.documentElement.scrollLeft + theWindowWidth - infoBoxDiv.offsetWidth - 10;
    if(window.event)
      infoBoxDiv.style.left = x;
    else
      infoBoxDiv.style.left = x + "px";
  }

  //Y-Positioning
  var varY;
  if(window.event)
    varY = window.event.clientY;
  else
    varY = event.clientY;
  if(varY) {
    var y;
    if((varY * 2) <= theWindowHeight) {
      //infoBox below mouse pointer
      y = varY + 5;
    }
    else {
      //infoBox above mouse pointer
      y = varY - infoBoxDiv.offsetHeight - 2;
    }
    y += window.document.documentElement.scrollTop;
    //move infoBox down if there is an overflow on the top
    if(y - window.document.documentElement.scrollTop < 10)
      y = window.document.documentElement.scrollTop + 10;
    //move infoBox up if there is an overflow on the bottom
    if(y - window.document.documentElement.scrollTop + infoBoxDiv.offsetHeight > theWindowHeight - 20)
      y = window.document.documentElement.scrollTop + theWindowHeight - infoBoxDiv.offsetHeight - 10;
    if(window.event)
      infoBoxDiv.style.top = y;
    else
      infoBoxDiv.style.top = y + "px";
  }
  infoBoxTimer = window.setTimeout("displayInfoBoxLayerDelayed()", delay);
}

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

/**
 * Displays the info box layer created by "writeInfoBoxLayer(delay, maxWidth)" after the delay.
 */
function displayInfoBoxLayerDelayed() {
  document.getElementById("infoBox").style.visibility = "visible";
  stopInfoBoxTimer();
}

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

/**
 * Displays an info box that has been created by "writeInfoBoxLayer(delay, width, height)".
 * @param delay Delay in ms for displaying the info box.
 */
function hideInfoBoxLayer(delay) {
  if(isNaN(delay) && delay)
    delay = infoBoxDelay * 3;
  infoBoxTimer = window.setTimeout("hideInfoBoxLayerDelayed()", delay);
}

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

/**
 * Hides an info box layer created by "writeInfoBoxLayer(delay, maxWidth, maxHeight)".
 */
function hideInfoBoxLayerDelayed() {
  document.getElementById("infoBox").style.visibility = "hidden";
  stopInfoBoxTimer();
}

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

/**
 * Stops the InfoBoxTimer.
 */
function stopInfoBoxTimer() {
  try {
    window.clearTimeout(infoBoxTimer);
  }
  catch(e) {
    // do nothing
  }

  infoBoxTimer = false;
}

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

/**
 * Writes the basis for an info box layer.
 * @param delay Delay in ms for displaying the info box.
 * @param maxWidth Maximum width of the info box layer.
 */
function writeInfoBoxLayer(delay, maxWidth, maxHeight, align) {
  if(!isNaN(delay) && delay)
    infoBoxDelay = delay;
  if(!isNaN(maxWidth))
    infoBoxMaxWidth = maxWidth;
  if(!isNaN(maxHeight))
    infoBoxMaxHeight = maxHeight;
  if(align != null && (align == "left" || align == "center" || align == "right" || align == "justify"))
    infoBoxAlign = align;

  document.write(""
    + "<div style=\"background-color: #ECE8EA;"
                + " border: 1px solid #000000;"
                + " color: #000000;"
                + " cursor: default;"
                + " font-size: 11px;"
                + " margin-left: 5px;"
                + " overflow: hidden;"
                + " overflow-x: hidden;"
                + " padding-bottom: 2px;"
                + " padding-left: 3px;"
                + " padding-right: 3px;"
                + " padding-top: 2px;"
                + " position: absolute;"
                + " text-align: " + infoBoxAlign + " !important;"
                + " top: 100px;"
                + " visibility: hidden;"
                + " z-index: 99;"
                + "\""
        + " id=\"infoBox\""
        + " onclick=\"if(!infoBoxAutoClose){hideInfoBoxLayerDelayed();}\""
        + " onmouseover=\"if(infoBoxAutoClose){stopInfoBoxTimer();}\""
        + " onmouseout=\"if(infoBoxAutoClose){hideInfoBoxLayer();}\">"
    + "<" + "/div>"
  );
}

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