/*******************************************************************************************
 *	!!PopUp HTML Alt tags for HREFS							   *
 *	cchoyce 19 Feb 2000								   *
 *	YOU MUST HAVE THIS TAG IN THE HEAD OF YOUR HTML DOCUMENT:			   *
 * 	<div ID="PopUpDiv" STYLE="position:absolute; visibility:hidden; z-index:1;"></div> *
 *	To call this from an href use the following in the 'A' tag			   *
 *	onMouseOver="showPopUp('This is the Text', 'this is the Header')"		   *
 *	onMouseOut="hidePopUp()"							   *
 *	other documentation throughout the program					   *
 *******************************************************************************************/

    /*	These are the config variables. There must be a parameter unless otherwise noted.
     *	If a parameter is optional, just leave its value as an empty string ("") if you don't
     *	want to use it.
     */
//-------------- START VARIABLE CONFIG ----------

    //set the Modes
    var MenusMoveWithMouse = true;		//this determines whether the menus move with onMousemove

    var MenusHaveFixedPosition = false;	//this determines whether the menus position is static or dynamic
        //these are only when FixedPosition is 'true'
        var FixedX	= 200;	//static X position of the PopUp
        var FixedY	= 200;	//static Y position of the PopUp

    //used if you want all the links to display the same thing
    //just don't pass in a text string in the call 'to showPopUp()'
    var DefaultText		= "(<i>No Description</i>)";
    var divName = "PopUpDiv";
    var MainBGColor		= "#FFFFFF";
    var BorderColor		= "#403803";
    var BorderWidth		= "1px";
    var Width			= "275";	//optional
    var TextAlign       = "left";
    var FontColor		= "#403803";
    var FontFace		= "Verdana";
    var FontSize		= "12px";
    var Offset          = 475;
    var defaultOffset   = 475;
    var defaultDivName  = "PopUpDiv";
    var FontFamily = "arial, verdana, sans-serif";
    var HeaderFontColor	= "#403803";
    var HeaderFontFace	= "Verdana";
    var HeaderFontSize	= "12px";
    var HeaderBGColor	= "#D5D5C9";


    var HeaderIcon		= ""; //optional

    //how much to offset the popup window from the cursor
    var OffsetX			= 10;
    var OffsetY			= 60;

    var Align			= "right";	//either 'right','center', of 'left'
                                    //if you leave it empty, it will defualt to right
                                    //you can only use center and left if you specify a width
    var Valign			= "top";	//either 'top' or 'bottom'
                                    //if you leave it empty, it will defualt to bottom
    var anchor;
//-------------- END VARIABLE CONFIG ----------

    /*	DON'T MODIFY ANY OF THESE GLOBAL VARIABLES!!!
     *	THEY ARE USED IN THE RUNTIME AND THE PROGRAM WILL CRASH IF THEY ARE CHANGED
     */

//------------- START RUNTIME VARIABLES --------

    // Display state variables
    var posX = 0;
    var posY = 0;

    //whether our layer can be seen or not
    var isVisible = false;

    // Decide browser version
    var ns4 = (document.layers)?true:false;
    var	ie4 = (document.all)?true:false;
    var fox = (document.getElementById && !document.all)?true:false;

    //used to capture the mouse movement and get the screen coordinates
    if ( ns4 || ie4 || fox )
    {
//            document.captureEvents(Event.MOUSEMOVE);
//            document.onmousemove = mouseMove; //note we have no function '()' here. this is correct


        if (document.addEventListener){
          document.addEventListener('mousemove', mouseMove, false);
        } else if (document.attachEvent){
          document.attachEvent('onmousemove', mouseMove);
        }
    }
    else
        showPopUp = noPopUp; //redefine the function for older browsers

//------------- END RUNTIME VARIABLES --------

    /*	This is the start of the functions.
     *	You must call 'showPopUp()' from some javascript call in the document
     */

