// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

$(document).ajaxSend(function(event, request, settings) {
  if (typeof(AUTH_TOKEN) == "undefined") return;
  // settings.data is a serialized string like "foo=bar&baz=boink" (or null)
  settings.data = settings.data || "";
  settings.data += (settings.data ? "&" : "") + "authenticity_token=" + encodeURIComponent(AUTH_TOKEN);
});


//This is a "ready" function for the "portfolio" page.  It handles the 
//sequenced preloading and display of thumb and large images
var portfolio = {
	ready: function(){
		//clumsy temporary fix, needs tidier connection with Ruby classes
		var largePrefix = '/photographs/';
		var thumbPrefix = largePrefix + 't';

		//wrap containers, and create array for objects
		var $thumbnails = $('#thumbnails li a');
		var photoObjects = [];

		//constructor for photoObject, which is a wrapper for thumb-and-large pairs, 
		//corresponding to Photograph class in Ruby code.  Methods in this object are where
		//all the magic happens -- preloading images, attaching spinners, handling "onload"
		//events in sequence, attaching "onclick" handlers
		var photoObject = function(spec){
			var that = {};
			var $large = $('#large_photos');
			
			//private methods -- not accessible outside object
			var tempDance = function(sourceString,container,f){
				var temp = new Image();
				$(temp).hide();
				$(temp).bind('load',f);
				temp.src = sourceString;
				return temp;
			}
			var appendImage = function(sourceString,container){
				container.find('img').attr('src',sourceString);
			};
			
			that.load_large = function(){
				var next = spec.photo_number + 1;
				var isFirst = (spec.photo_number == 0);
				tempDance(spec.large_source,spec.$large_container,function(){
					if (isFirst){
						spec.$large_container.append('<img src="' + spec.large_source + '" />');
					}
					if (next < spec.number_of_photos){
						spec.containing_array[next].load_large();
					}
					spec.$thumb_container.find('img').removeClass('preload').addClass('postload');
				});
			};
			
			//public method -- only way in for rest of program
			that.load_thumb = function(){
				var next = spec.photo_number + 1;
				tempDance(spec.thumb_source,spec.$thumb_container,function(){
					spec.$thumb_container.append('<img src="' + spec.thumb_source + '" class = "preload" />');
					spec.$thumb_container.bind('click',function(e){
						spec.$large_container.find('img').attr('src',spec.large_source);
						e.preventDefault();
					})
					if (next < spec.number_of_photos){
						spec.containing_array[next].load_thumb();
					}
					else {
						spec.containing_array[0].load_large();
					}
				});				
			};
			return that;
		}
		
		//on document.ready, build "specification" object and construct
		// a photoObject wrapping each thumbnail container,
		//store in photoObjects[]
		$thumbnails.each(function(index){
			var specification = {
				large_source: largePrefix + parseInt($(this).attr('href'),10) + '.jpg',
				thumb_source: thumbPrefix + parseInt($(this).attr('href'),10) + '.jpg',
				photo_number: index,
				$thumb_container: $(this),
				$large_container: $('#large_photos'),
				number_of_photos: $thumbnails.length,
				containing_array: photoObjects
			};
			photoObjects.push(photoObject(specification));
		});
		
		//BEGINS CASCADE: IT ALL STARTS HERE
		photoObjects[0].load_thumb();
		
		//debugging utility function
		function say(text){
			$('#console').append(text);
		}
	}
}