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

$(document).ready(function()
{
	setup_arrow_keys();
	setup_painting_display();
	display_urhere();
	setup_email();
	set_newWindow();
});

/*******************************************************************************
This function allows the left and right arrow keys to be used to trigger the
back and next functionality when viewing images in a slideshow.

Using keydown causes Firebug to show console error: "The 'charCode'property of
a keydown event should not be used. The value is meaningless." Changing keydown to
keypress does not work. It's also recommended to use event.which instead of
event.keyCode or event.charCode because event.which will get the code of the key
regardless of whether it's stored in keyCode or charCode
*******************************************************************************/
function setup_arrow_keys()
{
	$(document.documentElement).keydown(function (event)
	{
		// handle cursor keys
		if (event.which == 37)
		{
			// image-back is the id of the <a href> tag for previous image
			$('#image-back').click();
		}
		else if (event.which == 39)
		{
			// image-next is the id of the <a href> tag for next image
			$('#image-next').click();
		}

		/***
		// handle cursor keys
		if (event.keyCode == 37)
		{
			// image-back is the id of the <a href> tag for previous image
			$('#image-back').click();
		}
		else if (event.keyCode == 39)
		{
			// image-next is the id of the <a href> tag for next image
			$('#image-next').click();
		}
		***/

	});
}

/*******************************************************************************
This function sets up the jQuery code for displaying the main artwork image when
a thumbnail or back/next button is clicked.
*******************************************************************************/
function setup_painting_display()
{
	// Change main art image when either thumbnail or back/next buttons clicked
	$('#image-back, #image-next').click(function(eve)
	{
		// Prevent link on view page from being taken
		eve.preventDefault();

		if (window.location.href.indexOf('http://www') >= 0)
			var url = 'http://www.johntrotterphotography.com/slideshow_ajax.php';
		else
			var url = 'http://johntrotterphotography.com/slideshow_ajax.php';

		// Get href from "back" or "next" buttons
		var href = $(this).attr('href');

		// Remove base url and just keep parameters: portfolio=x&image=y
		var parameters = href.replace('/slideshow.php?', '');

		// Make ajax call to php. url will be of form: /get_image/3/abstract
		// Entry in routes.php will add /main before /get_image
		$.ajax(
		{
			url: url,
			type: 'POST',
			dataType: 'json',
			data: parameters,

			success: function(data, status)
			{
				// Use load to wait until image loaded before executing the next instructions
				// Note: load only works if it's set before the element has completely loaded. If you set it after that nothing will happen.
				$('#targetImage').load(function()
				{
					// Set image width and height
					$('#targetImage').attr('height', data.height);
					$('#targetImage').attr('width', data.width);

					// Update artwork info after main image has downloaded
					$('#title').html(data.title);
					$('#description').html(data.description);

					// Set href for "back" button or hide if first image
					if (data.href_back == undefined)
					{
						$('#image-back').hide();
					}
					else
					{
						$('#image-back').show();
						$('#image-back').attr('href', data.href_back);
					}

					// Set href for "next" button or hide if last image
					if (data.href_next == undefined)
					{
						$('#image-next').hide();
					}
					else
					{
						$('#image-next').show();
						$('#image-next').attr('href', data.href_next);

						// Preload next image file after current image is loaded
						var image1 = $('<img>').attr('src', data.next_img_src);
					}
				});


				// Change main image
				$('#targetImage').attr(
				{
					src: data.src,
					//height: data.height,
					//width: data.width,
					alt: data.alt,
					title: data.title
				});

			},

			error: function(x, y, z)
			{
				console.log(x, y, z);
				alert('Ajax request failed');
			}
		});
	});
}

/**************************************************************************************************
This function sets up a links associated with class names to send email. Email address cannot
be read by spambots. email_array is an associative array where each array element corresponds to
1 email address.

To use in html code, as an example, add <span class="emailAmyChurckrow">Email Amy</span> where each
email address class starts with email****. This code is different than the email_display_link code
in that any text can be displayed between the <span> tags (e.g. "Email Amy") until the user hovers
over the text, then it will change to the actual email address (e.g. amy@gmail.com).

To add another email address, add to email_array.

First, an <a href="#"></a> tag is wrapped around the text inside the <span> tag for all <span>
tags with class="email***".

On mouseenter (mouseover triggers both entering and leaving), the <a> tag is replaced with
the actual mailto href, e.g. <a href="mailto:test@gmail.com"> and the text that the generic text
that the user sees, e.g. Email John Doe, is replaced with the email address, e.g. test@gmail.com.
**************************************************************************************************/
function setup_email()
{
	// Add <a> tag to any <span> with class="email****"
	$('span[class^="email"]').wrapInner('<a href="#"></a>');

	// On mouseenter, replace <a href="#"> with mailto
	$('span[class^="email"]').mouseenter(function(eve)
	{
		email_array = new Array();
		email_array['John'] = 'John, JohnTrotterPhotography, com';

		eve.preventDefault();

		// If a href has already been changed to mailto, prevent repeated operation
		if ($(this).children('a').attr('href').indexOf('mailto') >= 0)
			return;

		// Get currently displayed html text within <a> tag
		var html = $(this).children('a').html();

		// Get index to email_array (strip off 'email' from class name)
		var index = $(this).attr('class').substring(5);

		// Split email string by commas
		var temp = email_array[index].split(',');

		// Construct email address (also trim spaces)
		var address = jQuery.trim(temp[0]) + '@' + jQuery.trim(temp[1]) + '.' + jQuery.trim(temp[2]);
		$(this).html(html + ' <a href="mailto:' + address + '">' + '(' + address + ')' + '</a>');
	});
}

/**************************************************************************************************
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)

		// Highlight Portfolio in navbar for any portfolio.php or slideshow.php page
		var p = currentHref.indexOf('portfolio.php');
		var s = currentHref.indexOf('slideshow.php');

		if (href == 'portfolios.php' && (p >= 0 || s >= 0))
		{
			page[i].style.backgroundColor = "#fff";
			page[i].style.color = "#564d52";
			break;
		}

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

		// 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;
		}
	}


	if (currentHref.indexOf('portfolio=1') >= 0)
	{
		$('#sky-link').css( {'font-weight' : 'bold', 'color' : '#000' } );
	}
	else if (currentHref.indexOf('portfolio=2') >= 0)
	{
		$('#light-link').css( {'font-weight' : 'bold', 'color' : '#000' } );
	}
	else if (currentHref.indexOf('portfolio=3') >= 0)
	{
		$('#trees-link').css( {'font-weight' : 'bold', 'color' : '#000' } );
	}
}

/******************************************************************************
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;
			}
		}
	}
}


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