// The following is Plain Old JavaScript

//CONSTANTS
var MENU_ID = 'menu';
var CONTENT_HOLDER_ID = 'homepagecontent';   //the div wrapping all the content panes
var CONTENTPANE_CLASS = 'contentpane';         //class assigned to every content pane
var CROSSFADE_SECONDS = 0.4;
var CROSSFADE_INTERVAL = 22;
var HOVER_DELAY = 400;
var EMERGENCY_OPACITY = 0.91;
//END CONSTANTS

var currentSection = STARTSECTION + '-content';
var currentSectionTab = STARTSECTION;
var currentCrossfade = null;

if (typeof($) == 'undefined') {
  $ = function(id) { return document.getElementById(id); }
}
Function.prototype.bind = function(object, args) {
  var __method = this;
  return function() { return __method.apply(object, args); };
}

var DelayedHover = function(elements, func, timeout) {
  this.handle = null;
  var self = this;
  if (typeof(elements.length) == 'undefined') {
    elements = [elements];
  }
  this.elements = elements;
  for (var jj=0; jj<elements.length; jj++) {
    var element = elements[jj];
    element.onmouseover = function(e) {
       this.handle = setTimeout( func, timeout);
       self.onmouseover(e);
    };
    element.onmouseout = function(e) { 
       if (this.handle) clearTimeout(this.handle);
       self.onmouseout(e);
    };
  }
};

//for optional overriding.
DelayedHover.prototype.onmouseover = function(e) {};
DelayedHover.prototype.onmouseout = function(e) {};

// Set an action to override the hover.
DelayedHover.prototype.setClickFunction = function(func) {
  var elements = this.elements;
  for (var jj=0; jj<elements.length; jj++) {
    var element = elements[jj];
    element.onclick = function(e) {
      if (this.handle) clearTimeout(this.handle);
      return func();
    };
  }
};

var setOpacity = function( element, alpha ) {
	var style = element.style;
	if( style.MozOpacity != undefined ) { //Moz and older
		style.MozOpacity = alpha;
	}
	else if( style.filter != undefined ) { //IE
		style.filter = "alpha(opacity=0)";
		element.filters.alpha.opacity = ( alpha * 100 );
	}
	else if( style.opacity != undefined ) { //Opera
		style.opacity = alpha;
	}
};

// accelerate setOpacity by hardcoding the correct technique for this browser
var setupOpacity = function(element) {
  var style = element.style;
  if( style.MozOpacity != undefined ) { //Moz and older
    setOpacity = function(el,al) { el.style.MozOpacity = al; };
  }
  else if( style.filter != undefined ) { //IE
    setOpacity = function(el,al) { 
      el.style.filter = "alpha(opacity=0)";
      el.filters.alpha.opacity = ( al * 100 );
    }
  }
  else if( style.opacity != undefined ) { //Opera
    setOpacity = function(el,al) { el.style.opacity = al; }
  }
};

var Crossfade = function(fromElement, toElement, options) {
  this.from = $(fromElement);
  this.to = $(toElement);
  this.duration = options.duration * 1000;
  this.startTime = new Date().getTime();
  this.elapsed = 0;
  this.complete = false;

  this.topOpacity = options.topOpacity || 1.0;

  if (this.from) this.from.style.visibility = 'visible';
  if (this.to) {
    this.to.style.visibility = 'visible';
    setOpacity( this.to, 0 );
  }
};
Crossfade.update = function(self) {
  self.elapsed = new Date().getTime() - self.startTime;
  finished = false;
  if (self.elapsed > self.duration) {
    finished = true;
    self.elapsed = self.duration;
  }
  completeness = self.elapsed / self.duration;

  if (self.to) setOpacity( self.to, completeness * self.topOpacity );
  if (self.from) setOpacity( self.from, (1 - completeness) * self.topOpacity );

  if (finished) {
    self.onComplete();
    if (self.from) self.from.style.visibility = 'hidden';
    self.complete = true;
  } else {
    setTimeout(function() { Crossfade.update(self); }, CROSSFADE_INTERVAL);
  }
};
Crossfade.prototype.start = function() {
  Crossfade.update(this);
};
Crossfade.prototype.onComplete = function() {};

function fadeOut(element, opts) { new Crossfade(element, null, opts).start(); }
function fadeIn(element, opts) { new Crossfade(null, element, opts).start(); }

