// VoodooVox bubble-hints.
//
// based on Javascript for Bubble Tooltips by Alessandro Fulciniti
//  http://pro.html.it - http://web-graphics.com

var ELEMENT_TOP_OFFSET = 22;
var HINT_DEBUG_ELEMENT;
var hintHasFocus;

hintbelow= new Image(200,150); 
hintbelow.src="/images/hints/hintbg_below.gif"; 

hintabove= new Image(200,150); 
hintabove.src="/images/hints/hintbg_above.gif"; 


function addHints()
{
  if ( hintFields )
  {
    for ( x = 0; x < hintFields.length; x++ )
    {
      prepareHint( hintFields[x] );
    }

    hintHasFocus = false;

    enableHints();

    HINT_DEBUG_ELEMENT = document.getElementById( "hints_debug" );
  }
}

// set up main hint div
function enableHints()
{
  var iframe = document.createElement( "iframe" );
  iframe.id = "hider";
  iframe.setAttribute( "id", "hider" );
  iframe.frameBorder = 0;
  iframe.setAttribute( "frameborder", "0" );
  iframe.style.filter = "alpha(opacity:0)";
  iframe.style.position = "absolute";
  iframe.style.display = "none";
  document.getElementsByTagName( "body" )[0].appendChild( iframe );

  var h = document.createElement( "span" );
  h.id = "btc";
  h.setAttribute( "id", "btc" );
  h.style.position = "absolute";
  document.getElementsByTagName( "body" )[0].appendChild( h );
}

// add a tooltip to an element
function prepareHint( id )
{
  var element = document.getElementById( id );

  if ( ! element )
    return ;

  var hint = document.getElementById( id + "_hint" ).innerHTML;
  var title = document.getElementById( id + "_title" ).innerHTML;

  tooltip = createEl( "span", "hint" );
  revTooltip = createEl( "span", "hint" );

  var t = createEl( "span", "top" );
  t.innerHTML = title;
  tooltip.appendChild( t );

  var b = createEl( "span", "bottom" );
  b.innerHTML = hint;
  tooltip.appendChild( b );

  var rt = createEl( "span", "revTop" );
  rt.innerHTML = title;
  revTooltip.appendChild( rt );

  var rb = createEl( "span", "revBottom" );
  rb.innerHTML = hint;
  revTooltip.appendChild( rb );

  setOpacity( tooltip );
  setOpacity( revTooltip );

  element.tooltip = tooltip;
  element.revTooltip = revTooltip;

  var relativeSpan = document.getElementById( id + "_relative" );
  var relative;
  if ( relativeSpan )
    relative = relativeSpan.innerHTML;

  if ( relative )
  {
    element.relative = relative;
  }

  element.onmouseover = mouseoverTooltip;
  element.onmouseout = mouseoutTooltip;
  element.onfocus = focusTooltip;
  element.onblur = blurTooltip;
}

// create an element of type 't', class 'c'
function createEl( t, c )
{
  var x = document.createElement( t );
  x.className = c;
  x.style.display = "block";
  return( x );
}

function mouseoverTooltip()
{
  if ( hintHasFocus )
    return;

  showTooltip( this );
}

function mouseoutTooltip()
{
  if ( hintHasFocus )
    return;

  hideTooltip();
}

function focusTooltip()
{
  hintHasFocus = true;
  showTooltip( this );
}

function blurTooltip()
{
  hintHasFocus = false;
  hideTooltip();
}

// show element E
function showTooltip( e )
{
  deleteTip();

  document.getElementById( "btc" ).appendChild( e.tooltip );

  var locator = e;

  if ( locator.relative )
  {
    var otherLocator = document.getElementById( locator.relative );
    locator = otherLocator;
  }

  locate( locator, e.revTooltip );
}

// show element E
function hideTooltip()
{
  deleteTip();

  document.getElementById( "hider" ).style.display = "none";
}

function deleteTip()
{
  var btc = document.getElementById( "btc" );

  while ( btc.childNodes.length > 0 ) 
    btc.removeChild( btc.firstChild );
}

// set element opacity
function setOpacity( el ) 
{
  el.style.filter = "alpha(opacity:95)";
  el.style.KHTMLOpacity = "0.95";
  el.style.MozOpacity = "0.95";
  el.style.opacity = "0.95";
}

// set the position of the hint div, relative to the triggering element
function locate( locatorElement, revTooltip )
{
  var position = findPos( locatorElement );
  var locatorLeft = position[0];
  var locatorTop = position[1];

  var posy = locatorTop  + ELEMENT_TOP_OFFSET;
  var posx = locatorLeft + ( locatorElement.clientWidth - 50 );

  var hider = document.getElementById( "hider" );
  var btc = document.getElementById( "btc" );

  var pageHeight = windowSize()[0];

  if ( HINT_DEBUG_ELEMENT )
    HINT_DEBUG_ELEMENT.innerHTML = posy + " + " + btc.clientHeight + " > " + pageHeight;

  if ( posy + btc.clientHeight > pageHeight )
  {
    posy = locatorTop - btc.clientHeight + 10;
    deleteTip();
    btc.appendChild( revTooltip );
  }

  btc.style.top = posy + "px";
  btc.style.left = posx + "px";

  hider.style.top = posy + "px" ;
  hider.style.left = posx + "px" ;
  hider.style.height =  btc.clientHeight + "px";
  hider.style.width =  btc.clientWidth + "px";
  hider.style.display = "inline";
}

function findPos( element )
{
  var curleft = curtop = 0;
  if ( element.offsetParent ) 
  {
    curleft = element.offsetLeft
    curtop = element.offsetTop
    while ( element = element.offsetParent ) 
    {
      curleft += element.offsetLeft
      curtop += element.offsetTop
    }
  }
	
  return [curleft,curtop];
}

function windowSize() 
{
  var width = 0, height = 0;

  if( typeof( window.innerWidth ) == 'number' ) 
  {
    //Non-IE
    width = window.innerWidth;
    height = window.innerHeight;
  } 
  else if ( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
  {
    //IE 6+ in 'standards compliant mode'
    width = document.documentElement.clientWidth;
    height = document.documentElement.clientHeight;
  } 
  else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) 
  {
    //IE 4 compatible
    width = document.body.clientWidth;
    height = document.body.clientHeight;
  }

  return [height,width];
}