var picTools={img:false,imgInfo:[],cv:false,dSS:'rgba(200,200,200,0.4)',arrTools:[],
init:function(ei){this.img = doc.getElementById(ei[0]); this.imgInfo = {w:ei[1], h:ei[2], fw:ei[3], fh:ei[4], imgId:ei[1], toggleStatus:0};
this.cv=this.addCvs()[0];this.cv.style.display='none';this.bouwMenu(ei[5]);},
diag:{s:false,cv:false,cx:false,w:0,h:0,inited:false,init:function(){var aCvs=picTools.addCvs();this.cv=aCvs[0];this.cx=aCvs[1];picTools.arrTools.push(this);this.inited=true;},
showOrHide:function(){if (!this.inited) this.init();picTools.setMatenPos(this);  
if(!this.s){this.cx.beginPath();this.cx.lineWidth=4;this.cx.strokeStyle = picTools.dSS;
this.cx.moveTo(0,0); this.cx.lineTo(this.w,this.h);this.cx.moveTo(this.w,0); this.cx.lineTo(0,this.h); this.cx.stroke(); this.cx.closePath();this.s = true;}else{this.cx.clearRect(0,0,this.w,this.h);this.s=false;}}},
grid:{s:false,cv:false,cx:false,w:0,h:0,inited:false,n:3,init:function(){var aCvs=picTools.addCvs();this.cv=aCvs[0];this.cx = aCvs[1];picTools.arrTools.push(this);this.inited=true;},
showOrHide:function () {if (!this.inited) this.init();picTools.setMatenPos(this);var ww=this.w/this.n,hh=this.h/this.n;
if(!this.s){this.cx.beginPath();this.cx.strokeStyle=picTools.dSS;this.cx.lineWidth = 3; 
for (var i=1;i<this.n;i++){this.cx.moveTo(i*ww,0);this.cx.lineTo(i*ww,this.h);this.cx.moveTo(0,i*hh);this.cx.lineTo(this.w, i*hh);}this.cx.stroke(); this.cx.closePath(); this.s = true;
}else{this.cx.clearRect(0,0,this.w,this.h); this.s = false;}}},
cirkel:{s:false,cv:false,cx:false,w:0,h:0,inited:false,init:function(){var aCvs=picTools.addCvs();this.cv=aCvs[0];this.cx=aCvs[1];picTools.arrTools.push(this);this.inited=true;},
showOrHide:function (){if (!this.inited) this.init();picTools.setMatenPos(this);
var d=Math.round(Math.max(this.w,this.h)/4);if(!this.s){this.cx.lineWidth=3;this.cx.arc(this.w/2,this.h/2,d,0,(Math.PI/180)*360,true);this.cx.strokeStyle=picTools.dSS;this.cx.stroke();this.s=true;
}else{this.cx.clearRect(0,0,this.w,this.h); this.s = false;}}},
setMatenPos:function(o){o.w=picTools.img.clientWidth;o.h=picTools.img.clientHeight;o.cv.style.width=o.w+'px';o.cv.style.height=o.h+'px';o.cv.width=o.w;o.cv.height=o.h;o.cv.style.left=picTools.img.offsetLeft+'px';o.cv.style.top=picTools.img.offsetTop+'px';},
addCvs:function(){var cv=doc.createElement('canvas');cv.style.position = 'absolute';this.img.parentNode.appendChild(cv);
if (typeof G_vmlCanvasManager != "undefined") {G_vmlCanvasManager.initElement(cv);cv=this.img.parentNode.lastChild;}
if (cv.attachEvent) {cv.attachEvent('onclick',cbDoImgKlik);}
else if (cv.addEventListener) {cv.addEventListener('click',cbDoImgKlik,false);}return [cv, cv.getContext('2d')];},
redrawTools:function(){for (var i in this.arrTools){this.arrTools[i].s=false;this.arrTools[i].showOrHide();}},
bouwMenu : function(elPlek) {var sep=' | ';elPlek.innerHTML+='&nbsp;&nbsp;&nbsp;zoom ';elPlek.appendChild(this.bouwLink('25% larger', '+++', 'cbZoom(1.25);return false;'));elPlek.innerHTML+=sep;
elPlek.appendChild(this.bouwLink('25% smaller','---','cbZoom(0.75);return false;'));elPlek.innerHTML+=sep;
if (this.imgInfo.fw > this.imgInfo.w + 25){elPlek.appendChild(this.bouwLink('full size','100%','cbSetsize('+this.imgInfo.fw+','+this.imgInfo.fh+');return false;'));elPlek.innerHTML+=sep;
this.img.style.cursor = 'pointer'; this.img.title='click for full size';
if (this.img.attachEvent) {this.img.attachEvent('onclick', cbDoImgKlik);}else if (this.img.addEventListener) {this.img.addEventListener('click',cbDoImgKlik,false);}}
elPlek.appendChild(this.bouwLink('reset','reset','cbSetsize('+this.imgInfo.w+','+this.imgInfo.h+');return false;'));elPlek.innerHTML+='';
if (this.cv.getContext) {elPlek.innerHTML+=sep + 'tools ';elPlek.appendChild(this.bouwLink('show diagonals', '<img src="/pix/canvas_diag.png" width="11" height="11" alt="diagonals">','cbTool("diag");return false;'));elPlek.innerHTML+=sep;
elPlek.appendChild(this.bouwLink('show grid', '<img src="/pix/canvas_grid.png" width="11" height="11" alt="grid">', 'cbTool("grid"); return false;'));elPlek.innerHTML+=sep;
elPlek.appendChild(this.bouwLink('show center circle', '<img src="/pix/canvas_circ.png" width="11" height="11" alt="circle">', 'cbTool("cirkel"); return false;'));elPlek.innerHTML+='';}},
bouwLink:function(t,i,c){var l=doc.createElement('a');l.href='#';l.title=t;l.innerHTML=i;l.setAttribute('onclick',c);return l;},
doImgKlik:function(){if(this.imgInfo.toggleStatus==1){this.setsize(this.imgInfo.w,this.imgInfo.h);this.imgInfo.toggleStatus=0;this.img.title='click for full size';} 
else {this.setsize(this.imgInfo.fw,this.imgInfo.fh);this.imgInfo.toggleStatus=1;this.img.title='click to reset';}},
setsize:function(w,h){this.img.width=Math.round(w);this.img.height=Math.round(h);this.img.parentNode.parentNode.style.width=Math.round(w)+2+'px';this.redrawTools();},
zoom:function(z){this.setsize(this.img.width*z,this.img.height*z);}};
function picTools_init(){var pA=[];for(var i=0,elL=ptEls.length;i<elL;i++){pA[i]=picTools;pA[i].init(ptEls[i]);}}
function cbZoom(z){return picTools.zoom(z)}
function cbSetsize(w,h){return picTools.setsize(w,h)}
function cbDoImgKlik(){return picTools.doImgKlik()}
function cbTool(tool){return picTools[tool].showOrHide();}