//------------------------------------------------------------------------------------
//
//  NewStuff.js
//
//  developer: JJ Ventrella
//  Internet Archive 
//  Latest update: June 29, 2009
//
//---------------------------------------------------------------------------------------


//-------------------------------------------------------
// Here is the NewStuff class constructor
//-------------------------------------------------------
function NewStuff()
{
	//---------------------------------------
	// constants...
	//---------------------------------------
	var MILLISECONDS_PER_ANIMATION_STEP =  50;
	
	var ONE_HALF			= 0.5;
	var ANIMATION_DURAION	= 8;
	var TOP					= 96;
	var CAPTION_MAX_LENGTH	= 30;
	var CAPTION_HEIGHT		= 20;
	var CAPTION_TOP_OFFSET 	= 55;
	var CAPTION_TUCK_AWAY	= 40;
	var ITEM_SPACING		= 8;
	var ITEM_WIDTH			= 70;
	var ITEM_HEIGHT			= 50;
	var RIGHT_MASK_WIDTH	= 80;
	var MASK_HEIGHT			= 80;
	var BUTTON_WIDTH		= 24;
	var BUTTON_HEIGHT		= 39;
	var NUM_ITEMS_DISPLAYED	= 4;

	//--------------------------
	// private members
	//--------------------------
	var switching				= false;
	var mainTitle				= null;
	var leftButton				= null;
	var rightButton				= null;
	var rightMask				= null;
	var leftSide				= 0;
	var animationTimer			= 0;
	var scrollTimer				= 0;
	var scrollValue				= 0;
	var itemAreaWidth			= 0;
	var direction				= 0;
	var numItems				= 0;
	var item					= [];
	var caption					= [];
	var randomizedIndex			= [];		
	
	//------------------------------------------------------------
	// Below are the "priveledged" methods: functions that access 
	// private members and can be called from outside.
	//------------------------------------------------------------

	//------------------------------------------------------------
	this.initialize = function() 
	{ 
		itemAreaWidth = ( ITEM_WIDTH + ITEM_SPACING ) * NUM_ITEMS_DISPLAYED;

		numItems = newNASAItems.item.length;
		
		//-------------------------------------------------------------
		// get the body
		//-------------------------------------------------------------	
		var body = document.getElementsByTagName( "body" )[0];

		//-------------------------------------------------------------------------------
		// create the main title div
		//-------------------------------------------------------------------------------
		mainTitle = document.createElement( "div" );
		mainTitle.style.position = "absolute";	
		mainTitle.style.top = TOP - 25;
		mainTitle.style.left = 0; // to be set later		
		mainTitle.style.width	= 108;
		mainTitle.style.height	= 15;
		mainTitle.style.background = "url('recently_added.png')";
		mainTitle.style.backgroundRepeat = "no-repeat";
	
		body.appendChild( mainTitle );

		//-------------------------------------------------------------------------------
		// create the item and caption objects
		//-------------------------------------------------------------------------------
		for (var i = 0; i<NUM_ITEMS_DISPLAYED + 2; i++)
		{
			item	[i] = document.createElement( "div" );
			caption	[i] = document.createElement( "div" );
		}

		//-------------------------------------------------------------
		// populate the array of items by choosing randomly from the 
		// available pool, making sure not to repeat any items
		//-------------------------------------------------------------
		this.randomizeOrderOfItems();

		//-------------------------------------------------------------------------------
		// create the item and caption divs
		//-------------------------------------------------------------------------------
		for (var i = 0; i<NUM_ITEMS_DISPLAYED + 2; i++)
		{
			//-----------------------------------------------------------
			// Initialize captions
			//-----------------------------------------------------------
			caption[i].style.position = "absolute";	
			caption[i].style.top = TOP + CAPTION_TOP_OFFSET;
			body.appendChild( caption[i] );

			//-----------------------------------------------------------
			// Initialize items
			//-----------------------------------------------------------
			item[i].style.position = "absolute";	
			item[i].style.top = TOP;
			item[i].style.width = ITEM_WIDTH;
			item[i].style.height = ITEM_HEIGHT;
			item[i].style.overflow = 'hidden';
			item[i].style.backgroundRepeat = "no-repeat";
			item[i].style.border = '2px solid #444444';
			item[i].index = i;
			item[i].x = 0;
			$( item[i] ).mouseover	( function(e) { newStuff.mouseOverItem	( this.index ); } );
			$( item[i] ).mouseout	( function(e) { newStuff.mouseOutItem	( this.index ); } );
			body.appendChild( item[i] );
		}
	
		// the ones that are out of view must be set to invisible
		item	[ 0							].style.visibility = 'hidden';
		caption	[ 0						 	].style.visibility = 'hidden';
		item	[ NUM_ITEMS_DISPLAYED + 1 	].style.visibility = 'hidden';
		caption	[ NUM_ITEMS_DISPLAYED + 1 	].style.visibility = 'hidden';
		
		
		//-------------------------------------------------------------------------------
		// create the right mask div
		//-------------------------------------------------------------------------------
		rightMask = document.createElement( "div" );
		rightMask.style.position = "absolute";	
		rightMask.style.top = TOP;
		rightMask.style.left = 0; // to be set later
		rightMask.style.background = "url('right_mask.png')";
		rightMask.style.width = RIGHT_MASK_WIDTH;
		rightMask.style.height = MASK_HEIGHT;
		
		body.appendChild( rightMask );


		//-------------------------------------------------------------------------------
		// create the left button div
		//-------------------------------------------------------------------------------
		leftButton = document.createElement( "div" );
		leftButton.style.position = "absolute";	
		leftButton.style.top = TOP + ITEM_HEIGHT * ONE_HALF - BUTTON_HEIGHT * ONE_HALF;
		leftButton.style.left = 0; // to be set later
		leftButton.style.background = "url('left_button.png')";
		leftButton.style.width = BUTTON_WIDTH;
		leftButton.style.height = BUTTON_HEIGHT;
		leftButton.style.visibility = 'hidden';

		$( leftButton ).mouseover	( function(e) { newStuff.mouseOverLeftButton(); } );
		$( leftButton ).mouseout	( function(e) { newStuff.mouseOutLeftButton	(); } );
		
		leftButton.onclick = function(e) { newStuff.mouseDownLeftButton(); };
		
		body.appendChild( leftButton );

		//-------------------------------------------------------------------------------
		// create the right button div
		//-------------------------------------------------------------------------------
		rightButton = document.createElement( "div" );
		rightButton.style.position = "absolute";	
		rightButton.style.top = TOP + ITEM_HEIGHT * ONE_HALF - BUTTON_HEIGHT * ONE_HALF;
		rightButton.style.left = 0; // to be set later
		rightButton.style.background = "url('right_button.png')";
		rightButton.style.width = BUTTON_WIDTH;
		rightButton.style.height = BUTTON_HEIGHT;
		
		$( rightButton ).mouseover	( function(e) { newStuff.mouseOverRightButton(); } );
		$( rightButton ).mouseout	( function(e) { newStuff.mouseOutRightButton();  } );

		rightButton.onclick = function(e) { newStuff.mouseDownRightButton(); };

		body.appendChild( rightButton );

		//----------------------------------------------
		// important things to do right now....
		//----------------------------------------------
		direction = -1;
		
		this.fillItemArray();

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


	//---------------------------------------------------------------
	this.arrangeItems = function()
	{
		var s = ITEM_WIDTH + ITEM_SPACING;
	
		for (var i=0; i<NUM_ITEMS_DISPLAYED + 2; i++)
		{
			//-------------------------------------------------
			// the normal (un-animated) placement...
			//-------------------------------------------------
			item[i].x = leftSide + s * ( i - 1 );
			
			item	[i].style.left = item[i].x;
			caption	[i].style.left = item[i].x;
			
			caption	[i].style.top = TOP + CAPTION_TOP_OFFSET;			
		}
		
	}//------------------------------------------------------------



	//---------------------------------------------------------------
	this.updateItemShift = function()
	{
		var f		= scrollTimer / ANIMATION_DURAION;
		var wave	= ONE_HALF - ONE_HALF * Math.cos( f * Math.PI );
		var s		= ITEM_WIDTH + ITEM_SPACING;
	
		for (var i=0; i<NUM_ITEMS_DISPLAYED + 2; i++)
		{
			//-------------------------------------------------
			// offset in accordance with animation shift
			//-------------------------------------------------
			item[i].x += s * direction; 
			
			//-------------------------------------------------
			// apply animation shift
			//-------------------------------------------------
			item[i].x -= wave * s * direction;
		}

		if ( direction == 1 )
		{
			item	[ 0							].x += s * wave;
			item	[ 0							].style.width = ITEM_WIDTH * ( 1.0 - wave );
			caption	[ 0							].style.top = TOP + CAPTION_TOP_OFFSET - wave * CAPTION_TUCK_AWAY;			
			caption	[ NUM_ITEMS_DISPLAYED		].style.top = TOP + CAPTION_TOP_OFFSET - ( 1.0 - wave ) * CAPTION_TUCK_AWAY;	
			item	[ NUM_ITEMS_DISPLAYED		].style.width = ITEM_WIDTH * wave;
		}
		else
		{
			item	[ 1							].x += s * ( 1.0 - wave );
			item	[ 1							].style.width = ITEM_WIDTH * wave;
			caption	[ 1							].style.top = TOP + CAPTION_TOP_OFFSET - ( 1.0 - wave ) * CAPTION_TUCK_AWAY;			
			caption	[ NUM_ITEMS_DISPLAYED + 1	].style.top = TOP + CAPTION_TOP_OFFSET - wave * CAPTION_TUCK_AWAY;			
		}
		
		
		for (var i=0; i<NUM_ITEMS_DISPLAYED + 2; i++)
		{
			item	[i].style.left = item[i].x;
			caption	[i].style.left = item[i].x;
		}		

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



	//-------------------------------------------------------------
	// populate the array of items by choosing randomly from the 
	// available pool, making sure not to repeat any items
	//-------------------------------------------------------------
	this.randomizeOrderOfItems = function()
	{
		var valid = [];
		for (var i = 0; i<numItems; i++)
		{
			valid[i] = false;
			randomizedIndex[i] = -1;
		}

		for (var i = 0; i<numItems; i++)
		{
			var looking = true; 
			while ( looking )
			{
				var testRandomIndex = parseInt( Math.random() * numItems );
				
				//see if testRandomIndex has already been chosen...
				var available = true;
				for (var o = 0; o<numItems; o++)
				{
					if ( testRandomIndex == randomizedIndex[o] )
					{
						available = false;
					}
				}
				
				if ( available )
				{
					randomizedIndex[i] = testRandomIndex;
					looking = false;
				}
			}
		}
		
	}//------------------------------------------------------------


	//-------------------------------------------------------------------------------------------
	this.mouseOverItem = function( i )
	{
		item[i].style.border = '2px solid #999999';
		
	}//-------------------------------------------------------------------------------------------

	//-------------------------------------------------------------------------------------------
	this.mouseOutItem = function( i )
	{
		item[i].style.border = '2px solid #444444';
		
	}//-------------------------------------------------------------------------------------------


	//-------------------------------------------------------------------------------------------
	this.mouseOverRightButton = function()
	{
		rightButton.style.background = "url('right_button_rollover.png')";
		
	}//-------------------------------------------------------------------------------------------


	//-------------------------------------------------------------------------------------------
	this.mouseDownRightButton = function()
	{
		if ( scrollTimer == 0 )
		{
			if ( scrollValue < numItems - NUM_ITEMS_DISPLAYED - 1 )
			{
				this.startScroll( 1 );
			}
		}
		
	}//-------------------------------------------------------------------------------------------


	//-------------------------------------------------------------------------------------------
	this.mouseOutLeftButton = function()
	{
		leftButton.style.background = "url('left_button.png')";

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

	//-------------------------------------------------------------------------------------------
	this.mouseOverLeftButton = function()
	{
		leftButton.style.background = "url('left_button_rollover.png')";
		
	}//-------------------------------------------------------------------------------------------


	//-------------------------------------------------------------------------------------------
	this.mouseDownLeftButton = function()
	{
		if ( scrollTimer == 0 )
		{
			if ( scrollValue > 0 )
			{
				this.startScroll( -1 );
			}
		}
		
	}//-------------------------------------------------------------------------------------------


	//-------------------------------------------------------------------------------------------
	this.mouseOutRightButton = function()
	{
		rightButton.style.background = "url('right_button.png')";

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



	//-------------------------------------------------------------------------------------------
	this.startScroll = function( d )
	{
		if ( direction != d )
		{
			switching = true;
		}
		else
		{
			switching = false;
		}
		
		direction = d;
		
		scrollValue += direction; 
				
		leftButton.style.visibility	= 'visible';
		rightButton.style.visibility	= 'visible';

		if ( scrollValue == 0 )
		{
			leftButton.style.visibility = 'hidden';
		}
		else if ( scrollValue >= numItems - NUM_ITEMS_DISPLAYED - 1 )
		{
			rightButton.style.visibility = 'hidden';
		}
		
		if ( direction == 1 )
		{
			item	[ 0							].style.visibility = 'visible';
			caption	[ 0							].style.visibility = 'visible';
			item	[ NUM_ITEMS_DISPLAYED + 1 	].style.visibility = 'hidden';
			caption	[ NUM_ITEMS_DISPLAYED + 1 	].style.visibility = 'hidden';
		}
		else
		{
			item	[ NUM_ITEMS_DISPLAYED + 1 ].style.visibility = 'visible';
			caption	[ NUM_ITEMS_DISPLAYED + 1 ].style.visibility = 'visible';
		}
	  
		this.fillItemArray();
		this.arrangeItems();
		this.updateItemShift();

		//---------------------------------------------------
		// start the animation timer
		//---------------------------------------------------
		animationTimer = setTimeout( "newStuff.updateAnimation()", MILLISECONDS_PER_ANIMATION_STEP );

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




	//-------------------------------------------------------------------------------------------
	this.fillItemArray = function()
	{	
		for (var i = 0; i<NUM_ITEMS_DISPLAYED + 2; i++)
		{
			if ( scrollValue + i < numItems )
			{
				var ii = randomizedIndex[ scrollValue + i ];													
				item[i].url		= newNASAItems.item[ii].url;
				item[i].image	= newNASAItems.item[ii].image;
				item[i].title	= newNASAItems.item[ii].title;
			}
			
			//--------------------------------------------------------------
			// if the title is too long, then truncate it...
			//--------------------------------------------------------------			
			if ( item[i].title.length > CAPTION_MAX_LENGTH )
			{
				item[i].title = item[i].title.substring( 0, CAPTION_MAX_LENGTH );			
				// the following mysterious code truncates to the end of a word...			
				item[i].title = item[i].title.replace(/\w+$/, '');			
				item[i].title += "...";			
			}

			var imageFile = item[i].image;
			if ( imageFile == "" )	
			{
				imageFile = "no_image_available.jpg";
			}	
				
			//item[i].style.background = "url('" + imageFile + "');";
			//$( item[i] ).mousedown( function( e ) { newStuff.doSearch( e ); } );

			item[i].innerHTML = "<a href = " + item[i].url + " ><img src = " + imageFile + " border = 0></a>";		

			caption[i].innerHTML 
			= "<div style='position: absolute; width: " + ITEM_WIDTH + "px; overflow: 'hidden'; '>"
			+ "<a href = " + item[i].url + " style = 'text-decoration:none'><font size = 1 face='arial' color = '#999999'>" 
			+ item[i].title + "</font></a>" + "</div>";
		}		

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



	//-------------------------------------------------------------------------------------------
	this.doSearch = function( e )
	{
		window.location.href = item[ e.currentTarget.index ].url;
	
	}//----------------------------------------------------------------------
	



	//-------------------------------------------------------------------------------------------
	this.adjustAccordingToBrowserResize = function( top, minimumCenterX, centerShiftX )
	{	
		var browserWidth = document.body.clientWidth;
	
		var centerX = ( browserWidth * ONE_HALF ) - centerShiftX;

		if ( centerX < minimumCenterX )
		{
			centerX = minimumCenterX;
		}
		
		leftSide = centerX - ( itemAreaWidth - ITEM_SPACING ) * ONE_HALF;

		mainTitle.style.left	= leftSide;
		rightMask.style.left	= leftSide + itemAreaWidth - ITEM_SPACING + 3;
		leftButton.style.left	= leftSide - ( ITEM_SPACING + BUTTON_WIDTH );
		rightButton.style.left	= leftSide + itemAreaWidth;
		
		this.arrangeItems();

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



	//-------------------------------------------------------------------------------------------
	this.updateAnimation = function()
	{
		//------------------------------------------------------------
		// reset the timer so it keeps on tickin'
		//------------------------------------------------------------
		animationTimer = setTimeout( "newStuff.updateAnimation()", MILLISECONDS_PER_ANIMATION_STEP );
			
		scrollTimer ++;

		this.arrangeItems(); 	// get them puppies in line...
		this.updateItemShift();	// now move them
							
		// when the animation is all done...						
		if ( scrollTimer >= ANIMATION_DURAION )
		{
			scrollTimer = 0;
			clearTimeout ( animationTimer );
			
			if ( direction == 1 )
			{
				item	[ 0 ].style.visibility = 'hidden';
				caption	[ 0 ].style.visibility = 'hidden';
			}
			else
			{
				item	[ NUM_ITEMS_DISPLAYED + 1	].style.visibility = 'hidden';
				caption	[ NUM_ITEMS_DISPLAYED + 1	].style.visibility = 'hidden';
			}
		}
	
	}//----------------------------------------------------------------------



} //---------------------------------------------------------------------------------
 //---------------  END of class constructor ---------------------------------------
//---------------------------------------------------------------------------------