/********************************************************************************************
*                                     POP UP BOX SCRIPT                                     *
********************************************************************************************/
var opac = 1;
var fader;
var myPNG;
var myError;

/************************************************************************************
* This variable is left over from the tutorials which also provide a drop down menu *
* for navigation. We have to hide the drop-down temporarily in IE. Otherwise, it    *
* shows through our bubble.                                                         *
************************************************************************************/
var myJumper; 

/************************************************************************************
* This variable allows one to specify whether the bubble should fade out after      *
* displaying the message for the amount of time specified by 'timer'. Defaults to   *
* fading out after 1.5 seconds. (Timer starts after the fade in is completed.)      *
************************************************************************************/
var setFadeOut = true;
var timer = 1500;  // no. of milliseconds for display


/**************************************************
* This function initializes the bubble, including *
* setting the shadow for both Mozilla-based       *
* and IE-based browsers.                          *
**************************************************/
function initBubble()
{
   if(isIE)
   {
      document.getElementById("bubbleMessage").style.width = "250";
      document.getElementById("bubbleMessage").style.marginBottom = "-1px";
   }
   else
      document.getElementById("bubbleMessageContainer").style.backgroundImage = "url('http://www.library.arizona.edu/layout_imgs/popupBubble/bubbleShadow.png')";

   myPNG = document.getElementById("pngImage");
   myError = document.getElementById("bubbleMessageContainer");
   myJumper = document.getElementById("jumper");
}


/**************************************************
* This function initializes the bubble, including *
* setting the shadow for both Mozilla-based       *
* and IE-based browsers.                          *
**************************************************/
function showElementBubble(element, message)
{
   var clickX;
   var clickY;
   
   
   
   if(isIE)
   {
      clickX = element.offsetLeft + document.body.scrollLeft;
      clickY = element.offsetTop + document.body.scrollTop - 110;
   }
   else
   {
      /*****************************************************
      * NOTE: This doesn't work great w/ floated elements. *
      *****************************************************/
      clickX = element.offsetLeft;
      clickY = element.offsetTop - 200;
   }
   
   showBubble(clickX,clickY,message);
}


/**************************************************
* This function will show the bubble at the given *
* coordinates with the given message.             *
**************************************************/
function showBubble(xVal, yVal, message)
{
   if(isMac && isIE)
   {
      alert(  message.replace(/<\/?[^>]+>/gi, '')  );
      return;
   }

   document.getElementById("bubbleMessage").style.display = "inline";
   document.getElementById("bubbleMessageText").style.border = "0";

   clearTimeout(fader);

   document.getElementById("bubbleMessageText").innerHTML = message;

   if(yVal < 0)
      yVal = 30;

   if(isIE)
   {
      myError.childNodes[0].style.position = "relative";
      myError.childNodes[0].style.top = "-1px";

      myError.childNodes[2].style.display = "block";
      myError.childNodes[2].style.position = "relative";
      myError.childNodes[2].style.left = "0px";
      myError.childNodes[2].style.top = "-5px";
      myError.childNodes[2].style.padding = "0px";
      myError.childNodes[2].style.margin = "0px";

      myError.childNodes[myError.childNodes.length-2].style.position = "relative";
      myError.childNodes[myError.childNodes.length-2].style.top = "-5px";
   }
   else
   {
      myError.childNodes[1].style.position = "relative";
      myError.childNodes[1].style.top = "3px";
      myError.childNodes[3].style.left = "0px";
      myError.childNodes[3].style.top = "10px";
      myError.childNodes[5].style.position = "relative";
      myError.childNodes[5].style.top = "163px";
   }

   xVal = xVal - 13;
   var tempStringX = xVal + "px";
   yVal = yVal-30;
   var tempStringY = yVal + "px";
   myError.style.left=tempStringX;
   myError.style.top=tempStringY;
   myError.style.display="block";

   /****************
   *  IE PNG hack  *
   ****************/
   if(isIE)
   {
      myPNG.style.display="block";
      xVal = xVal + 7;
      xVal = xVal + "px";
      yVal = yVal + 76;
      yVal = yVal + "px";
      myPNG.style.top=yVal;
      myPNG.style.left=xVal;
   }

   fadeIn(myError);
}


/**************************************************
* This function will completely hide the bubble.  *
* It is typically triggered at the end of the     *
* fadeOut function (see below) or by the close    *
* button.                                         *
**************************************************/
function hideBubble()
{
   if(isIE && myJumper)
      myJumper.style.display = "block";
   var myError = document.getElementById("bubbleMessageContainer");
   var myPNG = document.getElementById("pngImage");
   myError.style.display = "none";
   myPNG.style.display = "none";
   clearTimeout(fader);
   opac = 0;
}

/**************************************************
* This function will cause the bubble to slowly   *
* fade out. When the bubble is completely         *
* transparent, it will call the hideBubble        *
* function (see above).                           *
**************************************************/
function fadeOut(myError)
{
   if(opac > 0)
   {
      if(isIE)
      {
         opac-=5;
         myError.filters.alpha.opacity = opac;
      }
      else
      {
         opac-=4;
         myError.style.MozOpacity = opac/100;
      }
      fader = setTimeout('fadeOut(myError)', 0);
   }
   else
   {
      if(myError.style.display != "none")
      {
         hideBubble();
      }
   }
}

/**************************************************
* This function will cause the bubble to slowly   *
* fade in. When the bubble is completely visible, *
* the function will set the bubble to fade out    *
* unless setFadeOut is set to false.              *
**************************************************/
function fadeIn(myError)
{
   var myTop = myError.style.top;
   myTop = myTop.substring(2,-2);
   myTop= parseInt(myTop);

   if(isIE && myJumper && myTop < 59)
   {
      myJumper.style.display = "none";
   }

   var myPNGImage = document.getElementById("pngImage");
   if(opac < 95)
   {
      if(isIE)
      {
         opac+=10;
         myError.filters.alpha.opacity = opac;
      }
      else
      {
         opac+=10;
         myError.style.MozOpacity = opac/100;
      }
      fader = setTimeout('fadeIn(myError)', 0);
   }
   else
   {
      if(setFadeOut)
         fader = setTimeout('fadeOut(myError)',timer);
   }
}