//functies

function attachHandlers(){
       
 if (navigator.platform=="iPad") {       
        canvasdiv.addEventListener('touchstart',handleTouch, false);
        canvasdiv.addEventListener('touchmove',handleTouch, false);
        canvasdiv.addEventListener('touchend',handleTouch, false);
       }

if (navigator.platform!="iPad"){
       canvasdiv.addEventListener('mousedown',handleMouse, false);
       canvasdiv.addEventListener('mousemove',handleMouse, false);
       canvasdiv.addEventListener('mouseup',handleMouse, false);
        canvasdiv.addEventListener('mouseout',handleMouse, false);
        }
}
  

function handleTouch(event){


   var x = event.targetTouches[0].pageX;
   var y = event.targetTouches[0].pageY-headerheight;   
   
    if(event.type=="touchstart") {
      drawing=true;
      dragging=false;
   }  
 
   if(event.type=="touchmove") {
      dragging=true;
   }
   
    if(event.type=="touchend") {
      drawing=false;
      dragging=false;
   }  
    
   
   if(drawing) {addClick(x,y,dragging);}
} 

function handleMouse(event){


   var x = event.clientX;
   var y = event.clientY-headerheight;   


    if(event.type=="mousedown") {
      drawing=true;
      dragging=false;
   }  
 
   if(event.type=="mousemove") {
      dragging=true;
   }
   
    if(event.type=="mouseup") {
      drawing=false;
      dragging=false;
   }  
   
    if(event.type=="mouseout") {
      drawing=false;
      dragging=false;
   }  
   
   if(drawing) {addClick(x,y,dragging);}
}
  
  
 function addClick(x,y,dragging)      // deze functie breidt alle matrices uit voor tekenacties
{

  if(EindID<clickX.length) {   // als er een undo is geweest dan moeten we eerst wat weggooien
  

      clickX.length  = EindID;
      clickY.length  = EindID;
      clickDrag.length  = EindID;
      strokeColour.length  = EindID;
      strokeRadius.length  = EindID;      
  }

  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
  if(!gum){
    strokeColour.push(Activecolour);
  } else {
    strokeColour.push(backgroundcolour);
  }
  strokeRadius.push(Activeradius);
  redraw(EindID, clickX.length);
  EindID=clickX.length;   //EindID is de pointer, die geeft aan tot waar getekend moet worden.

  
}

function undo(){


   if (EindID) EindID--;  // zowiezo 1 actie verwijderen 
   while (clickDrag[EindID] && EindID>0) {      //en alles verwijderen dat behoort bij een sleepactie
      EindID--;
   }
  redraw(0,EindID); 
}

function redo(){

   if (EindID<clickX.length) EindID++;
   while (clickDrag[EindID] && EindID<clickX.length)  {
      EindID++;
   }
  redraw(0,EindID); 
}

 function redraw(StartID, EindID){
   if (!StartID) {     
      StartID = 0;
      canvas.width = canvas.width;

   }
   
   if (EindID==undefined){
      EindID=clickX.length;
   }
  //canvas.width = canvas.width; // Clears the canvas
  

  context.lineJoin = "round";
  context.lineCap= "round";
			
  for(var i=StartID; i < EindID; i++)
  {		
    context.strokeStyle = strokeColour[i];
    context.fillStyle = strokeColour[i];
    context.lineWidth = strokeRadius[i];
    
    context.beginPath();
    
    
    if(clickDrag[i] && i){

          context.moveTo(clickX[i-1], clickY[i-1]);
          context.lineTo(clickX[i], clickY[i]);
          
          if(navigator.platform=="iPad"){
            xDistance =  clickX[i] - clickX[i-1];
            yDistance =  clickY[i] - clickY[i-1];
               
                if(xDistance/yDistance>2){   
                    context.lineTo(clickX[i]-1, clickY[i]);
                    context.lineTo(clickX[i]+1, clickY[i]);
                }else if(xDistance/yDistance>0.5){
                    context.lineTo(clickX[i]-1, clickY[i]-1);
                    context.lineTo(clickX[i]+1, clickY[i]+1);
                }else if(xDistance/yDistance>-0.5){
                    context.lineTo(clickX[i], clickY[i]-1);
                    context.lineTo(clickX[i], clickY[i]+1);
                }else if(xDistance*yDistance>-2){
                    context.lineTo(clickX[i]+1, clickY[i]-1);
                    context.lineTo(clickX[i]-1, clickY[i]+1); 
                }else{
                    context.lineTo(clickX[i]-1, clickY[i]);
                    context.lineTo(clickX[i]+1, clickY[i]);
                }             
               }
               
              context.stroke();
     }else{
       context.moveTo(clickX[i]-1, clickY[i]-1);
      context.lineTo(clickX[i]+1, clickY[i]+1);
      context.lineTo(clickX[i]-1, clickY[i]+1);
      context.lineTo(clickX[i]+1, clickY[i]-1);
      context.stroke();
     }
     

  }
            if (kleurplaatimg.src!=""){
                    context.drawImage(kleurplaatimg, kleurplaatXoffset, kleurplaatYoffset,kleurplaatwidth,kleurplaatheight);
                }
}