//-------------------------------------------------------------------------
//
//  HistoryScroller.js
//
//  (this file is intended to accompany "NASAImages.js")
//  main developer: JJ Ventrella
//  Internet Archive 
//  Latest update: June 23, 2009
//
//  The purpose of the History Scroller is to provide a groovy interactive
//  widget for users to scroll through the key chapters in NASA's history, 
//  specifically: the missions (like Apollo, Hubble, Voyager, etc.). 
//
//  This script is initialized from NASAImages.js, which is initialized 
//  from index.html
//  
//  Note that this requires jquery, which provides functions for capturing 
//  mouse events in a way that works consistently across browsers. 
//  jquery.js is included in NASAImages.js
//
//-------------------------------------------------------------------------



//------------------------------------------------
// constants
//------------------------------------------------
var TIMELINE_AREA_LEFT		= 300;
var TIMELINE_AREA_TOP		= 360;
var TIME_LINE_AREA_WIDTH	= 600;
var TIME_LINE_AREA_HEIGHT	= 150;
var TIMELINE_AREA_BOTTOM	= TIMELINE_AREA_TOP + TIME_LINE_AREA_HEIGHT;
var EVENT_HEIGHT			= 43;
var NUM_LEVELS				= 7;
var EVENT_Y_OFFSET			= 16;
var WAVE_INNER_BUFFER		= 20;
var WAVE_OUTER_BUFFER		= 40;
var TRANSITION_RATE			= 0.1;
var BEFORE_BUFFER			= 0;
var AFTER_BUFFER			= 0;
var START_LEVEL				= 0;
var Y_SHIFT_AMOUNT			= 10;
var SHIFT_RATE				= 10;
var TIMELINE_BASE_HEIGHT	= 50;
var BACKGROUND_MARGIN		= 100;
var SCROLL_YEAR_LEFT_SHIFT	= 60;

//-------------------------------------------------
// for things that animate, this is the frame rate
//-------------------------------------------------
var MILLISECONDS_PER_ANIMATION_STEP =  33;


//------------------------------------------------
// states
//------------------------------------------------
var CLOSED_STATE	= 0;
var OPENING_STATE	= 1;
var OPENED_STATE	= 2;
var CLOSING_STATE	= 3;


//------------------------------------------------
// DOM elements
//------------------------------------------------
var mouseCursorDetectingBackground	= null;
var timeLine				= null;
var timeLineBase			= null;
var titleText				= null;
var scrollYear				= null;
var chapter					= [];
var chapterScrollTitle		= [];


//------------------------------------------------
// variables
//------------------------------------------------
var currentState			= 0;
var firstYear				= 0;
var lastYear				= 0;
var numEvents				= 0;
var timeRange				= 0;
var top						= 0;
var bottom					= 0;
var left					= 0;
var right					= 0;
var transitionScalar		= 0;
var transitionWave			= 0;
var transitionWave			= 0;
var numEvents				= 0;
var mouseX					= 0;
var mouseY					= 0;
var browserWidth			= 0;
var centerX					= 0;
var historyScrollerTimer	= 0;





