// Thumbnail onload
if (window.addEventListener)
  window.addEventListener('load',init_images,false);
else if (window.attachEvent)
  window.attachEvent('onload',init_images);

function init_images () {
  /*  Get a pointer to the area, id=opaqued that contains the
        images to be expanded.  */
  opaque_region = document.getElementById('opaqued');
  var imgs = opaque_region.getElementsByTagName('img');
  for (var x=0;x<imgs.length;x++) {
    //  Check each link to see if it is a target, css class = "expando".
    if (imgs[x].className.indexOf('expando') != -1) {
      imgs[x].onmouseover = init_expansion;
    }
  }
}

var step = 8;
/*  The number of milliseconds between each minor and 
      major expansion process iteration. */
var wait = 15;
/*  The size that in-page images will appear to expand 
      to during the minor expansion process.  */
var inter_size_width = 150;
//  The full width the drop shadow will attain.
var sm_shdwWidth = 8;
/*  The level of greatest transparency the background 
      will achieve during the major expansion process.  */
var thm_image = null;
//  Size, position and center of in-page thumbnail
var stepX,stepY,stepWidth,stepHeight;
//  The current values at any give point.
var expando_timer;
/*  The amount the drop shadow padding is 
      adjusted on each minor expansion and
      its current value.  */
var opacity, opacity_step;
/*  Set during minor and major expansion
      and unset after complete collapse.  */
var bShowing = false;
/*  Container div used to contain the minor expansion image
      as well as the padding and drop shadow elements and
      a pointer to where the minor expansion image is
      inserted into the minor expansion container.  */
var thm_container = null;
var thm_insertion = null;
var small_expand = null;
//  Similar elements and pointers as for the minor expansion
var opaque_region = null;
/*  Used to properly locate elements with respect to
      the in-page thumbnail.  */
var scrollParent = null;


function init_expansion () {
  //  If we are already in the expansion process, no need to start it again.
  if (bShowing) return;
  /*  Reality check, kill the timer so that multiple timer 
         events don't fire while we are processing this one. */
  if (expando_timer) clearTimeout(expando_timer);
  //  If a minor expansion element already exists, delete it from the page.
  if (small_expand != null) {
    thm_container.parentNode.removeChild(thm_container);
  }
  /*  Set the region that will be made semi-transparent 
         during the major expansion process */
  scrollParent = opaque_region.parentNode;
  /*  The owner of this function call is the in-page thumbnail
        image. We will collect various data to be used to locate the
        minor and major expansion elements.  */
  thm_image = this;
  /*  Kill the in-page thumbnail image onmouseover event
        so that it doesn't fire while the minor and major elements
        exist.  */
  thm_image.mouseover = null;
  /*  Collect height, width, top and left position information
        from the in-page thumbnail image.  */
  thmWidth = thm_image.offsetWidth;
  thmHeight =thm_image.offsetHeight;
  thmLeft = getOffsetLeft(thm_image);
  thmTop =getOffsetTop(thm_image) - scrollParent.scrollTop;
  //  Identify the center of the in-page thumbnail image.
  thmCntrY = thmTop+thmHeight/2;
  thmCntrX = thmLeft+thmWidth/2;
  /*  Create and populate the container that will contain the minor 
        expansion image.  */
  small_expand = document.createElement('img');
  small_expand.style.visibility = 'hidden';
  small_expand.src = thm_image.src;
  small_expand.className = 'grow_img';
   thm_container = document.createElement('div');
  //  Locate the "body" element and add the container to it.
  document.getElementsByTagName('body')[0].appendChild(thm_container);
  thm_container.className = 'center2';
  thm_container.id = 'thm_container';
  //  Setup the container with the drop shadow divs.
  thm_container.innerHTML = '<div class="fs_t">' +
                                            '<div class="fs_r">' +
                                              '<div class="fs_b">' +
                                                '<div class="fs_l">' +
                                                  '<div class="fs_tr">' + 
                                                    '<div class="fs_br">' +
                                                      '<div class="fs_bl">' +
                                                        '<div class="fs_tl" id="thm_insertion">' + 
                                                        '</div>' +
                                                      '</div>' +
                                                    '</div>' +
                                                  '</div>' +
                                                '</div>' +
                                              '</div>' +
                                            '</div>' +
                                          '</div>';
  /*  Locate the container image insertion point and
        insert the image.  */
  insertion_point = document.getElementById('thm_insertion');
  insertion_point.appendChild(small_expand);
  /*  Initialize parameters used to keep track of expansion size
        and set the initial size and position of the expansion image.  */
  crntWidth = thmWidth;
  crntHeight = thmHeight;
  small_expand.style.width = crntWidth+'px';
  small_expand.style.height = crntHeight+'px';
  thm_container.style.top = thmTop-2+'px';
  thm_container.style.left = thmLeft-2+'px';
  //  Set the event handler for mouseout.
  small_expand.onmouseout = init_thumb_collapse;
  //  Make it visible.
  small_expand.style.visibility = 'visible';
  /*  Initialize the current drop shadow step size and 
        its current value to 0.  */
  sm_shdwStep = (sm_shdwWidth/(140 - thmWidth))*step/2;
  sm_shdwCurrent = 0;
  //  Begin the iterative expansion process.
  expand_thumb();
}

