/* 
CAP21 homepage marquee javascript 
Copyright 2011, 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. 
*/

home = { "version": "1.3", "inshow": false, "unshow": false, "activeslide": false, "loaded": false, "touched": false, "links": [], "wogglenext": 0 };

// mouseover handler, starts rollover and slideshow as necessary
home.dispatch = function( e ) {
  if ( !home.loaded ) return;
  home.touched = true;
  var ele = e.src();
  ele.inmouseover = true;
  window.setTimeout( "home.dispatch2( '"+ele.id+"')", 100 );
}

home.dispatch2 = function( id ) {
  var ele = $( id );
  // check if still in mouseover state
  if ( !ele.inmouseover ) return;
  // okay, dispatch
  if ( hasElementClass( ele, "hasro") ) {
    log("->","rollover",ele.id);
    home.rollover( ele );
  }
  if ( hasElementClass( ele, "hasslides") ) {
    log("->","slideshow",ele.id);
    home.slideshow( ele );
  }
}

// builds rollover and adds it to #RoHolder div
home.rollover = function( ele ) {
  if ( $(ele.id+"_rodiv") ) {
    var ro = $(ele.id+"_rodiv");
  }
  else {
    // find ro image
    var roimg = $( ele.id + "_ro" );
    var link = $( ele.id+"_link" );
    if ( link ) {
      var ro = DIV( { "class": "rollover", "id": ele.id+"_rodiv" }, A( { "class": "rollover", "href": link.href }, IMG( { "id": ele.id+"_roimg", "class": "rollover", "src": roimg.src } ) ) );
    }
    else {
      var ro = DIV( { "class": "rollover", "id": ele.id+"_rodiv" }, IMG( { "id": ele.id+"_roimg", "class": "rollover", "src": roimg.src } ) );
    }
    appendChildNodes( $( "RoHolder" ), ro );
  }
  // find delta between original img size and rollover size, center rollover
  var newpos = { "l": 0, "t": 0 };
  var odim = elementDimensions( ele );
  var opos = elementPosition( ele );
  var rdim = elementDimensions( $( ele.id+"_roimg" ) );
  newpos.x = opos.x - Math.round( ( rdim.w - odim.w ) / 2 );
  newpos.y = opos.y - Math.round( ( rdim.h - odim.h ) / 2 );
  log( "Orig pos", opos, "RO pos", newpos.x, newpos.y, "Orig Dim", odim, "RO dim", rdim );
  ro.style.top = newpos.y + "px";
  ro.style.left = newpos.x + "px";
  // fade in
  Opacity( ro, { "from": 0.01, "to": 1.0, "duration": 0.2, "queue": "parallel" } );
  // set marker for cleanup
  ele.inro = ro;
  // additionally, if no slides, fade original image
  if ( !hasElementClass( ele, "hasslides" ) ) {
    var orig = $( ele.id + "_normal_img" );
  }
  else {
    var orig = $( ele.id + "_img" );
  }
  ele.origfade = orig;
  Opacity( orig, { "from": 1.0, "to": 0.01, "duration": 0.2, "queue": "parallel" } );
  log("--","rollover complete",ele.id);
}

// puts Marquee into slideshow mode and shows the next slide
home.slideshow = function( ele ) {
  if ( !home.inshow ) {
    Opacity( $("MainMarquee"), { "from": 1.0, "to": 0.01, "duration": 0.2, "queue": "parallel" } );
    Opacity( $("TransMarquee"), { "from": 0.01, "to": 1, "duration": 0.2, "queue": "parallel" } );
  }
  else if ( home.unshow ) {
    window.clearTimeout( home.unshow );
    home.unshow = false;
  }
  home.inshow = ele;
  if ( !ele.nextSlide ) {
    ele.nextSlide = 1;
  }
  home.nextSlide( ele.id );
  log("--","slideshow started",ele.id);
}

// show nextSlide, advance counter, set timeout
home.nextSlide = function( id ) {
  ele = $( id );
  if ( ele.nextSlide ) {
    var sindex = ele.nextSlide - 1;
  }
  else {
    var sindex = 0;
  }
  var slidemaster = ele.slides[ sindex ];
  var next = IMG( { "src": slidemaster.src, "style": "filter: alpha(opacity=01); opacity: 0.01; -ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(opacity=01)\";" } );
  appendChildNodes( $("SlideHolder"), next );
  Opacity( next, { "from": 0.01, "to": 1, "duration": 0.2, "queue": "parallel" } );
  if ( home.activeslide ) {
    Opacity( home.activeslide, { "from": 1.0, "to": 0.01, "duration": 0.2, "queue": "parallel", "afterFinish": function( eff ){ eff.element.style.display = "none"; } } );
  }
  home.activeslide = next;
  nextindex = sindex+1;
  if ( !ele.slides[ nextindex ] ) {
    nextindex = 0;
  }
  // cull unused slides
  iterateElementsByTagAndClassName( "img", null, $("SlideHolder"), function( elements, i ) { 
      if ( elements[i].style.display=="none" ) {
        removeElement( elements[i] );
      }
    } );
  // skip timeout if only one slide
  if ( sindex == nextindex ) return;
  ele.nextSlide = nextindex+1;
  ele.slideto = window.setTimeout( "home.nextSlide( '"+ele.id+"')", 3000 );
}