//----------------------------------------------------------------------
function initializeHistoryScroller()
{
	var body = document.getElementsByTagName( "body" )[0];

	//---------------------------------------------------
	// mouseCursorDetectingBackground
	//---------------------------------------------------
	mouseCursorDetectingBackground = document.createElement( "div" );
	mouseCursorDetectingBackground.style.position	= "absolute";
	mouseCursorDetectingBackground.style.left	= TIMELINE_AREA_LEFT - BACKGROUND_MARGIN;
	mouseCursorDetectingBackground.style.top	= TIMELINE_AREA_TOP - BACKGROUND_MARGIN;
	mouseCursorDetectingBackground.style.width	= TIME_LINE_AREA_WIDTH + BACKGROUND_MARGIN * 2;
	mouseCursorDetectingBackground.style.height	= TIME_LINE_AREA_HEIGHT + TIMELINE_BASE_HEIGHT + BACKGROUND_MARGIN * 2;

	$( mouseCursorDetectingBackground ).mouseover( function( event ) { setMouseOverBackground();  } );
	body.appendChild( mouseCursorDetectingBackground );

	
	//---------------------------------------------------
	// time line
	//---------------------------------------------------
	timeLine = document.createElement( "div" );
	timeLine.style.position	= "absolute";
	timeLine.style.left	= TIMELINE_AREA_LEFT;
	timeLine.style.top	= TIMELINE_AREA_TOP;

	$( timeLine ).mousemove	( function( event ) { setMouseMove( event ); } );
//$( timeLine ).mouseover	( function( event ) { } );
//$( timeLine ).mouseout	( function( event ) { } );

	/*
	var widthString  = ( TIME_LINE_AREA_WIDTH  ).toString();
	var heightString = ( TIME_LINE_AREA_HEIGHT ).toString();
	timeLine.innerHTML = "<img src = timelineBackground.jpg border  = 0 width = " + widthString + " height = " + heightString  + "></img>";
	*/
	
	// 'background' version...
	timeLine.style.background = "url('timelineBackground.jpg')";
	timeLine.style.width	= TIME_LINE_AREA_WIDTH;
	timeLine.style.height	= TIME_LINE_AREA_HEIGHT;

	body.appendChild( timeLine );

	//---------------------------------------------------------------------
	// specify all the chapters to be displayed along the time line
	//---------------------------------------------------------------------
	var n = -1;
	n++; createEvent( body, n, "Cassini",				1997, 2008, "CassiniLink.jpg",		6, "Cassini"			);
	n++; createEvent( body, n, "Mars Rovers",			2003, 2008, "RoverLink.jpg",		5, "Mars+Rover"			);
	n++; createEvent( body, n, "Pathfinder",			1996, 1998, "PathfinderLink.jpg",	5, "Mars+Pathfinder"		);
	n++; createEvent( body, n, "Hubble",				1990, 2008, "hubbleLink.jpg",		4, "Hubble"			);
	n++; createEvent( body, n, "Voyager",				1977, 2005, "VoyagerLink.jpg",		3, "Voyager"			);
	n++; createEvent( body, n, "Shuttle",				1981, 2010, "shuttleLink.jpg",		2, "Space+Shuttle"		);
	n++; createEvent( body, n, "Skylab",				1973, 1975, "skyLabLink.jpg",		2, "Skylab"			);
	n++; createEvent( body, n, "Galileo",				1989, 2003, "GalileoLink.jpg",		1, "Galileo"			);
	n++; createEvent( body, n, "Viking",				1975, 1982, "VikingLink.jpg",		1, "Viking"			);
	n++; createEvent( body, n, "Apollo",				1966, 1973, "ApolloLink.jpg",		1, "Apollo"			);
	n++; createEvent( body, n, "Mercury",				1959, 1964, "MercuryLink.jpg",		1, "Mercury"			);
	n++; createEvent( body, n, "Pioneer",				1972, 1998, "pioneerLink.jpg",		0, "Pioneer"			);
	n++; createEvent( body, n, "Gemini",				1964, 1967, "GeminiLink.jpg",		0, "Gemini"			);
	n++; createEvent( body, n, "Explorer",				1958, 1962, "ExplorerLink.jpg",		0, "Explorer"			);
	n++; createEvent( body, n, "International Space Station",	1998, 2010, "spaceStationLink.jpg",	0, "International+Space+Station");

	numEvents = n+1;

	//-----------------------------------------------
	// determine first year, last year, and range
	//-----------------------------------------------
	calculateTimeRangeInformation();

	//---------------------------------------------------------------------------
	// Do this AFTER calculateTimeRangeInformation, as we need to know 
	// about time duration in order to determine the widths of the images
	//---------------------------------------------------------------------------
	createImagesAndURLLinksForAllEvents();

	//---------------------------------------------------
	// time line base
	//---------------------------------------------------
	timeLineBase = document.createElement( "div" );
	timeLineBase.style.position = "absolute";
	timeLineBase.style.left = TIMELINE_AREA_LEFT;
	timeLineBase.style.top  = TIMELINE_AREA_BOTTOM;

	$( timeLineBase ).mousemove	( function( event ) { setMouseMove( event ); } );
	$( timeLineBase ).mouseover	( function( event ) { } );
	$( timeLineBase ).mouseout	( function( event ) { } );

	var widthString  = ( TIME_LINE_AREA_WIDTH  ).toString();
	var heightString = ( TIMELINE_BASE_HEIGHT ).toString();
//timeLineBase.innerHTML = "<img src = timelineBase.jpg border  = 0 width = " + widthString + " height = " + heightString + "></img>";

	// 'background' version...
	timeLineBase.style.background = "url('timelineBase.jpg')";
	timeLineBase.style.width	= TIME_LINE_AREA_WIDTH;
	timeLineBase.style.height	= TIMELINE_BASE_HEIGHT;

	body.appendChild( timeLineBase );


	//---------------------------------------------------
	// title
	//---------------------------------------------------
	titleText = document.createElement( "div" );
	titleText.style.position = "absolute";
	titleText.style.background = "url('timeline_title.jpg')";
	titleText.style.backgroundRepeat = "no-repeat";
	titleText.style.left = 0;
	titleText.style.top  = 0;
	titleText.style.width	= 119;
	titleText.style.height	= 13;
	titleText.style.visibility = 'visible';
	body.appendChild( titleText );


	//---------------------------------------------------
	// scroll year
	//---------------------------------------------------
	scrollYear = document.createElement( "div" );
	scrollYear.style.position = "absolute";
	scrollYear.style.left = 0;
	scrollYear.style.top  = 0;
	scrollYear.style.cursor = 'default';

	$( scrollYear ).mousemove	( function( event ) { setMouseMove( event ); } );
	$( scrollYear ).mouseover	( function( event ) { } );
	$( scrollYear ).mouseout	( function( event ) { } );

	scrollYear.style.visibility = 'hidden';
	body.appendChild( scrollYear );

	//-----------------------------------------------------------------------------------
	// create the positions of the whole thing and all the chapters within
	// 
	// NOTE - this doesn't set all the state - but that's OK because when  
	// this is called upon browser resize from within NASAImages.js, it comes 
	// out right.
	//-----------------------------------------------------------------------------------
	setPositionOfHistoryScroller( 0, 0 );

	//-------------------------------------------------------------------------------------
	// figure out the x values of the chapters - which only needs to be done once - 
	// that's why I'm doing it here at initialization. NOTE that the function 
	// above, setPositionOfHistoryScroller, must be called first.
	//-------------------------------------------------------------------------------------
	determineXCoordinatesOfEvents();

	//---------------------------------------------------
	// start closed
	//---------------------------------------------------
	currentState = CLOSED_STATE;

}//----------------------------------------------------------------------



