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

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

//---------------------------------
// constants
//---------------------------------
var MAIN_TITLE_TOP					= 100;
var COLLECTIONS_AREA_TOP			= 150;
var COLLECTIONS_AREA_WIDTH			= 150;
var COLLECTIONS_AREA_SPACING		= 75;
var COLLECTIONS_X_SHIFT				= -300;
var OTHER_COLLECTIONS_X_SHIFT		= -100;
var OTHER_COLLECTION_SPACING		= 30;
var MARGIN							= 40;

//---------------------------------
// DOM Elements
//---------------------------------
//var title					= null;
var collection				= [];
var collectionTitle			= [];
var otherCollections		= null;
var otherCollectionsTitle	= null;
var bottomLinks				= null;

//----------------------------------------------------------------------
function InitializeCollections()
{
	var firstName = NASACollections.mainTitle;

	var body = document.getElementsByTagName( "body" )[0];

	//-----------------------------------------------------------
	// bottom links
	//-----------------------------------------------------------
	bottomLinks = document.createElement( "div" );
	bottomLinks.style.position = "absolute";
	bottomLinks.style.top  = 0;
	bottomLinks.style.left = 0;
	bottomLinks.innerHTML 
	= "<div style='position: absolute; width: 100%'>"
	+ "<div style='width: 700px; margin-left: auto; margin-right: auto;'>"
	+ "<iframe style='background: black' marginheight='0px' marginwidth='0px' frameborder='0' width='700px' scrolling='no' src='../footer_inc.html'><p>This browser does not support iframes.</p></iframe>"
	+ "</div>"
	+ "</div>";
				
	body.appendChild( bottomLinks );
	

	//-----------------------------------------------------------
	// collections
	//-----------------------------------------------------------
	for ( var i=0; i< NASACollections.numCollections; i++)
	{
		collection[i] = document.createElement( "div" );
		collection[i].style.position = "absolute";
		collection[i].style.top  = 180 + (i * 90) + 40; // to be set later
		collection[i].style.left = ABOUT_AREA_LEFT;
		collection[i].innerHTML 
		= "<a href = "
		+ NASACollections.collection[i].url 
		+ ">"
		+ "<img src = "
		+ NASACollections.collection[i].image
		+ " border = 0></a>";
		
		body.appendChild( collection[i] );
	}
	
	//-----------------------------------------------------------
	// other collections title
	//-----------------------------------------------------------
	otherCollectionsTitle = document.createElement( "div" );
	otherCollectionsTitle.style.position = "absolute";
	otherCollectionsTitle.style.top = COLLECTIONS_AREA_TOP;
	otherCollectionsTitle.style.left = ABOUT_AREA_LEFT;
	otherCollectionsTitle.innerHTML = "<font size = 5 face='arial' color = #aaaaaa>" + NASACollections.otherTitle + "</font><br>";
	body.appendChild( otherCollectionsTitle );


	//-----------------------------------------------------------
	// other collections
	//-----------------------------------------------------------
	otherCollections = document.createElement( "div" );
	otherCollections.style.position = "absolute";
	otherCollections.style.width = "375px";
	otherCollections.style.bottom = "200px";
	otherCollections.style.height = "200px";
	otherCollections.style.left = ABOUT_AREA_LEFT+110;	//"500px";
	otherCollections.style.top = COLLECTIONS_AREA_TOP + MARGIN + 30;
	otherCollections.style.overflow = 'auto';     
	otherCollections.style.backgroundColor = '#20282f';
	otherCollections.style.border = '2px solid #666666';
	otherCollections.innerHTML = ""; // try tinkering to fix IE8 was: start with nothing - stuff gets added below.


	var fontColor = "#aa9966";

	for ( var i=0; i< NASACollections.numOtherCollections; i++)
	{
		if ( i < NASACollections.numNEWOtherCollections )
		{
			fontColor = "#aa9966";
		}
		else
		{
			fontColor = "#8899aa";
		}3
		
		otherCollections.innerHTML 
		+= "<br>&nbsp;&nbsp;&nbsp;"
	
		
		+ "<a href = "
		+ NASACollections.otherCollection[i].url 
		+ " >"
		+ "<font size = 2 face='arial' color = " + fontColor + ">"
		+ NASACollections.otherCollection[i].name
		+ "<br></font></a>";
		
		if ( i == ( NASACollections.numNEWOtherCollections - 1 ) )
		{
			otherCollections.innerHTML += "<br>&nbsp;&nbsp;&nbsp;"
		}
	}
	
	otherCollections.innerHTML 
	+= "<br><br><br>";
	//alert(otherCollections.innerHTML);
	body.appendChild( otherCollections );

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

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




//----------------------------------------------------------------------
function ResizeCollections()
{
	//alert("Resize collections");
	arrangeCollectionElementsAccordingToBrowserWidthAndHeight();

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




//----------------------------------------------------------------------
function arrangeCollectionElementsAccordingToBrowserWidthAndHeight()
{
	browserWidth	= document.body.clientWidth;
	browserHeight	= document.body.clientHeight;

	var centerX = browserWidth / 2;
	var specialCollectionsLeft = centerX + COLLECTIONS_X_SHIFT;
	var specialCollectionsTop  = COLLECTIONS_AREA_TOP + MARGIN + 40;
	
	var otherCollectionsLeft = centerX + OTHER_COLLECTIONS_X_SHIFT;
	bottomLinks.style.left = centerX - 350;

	var whichBrowser = navigator.appName;
	//alert( "Browser name is '" + whichBrowser + "'." );

	if ( whichBrowser == "Microsoft Internet Explorer" )
	{
		//specialCollectionsLeft = 200;
		//otherCollectionsLeft = 400;	
		bottomLinks.innerHTML = "";
	}

	otherCollectionsTitle.style.left = otherCollectionsLeft;	
	otherCollections.style.left = otherCollectionsLeft;	
	//document.write( "otherCollectionsLeft is '" + otherCollectionsLeft + "'." );
	//document.write( "specialCollectionsLeft is '" + specialCollectionsLeft + "'." );
	bottomLinks.style.top  = browserHeight - 140;

	//title.style.left = specialCollectionsLeft;
	var num = NASACollections.numCollections;
	for ( var i=0; i<num; i++)
	{
		collection[i].style.left = specialCollectionsLeft;
		collection[i].style.top  = specialCollectionsTop + i * COLLECTIONS_AREA_SPACING;
	}

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