/* Tooltips support */

var  listOfTagsToAddTooltip = [ 'input', 'a', 'img', 'span' ]

// tooltip represents tag which display the tooltip
var tooltip;



function createTooltip(){
  // Define tooltip tag
  tooltip    = document.createElement('span');
  tooltip.id = 'tooltip';
  tooltip.style.position = 'absolute';
  // Add this tooltip to the content of the page
  document.getElementsByTagName("body")[0].appendChild(tooltip);
}


function addEventForTooltips(){

  for(var i = 0; i < listOfTagsToAddTooltip.length; i++){
    // Add tooltips
    addTooltipAttributes(listOfTagsToAddTooltip[i]);
  }  
}


function addEventOnInputsForTooltips(){
  // Define tooltip tag
  createTooltip();
  addEventForTooltips();
}


function day1beforestarting(){
    createTooltip();
    var day1container = document.getElementById('day1beforestarting');
    addTooltipAttributes('span', day1container);
}


function addTooltipAttributes(tagName, container){
    // Add attributes tooltip for all tags 'tagName'
    // if it have title and its first class is tooltip

    var container = container||document;

    var tags = container.getElementsByTagName(tagName);
    
    for(var index = 0; index < tags.length; index++){
        tag = tags[index];
        addTooltipAttribute(tag);
    }
}


function addTooltipAttribute(tag){
        // Add tooltip just for tag which has title
        if (tag.title && tag.className){
    
          // Get the first class name
          className = tag.className.split(' ')[0];
          if(className == 'tooltip')
          {

            // Create element which contains text to display in tooltip
            spanTag           = document.createElement('span');
            //TODO: make this with createElement, createTextNode ...
            spanTag.innerHTML = '<div id="tooltip_top">&nbsp;</div> <div id="tooltip_body"> <p id="tooltip_content">' + tag.title + '</p> </div> <div id="tooltip_bottom">&nbsp;</div>';
            tag.tooltipContent = spanTag;

            // Remove title to display only tooltip
            tag.removeAttribute("title");
    
            // Add events for this tag
            tag.onmouseover=showTooltip;
            tag.onmouseout=hideTooltip;
            tag.onmousemove=moveTooltip;
          }
        }

}


function showTooltip(e){
  tooltip.appendChild(this.tooltipContent);
  setTooltipPosition(e);
  // Enabled trnasparency for IE6
  enableAlphaImage( document.getElementById('tooltip_top'));
  enableAlphaImage( document.getElementById('tooltip_body'));
  enableAlphaImage( document.getElementById('tooltip_bottom'));
}

function hideTooltip(e){
  tooltip.removeChild(this.tooltipContent);
}

function moveTooltip(e){
  setTooltipPosition(e);
  enableAlphaImage( document.getElementById('tooltip_top'));
  enableAlphaImage( document.getElementById('tooltip_body'));
  enableAlphaImage( document.getElementById('tooltip_bottom'));
}

function setTooltipPosition(e){

  var Mouse_X;
  var Mouse_Y;
  var DocRef;    // Use for IE

  // if DOCTYPE for IE
  if( document.documentElement && document.documentElement.scrollTop)
    DocRef = document.documentElement;
  else
    DocRef = document.body;

  if( e){
    Mouse_X = e.pageX;
    Mouse_Y = e.pageY;
  }
  else{ 
    Mouse_X = event.clientX;
    Mouse_Y = event.clientY;

    // Add ScrollBars position
    Mouse_X += DocRef.scrollLeft;
    Mouse_Y += DocRef.scrollTop;
  }

  // New tooltip position
  tooltipX = Mouse_X - 15;

  // Get tooltip width
  tooltipWidth  = tooltip.offsetWidth;

  // Get screen width
  screenWidth  = DocRef.clientWidth;

  tooltip_top = document.getElementById('tooltip_top');

  // Make sure tooltip is in the screen
  if((tooltipX + tooltipWidth) > screenWidth){
    tooltipX = screenWidth - tooltipWidth - 10;
    tooltip_top.style.backgroundImage="url(/richmorning/images/lesson-tooltip-top-280px-without-arrow.png)";
    tooltip_top.style.height = "29px";
  }
  else
  {
    tooltip_top.style.backgroundImage="url(/richmorning/images/lesson-tooltip-top-280px.png)";
    tooltip_top.style.height = "48px";
  }

  // Set tooltip position
  //Mouse_Y -= tooltip.offsetHeight;
  tooltip.style.top  = (Mouse_Y + 10) + "px";
  tooltip.style.left = tooltipX + "px";
}