// mouseout handler, attempts to restore element to original state
home.cleanup = function( e ) {
  var ele = e.src();
  ele.inmouseover = false;
  if ( ele.inro ) {
    Opacity( ele.inro, { "from": 1.0, "to": 0.01, "duration": 0.2, "queue": "parallel", "afterFinish": function( ro ) { 
        var ele = $( ro.element.id.substr( 0, ro.element.id.length - 6 ) );
        ele.inro = false;
        if ( ro.element.parentNode ) {
          removeElement( ro.element ); 
        }
        log("Removed", ro.element.id, "and reset", ele.id, "rollover" );
      } } );
  }
  if ( ele.origfade ) {
    Opacity( ele.origfade, { "from": 0.01, "to": 1, "duration": 0.2, "queue": "parallel" } );
    ele.origfade = false;
  }
  // slideshow hiding is on a timeout to prevent flicker
  if ( home.inshow.id==ele.id ) {
    home.unshow = window.setTimeout( "home.unslideshow();", 200 );
  }
  // clear nextslide timeout
  if ( ele.slideto ) {
    window.clearTimeout( ele.slideto );
  }
  log("<-","cleanup",ele.id);
}

// puts Marquee into normal mode
home.unslideshow = function() {
  home.inshow = false;
  Opacity( $("TransMarquee"), { "from": 1.0, "to": 0.01, "duration": 0.2, "queue": "parallel" } );
  Opacity( $("MainMarquee"), { "from": 0.01, "to": 1, "duration": 0.2, "queue": "end" } );
  if ( home.activeslide ) {
    Opacity( home.activeslide, { "from": 1.0, "to": 0.01, "duration": 0.2, "queue": "parallel", "afterFinish": function( eff ){ eff.element.style.display = "none"; } } );
  }
}

home.woggleone = function() {
  if ( home.touched ) return;
  var ele = home.links[ home.wogglenext ];
  log( "woggling", ele.id );
  var orig = $( ele.id+"_normal" );
  Move( orig, { "x": 0, "y": -5, "duration": 0.1 } ); 
  Move( orig, { "x": 0, "y": 5, "duration": 0.1, "delay": 0.1 } ); 
  Move( orig, { "x": 0, "y": -3, "duration": 0.07, "delay": 0.20 } ); 
  Move( orig, { "x": 0, "y": 3, "duration": 0.07, "delay": 0.27 } ); 
  Move( orig, { "x": 0, "y": -1, "duration": 0.05, "delay": 0.34 } ); 
  Move( orig, { "x": 0, "y": 1, "duration": 0.05, "delay": 0.39 } );
  var wnext = home.wogglenext + 1;
  if ( !home.links[ wnext ] ) {
    wnext = 0;
  }
  home.wogglenext = wnext;
  window.setTimeout( "home.woggleone();", 4000 );
}

home.init = function() {
  // connect rollovers
  var rdelay = 0.4;
  iterateElementsByTagAndClassName( "span", null, $("TransMarquee"), function( elements, i ) { 
      var ele = elements[i];
      if ( hasElementClass( ele, "hasslides") || hasElementClass( ele, "hasro") ) {
        connect( ele, "onmouseover", home, "dispatch" );
        connect( ele, "onmouseout", home, "cleanup" );
        if ( hasElementClass( ele, "hasslides") ) {
          ele.slides = getElementsByTagAndClassName( "img", "slide", $( ele.id+"_slides" ) );
        }
      }
      if ( hasElementClass( ele, "haslink") ) {
        home.links.push( ele );
      }
      // fade in words
      var orig = $( ele.id+"_normal" );
      if ( hasElementClass( orig, "reveal") ) {
        Opacity( orig, { "from": 0.01, "to": 1, "duration": 1, "delay": rdelay } );
        rdelay = rdelay + 0.45;
      }
    } );
  // 2011-07-19 - using Enter div rather than woggling
  Opacity( $("EnterReveal"), { "from": 0.01, "to": 1, "duration": 1, "delay": rdelay } );
  // woggle some stuff if user is just sitting there
  // window.setTimeout( "home.woggleone();", 5000 );
  log( "Homepage init");
}

home.enable = function() {
  home.loaded = true;
  log( "Homepage enabled" );
}

connect( window, "ondomload", home, "init" );
connect( window, "onload", home, "enable" );