///  This function correctly sets up the hover state
///    for the menu items.
function initHoverMenu(theItem, theName, theColor)
{
	var fx = new Fx.Styles(theItem, {duration:1, wait:false});

  //Preload Images
	theItem.nameImg  = new Image(); theItem.nameImg.src  = '/ergo/images/nav_'+theName+'_text_on.gif';
  theItem.leftImg  = new Image(); theItem.leftImg.src  = '/ergo/images/bg_nav_'+theName+'_on_left.gif';
  theItem.rightImg = new Image(); theItem.rightImg.src = '/ergo/images/bg_nav_'+theName+'_on_right.gif';

	theItem.addEvent('mouseenter', function()
	{
	  this.style.backgroundColor = theColor;

	  var theImg = this.getElement('img');
	  theImg.src = this.nameImg.src;

	  var leftCnr = this.getElement('div');
	  leftCnr.style.backgroundColor = theColor;
	  leftCnr.style.backgroundImage = 'url(/ergo/images/bg_nav_'+theName+'_on_left.gif)';

	  var rightCnr = leftCnr.getElement('div');
	  rightCnr.style.backgroundImage = 'url(/ergo/images/bg_nav_'+theName+'_on_right.gif)';
	});

	theItem.addEvent('mouseleave', function()
	{
	  this.style.backgroundColor = '#757575';

	  var theImg = this.getElement('img');
	  theImg.src = '/ergo/images/nav_'+theName+'_text_off.gif';

	  var leftCnr = this.getElement('div');
	  leftCnr.style.backgroundColor = '#757575';
	  leftCnr.style.backgroundImage = 'url(/ergo/images/bg_nav_top_off_left.gif)';

    var rightCnr = leftCnr.getElement('div');
	  rightCnr.style.backgroundImage = 'url(/ergo/images/bg_nav_top_off_right.gif)';
	});
}


///  This function sets up the hover text over an image.
var fx     = new Array();
var fxInit = new Array();

function initHoverText(theNum)
{
  $('image'+theNum).addEvent('mouseover',     function() { fx[theNum].start({'opacity': fx[theNum].full}); } );
  $('image'+theNum).addEvent('mouseout',      function() { fx[theNum].start({'opacity': 0}); } );
  $('hoverDiv'+theNum).addEvent('mouseover',  function() { fx[theNum].start({'opacity': fx[theNum].full}); } );
  $('hoverDiv'+theNum).addEvent('mouseout',   function() { fx[theNum].start({'opacity': 0}); } );
  $('hoverText'+theNum).addEvent('mouseover', function() { fx[theNum].start({'opacity': fx[theNum].full}); } );
  $('hoverText'+theNum).addEvent('mouseout',  function() { fx[theNum].start({'opacity': 0}); } );

  var theText  = document.getElementById('hoverDiv'+theNum);
  var theImage = document.getElementById('image'+theNum);
  $('hoverDiv'+theNum).injectBefore(theImage);

  if (window.webkit419) $('hoverDiv'+theNum).style.left = ($('image'+theNum).offsetLeft - 7) + "px";
  else if (!window.ie) $('hoverDiv'+theNum).style.left = $('image'+theNum).offsetLeft + "px";

  fxInit[theNum] = new Fx.Styles($('hoverDiv'+theNum), {duration:0, wait:false});  fxInit[theNum].start({ 'opacity':0	});

  fx[theNum] = new Fx.Styles($('hoverDiv'+theNum), {duration:270, wait:false});
  fx[theNum].full = .9;
}


