// <script type="text/javascript">
<!--  to hide script contents from old browsers

window.onload = init;

function init()
{
	display_urhere();
	setup_email();
	set_newWindow();
}

/**************************************************************************************************
This function sets up a link with class "emailOharaArts" to send email. Email address cannot be read
by spambots.
**************************************************************************************************/

function setup_email()
{
	var anchors = document.getElementsByTagName("a");
	if (anchors == null)
		return;
		
	var email_array = new Array();
	email_array['John'] = 'John';

	for (var name in email_array)
	{
		email_array[name] += "@" + 'JohnTrotterPhotography' + "." + 'com';
		//alert(class + '   ' + email_array[class]);
	}
	
	for (var i = 0; i < anchors.length; i++)
	{
		switch(anchors[i].className)
		{
			case "emailJohn":
			{
				anchors[i].onclick = function()
				{
					document.location.href = "mail" + "to:" + email_array['John'];
					return(false);
				}
				anchors[i].onmouseover = function()
				{
					this.firstChild.nodeValue = email_array['John'];
				}
				break;
			}
		}
	}
}

/**************************************************************************************************
This function alters the style of the navigation bar to indicate urhere.
I added code from the original to shorten the href string so that it does
not include any bookmarks (....#bookmark). Otherwise, the strings would not
match and the urhere formatting would not be applied.
**************************************************************************************************/

function display_urhere()
{	if (!document.getElementById)
	{	
		return;
	}

	var list = document.getElementById("navbar");
	if (!list)
		return;
		
	var page = list.getElementsByTagName("a");
	var currentHref = document.location.href;

	var anchorPosition = currentHref.indexOf("#");
	if (anchorPosition >= 0)
	{	currentHref = currentHref.substring(0, anchorPosition);
	}

	currentHref = getSimpleHref(currentHref);
	
	for (var i = 0; i < page.length; i++)
	{	var href = getSimpleHref(page[i].href)	

		if (href == 'index.html')
		{	var home_index = i;
		}

		// Highlight Portfolio in navbar for any portfolio.php or slideshow.php page
		var p = currentHref.indexOf('portfolio.php');
		var s = currentHref.indexOf('slideshow.php');
		
		// This is when url doesn't include the page. Highlight index.html
		if (href == currentHref || (currentHref.length == 0 && home_index >= 0) || (href == 'portfolio.php' && (p >= 0 || s >= 0)))
		{			
			if ((currentHref.length == 0) && (home_index >= 0))
			{	i = home_index;
			}
			
			page[i].style.backgroundColor = "#fff";
			page[i].style.color = "#564d52";	
/*			page[i].parentNode.style.backgroundColor = "#fff";	*/	// parentNode will be <li>

			break;
		}
	}
}

/******************************************************************************
This function was added because Mac Safari does not include the directory structure
before the href, so there was never a match. This function strips the beginning directory structure
away and just leaves the end part--such as about_us.htm
******************************************************************************/

function getSimpleHref(s)
{	var length;
	var anchorPosition = 0;	

	while (anchorPosition >= 0)
	{	anchorPosition = s.indexOf('/');
		length = s.length;

		if (anchorPosition >= 0)
		{	s = s.substring(anchorPosition + 1, length);
		}		
	}
	
	return(s);
}

/**************************************************************************************************
This function causes a new window to open for any link <a> that has class "newWindow".
Remember that if the specified element does not exist, getElementsByTagName returns a NodeList of
length 0.
**************************************************************************************************/

function set_newWindow()
{	
	var anchors = document.getElementsByTagName("a");

	for (var i = 0; i < anchors.length; i++)
	{	
		if (anchors[i].className == "newWindow")
		{
			anchors[i].onclick = function()
			{
				window.open(this.href); 
				return false;
			}
		}
	}
}

/******************************************************************************
Here's the start of the picture slide show.
/*****************************************************************************/

