function canvasAniTest() {
	canvasAnimationObject = new canvasLoading();	
}


canvasLoading = function() {
  this.init();
};
$.extend(canvasLoading.prototype, {
	
	eCanvas : null, 
	ctx : null,
	iRefreshSpeed : 80,
	iInterval : 0,
	oImageList : {
		iFirstImage : 369,
		iLastImage : 401,
		iTargetLength : 0,
		aImageQueue : [],
		iLoadedImages : 0
	},
	oAnimation: { 
		iCurrentIndex : 0,
		iStopIndex : -1,
		iAnimationDirection : 1
	},

	init : function() {
		var _this = this;
		_this.eCanvas = document.getElementById('mainCanvas');
		
		_this.ctx = _this.eCanvas.getContext("2d");
		_this.ctx.globalCompositeOperation = 'destination-over';
		
		_this.oImageList.iTargetLength = _this.oImageList.iLastImage - _this.oImageList.iFirstImage;
		_this.oImageList.aImageQueue = new Array(_this.oImageList.iTargetLength);
		
		for (var iImage=_this.oImageList.iFirstImage; iImage <= _this.oImageList.iLastImage; iImage++) {
			var img = new Image();  
			img.onload = function () { 	
				_this.onLoad(iImage, this);
			};
			img.alt = iImage;
			img.src = '9520_Storm/image'+iImage+'.png';  
		}
		
		//interface actions
		$('#keyFrames').click(_this.showKeyFrame);
	},

	onLoad : function (iImage, eImage) {
		var _this = this;
		var iImageNumber = eImage.alt - _this.oImageList.iFirstImage
		_this.oImageList.aImageQueue[iImageNumber] = eImage;
		
		_this.oImageList.iLoadedImages++;
		if (_this.oImageList.iLoadedImages >= _this.oImageList.iTargetLength) {
			_this.haltCurrentAnimation();
			_this.iInterval = window.setInterval("canvasAnimationObject.animate.call(canvasAnimationObject)", _this.iRefreshSpeed);
		}
	},
	
	animate : function()  {		
		var eImage = this.oImageList.aImageQueue[this.oAnimation.iCurrentIndex];
		this.drawImage(eImage);
		
		//if this image is the chosen as the final image
		if (this.oAnimation.iCurrentIndex == this.oAnimation.iStopIndex) {
			this.haltCurrentAnimation();
		}
		else {
			this.oAnimation.iCurrentIndex = this.oAnimation.iCurrentIndex + this.oAnimation.iAnimationDirection;
			
			if (this.oAnimation.iCurrentIndex >= this.oImageList.aImageQueue.length) {
				this.oAnimation.iCurrentIndex = 0;
			}
			else if (this.oAnimation.iCurrentIndex === -1) {
				this.oAnimation.iCurrentIndex = this.oImageList.aImageQueue.length - 1;
			}
		}
	},
	
	haltCurrentAnimation : function () {
		window.clearInterval(this.iInterval);
		this.iInterval = -1;
	},

	drawImage : function(eImage) {
		this.ctx.clearRect(0,0,this.eCanvas.width,this.eCanvas.height); // clear canvas
		this.ctx.drawImage(eImage,0,0);  
	},
	
	showKeyFrame : function(event) {
		_this = canvasAnimationObject;
		var eTarget = null;
		if (event.target.nodeName == 'A') {
			eTarget = event.target;
		}
		else if (event.target.nodeName == 'IMG') {
			eTarget = event.target.parentNode;
		}
		if (eTarget !== null) {
			//get frame from link
			_this.oAnimation.iStopIndex = $(eTarget).attr('href').substr(1);
			//set animation direction
			var iDistanceForward,iDistanceBackward;
			iDistanceForward = _this.oAnimation.iStopIndex - _this.oAnimation.iCurrentIndex;
			iDistanceBackward = (_this.oImageList.aImageQueue.length + _this.oAnimation.iCurrentIndex) - _this.oAnimation.iStopIndex;
			
			if (iDistanceBackward < iDistanceForward) {
				_this.oAnimation.iAnimationDirection = -1;
			}
			else {
				_this.oAnimation.iAnimationDirection = 1;
			}
			
			//start playing if needed
			if (_this.iInterval === -1 && _this.oAnimation.iCurrentIndex != _this.oAnimation.iStopIndex) {
				_this.iInterval = window.setInterval("canvasAnimationObject.animate.call(canvasAnimationObject)", _this.iRefreshSpeed);
			}
			return false;
		}
		
	}
});


/**
* Initialization function
*/
(function($) {	
	$(document).ready(canvasAniTest);
})(jQuery);