// <script type="text/javascript">
  <!-- Hide the script from appearing on non-scripting browsers

//
// Create a 'popup' window dynamically as a div
//  - to avoid browser security from blocking popups, especially FireFox 3.5,
//    blocking localhost scripts, and therefore, local testing before posting
//

  //
  // PopUp Image configuration
  //
  var offX = 40;          // how far from document corner to show 'popup'
  var offY = 20;
  var trackMouse = true;  // Tooltip tracks with mouse?
  var trackDelay = 10;    // Timer delay for tracking mouse
  var imgWidth = "190px"; // Default width, overidden once image is loaded

  // 'Constants' for messages array positions and their meanings
  var PATH = 0;   // Where did this image come from (src="")
  var CAP = 1;    // What caption should be used
  var BG = 2;     // Optional background color to override with
  var FG = 3;     // Optional (font) color to override with
  var IMAGE = 4;  // Image Object 'reference' (tooltip images get preloaded)
  
//
// PopUp Image customization
// The default popup style to use, in case the CSS #imgpopstyle is missing...
// NOTE: This is configurable by CSS inclusion, so no need for defaults.
//      Also, font and background color are customizable on display call.
//
  var imgFontFamily = "Verdana, arial, helvetica, sans-serif";
  var imgFontSize = "8pt";
  var imgFontColor = "black";
  var imgBgColor = "#DAE0EF";
  var imgBorderColor = "blue";
  var imgBorderWidth = "3px";
  var imgBorderStyle = "ridge";
  var imgPadding = "4px";

  //
  //  initImgPop - Dynamic initialization for tooltip and popup image <div>
  //
  var imgpop, imgcss, imgstyle, imgcount;
  var tooltip, tipcss;
  function initImgPop()
  {
    //
    // Preload images to appear in popup from message array defined 'above'
    //  i.e. Each page can define its own 'list' of popup images in the <head>
    //  e.g. (image, description, optional bgColor, optional textcolor)
    //    var messages = new Array();
    //    var ImgListStart = messages.length - 1;
    //    messages[ImgListStart+1]
    //      = new Array('Pics/Thumbs/67MustangFrontLeft_T.jpg',
    //                  'The Stang');
    //    messages[ImgListStart+2]
    //      = new Array('Pics/Thumbs/67Mustang-RightFrontBrake_T.jpg',
    //                  'Brake Refresh Day 2', 'green', 'black' );
    //
    // Also - check for messages array just in case using pics w/o popups
    //  Create if not defined...
    //
    if (typeof messages === 'undefined') messages = new Array();
 	  for( var i = 0; i < messages.length; i++ )
    {
      // Create a new image object, assign and initialize
   	  var theImg = new Image();
      messages[i][IMAGE] = theImg;
      initImg(theImg);

    	// set optional colors if included in messages array
  	  if( messages[i][BG] ) theImg.backgroundColor = messages[i][BG];
  	  if( messages[i][FG] ) theImg.color = messages[i][FG];

 		  theImg.alt = messages[i][CAP];
 		  theImg.src = messages[i][PATH];
    }

    // Add an 'extra' image for 'persistence'
    // NOTE: This becomes two for picPairs exercise
    imgcount = messages.length;
    messages[imgcount] = new Array();
    messages[imgcount][IMAGE] = new Image();
    messages[imgcount][IMAGE].loaded = false;

    //
    // Dynamically create Tip <div> so EVERY SINGLE PAGE doesn't need it added
    //
    tooltip = document.getElementById('tipDiv');
    if ( !tooltip )
    {
      var tipDiv = window.top.document.createElement('div');
      tooltip = window.top.document.body.appendChild(tipDiv);
      tooltip.setAttribute( 'id', 'tipDiv' );
    }

    //
    // Dynamically create Img <div> so EVERY SINGLE PAGE doesn't need it added
    //
    imgpop = document.getElementById('imgDiv');
    if ( !imgpop )
    {
      var imgDiv = window.top.document.createElement('div');
      imgpop = window.top.document.body.appendChild(imgDiv);
      imgpop.setAttribute( 'id', 'imgDiv' );
    }
    
// EXPERI-MENTAL
//document.getElementById('myCSS').sheet.cssRules[0].style.backgroundColor; HUH?
//    var sheet = document.getElementById('content').style;
//    alert ( sheet );

    //
    // Find the imgpopstyle style sheet entry
    // For each style sheet, obtain the styles, searching for the popup style
    //
try
{
    var sheets = document.styleSheets;
    for( var i = 0; !imgstyle && i < sheets.length; i++ )
    {
      var styles = (sheets[i].cssRules) ? sheets[i].cssRules : sheets[i].rules;
      for( var j = 0; j < styles.length &&
        "#imgpopstyle" != styles[j].selectorText.toLowerCase(); j++ );

      if ( j < styles.length )
        imgstyle = styles[j].style;
    }
}
catch(e)
{
  alert ( 'Really not liking FireFox security behavior for file protocol!\n' + e );
}
    // Apply to defaults if #imgpopstyle CSS found
    if (imgstyle)
    {
      imgWidth = imgstyle.width;
      imgFontFamily = imgstyle.fontFamily;
      imgFontSize = imgstyle.fontSize;
      imgFontColor = imgstyle.color;
      imgBgColor = imgstyle.backgroundColor;
      imgBorderStyle = imgstyle.borderStyle;
      imgBorderColor = imgstyle.borderColor;
      imgBorderWidth = imgstyle.borderWidth;
      imgPadding = imgstyle.padding;
    }

    //
    // Grab the associated style object and initialize
    //
    // ... for image div
  	imgcss = imgpop.style;
    imgcss.display = 'block';
    imgcss.position = 'absolute';
    imgcss.visibility = 'hidden';
    imgcss.zIndex = '100';

    // ... and tip div
  	tipcss = tooltip.style;
    tipcss.display = 'block';
    tipcss.position = 'absolute';
    tipcss.visibility = 'hidden';
    tipcss.zIndex = '100';

    // Apply style
    // ... for image div
    imgcss.width = imgWidth;
    imgcss.fontFamily = imgFontFamily;
    imgcss.fontSize = imgFontSize;
    imgcss.color = imgFontColor;
    imgcss.backgroundColor = imgBgColor;
    imgcss.borderStyle = imgBorderStyle;
    imgcss.borderColor = imgBorderColor;
    imgcss.borderWidth = imgBorderWidth;
    imgcss.padding = imgPadding;

    // ... and tip div
    tipcss.width = imgWidth;
    tipcss.fontFamily = imgFontFamily;
    tipcss.fontSize = imgFontSize;
    tipcss.color = imgFontColor;
    tipcss.backgroundColor = imgBgColor;
    tipcss.borderStyle = imgBorderStyle;
    tipcss.borderColor = imgBorderColor;
    tipcss.borderWidth = imgBorderWidth;
    tipcss.padding = imgPadding;

    // Only track mouse if div creation succesful AND mouse tracking requested
    // NOTE: Only turn tracking on when displaying tip instead of all the time?
  	if( tooltip && trackMouse ) document.onmousemove = mouseTrap;
  }

  // Initialize this...
  (document.addEventListener) ? window.addEventListener('load',initImgPop,false)
                              : window.attachEvent('onload',initImgPop);

  //
  //  doTooltip() function
  //
  // Need timers to avoid 'quirk' in Micro$Suck
  //  - onmouseover event continues to fire until onmouseout -
  //  causing it to become confused... so, don't really need to 'capture' mouse?
  //
  var timer1, timer2;
  var tipOn = false;	// check if over tooltip link
  function doTooltip( evt, num )
  {
    var theImg = messages[num][IMAGE];
  	if( !theImg ) return;
  	if( timer1 ) { clearTimeout( timer1 ); }
    if( timer2 ) { clearTimeout( timer2 ); }

    (tipOn) ? hideTip() :	tipOn = true;

    // Only display the popup if the image is preloaded
    if ( theImg.loaded == true )
    {
      // Override default font and background color if specified
      var color = (theImg.color) ? theImg.color : imgFontColor;
      var tipWidth = theImg.width + 10;
 	  	var tip =
        '<table width="' + tipWidth
          + '"><tr><td align="center" width="100%"><img src="'
          + theImg.src + '" border="0"></td></tr><tr><td valign="top">'
          + '<span style="font-family:' + imgFontFamily
          + '; font-size:' + imgFontSize + '; color:' + color
          + ';">' + theImg.alt + '</span></td></tr></table>';

 	  	tipcss.width = tipWidth + "px";
   		tipcss.backgroundColor = (theImg.backgroundColor)
                             ? theImg.backgroundColor : imgBgColor;
   	 	tooltip.innerHTML = tip;

      timer1 = setTimeout( "tipcss.visibility='visible'", trackDelay );
    }

  	if( !trackMouse )
      positionTip( evt );
  	else
      timer1 = setTimeout( "tipcss.visibility='visible'", trackDelay );
  }

  //
  //  mouseTrap() function
  //
  // Had so much fun playing this game at Grandma's growing up...
  //
  function mouseTrap( evt )
  {
    // The window.event and functions clientX,Y are only defined in IE?
    if ( !evt ) { evt = window.event; } // Only seems to happen in IE

//    posX = (evt.pageX) ? evt.screenX - remains relative to displayed frame
    posX = (evt.pageX) ? evt.pageX
                       : evt.clientX + (document.documentElement.scrollLeft)
//                          ? document.documentElement.scrollLeft
//                          : document.body.scrollLeft;
                          + document.body.scrollLeft;

//  	posY = (evt.pageY) ? evt.screenY - remains relative to displayed frame
    posY = (evt.pageY) ? evt.pageY
                       : evt.clientY + (document.documentElement.scrollTop)
//                          ? document.documentElement.scrollTop
//                          : document.body.scrollTop;
                          + document.body.scrollTop;
  	if ( tipOn )
      positionTip( evt );

// Interesting, Y grows as scroll down page increases using in FireFox 3.5.5,
//  stays relative to currently displayed frame in IE8,
//  i.e. evt.pageX,pageY increases with scroll
//    alert( posX + ' ' + posY );

// Interesting - always 0,0 in IE8 AND FireFox 3.5.5
//    alert( document.body.scrollLeft + ' ' + document.body.scrollTop );

// Very Interesting - this is what we're looking for in IE
//  with addition of document.documentElement.scrollLeft,scrollTop
//  IE8 now increases with scroll too
//    alert( document.documentElement.scrollLeft + ' ' + document.documentElement.scrollTop );
  }

  //
  //  positionTip() function
  //
  function positionTip( evt )
  {
  	if( !trackMouse )
    {
      // The window.event and functions clientX,Y are only defined in IE?
      if ( !evt ) { evt = window.event; } // Only seems to happen in IE
      posX = (evt.pageX) ? evt.pageX
                         : evt.clientX + (document.documentElement.scrollLeft)
//                            ? document.documentElement.scrollLeft
//                            : document.body.scrollLeft;
                            + document.body.scrollLeft;

      posY = (evt.pageY) ? evt.pageY
                         : evt.clientY + (document.documentElement.scrollTop)
//                            ? document.documentElement.scrollTop
//                            : document.body.scrollTop;
                            + document.body.scrollTop;
    }

  	// popup width and height - clientWidth,Height for IE
	  var popWd = ( tooltip.clientWidth )
                ? tooltip.clientWidth : tooltip.offsetWidth;
  	var popHt = ( tooltip.clientHeight )
                ? tooltip.clientHeight : tooltip.offsetHeight;

    // window width and height - pageXOffset,YOffset for Mozilla/Gecko
  	var winWd = ( window.pageXOffset )
                ? window.parent.innerWidth - 20 + window.parent.pageXOffset
                : ( document.documentElement )
//                  ? document.documentElement.clientWidth
                  ? document.body.clientWidth
                    + document.documentElement.scrollLeft + document.body.scrollLeft
                  : document.body.clientWidth + document.body.scrollLeft;
// For IE, seems the document.body.clientHeight is actually the entire document height
//  so... let's try documentElement.clientHeight
	  var winHt = ( window.pageYOffset )
                ? window.parent.innerHeight - 20 + window.parent.pageYOffset
                : ( document.documentElement )
                  ? document.documentElement.clientHeight
                    + document.documentElement.scrollTop + document.body.scrollTop
                  : document.body.clientHeight + document.body.scrollTop;

   	// Check mouse position against popup and window dimensions
  	// and position the popup to be in the visible area
	  tipcss.left = ((posX + offX + popWd) > winWd && (posX - (popWd + offX)) >= 0)
                  ? posX - ( popWd + offX ) + "px"  // Flip to left side
                  : posX + offX + "px"; // Fit to the right side

  	tipcss.top = ((posY + offY + popHt ) > winHt)
	  	            ? winHt - ( popHt + offY ) + "px"  // Flip on top
                  : posY + offY + "px"; // Fits just fine beneath

  	if ( !trackMouse )
      timer1 = setTimeout( "tipcss.visibility='visible'", trackDelay );
  }


  //
  // hideTip() - Global function to hide tooltip div
  //
  function hideTip()
  {
	  timer2 = setTimeout( "tipcss.visibility='hidden'", trackDelay );
  	tipOn = false;
  }

  //
  // hideImg() - Global function to hide image div
  //
  function hideImg()
  {
    imgcss.visibility='hidden';
  }

  //
  // showImg() - Global function to show image in 'popup' div
  //
  function showImg( theImg )
  {
    if ( theImg.loaded == true )
    {
      var color = (theImg.color) ? theImg.color : imgFontColor;
      var imgWidth = theImg.width + 10;
 	  	var img =
        '<table onclick="hideImg()" width="' + imgWidth
          + '"><tr><td align="center" width="100%"><img src="'
          + theImg.src + '" border="0"></td></tr><tr><td valign="top">'
          + '<span style="font-family:' + imgFontFamily
          + '; font-size:' + imgFontSize + '; color:' + color
          + ';">' + theImg.alt + '</span></td></tr></table>';

   		imgcss.backgroundColor = (theImg.backgroundColor)
                              ? theImg.backgroundColor : imgBgColor;
 	  	imgcss.width = imgWidth + "px";
   	 	imgpop.innerHTML = img;

    	// popup width and height - clientWidth,Height for IE
  	  var imgWd = ( imgpop.clientWidth )
                  ? imgpop.clientWidth : imgpop.offsetWidth;
    	var imgHt = ( imgpop.clientHeight )
                  ? imgpop.clientHeight : imgpop.offsetHeight;

      // window width and height - pageXOffset,YOffset for Mozilla/Gecko
    	var winWd = ( window.pageXOffset )
                  ? window.parent.innerWidth - 20 + window.parent.pageXOffset
                  : ( document.documentElement )
//                    ? document.documentElement.clientWidth
                    ? document.body.clientWidth
                      + document.documentElement.scrollLeft + document.body.scrollLeft
                    : document.body.clientWidth + document.body.scrollLeft;
// For IE, seems the document.body.clientHeight is actually the entire document height
//  so... let's try documentElement.clientHeight
  	  var winHt = ( window.pageYOffset )
                  ? window.parent.innerHeight - 20 + window.parent.pageYOffset
                  : ( document.documentElement )
                    ? document.documentElement.clientHeight
                      + document.documentElement.scrollTop + document.body.scrollTop
                    : document.body.clientHeight + document.body.scrollTop;

     	// Check position against popup and window dimensions
    	// and position the popup to be in the visible area
	    imgcss.left = ((offX + imgWd) > winWd || winWd - ( imgWd + offX ) < 0)
                    ? offX + "px"                       // Flip to left side
                    : winWd - ( imgWd + offX ) + "px";  // Fits fine on right

    	imgcss.top = ((offY + imgHt ) > winHt || winHt - ( imgHt + offY ) < 0)
	    	            ? offY + "px"                       // Flip on top
                    : winHt - ( imgHt + offY ) + "px";  // Fits fine beneath

  	  imgcss.visibility = 'visible';
    }
  }

  //
  // Override the default Image onload (onerror, onabort) behavior
  //  to allow preload of image to obtain its parameters
  //  then display in 'popup window' (div)
  //
  // picOnLoad() - function to override default Image onload behavior
  function picOnLoad()
  {
    this.loaded = true;
    if (this.displayMe) { showImg( this ); }
  }

  // picOnError() - Object function to override default Image onerror behavior
  function picOnError()
  {
    alert('Error loading img ' + this.src );
    this.errored = true;
    if (this.displayMe) { showImg( this ); }
  }

  // picOnAbort() - Object function to override default Image onabort behavior
  function picOnAbort()
  {
    alert('Abort loading img ' + this.src );
    this.aborted = true;
    if (this.displayMe) { showImg( this ); }
  }

  //
  // initImg - Do the everytime it's new Image initialization
  //
  function initImg( theImg )
  {
    theImg.loaded = false;
    theImg.errored = false;
    theImg.aborted = false;
    theImg.displayMe = false;
    theImg.onload = picOnLoad;
    theImg.onerror = picOnError;
    theImg.onabort = picOnAbort;
  }

  //
  // Open a clicked picture link in its own "window" (div),
  // sized to the given picture dimensions,
  // according to the picture index (currently added to last image position),
  // given url and caption passed in and optional background and text colors.
  //
  function openPicture( index, path, msg, bgColor, textColor )
  {
    if (typeof messages[imgcount+index] === 'undefined')
    {
      messages[imgcount+index] = new Array();
      messages[imgcount+index][IMAGE] = new Image();
//      messages[imgcount+index][IMAGE].loaded = false;
    }
    var theImg = messages[imgcount+index][IMAGE];
    initImg( theImg );
    theImg.displayMe = true;
    theImg.alt = msg;
    if (typeof bgColor !== 'undefined') theImg.backgroundColor = bgColor;
    if (typeof textColor !== 'undefined') theImg.color = textColor;
    theImg.src = path;
  }


