/* 
wipsen interface Javascript 
Copyright 2008, Fund for the City of New York
All rights reserved.

This source file is distributable subject to the terms of the
FCNY Open Source License. 

Navigation : section -> menu : subsection
*/

// wipsen object
var wipsen = { "version":"1.0" }

wipsen.sections = [];
wipsen.hiding = {};
wipsen.activeMenu = false;
wipsen.activeElement = false;
wipsen.anns = [];
wipsen.activeAnn = -1;
wipsen.annTimeout = 4000;

wipsen.snapMenu = function( id, menuid ) {
  if ( !$(id) || !$(menuid) ) {
    log("Invalid id",id,"or menuid",menuid);
    return;
  }
  offsetTop = $(id).offsetTop;
  offsetLeft = $(id).offsetLeft;
  offsetTop = offsetTop + 24;
  offsetLeft = offsetLeft - 18;
  $(menuid).style.top = offsetTop + 'px';
  $(menuid).style.left = offsetLeft + 'px';
  log( "Foo",$(id).offsetWidth , $(menuid).offsetWidth);
  if ( $(id).offsetWidth > $(menuid).offsetWidth ) {
    $(menuid).style.width = $(id).offsetWidth + "px";
  }
}

// show a section, hide others
wipsen.showSection = function ( id, aelement ) {
  //log("Showing",id);
  if ( this.hiding[ id ] ) {
    window.clearTimeout( this.hiding[ id ] );
    this.hiding[ id ] = false;
  }
  if ( aelement ) {
    if ( this.activeElement ) {
      removeElementClass( this.activeElement, "mouseover" );
    }
    addElementClass( aelement, "mouseover" );
    this.activeElement = aelement;
    log("Active element is",aelement.id);
  }
  var menuid =  "menu_" + id.substr( 8 );
  if ( this.activeMenu &&  this.activeMenu.id == menuid ) {
    return;
  }
  if ( this.activeMenu ) {
    this.activeMenu.style.display = 'none';
    this.activeMenu = false;
  }
  if ( menuid ) {
    this.activeMenu = $( menuid );
    if ( this.activeMenu ) {
      log( "Active menu",this.activeMenu.id );
      this.activeMenu.style.display = 'block';
      //this.snapMenu( id, menuid );
    }
  }
}

// hide a section
wipsen.hideSection = function( id, millisecs ) {
  if ( !millisecs ) {
    millisecs = 500;
  }
  //log("Might hide",id);
  if ( this.hiding[ id ] ) {
    return this.hiding[ id ];
  }
  else {
    this.hiding[ id ] = window.setTimeout( "wipsen.hideSectionNow( '"+id+"' )", millisecs );
  }
  return this.hiding[ id ];
}

wipsen.hideSectionNow = function ( id ) {
  this.hiding[ id ] = false;
  var menuid =  "menu_" + id.substr( 8 );
  if ( menuid && $(menuid) ) {
    log("Hiding",menuid);
    $(menuid).style.display = 'none';
    if ( this.activeMenu && this.activeMenu.id == menuid ) {
      this.activeMenu = false;
    }
  }
  if ( hasElementClass( $(id), 'mouseover' )) {
    removeElementClass( $(id), "mouseover" );
  }
}

// event handlers
wipsen.mouseover = function ( e ) {
  e.stop();
  var aelement = e.target();
  if ( aelement.href ) {
    aelement = aelement.parentNode;
    if ( aelement.tagName=="H3" ) {
      aelement = aelement.parentNode;
    }
  }
  var sectionid = e.src().id;
  this.showSection( sectionid, aelement );
}

wipsen.mouseout = function ( e ) {
  e.stop();
  var sectionid = e.src().id;
  this.hideSection( sectionid );
}

wipsen.click = function ( e ) {
  e.stop();
  var aelement = e.target();
  if ( !aelement.href ) {
    var links = aelement.getElementsByTagName( "a" );
    if ( links.length ) {
      aelement = links[0];
    }
  }
  if ( aelement.href ) {
    window.location = aelement.href;
  }
}

// anouncements
wipsen.showAnn = function() {
  if ( this.activeAnn > -1 ) {
    this.anns[ this.activeAnn ].style.display = "none";
  }
  this.activeAnn = this.activeAnn + 1;
  if ( this.activeAnn > ( this.anns.length -1 ) ) {
    this.activeAnn = 0;
  }
  this.anns[ this.activeAnn ].style.display = "block";
  window.setTimeout( "wipsen.showAnn()", this.annTimeout );
}

// init handler
wipsen.init = function() {
  // mark nav as enhanced
  addElementClass( $("Navigation"), "enhanced" );
  // center nav
  // safari 3 issue: offsetWidth of all elements is the same, so this code fails
  var portalsize = getElementDimensions( $("Portal") );
  var portalpos = getElementPosition( $("Portal") );
  var navwidth = portalpos.x + portalsize.w
  var canvassize = getElementDimensions( $("Canvas") );
  var canvaspos = getElementPosition( $("Canvas") );
  log("portalsize",portalsize,"portalpos",portalpos,"canvassize",canvassize,"canvaspos",canvaspos);
  if ( canvassize.w > navwidth ) {
    var offset = canvaspos.x + ( canvassize.w - navwidth ) / 2;
  }
  else {
    var offset = canvaspos.x - ( navwidth - canvassize.w ) / 2;
  }
  if ( offset < 0 ) {
    offset = "0";
  }
  $("Navigation").style.left = offset + "px";
  // find sections
  this.sections = iterateElementsByTagAndClassName( 
    "div", "section", $("Navigation"), function( elements, i ) { 
      connect( elements[i], "onmouseover", wipsen, "mouseover" ); 
      connect( elements[i], "onmouseout", wipsen, "mouseout" ); 
      connect( elements[i], "onclick", wipsen, "click" );
    });
  iterateElementsByTagAndClassName( "div", "active", $("Navigation"), function( elements, i ) { 
    wipsen.hideSection( elements[i].id, 0 );
    } );
  // find announcements
  if ( $('Announcements') ) {
    // position
    var annsize = getElementDimensions( $("Announcements") );
    var annoffset = canvaspos.x + ( canvassize.w - annsize.w ) / 2;
    $("Announcements").style.left = annoffset + "px";
    // items
    this.anns = iterateElementsByTagAndClassName( 
    "p", null, $('Announcements'), function( elements, i ) { 
      elements[i].style.display = "none";
    });
    log("Announcements",this.anns)
    this.showAnn();
  }
}

connect(window,"ondomload",wipsen,"init");