//Defaults should be made publicly available
// SEE: http://www.learningjquery.com/2007/10/a-plugin-development-pattern

(function($){

function supports_canvas() {
  return !!document.createElement('canvas').getContext;
}

if (!supports_canvas()) {
	return false;
}else{

	$.fn.spin = function(options) {

		var defaults = {  
			frameRate		:	10,
			image			:	false,
			height			:	'auto',	// Specify numerically; without px
			width			:	'auto',	// Specify numerically; without px
			speed			:	100,
			endSpeed		:	100,
			direction		:	"cw",
			reSpin			:	1000, // number of times to spin before clearInterval
			loop				:	false
		}, 

		settings = $.extend({}, defaults, options);  
		
		return this.each(function() { 
			//Variables
			var $this = $(this),
			$tHoc = $this.data(); // store whichever element so we can return it
			
			var img = new Image(), 
			rotation = 0, 
			randomId = Math.floor(Math.random()*1000) + "canvas" + Math.floor(Math.random()*1000), 
			height = (settings.height === 'auto') ? $this.height() : settings.height,
			width = (settings.width === 'auto') ? $this.width() : settings.width,
			id = (!$this.attr('id')) ? randomId : $this.attr('id'),
			loop = settings.loop,
			speed = settings.speed,
			endSpeed = settings.endSpeed;
			
		
			// make the canvas a square to the greatest dimension of the image
			//so that we don't crop 
			function normalise(height,width){
				//console.log(height,width);
				if(height>width){
					greatestValue = height;
				} else if(height<width){
					greatestValue = width;
				} else if(height === width){
					greatestValue = width; // whatever
				}

				return greatestValue;
			}
			
			function newSpeed(){
				if(speed <= settings.endSpeed){
					speed = settings.endSpeed;
				} else{
					speed--;
				}
				//console.log(speed + " " + settings.endSpeed + " " + id);
				return speed;
			}
			
			//greatest height/width param
			var gl = normalise(height,width);
			var th = (gl/2)+(0.125*height);
			var tw = (gl/2)+(0.125*width);
			var glcr = (gl*1.5);
			var halfheight = -height/2;
			var halfwidth = -width/2;
			img.src = (settings.image) ? settings.image : $this.attr('src');
							
			var start = function (ctx, nR){
				
				function rotateImg(){
					ctx.save();
					ctx.clearRect(0,0,glcr,glcr);
					ctx.translate(tw,th);
					if(settings.direction === "ccw"){
						rotation -=1;
					} else {
						rotation +=1;
					}
					if( (nR <= 0) && (!(loop)) ){
						//ctx.translate(-width/2,-height/2); //put it back
						ctx.drawImage(img,halfwidth,halfheight); 						
						ctx.save();
						stop(t);
					} else{
						speed = newSpeed();
						ctx.rotate(rotation*Math.PI/speed); //rotate in origin
						//ctx.translate(-width/2,-height/2); //put it back
						ctx.drawImage(img,halfwidth,halfheight); 
						ctx.restore();
						nR--;
					}
					
				}
					
				t = setInterval(rotateImg, settings.frameRate);
				
				function stop(t){
					if(!settings.loop){
						t = clearInterval(t);
						return t;
					}
				}
				
			}

			
			function begin(){
				$this.replaceWith('<canvas height="'+gl*1.25+'" width="'+gl*1.25+'" id="'+id+'"></canvas>'); // haven't figured this out yet
				//rotate();
				var ctx = document.getElementById(id).getContext('2d');
				ctx.globalCompositeOperation = 'destination-over';
				start(ctx, settings.reSpin);
			}
			

			
			

			/*
			function stop(){
				clearInterval(rotate);
			}
			*/
			normalise(height,width);
			begin();
			
		});
		
	};
}
})(jQuery);