/*
Pop-Up implementation notes.

Pop-up look and feel are maintained in the popup divs on the page by using the associated styles and images for either the blue popup or orange popups (or any additional colored popups we may use.

Each pop-up will require slightly different parameters, based on where they are on the page, and the amount of text they contain.

Shim divs and all tooltip divs should be at the top of the HTML portion of the page. (immediately after the body tag)

setLyr is the main function for placing the tool tips, each one will have completely different numbers because each tool tip will be different heights, widths, and
have different starting positions.

*/
function handleOut(elname) {
// hides all popups, parameter is the div name
// function called on onmouseout of hyperlink parameter
var shim = document.getElementById ("shim") ; // this is the univeral shim used by all popups to cover the any select boxes
shim.style.left = "-650px"; // put it off the screen
d = document.getElementById(elname) ;// get the popup 
d.style.left = "-650px"; // put off screen, this number would need to be made larger if you had a really wide popup div
}
function setLyr(obj1,lyr,shimwidth,shimheight,mouseoffsetX,mouseoffsetY,windowsizeAdjustX,windowsizeAdjustY, maxWindowWidth, maxWindowHeight)
{
    // control the popups
    /*
    Required parameters:
    obj1 - the element to reference location from, generally the hyperlink, this is the starting location of the popup.
    lyr - the DIV to position - the divs are positioned off the page to start, the html is at the top of each page for each div
    shimwidth and shimheight - must equal the height and width of pop-up
    mouseoffset X and Y - how far from mouse to pop-up
    windowSizeAdjustX - (not for Safari) how many pixels to move the x coordinate if the window is small
    windowSizeAdjustY - (not for Safari) if the top of the page is greater than this then move the pop-up down
    maxWindowWidth - Used for Safari - if the window width is less than this then move pop-up to the left 
    maxWindowHeight - Used for Safari - if the top of the page is greater than this then move the pop-up down
	
	 example of use below:
	 Format:
	 <a href="#" id="c2" onclick="return false;" onmouseover = "setLyr(obj1,'lyr','shimwidth','shimheight','mouseoffsetX','mouseoffsetY','windowsizeAdjustX','windowsizeAdjustY','maxWindowWidth','maxWindowHeight');" onmouseout = "handleOut('popup2');" >Our Security Pledge <img src="/images/icon_lock.gif" alt="Amica Secure" border="0" /></a>
	 Size of the Orange tool tip example:
	 <a href="#" id="c2" onclick="return false;" onmouseover = "setLyr(this.id,'popup2','300','165','00','175','275','90','300','190');" onmouseout = "handleOut('popup2');" >Our Security Pledge <img src="/images/icon_lock.gif" alt="Amica Secure" border="0" /></a>
	 Size of the Blue tool tip example:
	 <a href="#" id="c1" onclick="return false;" onmouseover="setLyr(this.id,'popup1','300','165','70','185','275','90','300','190');" onmouseout = "handleOut('popup1');" ><img src="/images/icon_tooltip.gif" alt="" border="0" /></a>  
    
	requires the browser.js script for browser detection
    as well as findPosX and findPosY, which find the referenced object's position on mouse over of the hyperlink element
	- findPosX - for locating X of the mouse over point
	- findPosY - for locating Y of the mouse over point
	- handleOut (makes tooltip disappear)
	- setLyr - for moving a tooltip
	 */
	
	// if tooltip might cover select boxes then shim div must be put on page (located at top)
	// shim then must have lower z-index
	
	var shim = document.getElementById ("shim") ;// get shim
	obj = document.getElementById (obj1) ;	// get hyperlink which is being moused over
	
	var newX = findPosX(obj); //get X the position of mouse over
	var newY = findPosY(obj); // get Y position of mouse over
	
	var x = document.getElementById(lyr); //get the lyr/tooltip to be repositioned
	
	// shim must be sized to tool tip, this is the starting size of shim, this MUST be changed for the size of your tooltip DIV
	shim.style.width = shimwidth + 'px' ; 
	shim.style.height = shimheight + 'px' ; 
	
	// get the width of the screen
	var winWidth = (typeof(window.innerWidth) != 'undefined') ? window.innerWidth + self.pageXOffset - 20 : document.documentElement.clientWidth + document.documentElement.scrollLeft;
	// get the top
	var winTop =  document.documentElement.scrollTop;
    
    // variables for final resting place
    var finY ;
    var finX ;
    // change final resting places based on whether working with the top popup or bottom (help) popup
    // basically what this is saying below is that, if help parameter is passed in, we are talking about
    // the bottom tooltip, all numbers have to be specific for the tooltip
    //if (help == 1)
    //{
    finY = (newY - mouseoffsetY) ; // for the help tooltip on bottom of screen, 170 pixels higher than the mouse position was the desired Y position
   // }
   // else
   // {
   // finY = (newY - mouseoffsetY) ; // for the other blue tooltip, 185 was desired
   /// }
	// set the default x
	finX = (newX - mouseoffsetX) ; // in both cases the X was set to 70 less than the initial mouse over x
	
	// Safari section
	if (BrowserDetect.browser == "Safari")
	{
	    //safari uses the below property for getting the distance to the top of the page
	   winTop = self.pageYOffset ;
 
		if (winWidth < maxWindowWidth) // if the window is sized this size
	    {
        finX = (newX - 275);	    // move the object to the left
	    }

      if (winTop > maxWindowHeight)   // flip it over if at bottom of page
            {       
            finY = (newY + 30) ; 
            }
	}
	else // ie, firefox
	{
	    
	    if (winWidth < 844) // flip to the other side
	    {
        finX = (newX - windowsizeAdjustX);	    
	    }	    
	    
       // numbers based on overall height of element and where they are on the page  
	        if (winTop > windowsizeAdjustY) // flip it over if at bottom of page
            {       
            finY = (newY + 30) ;        
            } 
	}	
	//set final position
	 x.style.top =  finY + 'px';
	 x.style.left = finX + 'px';
	 // shim is positioned exactly below fixing IE 6 bug
	 shim.style.top = finY + 'px';
	 shim.style.left = finX + 'px';
}

