(function($) {
	$(window).on('load', function() {
	
		// resize event 호춣
		// $( window ).resize(function() {
		// 	fixCanvasForPPI(window.innerWidth, window.innerHeight);
		// });
	
		
	// Set globals
	var painter = {
		$canvas: $('#painterCanvas'),
		color: 'blue light',
		press: false,
		last: new Image(),
		hist: [],
		undoHist: [],
		clicks: 0,
		start: false
	};
	
	// function fixCanvasForPPI(width, height) {
		
	// 	$("#canvas").css({
	// 		'width': width.toString() + 'px',
	// 		'height': height.toString() + 'px'
	// 	});
	// }
	
	function updateCanvasSize() {
	
		var image = painter.$canvas.getCanvasImage('image/png');
		painter.canvasW = screen.availWidth;
		painter.canvasH = screen.availHeight;
	
		painter.$canvas.prop({
			width: painter.canvasW,
			height: painter.canvasH
		});
		
	//	painter.$canvas.detectPixelRatio();
	//
	//	if (image.length > 10) {
	//
	//		painter.$canvas.drawImage({
	//			source: image,
	//			x: 0, y: 0,
	//			width: painter.canvasW, height: painter.canvasH,
	//			fromCenter: false
	//		});
	//
	//	}
		
	}
	
	var $$ = {
		stroke: $('#stroke'),
		strokeContainer: $('#stroke-container'),
		box: $('#box'),
		tools: $('#tools'),
		clear: $('#clear'),
		slider: $('#slider'),
		colors: $('#colors'),
		brush: $('#brush'),
		path: $('#path'),
		rect: $('#rect'),
		ellipse: $('#ellipse'),
		undo: $('#undo'),
		redo: $('#redo'),
		save: $('#save'),
		init : $('#init')
	};
	
	var duration;
	
	// Map standard mouse events to touch events
	var mouseEventMap = {
		'mousedown': 'touchstart',
		'mouseup': 'touchend',
		'mousemove': 'touchmove'
	};
	
	// Convert mouse event name to a corresponding touch event name (if possible)
	function getTouchEventName(eventName) {
		// Detect touch event support
		if (window.ontouchstart !== undefined) {
			if (mouseEventMap[eventName]) {
				eventName = mouseEventMap[eventName];
			}
		}
		return eventName;
	}
	painter.getTouchEventName = getTouchEventName;
	
	function getPageCoords(event) {
		if (event.originalEvent.changedTouches) {
			return {
				pageX: event.originalEvent.changedTouches[0].pageX,
				pageY: event.originalEvent.changedTouches[0].pageY
			};
		} else {
			return {
				pageX: event.pageX,
				pageY: event.pageY
			};
		}
	}
	painter.getPageCoords = getPageCoords;
	
	// Clear canvas and set background
	function clearCanvas() {
	
		// context
		var ctx = $("#painterCanvas")[0].getContext("2d");
		
		// pixcel 정리
		ctx.clearRect(0,0,$("#painterCanvas")[0].width, $("#painterCanvas")[0].height);
			
		// history clear
		painter.hist = [];
		painter.undoHist = [];
	}
	
	painter.clearCanvas = clearCanvas;
	
	function drawCanvasState(image) {
		painter.$canvas.clearCanvas();
		painter.$canvas.drawImage({
			source: image,
			x: 0, y: 0,
			width: painter.canvasW, height: painter.canvasH,
			fromCenter: false
		});
	}
	
	// UPDATE STROKE
	function updateStroke() {
		$$.stroke.width(painter.stroke);
		$$.stroke.height(painter.stroke);
		// $$.stroke.css({
		// 	marginLeft: ($$.box.width() - $$.stroke.width()) / 2,
		// 	marginTop: ($$.box.height() - $$.stroke.height()) / 2
		// });
	if (painter.start === false) {
		$$.stroke.css({backgroundColor: painter.color});
		painter.start += 1;
	} else if (painter.start === true) {
		$$.stroke.stop().animate({backgroundColor: painter.color}, duration);
	}
		painter.start = true;
	}
	
	/*var colorMap = {
		red: {
			dark: '#a11',
			medium: '#c33',
			light: '#e55'
		},
		green: {
			dark: '#4b1',
			medium: '#6d2',
			light: '#8f4'
		},
		blue: {
			dark: '#14b',
			medium: '#36d',
			light: '#58f'
		},
		orange: {
			dark: '#d51',
			medium: '#f73',
			light: '#f95'
		},
		yellow: {
			dark: '#ed2',
			medium: '#fe3',
			light: '#ff5'
		},
		purple: {
			dark: '#75d',
			medium: '#96f',
			light: '#b8f'
		},
		black: {
			dark: '#000',
			medium: '#999',
			light: '#fff'
		}
	};*/
	var colorMap = {
			white: {
				light: '#fff'
			},
			black: {
				light: '#222'
			},
			red: {
				light: '#FD4418'
			},
			blue: {
				light: '#2F77FF'
			},
			sky: {
				light: '#00ccff'
			},
			green: {
				light: '#00D56A'
			},
			yellow: {
				light: '#FFCE00'
			}
		};
		var colors = ['black', 'red', 'yellow', 'green', 'blue', 'white'];
		var shades = ['light'];
	
	
	// ADD COLORS
	function addColors() {
		var color, c, s;
		function addColor(color, shade) {
			if (colorMap[color] && colorMap[color][shade]) {
				$('<div class="color ' + color + ' ' + shade + '" />')
				.css({
					backgroundColor: colorMap[color][shade]
				})
				.appendTo('#colors');
			}
		}
		for (s = 0; s < shades.length; s += 1) {
			for (c = 0; c < colors.length; c += 1) {
				color = colors[c];
				addColor(color, shades[s]);
			}
		}
	}
	// APPLY CHOSEN COLOR
	function getColor(swatch) {
		var info = swatch.split(' ');
		swatch = $('.' + info[0] + '.' + info[1]);
		swatch.addClass('chosen');
		painter.color = swatch.css('backgroundColor');
		updateStroke();
	}
	// FILL SLIDER
	function fillSlider(percent) {
		var sliderH = $$.slider.height(),
			filler = $$.slider.children('#filler');
		filler.height(sliderH * (percent / 100));
	}
	
	// CHOSEN TOOL
	$$.tools.on('click', '.tool', function() {
		$$.tools.find('.chosen').removeClass('chosen');
		$(this).addClass('chosen');
	});
	// CLEAR CANVAS BUTTON
	$$.clear.on('click', function() {
		painter.$canvas.trigger('mouseup');
		painter.last.src = painter.$canvas[0].toDataURL('image/png');
		painter.hist.push(painter.last.src);
		clearCanvas();
		painter.clicks = 0;
	});
	// SAVE PICTURE BUTTON
	$$.save.on('click', function() {
		var dataURL = painter.$canvas[0].toDataURL('image/png');
		painter.$canvas.mouseup();
		window.open(dataURL);
	});
	// UNDO BUTTON
	$$.undo.on('click', function() {
		painter.$canvas.mouseup();
		if (painter.hist.length > 0) {
			painter.clicks = 0;
			painter.undoHist.push(painter.$canvas[0].toDataURL('image/png'));
			var last = painter.hist.pop();
			drawCanvasState(last);
		}
	});
	$$.redo.on('click', function () {
		painter.$canvas.mouseup();
		if (painter.undoHist.length > 0) {
			painter.clicks = 0;
			var last = painter.undoHist.pop();
			painter.hist.push(painter.$canvas[0].toDataURL('image/png'));
			drawCanvasState(last);
		}
	});
	
	// PAINT TOOL BUTTON
	$$.brush.on('click', function() {
		painter.$canvas.brushTool(painter);
	});
	// PATH TOOL BUTTON
	$$.path.on('click', function() {
		painter.last.src = painter.$canvas[0].toDataURL('image/png');
		painter.$canvas.pathTool(painter);
	});
	// RECT TOOL BUTTON
	$$.rect.on('click', function() {
		painter.last.src = painter.$canvas[0].toDataURL('image/png');
		painter.$canvas.rectTool(painter);
	});
	// ELLIPSE TOOL BUTTON
	$$.ellipse.on('click', function() {
		painter.last.src = painter.$canvas[0].toDataURL('image/png');
		painter.$canvas.ellipseTool(painter);
	});
	// DEFAULT TOOL
	$$.brush.click();
	
	// CHOOSE COLOR
	addColors();
	getColor(painter.color);
	$$.colors.on('click', '.color', function() {
		var $color = $(this);
		$('.color.chosen').removeClass('chosen');
		getColor($color.prop('class').replace(/(color|chosen) /gi, ''));
		$color.addClass('chosen');
		painter.clicks = 0;
		return false;
	});
	
	if( $$.slider.slider != undefined ){
		// SLIDER
		$$.slider.slider({
			min: 1,
			max: 40,
			value: 33,
			orientation: "vertical"
		});
		var startVal = $$.slider.slider('option', 'value');
		fillSlider(startVal);
		painter.stroke = 41 - Math.round(startVal);
		updateStroke();
	}
	
	// SLIDE TO CHANGE STROKE
	$$.slider.bind('slide', function(event, ui) {
		var percent = ui.value;
		painter.stroke = 41 - Math.round(percent);
		updateStroke();
		fillSlider(percent);
	});
	
	//CLEAR CANVAS BUTTON
	$$.clear.on('click', function() {
		painter.$canvas.trigger('mouseup');
		painter.last.src = painter.$canvas[0].toDataURL('image/png');
		painter.hist.push(painter.last.src);
		clearCanvas();
		painter.clicks = 0;
	});
	
	//INIT BRUSH BUTTON
	$$.init.on('click', function() {
		initBrushSize();
	});
	
	//init brush size
	function initBrushSize() {
		fillSlider(startVal);
		painter.stroke = 41 - Math.round(startVal);
	}
	
	updateCanvasSize();
	clearCanvas();
	
	});
}(jQuery, {}));