//------------- START MAIN FUNCTIONS --------

    /**
     * noPopUp()
     *	dummy function for older browsers ( ver < 4 )
     */
    function noPopUp()
    {

        return true;
    }

    /**
     * showPopUp()
     *	shows the given layer on the screen
     *	@param Text:
     *		The Text that is to be displayed in the PopUp
     *	@param Header:	(optional)
     *		The Header that will be displayed above the Text
     */
    function showPopUp(Anchor, Text, Header, aoffset, divnamea )
    {

        anchor = Anchor;
        if( Text == "" )
        Text = DefaultText;

        if (aoffset != undefined && aoffset != "") {
            Offset = aoffset;
        } else {
            Offset = defaultOffset;
        }

        if (divnamea != undefined && divnamea != "") {
            divName = divnamea;
        } else {
            divName = defaultDivName;
        }

        //create the HTML for the popup layer
        var layerHtml = "";
        if( Header == null )
            layerHtml = makePopUp( Text );
        else
            layerHtml = makePopUpWithHeader( Text, Header);

        //insert the html into our layer
        insertLayerHTML( openTable() + layerHtml + closeTable() );

        //move the layer to the proper spot
        positionLayerOnScreen()

        //lets see it
        setLayerToVisible();
    }

//------------- END MAIN FUNCTIONS --------


//------------- START LAYER MODIFICATION FUNCTIONS --------

    /**
     * insertLayerHTML()
     *	inserts html code inside of the 'DIV' tag in the document header
     *	@param Html:
     *		The HTML that is going to be inserted
     */
    function insertLayerHTML( Html )
    {
        if (ns4)
        {
            var layer = self.document.divName.document;
            layer.write( Html );
            layer.close();
        }
        else if (document.getElementById) {
       	    document.getElementById(divName).innerHTML = Html;
        } else {
            document.all[divName].innerHTML = Html;
        }
    }

    /**
     * positionLayerOnScreen()
     *	determine the coorinates of the top left corner of the layer
     *	algorythm will change depending on the alignment type
     */
    function positionLayerOnScreen()
    {

        var X=0, Y=0;

        if( MenusHaveFixedPosition )
        {

            //just use the predefinded positions
            X = FixedX;// + OffsetX;
            Y = FixedY;// + OffsetY;
        }
        else
        {
            X = findPosX(anchor) - Offset;
            Y = findPosY(anchor);
        }

        // Actually move the object.
        if( ( MenusMoveWithMouse || !(isVisible) ) )
            moveTo(X, Y);
    }

    /**
     * moveTo()
     *	this takes in an 'X' and a 'Y' coordinate and moves
     *	the layer to that position.
     *	called from the 'onMousemove' event that is inherant to the browser
     */
    function moveTo(Xval,Yval)
    {

        if( ns4 )
        {
            self.document.divName.left = Xval;
            self.document.divName.top	= Yval;
        }
        else if (document.getElementById)
        {
            document.getElementById(divName).style.left = Xval + 'px';
            document.getElementById(divName).style.top = Yval + 'px';
        }
        else
        {
            divName.style.left	= Xval;
            divName.style.top	= Yval;
        }

    }

    /**
     * setLayerToVisible()
     *	this makes the layer visible to the user
     */
    function setLayerToVisible()
    {

        if( ns4 ) {
            self.document.divName.visibility = "show";
        } else if (document.getElementById) {
            document.getElementById(divName).style.visibility = "visible";
        } else {
            divName.style.visibility = "visible";
        }

        //tell us that we are currently viewing the layer
        isVisible = true;
    }

    /**
     * hidePopUp()
     *	this hides the popup window from the user
     *	called from the 'onMousemove' event that is inherant to the browser
     */
    function hidePopUp()
    {

        if( ns4 ) {
            self.document.divName.visibility = "hide";
        } else if (document.getElementById) {
            document.getElementById(divName).style.visibility = "hidden";
        } else {
            divName.style.visibility = "hidden";
        }
        //tell us that the layer is now hidden
        isVisible = false;
    }
//------------- END LAYER MODIFICATION FUNCTIONS --------


