//----------------------------------------------------------------------------------------
//
//  Archive.js
//
//----------------------------------------------------------------------------------------


//-------------------------------------------------
// include the required JavaScripts....
//-------------------------------------------------
var head = document.getElementsByTagName('head')[0];	

script = document.createElement('script');
script.src = 'jquery.js';
script.type = 'text/javascript';
head.appendChild(script)

script = document.createElement('script');
script.src = 'MediaTypes.js';
script.type = 'text/javascript';
head.appendChild(script)


script = document.createElement('script');
script.src = 'BottomLinks.js';
script.type = 'text/javascript';
head.appendChild(script)



//----------------------------------------------------------
// attributes for various components 
//----------------------------------------------------------
var COLLECTIONS_AREA_WIDTH		= 700;
var COLLECTIONS_AREA_HEIGHT		= 350;
var COLLECTIONS_AREA_TOP		= 220;
var BOTTOM_LINKS_WIDTH			= 700;
//var MINIMUM_CENTER_X			= 610;
var MINIMUM_CENTER_X			= COLLECTIONS_AREA_WIDTH / 2 + 20;
var SHARE_AREA_WIDTH			= 350;
var MARGIN						= 20;
var SIDE_PANEL_WIDTH			= 180;
var INFO_AREA_WIDTH				= 230;
var PANEL_BACKGROUND_COLOR		= '#eeeae5';
var PANEL_BORDER_COLOR			= '#bbbbbb';

//--------------------------------------
// DOM elements
//--------------------------------------
var shareArea				= null;
var collectionsBackground	= null;
var wayBackTitle			= null;
var wayBackMetrics			= null;
var openLibraryMetrics		= null;
var archiveitMetrics		= null;
var NASAMetrics				= null;
var wayBackArea				= null;
var openLibrary				= null;
var archiveIt				= null;
var NASA					= null;
var newsArea				= null;
var contributorArea			= null;
var infoArea				= null;
var originalFlavor			= null;
var note					= null;
var bottomLinks				= null;


