//----------------------------------------------------------------------
function HomePage()
{	
	var MARGIN 						= 40;
	var HEADER_WIDTH 				= 940;
	var TITLE_WIDTH 				= 400;
	var BOTTOM_WIDTH				= 500;
	var THUMBNAIL_REGION_WIDTH 		= 750;
	var THUMBNAIL_CAPTION_WIDTH 	= 600;
	var THUMBNAIL_SPACING			= 200;
	var THUMBNAIL_CAPTION_SPACING	= 180;
	var NUM_THUMBNAILS 				= 4;
	
	var body = document.getElementsByTagName( "body" )[0];

	var timer = 0;


	var thumbnail 			= [];
	var thumbnailCaption	= [];
	var thumbnailPage 		= [];
	var thumbnailImage 		= [];
	var thumbnailName 		= [];

	thumbnailPage[0] = "abstracts.html"
	thumbnailPage[1] = "figure.html"
	thumbnailPage[2] = "landscape.html"
	thumbnailPage[3] = "companions.html"
	
	thumbnailImage[0] = "CIMG1153_2.jpg"
	thumbnailImage[1] = "CIMG0094_3.jpg"
	thumbnailImage[2] = "CIMG1138_2.jpg"
	thumbnailImage[3] = "CIMG1189_2_2.jpg"

	thumbnailName[0] = "<a href = " + thumbnailPage[0] + " style = 'text-decoration:none'><font size=3 face='Cochin' color=#bb0000>a b s t r a c t s		</font></a>";
	thumbnailName[1] = "<a href = " + thumbnailPage[1] + " style = 'text-decoration:none'><font size=3 face='Cochin' color=#bb0000>f i g u r e			</font></a>";
	thumbnailName[2] = "<a href = " + thumbnailPage[2] + " style = 'text-decoration:none'><font size=3 face='Cochin' color=#bb0000>l a n d s c a p e		</font></a>";
	thumbnailName[3] = "<a href = " + thumbnailPage[3] + " style = 'text-decoration:none'><font size=3 face='Cochin' color=#bb0000>c o m p a n i o n s	</font></a>";


	//-------------------------------------------------------------------------------
	// create the thumbnails and their captions
	//-------------------------------------------------------------------------------
	for (var i = 0; i<NUM_THUMBNAILS; i++)
	{
		thumbnail[i] = document.createElement( "div" );
		thumbnail[i].index = i;
		body.appendChild( thumbnail[i] );

		thumbnail[i].innerHTML
		= "<a href = " + thumbnailPage[ i ] + "><image src = images/" + thumbnailImage[i] + " border = 0></img></a>";

		thumbnail[i].style.position	= "absolute";
		thumbnail[i].style.top		= 350;
		thumbnail[i].style.left		= THUMBNAIL_SPACING * i;








		thumbnailCaption[i] = document.createElement( "div" );
		thumbnailCaption[i].index = i;
		body.appendChild( thumbnailCaption[i] );

		thumbnailCaption[i].innerHTML
		= thumbnailName[i];
		
		thumbnailCaption[i].style.position	= "absolute";
		thumbnailCaption[i].style.top		= 300;
		thumbnailCaption[i].style.left		= THUMBNAIL_SPACING * i;

	}

	var MILLISECONDS_PER_UPDATE = 30;
	
	
	headerImage = document.createElement( "div" );
	headerImage.style.position = "absolute";
	headerImage.style.left = 0;
	headerImage.style.top  = 20;
	headerImage.innerHTML 
	
	headerImage.innerHTML 
	= "<img src = 'images/CIMG1139.jpg' border = 0>"; 
	body.appendChild( headerImage );
	
	
	title = document.createElement( "div" );
	title.style.position = "absolute";
	title.style.left = 0;
	title.style.top  = 220;
	title.style.width  = TITLE_WIDTH;
	
	title.innerHTML 
	= "<nobr>"
/*
+ "<font size=6 face='times' color=#bb0000>"
*/

	
//color=#b21410; font-family: 'Cochin', 'Times New Roman', 
//'serif'; font-size: 36px; font-weight: normal; line-height: 49px; opacity: 1.00;	

+ "<font size = 6px face='Cochin' color=#b21410>"	
	
	+ "C h r i s t i n e &nbsp  &nbsp K i e r s t e a d"
	+ "<font>"	
	+ "</nobr>"; 
	
	body.appendChild( title );
	
	
	bottom = document.createElement( "div" );
	bottom.style.position = "absolute";
	bottom.style.left = 100;
	bottom.style.top  = 550;
	bottom.style.width  = BOTTOM_WIDTH;
	
	bottom.innerHTML 
	= "<div style='position: absolute; left: 10; top: 10; right: 10; width: 500; height: 22; border: 2px solid #440000;'>"
	+ "<nobr>"
	+ "&nbsp"
	+ "&nbsp"
	+ "&nbsp"
	+ "<a href='http://www.riverfrontartgallery.com'   style = 'text-decoration:none'>"
	+ "<font size=2 face='Cochin' color=#bbbbbb>"
	+ "r i v e r f r o n t &nbsp&nbsp&nbsp a r t &nbsp&nbsp&nbsp g a l l e r y"
	+ "</font>"
	+ "</a>"
	+ "&nbsp"
	+ "&nbsp"
	+ "&nbsp"
	+ "&nbsp"
	+ "&nbsp"
	+ "&nbsp"
	+ "<a href='contact.html'   style = 'text-decoration:none'>"
	+ "<font size=2 face='Cochin' color=#bbbbbb>"
	+ "c o n t a c t"
	+ "</font>"
	+ "</a>"
	+ "&nbsp"
	+ "&nbsp"
	+ "&nbsp"
	+ "&nbsp"
	+ "&nbsp"
	+ "&nbsp"
	+ "<a href='bio.html'   style = 'text-decoration:none'>"
	+ "<font size=2 face='Cochin' color=#bbbbbb>"
	+ "if&nbsp&nbsp y o u &nbsp&nbsp m u s t &nbsp&nbsp k n o w &nbsp&nbsp b i o"
	+ "</font>"
	+ "</a>"
	+ "</nobr>" 
	+ "<br>"
	+ "<br>"
	+ "<br>"
	+ "<br>"
	+ "<br>"
	+ "<center>"
	+ "<font size=2 face='Cochin' color=#888888>"
	+ "copyright 2011, Chris Kierstead"
	+ "</font>"
	+ "<br>"
	+ "<br>"
	+ "<br>"
	+ "<br>"
	+ "</center>";
	+ "</div>";

					
	body.appendChild( bottom );
	
	
	//-------------------------------------------------------------------------------------------
	this.resize = function( width, height )
	{
		//--------------------------------------------
		// header
		//--------------------------------------------
		if ( width > HEADER_WIDTH + MARGIN )
		{
			headerImage.style.left 	= ( width / 2 ) - ( HEADER_WIDTH / 2 );
		}
		else
		{
			headerImage.style.left 	= MARGIN / 2;
		}

		//--------------------------------------------
		// title
		//--------------------------------------------
		if ( width > TITLE_WIDTH + ( HEADER_WIDTH - TITLE_WIDTH ) + MARGIN )
		{
			title.style.left = ( width / 2 ) - ( TITLE_WIDTH / 2 ) ;
		}
		else
		{
			title.style.left = (HEADER_WIDTH - TITLE_WIDTH) / 2 + MARGIN / 2;
		}
		
		//--------------------------------------------
		// thumbnails
		//--------------------------------------------
		var tLeft = 0.0;
		if ( width > THUMBNAIL_REGION_WIDTH + ( HEADER_WIDTH - THUMBNAIL_REGION_WIDTH ) + MARGIN )
		{
			tLeft = ( width / 2 ) - ( THUMBNAIL_REGION_WIDTH / 2 );
		}
		else
		{
			tLeft = ( HEADER_WIDTH - THUMBNAIL_REGION_WIDTH ) / 2  + MARGIN / 2;
		}

		for (var i = 0; i< NUM_THUMBNAILS; i++)
		{
			thumbnail[i].style.left = tLeft + THUMBNAIL_SPACING * i;
		}		
		
		//--------------------------------------------
		// thumbnail captions
		//--------------------------------------------
		var tLeft = 0.0;
		if ( width > THUMBNAIL_CAPTION_WIDTH + ( HEADER_WIDTH - THUMBNAIL_CAPTION_WIDTH ) + MARGIN )
		{
			tLeft = ( width / 2 ) - ( THUMBNAIL_CAPTION_WIDTH / 2 );
		}
		else
		{
			tLeft = ( HEADER_WIDTH - THUMBNAIL_CAPTION_WIDTH ) / 2  + MARGIN / 2;
		}

		for (var i = 0; i< NUM_THUMBNAILS; i++)
		{
			thumbnailCaption[i].style.left = tLeft + THUMBNAIL_CAPTION_SPACING * i;
		}		
		
		//--------------------------------------------
		// bottom
		//--------------------------------------------
		if ( width > BOTTOM_WIDTH + ( HEADER_WIDTH - BOTTOM_WIDTH ) + MARGIN )
		{
			bottom.style.left = ( width / 2 ) - ( BOTTOM_WIDTH / 2 ) ;
		}
		else
		{
			bottom.style.left = (HEADER_WIDTH - BOTTOM_WIDTH) / 2 + MARGIN / 2;
		}
		

	};//----------------------------------------------


	//-------------------------------------------------------------------------------------------
	this.mouseDown = function( x, y )
	{
		
	};//----------------------------------------------
	
	//-------------------------------------------------------------------------------------------
	this.mouseMove = function( x, y )
	{
	};//----------------------------------------------
	
	
	//-------------------------------------------------------------------------------------------
	this.mouseUp = function( x, y )
	{
	};//----------------------------------------------


	


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


//--------------------------------------------------------
// detect mouse events using jquery
//--------------------------------------------------------

jQuery( document ).ready
(
	function()
	{
		$().mousemove
		(
			function(e)
			{
				homePage.mouseMove( e.pageX, e.pageY );
			}
		); 
		$().mousedown
		(
			function(e)
			{
				homePage.mouseDown( e.pageX, e.pageY );
			}
		); 
		$().mouseup
		(
			function(e)
			{
				homePage.mouseUp( e.pageX, e.pageY );
			}
		); 
	}
);