//------------------------------------------------------------------------------------
//
// Thumbnails.js
//
// main developer: Jeffrey Ventrella
// Internet Archive
// Latest update: June 29, 2009
//
//------------------------------------------------------------------------------------
//------------------------------------
// constants
//------------------------------------
var THUMBNAIL_REGION_TOP = 240;
var THUMBNAIL_SIZE = 100;
var THUMBNAIL_MARGIN = 25;
var NUM_STACK_EFFECT_ELEMENTS = 7;
var STACK_EFFECT_DURATION = 10;
var STACK_SIZE_SHIFT = 10;
var STACK_EFFECT_VERTICAL_STRETCH = 40;
var STACK_EFFECT_HORIZONTAL_STRETCH = 50;
var STACK_EFFECT_MARGIN = 2;
var THUMBNAIL_X_SPACING = THUMBNAIL_SIZE + THUMBNAIL_MARGIN;
//-------------------------------------------------
// for things that animate, this is the frame rate
//-------------------------------------------------
var MILLISECONDS_PER_ANIMATION_STEP = 33;
//------------------------------------
// thumbnail link names
//------------------------------------
var THUMBNAIL_UNIVERSE = 0;
var THUMBNAIL_SOLAR = 1;
var THUMBNAIL_EARTH = 2;
var THUMBNAIL_AERONAUTICS = 3;
var THUMBNAIL_ASTRONAUTS = 4;
var NUM_THUMBNAILS = 5;
//------------------------------------
// DOM elements
//------------------------------------
var thumbnail = [];
//var thumbnailCaption = [];
var thumbnailURL = [];
var stackEffectElement = [];
var titles = null;
//------------------------------------
// some valiables
//------------------------------------
var stackEffectAnimating = false;
var stackEffectCounter = 0;
var currentStackEffectIndex = 0;
var thumbnailAreaLeft = 0;
var thumbnailsTimer = 0;
//----------------------------------------------------------------------
function initializeThumbnails( body )
{
titles = document.createElement( "div" );
titles.style.position = "absolute";
titles.style.top = 400;
titles.style.left = 400; // gets set later
titles.style.width = 578;
titles.style.height = 14;
titles.style.background = "url('titles.jpg')";
titles.style.backgroundRepeat = "no-repeat";
body.appendChild( titles );
//------------------------------------------------------------------------------------------
// The following four url strings are very long - did you notice? They were
// hand-crafted to create 'curated' search queries on these four general categories...
//------------------------------------------------------------------------------------------
thumbnailURL[ THUMBNAIL_UNIVERSE ] = SERVER_ADDRESS_STRING + "search?b1=Search&q=galaxy+or+constellation+or+hubble+or+spitzer&pgs=50&res=1&cic=nasaNAS~10~10,nasaNAS~12~12,nasaNAS~13~13,nasaNAS~16~16,nasaNAS~20~20,nasaNAS~22~22,nasaNAS~2~2,nasaNAS~4~4,nasaNAS~5~5,nasaNAS~6~6,nasaNAS~7~7,nasaNAS~8~8,nasaNAS~9~9,NSVS~3~3,NVA2~13~13,NVA2~14~14,NVA2~15~15,NVA2~1~1,NVA2~4~4,NVA2~8~8,NVA2~9~9,NVA2~16~16,NVA2~17~17,NVA2~18~18,NVA2~19~19,NVA2~20~20,NVA2~21~21,NVA2~22~22,NVA2~23~23,NVA2~25~25,NVA2~26~26,NVA2~24~24,NVA2~27~27,NVA2~28~28,NVA2~29~29,NVA2~30~30,NVA2~31~31,NVA2~32~32,NVA2~33~33,NVA2~34~34,NVA2~35~35,NVA2~36~36,NVA2~37~37,NVA2~38~38,NVA2~39~39,NVA2~40~40,NVA2~41~41,NVA2~42~42,NVA2~43~43,NVA2~44~44,NVA2~45~45,NVA2~46~46,NVA2~47~47,NVA2~48~48,NVA2~49~49,NVA2~50~50,NVA2~51~51,NVA2~52~52,NVA2~53~53,NVA2~54~54,NVA2~55~55,NVA2~56~56,NVA2~57~57";
thumbnailURL[ THUMBNAIL_SOLAR ] = SERVER_ADDRESS_STRING + "search?search=Search&q=Sun+OR+Mercury+OR+Venus+OR+Mars+OR+Jupiter+OR+Saturn+Or+Uranus+OR+Neptune+OR+Pluto&pgs=50&res=1&cic=nasaNAS~10~10,nasaNAS~12~12,nasaNAS~13~13,nasaNAS~16~16,nasaNAS~20~20,nasaNAS~22~22,nasaNAS~2~2,nasaNAS~4~4,nasaNAS~5~5,nasaNAS~6~6,nasaNAS~7~7,nasaNAS~8~8,nasaNAS~9~9,NSVS~3~3,NVA2~13~13,NVA2~14~14,NVA2~15~15,NVA2~1~1,NVA2~4~4,NVA2~8~8,NVA2~9~9,NVA2~16~16,NVA2~17~17,NVA2~18~18,NVA2~19~19,NVA2~20~20,NVA2~21~21,NVA2~22~22,NVA2~23~23,NVA2~25~25,NVA2~26~26,NVA2~24~24,NVA2~27~27,NVA2~28~28,NVA2~29~29,NVA2~30~30,NVA2~31~31,NVA2~32~32,NVA2~33~33,NVA2~34~34,NVA2~35~35,NVA2~36~36,NVA2~37~37,NVA2~38~38,NVA2~39~39,NVA2~40~40,NVA2~41~41,NVA2~42~42,NVA2~43~43,NVA2~44~44,NVA2~45~45,NVA2~46~46,NVA2~47~47,NVA2~48~48,NVA2~49~49,NVA2~50~50,NVA2~51~51,NVA2~52~52,NVA2~53~53,NVA2~54~54,NVA2~55~55,NVA2~56~56,NVA2~57~57";
thumbnailURL[ THUMBNAIL_EARTH ] = SERVER_ADDRESS_STRING + "search/where/Jet+Propulsion+Laboratory/?q=Earth&pgs=50&res=1&cic=nasaNAS~10~10,nasaNAS~12~12,nasaNAS~13~13,nasaNAS~16~16,nasaNAS~20~20,nasaNAS~22~22,nasaNAS~2~2,nasaNAS~4~4,nasaNAS~5~5,nasaNAS~6~6,nasaNAS~7~7,nasaNAS~8~8,nasaNAS~9~9,NSVS~3~3,NVA2~13~13,NVA2~14~14,NVA2~15~15,NVA2~1~1,NVA2~4~4,NVA2~8~8,NVA2~9~9,NVA2~16~16,NVA2~17~17,NVA2~18~18,NVA2~19~19,NVA2~20~20,NVA2~21~21,NVA2~22~22,NVA2~23~23,NVA2~25~25,NVA2~26~26,NVA2~24~24,NVA2~27~27,NVA2~28~28,NVA2~29~29,NVA2~30~30,NVA2~31~31,NVA2~32~32,NVA2~33~33,NVA2~34~34,NVA2~35~35,NVA2~36~36,NVA2~37~37,NVA2~38~38,NVA2~39~39,NVA2~40~40,NVA2~41~41,NVA2~42~42,NVA2~43~43,NVA2~44~44,NVA2~45~45,NVA2~46~46,NVA2~47~47,NVA2~48~48,NVA2~49~49,NVA2~50~50,NVA2~51~51,NVA2~52~52,NVA2~53~53,NVA2~54~54,NVA2~55~55,NVA2~56~56,NVA2~57~57";
thumbnailURL[ THUMBNAIL_AERONAUTICS ] = SERVER_ADDRESS_STRING + "search?b1=Search&q=Dryden+OR+Langley&pgs=250&res=1&cic=nasaNAS~10~10,nasaNAS~12~12,nasaNAS~13~13,nasaNAS~16~16,nasaNAS~20~20,nasaNAS~22~22,nasaNAS~2~2,nasaNAS~4~4,nasaNAS~5~5,nasaNAS~6~6,nasaNAS~7~7,nasaNAS~8~8,nasaNAS~9~9,NSVS~3~3,NVA2~13~13,NVA2~14~14,NVA2~15~15,NVA2~1~1,NVA2~4~4,NVA2~8~8,NVA2~9~9,NVA2~16~16,NVA2~17~17,NVA2~18~18,NVA2~19~19,NVA2~20~20,NVA2~21~21,NVA2~22~22,NVA2~23~23,NVA2~25~25,NVA2~26~26,NVA2~24~24,NVA2~27~27,NVA2~28~28,NVA2~29~29,NVA2~30~30,NVA2~31~31,NVA2~32~32,NVA2~33~33,NVA2~34~34,NVA2~35~35,NVA2~36~36,NVA2~37~37,NVA2~38~38,NVA2~39~39,NVA2~40~40,NVA2~41~41,NVA2~42~42,NVA2~43~43,NVA2~44~44,NVA2~45~45,NVA2~46~46,NVA2~47~47,NVA2~48~48,NVA2~49~49,NVA2~50~50,NVA2~51~51,NVA2~52~52,NVA2~53~53,NVA2~54~54,NVA2~55~55,NVA2~56~56,NVA2~57~57";
thumbnailURL[ THUMBNAIL_ASTRONAUTS ] = SERVER_ADDRESS_STRING + "search?search=Search&q=astronaut&pgs=50&res=1&cic=nasaNAS~10~10,nasaNAS~12~12,nasaNAS~13~13,nasaNAS~16~16,nasaNAS~20~20,nasaNAS~22~22,nasaNAS~2~2,nasaNAS~4~4,nasaNAS~5~5,nasaNAS~6~6,nasaNAS~7~7,nasaNAS~8~8,nasaNAS~9~9,NSVS~3~3,NVA2~13~13,NVA2~14~14,NVA2~15~15,NVA2~1~1,NVA2~4~4,NVA2~8~8,NVA2~9~9,NVA2~16~16,NVA2~17~17,NVA2~18~18,NVA2~19~19,NVA2~20~20,NVA2~21~21,NVA2~22~22,NVA2~23~23,NVA2~25~25,NVA2~26~26,NVA2~24~24,NVA2~27~27,NVA2~28~28,NVA2~29~29,NVA2~30~30,NVA2~31~31,NVA2~32~32,NVA2~33~33,NVA2~34~34,NVA2~35~35,NVA2~36~36,NVA2~37~37,NVA2~38~38,NVA2~39~39,NVA2~40~40,NVA2~41~41,NVA2~42~42,NVA2~43~43,NVA2~44~44,NVA2~45~45,NVA2~46~46,NVA2~47~47,NVA2~48~48,NVA2~49~49,NVA2~50~50,NVA2~51~51,NVA2~52~52,NVA2~53~53,NVA2~54~54,NVA2~55~55,NVA2~56~56,NVA2~57~57";
//-------------------------------------------------------------------------------
// create the array of stack effect elements
//-------------------------------------------------------------------------------
stackEffectAnimating = false;
stackEffectCounter = 0;
for (var z = 0; z< NUM_STACK_EFFECT_ELEMENTS; z++)
{
stackEffectElement[z] = document.createElement( "div" );
stackEffectElement[z].style.position = "absolute";
stackEffectElement[z].style.visibility = "hidden";
var imageName = "effect_" + (z).toString() + ".jpg";
stackEffectElement[z].innerHTML = "
";
body.appendChild( stackEffectElement[z] );
}
//-------------------------------------------------------------------------------
// create the thumbnails and their captions
//-------------------------------------------------------------------------------
for (var i = 0; i< NUM_THUMBNAILS; i++)
{
/*
thumbnail[i] = document.createElement( "div" );
thumbnail[i].index = i;
$( thumbnail[i] ).mouseover ( function(e) { triggerStackEffectAnimation( this.index ); } );
$( thumbnail[i] ).mouseout ( function(e) { hideStackEffectElements(); } );
body.appendChild( thumbnail[i] );
var imageNumberString = i.toString();
var imageString = "" + imageString + " border = 0>";
*/
thumbnail[i] = document.createElement( "div" );
thumbnail[i].index = i;
$( thumbnail[i] ).mouseover ( function(e) { triggerStackEffectAnimation( this.index ); } );
$( thumbnail[i] ).mouseout ( function(e) { hideStackEffectElements(); } );
$( thumbnail[i] ).mousedown ( function(e) { doSearch( this.index ); } );
body.appendChild( thumbnail[i] );
var imageNumberString = i.toString();
thumbnail[i].style.background = "url('" + imageNumberString + ".jpg')";
thumbnail[i].style.width = THUMBNAIL_SIZE;
thumbnail[i].style.height = THUMBNAIL_SIZE;
/*
//-----------------------------------------------------------
// Initialize captions
//-----------------------------------------------------------
thumbnailCaption[i] = document.createElement( "div" );
var captionText = "--";
if ( i == THUMBNAIL_EARTH ) { captionText = "Earth"; thumbnailCaption[i].rightShift = 33; }
else if ( i == THUMBNAIL_SOLAR ) { captionText = "Solar System"; thumbnailCaption[i].rightShift = 10; }
else if ( i == THUMBNAIL_AERONAUTICS ) { captionText = "Aeronautics"; thumbnailCaption[i].rightShift = 15; }
else if ( i == THUMBNAIL_ASTRONAUTS ) { captionText = "Astronauts"; thumbnailCaption[i].rightShift = 15; }
else if ( i == THUMBNAIL_UNIVERSE ) { captionText = "Universe"; thumbnailCaption[i].rightShift = 20; }
thumbnailCaption[i].innerHTML = "" + captionText + "";
body.appendChild( thumbnailCaption[i] );
*/
}
}//----------------------------------------------------------------------
//-------------------------------------------------------------------------------------------
function doSearch( index )
{
window.location.href = thumbnailURL[ index ];
}//----------------------------------------------------------------------
//-------------------------------------------------------------------------------------------
// This is intended to be called when the browser window is resized...
//-------------------------------------------------------------------------------------------
function setPositionOfThumbnails( minimumCenterX, centerShiftX )
{
browserWidth = document.body.clientWidth;
//browserHeight = document.body.clientHeight;
centerX = ( browserWidth / 2 ) - centerShiftX;
if ( centerX < minimumCenterX )
{
centerX = minimumCenterX;
}
var width = THUMBNAIL_SIZE * NUM_THUMBNAILS + THUMBNAIL_MARGIN * ( NUM_THUMBNAILS - 1 );
thumbnailAreaLeft = centerX - width / 2;
var right = centerX + width / 2;
for (var i = 0; i< NUM_THUMBNAILS; i++)
{
thumbnail[i].style.position = "absolute";
thumbnail[i].style.top = THUMBNAIL_REGION_TOP;
thumbnail[i].style.left = thumbnailAreaLeft + THUMBNAIL_X_SPACING * i;
/*
thumbnailCaption[i].style.position = "absolute";
thumbnailCaption[i].style.left = thumbnailAreaLeft + THUMBNAIL_X_SPACING * i + thumbnailCaption[i].rightShift;
thumbnailCaption[i].style.top = THUMBNAIL_REGION_TOP + THUMBNAIL_SIZE + 7;
*/
}
titles.style.top = THUMBNAIL_REGION_TOP + THUMBNAIL_SIZE + 9;
titles.style.left = thumbnailAreaLeft;
initializeStackEffectElementPositions( 0 );
}//----------------------------------------------------------------------
//----------------------------------------------------------------------
function initializeStackEffectElementPositions( index )
{
currentStackEffectIndex = index;
var leftSide = thumbnailAreaLeft + THUMBNAIL_X_SPACING * index;
for (var z = 0; z< NUM_STACK_EFFECT_ELEMENTS; z++)
{
var iz = 1.0 - ( z / ( NUM_STACK_EFFECT_ELEMENTS - 1 ) );
//stackEffectElement[z].x = leftSide - STACK_EFFECT_MARGIN + iz * NUM_STACK_EFFECT_ELEMENTS * STACK_SIZE_SHIFT/2;
stackEffectElement[z].x = leftSide - STACK_EFFECT_MARGIN + iz * STACK_SIZE_SHIFT;
stackEffectElement[z].y = THUMBNAIL_REGION_TOP - STACK_EFFECT_MARGIN;
stackEffectElement[z].style.left = stackEffectElement[z].x;
stackEffectElement[z].style.top = stackEffectElement[z].y;
}
}//----------------------------------------------------------------------
//----------------------------------------------------------------------
function triggerStackEffectAnimation( index )
{
stackEffectAnimating = true;
stackEffectCounter = 0;
//---------------------------------------------------------------------
// put the stack effect elements into their start positions
//---------------------------------------------------------------------
initializeStackEffectElementPositions( index );
//---------------------------------------------------
// make the stack effect elements visible
//---------------------------------------------------
for (var z = 0; z< NUM_STACK_EFFECT_ELEMENTS; z++)
{
stackEffectElement[z].style.visibility = "visible";
}
//---------------------------------------------------
// start the animation timer
//---------------------------------------------------
thumbnailsTimer = setTimeout( "updateThumbnailsAnimation()", MILLISECONDS_PER_ANIMATION_STEP );
//---------------------------------------------------------------------------------------------------
// call this out to HistoryScroller - in case it doesn't catch the mouse out event....
//---------------------------------------------------------------------------------------------------
closeHistoryScroller();
}//----------------------------------------------------------------------
//----------------------------------------------------------------------
function hideStackEffectElements()
{
for (var z = 0; z< NUM_STACK_EFFECT_ELEMENTS; z++)
{
stackEffectElement[z].style.visibility = "hidden";
}
}//----------------------------------------------------------------------
//----------------------------------------------------------------------
function updateThumbnailsAnimation()
{
if ( stackEffectCounter < STACK_EFFECT_DURATION )
{
if ( stackEffectAnimating )
{
var wave = stackEffectCounter / STACK_EFFECT_DURATION;
wave = Math.sqrt( wave );
wave = Math.sqrt( wave );
var perspectiveShift = -1.0 + ( currentStackEffectIndex / ( NUM_THUMBNAILS - 1 ) ) * 2.0;
//perspectiveShift = 0;
for (var z = 0; z< NUM_STACK_EFFECT_ELEMENTS; z++)
{
var iz = 1.0 - ( z / ( NUM_STACK_EFFECT_ELEMENTS - 1 ) );
stackEffectElement[z].style.left = stackEffectElement[z].x - wave * iz * STACK_EFFECT_HORIZONTAL_STRETCH * perspectiveShift;
stackEffectElement[z].style.top = stackEffectElement[z].y - wave * iz * STACK_EFFECT_VERTICAL_STRETCH;
}
stackEffectCounter ++;
}
//------------------------------------------------------------
// reset the timer so it keeps on tickin'
//------------------------------------------------------------
thumbnailsTimer = setTimeout( "updateThumbnailsAnimation()", MILLISECONDS_PER_ANIMATION_STEP );
}
else
{
//------------------------------------------------------------
// stop the stack effect animation and cancel the timer
//------------------------------------------------------------
stackEffectAnimating = false;
stackEffectCounter = 0;
clearTimeout ( thumbnailsTimer );
}
//console.log( thumbnailsTimer, " ", stackEffectCounter );
}//----------------------------------------------------------------------