function expand_thumb () {
  //  Another timer reality check
  if (expando_timer) clearTimeout(expando_timer);
  /*  Increment the height and width variables and update
        expanding image's top and left position as well as
        adjusting the expanding image to the center of the
        in-page thumbnail.  */
  crntHeight += step;
  crntWidth += step;
  small_expand.style.height = crntHeight+'px';
  small_expand.style.width = crntWidth+'px';
  thm_container.style.top = parseInt(thmCntrY-crntHeight/2)+'px';
  thm_container.style.left = parseInt(thmCntrX-crntWidth/2)+'px';
  /*  Increment the shadow width counter variable and update the left
        and bottom padding values giving the appearance that the shadow
        actually grows.  */
  sm_shdwCurrent += sm_shdwStep;
  insertion_point.style.padding = parseInt(sm_shdwCurrent)+'px';
  insertion_point.style.paddingBottom = parseInt(sm_shdwCurrent/2)+'px';
  /*  Check to see if the expanding image has achieved the desired size, 
        as set by "inter_size_width".  If not, set the timer and do it again.  */
  if (crntWidth < inter_size_width) {
    expando_timer = setTimeout(expand_thumb,wait);
  } else {
    /*  If the expanding image has reached the desired size, set the
           inter_size_height to the current height as the resulting height
           may be plus or minus a few pixel and we need to know exactly
           where we started so we can know where to end up on collapse.  */
    inter_size_height = crntHeight;
   }
}

function init_thumb_collapse () {
  //  Begin collapsing the minor expansion image.
  /*  If for some reason this gets called when the image is
        actually in the process of being displayed, which can happen
        under certain race conditions, this function can bail out.  */
  if (bShowing) return;
  /*  Make sure the expansion image actually exists and then
        begin the collapsing process.  */
  if (small_expand != null) {
    collapse_thumb();
  }
}

function collapse_thumb () {
  //  And yet another timer reality check.
  if (expando_timer) clearTimeout(expando_timer);
  /*  Basically do the opposite of what was done before, add where
        we subtracted and subtract where we added and put your right
        foot in, your right foot,,,, oh, sorry,  back to work.  */
  crntWidth -= step;
  crntHeight -= step;
  small_expand.style.width = parseInt(crntWidth)+'px';
  small_expand.style.height = parseInt(crntHeight)+'px';
  thm_container.style.top = parseInt(thmCntrY-crntHeight/2)+'px';
  thm_container.style.left = parseInt(thmCntrX-crntWidth/2)+'px';
  sm_shdwCurrent -= sm_shdwStep;
  insertion_point.style.padding = parseInt(sm_shdwCurrent)+'px';
  insertion_point.style.paddingBottom = parseInt(sm_shdwCurrent/2)+'px';
  if (crntWidth > thmWidth)
    expando_timer = setTimeout(collapse_thumb,wait);
  else {
    /*  There is a race condition that exists that was difficult
            to find the source of without this timer reality check.  */
    if (expando_timer) clearTimeout(expando_timer);
    /*  Reset the mouseover event for the in-page thumbnail
            so that it can be expanded again.  */
    thm_image.onmouseover = init_expansion;
    //  Remove the expansion image and its container from the page.
    thm_container.parentNode.removeChild(thm_container);
    small_expand = null;
  }
}

function getOffsetTop (element) {
	var parent = null;
	var value = element.offsetTop;
	while ( element = element.offsetParent )
		value += element.offsetTop;
	return value;
}
function getOffsetLeft (element) {
	var parent = null;
	var value = element.offsetLeft;
	while ( element = element.offsetParent )
		value += element.offsetLeft;
	return value;
}