///  These functions correctly position the annotation toggle
///    and sets up it's onclick functionality.
function initAnnotation(theName, theId)
{
  var theBody = document.getElementById('ann_' + theName + '_body');
  var theHeight = theBody.offsetHeight;

  theBody.style.display = "";

  ///var theSpan = document.getElementById(theName);
  var spanList = document.getElementsByClassName(theName);

  var theElement = spanList[0];

  if (spanList.length == 0)
  {
    theBody.parentNode.removeChild(theBody);
    return;
  }

  var theToggle = document.getElementById('ann_' + theName + '_toggle');
  //if (theSpan) $(theName + '_toggle').injectTop(theSpan);
  theToggle.style.display = "";
  theToggle.style.visibility = "hidden";

  theTop = 0;
  while(theElement != null )
  {
    theTop    += theElement.offsetTop;
    theElement = theElement.offsetParent;
  }

  theElement = document.getElementById('centerBlockLeft');

  theLeft = 0;
  while(theElement != null )
  {
    theLeft   += theElement.offsetLeft;
    theElement = theElement.offsetParent;
  }
  theLeft += 3;

  theToggle.style.left = theLeft + "px";
  theToggle.style.top  = theTop  + "px";

  $('ann_' + theName + '_body').injectAfter(spanList[(spanList.length-1)]);
  //theBody.injectAfter(spanList[(spanList.length-1)]);

  var theSlide = new Fx.Slide('ann_' + theName + '_body');
  theSlide.hide();

  theToggle.bodyHeight = theHeight;
  theToggle.theSlide   = theSlide;
  theToggle.spanList   = spanList;
  theToggle.theId      = theId;
}

function placeAnnotation(theName, theId)
{
  var theToggle = document.getElementById(theName);

  //var theElement = document.getElementById(theName);
  if (theToggle.spanList && theToggle.spanList.length) var theElement = theToggle.spanList[0];
  else
  {
    theToggle.style.visibility = "hidden";
    return;
  }
  theToggle.style.visibility = "visible";

theElement = document.getElementById('centerBlockLeft');
theLeft = 0;
while(theElement != null )
{
  theLeft   += theElement.offsetLeft;
  theElement = theElement.offsetParent;
}
theLeft += 3;
theToggle.style.left = theLeft + "px";

  theToggle.lastClick = $time();
  theToggle.theState  = false;
  theToggle["blnToggle"+theId] = true;
  theToggle.onclick = function ()
  {
    //alert(this.bodyHeight + " : " + this.theSlide.wrapper.offsetHeight + " : " + this.theSlide.wrapper.offsetTop);
    var thisClick = $time();
    var diffClick = thisClick - this.lastClick;

    if (diffClick > 660)
    {
      this.lastClick = thisClick;
      window.annCurrent = this;
      window.startSlide();
      if (this.theState)
      {
        this.theSlide.slideOut();
        this.theState = false;
        document.images['img'+this.theId].src='/ergo/images/icon_annot_closed.gif';
        document.images['img'+this.theId].alt='Click for more information';
      }
      else
      {
        this.theSlide.slideIn();
        this.theState = true;
        document.images['img'+this.theId].src='/ergo/images/icon_annot_open.gif';
        document.images['img'+this.theId].alt='Click to close';
      }
    }
  }
  theToggle.onmouseover = function ()
  {
    for (i = 0; i < this.spanList.length; i++)
    {
      this.spanList[i].style.backgroundColor = '#F5F5F5';
    }
  }
  theToggle.onmouseout = function ()
  {
    for (i = 0; i < this.spanList.length; i++)
    {
      this.spanList[i].style.backgroundColor = '';
    }
  }
}

function adjustAnnotation()
{
  for (i = 0; i < this.annArray.length; i+=2)
  {
    theToggle  = this.annArray[i];
    if (!theToggle.spanList) continue;
    theElement = theToggle.spanList[0];

    theTop = 0;
    while(theElement != null )
    {
      theTop    += theElement.offsetTop;
      theElement = theElement.offsetParent;
    }

    theElement = document.getElementById('centerBlockLeft');

    theLeft = 0;
    while(theElement != null )
    {
      theLeft   += theElement.offsetLeft;
      theElement = theElement.offsetParent;
    }
    theLeft += 3;

    theToggle.style.left = theLeft + "px";
    theToggle.style.top  = theTop  + "px";
  }
}

