/* ---------------------------------------------------------------------

   image-text.js
   
   --------------------------------------------------------------------- */


/* ---------------------------------------------------------------------

   By Christopher Gronbeck, christopher@susdesign.com, September 2009
   
   --------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   DOCUMENTATION
   ---------------------------------------------------------------------


===================
Purpose
===================

Allows specific images to have text dynamically placed on top of them (horizontal images) or beside them (vertical images).


===================
Required Files
===================

 - javascript/image-text.js
 - javascript/rollover-custom.js
 - javascript/misc.js

 - image-text.css
 
 - HTML file with specific DIVs
 
 
===================
HTML File Set-Up
===================

 - The above JavaScript and CSS files must be included
 
 - The requirements specified in the documentation of the rollover-custom.js file must be met
 
 - The main image table cell in the HTML file must be as follows (replace 'personal' in the image source with the appropriate section name):


<TD>

	<div id="mainImage">
	
		<div id="mainImagePhoto">
	
			<A HREF="javascript:MainImageClick();"><img name="showpic" src="images/personal/img1.jpg" border=0></a>

		</div>
		
		<div id="horizontalText" class="imageText"></div>

		<div id="verticalText" class="imageText"></div>
	
	</div>
	
	<br>
	<br>
	
</TD>


Note that the main image no long has the 'Main' class, since that included an undesired bottom margin.

 
===================
Image Text Set-Up
===================

In the section 'image text for personal images' below, there should be one subsection per image with text.  Each subsection should be as follows:


		// ---------------------------------------------
		// image 2
		// ---------------------------------------------

			// create array
			
		var imageText_personal_2 = new Array ();
		
			// image text data
			
		imageText_personal_2['textDiv'] = 'horizontalText';
		imageText_personal_2['text'] = "This is my first line of text... some more text...even more text<br>Would you like to <a href='http://susdesign.com' target='susdesign' class='imageText'>visit my web site</a>?<br>It's all weird 'n' art deco 'n' shit...I'm not sure what has to do with renewable energy, but there you go...";
	
			// add image to section array
			
		imageText_personal[2] = imageText_personal_2;


Notes:

 - replace "2" with the appropriate image number
 
 - the 'textDiv' specification should be set to 'horizontalText' or 'verticalText' as appropriate
 
 - all links should have a class of 'imageText'
 
 - the image-text.css file can be used to style image text
 
 - if sections other than 'personal' are to be added, copy the 'image text for personal images' section and replace references to 'personal' with references to the new section;  also update the 'create main image text array' section at the bottom to include the new section
 

   --------------------------------------------------------------------- */


	/////////////////////////////////////////////////////////
	//
	//  image text div tracker
	//
	/////////////////////////////////////////////////////////
	
 		var currentImageTextDiv = '';
 		

	/////////////////////////////////////////////////////////
	//
	//  image text for personal images
	//
	/////////////////////////////////////////////////////////
	
		// ---------------------------------------------
		// create personal image array
		// ---------------------------------------------
 
		var imageText_personal = new Array ();


		// ---------------------------------------------
		// image 1
		// ---------------------------------------------

			// create array
			
		var imageText_personal_1 = new Array ();
		
			// image text data
			
		imageText_personal_1['textDiv'] = 'horizontalText';
		imageText_personal_1['text'] = "<B>god bless america</B><br>roadside marquis following the terrorist attacks of september 11, 2001<BR>slideshow: <a href='http://www.lizlinder.com/godblessamerica' target='_blank' class='imageText'>god bless america</a>";
	
			// add image to section array
			
		imageText_personal[1] = imageText_personal_1;




		// ---------------------------------------------
		// image 2
		// ---------------------------------------------

			// create array
			
		var imageText_personal_2 = new Array ();
		
			// image text data
			
		imageText_personal_2['textDiv'] = 'horizontalText';
		imageText_personal_2['text'] = "<B>trace memory</B><br>social documentary work chronicling alzheimer's disease and familial relationship";
	
			// add image to section array
			
		imageText_personal[2] = imageText_personal_2;



		// ---------------------------------------------
		// image 6
		// ---------------------------------------------

			// create array
			
		var imageText_personal_6 = new Array ();
		
			// image text data
			
		imageText_personal_6['textDiv'] = 'verticalText';
		imageText_personal_6['text'] = "<B>small bodies of water</B><br>ongoing series of self portraits initiated in 2008";
	
			// add image to section array
			
		imageText_personal[6] = imageText_personal_6;


		// ---------------------------------------------
		// image 9
		// ---------------------------------------------

			// create array
			
		var imageText_personal_9 = new Array ();
		
			// image text data
			
		imageText_personal_9['textDiv'] = 'verticalText';
		imageText_personal_9['text'] = "<B>moving still</B><br>a study of human bodies in motion, presented in collaboration with the <a href='http://www.bennettdancecompany.org' target='_blank' class='imageText'>bennett dance company</a>";
	
			// add image to section array
			
		imageText_personal[9] = imageText_personal_9;


		
		// ---------------------------------------------
		// image 13
		// ---------------------------------------------

			// create array
			
		var imageText_personal_13 = new Array ();
		
			// image text data
			
		imageText_personal_13['textDiv'] = 'horizontalText';
		imageText_personal_13['text'] = "<B>product placement</B><BR>images that explore the relationship between trash and advertising<br>view <a href='http://www.lizlinder.com/refuse' target='_blank' class='imageText'>calendar</a>";
	
			// add image to section array
			
		imageText_personal[13] = imageText_personal_13;


	/////////////////////////////////////////////////////////
	//
	//  create main image text array
	//
	/////////////////////////////////////////////////////////
	
		var imageText = new Array ();
		
		imageText['personal'] = imageText_personal;