/*
	/00000000000                        /0   0\      000       000
	00000000000/            /00000000  /000 000\    0   0      000
		0000     /00000000  000        000000000   00   00   /000000/
		0000     000   000  000000     000 0 000  000000000    000
		0000     000   000  000        000   000  000   000    000
		000/     00000000/  \00000000  000   000  000   000    000
		
		Code by Thomas Renck      http://X-INfERNO.com 27 Nov 2011
	
	* Spincase v1.0
	* http://x-inferno.com/spincase
	* Copyright (c) 2011 Thomas Renck
	*    You may use this software for personal or professional purposes
	*    as long as you send me a link to where you're using it - tom@x-inferno.com
*/

(function(){
	var SC = {
		//Public options
		width:0,
		height:0,
		canvas_id:'',		//ID of the canvas to use
		num_slides:0,		//Number of images
		starts_at:1,		//Default starts at image index 1 (set to 0 if your slides start at 0)
		placeholder:'',		//Url to default image
		path:'',			//Url to image set in form 'something_#.jpg' 
							  //where # will be replaced with starts_at to num_slides
		init_text:'Click to load 360 view',			//Text that will be displayed so users know they can click
		loading_text: 'Loading...',					
		loaded_text: 'Click and drag to rotate',
		
		//Private variables
		elem:'', 		//Canvas element
		ctx:'',  		//Canvas context variable
		images:[],		//Array for holding all the image paths
		position:0,		//Index for where we are in the roatation
		loaded:0,		//Flag for having all images loaded
		num_loaded:0,	//Number of images loaded
		mouse_down:0,	//Mouse button down flag
		prev_mouse:0,	//Last mouse positon
		delta_mouse:0,	//Mouse movement holder
		sensitivity:5,	//Sets the sensitivity of the mouse
	
		//Constructor to set up the spin case
		spinCase: function(options){
			//Set the options	
			for(option in options){
				this[option] = options[option];
			}
			
			//Set up the canvas
			this.elem = document.querySelector('#'+this.canvas_id);
			this.ctx = this.elem.getContext('2d');
			this.ctx.canvas.width = this.width;
			this.ctx.canvas.height = this.height;
			this.ctx.font = "10px Arial";
			
			//Draw placeholder
			$$.drawPlaceholder();
			
			//Set up on click to load all other images
			this.elem.onclick = function(){$$.loadImages();};
			
			//Mouse move
			this.elem.onmousemove = function(mouse){$$.drag(mouse);};
			
			//Mouse button detection
			this.elem.onmousedown = function(){$$.mouse_down=1;};
			this.elem.onmouseup = function(){$$.mouse_down=0;};
			this.elem.onmouseout = function(){$$.mouse_down=0;};
		},
		
		//Load and draw placeholder
		drawPlaceholder: function(){
			ph = document.createElement('img');
			ph.src=this.placeholder;
			ph.onload = function(){
				$$.ctx.drawImage(this,0,0);
				//Draw the call to action (init_text)
				if($$.init_text!=''){
					var w = $$.ctx.measureText($$.init_text);
					$$.ctx.fillStyle="black";
					$$.ctx.fillRect(4,4,w.width+15,14);
					$$.ctx.fillStyle="white";
					$$.ctx.fillText($$.init_text,9,15);
				}
			}
		},
		
		//Mouse is moving over the canvas
		drag: function(mouse){
			if(this.loaded){
				if(this.prev_mouse==0) this.prev_mouse=mouse.clientX;
				
				var delta = this.prev_mouse-mouse.clientX;
				if(this.mouse_down==1)
					this.delta_mouse += delta;
				else
					this.delta_mouse=0;
				
				this.prev_mouse = mouse.clientX;
				
				if(this.delta_mouse>this.sensitivity)
					$$.draw(1);
				else if(this.delta_mouse<(0-this.sensitivity))
					$$.draw(-1);
			}
		},
		
		//Draw the current slide!
		draw: function(step){
			this.position+=step;
			if(this.position>=this.num_slides)
				this.position=0;
			if(this.position<0)
				this.position=this.num_slides-1;
				
			this.ctx.drawImage(this.images[this.position],0,0);
			
			this.delta_mouse=0;
		},
		
		//Load all of the slides
		loadImages: function(){ 
			if(this.loaded) return 0;
			
			//Show the loading message
			var w1 = this.ctx.measureText(this.init_text).width;
			var w2 = this.ctx.measureText(this.loading_text).width;
			if(w2 > w1)
				w1 = w2;
			this.ctx.fillStyle="black";
			this.ctx.fillRect(4,4,w1+15,14);
			this.ctx.fillStyle="white";
			this.ctx.fillText(this.loading_text,9,15);
			
			//Load all of the images
			for(var i=this.starts_at; i<(this.num_slides+this.starts_at); i++) {
				var fp = this.path.replace('#',i);
				var img = document.createElement('img');
				img.src = fp;
				img.onload = function(){$$.imageLoaded();};
				this.images.push(img);
			}
		},
		
		//An image loaded, keep track so we know when all are loaded
		imageLoaded: function(){
			this.num_loaded++;
			if(this.num_loaded==this.num_slides){
				//All images loadad, draw first one!
				this.position=0;
				$$.draw(0);
				//Draw text (loaded text)
				var w = this.ctx.measureText(this.loaded_text);
				this.ctx.fillStyle="black";
				this.ctx.fillRect(4,4,w.width+15,14);
				this.ctx.fillStyle="white";
				this.ctx.fillText(this.loaded_text,9,15);
				
				this.loaded=1;
			}
		}
	}
	if(!window.$$){window.$$=SC;}	//Shortcut
})();