//##############################
//variabelen
//####################################

//wat elementen in een object gooien
var canvasdiv = document.getElementById('canvasdiv');
var headerdiv = document.getElementById('headerdiv');
var footerdiv = document.getElementById('footerdiv');

var penseel = document.getElementById('penseel');
var kwast = document.getElementById('kwast');
var roller = document.getElementById('roller');
var gummetje = document.getElementById('gum');
var undo_button = document.getElementById('undo_button');
var redo_button = document.getElementById('redo_button');
var kleurplaatbutton = document.getElementById('kleurplaatbutton');
var newbutton = document.getElementById('newbutton');
var kieskleurplaat_div = document.getElementById('kieskleurplaat_div');
var temp_div = document.getElementById('temp');

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0];

var docwidth; 
if(w.innerWidth>0){docwidth = w.innerWidth;}else if(e.clientWidth>0){docwidth = e.clientWidth;} else {docwidth = g.clientWidth;}  
var docheight;
if(w.innerHeight>0){docheight = w.innerHeight;}else if(e.clientWidth>0){docheight = e.clientHeight;} else {docheight = g.clientHeight;}  



//var  canvas = document.getElementById('canvas');
// standaard settings

var headerheight = 50;
var backgroundcolour = "#ffffff";
var headerbackgroundcolour = "#111111";
var Colourspacing = 60;
var Headerspacing = 60;
var Toolradius = 20;

var Activecolour = '#0000FF';
var ActiveOpacity = 0.8;
//radius van de colour buttons

//voor de kleuren
var Colours = new Array();

Colours[1] = '#000000';
Colours[2] = '#666666';
Colours[3] = '#FFFFFF';
Colours[4] = '#0000FF';
Colours[5] = '#00dddd';
Colours[6] = '#009900';
Colours[7] = '#00FF00';
Colours[8] = '#FFFF00';
Colours[9] = '#FF8800';
Colours[10] = '#FF0000';
Colours[11] = '#aa00aa';
Colours[12] = '#ff00ff';

//voor de radius

var Radius = new Object();
Radius.penseel = 4;
Radius.kwast = 10;
Radius.roller = 25;
var Activeradius = 10;

// per getekend onderdeel de coordinaten  vastleggen, of er heen gesleept is en de kleur
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var strokeColour = new Array();
var strokeRadius = new Array();
var strokeOpacity = new Array();

var paint;
var gum = false;
var lastMousedown;
var drawing = false;

// Deze worden gebruikt om aan te geven waar gestart en geeindigd moet worden met tekenen
var StartID;

var EindID = 1;
// de eindID wordt terug gezet bij undo
var xDistance;
//gebruikt om de lijn goed op te vullen
var yDistance;
//gebruikt om de lijn goed op te vullen
var maxDistance;

var newtest;
//wordt op 1 gezet als de pagina leeg moet worden gegooid.

var kleurplaaturl;
var kleurplaatheight;
var kleurplaatwidth;
var kleurplaatXoffset;
var kleurplaatYoffset;
//##############################
//loaders
//####################################

initCanvas();
Drawcolours();
setCSS();
rePosition();

//##############################
//event handlers
//####################################
attachHandlers();
//voor de canvas handlers
attachColourhandlers();

// prevent elastic scrolling
if(navigator.platform == "iPad") {
	document.body.addEventListener('touchmove', function(event) {
		event.preventDefault();
	}, false);
	// end body:touchmove
}