// Drawing application based on Owain Lewis project
//www.owainlewis.com
//Javascript Canvas Drawing Application

var x=0;
var y=0;
var mouseDown = false;

//Base Class for getting Canvas Attributes
var Application = new Class({
	initialize: function(){
		this.canvas = document.getElementById('canvas');
		this.context = this.canvas.getContext('2d');
		this.lineWidth = 0.1;
	},
	resize: function(){
		this.canvas.width = window.innerWidth;
		this.canvas.height = window.innerHeight;
	},
	saveData: function(){
		if (typeof(localStorage) !== 'undefined'){
			var imageData = this.canvas.toDataURL();
			localStorage.setItem("myDrawing", imageData);
			window.location = this.canvas.toDataURL("image/png");
		}
	}
});
 
var Base = new Class({
	Extends: Application,
	initialize: function(canvas,context,lineWidth){
		this.parent(canvas); 
		this.parent(context);
		this.parent(lineWidth);
	},
	
	eraser: function(startX,startY,x,y,color){
		obj= this.context;
		obj.fillStyle   = '#8fa7b8';
		obj.strokeStyle = '#8fa7b8';
		obj.lineWidth   = 1;
		
		obj.beginPath();
		obj.fillRect(startX-x/2,startY-y/2,x,y);
		obj.closePath();
	},
	
	line: function(startX,startY,x,y, size,color){
		obj= this.context;
		if (!arguments[5] || typeof color != 'string'){
			obj.strokeStyle ='rgba(255, 255, 255, 1)';
		}else if (typeof color == 'string'){
			obj.strokeStyle = color
		};
		
		obj.lineWidth   = size;
		obj.beginPath();
		obj.moveTo(startX,startY);
		obj.lineTo(x,y);
		obj.stroke();
		obj.closePath();
	},
	
	caligraphy: function(startX,startY,x,y, size,color){
		obj= this.context;
		if (!arguments[5] || typeof color != 'string'){
			obj.strokeStyle ='rgba(255, 255, 255, 1)';
		}else if (typeof color == 'string'){
			obj.strokeStyle = color
		};
		
		for (i=0;i<10;i++){
			obj.lineWidth   = size + Math.sin(i*x);
			obj.beginPath();
			obj.moveTo(startX + i,startY + i + Math.random()*Math.sin(x));
			obj.lineTo(x+i,y-i);
			obj.stroke();
			obj.closePath();
		}
	},
	
	pen: function(startX,startY,x,y, size,color){
		obj= this.context;
		if (!arguments[5] || typeof color != 'string'){
			obj.strokeStyle ='rgba(255, 255, 255, 1)';
		}else if (typeof color == 'string'){
			obj.strokeStyle = color
		};
		
		for (i=0;i<6;i++){
			obj.lineWidth   = size + i;
			obj.lineJoin = "round";
			obj.beginPath();
			obj.moveTo(startX + Math.cos(x),startY - Math.sin(i));
			obj.lineTo(x+i,y-i);
			obj.stroke();
			obj.closePath();
		}
	},
	
	update: function(brush,color){
		if (arguments[0] != ''){
			document.getElementById('selectedBrushType').innerHTML = '' + brush;
		}
		document.getElementById('selectedColorType').innerHTML = '' + color;
	},
	
	//Function to change the current canvas brush type
	selectBrush: function(type,x,y,mouseX,mouseY,size,color){
		switch(type){
			case 'line':
				this.line(x,y,mouseX,mouseY,size,color);
				break;
			case 'pen':
				this.pen(x,y,mouseX,mouseY,size,color);
				break;
			case 'eraser':
				this.eraser(x,y,40,40,'#f0f0eb');
				break;
		}
	}
	
});

window.addEvent('domready',function(){

	var app = new Base();
	app.resize();
	
	var toolsOpen = true;
	var lineWidth = 1;
	var brush = 'line';
	var brushColor = 'rgba(255, 255, 255, 1)';
	//Set the update value on startup
	app.update('','');
	
	//Check if local storage data is available to us
	//If it is append the storage data to the canvas
	
	if (localStorage.getItem('myDrawing')) {
		var object = localStorage.getItem('myDrawing');
		try{	
			app.context.putImageData(object,0,0);
		}catch(e){
			console.log(e);
		}
	}
	
	$('save').addEvent('click',function(){
		localStorage.clear();
		app.saveData();
		return false;
	});
	
	$('canvas').addEvent('mousedown',function(e){
		x=e.page.x;
		y=e.page.y;
		mouseDown = true;
		
	});
	
	$('canvas').addEvent('mouseup',function(){
		mouseDown = false;
	});
	
	$('canvas').addEvent('mousemove',function(ev){
		if (mouseDown == true){
			var mouseX = ev.page.x;
			var mouseY = ev.page.y;
			app.selectBrush(brush,x,y,mouseX,mouseY,lineWidth,brushColor);
			x=mouseX;
			y=mouseY;
		}
	});
	
	//Brush Selection
	
	$('pencil').addEvent('click',function(){
		if (brush == 'line');
		brush = 'line';
		lineWidth = 1;
		app.update('','');
		return false;
	
	});
	
	$('pen').addEvent('click',function(){
		if (brush == 'line');
		brush = 'line';
		lineWidth = 4;
		app.update('','');
		return false;
	});
	
	$('eraser').addEvent('click',function(){
		if (brush == 'eraser');
		brush = 'eraser';
		lineWidth = 4;
		app.update('','');
		return false;
	});
	
	//End Brush Selection
	
	$$('#colors a').each(function(el,index){
		el.addEvent('click',function(){
			switch(index){
				
				case 0:
					brushColor = 'rgba(212, 20, 90, 1)';
					app.update('','');
				break;
				case 1:
					brushColor = 'rgba(251, 176, 59, 1)';
					app.update('','');
				break;
				case 2:
					brushColor = 'rgba(252, 238, 33, 1)';
					app.update('','');
				break;
				case 3:
					brushColor = 'rgba(140, 198, 63, 1)';
					app.update('','');
				break;
				case 4:
					brushColor = 'rgba(41, 171, 226, 1)';
					app.update('','');
				break;
				case 5:
					brushColor = 'rgba(147, 39, 143, 1)';
					app.update('','');
				break;
				case 6:
					brushColor = '#fff';
					app.update('','');
				break;
			}
		
			return false;
		});
	
	});
	
	$('handle').addEvent('click',function(){
		if (toolsOpen == false){
			$('tools').tween('right','-130');
			toolsOpen = true;
		}else{
			$('tools').tween('right','0');
			toolsOpen = false;
		}
		return false;
	});
	
	$('clearCanvas').addEvent('click',function(){
		app.canvas.width = app.canvas.width;
		return false;
	});
});