function findPosX(obj)
  { //recursively searches through dom to get x postion
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {//recursively searches through dom to get y postion
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

  
/*************************************************************************************************
**************************************************************************************************
* Functions below are new tool tip functions which can
* be invoked by the existing functions in the future.
**************************************************************************************************
**************************************************************************************************/
  var ie = document.all ? true : false;
  if (!ie) {document.captureEvents(Event.MOUSEMOVE)}
  document.onmousemove = getMouseProps;

  var debug = false;
  var xPos = 0;
  var yPos = 0;
  var xOffset = 0;
  var yOffset = 0;
  var toolTipWidth = 0;
  var toolTipHeight = 0;
  var windowWidth = 0;
  var windowHeight = 0;
  var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;

  if(ie)
  {
  	//the underlay div needed for IE
  	var underlayId = 'toolTipUnderlayID'
  	var iFrameID = 'toolTipIFrameID';
  	var toolTipUnderlayDiv = '<div id="'+underlayId+'" style="position:absolute; left:-1000px; top:-1000px; z-index:200; width:0px; height:0px;">';
  	toolTipUnderlayDiv += '<iframe id="'+iFrameID+'" style="height:0px; width:0px;" src="/images/iframe.gif" frameborder="0" scrolling="no">';
  	toolTipUnderlayDiv += '</iframe></div>';
  	document.write(toolTipUnderlayDiv);
  }

  //debug section
  if(debug)
  {
  	var debugDiv = '<div id="debugDiv" style="position: absolute;top:0px;left:0px;background-color:#FFFFFF" align="right">';
  	debugDiv += 'xPos: <input type="text" id="xPos" size="4"><br>';
  	debugDiv += 'yPos: <input type="text" id="yPos" size="4"><br>';
  	debugDiv += 'xOffset: <input type="text" id="xOffset" size="4"><br>';
  	debugDiv += 'yOffset: <input type="text" id="yOffset" size="4"><br>';
  	debugDiv += 'windowWidth: <input type="text" id="windowWidth" size="4"><br>';
  	debugDiv += 'windowHeight: <input type="text" id="windowHeight" size="4"><br>';
  	debugDiv += 'toolTipWidth: <input type="text" id="toolTipWidth" size="4"><br>';
  	debugDiv += 'toolTipHeight: <input type="text" id="toolTipHeight" size="4"><br>';
  	if(ie)
  	{
	  	debugDiv += 'underlayWidth: <input type="text" id="underlayWidth" size="4"><br>';
	  	debugDiv += 'underlayHeight: <input type="text" id="underlayHeight" size="4"><br>';
	  	debugDiv += 'iFrameWidth: <input type="text" id="iFrameWidth" size="4"><br>';
	  	debugDiv += 'iFrameHeight: <input type="text" id="iFrameHeight" size="4"><br>';
  	}	
  	debugDiv += '</div>';
  	document.write(debugDiv);
  }

  function debugMouseProps()
  {
  	document.getElementById("debugDiv").style.top = yOffset+'px';
  	document.getElementById("debugDiv").style.left = xOffset+'px';	
  	document.getElementById("xPos").value = xPos;
  	document.getElementById("yPos").value = yPos;
  	document.getElementById("xOffset").value = xOffset;
  	document.getElementById("yOffset").value = yOffset;
  	document.getElementById("windowWidth").value = windowWidth;
  	document.getElementById("windowHeight").value = windowHeight;
  	document.getElementById("toolTipWidth").value = toolTipWidth;
  	document.getElementById("toolTipHeight").value = toolTipHeight;
  	if(ie)
  	{
  		var iFrame = document.getElementById(iFrameID);
  		var underLayDiv = document.getElementById(underlayId);
	  	document.getElementById("underlayWidth").value = underLayDiv.style.width;
	  	document.getElementById("underlayHeight").value = underLayDiv.style.height;
	  	document.getElementById("iFrameWidth").value = iFrame.style.width;
	  	document.getElementById("iFrameHeight").value = iFrame.style.height;
  	}
  }

  function getMouseProps(e) 
  {
  	xPos = ie ? event.clientX + iebody.scrollLeft : e.pageX;
  	yPos = ie ? event.clientY + iebody.scrollTop : e.pageY;
  	windowWidth = ie ? iebody.clientWidth : window.innerWidth;
  	windowHeight = ie ? iebody.clientHeight : window.innerHeight;
  	xOffset = ie ? iebody.scrollLeft : window.pageXOffset ;
  	yOffset = ie ? iebody.scrollTop : window.pageYOffset;
  	// catch possible negative values in NS4
  	if (xPos < 0){xPos = 0;}
  	if (yPos < 0){yPos = 0;}  
  	if(debug){debugMouseProps();}
    	return true
  }

  function hideToolTip(toolTipDivId) 
  {
  	var toolTipDiv = document.getElementById(toolTipDivId);
  	toolTipDiv.style.left = "-1000px";
  	if(ie)
  	{
  		var underLayDiv = document.getElementById(underlayId);
  		underLayDiv.style.left = "-1000px";
  	}
  }

  function showToolTip(toolTipDivId, optToolTipWidth)
  {
  	var showBelow = true;
  	var showRight = true;
  	var scrollBarWidth = 30;
  	var defaultToolTipWidth = 300;
  	var xPadding = 15;
  	var yPadding = 15;
  	var toolTipDiv = document.getElementById(toolTipDivId); 
  	
  	toolTipDiv.style.height = 'auto';	//force the tooltip to resize itself (needed for IE bug)
  	toolTipWidth = optToolTipWidth ? optToolTipWidth + 'px' : defaultToolTipWidth + 'px';
  	toolTipHeight = toolTipDiv.offsetHeight + 'px';
  	
  	var intToolTipWidth = toolTipWidth.substring(0,toolTipWidth.length-2);
  	var intToolTipHeight = toolTipHeight.substring(0,toolTipHeight.length-2);
  	var toolTipX = 0;
  	var toolTipY = 0;

  	/**
  	 * tool tip can be to the Right or Left of the icon
  	 */
  	var xMidpoint = (xOffset + windowWidth + xOffset)/2;
  	if( xPos >= xMidpoint )
  	{
  		toolTipX = (xPos - intToolTipWidth - xPadding);		//show to left of icon
  	}
  	else
  	{
  		toolTipX = (xPos + xPadding);	//show to right of icon	
  	}
  	
  	/**
  	 * tool tip can be Above, Next To, or Below the icon
  	 */
  	var yTripoint = (yOffset + windowHeight + yOffset)/3;
  	if(yPos < yTripoint)
  	{
  		toolTipY = yPos + yPadding;	//show below icon
  	}
  	else if(yTripoint <= yPos && yPos <= (yTripoint*2))
  	{
  		toolTipY = yPos - (intToolTipHeight/2);	//show next to icon
  	}
  	else
  	{
  		toolTipY = yPos - intToolTipHeight - yPadding;	//show above the icon
  	}
  	
  	toolTipDiv.style.zIndex=toolTipDiv.style.zIndex+999999;
  	toolTipDiv.style.width = toolTipWidth;
  	toolTipDiv.style.height = toolTipHeight;
  	toolTipDiv.style.top = toolTipY + 'px';
  	toolTipDiv.style.left = toolTipX + 'px';
  	
  	if(ie)	//we only need the div underlay for IE.  The div underlay actually causes a rendering issue with firefox.
  	{
  		var iFrame = document.getElementById(iFrameID);
  		iFrame.style.width = toolTipWidth;
  		iFrame.style.height = toolTipHeight;
  		
  		var underLayDiv = document.getElementById(underlayId); 
  		underLayDiv.style.width = toolTipWidth;
  		underLayDiv.style.height = toolTipHeight;
  		underLayDiv.style.top = toolTipY + 'px';
  		underLayDiv.style.left = toolTipX + 'px';
  	}
  }