var folder = 'photos/portfolio_';	// Folders where images are kept
var IMAGES_PER_PAGE = 9;
var N_ROWS = 3;
var IMAGES_PER_ROW = 3;
var DIV_FACTOR = 4; 				// This is the number of elements per image
var current_image_number = 0;		// Global variable to indicate what image is currently displayed
var portfolio_number = 0;			// Global variable indicating portfolio number
var current_image_array = new Array;
var main_image = new Array();
var main_image_loaded = new Array();

/******************************************************************************
This array is the database for all the images in the slideshow portfolio.
The 1st parameter of each sub-array is the file name without the jpg extension.
The 2nd paramter is what should be displayed on the page under the image.
/*****************************************************************************/

var image_array = new Array(
		
	new Array(
	'image_841', 'Iris Study No 2', 'Tijeras, NM', '2005',
	'image_547', 'Goldfish', 'Tijeras, NM', '2005',
	'image_neg28', 'Cloud Study No 1', 'Tijeras, NM', '2004',
	'image_MONP', 'Moon Over Nanga Parbat', 'Northern Pakistan', '1995',
	'image_891', 'Sunflower Study No 1', 'Seattle, WA', '2005',
	'image_324', 'Bosque Study No 1', 'Bosque del Apache NWR, NM', '2004',
	'image_1620', 'Ocean Study No 1', 'Pt. Reyes, CA', '2006',
	'image_1775', 'Dry Flower Study No 1', 'Jemez Mtns, NM', '2006',
	'image_887', 'Orchid Study No 1', 'Tijeras, NM', '2005'
	),

	new Array(
	'image_2845', 'Dune Study No 1', 'Death Valley, CA', '2006',
	'image_818', 'Yucca Blooms', 'Tijeras, NM', '2005',
	'image_2831', 'Dune Study No 2', 'Death Valley, CA', '2006',
	'image_3112', 'Torreon Sky', 'Torreon, NM', '2007',
	'image_2803', 'Black Dunes No. 1', 'Death Valley, CA', '2006',
	'image_2386', 'Carrizozo Sky', 'Carrizozo, NM', '2006',
	'Image_PMGC', 'Mountain Clouds', 'Northern Pakistan', '1995',
	'image_2827', 'Dune Study No 3', 'Death Valley, CA', '2006',
	'image_838', 'Iris Study No 1', 'Tijeras, NM', '2005'
	),

	new Array(
	'image_2844', 'Dune Study No 4', 'Death Valley, CA', '2006',
	'image_2726', 'Dune Study No 5', 'Death Valley, CA', '2006',
	'image_2716', 'Dune Study No 6', 'Death Valley, CA', '2006',
	'image_2706', 'Dune Study No 7', 'Death Valley, CA', '2006',
	'image_2718', 'Dune Study No 8', 'Death Valley, CA', '2006',
	'image_2830', 'Dune Study No 9', 'Death Valley, CA', '2006',
	'image_2817', 'Dune Study No 10', 'Death Valley, CA', '2006',
	'image_2840', 'Dune Study No 11', 'Death Valley, CA', '2006',
	'image_2699', 'Dune Study No 12', 'Death Valley, CA', '2006'
	),

	new Array(
	'image_3985', 'Tree and Clouds', 'Haida Gwaii, B.C.', '2007',
	'image_3332', 'Sandia Sky', 'Sandia Mountains, NM', '2007',
	'image_3451', 'Cloud Study No 2', 'New Mexico', '2004',
	'image_colvillesky1', 'Colville Sky', 'Colville River, Arctic Alaska', '2003',
	'image_3595', 'Haida Gwaii Clouds', 'Haida Gwaii, B.C.', '2007',
	'image_05Mar25Neg17', 'Tijeras Sunset', 'Tijeras, NM', '2006',
	'image_426', 'Glacier Study No 1', 'Matanuska Glacier, AK', '2005',
	'image_moonfromplane', 'Moon Over Texas', 'Somewhere over Texas', '2002',
	'image_3377', 'Sandia Sunset', 'Sandia Mountains, NM', '2007'
	),

	new Array(
	'image_625DL3', 'Tree Study No 1', 'Haida Gwaii, B.C.', '2007',
	'image_5059', 'Dune Study No 13', 'Death Calley, CA', '2008',
	'image_3895', 'Tree Study No 2', 'Haida Gwaii, B.C.', '2007',
	'image_4891', 'Dune Study No 14', 'Death Valley, CA', '2008',
	'image_5349', 'Dune Study No 15', 'Death Valley, CA', '2008',
	'image_5330', 'Dune Study No 16', 'Death Valley, CA', '2008',
	'image_100DL3', 'Tree Study No 3', 'Tijeras, NM', '2007',
	'image_5326', 'Dune Study No 17', 'Death Valley, CA', '2008',
	'image_76DL3', 'Tree Study No 4', 'Tijeras, NM', '2007'
	),

	new Array(
	'image_5040', 'Dune Study No 18', 'Death Valley, CA', '2008',
	'image_5321', 'Dune Study No 19', 'Death Valley, CA', '2008',
	'image_5050', 'Dune Study No 20', 'Death Valley, CA', '2008',
	'image_5012', 'Dune Study No 21', 'Death Valley, CA', '2008',
	'image_5323', 'Dune Study No 22', 'Death Valley, CA', '2008',
	'image_5064', 'Dune Study No 23', 'Death Valley, CA', '2008',
	'image_5347', 'Dune Study No 24', 'Death Valley, CA', '2008',
	'image_5325', 'Dune Study No 25', 'Death Valley, CA', '2008',
	'image_4899', 'Dune Study No 26', 'Death Valley, CA', '2008'
	)
);
	
