/* a namespace for the site-wide utilities */
var HAIRYCOW = {

    ShadowedElement: function(el) {
      this.init(el);
    }

};


/*
 * Add a drop shadow to an element.
 *
 * @param el
 *   A DOM element that has already been added to the page.  It must
 *   be positioned.
 */
HAIRYCOW.ShadowedElement.prototype.init = function(el) {

  this.contentEl = YAHOO.util.Dom.get(el);
  this.bgDivs = [];

  var bgSections = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', 'Center'];
  var imageGroup = new YAHOO.util.ImageLoader.group(null, null);

  for (var i = 0; i < bgSections.length; ++i) {
    var divEl = document.createElement('div');
    divEl.id = YAHOO.util.Dom.generateId();
    YAHOO.util.Dom.addClass(divEl, 'shadowImage');
    YAHOO.util.Dom.addClass(divEl, 'shadow' + bgSections[i]);
    this.contentEl.appendChild(divEl);
    imageGroup.registerPngBgImage(
        divEl.id,
        '../ui_elements/bg_' + bgSections[i].toLowerCase() + '.png');
    this.bgDivs[bgSections[i].toLowerCase()] = divEl;
  }

  /* For some reason FF2 needs to have a z-index set for the drow
   * shadow to be visible.  I think this is related to the z-index: -1
   * on the shadow DIVs. */
  if (YAHOO.env.ua.gecko == 1.8) {
    if (YAHOO.util.Dom.getStyle(this.contentEl, 'z-index') == 'auto') {
      YAHOO.util.Dom.setStyle(this.contentEl, 'z-index', '0');
    }
  }

  /* For MSIE6 we need to keep track of which dimensions have a length
   * set so that we don't clobber it in resize(). */
  if (YAHOO.env.ua.ie == 6) {
    var width = YAHOO.util.Dom.getStyle(this.contentEl, 'width');
    var height = YAHOO.util.Dom.getStyle(this.contentEl, 'height');
    this.width = (width == 'auto') ? null : width;
    this.height = (height == 'auto') ? null : height;
  }

  imageGroup.fetch();
  this.resize();
}


/*
 * Resize the drop shadow.
 *
 * This must be called whenever the contents of the shadowed element
 * change size.
 */
HAIRYCOW.ShadowedElement.prototype.resize = function() {

  /*
   * Both IE6 and IE7 have this problem:
   *
   *   - It has trouble with width|height=100% so we need to size the
   *     popup borders manually.
   *
   * In addition, IE6 has this one:
   *
   *   - Sometimes the background sections don't appear in the right
   *     places even though everything looks correct in the DOM.
   *     Setting an explicit width and height seems to mostly fix
   *     this.  This happens on the Census Map city detail overlays.
   */
  if ((YAHOO.env.ua.ie == 6) || (YAHOO.env.ua.ie == 7)) {

    /* set the dimensions of the content element back to auto so that
     * we can read the region accurately */
    if (YAHOO.env.ua.ie == 6) {
      if (this.width == null) {
        YAHOO.util.Dom.setStyle(this.contentEl, 'width', 'auto');
      }
      if (this.height == null) {
        YAHOO.util.Dom.setStyle(this.contentEl, 'height', 'auto');
      }
    }

    /* figure out the dimensions of the content area */
    var contentRegion = YAHOO.util.Dom.getRegion(this.contentEl);
    var contentWidth = contentRegion.right - contentRegion.left;
    var contentHeight = contentRegion.bottom - contentRegion.top;

    /* set explicit sizes on the non-fixed background elements to
     * match the content area */
    YAHOO.util.Dom.setStyle(this.bgDivs.n, 'width', contentWidth);
    YAHOO.util.Dom.setStyle(this.bgDivs.e, 'height', contentHeight);
    YAHOO.util.Dom.setStyle(this.bgDivs.s, 'width', contentWidth);
    YAHOO.util.Dom.setStyle(this.bgDivs.w, 'height', contentHeight);
    YAHOO.util.Dom.setStyle(this.bgDivs.center, 'width', contentWidth);
    YAHOO.util.Dom.setStyle(this.bgDivs.center, 'height', contentHeight);

    /* set an explicit size for the content element */
    if (YAHOO.env.ua.ie == 6) {
      YAHOO.util.Dom.setStyle(this.contentEl, 'width', contentWidth);
      YAHOO.util.Dom.setStyle(this.contentEl, 'height', contentHeight);
    }
  }
}