window.navHover = new Element('img', {src:'images/navbg_over.gif'});
var MainNavigation = Class.create({
  initialize: function(navSel) {
    this._navItems = $$(navSel) || null;
    this._subNav = [];
    this._timer = null;
    if (this._navItems) this._init();
  },
  _init: function() {
    this._navItems.each(function(nav) {
      nav.observe('mouseover', this._overAction.curry(nav).bind(this));
      nav.observe('mouseout', this._outAction.curry(nav).bind(this));
      nav.observe('click', this._stopDefault.bindAsEventListener(nav));
      var navId = nav.readAttribute('id');
      this._subNav[navId] = $(navId.replace('show-', 'nav_'));
      this._subNav[navId].down('ul').childElements().each(function(child) {
        child.observe('mouseover', this._subOverAction.bind(this));
        child.observe('mouseout', this._subOutAction.curry(child).bind(this));
      }, this);
    }, this);
    this._navItems = null;
  },
  _overAction: function(navItem) {
    var navId = navItem.readAttribute('id');
    if (this._timer != null) {
      if (this._timer.nav != navId) {
        this._subNav[this._timer.nav].hide();
      }
      this._timer.pe.stop();
      this._timer = null;
    }
    this._subNav[navId].show();
  },
  _outAction: function(navItem) {
    var navId = navItem.readAttribute('id');
    var hideDiv = this._subNav[navId];
    this._timer = {nav: navId, pe: this._getPE(hideDiv)};
  },
  _subOverAction: function() { this._timer.pe.stop(); this._timer = null; },
  _subOutAction: function(subItem) {
    var parentDiv = subItem.up('div.dropdown');
    this._timer = {
      nav: parentDiv.readAttribute('id').replace('nav_','show-'),
      pe:  this._getPE(parentDiv)
    };
  },
  _getPE: function(bound) { return (new PeriodicalExecuter(this._PEFunc.bind(bound), 1)); },
  _PEFunc: function(pe) { this.hide(); pe.stop(); },
  _stopDefault: function(evt) { evt.stop(); return false; }
});
// Screen adapted from:
// http://www.javascripttoolbox.com/lib/util/index.php
var Screen = Class.create({
  initialize: function() {},
  getBody: function() {
    if (document.body) return $(document.body);
    if (document.getElementsByTagName) {
      var bodies = document.getElementsByTagName('BODY');
      if (bodies != null && bodies.length > 0) return $(bodies[0]);
    }
    return null;
  },
  getDocumentWidth: function() {
    var width = 0;
    var body = this.getBody();
    if (document.documentElement && (!document.compatMode || document.compatMode == 'CSS1Compat')) {
      var rightMargin = parseInt(body.getStyle('margin-right')) || 0;
      var leftMargin = parseInt(body.getStyle('margin-left')) || 0;
      width = Math.max(body.offsetWidth + leftMargin + rightMargin,
                       document.documentElement.clientWidth);
    } else {
      width = Math.max(body.clientWidth, body.scrollWidth);
    }
    if (isNaN(width)) width = 0;
    return width;
  },
  getDocumentHeight: function() {
    var body = this.getBody();
    var innerHeight = (!Object.isUndefined(window.innerHeight) && Object.isNumber(window.innerHeight)) ? window.innerHeight : 0;
    if (document.documentElement && (!document.compatMode || document.compatMode == 'CSS1Compat')) {
      var topMargin = parseInt(body.getStyle('margin-top')) || 0;
      var bottomMargin = parseInt(body.getStyle('margin-bottom')) || 0;
      return Math.max(body.offsetHeight + topMargin + bottomMargin,
        document.documentElement.clientHeight,
        document.documentElement.scrollHeight, innerHeight);
    }
    innerHeight = Object.isNumber(window.innerHeight) ? window.innerHeight : 0;
    return Math.max(body.scrollHeight, body.clientHeight, innerHeight);
  }
});
var OutsideLinkHandler = Class.create({
  initialize: function(outsideSel) {
    this._outsideLinks = $$(outsideSel)     || null;
    this._screen       = new Screen();
    this._overlay      = null;
    this._confirmBox   = null;
    this._confirmYes   = null;
    this._confirmNo    = null;
    this._showing      = false;
    if (this._outsideLinks.size() > 0) this._init();
  },
  _init: function() {
    this._createOverlay();
    this._createConfirmBox();
    Event.observe(window, 'resize', this._resize.bind(this));
    this._outsideLinks.each(function(lnk) {
      lnk.observe('click', this._openConfirmation.bindAsEventListener(this));
    }, this);
  },
  _openConfirmation: function(evt) {
    var el = evt.element();
    if (el.tagName != 'A') {
      el = el.up('a');
    }
    var confirmLeft = Math.round((this._screen.getDocumentWidth() / 2) -
                                 (this._confirmBox.getWidth() / 2));
    this._confirmBox.style.left = confirmLeft + 'px';
    var scrollOffsets = document.viewport.getScrollOffsets();
    this._confirmBox.style.top = (scrollOffsets.top + 50) + 'px';
    this._confirmYes.writeAttribute('href', el.readAttribute('href'));
    this._overlay.show();
    this._confirmBox.show();
    evt.stop();
    return false;
  },
  _createOverlay: function() {
    this._overlay = new Element('div', {style:'display:none;'});
    this._overlay.setStyle({
      width:           this._screen.getDocumentWidth() + 'px',
      height:          this._screen.getDocumentHeight() + 'px',
      backgroundColor: '#F5F4E7',
      opacity:         '.4',
      position:        'absolute',
      left:            0,
      top:             0,
      zIndex:          1000
    });
    this._screen.getBody().insert({bottom:this._overlay});
    this._overlay.observe('click', this._hideAll.bind(this));
  },
  _createConfirmBox: function() {
    var confirmHTML = '<div id="confirm-box" class="box span-9 windowborder clearfix" style="display: none;">' +
                         '<img src="images/warning.gif" alt="" class="fltlft padrt" />' +
                          '<p>' +
                            'You are about to leave Fulton Savings Bank.<br />' +
                            '<strong>Are you sure you wish to continue?</strong>' +
                          '</p>' +
                          '<hr />' +
                          '<div class="btnlink txtcenter">' +
                            '<a id="confirm-box-yes" href="#">Yes</a> | <a id="confirm-box-no" href="#">Cancel</a>' +
                          '</div>' +
                        '</div>';
    this._screen.getBody().insert({bottom:confirmHTML});
    this._confirmBox = $('confirm-box');
    this._confirmYes = $('confirm-box-yes');
    this._confirmYes.observe('click', function(evt) {
      var el = evt.element();
      if (el.tagName != 'A') {
        el = el.up('a');
      }
      window.open(el.readAttribute('href'));
      evt.stop();
      this._hideAll(evt);
      return false;
    }.bindAsEventListener(this));
    this._confirmNo  = $('confirm-box-no');
    this._confirmNo.observe('click', this._hideAll.bindAsEventListener(this));
  },
  _resize: function() {
    this._overlay.setStyle({
      width: this._screen.getDocumentWidth() + 'px',
      height: this._screen.getDocumentHeight() + 'px'
    });
    var confirmLeft = Math.round((this._screen.getDocumentWidth() / 2) -
                                 (this._confirmBox.getWidth() / 2));
    this._confirmBox.style.left = confirmLeft + 'px';
    var scrollOffsets = document.viewport.getScrollOffsets();
    this._confirmBox.style.top = (scrollOffsets.top + 50) + 'px';
  },
  _hideAll: function(evt) {
    this._overlay.hide();
    this._confirmBox.hide();
    evt.stop();
    return false;
  }
});
document.observe('dom:loaded', function() {
  var newWindow = function(evt) { evt.stop(); window.open(this.href); return false; };
  $$('a.newWindow').each(function(newWin) { newWin.observe('click', newWindow.bindAsEventListener(newWin)); });
  if ($('close-window')) {
    $('close-window').observe('click', function(evt) { evt.stop(); window.close(); return false; });
  }
  new MainNavigation('a.show-nav');
  new OutsideLinkHandler('a.confirm-trigger');
});