/*********************************************************************************
This function selects the appropriate sub array of index_array and whether to 
look for a cookie that indicates which image number to display first.
1st parameter is the name of the image series as specified in key_array.
2nd parameter is 1 or 0 whether to look for a cookie.
*********************************************************************************/

function setup_images(n)
{
	portfolio_number = n;
	current_image_array = image_array[portfolio_number];
	
	//alert("pn = " + portfolio_number + " cia = " + current_image_array);
	//alert("sizeof = " + current_image_array.length / DIV_FACTOR);
}

/******************************************************************************
This function displays thumbnail images of all the paintings in a series.
******************************************************************************/

function display_thumbnails()
{
	var offset;
	var image_file;

	//var array_index = current_image_array_index;

	// For some reason, this extra div fixes bug in IE5Mac. Bug is that after 1st row, the
	//  2nd and subsequent images in each row are shifted down a bit.
	document.writeln("\n" + '<table class="thumbnail-table">');

	for (var i = 0, index = 0; i < N_ROWS; i++)
	{	
		document.write("\n <tr> \n");     
		
	
		for (var j = 0; j < IMAGES_PER_ROW; j++)
		{
			document.write("<td>");     
	
			offset = index * DIV_FACTOR;
	
			image_file = current_image_array[offset];
			image_file = folder + portfolio_number + '/' + image_file + '_tn.jpg';

			image_name = current_image_array[offset + 1];
			place = current_image_array[offset + 2];
			year = current_image_array[offset + 3];
			
			document.write('<a href="slideshow.php?portfolio=' + portfolio_number + '&image=' + index + '" >');     
			document.write('<img id="tn' + index + '" ' + ' src="' + image_file + '"' + ' >');
			document.write('</a>');
			
			document.write("\n </td> \n");
			
			index++;
		}

		document.write("</tr> \n");     
		document.write("<tr> \n");   
		
		index -= IMAGES_PER_ROW;

		for (var j = 0; j < IMAGES_PER_ROW; j++)
		{
			document.write("<td>");     
	
			offset = index * DIV_FACTOR;
	
			image_name = current_image_array[offset + 1];
			place = current_image_array[offset + 2];
			year = current_image_array[offset + 3];
			
			document.write('<p><strong>' + image_name + '</strong><br>' + place + ', ' + year + '</p>');

			document.write("\n </td> \n");
			
			index++;
		}

		document.write("</tr> \n");     
	}

	document.writeln("\n </table>");
}