//-------------------------------------------------------------------------------------------
function createImagesAndURLLinksForAllEvents()
{
	for (var i=0; i< numEvents; i++)
	{
		var durationFraction = ( 1 + chapter[i].endYear - chapter[i].startYear )  / timeRange;
		chapter[i].width = durationFraction * TIME_LINE_AREA_WIDTH;

		var widthString  = "width  = " + ( chapter[i].width ).toString();
		var heightString = "height = " + ( EVENT_HEIGHT   ).toString();
		var imageString  = "<img src = " + chapter[i].image + " border = 0 " + widthString + " " + heightString + "></img>";

		/*
		chapter[i].style.background = "url('" + chapter[i].image + "')";
		chapter[i].style.width	= chapter[i].width;
		chapter[i].style.height	= EVENT_HEIGHT;
		chapter[i].onclick = function(e) { openLink( chapter[i].URL ); };
		*/
		
		chapter[i].innerHTML = "<a href = " + chapter[i].URL + ">" + imageString  + "</a>";
	}

}//-----------------------------------------------------------------------------------------


/*
//-------------------------------------------------------------------------------------------
function openLink( url )
{
	window.location.href = url;

}//-----------------------------------------------------------------------------------------
*/


//-------------------------------------------------------------------------------------------
function createEvent( body, index, chapterName, startYear, endYear, imageFile, stackLevel, searchString )
{
	//--------------------------------------------------------------------------
	// Notice that "SERVER_ADDRESS_STRING" is defined in NASAImages.js
	//--------------------------------------------------------------------------
	var URL = SERVER_ADDRESS_STRING + "search?q=" + searchString + "&search=Search" 

	//-------------------------------------------------------------------------------------------
	// "Mercury" has an especially long URL string, so I'm inserting a special case here...
	//-------------------------------------------------------------------------------------------
	if ( chapterName == "Mercury" )
	{
		URL = SERVER_ADDRESS_STRING + "search?b1=Search&q=project+mercury&pgs=50&res=1&cic=nasaNAS%7E10%7E10%2CnasaNAS%7E12%7E12%2CnasaNAS%7E13%7E13%2CnasaNAS%7E16%7E16%2CnasaNAS%7E20%7E20%2CnasaNAS%7E22%7E22%2CnasaNAS%7E2%7E2%2CnasaNAS%7E4%7E4%2CnasaNAS%7E5%7E5%2CnasaNAS%7E6%7E6%2CnasaNAS%7E7%7E7%2CnasaNAS%7E8%7E8%2CnasaNAS%7E9%7E9%2CNSVS%7E3%7E3%2CNVA2%7E13%7E13%2CNVA2%7E1%7E1%2CNVA2%7E4%7E4%2CNVA2%7E8%7E8%2CNVA2%7E9%7E9%2CNVA2%7E16%7E16%2CNVA2%7E17%7E17%2CNVA2%7E18%7E18";
	}

	chapter[ index ] = document.createElement( "div" );
	chapter[ index ].style.position	= "absolute";
	chapter[ index ].startYear	= startYear;
	chapter[ index ].endYear		= endYear;
	chapter[ index ].title		= chapterName;
	chapter[ index ].image		= imageFile;
	chapter[ index ].URL		= URL;
	chapter[ index ].stackLevel	= stackLevel;

	$( chapter[ index ] ).mousemove	( function( event ) { setMouseMove( event ); } );

	body.appendChild( chapter[ index ] );

	//---------------------------------------------
	// create a scroll title for the chapter 
	//---------------------------------------------
	chapterScrollTitle[ index ] = document.createElement( "div" );
	chapterScrollTitle[ index ].style.position = "absolute";
	chapterScrollTitle[ index ].style.left = 0;
	chapterScrollTitle[ index ].style.top  = 0;

	var titleString = "<font size = 1 face='arial' color=#dddddd>" + chapter[ index ].title + "</font>";
	chapterScrollTitle[ index ].innerHTML = "<a href = " + chapter[ index ].URL  + " style = 'text-decoration:none'>" + titleString + "</a>"; 

	$( chapterScrollTitle[ index ] ).mousemove( function( event ) { setMouseMove( event ); } );
	$( chapterScrollTitle[ index ] ).mouseover( function( event ) { } );
	$( chapterScrollTitle[ index ] ).mouseout ( function( event ) { } );

	chapterScrollTitle[ index ].style.visibility = "hidden";
	body.appendChild( chapterScrollTitle[ index ] );

}//----------------------------------------------------------------------



