/**
 * @ref http://mrdoob.com/lab/javascript/harmony
 * 
 * v0.1 - 10 March 2010
 *    - for changes from original, see extras.js (Moos) 
 */

			// Sketchy, Shaded, Chrome, Fur, LongFur and Web are variations of the idea of connecting neightbour points
			// first implemented (afaik) by Ze Frank's The Scribbler (http://www.zefrank.com/scribbler/)

			var STYLES = ["sketchy", "shaded", "chrome", "fur", "longfur", "web", "", "squares", "ribbon", "", "circles", "grid"];
							// note: ":label" will create a optgroup with given label

			var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight;

			var container, menu, selector;
			var saveButton, clearButton;
			var canvas, context;
			var style;

			var mouseX = 0, mouseY = 0;
			var isMenuMouseOver = false, isMouseDown = false, 
				notMultiTouch = true, mouseMoved = false, styleIndex=0;;

			function init()
			{
				container = document.getElementById('container');

				menu = document.getElementById('menu');
				menu.style.left = ((SCREEN_WIDTH - menu.offsetWidth) / 2) + 'px';
				menu.style.visibility = 'visible';
				menu.addEventListener('mouseover', onMenuMouseOver, false);
				menu.addEventListener('mouseout', onMenuMouseOut, false);

				canvas = document.createElement("canvas");
				canvas.width = SCREEN_WIDTH;
				canvas.height = SCREEN_HEIGHT;
				canvas.style.cursor = 'crosshair';
				container.appendChild(canvas);

				context = canvas.getContext("2d");
				context.fillStyle = "rgb(255, 255, 255)";
				context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

				saveButton = document.getElementById('save');
				saveButton.addEventListener('click', save, false);

				clearButton = document.getElementById('clear');
				clearButton.addEventListener('click', clear, false);

				selector = document.getElementById('selector');
				selector.addEventListener('change', onSelectorChange, false);

				var group = selector;
				for (var i = 0; i < STYLES.length; i++)
				{
					if (STYLES[i] == '' || STYLES[i][0] == ':') {
						// close previous group if any
						if (group && group != selector) 
							selector.appendChild(group);
						
						// open new group
						group = document.createElement('optgroup');
						group.label =  STYLES[i][0] == ':' ?  STYLES[i].substr(1) : '';
						continue;
					}
					var option = document.createElement("option");
					option.value = i;
					option.innerHTML = STYLES[i].toUpperCase();
					group.appendChild(option);
				}
				if (group && group != selector) 
					selector.appendChild(group);


				if (window.location.hash)
				{
					var hash = window.location.hash.substr(1,window.location.hash.length);

					for (var i = 0, j=0; i < STYLES.length; i++)
					{
						// skip blank / optgroup
						if (STYLES[i] == '' || STYLES[i][0] == ':') {
							continue;
						}
						if (hash == STYLES[i])
						{
							style = eval("new " + STYLES[i] + "(context)");
							selector.selectedIndex = j;
							styleIndex = i;
							break;
						}
						j++;
					}
				}

				if (!style)
				{
					style = eval("new " + STYLES[0] + "(context)");
				}

				document.onmousedown = onDocumentMouseDown;
				document.onmouseout = onCanvasMouseUp;

				canvas.onmousedown = onCanvasMouseDown;
				canvas.onmouseup = onCanvasMouseUp;
				canvas.onmousemove = onCanvasMouseMove;

				canvas.ontouchstart = onCanvasTouchStart;
				canvas.ontouchend = onCanvasTouchEnd;
				canvas.ontouchmove = onCanvasTouchMove;
			}

			function onDocumentMouseDown(e)
			{
				return isMenuMouseOver;
			}

			function onSelectorChange(e)
			{
				var sel = selector.selectedIndex
					index = selector.options[sel].value,
					value = STYLES[index];
				if (value == "")
					return;

				styleIndex = index;
				style.destroy();
				style = eval("new " + value + "(context)");
				window.location.hash = value;
			}

			function onMenuMouseOver(e)
			{
				isMenuMouseOver = true;
			}

			function onMenuMouseOut(e)
			{
				isMenuMouseOver = false;
			}

			function ondocumentMouseDown(e)
			{
				return !isMenuMouseOver;
			}

			function onCanvasMouseDown(e)
			{
				isMouseDown = true;
				mouseMoved = false;

				style.strokeStart( mouseX, mouseY );
			}

			function onCanvasMouseUp(e)
			{

				style.strokeEnd( mouseX, mouseY );
				
				if (isMouseDown && mouseMoved) autoSave();		// Moos

				isMouseDown = false;
			}

			function onCanvasMouseMove(e)
			{
				if (!e) var e = window.event;
				mouseX = e.clientX;
				mouseY = e.clientY;

				if (!isMouseDown)
					return;

				style.stroke( mouseX, mouseY );
				mouseMoved = true;
			}

			function onCanvasTouchStart(e)
			{
				notMultiTouch = e.touches.length == 1;
				if(notMultiTouch )
				{
					var touch = e.targetTouches[0];
					style.strokeStart( touch.pageX, touch.pageY );
					return false;
				}
				//return false;
			}

			function onCanvasTouchEnd(e)
			{
				if(notMultiTouch) // && e.touches.length == 1) touchend usually returns 0 touches!
				{
					var touch = e.touches.length == 1 ? e.touches[0] : e;
					style.strokeEnd( touch.pageX, touch.pageY );
					
					autoSave();		// Moos
					
					return false;
				}
			}

			function onCanvasTouchMove(e)
			{
				if(notMultiTouch && e.touches.length == 1)
				{
					var touch = e.targetTouches[0];
					style.stroke( touch.pageX, touch.pageY );
					return false;
				}
			}

			function save()
			{
				saveLocal();
				window.open(canvas.toDataURL("image/png"),'mywindow');
			}

			function clear()
			{
				context.globalCompositeOperation = 'source-over';
				context.fillStyle = "rgb(255, 255, 255)";
				context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

				style = eval("new " + STYLES[styleIndex] + "(context)");

				points = new Array();
				count = 0;

				clearState();		// Moos
			}


//			init(); // heh!