/******************************************************************************
This function selects the next image. If on the last image for each section, 
then it will display the images of the next section.
/*****************************************************************************/

function get_next_image()
{	
	if (current_image_number < IMAGES_PER_PAGE - 1)
	{	
		var next_image = parseInt(current_image_number, 10) + 1;
	}	
	else
	{
		if (portfolio_number < image_array.length - 1)
		{
			portfolio_number++;
		}
		else
		{
			portfolio_number = 0;
		}
		
		next_image = 0;
	}

	select_image(next_image);
}

/******************************************************************************
This function selects the previous image. If on the 1st image for each section, 
then it will display the images of the previous section.
/*****************************************************************************/

function get_previous_image()
{	
	if (current_image_number > 0)
	{	
		var next_image = current_image_number - 1;
	}
	else
	{
		if (portfolio_number > 0)
		{
			portfolio_number--;
		}
		else
		{
			portfolio_number = image_array.length - 1;
		}
		
		next_image = IMAGES_PER_PAGE - 1;
	}

	select_image(next_image);
}

/******************************************************************************
This function selects the image number n. It first deselects the current image
and then selects the new imge.
/*****************************************************************************/

function select_image(n)
{
	var id_old;
	var id_new;
	var id_element;
	var href;
	
	//alert('portfolio: portfolio_number = ' + current_image_number + '  n = ' + n);
	
	id_old = 'number' + current_image_number;
	id_element = document.getElementById(id_old);
	
	//alert('id_element = ' + id_element + ' name = ' + id_element.nodeName);
	/*****************************************************************
	The following code worked in all browsers except Safari for Mac.
	So, instead changed the class name of the <a> tag.
		href = id_element.getElementsByTagName("a");
		href[0].style.color = "rgb(164, 179, 200)";
		href[0].style.backgroundColor = "transparent";
	*****************************************************************/
	id_element.firstChild.className = 'num-link';
	//alert('firstChild = ' + id_element.firstChild + ' name = ' + id_element.firstChild.nodeName);

	id_new = 'number' + n;
	id_element = document.getElementById(id_new);
	/*****************************************************************
	The following code worked in all browsers except Safari for Mac.
	So, instead changed the class name of the <a> tag (firstChild of
	<div id="numberx">
		href = id_element.getElementsByTagName("a");
		href[0].style.color = "rgb(164, 179, 200)";
		href[0].style.backgroundColor = "rgb(164, 179, 200)";
	*****************************************************************/
	id_element.firstChild.className = 'num-selected';

	current_image_number = n;
	
	// If image number 0, don't display Back arrow
	arrow_id = document.getElementById('image-back');
	if (current_image_number == 0)
		arrow_id.style.display = 'none';
	else
		arrow_id.style.display = 'inline';
	
	// If last image number, don't display Next arrow
	arrow_id = document.getElementById('image-next');
	if (current_image_number == IMAGES_PER_PAGE - 1)
		arrow_id.style.display = 'none';
	else
		arrow_id.style.display = 'inline';
	
	//alert('select_image: current_image_number = ' + current_image_number + '  n = ' + n);
	
	display_slideshow(portfolio_number, current_image_number);
}

/******************************************************************************
This function takes as input the number of the image to select.

It then manipulates the current array of images to pull out all the information.
In this case the information is:
array[0]: image file name without the jpg extension
array[1]: Text name of the image to be displayed
array[2]: Medium of artwork
array[3]: Size of artwork in string format
array[4]: Whether the artwork has been sold or not (1 = sold, 0 = not sold)
/*****************************************************************************/