//-------------------------------------------------------------------------------------------
function calculateTimeRangeInformation()
{
	//-------------------------------------
	// find first and last years 
	//-------------------------------------
	firstYear = 100000; // start big-ass
	lastYear = 0; // start small-ass
	for (var i=0; i<numEvents; i++)
	{
		if ( chapter[i].startYear < firstYear ) { firstYear = chapter[i]. startYear; }
		if ( chapter[i].endYear	> lastYear  ) { lastYear  = chapter[i]. endYear;	 }
	}

	//-----------------------------------------------------------------
	// add buffers so the time line can show a little more
	//-----------------------------------------------------------------
	firstYear -= BEFORE_BUFFER;
	lastYear  += AFTER_BUFFER;

	//-----------------------------------------------------------------
	// now, calculate the range
	//-----------------------------------------------------------------
	timeRange = lastYear - firstYear + 1;

}//-------------------------------------------------------------------------------------------



//-------------------------------------------------------------------------------------------
// This is intended to be called whenever the browser window is resized...
//-------------------------------------------------------------------------------------------
function setPositionOfHistoryScroller( minimumCenterX, centerShiftX )
{
	browserWidth = document.body.clientWidth;
	centerX = ( browserWidth / 2 ) - centerShiftX;


	//--------------------------------------------------------------
	// clamp this mofo
	//--------------------------------------------------------------
	if ( centerX < minimumCenterX )
	{
		centerX = minimumCenterX;
	}

	//--------------------------------------------------------------
	// these four values are reset here.
	// They are used elsewhere in the code.  
	//--------------------------------------------------------------
	left	= centerX - TIME_LINE_AREA_WIDTH / 2;
	top	= TIMELINE_AREA_TOP;
	right	= left + TIME_LINE_AREA_WIDTH;
	bottom	= top  + TIME_LINE_AREA_HEIGHT;

	//--------------------------------------------------------------
	// adjust timeline
	//--------------------------------------------------------------
	timeLine.style.left = left;
	timeLine.style.top  = top;

	mouseCursorDetectingBackground.style.left	= left - BACKGROUND_MARGIN;
	mouseCursorDetectingBackground.style.top	= top - BACKGROUND_MARGIN;


	//--------------------------------------------------------------
	// adjust timeline base, and timeline base mouseover regions
	//--------------------------------------------------------------
	timeLineBase.style.left = left;

	//--------------------------------------------------------------
	// reset title
	//--------------------------------------------------------------
	titleText.style.left = left + ( right - left ) / 2 - SCROLL_YEAR_LEFT_SHIFT;
	titleText.style.top = bottom + 9;
	titleText.style.visibility = 'visible';

	//-------------------------------------------------------
	// re-position all the chapter images on the timeline
	//-------------------------------------------------------
	setPositionsOfTheEvents();

}//-------------------------------------------------------------------------------------------