var includeInfoArea	= false;

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

	//-----------------------------------------------------------
	// collections background
	//-----------------------------------------------------------
	collectionsBackground = document.createElement( "div" );
	collectionsBackground.style.position = "absolute";
	collectionsBackground.style.top  = COLLECTIONS_AREA_TOP;
	collectionsBackground.style.left = 0; // this gets set elsewhere
	collectionsBackground.style.width = COLLECTIONS_AREA_WIDTH;	
	collectionsBackground.style.height = COLLECTIONS_AREA_HEIGHT;	
	collectionsBackground.style.backgroundColor = PANEL_BACKGROUND_COLOR;	
	collectionsBackground.style.borderLeft		= '1px solid ' + PANEL_BORDER_COLOR;
	collectionsBackground.style.borderTop		= '1px solid ' + PANEL_BORDER_COLOR;
	collectionsBackground.style.borderRight		= '2px solid ' + PANEL_BORDER_COLOR;
	collectionsBackground.style.borderBottom	= '2px solid ' + PANEL_BORDER_COLOR;

	body.appendChild( collectionsBackground );

	//-----------------------------------------------------------
	// way back title
	//-----------------------------------------------------------
	wayBackTitle = document.createElement( "div" );
	wayBackTitle.style.position = "absolute";
	wayBackTitle.style.top  = COLLECTIONS_AREA_TOP + 30;
	wayBackTitle.style.left = 0; // this gets set elsewhere
	wayBackTitle.style.width = 130;
	wayBackTitle.style.height = 40;
	wayBackTitle.style.backgroundImage = 'url( wayback.png )';
	wayBackTitle.innerHTML = "<a href = 'http://www.archive.org/web/web.php'><img src = waybackInvisibleImage.png border = 0></a>";
	$( wayBackTitle ).mouseover	( function(e) { mouseOverWayback(); } );
	$( wayBackTitle ).mouseout	( function(e) { mouseOutWayback(); } );
	body.appendChild( wayBackTitle );

	//-----------------------------------------------------------
	// way back metrics
	//-----------------------------------------------------------
	wayBackMetrics = document.createElement( "div" );
	wayBackMetrics.style.position = "absolute";
	wayBackMetrics.style.top  = COLLECTIONS_AREA_TOP + 15;
	wayBackMetrics.style.left = 0; // this gets set elsewhere
	wayBackMetrics.style.visibility = 'hidden';
	wayBackMetrics.innerHTML = "<font size = 1 face='arial' color = #333333 >85 Billion Web Pages</font>";
	body.appendChild( wayBackMetrics );


	//-----------------------------------------------------------
	// Open Library metrics
	//-----------------------------------------------------------
	openLibraryMetrics = document.createElement( "div" );
	openLibraryMetrics.style.position = "absolute";
	openLibraryMetrics.style.top  = COLLECTIONS_AREA_TOP + 20;
	openLibraryMetrics.style.left = 0; // this gets set elsewhere
	openLibraryMetrics.style.visibility = 'hidden';
	openLibraryMetrics.innerHTML = "<font size = 1 face='arial' color = #333333 >Over a Million<br>Scanned Books</font>";
	body.appendChild( openLibraryMetrics );


	//-----------------------------------------------------------
	// Archive It metrics
	//-----------------------------------------------------------
	archiveitMetrics = document.createElement( "div" );
	archiveitMetrics.style.position = "absolute";
	archiveitMetrics.style.top  = COLLECTIONS_AREA_TOP + 10;
	archiveitMetrics.style.left = 0; // this gets set elsewhere
	archiveitMetrics.style.visibility = 'hidden';
	archiveitMetrics.innerHTML = "<font size = 1 face='arial' color = #333333 >777 Collections<br>Archived by<br>our Partners</font>";
	body.appendChild( archiveitMetrics );



	//-----------------------------------------------------------
	// NASA metrics
	//-----------------------------------------------------------
	NASAMetrics = document.createElement( "div" );
	NASAMetrics.style.position = "absolute";
	NASAMetrics.style.top  = COLLECTIONS_AREA_TOP + 20;
	NASAMetrics.style.left = 0; // this gets set elsewhere
	NASAMetrics.style.visibility = 'hidden';
	NASAMetrics.innerHTML = "<font size = 1 face='arial' color = #333333 >High Res Images<br>and Videos</font>";
	body.appendChild( NASAMetrics );





	//-----------------------------------------------------------
	// way back area
	//-----------------------------------------------------------
	wayBackArea = document.createElement( "div" );
	wayBackArea.style.position = "absolute";
	wayBackArea.style.top  = COLLECTIONS_AREA_TOP + 70;
	wayBackArea.style.left = 0; // this gets set elsewhere
	wayBackArea.innerHTML 
	= 
	"	<font size = 1 face='arial' color = #333333 >											\
		Visit Web Sites from the Past															\
		<br>																					\
	</font>																						\
	<nobr>																						\
	<form																						\
		style	= 'margin:0; padding:0;'														\
		action	= 'http://www.archive.org/searchresults.php'									\
		id		= 'searchform'																	\
		method	= 'post'																		\
	>																							\
	<p style='margin:0;padding:0;'>																\
		<input tabindex='1' size='25' name='search' value='http://' style='font-size: 10pt'/>	\
		<input name = b1 type = submit value = 'Take Me Back'>									\
		<input type='hidden' name='limit' value='100'/>											\
		<input type='hidden' name='start' value='0'/>											\
		<input type='hidden' name='searchAll' value='yes'/>										\
		<input type='hidden' name='submit' value='this was submitted'/>							\
	</p>																						\
	</form>																						\
	</nobr>																						\
	<font size = 1 face='arial' color = #333333 >												\
		<a href = 'http://web.archive.org/collections/web/advanced.html'>Advanced Search</a>	\
	</font>";
	
	body.appendChild( wayBackArea );
	

	//-----------------------------------------------------------
	// Open Library
	//-----------------------------------------------------------
	openLibrary = document.createElement( "div" );
	openLibrary.style.position = "absolute";
	openLibrary.style.top  = COLLECTIONS_AREA_TOP + 50;
	openLibrary.style.left = 0; // this gets set elsewhere
	openLibrary.innerHTML = "<a href = 'http://www.openlibrary.org' target = 'blank' ><img src = 'open_library.png' border = 0></a>";		
	$( openLibrary ).mouseover	( function(e) { mouseOverOpenLibrary(); } );
	$( openLibrary ).mouseout	( function(e) { mouseOutOpenLibrary(); } );
	body.appendChild( openLibrary );
	
	//-----------------------------------------------------------
	// NASA
	//-----------------------------------------------------------
	NASA = document.createElement( "div" );
	NASA.style.position = "absolute";
	NASA.style.top  = COLLECTIONS_AREA_TOP + 50;
	NASA.style.left = 0; // this gets set elsewhere
	NASA.innerHTML = "<a href = 'http://www.nasaimages.org' target = 'blank' ><img src = 'nasa_images.png' border = 0></a>";
	$( NASA ).mouseover( function(e) { mouseOverNASA(); } );
	$( NASA ).mouseout	( function(e) { mouseOutNASA(); } );
	body.appendChild( NASA );
	
	//-----------------------------------------------------------
	// archiveIt
	//-----------------------------------------------------------
	archiveIt = document.createElement( "div" );
	archiveIt.style.position = "absolute";
	archiveIt.style.top  = COLLECTIONS_AREA_TOP + 50;
	archiveIt.style.left = 0; // this gets set elsewhere
	archiveIt.innerHTML = "<a href = 'http://www.archive-it.org/' target = 'blank' ><img src = 'archive_it.png' border = 0></a>";
	$( archiveIt ).mouseover( function(e) { mouseOverArchiveIt(); } );
	$( archiveIt ).mouseout	( function(e) { mouseOutArchiveIt(); } );
	body.appendChild( archiveIt );
	
	
	//-----------------------------------------------------------
	// original flavor
	//-----------------------------------------------------------
	originalFlavor = document.createElement( "div" );
	originalFlavor.style.position	= "absolute";
	originalFlavor.style.top		= 100;
	originalFlavor.style.left		= 12;
	originalFlavor.innerHTML		
	= "<a href=http://www.archive.org><img src = old_logo.png border = 0></a>";
	
	body.appendChild( originalFlavor );

	
	//-----------------------------------------------------------
	// note about this interface
	//-----------------------------------------------------------
	note = document.createElement( "div" );
	note.style.position	= "absolute";
	note.style.top		= 77;
	note.style.left		= 12;
	note.innerHTML		
	= "<font size = 2 face='arial' color = #777777 >"
	+ "This is an alternate interface to the Internet Archive being developed by <a href= 'http://www.ventrella.com' target = 'blank' >Jeffrey Ventrella</a>. "
	+ "Please send any feedback you have to <a href= 'http://www.archive.org/about/contact.php' target = 'blank' >the Archive</a>."
	+ "</font>";
	
	body.appendChild( note );
	
	
	if ( includeInfoArea )
	{
	//-----------------------------------------------------------
	// info area
	//-----------------------------------------------------------
	infoArea = document.createElement( "div" );
	infoArea.style.position = "absolute";
	infoArea.style.top			= 75;
	infoArea.style.bottom		= 10;
	infoArea.style.left			= 10;
	infoArea.style.width		= INFO_AREA_WIDTH + 'px';
	infoArea.style.borderLeft	= '1px solid ' + PANEL_BORDER_COLOR;
	infoArea.style.borderTop	= '1px solid ' + PANEL_BORDER_COLOR;
	infoArea.style.borderRight	= '2px solid ' + PANEL_BORDER_COLOR;
	infoArea.style.borderBottom	= '2px solid ' + PANEL_BORDER_COLOR;	
	infoArea.style.backgroundColor = PANEL_BACKGROUND_COLOR;	
	
	infoArea.innerHTML 
	= "\
	<div style='position: absolute; left: 15; top: 10; right: 0; width: 200; ' >\
		<a href=http://www.archive.org><img src = old_logo.png border = 0></a>\
		<br>\
		<br>\
		<img src = 'announcements.png'>\
		<font size = 2 face='arial' color = #777777 >\
			<br>\
			<br>\
			<a href=http://www.archive.org/iathreads/post-view.php?id=238517>New Archive Datacenter with Sun</a>\
			<br>\
			Today the Internet Archive and Sun Microsystems are launching \
			a new datacenter that stores the whole web archive and serves the Wayback Machine... \
			<a href=http://www.archive.org/iathreads/post-view.php?id=238517>(more...)</a>\
			<br>\
			<br>\
			<a href=http://www.archive.org/iathreads/post-view.php?id=230877>Yiddish literature goes online</a>\
			<br>\
			Over ten thousand Yiddish texts, estimated as over 1/2 of all the published works in Yiddish, are \
			now online based on the work of the National Yiddish Book... \
			<a href=http://www.archive.org/iathreads/post-view.php?id=238517>(more...)</a>\
			<br>\
			<br>\
			<a href=http://www.archive.org/iathreads/post-view.php?id=222406>End of Year Message from the Internet Archive</a>\
			<br>\
			Dear Friends of the Archive, I hope this letter finds you in good health and spirits. \
			The Internet Archive is strong and...\
			<a href=http://www.archive.org/iathreads/post-view.php?id=238517>(more...)</a>\
			<br>\
			<br>\
			<a href=http://www.archive.org/iathreads/forum-display.php?forum=announcements>(see All Announcements)...</a><br/>\
		</font>\
	</div>";

	body.appendChild( infoArea );
	}

	//-----------------------------------------------------------
	// bottomLinks
	//-----------------------------------------------------------
	bottomLinks = document.createElement( "div" );
	bottomLinks.style.position	= "absolute";
	bottomLinks.style.top		= COLLECTIONS_AREA_TOP + COLLECTIONS_AREA_HEIGHT + 15;
	bottomLinks.style.left		= 0; // this gets set elsewhere
	bottomLinks.style.width		= BOTTOM_LINKS_WIDTH;
	
	// note: the following string is defined in the file "BottomLinks.js"
	bottomLinks.innerHTML = bottomLinksHTML;
	
	body.appendChild( bottomLinks );

	//----------------------------------------------------------------------------
	// the following function is defined in "MediaTypes.js"
	//----------------------------------------------------------------------------
	initializeMediaTypes( body );

	//-----------------------------------------------------------------------------------------------------
	// this is necessary to get things positioned right (this also gets invoked when the user resizes the window)
	//-----------------------------------------------------------------------------------------------------
	arrangeElementsAccordingToBrowserWidthAndHeight();

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