function display_slideshow(portfolio, n_image)
{	
	var id_old, id_new, id_element, href;
	var text, newElem, newText, child;
	var offset, image_file, image_name;

	if (n_image == null)
	{
		n_image = 0;
	}
	
	/*****************************************************************
	The following code worked in all browsers except Safari for Mac.
	So, instead changed the class name of the <a> tag.
		href = id_element.getElementsByTagName("a");
		href[0].style.color = "rgb(164, 179, 200)";
		href[0].style.backgroundColor = "transparent";

	This is to update the image numbers displayed. The currently
	selected number is deselected and the new number is selected.
	*****************************************************************/
	//id_old = 'number' + current_image_number;
	//id_element = document.getElementById(id_old);
	//id_element.firstChild.className = 'num-link';

	//id_new = 'number' + n;
	//id_element = document.getElementById(id_new);
	//id_element.firstChild.className = 'num-selected';

	portfolio_number = portfolio;
	current_image_array = image_array[portfolio_number];
	
	current_image_number = n_image;
	offset = n_image * DIV_FACTOR;
	
	image_file = current_image_array[offset];
	image_file = folder + portfolio_number + '/' + image_file + '.jpg';

	image_name = current_image_array[offset + 1];
	place = current_image_array[offset + 2];
	year = current_image_array[offset + 3];
			
	//Display main image
	
	/* If Safari loads another image and both height and with are not different, then Safari 
	stretches the image to the same width as the previous image. The following code checks if
	Safari browser, and if true, loads a 1px x 1px image before loading the new image.
	******************************************************************************************/
	var safari = (navigator.userAgent.indexOf('Safari') != -1);	
	if (safari)
	{	document.images.targetImage.src = 'images/MsSpacer.gif';
	}
	
	document.images.targetImage.src = image_file;

	/***************************************************************************************************
	The following 2 lines work fine in all browsers except Safari. In Safari, the new strings do not 
	align properly. For example, they should be centered horizontally, but instead, the 1st string 
	displayed is properly centered, but subsequent strings are left aligned with the left position of 
	the 1st string. To get around this, display_image_info() was added.
	
		document.getElementById("imageName").firstChild.nodeValue = image_name[n];
		document.getElementById("imageDescription").firstChild.nodeValue = medium_string;
	***************************************************************************************************/

	// Add image information underneath image
	x = document.getElementById("imageName");
	x.innerHTML = '<p><strong>' + image_name + ',</strong> ' + place + ', ' + year + '</p>';

		
	
/***	
	// Get ready to preload next image
	var i = n_image + 1;
	
	if ((i < IMAGES_PER_PAGE) && (main_image_loaded[i] == 0))
	{
		offset = i * DIV_FACTOR;
		image_file = current_image_array[offset];
		image_file += '.jpg';
		image_file = folder + image_file;

		main_image[i] = new Image();
		main_image[i].src = image_file;
		main_image_loaded[i] = 1;
	}	
	
	// This section of code is to change the previous and next arrows to indicate the next
	// section of images.
	if (n_image == 0)
	{	
		var next_series = ' << ';
	
		if (current_image_array_index > 0)
		{
			next_series += key_array[current_image_array_index - 1][1];
		}
		else
		{	
			next_series += key_array[image_array.length - 1][1];
		}
		id_element = document.getElementById('previousArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode(next_series);
		id_element.replaceChild(newText, child);
		
		id_element = document.getElementById('nextArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('next image >>');
		id_element.replaceChild(newText, child);		
	}
	else if (n_image == IMAGES_PER_PAGE - 1)
	{
		if (current_image_array_index < image_array.length - 1)
		{
			next_series = key_array[current_image_array_index + 1][1];
		}
		else
		{
			next_series = key_array[0][1];
		}
		next_series += ' >>';
		id_element = document.getElementById('nextArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode(next_series);
		id_element.replaceChild(newText, child);

		id_element = document.getElementById('previousArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('<< previous image');
		id_element.replaceChild(newText, child);
	}
	else
	{
		id_element = document.getElementById('previousArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('<< previous image');
		id_element.replaceChild(newText, child);

		id_element = document.getElementById('nextArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('next image >>');
		id_element.replaceChild(newText, child);
	}	
***/	
}	

/******************************************************************************
This function displays the main image in the portfolio viewer and then calls
display_image_info() to display the name, medium, size, and whether it's been
sold.
******************************************************************************/

