window.onload = initJS;

/**
 * This is the init function called when the window is done loading.
 *
 */

function initJS() {
  if (!document.getElementById) return;

  var wowItems = getElementsByClassName("wow-item"); 
  for (var i = 1; i <= wowItems.length; i++) {
    wowItemize(wowItems[i - 1], i);
  }
}

/**
 * Turns a boring div in to a WoW item div. Rawr!
 *
 */

function wowItemize(wowItem, i) {
  var cDiv = document.createElement("DIV");
  var p = document.createElement("P");
  var txt = document.createTextNode("[" + wowItem.getElementsByTagName("h2")[0].firstChild.nodeValue + "]");
  var parent = wowItem.parentNode;

  p.className = wowItem.getElementsByTagName("h2")[0].className;

  p.style.cursor = "pointer";
  p.style.display = "inline";

  wowItem.style.position = "absolute";
  wowItem.style.opacity = ".8";
  wowItem.style.display = "none";
  wowItem.style.left = "20px";
  wowItem.style.top = "20px";

  cDiv.style.position = "relative";
  cDiv.style.margin = "1em 0";
  cDiv.style.zIndex = 1000 - i;

  p.onmouseover = function () {
    wowItem.style.display = "block";
  }

  p.onmouseout = function () {
    wowItem.style.display = "none";
  }

  p.appendChild(txt);
  cDiv.appendChild(p);
  parent.replaceChild(cDiv, wowItem);
  cDiv.appendChild(wowItem);
}

/**
 * This is a alias method for document.getElementById
 */

function getById(elementName) {
  return document.getElementById(elementName);
}

/**
 * This is the dirty getElementsByClassName.
 * It iterates through all elements and checks each of 
 * their classes against the argument.
 */

function getElementsByClassName(className) {
  var elements = new Array();
  var all = document.getElementsByTagName("*");
  for (var i = 0; i < all.length; i++) {
    var classes = all[i].className.split(" ");
    for (var j = 0; j < classes.length; j++) {
      if (classes[j] == className) {
        elements[elements.length] = all[i];
      }
    }
  }
  return elements;
}

/**
 * Recursively finds the total Y offset of an element. This
 * is pretty much equivalent to the y loc in relationship to the top-
 * most viewable portion of the browser window.
 */

function findTotalYOffset(parent) {
  if (parent == null) {
    return 0;
  } else {
    return parent.offsetTop + findTotalYOffset( parent.offsetParent );
  }
}

/**
 * Recursively finds the total X offset of an element. This
 * is pretty much equivalent to the x loc in relationship to the left-
 * most viewable portion of the browser window.
 */

function findTotalXOffset(parent) {
  if (parent == null) {
    return 0;
  } else {
    return parent.offsetLeft + findTotalXOffset(parent.offsetParent);
  }
}