var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
var height = canvas.height = window.innerHeight;
var width = canvas.width = window.innerWidth;
var mouseClicked = false, mouseReleased = true;
var  x0 = 50;
  y0 = 30;
  bredd =40;
  hojd = 40;
  distance = 40;
  color = "green";
  radie = 10;
  size = 22;

document.addEventListener("click", onMouseClick, false);
document.addEventListener("mousemove", onMouseMove, false);
function onMouseClick(e) {
    mouseClicked = !mouseClicked;
}
function onMouseMove(e) {
    if (mouseClicked) {
        context.beginPath();
        context.arc(e.clientX, e.clientY, 7.5, 0, Math.PI * 2, false);
        context.lineWidth = 5;
        context.strokeStyle = color;
        context.fill();
        context.stroke();
        context.fillStyle = color;
    }
//en mouse over-funktion
if ((e.clientX > x0) && (e.clientX < x0 + bredd) && (e.clientY > y0)
      && (e.clientY < y0 + hojd))  { color = "green"; }
}

// H�r b?rjar koden inspirerad av spelprogrammering.nu


function myRectangle(x, y, w, l, color)
{
   context.fillStyle = color
   context.fillRect(x, y, w, l);
}

function myText(x, y, size, text, color)
{
  context.font = size + "pt Helvetica";
  context.fillStyle = color;
  context.fillText(text, x, y);
}

// rita de f?rgade rutorna
   this.myRectangle(x0, y0, bredd, hojd, "green");
   this.myText(x0-30, y0 + distance-15, 18, "g", "green");


   function blueColor(){
   this.myRectangle(x0, y0 + distance, bredd, hojd, "blue");
   this.myText(x0-30, y0 + distance+25, 18, "b", "blue");
   }
   function yellowColor(){
   this.myRectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");
   this.myText(x0-30, y0 + distance+65, 18, "y", "yellow");
   }
   function pinkColor(){
   this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink");
   this.myText(x0-30, y0 + distance+105, 18, "p", "pink");
   }
   function purpleColor(){
   this.myRectangle(x0, y0 + 4 * distance, bredd, hojd, "purple");
   this.myText(x0-30, y0 + distance+145, 18, "k", "purple");
   }
   function whiteColor(){
   this.myRectangle(x0, y0 + 5 * distance, bredd, hojd, "white");
   this.myText(x0-30, y0 + distance+185, 18, "w", "white");
   }
  function Eraser(){
   this.myText(x0-30, y0 + distance+225, 18, "e  Eraser", "white");
   }

   this.myText(x0-30, y0 + distance+265, 18, "c  Clear", "white");
// v?lj f?rg att rita med
window.addEventListener('keydown',this.check,false);

// function check(e) {
//    alert(e.keyCode);
//}

function check(e) {
    var code = e.keyCode
// �ndra f�rg
    if (code == 71)        //Om knappen trycks så ändras färg till en bestämd färg
        color = "green";
    if (code == 66)
        color = "blue";
    if (code == 89)
        color = "yellow";   // Ex. 80 står för knappen "P". If you press "P" color = "pink"
    if (code == 80)
        color = "pink";
    if (code == 75)
        color = "purple";
    if (code == 87)
       color = "white";
    if (code == 69)
       color = "black";
// �ndra radie
if (code == 49)
    radie = 1;
if (code == 50)
    radie = 10;
}

//ta bort allt
if (code == 67)
  window.location.reload();