GPTMC Interactive Map

GPTMCMap.js

(function($) {
	/**
	 * GPTMC Map Animation by Bluecadet, 2012
	 * http://www.bluecadet.com
	 * 
	 * Copyright (c) 2012 Bluecadet
	 * Permission is hereby granted, free of charge, to any person obtaining a copy 
	 * of this software and associated documentation files (the "Software"), to deal 
	 * in the Software without restriction, including without limitation the rights 
	 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
	 * copies of the Software, and to permit persons to whom the Software is 
	 * furnished to do so, subject to the following conditions:
	 * 
	 * The above copyright notice and this permission notice shall be included in all 
	 * copies or substantial portions of the Software.

	 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
	 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
	 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
	 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
	 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
	 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
	 * THE SOFTWARE.
	 */
	
	/**
	 * Variables that really should be in an defaults object so the data can
	 * be extended and made relative the specific instance, but they aren't.
	 */
	var img_count = 0;
	var img_path = '';
	var fps = 12;
	var current_frame = 0;
	var frame_interval = 0;
	var frame_interval_delay = 1 / fps * 1000;
	var images = [];
	var scope;
	
	var methods = {
		/**
		 * Setting default values, should have used $.extend
		 */
		setValues: function(options) {
			if (options.img_count) img_count = options.img_count;
			if (options.img_path) img_path = options.img_path;
			if (options.fps) fps = options.fps;
			$('#fps').html(fps);
		},
		/**
		 * The constructor, if you will.
		 */
		init: function(options) {
			scope = this;
			methods.setValues(options);
			images = map.loadImages(map.buildImagePaths(), map.init);
			return scope;
		}, 
		/**
		 * Instructs map to play to the indicated frame
		 */
		update:function(options) {
			if (!options.frame) options.frame = 0;
			if (!options.callback) options.callback = null;
			map.play(options.frame, options.callback);
			return scope;
		}
	};
	
	var map = {
		/**
		 * All the map images were in a seperate directory from other site
		 * images. They were named consistantly and numbered so I generated
		 * the expected paths programatically instead of hard coding them.
		 */
		buildImagePaths: function() {
			var sources = [];
			for (var i = 0; i <= img_count; i++) {
				var filename = (i < 10) ? '0' + i : i;
				filename += '.jpg';
				sources.push(img_path + filename);
			}
			return sources;
		},
		/**
		 * Load images using onload function to add images to array if 
		 * the load was successful. Once the last image is loaded fire
		 * a callback function if supplied.
		 */
		loadImages: function(srcs, callback) {
			var images = [];
			var num = srcs.length;
			for (var i = 0; i < srcs.length; i++) {
				var image = new Image();
				image.onload = image.onerror = function() {
					num--;
					if (num == 0) {
						this.onload = this.onerror = null;
						if (callback != null) callback();
					}
				};
				image.src = srcs[i];
				image.className = 'background';
				images.push(image);
			}
			return images;
		}, 
		/** 
		 * Puts the first image in the target element
		 */
		init: function() {
			$(scope).html(images[0]);
		},
		/**
		 * Play the image sequence forward or backward depending on the
		 * target frames position relative to the starting frame.
		 */
		play: function(target_frame, callback) {
			frame_interval = setInterval(function() {
				if (current_frame != target_frame) {
					if (current_frame == images.length - 1 && target_frame == 0) {
						current_frame = 0;
					}
					else if (current_frame == 0 && target_frame == images.length -1) {
						current_frame = target_frame;
					}
					else {
						current_frame = (current_frame < target_frame) ? current_frame + 1 : current_frame - 1;
					}
					$(scope).html(images[current_frame]);
				}
				else {
					clearInterval(frame_interval);
					if (callback) callback();
				}

			}, frame_interval_delay);
		}
	};
	
	/**
	 * General mumbo jumbo handling function calls and parameters.
	 */
	$.fn.GPTMCMap = function(method_options){
		if (methods[method_options]) {
			return methods[method_options].apply(this, Array.prototype.slice.call(arguments, 1));
		}
		else if (typeof method_options === 'object' || !method_options) {
			return methods.init.apply(this, arguments);
		}
		else {
			$.error('Method ' + method + 'does not exist.');
		}
	};
})(jQuery);