var glowSection = function(sctnId) {
  var menuItems = $(MENU_ID).getElementsByTagName('a');
  for (var ii=0; ii<menuItems.length; ii++) {
    menuItems[ii].className = (menuItems[ii].id == sctnId) ? 'selected' : '';
  }
};

var qlt;
var hideQuickLinks = function() {
   $('quickLinksBox').style.display = 'none';
   document.body.onmousedown = null;
   window.onmousedown = null;
}

var hideQuickLinks_timeoutfunc = function(e) {
  document.body.onclick = null;
  window.onclick = null;
  setTimeout(hideQuickLinks, 100);
}

var showQuickLinks = function() {
  $('quickLinksBox').style.display = 'block';
  setTimeout( function() {document.body.onclick = hideQuickLinks_timeoutfunc; window.onclick = hideQuickLinks_timeoutfunc;}, 100 );
}

function animateEmergencyBox() {
  var emergency = $('emergency');
  if (!emergency) return;
  if (currentSectionTab == STARTSECTION && emergency.style.visibility == 'hidden') {
    fadeIn('emergency', {duration: CROSSFADE_SECONDS, topOpacity: EMERGENCY_OPACITY});
  } else if (currentSectionTab != STARTSECTION && emergency.style.visibility != 'hidden') {
    fadeOut('emergency', {duration: CROSSFADE_SECONDS, topOpacity: EMERGENCY_OPACITY});
  }
}

window.onload = function() {
  var menuItems = $(MENU_ID).getElementsByTagName('a');
  glowSection(STARTSECTION);
  clickers = {};
  for (var ii=0; ii < menuItems.length; ii++) {
    var ij = ii;
    // delayed hover for section change
    var hover = new DelayedHover(menuItems[ij], function() {
      glowSection(this.id);
      var contentId = this.id + "-content";
      if ((currentCrossfade == null || typeof(currentCrossfade) == 'undefined' || currentCrossfade.complete) && (currentSection != contentId)) {
        for (var xx=0; xx < menuItems.length; xx++) {
          $(menuItems[xx].id + '-content').style.visibility = 'hidden';
        }
        currentCrossfade = new Crossfade(currentSection, contentId, {duration: CROSSFADE_SECONDS});
        currentSection = contentId;
        currentSectionTab = this.id;
        currentCrossfade.start();
        animateEmergencyBox();
      }
      return false;
    }.bind(menuItems[ij], []), HOVER_DELAY);

    // immediate change when clicked
    hover.setClickFunction(function(){
      glowSection(this.id);
      var contentId = this.id + "-content";
      //Set these two because they will be remembered if the browser goes Back
      var previousSection = currentSection;
      if (currentSection != contentId) {
        currentSection = contentId;
        currentSectionTab = this.id;
        $(previousSection).style.visibility = 'hidden';
        $(contentId).style.visibility = 'visible';
        setOpacity( $(contentId), 1 ); // make sure it's opaque too
        return false;
      } else {
        return true;
      }
    }.bind(menuItems[ij], []));

    //unglow current section while mousing over other stuff   
    hover.onmouseover = function() {
       glowSection(this.id);
    }.bind(menuItems[ij], []);
    hover.onmouseout = function() {
       glowSection(currentSectionTab);
    }.bind(menuItems[ij], []);
  }

  $('quickLinks').onclick = function() {
    if ($('quickLinksBox').style.display == 'block') {
	hideQuickLinks();
    } else {
        showQuickLinks();
    }
    this.blur();
    return false;
  };
};

var getBottomPosition = function(contentElement) {
  var textElement = getElementsByClassName('text',contentElement)[0];
  return getStyle(textElement, 'bottom');
}

if (document.getElementsByClassName) {
var getElementsByClassName = function(cl, base) {
  base = base || document;
  return base.getElementsByClassName(cl);
};
} else {
var getElementsByClassName = function(cl, base) {
  base = base || document;
  var retnode = [];
  var myclass = new RegExp('\\b'+cl+'\\b');
  var elem = base.getElementsByTagName('*');
  for (var i = 0; i < elem.length; i++) {
    var classes = elem[i].className;
    if (myclass.test(classes)) retnode.push(elem[i]);
  }
  return retnode;
};
}

function getStyle(el,styleProp)
{
	if (typeof el == 'string') el = document.getElementById(el);
	if (el.currentStyle)
		var y = el.currentStyle[styleProp];
	else if (window.getComputedStyle)
		var y = getComputedStyle(el,null).getPropertyValue(styleProp);
	return y;
}