//------------- START HTML GENEREATION FUNCTIONS --------

    /**
     * openTable()
     *	generates the opening HTML for the border table
     */
    function openTable()
    {

        var l_Width = "";
        if( Width != "" )
            l_Width = "width: " + Width + ";";
//        var html =	"<table " + l_Width + " border=\"0\" cellpadding=\"" + BorderWidth +"\" cellspacing=\"0\" bgcolor=\"" + BorderColor + "\" id=\"calpoptable\">" +
//                    "<tr>" +
//                    "<td>" +
//                    "<table width=\"100%\" border=\"0\" cellpadding=\"2\" cellspacing=\"0\">";


	var html = "<div id=\"calpoptable\" style=\"" + l_Width + " text-align:" + TextAlign + "; border: 1px solid " + BorderColor + "; background-color: #ffffff;" +"\">";
        return html;
    }

    /**
     * closeTable()
     *	generates the closing HTML for the border table
     */
    function closeTable()
    {

//        var html = "</table>" +
//                    "</td>" +
//                    "</tr>" +
//                    "</table>";

        var html = "</div>";
        return html;

    }

    /**
     * makePopUp()
     *	generates the HTML for the inner table given the passed in text string
     *	@param Text:
     *		the string that is passed in from the origanl 'displayPopUp()' call
     */
    function makePopUp( Text )
    {


        var l_Align = "";
//        if ( FontAlign != "" )
//            l_Align	= "align=\"" + FontAlign + "\" ";




//        html =	"<tr bgcolor=\"" + MainBGColor + "\">" +
//                "<td valign=\"top\" " + l_Align + " colspan=\"2\" width=\"200\"><font face=\"" + FontFace + "\" color=\"" + FontColor + "\" size=\"" + FontSize + "\">" +  Text + "</font></td>" +
//                "</tr>";
        html = "<div style=\"padding:3px; width: " + Width + "px; background-color:" + MainBGColor + "; color: " + FontColor + "; font-size:" + FontSize + "; font-family:" + FontFamily + ";\">" + Text + "</div>"
        return html;
    }

    /**
     * makePopUpWithHeader()
     *	generates the HTML for the header table given the passed in Header string
     *	@param Text:
     *		a string that is passed in from the origanl 'displayPopUp()' call.
     *		used for the main text about the href.
     *	@param Header:
     *		a string that is passed in from the origanl 'displayPopUp()' call.
     *		used for a header on the popup. has its own attributes seperate from the text.
     *	@param Header2: (optinal)
     *		a string that is passed in from the origanl 'displayPopUp()' call.
     *		used for a header on the popup. aligned right in the header cell.
     */
    function makePopUpWithHeader(Text, Header, Header2)
    {

        var l_HeaderIcon = "";
        if ( HeaderIcon != "" )
            l_HeaderIcon	= "<IMG SRC=\"" + HeaderIcon + "\"> ";




        var l_Header2 = " "; //we need a space for the td colors to work right in Netscape
        if ( Header2 && Header2 != "" )
            l_Header2 = Header2;

//        html =	"<tr bgcolor=\"" + HeaderBGColor + "\">" +
//                "<td " + l_Align + "><b><font face=\"" + HeaderFontFace + "\" color=\"" + HeaderFontColor +"\" size=\"" + HeaderFontSize + "\">" + l_HeaderIcon + Header + "</font></b></td>" +
//                "<td align=\"right\"><b><font face=\"" + HeaderFontFace + "\" color=\"" + HeaderFontColor +"\" size=\"" + HeaderFontSize + "\">" +  l_Header2 + "</font></b></td>" +
//                "</tr> ";
        html = "<div style=\"padding:3px; font-weight:bold; background-color:" + HeaderBGColor + "; color: " + HeaderFontColor + "; font-size:" + HeaderFontSize + "; font-family:" + FontFamily + ";\">" + Header + "</div>"
        //now add the regular PopUp Below the Header

        html += makePopUp( Text );
        return html;
    }

//------------- END LAYER MODIFICATION FUNCTIONS --------


//------------- START EVENT HANDLERS --------

    /**
     * mouseMove()
     *	this is called whenever there is mouse movement.
     *	it is called by the document, set by the 'document.onmousemove = mouseMove;'
     *	statement in the INIT section. no need to call it after that
     *	@param e:
     *		the event that has just taken place. it will always be the cursor
     */
    function mouseMove(e)
    {
        if ( ns4 || fox )
        {
            posX	= e.pageX;
            posY	= e.pageY;
        }
        else if ( ie4 )
        {
            posX	= event.clientX + document.documentElement.scrollLeft;
            posY	= event.clientY + document.documentElement.scrollTop;
        }
        if( isVisible )
            positionLayerOnScreen();
    }
//------------- END EVENT HANDLERS --------

function findPosX(obj)
{
    var curleft = 0;
    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curleft += obj.offsetLeft
            obj = obj.offsetParent;
        }
    }
    else if (obj.x)
        curleft += obj.x;
    return curleft;
}

function findPosY(obj)
{
    var curtop = 0;
    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curtop += obj.offsetTop
            obj = obj.offsetParent;
        }
    }
    else if (obj.y)
        curtop += obj.y;
    return curtop;
}