$(document).ready(function() {
	
	// Defaults
	document.current_position = 0;
	document.cur_set = Array();
	
	// Update navigation visibility to begin
	updateNavVisibility();
	
	// Back arrow click event handling
	$('a#nav_back').click(function() {
	
		$('div.hover_image').fadeOut('fast');
		
		document.cur_set = Array();
		document.current_position = 0;
		
		updateNavVisibility();
		
	});
	
	// Next arrow click event handling
	$('a#nav_next').click(function() {
		
		var next_item = document.cur_set[++document.current_position];
		
		if (document.current_position < document.cur_set.length) {
			
			$('div.hover_image').not(target).fadeOut('fast');
			
			next_item.fadeIn();
			
			$('div.hover_image').not(next_item).fadeOut('fast');
			
		} else {
			document.current_position--;
		}
		
		updateNavVisibility();
		return false;
		
	});
	
	// Previous arrow click event handling
	$('a#nav_prev').click(function() {
		
		var next_item = document.cur_set[--document.current_position];
		
		if (document.current_position >= 0) {

			$('div.hover_image').not(target).fadeOut('fast');
			
			next_item.fadeIn();
			
			$('div.hover_image').not(next_item).fadeOut('fast');
			
		} else {
			document.current_position++;
		}
		
		updateNavVisibility();
		return false;
		
	});
	
	// Make the escape key also take you back
	$(document).keyup(function(event){
    if (event.keyCode == 27) {
			$('a#nav_back').click();
    }
	});

	
});


/* updateNavVisibility()
------------------------------------------------------------------------------*/
function updateNavVisibility() {
	
	// Hide the navigation initially
	$('a#nav_back').hide();
	$('a#nav_prev').hide();
	$('a#nav_next').hide();
	
	// Show the back (up) button in needed
	if (document.cur_set.length > 0) {
		$('a#nav_back').show();
	}
	
	// If there is more than a single item
	if (document.cur_set.length > 1) {
	
		// If position is not 0, show the previous arrow
		if (document.current_position != 0) {
			$('a#nav_prev').show();
		}

		// Show the next arrow if we are not at the last item
		if (document.current_position < document.cur_set.length - 1) {
			$('a#nav_next').show();
		}

	}
	
}
/*----------------------------------------------------------------------------*/


function addItem(th_pos, th_filename, lg_pos, lg_filename) {

	document.current_position = 0;
	
	// Create the hover area <a> and the thumbnail image markup in the appropriate cell
	$('#' + th_pos).append('<a class="tn" style="z-index: 200;"></a>');
	
	if (th_filename != '') {
		$('#' + th_pos).append("<img style=\"z-index: 50;\" class=\"tn\" src=\"" + document.image_location_prefix + th_filename + "\" width=\"160\" height=\"100\" />");
	}
	
	addTarget(th_pos, lg_pos, lg_filename)
	
	if (lg_pos != null){
		$('#' + th_pos).find('a.tn').hover(function() {
			
			if (document.cur_set.length == 0) { // Don't activate if an item is open
				$('#' + th_pos).find('a.tn').parent().css('background-color', '#000');
				$('#' + th_pos).find('a.tn').parent().css('cursor', 'pointer');
				$(this).siblings('img').fadeTo("fast", 0.5);
			}
			
		}, function() {
			
			if (document.cur_set.length == 0) { // Don't activate if an item is open
				$(this).siblings('img').fadeTo("fast", 1);
			}
			
		});
	
	
	// Attach the hover event to show and hide the large image
	$('#' + th_pos).find('a.tn').click(function() {
		
		if (document.cur_set.length == 0) {
		
		target = '.trigger_' + th_pos;
		
		document.cur_set = $(target);
		
		updateNavVisibility();
		
		$('div.hover_image').not(target).fadeOut('fast');
		

		if (document.image_transition == 'fade') {
			
			var counter = 0;
			
			$(target).each(function() {
				
				document.cur_set[counter++] = $(this);
				
			});
			
			document.cur_set[0].fadeIn();
			
			
		} else {
			$(target).show();
		}
		
		}
		
		return false;
		
	});
	
	}
	
}

function addTarget(th_pos, lg_pos, lg_filename) {
	
	// Add the large image markup to the appropriate cell. trigger_[cell ref] denotes the thumbnail trigger
	$('#' + lg_pos).append('<div style="z-index: 100;" class="hover_image trigger_' + th_pos + '"><img src="' + document.image_location_prefix + lg_filename + '" /></div>');
	
	// Hide the large image
	$('#' + lg_pos + ' .hover_image').hide();
	
}