//utils
function id(name) { return document.getElementById(name) }

//global variables

var canvas;
var ctx;
var last={valid: false ,x:0,y:0};
var penMode=false;
var pointList=new Array();

function draw() {

 var starttime=new Date();


 canvas = document.getElementById("canvas");
 ctx = canvas.getContext("2d");

 if(ctx.getDataURL!="undefined") {
 
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "rgba(0,0,0,1)";

ctx.lineWidth=2;

canvas.onmousemove=setPixel;
canvas.onmouseout=leaveCanvas;

//canvas.onkeydown=keyPress; //DOES not work on FF :-(

//document.onkeydown=keyPress;
 
//alert(id("textarea").style.width);
//setMode(id("eintragstyp"));

//id("scribblermenu").disabled=false;
document.getElementsByTagName("option")[2].disabled=false;

}


}

function save() {
open(canvas.toDataURL());
}


//handler for option

function setMode(select) {
 wert=select.options[select.options.selectedIndex].value;
 if(wert<2) showText();
 else showCanvas();
}

function showText() {
  canvas.style.visibility="hidden";
  id("textarea").style.visibility="visible";
  
  document.onkeydown=null;
}

function showCanvas() {

  canvas.style.visibility="visible";
  id("textarea").style.visibility="hidden";

  document.onkeydown=keyPress;
}

function leaveCanvas(e) {
 last.valid=false;
}

//handler for mouseclicks
function togglePenMode(e) {
 penMode=~penMode;
 if(penMode) {
   canvas.style.cursor="crosshair";
   pointList=new Array();
 }
 else {
   canvas.style.cursor="default";
   last.valid=false;
 }
 
 
}

//handler for mousemove
function setPixel(e) {
var x,y;
if(penMode) {

if(e.offsetX) {
x=e.offsetX;
y=e.offsetY;
}
else {
x=e.layerX-canvas.offsetLeft;
y=e.layerY-canvas.offsetTop;
}

pointList.push({x:x,y:y});

if(last.valid) {
ctx.beginPath();
ctx.moveTo(last.x,last.y);
ctx.lineTo(x,y);
ctx.stroke();
last.x=x;
last.y=y;
//ctx.fillRect(x,y,1,1);
}
else {
  last.x=x;
  last.y=y;
  last.valid=true;
}

}
e.stopPropagation();
return false; //dont pass clicks along
}

//we need to find a way to stop propagation (in Opera)
function keyPress(e) {
// alert("hurra taste");
var palette=[   "rgba(0,0,0,1)",
		"rgba(0,0,0,1)",
		"rgba(255,255,255,1)",
		"rgba(104,55,43,1)",
		"rgba(112,164,178,1)",
		"rgba(111,61,134,1)",
		"rgba(88,141,67,1)",
		"rgba(53,40,121,1)",
		"rgba(184,199,111,1)",
		"rgba(0,0,0,1)"
	    ];
	    
if(e.keyCode>=48 && e.keyCode<=58) { //;
// alert(e.keyCode);  
 ctx.strokeStyle=palette[e.keyCode-48];
 ctx.fillStyle=palette[e.keyCode-48];
// stopPropagation();
 return false;
}
else {
 if(e.keyCode==61) {
   if(ctx.lineWidth<10) ctx.lineWidth+=1;
   return false;
 }
 if(e.keyCode==109) {
   if(ctx.lineWidth>1) ctx.lineWidth-=1;
   return false;
 }
}
if(e.keyCode==70) {
// alert(pointList);
  if(pointList.length>0) {  
  ctx.beginPath();
  ctx.moveTo(pointList[0].x,pointList[0].y);
  for(var i=1;i<pointList.length;i++) {
    ctx.lineTo(pointList[i].x,pointList[i].y);
  }
  ctx.fill();
  pointList=new Array();
  }
    
}


return true;
}