//-------------------------------------------------------------------------------------------
function setPositionsOfTheEvents()
{
	determineXCoordinatesOfEvents();

	for (var i=0; i< numEvents; i++)
	{
		chapter[i].top = top + TIME_LINE_AREA_HEIGHT - EVENT_HEIGHT;
		chapter[i].style.top = chapter[i].top;
	}

}//-------------------------------------------------------------------------------------------



//-------------------------------------------------------------------------------------------
function determineXCoordinatesOfEvents()
{
	for (var i=0; i< numEvents; i++)
	{
		var fraction = ( chapter[i].startYear - firstYear ) / timeRange;		
		chapter[i].left = centerX - TIME_LINE_AREA_WIDTH / 2 + fraction * TIME_LINE_AREA_WIDTH;
		chapter[i].style.left = chapter[i].left;

		//-----------------------------------------------------------------------------------
		// re-calculate 'right' side...
		//-----------------------------------------------------------------------------------
		chapter[i].right = chapter[i].left + chapter[i].width;
	}

}//-------------------------------------------------------------------------------------------


//-------------------------------------------------------------------------------------------
function setMouseMove( event )
{
	//----------------------------------------------------
	// save off these values
	//----------------------------------------------------
	mouseX = event.clientX;
	mouseY = event.clientY;

	if ( currentState == CLOSED_STATE )
	{
		currentState = OPENING_STATE;
		//console.log( "OPENING" );

		//------------------------------------------------------------
		// start up the timer...
		// (first clear it out in case it is already on)
		//------------------------------------------------------------
		clearTimeout ( historyScrollerTimer );
		historyScrollerTimer = setTimeout( "updateHistoryScrollerAnimation()", MILLISECONDS_PER_ANIMATION_STEP );
	}
	else if ( currentState == OPENED_STATE )
	{
		updateBehavior();
	}
	else if ( currentState == CLOSING_STATE )
	{
		currentState = OPENING_STATE;
		//console.log( "OPENING" );
	}


	if ( mouseX > right )
	{
		closeHistoryScroller();
	}

}//-------------------------------------------------------------------------------------------





//-------------------------------------------------------------------------------------------
function setMouseOverBackground()
{
	//console.log( "BACKGROUND" );

	if (( currentState == OPENED_STATE )
	||  ( currentState == OPENING_STATE ))
	{
		closeHistoryScroller();
	}

}//-------------------------------------------------------------------------------------------



//----------------------------------------------------------------------
function closeHistoryScroller()
{
	currentState = CLOSING_STATE;
	//console.log( "CLOSING" );

	//------------------------------------------------------------
	// start up the timer...
	//------------------------------------------------------------
	historyScrollerTimer = setTimeout( "updateHistoryScrollerAnimation()", MILLISECONDS_PER_ANIMATION_STEP );

	scrollYear.style.visibility = 'hidden';
	titleText.style.visibility = 'visible';

	titleText.style.left = left + ( right - left ) / 2 - SCROLL_YEAR_LEFT_SHIFT;
	titleText.style.top = bottom + 9;

}//-------------------------------------------------------------------------------------------






//-------------------------------------------------------------------------------------------
function updateBehavior()
{
	//----------------------------------------------------
	// find the year the mouse is hovering over
	//----------------------------------------------------
	var fraction = ( mouseX - left ) / ( right - left ); 
	var year = parseInt( firstYear + fraction * timeRange );

	//----------------------------------------------------
	// update the scroll year
	//----------------------------------------------------
	if (( currentState == OPENING_STATE )
	||  ( currentState == OPENED_STATE ))
	{
		scrollYear.style.visibility = 'visible';
		titleText.style.visibility = 'hidden';
		
		scrollYear.innerHTML = "<font size = 2 face='arial'>" + ( year ).toString() + "</font>"; 

		//-----------------------------------------------------------
		// I'm not using mouseX beacause I want the text to
		// appear only at discrete year x positions.
		//-----------------------------------------------------------
		var fraction = ( year - firstYear ) /  timeRange;
		scrollYear.style.left = left + fraction * ( right - left );
		scrollYear.style.top = bottom + 7;
	}

	//----------------------------------------------------
	// update the images and scroll titles
	//----------------------------------------------------
	for (var i=0; i< numEvents; i++)
	{
		updateEvent( i );

		if (( year >= chapter[i].startYear	)
		&&  ( year <= chapter[i].endYear	)
		&&  ( transitionScalar > 0.8 		))
		{
			chapterScrollTitle[i].style.visibility = "visible";
			var fraction = ( chapter[i].startYear - firstYear ) /  timeRange;
			chapterScrollTitle[i].style.left = left + fraction * ( right - left ) + 2;
			chapterScrollTitle[i].style.top = chapter[i].top + 2;
		}
		else
		{
			chapterScrollTitle[i].style.visibility = "hidden";
		}
	}

}//-------------------------------------------------------------------------------------------