//----------------------------------------------------------------------
function ResizeArchive()
{
	arrangeElementsAccordingToBrowserWidthAndHeight();

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


//----------------------------------------------------------------------
function mouseOverWayback()
{
	wayBackTitle.style.backgroundImage = 'url( waybackRollover.png )';
	wayBackMetrics.style.visibility = 'visible';
}

function mouseOutWayback()
{
	wayBackTitle.style.backgroundImage = 'url( wayback.png )';
	wayBackMetrics.style.visibility = 'hidden';
}

function mouseOverOpenLibrary()
{
	openLibraryMetrics.style.visibility = 'visible';
}

function mouseOutOpenLibrary()
{
	openLibraryMetrics.style.visibility = 'hidden';
}

function mouseOverArchiveIt()
{
	archiveitMetrics.style.visibility = 'visible';
}

function mouseOutArchiveIt()
{
	archiveitMetrics.style.visibility = 'hidden';
}

function mouseOverNASA()
{
	NASAMetrics.style.visibility = 'visible';
}

function mouseOutNASA()
{
	NASAMetrics.style.visibility = 'hidden';
}

//----------------------------------------------------------------------
function arrangeElementsAccordingToBrowserWidthAndHeight()
{
	var browserWidth = document.body.clientWidth;
	
	var centerX = browserWidth / 2;
	
	if ( includeInfoArea )
	{
		centerX = INFO_AREA_WIDTH + ( browserWidth - INFO_AREA_WIDTH ) / 2;
	}
	
	if ( centerX < MINIMUM_CENTER_X )
	{
		centerX = MINIMUM_CENTER_X;
	}
	
//shareArea.style.left		= centerX - SHARE_AREA_WIDTH 		/ 2;
	bottomLinks.style.left		= centerX - BOTTOM_LINKS_WIDTH		/ 2;
	var collectionsAreaLeft		= centerX - COLLECTIONS_AREA_WIDTH 	/ 2;
	var collectionsAreaRight	= centerX + COLLECTIONS_AREA_WIDTH 	/ 2;
	
	collectionsBackground.style.left	= collectionsAreaLeft;
	wayBackTitle.style.left				= collectionsAreaLeft	+ MARGIN;
	wayBackMetrics.style.left			= collectionsAreaLeft	+ MARGIN;
	wayBackArea.style.left				= collectionsAreaLeft	+ MARGIN;
	openLibrary.style.left				= collectionsAreaRight	- 300;
	openLibraryMetrics.style.left		= collectionsAreaRight	- 295;
	NASA.style.left						= collectionsAreaRight	- 190;
	NASAMetrics.style.left				= collectionsAreaRight	- 190;
	archiveIt.style.left				= collectionsAreaRight	- 75;
	archiveitMetrics.style.left			= collectionsAreaRight	- 75;
	
	//--------------------------------------------------------------
	// the following function is defined in "MediaTypes.js"
	//--------------------------------------------------------------
	setPositionOfMediaTypes( COLLECTIONS_AREA_TOP + 130, centerX, MINIMUM_CENTER_X );

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