$(function(){
		var loading, loadingTimer, loadingFrame = 1, thumb_position = 0, thumb_x = 0;
		
		$('#photo_large').append(
			loading	= $('<div id="loading"><div></div></div>')
		);
		
		$('.thumb').click(function(){
								   
			clearInterval(loadingTimer);
			loading.fadeIn();
			loadingTimer = setInterval(loader_spin, 66);
			
			var hole_num = $(this).html();
			
			load_image('/images/holes/hole_' + hole_num + '.jpg');
			
			$('.thumb').each(function(){$(this).removeClass("red")});
			
			
			$(this).addClass("red");
			
			$("#header").html((myContent.content_all[(hole_num-1)].Header));
			$("#copy").html(myContent.content_all[(hole_num-1)].Copy);
			
		}).mouseover(function(){
			//var new_image =  $(this).attr("src").replace(".gif", "_on.gif");
			//$(this).attr("src", new_image);
		}).mouseout(function(){
			//var new_image =  $(this).attr("src").replace("_on.gif", ".gif");
			//$(this).attr("src", new_image);
		});	
		
		
			
		$('#left_arrow').click(function(){
			if(thumb_x < 0){
				thumb_position--;
				thumb_x += $(".thumb:eq(" + thumb_position + ")").width();
				//alert($("#thumbs_table").css("margin-left"));
				$("#thumbs_table").animate({"margin-left" : thumb_x+"px"});
			}					 
		});
		
		$('#right_arrow').click(function(){
			var limit = $("#thumbs_table").width() - ($("#thumbs_table").width() % $("#photo_thumbs_box").width());
			if(thumb_x > - limit){
				thumb_x -= $(".thumb:eq(" + thumb_position + ")").width();
				//alert($("#thumbs_table").css("margin-left"));
				$("#thumbs_table").animate({"margin-left" : thumb_x+"px"});
				thumb_position++;
			}
		});
		
	
		function load_image(arg_image){
			var img = new Image();
			$(img).load(function () {
				$("#photo_large img").remove();
      			$(this).hide();
				$('#photo_large').prepend(this);
				$(loading).fadeOut();
				$(this).fadeIn();
			})
			.error(function () {
			// notify the user that the image could not be loaded
    		})
			.attr('src', arg_image);
			//$("#photo_large img").attr("src", arg_image);
		}
		
		function loader_spin(){
			if (!loading.is(':visible')){
				clearInterval(loadingTimer);
				return;
			}

			$('div', loading).css('top', (loadingFrame * -40) + 'px');

			loadingFrame = (loadingFrame + 1) % 12;
		}
	});