var restorePoints = [];
$(document).ready(function(){
	// This array will store the restoration points of the canvas
	var restorePoints = [];
	var a=false;
	var b,c="";
//	var d=document.getElementById("can");
	$(".can").each(function() {
		var i=$(this).index(".can");
		var d=$(".can")[i];
		var e=d.getContext("2d");
		e.strokeStyle=$(this).siblings(".controls").children(".color_controls").children("div:first").css("background-color");
		e.lineWidth=$(this).siblings(".controls").children(".pen_controls").children("select:first").val();
		e.lineCap="round";
		
		//if IE8 or older
		var ver = $.browser.version
		if ($.browser.msie && ver<=8){
			
		
		$(this).mousedown(function(d){
			a=true;
			e.save();
			b=d.pageX-this.offsetLeft;
			c=d.pageY-this.offsetTop;
		});
		
		$(this).mouseout(function(){
			a=false;
		});
		$(document).mouseup(function(){
			a=false;
		});
		
		$(this).mousemove(function(d){
			if (a==true) {
				e.beginPath();
				e.moveTo(d.pageX-this.offsetLeft,d.pageY-this.offsetTop);
				e.lineTo(b,c);
				e.stroke();
				e.closePath();
				b=d.pageX-this.offsetLeft;
				c=d.pageY-this.offsetTop
			}
		});
				
		$(document).click(function(){
			a=false;
		});
		
		
		
		//else use this
		}else{
		
		var drawer = {
			isDrawing: false,
			touchstart: function(coors){
				e.beginPath();
				e.moveTo(coors.x, coors.y);
				this.isDrawing = true;
			},
			touchmove: function(coors){
				if (this.isDrawing) {
			        e.lineTo(coors.x, coors.y);
			        e.stroke();
				}
			},
			touchend: function(coors){
				if (this.isDrawing) {
			        this.touchmove(coors);
			        this.isDrawing = false;
				}
			},		
			mousedown: function(coors){
				e.beginPath();
				e.moveTo(coors.x, coors.y);
				this.isDrawing = true;
			},
			mousemove: function(coors){
				if (this.isDrawing) {
			        e.lineTo(coors.x, coors.y);
			        e.stroke();
				}
			},
			mouseup: function(coors){
				if (this.isDrawing) {
			        this.mousemove(coors);
			        this.isDrawing = false;
				}
			}
		};
		// create a function to pass touch events and coordinates to drawer
		function drawTouch(event){
			// get the touch coordinates
			var coors = {
				x: event.targetTouches[0].pageX-this.offsetLeft,
				y: event.targetTouches[0].pageY-this.offsetTop
			};
			// pass the coordinates to the appropriate handler
			drawer[event.type](coors);
		}
		
		function drawMouse(event){
			// get the touch coordinates
			var coors = {
				x: event.pageX-this.offsetLeft,
				y: event.pageY-this.offsetTop
			};
			// pass the coordinates to the appropriate handler
			drawer[event.type](coors);
		}
		
		// attach the touchstart, touchmove, touchend event listeners.
	    this.addEventListener('touchstart',drawTouch, false);
	    this.addEventListener('touchmove',drawTouch, false);
	    this.addEventListener('touchend',drawTouch, false);

		// attach the touchstart, touchmove, touchend event listeners.
	    this.addEventListener('mousedown',drawMouse, false);
	    this.addEventListener('mousemove',drawMouse, false);
	    this.addEventListener('mouseup',drawMouse, false);
		
		// prevent elastic scrolling
		document.body.addEventListener('touchmove',function(event){
			event.preventDefault();
		},false);
		
		
		}//end IE8 or less else/if statement
		
		
		
		
		
		
		$(".size").change(function(a){
			var i=$(this).parents(".controls").prev(".can").index(".can");
			var d=$(".can")[i];
			var e=d.getContext("2d");
			e.lineWidth=this.value;
//			$(this).parents(".controls").prev(".can").getContext('2d').lineWidth=this.value;
		});
		$(".color_controls").change(function(a){
			var i=$(this).parents(".controls").prev(".can").index(".can");
			var d=$(".can")[i];
			var e=d.getContext("2d");
			e.strokeStyle=this.value
//			$(this).parents(".controls").prev(".can").getContext('2d').strokeStyle=this.value;
		});
		
		$(".color_controls > div").click(function(){
//			var i=$(this).parents(".controls").prev(".can").index(".can");
			var i=$(this).parents(".controls").prev("canvas").index("canvas");
			var d=$(".can")[i];
			var e=d.getContext("2d");
			e.strokeStyle=$(this).css("background-color");
//			$(this).parents(".controls").prev(".can").getContext('2d').strokeStyle=this.css("background-color");
	//		e.strokeStyle=$("#color").val();
		});
		
		
		
		
		$(".clear").click(function(){
			var i= $(this).parents(".controls").prev(".can").index(".can");
			var d=$(".can")[i];
			var e=d.getContext("2d");
			e.clearRect(0,0,d.width,d.height);
		});
	});
});