// Manage the Lifestyle page images.

Event.observe( window, 'load', function() {
     // cumulativeOffset doesn't include border widths for IE, so starting at #frame rater than #col2of2, which would be more direct.
     var frame = $('frame');
     var borderTop = parseInt( frame.getStyle( 'borderTopWidth' ) );
     var borderLeft = parseInt( frame.getStyle( 'borderLeftWidth' ) );
     var leftColWidth = $('col1of2').getWidth();
     var frameAbsLoc = $('frame').cumulativeOffset();
     var t = frameAbsLoc[1] + borderTop;
     var l = frameAbsLoc[0] + borderLeft + leftColWidth;
     var pics = $$( 'div.lifestyle' );
     for ( var i=0; i<pics.size(); i++ ) {
          // Mozilla browsers show the imaage briefly before moving it to the
          // correct coords, so the divs are initially set, in main.css,  to 
          // appear off the top of the screen. Then they are moved to the correct 
          // position in the line below.
          pics[i].setStyle( {position:'absolute', top:t+'px', left:l+'px'} );
     }
     fader();
     // the time here should be a little more than the length of the whole cycle
     // 5 sec. wait + .5 sec. effect + 5 sec. wait + .5 sec. effect...
     // Changes to waits or effect durations in fader() should be accounted for here.
     new PeriodicalExecuter( fader, 46.5 );
     }
);

function fader() {
     // pause for 5 seconds then fade shopping in and bike out
     window.setTimeout( "outAndIn( $('raft'), $('shopping') );", 5000 );
     var interval = 10500;
     window.setTimeout( "outAndIn( $('shopping'), $('restaurant') );", interval );
     interval += 5500;
     window.setTimeout( "outAndIn( $('restaurant'), $('ironHorse') );", interval );
     interval += 5500;
     window.setTimeout( "outAndIn( $('ironHorse'), $('market') );", interval );
     interval += 5500;
     window.setTimeout( "outAndIn( $('market'), $('mtb') );", interval );
     interval += 5500;
     window.setTimeout( "outAndIn( $('mtb'), $('ski') );", interval );
     interval += 5500;
     window.setTimeout( "outAndIn( $('ski'), $('bike') );", interval );
     interval += 5500;
     window.setTimeout( "outAndIn( $('bike'), $('raft') );", interval );
}

function outAndIn( oneElement, twoElement ) {
     new Effect.Fade( oneElement , {duration:0.5} );
     new Effect.Appear( twoElement, {duration:0.5} );
}