//-------------------------------------------------------------------------------------------
function updateEvent( i )
{
	//--------------------------------------------------------------------------------
	// determine wave value, as a function of proximity to mouse x position
	//--------------------------------------------------------------------------------
	var wave = 0;

	if ( mouseX < chapter[i].left - WAVE_INNER_BUFFER - WAVE_OUTER_BUFFER )
	{
		wave = 0.0;
	}
	else if ( mouseX < chapter[i].left - WAVE_INNER_BUFFER )
	{
		wave = 1.0 - ( chapter[i].left - WAVE_INNER_BUFFER - mouseX ) / WAVE_OUTER_BUFFER;
	}
	else if ( mouseX < chapter[i].right + WAVE_INNER_BUFFER )
	{
		wave = 1.0;
	}
	else if ( mouseX < chapter[i].right + WAVE_INNER_BUFFER + WAVE_OUTER_BUFFER )
	{
		wave = 1.0 - ( mouseX - chapter[i].right - WAVE_INNER_BUFFER ) / WAVE_OUTER_BUFFER;
	}

	//------------------------------------------------
	// Now, animate the height of the chapter...
	//------------------------------------------------
	chapter[i].top = top + TIME_LINE_AREA_HEIGHT - EVENT_HEIGHT - chapter[i].stackLevel * EVENT_Y_OFFSET * wave * transitionWave;

	var levelThingy	= NUM_LEVELS + 2;
	var yFraction= ( mouseY - top ) / ( bottom - top );
	var levelFraction = levelThingy - ( yFraction * levelThingy );

	if ( chapter[i].stackLevel < levelFraction - 2 )
	{
		var shift = ( levelFraction - 2 - chapter[i].stackLevel ) * SHIFT_RATE;
			
		if ( shift > Y_SHIFT_AMOUNT ) 
		{ 
			shift = Y_SHIFT_AMOUNT; 
		}

		if ( chapter[i].stackLevel < NUM_LEVELS - 1 )
		{
			chapter[i].top += shift * transitionWave;
		}
	}

	//--------------------------------------------------------
	// and, finally, set the top value of this element
	//--------------------------------------------------------
	chapter[i].style.top = chapter[i].top;

}//-------------------------------------------------------------------------------------------




//----------------------------------------------------------------------
function updateHistoryScrollerAnimation()
{
	//------------------------------------------------------------
	// reset the timer so it keeps on tickin'
	//------------------------------------------------------------
	historyScrollerTimer = setTimeout( "updateHistoryScrollerAnimation()", MILLISECONDS_PER_ANIMATION_STEP );

	if ( currentState == OPENING_STATE )
	{
		transitionScalar += TRANSITION_RATE;

		if ( transitionScalar > 1.0 )
		{
			transitionScalar = 1.0;
			currentState = OPENED_STATE;
			//console.log( "OPENED" );
			clearTimeout ( historyScrollerTimer );
		}

		transitionWave = 0.5 - 0.5 * Math.cos( transitionScalar * Math.PI );

		updateBehavior();

		//console.log( transitionScalar );
	}
	else if ( currentState == CLOSING_STATE )
	{
		transitionScalar -= TRANSITION_RATE;
		
		if ( transitionScalar < 0.0 )
		{
			transitionScalar = 0.0;
			currentState = CLOSED_STATE;
			//console.log( "CLOSE" );
			clearTimeout ( historyScrollerTimer );
		}

		transitionWave = 0.5 - 0.5 * Math.cos( transitionScalar * Math.PI );

		updateBehavior();

		//console.log( transitionScalar );
	}

}//----------------------------------------------------------------------