var ResourceLoader = function() {
	var assets = {};
	var currentId = null, lastId = null;
	var img = null;
	
	return {
		init: function(list, currentId) {
			//Store the asset list
			if (typeof(list) == 'string') {
				this.assets = eval('(' + list + ')');
			} else {
				this.assets = list;
			}
			
			//Store the current position
			this.currentId = currentId || null;
			this.lastId = this.currentId;
			
			//Determine if we're displaying the swap image or the main
			this.displaySwap = false;
			
			//Cache the reference to the image
			var $$ = $('#resourceImage');
			
			//Create an image to load in the background
			this.img = new Image();
				
			//Image will hold a copy of the main image until loaded
			$('#resourceImage')
				.before('<div id="loader" class="loading" style="position: absolute; left: 0px; visibility: hidden; z-index: 10000;"></div>')
				.before('<img id="resourceImageMask" style="position: absolute; left: 0px; visibility: hidden;"/>');
			
			// wrap our new image in jQuery, then:
			$(this.img)
				// once the image has loaded, execute this code
				.load(function () {
					//Hide the loader
					$('#loader')
						.css({visibility: 'hidden'});
					
				  //set the main image to the loaded image
				  $('#resourceImage')
					 .hide()
					 .attr('src', $(this).attr('src'));
					$('#resourceImage').fadeIn();
				  
				  //fade this out, exposing the new image underneath
				  $('#resourceImageMask')
					.animate({
						'width': $('#resourceImage').width(),
						'height': $('#resourceImage').height(),
						'opacity': 0
						});
				  
				  
				})
				
				// if there was an error loading the image, react accordingly
				.error(function () {
					 // notify the user that the image could not be loaded
					 alert('Image not found!');
				});
			
		},
		
		next: function() {
			this.lastId = this.currentId;
			
			if (this.currentId != null)
				this.currentId = this.assets[this.currentId].next;

			if (this.currentId == null)
				this.currentId = this.assets[0];

			return (this.reload() == false);
		},
		
		previous: function() {
			this.lastId = this.currentId;
			
			if (this.currentId != null)
				this.currentId = this.assets[this.currentId].previous;

			if (this.currentId == null)
				this.currentId = this.assets[ this.assets.length-1 ];

			return (this.reload() == false);
		},
		
		set: function(id) {
			this.lastId = this.currentId;
			
			this.currentId = id;
			
			return (this.reload() == false);
		},
		
		reload: function() {
			if (this.currentId == null) { //No current item
				return false;
			} else if (typeof(this.assets[this.currentId]) == 'undefined') { //Not found in asset list
				return false;
			} else if ((this.assets[this.currentId].type != 'image') || ((this.lastId != null) && (this.assets[this.lastId].type != 'image'))) { //Either current or next item is not an image
				return false;
			} else if ($('#resourceImage').length == 0) { //Display element not found
				return false;
			} else {

				//Show hide the navigation arrows
				$('#resourceNavigatePrevious').css({visibility: (this.assets[this.currentId].previous ? 'visible' : 'hidden')});
				$('#resourceNavigateNext').css({visibility: (this.assets[this.currentId].next ? 'visible' : 'hidden')});

				//Put the mask over the top of the main image
				$('#resourceImageMask')
					.attr('src', $('#resourceImage').attr('src'));
				$('#resourceImageMask').css({
						'width': $('#resourceImage').width(),
						'height': $('#resourceImage').height(),
						'opacity': 1.0,
						'visibility': 'visible'
					});
				
				//Show the loader
				$('#loader').css({
						'width': $('#resourceImageMask').width(),
						'height': $('#resourceImageMask').height(),
						'visibility': 'visible'
					});
				
				//Start the load within the hidden image
				$(this.img)
					.attr('src', '/resources/thumbnail/' + this.currentId + '/638/377/');
					
				return true;
			}
		}
	};
}();