function initTeacherAnnotations()
{
  var toggle1 = document.getElementById('ann_area1_toggle');
  var area1   = document.getElementsByClassName('hidden_area_1')[0];
  if (area1)
  {
    var theHeight = area1.offsetHeight;

    var slide1 = new Fx.Slide(area1);
    slide1.hide();
    var link1  = document.getElementsByClassName('hidden_link_1')[0];
    link1.theToggle = toggle1;
    link1.style.cursor = "pointer";
    link1.onclick  = function () { this.theToggle.onclick(); }

    this.annArray[this.annArray.length] = toggle1;
    this.annArray[this.annArray.length] = link1;

    toggle1.style.display = "";
    toggle1.bodyHeight = theHeight;
    toggle1.theSlide   = slide1;
    toggle1.theId      = '1';
    toggle1.spanList = new Array();
    toggle1.spanList[0] = link1;
    theElement = link1;

    theTop = 0;
    while(theElement != null )
    {
      theTop    += theElement.offsetTop;
      theElement = theElement.offsetParent;
    }

    theElement = document.getElementById('centerBlockLeft');

    theLeft = 0;
    while(theElement != null )
    {
      theLeft   += theElement.offsetLeft;
      theElement = theElement.offsetParent;
    }
    theLeft += 3;

    toggle1.style.left = theLeft + "px";
    toggle1.style.top  = theTop  + "px";

    placeAnnotation('ann_area1_toggle', '1');
  }
  else toggle1.style.visibility = "hidden";



  var toggle2 = document.getElementById('ann_area2_toggle');
  var area2   = document.getElementsByClassName('hidden_area_2')[0];
  if (area2)
  {
    var theHeight = area2.offsetHeight;

    var slide2 = new Fx.Slide(area2);
    slide2.hide();
    var link2  = document.getElementsByClassName('hidden_link_2')[0];
    link2.theToggle = toggle2;
    link2.style.cursor = "pointer";
    link2.onclick  = function () { this.theToggle.onclick(); }

    this.annArray[this.annArray.length] = toggle2;
    this.annArray[this.annArray.length] = link2;

    toggle2.style.display = "";
    toggle2.bodyHeight = theHeight;
    toggle2.theSlide   = slide2;
    toggle2.theId      = '2';
    toggle2.spanList = new Array();
    toggle2.spanList[0] = link2;
    theElement = link2;

    theTop = 0;
    while(theElement != null )
    {
      theTop    += theElement.offsetTop;
      theElement = theElement.offsetParent;
    }

    theElement = document.getElementById('centerBlockLeft');

    theLeft = 0;
    while(theElement != null )
    {
      theLeft   += theElement.offsetLeft;
      theElement = theElement.offsetParent;
    }
    theLeft += 3;

    toggle2.style.left = theLeft + "px";
    toggle2.style.top  = theTop  + "px";

    placeAnnotation('ann_area2_toggle', '2');
  }
  else toggle2.style.visibility = "hidden";
}


function startSlide()
{
  for (var i = 0; i < this.annArray.length; i += 2)
  {
    window.clearInterval(this.annArray[i].theInterval);
    if (this.annArray[i] != this.annCurrent)
    {
      this.annArray[i].startTime = $time();
      this.annArray[i].theInterval = window.setInterval("doSlide(this.annArray["+i+"], this.annArray["+(i+1)+"])", 21);
    }
  }
}
function doSlide(theToggle, theElement)
{
  var theTop = 0;
  while(theElement != null )
  {
    theTop    += theElement.offsetTop;
    theElement = theElement.offsetParent;
  }
  theToggle.style.top  = theTop  + "px";

  var curTime  = $time();
  var diffTime = curTime - theToggle.startTime;
  if (diffTime > 660)
  {
    window.clearInterval(theToggle.theInterval);
  }
}

var annCurrent;
var annArray = new Array();


document.getElementsByClassName = function(cl)
{
  //From Stephen Chapman
  //  http://javascript.about.com/library/bldom08.htm

  var retnode = [];
  var myclass = new RegExp('\\b'+cl+'\\b');
  var elem = this.getElementsByTagName('*');
  for (var i = 0; i < elem.length; i++)
  {
    var classes = elem[i].className;
    if (myclass.test(classes)) retnode.push(elem[i]);
  }

  return retnode;
};

document.testCaption = "<p><u>Test</u> <a href=\"/ergo/learn_skills\">Caption</a></p>";

window.addEvent('domready', function(event) { window.adjustAnnotation(); } );
window.addEvent('resize',   function(event) { window.adjustAnnotation(); } );