Event.observe(window, 'load', function() {
});

document.observe("dom:loaded", function() {
  // float the navigation and footer
  floatElement("nav", 0, 10).floatIt();
  floatElement("footer", 0, document.documentElement.clientHeight - 110).floatIt();
});

Event.observe(window, 'resize', function() {
  // and again because the floating function doesn't account for resizing
  floatElement("nav", 0, 10).floatIt();
  floatElement("footer", 0, document.documentElement.clientHeight - 110).floatIt();
});


/* ------------------------------------------------------------------------------------------------
  FLOATING ELEMENT
------------------------------------------------------------------------------------------------ */

var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function floatElement(id, sx, sy) {
  var el = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];
  var px = document.layers ? "": "px";
  window[id + "_obj"] = el;
  if (d.layers) el.style = el;
  el.cx = el.sx = sx;
  el.cy = el.sy = sy;
  el.sP = function(x, y) {
    this.style.left = x + px;
    this.style.top = y + px;
  };

  el.floatIt = function() {
    var pX, pY;
    pX = (this.sx >= 0) ? 0 : ns ? innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth: document.body.clientWidth;
    pY = ns ? pageYOffset: document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop;
    if (this.sy < 0) pY += ns ? innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight;
    this.cx += (pX + this.sx - this.cx) / 8;
    this.cy += (pY + this.sy - this.cy) / 8;
    this.sP(this.cx, this.cy);
    setTimeout(this.id + "_obj.floatIt()", 40);
  }
  return el;
}


/* ------------------------------------------------------------------------------------------------
  FILTERING
------------------------------------------------------------------------------------------------ */

function filterGeneric (filter) {
  $$('.content_item').each( function(el) {
    // ignore the filter content box and any that don't have a second class name
    if (!el.hasClassName('filters') && el.className != 'content_item') {
      if (!el.hasClassName(filter)) {
        new Effect.Fade(el);
        el.addClassName('gone');
      } else {
        if (el.hasClassName('gone')) {
          new Effect.Appear(el);
          el.removeClassName('gone');
        }
      }
    }
  });
}
function removeFilters () {
  $$('.content_item').each( function(el) {
    if (el.hasClassName('gone')) {
      new Effect.Appear(el);
    }
  });
}


/* ------------------------------------------------------------------------------------------------
  HIGHSLIDE PARTIAL
------------------------------------------------------------------------------------------------ */

function hsPhotoPartial (el, photo_id) {
  return " \
<div style='display: none;'> \
  <div class='highslide-html-content' id='highslide_html_" + photo_id + "'> \
    <div class='highslide-header' style='height: 27px !important;'> \
      <table border='0' cellspacing='0' cellpadding='0'> \
        <tr> \
          <td valign='top' style='width: 99%;'> \
            <ul> \
              <li class='highslide-move' style='cursor: move'> \
                <a href='#' onclick='return false'>move</a> \
              </li> \
            </ul> \
          </td> \
          <td> \
            <a onclick='return hs.close(this); return false;' href='#'> \
              <img style='border: none; margin-bottom: 8px;' src='/images/public/x.png' alt='X' width='20' height='19' /> \
            </a> \
          </td> \
        </tr> \
      </table> \
    </div> \
    <p style='clear:both; margin: 0; background: #000;'></p> \
    <div id='photo_body_" + photo_id + "' class='highslide-body' style='height: 350px !important;'> \
       <img src='" + el.down('img').src.replace(/_s/, '') + "' class='photo_large' /> \
    </div> \
    <div class='highslide-footer' style='background: transparent; height: 240px !important;'> \
      <table border='0' cellspacing='0' cellpadding='0' style='float: right; width: 500px !important; background: #000;'> \
        <tr> \
          <td valign='top'> \
            <span id='photo_caption_" + photo_id + "' class='caption'> \
              " + el.down('img').title + " \
            </span> \
          </td> \
          <td> \
            <a onclick='return hs.previous(this)' href='#'> \
              <img style='border: none; margin-bottom: 8px;' src='/images/public/left.jpg' class='photo_change_left' /> \
            </a> \
            <a onclick='return hs.next(this)' href='#'> \
              <img style='border: none; margin-bottom: 8px;' src='/images/public/right.jpg' class='photo_change_right' /> \
            </a> \
          </td> \
        </tr> \
      </table> \
      <p style='clear:both; margin: 0; background: #000;'></p> \
      <div class='highslide_footer_flare' style='width: 557px !important; height: 180px !important;'></div> \
    </div> \
  </div> \
</div> \
"
}