function display_main_image(image_file, name, place, year)
{	
	if (document.images)
	{
		/* If Safari loads another image and both height and with are not different, then Safari 
		stretches the image to the same width as the previous image. The following code checks if
		Safari browser, and if true, loads a 1px x 1px image before loading the new image.
		******************************************************************************************/
		var safari = (navigator.userAgent.indexOf('Safari') != -1);	
		if (safari)
		{	document.images.targetImage.src = 'images/MsSpacer.gif';
		}
		
		document.images.targetImage.src = image_file;
	
	/***************************************************************************************************
	The following 2 lines work fine in all browsers except Safari. In Safari, the new strings do not 
	align properly. For example, they should be centered horizontally, but instead, the 1st string 
	displayed is properly centered, but subsequent strings are left aligned with the left position of 
	the 1st string. To get around this, display_image_info() was added.

		document.getElementById("imageName").firstChild.nodeValue = image_name[n];
		document.getElementById("imageDescription").firstChild.nodeValue = medium_string;
	***************************************************************************************************/
	
		x = document.getElementById("imageName");
		x.innerHTML = '<p><strong>' + name + ',</strong> ' + place + ', ' + year + '</p>';
	}
}

/******************************************************************************
This function displays the number of images on the html page as well as previous
and next arrows. This is done by writing html code onto the page. A number and
ID is generated for each image. The IDs are in the form: "numberx" where "x"
are numerals from 0 to the number of images - 1.

It should be called after setup_images() from the html page.
/*****************************************************************************/

function display_image_numbers()
{
	document.write('<strong>Image: </strong>');
	
	//alert('current img number = ' + current_image_number);
	
	document.write('<a href="#" id="image-back" class="arrow" ' + 'onClick="get_previous_image(); ' + 'this.blur(); return false;" >');
	document.write('<< Back ');
	document.write('</a>');
	
	for (var i = 0; i < IMAGES_PER_PAGE; i++)
	{
		document.write("\n");
		document.write('<div id="number' + i + '"' + ' class="number">');
		document.write('<a href="#" ' + 'class="num-link" ' + 'onClick="select_image(' + i + '); ' + 'this.blur(); return false;" >');
		var j = i + 1;
		document.write(j);
		document.write('</a>');
		document.write('</div>');
	}		

	document.write('<a href="#" id="image-next" class="arrow" ' + 'onClick="get_next_image(); ' + 'this.blur(); return false;" >');
	document.write(' Next >>');
	document.write('</a>');
}

/******************************************************************************
This function displays the number of the portfolio on the html page.
/*****************************************************************************/

function display_portfolio_numbers()
{
	var back, next;
	
	document.write('<strong>Portfolio: </strong> ');
	
	if (portfolio_number > 0)
	{
		back = portfolio_number - 1;
		document.write('<a href="portfolio.php?portfolio=' + back + '" class="arrow">');
		document.write('<< Back ');
		document.write('</a>');
	}
	
	for (var i = 0; i < image_array.length; i++)
	{
		document.write("\n");
		document.write('<div class="number">');
		
		//alert('pn = ' + portfolio_number + '   i = ' + i);
		
		if (portfolio_number == i)
			document.write('<a href="portfolio.php?portfolio=' + i + '"' + 'class="num-selected" ' +  '>');
		else
			document.write('<a href="portfolio.php?portfolio=' + i + '"' + 'class="num-link" ' +  '>');
	
		var j = i + 1;
		document.write(j);
		document.write('</a>');
		document.write('</div>');
	}		

	if (portfolio_number < image_array.length - 1)
	{
		next = portfolio_number - 0 + 1;
		document.write('<a href="portfolio.php?portfolio=' + next + '" class="arrow">');
		document.write(' Next >>');
		document.write('</a>');
	}
}

/******************************************************************************
Preload thumbnail images.
******************************************************************************/

/***
function preload_thumbnails(n_images)
{	for (x = 0; x < n_images; x++)
	{	tn_image[x] = new Image();
		tn_image[x].src = image_file_tn[x];
	}
}
***/


// end hiding contents from old browsers  -->
// </script>