listen(window, 'load', placeBoxedImages);
listen(window, 'load', setupAltImage);
var box;
/*
   Places images if a length is smaller than the box.
*/
function placeBoxedImages() {
   //box = outputBox();
   var boxedImages = elemsByClass('project_image').concat(elemsByClass('project_image_alt'));

   //guard
   if (boxedImages.length == 0) return;

   var boxParent = boxedImages[0].parentNode;
   var boxHeight = getStyleValue(boxParent, 'height', NOUNIT);
   var boxWidth = getStyleValue(boxParent, 'width', NOUNIT);
   var boxPaddingLeft = getStyleValue(boxParent, 'padding-left', NOUNIT);
   var boxPaddingTop = getStyleValue(boxParent, 'padding-top', NOUNIT);

   for (var i=0; i < boxedImages.length; i++) {
      if (boxedImages[i].height < boxHeight) {
         boxedImages[i].style.top = (boxHeight - boxedImages[i].offsetHeight) / 2 + boxPaddingTop + 'px';
      }
      else {
         boxedImages[i].style.top = boxPaddingTop +'px';
      }

      if (boxedImages[i].width < boxWidth) {
         boxedImages[i].style.left = (boxWidth - boxedImages[i].offsetWidth) / 2 + boxPaddingLeft +'px';
      }
      else {
         boxedImages[i].style.left = boxPaddingLeft +'px';
      }
   }
}

/*
   Set up events for hover to display alternative image.
*/
function setupAltImage() {
   var imageBoxes = elemsByClass('project_image_container');

   for (var i=0; i < imageBoxes.length; i++) {
      imageBoxes[i].onmouseover = swapImages;
      imageBoxes[i].onmouseout = swapImages;
   }

   function swapImages() {
      swapImages = elemsChilds(this);
      var mainImage = swapImages[0];
      var altImage = swapImages[1];
      if(altImage) {
         if (mainImage.style.visibility == 'hidden') {
            mainImage.style.visibility = 'visible';
            altImage.style.visibility = 'hidden';
         }
         else {
            mainImage.style.visibility = 'hidden';
            altImage.style.visibility = 'visible';
         }
      }
   }
}