/*
A function that runs after page load looking for images with a class
of either leftwithcaption or rightwithcaption. The function adds a
caption div under the image displaying the images alt text and a div around
the image for a border effect.

Requirements:
- jquery is used for the document.ready function only 
- images with class either rightwithcaption or leftwithcaption
- css for rightwithcaption, lefttwithcaption, captiontext, rightcaptiondiv, leftcaptiondiv
*/


window.onload = function() {

  //check browser for javascript    
  if (!document.getElementsByTagName) return false;
  if (!document.createElement) return false;
  

  //var madeChange = 0;
  // a variable for how many pixels wider the container div will be than the image it surrounds 
  var containerExtraWidth = 0;
  
  // find all img tags
  var images = document.getElementsByTagName("img");
  if (images.length < 1) return false; 
  
  for (var i=0; i<images.length; i++) {
    // check for img with class rightwithcaption, get alt text and width
    if (images[i].className.indexOf("rightwithcaption") != -1) {
      //madeChange = 1;
      var captionText = images[i].getAttribute("alt");
      if (images[i].getAttribute("width")) {
        var imgWidth = images[i].getAttribute("width");
      }
      else {
        var imgWidth = images[i].offsetWidth;
      }
      // create the captiontext div (changed to a span for xhtml compliance)
      var divCaption = document.createElement("span");
      divCaption.className = "captiontext";  
      divCaption.style["width"] = imgWidth+'px';
      var divCaption_text = document.createTextNode(captionText);
      divCaption.appendChild(divCaption_text);
      
      // create a container div and wrap around the img and caption div
      var divContainer = document.createElement("div");
      divContainer.className="rightcaptiondiv";
      containerWidth = imgWidth*1 + containerExtraWidth;
      divContainer.style["width"] = containerWidth+'px';
      images[i].parentNode.insertBefore(divContainer,images[i]);
      divContainer.appendChild(images[i]);
      divContainer.appendChild(divCaption);
    }
    // check for img with class leftwithcaption, get alt text and width
    else if (images[i].className.indexOf("leftwithcaption") != -1) {
      //madeChange = 1;
      var captionText = images[i].getAttribute("alt");
      if (images[i].getAttribute("width")) {
        var imgWidth = images[i].getAttribute("width");
      }
      else {
        var imgWidth = images[i].offsetWidth;
      }
      // create the captiontext div
      var divCaption = document.createElement("span");
      divCaption.className = "captiontext";  
      divCaption.style["width"] = imgWidth+'px';
divCaption.style["font-family"] = 'Helvetica';
divCaption.style["font-size"] = '0.7em';
      var divCaption_text = document.createTextNode(captionText);
      divCaption.appendChild(divCaption_text);
      
      // create a container div and wrap around the img and caption div
      var divContainer = document.createElement("div");
      divContainer.className="leftcaptiondiv";
      containerWidth = imgWidth*1 + containerExtraWidth;
      divContainer.style["width"] = containerWidth+'px';
      images[i].parentNode.insertBefore(divContainer,images[i]);
      divContainer.appendChild(images[i]);
      divContainer.appendChild(divCaption);
    }
  } // end for
  

}