// Left as an exercise, two up before/after

  // Override the default Image onload behavior
  function picLeftOnload()
  {
    picLeft.loaded = true;
    if ( picRight.loaded )
      displayPicPair( picLeft, picRight );
  }

  // Override the default Image onload behavior
  function picRightOnload()
  {
    picRight.loaded = true;
    if ( picLeft.loaded )
      displayPicPair( picLeft, picRight );
  }

  // Open a clicked picture pair in their own window,
  // sized to the given picture dimensions,
  // according to the picture index passed in
  function openPicPair( urlBefore, urlAfter, cap, bgColor, textColor )
  {
    // Compare the limits of the defined captions and locations
    // Only proceed if within limits - or dynamically create when not defined
    if (typeof messages[imgcount+1] === 'undefined')
    {
      messages[imgcount+1] = new Array();
      messages[imgcount+1][IMAGE] = new Image();
      messages[imgcount+1][IMAGE].loaded = false;
    }

    // Our locations for today
    urlLeft = urlBefore;
    urlRight = urlAfter;

    // Create a new Image object based on the index and get the dimensions
    // Get the Image object based on the index and get the dimensions
    picLeft = messages[imgcount][IMAGE];
    picRight = messages[imgcount+1][IMAGE];
//    picLeft.loaded = false;
//    picRight.loaded = false;
//    if ( picLeft.loaded == false || picRight.loaded == false )
//    {
      // Can't get dimensions until it's loaded, so override onload and onerror
      initImg( picLeft );
      initImg( picRight );
      picLeft.onload = picLeftOnload;
      picRight.onload = picRightOnload;

      picLeft.alt = cap;
      if (typeof bgColor !== 'undefined') picLeft.backgroundColor = bgColor;
      if (typeof textColor !== 'undefined') picLeft.color = textColor;
      picLeft.src = urlLeft
      picRight.src = urlRight
//    }
//    else
//    {
      // Already loaded, so just display it
//      displayPicPair( picLeft, picRight );
//    }
  }


  // Display a picture in its own window,
  // sized to the given picture dimensions,
  // according to the Image (pic) passed in.
  function displayPicPair( picLeft, picRight )
  {
    if ( picLeft.loaded && picRight.loaded )
    {
      wLeft = picLeft.width + 20;
      hLeft = picLeft.height + 20;
      wRight = picRight.width + 20;
      hRight = picRight.height + 20;
      h = hLeft + hRight;
      if ( wLeft > wRight )
        w = wLeft;
      else
        w = wRight;

      var color = (picLeft.color) ? picLeft.color : imgFontColor;
      var imgWidth = w + 10;
    	var img = '<table onclick="hideImg()" width="' + imgWidth  + '">'
              + '<tr><td align="center" width="100%"><img src="'
              + picLeft.src + '" border="0"></td></tr>'
              + '<tr><td align="center" width="100%"><img src="'
              + picRight.src + '" border="0"></td></tr>'
              + '<tr><td valign="top">'
              + '<span style="font-family:' + imgFontFamily
              + '; font-size:' + imgFontSize + '; color:' + color
              + ';">' + picLeft.alt + '</span></td></tr></table>';

      imgcss.backgroundColor = (picLeft.backgroundColor)
                             ? picLeft.backgroundColor : imgBgColor;
      imgcss.width = imgWidth + "px";
      imgpop.innerHTML = img;

    	// popup width and height - clientWidth,Height for IE
  	  var imgWd = ( imgpop.clientWidth )
                  ? imgpop.clientWidth : imgpop.offsetWidth;
    	var imgHt = ( imgpop.clientHeight )
                  ? imgpop.clientHeight : imgpop.offsetHeight;

      // window width and height - pageXOffset,YOffset for Mozilla/Gecko
    	var winWd = ( window.pageXOffset )
                  ? window.parent.innerWidth - 20 + window.parent.pageXOffset
                  : ( document.documentElement )
//                    ? document.documentElement.clientWidth
                    ? document.body.clientWidth
                      + document.documentElement.scrollLeft + document.body.scrollLeft
                    : document.body.clientWidth + document.body.scrollLeft;
// For IE, seems the document.body.clientHeight is actually the entire document height
//  so... let's try documentElement.clientHeight
  	  var winHt = ( window.pageYOffset )
                  ? window.parent.innerHeight - 20 + window.parent.pageYOffset
                  : ( document.documentElement )
                    ? document.documentElement.clientHeight
                      + document.documentElement.scrollTop + document.body.scrollTop
                    : document.body.clientHeight + document.body.scrollTop;

     	// Check position against popup and window dimensions
    	// and position the popup to be in the visible area
	    imgcss.left = ((offX + imgWd) > winWd || winWd - ( imgWd + offX ) < 0)
                    ? offX + "px"                       // Flip to left side
                    : winWd - ( imgWd + offX ) + "px";  // Fits fine on right

    	imgcss.top = ((offY + imgHt ) > winHt || winHt - ( imgHt + offY ) < 0)
	    	            ? offY + "px"                       // Flip on top
                    : winHt - ( imgHt + offY ) + "px";  // Fits fine beneath


  	  imgcss.visibility = 'visible';

    }
    // else - no action
  }

  // -->
// </script>

/* Last Updated: 24 July 2010 - Modified to allow openPicture index and optional colors */
/* Last Updated: 23 July 2010 - Fixed two up picture stuff */
/* Last Updated: 22 July 2010 - Added existence check for messages and dynamic creation if not */
/* Last Updated: 10 July 2010 - Modified for 'quirks' in Micro$uck (timers are back) */
/* Last Updated:  9 July 2010 - Separated image related from tooltip related */
/* Last Updated: 25 June 2010 - Finished moving everything image related to this file */
/* Last Updated: 24 June 2010 - Moved everything image related to this file */
/* Last Updated: 22 June 2010 - Modified to use CSS style for image popup attributes */
/* Last Updated: 20 June 2010 - Modified to use div instead of popup window for old image tooltips */
/* Last Updated: 19 June 2010 - Created */

