// world.js
// RJM Programming
// March, 2016
// Help out world.html and others like it

var imageclickmode=0;  // 0=scaling not based on click/touch, 1=fit to click/touch dimensions, 2=scale proportionally to fit width, 3=scale proportionally to fit height
var rotcmd='';
var ewtwo=0.0; ehtwo=0.0;
var zeroone=0.0;
var txtoffx=0.0, txtoffy=0.0;
var rotoffx=0.0, rotoffy=0.0;
var scalex=1.0, scaley=1.0;
var origih=0.0, origiw=0.0;
var curih=0.0, curiw=0.0;
var newih=0.0, newiw=0.0;
var cropx=0.00, cropy=0.00;
var cropwidth=100.00, cropheight=100.00;
var butnotfirst=0;
var fcont, w, isScribble=0;
var xua = navigator.userAgent; 
var isiPad = /iPad/i.test(xua) || /iPhone OS 3_1_2/i.test(xua) || /Android/i.test(xua) || /iPhone OS 3_2_2/i.test(xua); 
var isTouch = /touch/i.test(xua) || /Touch/i.test(xua); 
var oimg=null;
var ximg;
var laststop = -1;
var origimg;
var canvascommands = [];
var majors = [-1];
var xxlworld = 'world';
var xxuworld = 'World';
var xxuubits=document.referrer.split('.ht');
var xxuuubits;
if (xxuubits.length == 1) {
  xxuubits=document.URL.split('.ht');
}
xxuuubits=xxuubits[0].split('/');
xxlworld=xxuuubits[eval(-1 + xxuuubits.length)];
xxuubits=document.URL.split('.ht');
xxuuubits=xxuubits[0].split('/');
xxuworld=xxuuubits[eval(-1 + xxuuubits.length)].substring(0,1).toUpperCase() + xxuuubits[eval(-1 + xxuuubits.length)].substring(1).replace('_s',' S');

function postpostnewiw(proposediw, oh, ow, oheight, ycrop) {
 var deg;
 deg=eval(document.getElementById('rotation').value);
 var xx=Math.abs(Math.sin(deg*Math.PI/180)) * Math.abs(lasty - y) + Math.abs(Math.cos(deg*Math.PI/180)) * Math.abs(lastx - x);
 var yy=Math.abs(Math.sin(deg*Math.PI/180)) * Math.abs(lastx - x) + Math.abs(Math.cos(deg*Math.PI/180)) * Math.abs(lasty - y);
 if (imageclickmode == 0 || xx == 0.0) return proposediw;
 if (imageclickmode == 1) {
   //alert("proposediw=" + proposediw + " vs returned=" + xx);
   return Math.abs(lastx - x); //Math.abs(xx);
 }
 if (imageclickmode == 2) return Math.abs(lastx - x); //Math.abs(xx);
   //alert("Math.abs(lasty - y)=" + Math.abs(lasty - y) + " and proposedH=" + Math.abs(oh) + " and Math.abs(lastx - x)=" + Math.abs(lastx - x) + " so newiw becomes=" +  eval( (Math.abs(lasty - y) / Math.abs(oh)) * Math.abs(lastx - x)));
 return eval( (Math.abs(yy) / Math.abs(oh)) * Math.abs(ow)); //lastx - x));
}

function postpostnewih(proposedih, ow, oh, owidth, xcrop) {
 var deg;
 deg=eval(document.getElementById('rotation').value);
 var xx=Math.abs(Math.sin(deg*Math.PI/180)) * Math.abs(lasty - y) + Math.abs(Math.cos(deg*Math.PI/180)) * Math.abs(lastx - x);
 var yy=Math.abs(Math.sin(deg*Math.PI/180)) * Math.abs(lastx - x) + Math.abs(Math.cos(deg*Math.PI/180)) * Math.abs(lasty - y);
 if (imageclickmode == 0 || yy == 0.0) return proposedih;
 if (imageclickmode == 1)  {
   //alert("proposedih=" + proposedih + " vs returned=" + yy);
   return Math.abs(lasty - y); //Math.abs(yy);
 }
 if (imageclickmode == 3) return Math.abs(lasty - y); //Math.abs(yy);
 return eval( (Math.abs(xx) / Math.abs(ow)) * Math.abs(oh)); //lasty - y));
}


function offymaybe(pxoff, nh, nw) {
    var deg;
    if (imageclickmode != 0 && eval(document.getElementById('rotation').value) != 0) {
      deg=eval(document.getElementById('rotation').value);
      //alert("Xwas=" + pxoff + " but now to become " +  eval(pxoff + Math.abs(Math.sin(deg*Math.PI/180)) * nh / 2 + Math.abs(Math.cos(deg*Math.PI/180)) * nw / 2));
      return eval(pxoff + Math.abs(Math.sin(deg*Math.PI/180)) * nh / 2 + Math.abs(Math.cos(deg*Math.PI/180)) * nw / 2);
    }
    return pxoff;
}

function offxmaybe(pyoff, nw, nh) {
    var deg;
    if (imageclickmode != 0 && eval(document.getElementById('rotation').value) != 0) {
      deg=eval(document.getElementById('rotation').value);
      //alert("Ywas=" + pyoff + " but now to become " +  eval(pyoff + Math.abs(Math.cos(deg*Math.PI/180)) * nw / 2 + Math.abs(Math.sin(deg*Math.PI/180)) * nh / 2));
      return eval(pyoff + Math.abs(Math.cos(deg*Math.PI/180)) * nw / 2 + Math.abs(Math.sin(deg*Math.PI/180)) * nh / 2);
    }
    return pyoff;
}

function postscalew(proposedscalew, oh, ow) {
 var deg;
 deg=eval(document.getElementById('rotation').value);
 var yy=Math.abs(Math.sin(deg*Math.PI/180)) * Math.abs(lasty - y) + Math.abs(Math.cos(deg*Math.PI/180)) * Math.abs(lastx - x);
 var xx=Math.abs(Math.sin(deg*Math.PI/180)) * Math.abs(lastx - x) + Math.abs(Math.cos(deg*Math.PI/180)) * Math.abs(lasty - y);
 if (imageclickmode == 0 || xx == 0.0) return proposedscalew;
 if (imageclickmode == 1) {
   //alert("proposedscalew=" + proposedscalew + " vs returned=" + Math.abs(xx) / Math.abs(ow));
   return Math.abs(xx) / Math.abs(ow);
 }
 if (imageclickmode == 2) return Math.abs(xx) / Math.abs(ow);
   //alert("Math.abs(lasty - y)=" + Math.abs(lasty - y) + " and proposedH=" + Math.abs(oh) + " and Math.abs(lastx - x)=" + Math.abs(lastx - x) + " so newiw becomes=" +  eval( (Math.abs(lasty - y) / Math.abs(oh)) * Math.abs(lastx - x)));
 return eval( (Math.abs(yy) / Math.abs(oh)) * Math.abs(ow))  / Math.abs(oh); //lastx - x));
}

function postscaleh(proposedscaleh, ow, oh) {
 var deg;
 deg=eval(document.getElementById('rotation').value);
 var yy=Math.abs(Math.sin(deg*Math.PI/180)) * Math.abs(lasty - y) + Math.abs(Math.cos(deg*Math.PI/180)) * Math.abs(lastx - x);
 var xx=Math.abs(Math.sin(deg*Math.PI/180)) * Math.abs(lastx - x) + Math.abs(Math.cos(deg*Math.PI/180)) * Math.abs(lasty - y);
 if (imageclickmode == 0 || yy == 0.0) return proposedscaleh;
 if (imageclickmode == 1)  {
   //alert("proposedscaleh=" + proposedscaleh + " vs returned=" + Math.abs(yy) / Math.abs(oh));
   return Math.abs(yy) / Math.abs(oh);
 }
 if (imageclickmode == 3) return Math.abs(yy) / Math.abs(oh);
 return eval( (Math.abs(xx) / Math.abs(ow)) * Math.abs(oh))  / Math.abs(ow); //lasty - y));
}

function okpostscalew(proposedscalew, oh, ow) {
 if (imageclickmode == 0 || Math.abs(lastx - x) == 0.0) return proposedscalew;
 if (imageclickmode == 1) {
   //alert("proposediw=" + proposediw + " vs returned=" + Math.abs(lastx - x));
   return Math.abs(lastx - x) / Math.abs(ow);
 }
 if (imageclickmode == 2) return Math.abs(lastx - x) / Math.abs(ow);
   //alert("Math.abs(lasty - y)=" + Math.abs(lasty - y) + " and proposedH=" + Math.abs(oh) + " and Math.abs(lastx - x)=" + Math.abs(lastx - x) + " so newiw becomes=" +  eval( (Math.abs(lasty - y) / Math.abs(oh)) * Math.abs(lastx - x)));
 return eval( (Math.abs(lasty - y) / Math.abs(oh)) * Math.abs(ow))  / Math.abs(oh); //lastx - x));
}

function okpostscaleh(proposedscaleh, ow, oh) {
 if (imageclickmode == 0 || Math.abs(lasty - y) == 0.0) return proposedscaleh;
 if (imageclickmode == 1)  {
   //alert("proposedih=" + proposedih + " vs returned=" + Math.abs(lasty - y));
   return Math.abs(lasty - y) / Math.abs(oh);
 }
 if (imageclickmode == 3) return Math.abs(lasty - y) / Math.abs(oh);
 return eval( (Math.abs(lastx - x) / Math.abs(ow)) * Math.abs(oh))  / Math.abs(ow); //lasty - y));
}

function postnewiw(proposediw, oh, ow, oheight, ycrop) {
 if (imageclickmode == 0 || Math.abs(lastx - x) == 0.0) return proposediw;
 if (imageclickmode == 1) {
   //alert("proposediw=" + proposediw + " vs returned=" + Math.abs(lastx - x));
   return Math.abs(lastx - x);
 }
 if (imageclickmode == 2) return Math.abs(lastx - x);
   //alert("Math.abs(lasty - y)=" + Math.abs(lasty - y) + " and proposedH=" + Math.abs(oh) + " and Math.abs(lastx - x)=" + Math.abs(lastx - x) + " so newiw becomes=" +  eval( (Math.abs(lasty - y) / Math.abs(oh)) * Math.abs(lastx - x)));
 return eval( (Math.abs(lasty - y) / Math.abs(oh)) * Math.abs(ow)); //lastx - x));
}

function postnewih(proposedih, ow, oh, owidth, xcrop) {
 if (imageclickmode == 0 || Math.abs(lasty - y) == 0.0) return proposedih;
 if (imageclickmode == 1)  {
   //alert("proposedih=" + proposedih + " vs returned=" + Math.abs(lasty - y));
   return Math.abs(lasty - y);
 }
 if (imageclickmode == 3) return Math.abs(lasty - y);
 return eval( (Math.abs(lastx - x) / Math.abs(ow)) * Math.abs(oh)); //lasty - y));
}


function capture(toh, tos, toe) {
  if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    if (document.getElementById('myiemail').value.indexOf('@') == -1) {
      var femail = prompt('Please supply the Email To address', '');
      if (femail == null) femail = '';
      if (femail.indexOf('@') != -1) {
        fixmyemail(femail, 0);
      }
    }
  } else {
   if (document.getElementById('myiemail').value.indexOf('@') != -1) {
    document.getElementById('mode').value = '';
    document.getElementById('ismobile').value = 'y';
    document.getElementById('myisubject').style.display = 'inline';
    document.getElementById('myiemail').style.display = 'inline';
    document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
    document.getElementById('myform').action = document.getElementById('myform').action.replace('mode=1', 'mode=');
    //document.getElementById('myemail').href = '#' + document.getElementById('myemail').href;
   }
  }
  var pretoh = elem.toDataURL("image/png",0);
  //toh.value = pretoh.substr(22, pretoh.length); 
  var xbits=pretoh.split(',');
  //toh.value = pretoh.substr(eval(pretoh.indexOf(',') + 1), pretoh.length); 
  //alert(xbits[0]);
  toh.value = pretoh.replace(xbits[0] + ',', '');
  if (1 == 1) {
  tos.click();
  } else {
  document.getElementById('myform').submit();
  }
  var things = document.URL.split("?");
  toe.href = toe.href + (things[0] + "/~").replace("world.html/~", document.getElementById('myfname').value).replace(xxlworld + ".html/~", document.getElementById('myfname').value).replace("index.html/~", document.getElementById('myfname').value).replace("//~", "/" + document.getElementById('myfname').value).replace("/~", "/" + document.getElementById('myfname').value);
  if (document.getElementById('to').value.indexOf('@') != -1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
  toe=toe;
  } else {
  toe.click();
  }
}


function redo() {
 var upto=-1, iup;
 if (eval(laststop) < eval(-1 + majors.length)) {
  laststop++;
  upto = majors[laststop];
 } else if (eval(laststop) == eval(-1 + majors.length)) {
  upto = majors[laststop];
 }
 
 context.clearRect(0, 0, elem.width, elem.height);
 if (imageclickmode != 0 || eval(scalex) != 1.0 || eval(scaley) != 1.0 || eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
 newiw=postnewiw(eval(eval(origiw - cropx)  * scalex), eval(origih - cropy), eval(origiw - cropx), origih, cropy);
 newih=postnewih(eval(eval(origih - cropy)  * scaley), eval(origiw - cropx), eval(origih - cropy), origiw, cropx);
 //alert("newiw=" + newiw + " and newih=" + newih);
 if (imageclickmode != 0) {
          context.drawImage(origimg,Math.min(x,lastx),Math.min(y,lasty),newiw,newih);
 } else if (eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
 context.drawImage(origimg,eval(cropx),eval(cropy),eval(eval(origiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)),eval(eval(origih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)),0,0,newiw,newih);
 } else {
 context.drawImage(origimg,0,0,newiw,newih);
 }
 } else {
 context.drawImage(origimg,0,0);
 }
 if (eval(upto) >= 0) {
   for (var iup=0; iup <= upto; iup++) {
     eval(canvascommands[iup]);
   }
 }
}

function undo() {
 var upto=-1, iup;
 if (butnotfirst != 0) {
  if (oimg != null) origimg=oimg;
  upto=eval(-1 + canvascommands.length);
  elem.style.backgroundColor='transparent';
 } else if (eval(laststop) > 0) {
  laststop--;
  upto = majors[laststop];
 } else if (eval(laststop) == 0) {
  laststop = -1;
 }

 
 context.clearRect(0, 0, elem.width, elem.height);
 if (imageclickmode != 0 || eval(scalex) != 1.0 || eval(scaley) != 1.0 || eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
 newiw=postnewiw(eval(eval(origiw - cropx)  * scalex), eval(origih - cropy), eval(origiw - cropx), origih, cropy);
 newih=postnewih(eval(eval(origih - cropy)  * scaley), eval(origiw - cropx), eval(origih - cropy), origiw, cropx);
 //alert("neWiw=" + newiw + " and newih=" + newih);
 if (imageclickmode != 0) {
 if (butnotfirst == 0) context.drawImage(origimg,Math.min(x,lastx),Math.min(y,lasty),newiw,newih);
 } else if (eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
 if (butnotfirst == 0) context.drawImage(origimg,eval(cropx),eval(cropy),eval(eval(origiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)),eval(eval(origih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)),0,0,newiw,newih);
 } else {
 if (butnotfirst == 0) context.drawImage(origimg,0,0,newiw,newih);
 }
 } else {
 if (butnotfirst == 0) context.drawImage(origimg,0,0);
 }
 if (eval(upto) >= 0) {
   for (var iup=0; iup <= upto; iup++) {
     eval(canvascommands[iup]);
   }
 }
 butnotfirst = 0;
}

function storecanvascommands(thecmd, major) {
 //alert(thecmd + " " + ewtwo + "," + ehtwo);
 canvascommands.push(thecmd);
 if (major) {
   laststop = majors.length;
   majors.push(canvascommands.length);
 }
}

function fixmyemail(tval, issubj) {
 // mailto:fill.in.email@address?subject=My%20World%20Map&body=
 if (tval != '') {
  ourbits = document.getElementById('myemail').href.split('?subject=');
  if (issubj == 0) {
   if (ourbits.length > 1) { 
    prebits = ourbits[0].split(':');
    document.getElementById('to').value = tval;
    document.getElementById('myemail').href = prebits[0] + ':' + encodeURIComponent(tval) + '?subject=' + ourbits[eval(-1 + ourbits.length)];
    if (document.getElementById('myiemail').value.indexOf('@') != -1) {
    document.getElementById('mode').value = '';
    document.getElementById('ismobile').value = 'y';
    document.getElementById('myisubject').style.display = 'inline';
    document.getElementById('myiemail').style.display = 'inline';
    document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
    document.getElementById('myform').action = document.getElementById('myform').action.replace('mode=1', 'mode=');
    //document.getElementById('myemail').href = '#' + document.getElementById('myemail').href;
    }
   }
  } else {
   var pbits = "";
   if (ourbits.length > 1) { 
    pbits = ourbits[1].split('&');
    document.getElementById('mysubject').value = tval;
    if (pbits.length > 1) {
    document.getElementById('myemail').href = ourbits[0] + '?subject=' + encodeURIComponent(tval) + '&' + pbits[1];
    } else {
    document.getElementById('myemail').href = ourbits[0] + '?subject=' + encodeURIComponent(tval);
    }
   }
  }
 }
}

function dorectangle() { // new idea ... March, 2016
    if (eval(document.getElementById('rotation').value) != 0 && rotcmd == "" && 'dorectangle' != 'dorectangle') {
    rotcmd="dorectangle();";
    drawRotated(eval(document.getElementById('rotation').value));
    } else {
    rotcmd="";
    //context.strokeStyle=document.getElementById('mycolour').value;
    context.fillStyle=document.getElementById('mycolour').value;
    storecanvascommands("context.fillStyle='" + document.getElementById('mycolour').value + "';", false);
    context.fillRect(eval(rotoffx + Math.min(x,lastx)), eval(rotoffy + Math.min(y,lasty)), Math.abs(x - lastx), Math.abs(y - lasty));
    storecanvascommands("context.fillRect(" + eval(rotoffx + Math.min(x,lastx)) + "," +eval(rotoffy + Math.min(y,lasty)) + "," + Math.abs(x - lastx) + "," + Math.abs(y - lasty) + ");", true);
  rotoffx=0.0;
  rotoffy=0.0;
    }
}

function dorectangleborder() { // new idea ... March, 2016
    if (eval(document.getElementById('rotation').value) != 0 && rotcmd == "" && 'dorectangle' != 'dorectangle') {
    rotcmd="dorectangleborder();";
    drawRotated(eval(document.getElementById('rotation').value));
    } else {
    rotcmd="";
    context.strokeStyle=document.getElementById('mycolour').value;
    //context.fillStyle=document.getElementById('mycolour').value;
    storecanvascommands("context.strokeStyle='" + document.getElementById('mycolour').value + "';", false);
    context.rect(eval(rotoffx + Math.min(x,lastx)), eval(rotoffy + Math.min(y,lasty)), Math.abs(x - lastx), Math.abs(y - lasty));
    storecanvascommands("context.fillRect(" + eval(rotoffx + Math.min(x,lastx)) + "," + eval(rotoffy + Math.min(y,lasty)) + "," + Math.abs(x - lastx) + "," + Math.abs(y - lasty) + ");", false);
    context.stroke();
    storecanvascommands("context.stroke();", true);
  rotoffx=0.0;
  rotoffy=0.0;
    }
}

function docircle() { // new idea ... March, 2016
    if (eval(document.getElementById('rotation').value) != 0 && rotcmd == "" && 'docircle' != 'docircle') {
    rotcmd="docircle();";
    drawRotated(eval(document.getElementById('rotation').value));
    } else {
    rotcmd="";
    context.strokeStyle=document.getElementById('mycolour').value;
    storecanvascommands("context.strokeStyle='" + document.getElementById('mycolour').value + "';", false);
    context.beginPath();
    storecanvascommands("context.beginPath();", false);
    context.arc(eval(rotoffx + (x + lastx) / 2.0),eval(rotoffy + (y + lasty) / 2.0),eval(Math.pow(Math.abs(x - lastx) * Math.abs(x - lastx) + Math.abs(y - lasty) * Math.abs(y - lasty),0.5) / 2.0),0,2*Math.PI);
    storecanvascommands("context.arc(" + eval(rotoffx + (x + lastx) / 2.0) + "," + eval(rotoffy + (y + lasty) / 2.0) + "," + eval(Math.pow(Math.abs(x - lastx) * Math.abs(x - lastx) + Math.abs(y - lasty) * Math.abs(y - lasty),0.5) / 2.0) + "," + 2*Math.PI + ");", false);
    context.stroke();
    storecanvascommands("context.stroke();", true);
  rotoffx=0.0;
  rotoffy=0.0;
    }
}

function doline() { // new idea ... March, 2016
    if (eval(document.getElementById('rotation').value) != 0 && rotcmd == "" && 'doline' != 'doline') {
    rotcmd="doline();";
    drawRotated(eval(document.getElementById('rotation').value));
    } else {
    rotcmd="";
    context.strokeStyle=document.getElementById('mycolour').value;
    storecanvascommands("context.strokeStyle='" + document.getElementById('mycolour').value + "';", false);
    context.beginPath();
    storecanvascommands("context.beginPath();", false);
    context.moveTo(x,y);
    storecanvascommands("context.moveTo(" + eval(rotoffx + x) + "," + eval(rotoffy + y) + ");", false);
    context.lineTo(lastx,lasty);
    storecanvascommands("context.lineTo(" + eval(rotoffx + lastx) + "," + eval(rotoffy + lasty) + ");", false);
    context.stroke();
    storecanvascommands("context.stroke();", true);
  rotoffx=0.0;
  rotoffy=0.0;
    }
}

function clearall() { // new idea ... March, 2016
    context.clearRect(0, 0, elem.width, elem.height);
    storecanvascommands("context.clearRect(" + 0 + "," + 0 + "," + elem.width + "," + elem.height + ");", false);
    elem.style.borderRight='1px solid black';
    storecanvascommands("elem.style.borderRight='1px solid black';", false);
    elem.style.borderBottom='1px solid black';
    storecanvascommands("elem.style.borderBottom='1px solid black';", true);
  rotoffx=0.0;
  rotoffy=0.0;
}

function placeannotation(anno) { // new idea ... March, 2016
    if (eval(document.getElementById('rotation').value) != 0 && rotcmd == "" && anno.value != '') {
    rotcmd="placeannotation(document.getElementById('" + anno.id + "'));";
     //if (eval(document.getElementById('rotation').value) != 0) alert(rotcmd);
    txtoffx=eval(0 + 2 + Math.min(x,lastx));
    txtoffy=eval((Math.min(y,lasty) + Math.max(y,lasty)) / 2);
    drawRotated(eval(document.getElementById('rotation').value));
    } else {
    rotcmd="";
     //if (eval(document.getElementById('rotation').value) != 0) alert('before:' + anno.value);
 if (anno.value != '') {
     //if (eval(document.getElementById('rotation').value) != 0) alert(anno.value);
  if (anno.id == 'jannotation') {
    context.clearRect(eval(rotoffx + Math.min(x,lastx)), eval(rotoffy + Math.min(y,lasty)), Math.abs(x - lastx), Math.abs(y - lasty));
    storecanvascommands("context.clearRect(" + eval(rotoffx + Math.min(x,lastx)) + "," + eval(rotoffx + Math.min(y,lasty)) + "," + Math.abs(x - lastx) + "," + Math.abs(y - lasty) + ");", false);
    context.strokeStyle = "black";
    storecanvascommands("context.strokeStyle = 'black';", false);
    document.getElementById('iannotation').value='';
    storecanvascommands("document.getElementById('iannotation').value='';", false);
  } else {
    context.strokeStyle = "blue";
    storecanvascommands("context.strokeStyle = 'blue';", false);
    document.getElementById('jannotation').value='';
    storecanvascommands("document.getElementById('jannotation').value='';", false);
  }
  //context.font = cf;
  context.font = document.getElementById('myfont').value;
  storecanvascommands("context.font = '" + document.getElementById('myfont').value + "';", false);
  context.strokeStyle=document.getElementById('mycolour').value;
  storecanvascommands("context.strokeStyle='" + document.getElementById('mycolour').value + "';", false);
  context.strokeText(anno.value,eval(rotoffx + 2 + Math.min(x,lastx)),eval(rotoffy + eval((Math.min(y,lasty) + Math.max(y,lasty)) / 2)));
  storecanvascommands("context.strokeText(" + anno.value + "," + eval(rotoffx + 2 + Math.min(x,lastx)) + "," + eval(rotoffy + eval((Math.min(y,lasty) + Math.max(y,lasty)) / 2)) + ");", false);
  anno.value = '';
  storecanvascommands("document.getElementById('" + anno.id + "').value='';", true);
  rotoffx=0.0;
  rotoffy=0.0;
  txtoffx=0.0;
  txtoffy=0.0;
 }
 }
}

function readUBlob(uval, opt_startByte, opt_stopByte) {
   //var oimg;
   ewtwo = eval(zeroone * eval(   Math.min(x,lastx) +   Math.abs(x - lastx) / 2               ));
   ehtwo = eval(zeroone * eval(   Math.min(y,lasty) +   Math.abs(y - lasty) / 2               ));
   if (uval.replace('+','') != '') {
      if (uval.substring(0,1) == '+') {
        document.getElementById('spareimg').src=uval.substring(1);
        oimg=document.getElementById('spareimg');
        curih=oimg.height;
        curiw=oimg.width;
        if (eval(document.getElementById('rotation').value) != 0) {
          drawRotated(eval(document.getElementById('rotation').value));
        } else {
   ewtwo -= eval(zeroone * oimg.width / 2);
   ehtwo -= eval(zeroone * oimg.height / 2);
 if (imageclickmode != 0 || eval(scalex) != 1.0 || eval(scaley) != 1.0 || eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
        curih=oimg.height;
        curiw=oimg.width;
 newiw=postnewiw(eval(eval(curiw - cropx)  * scalex), eval(curih - cropy), eval(curiw - cropx), curih, cropy);
 newih=postnewih(eval(eval(curih - cropy)  * scaley), eval(curiw - cropx), eval(curih - cropy), curiw, cropx);
 //alert("newiw=" + newiw + " and newIh=" + newih);
 if (imageclickmode != 0) {
          context.drawImage(ximg,Math.min(x,lastx),Math.min(y,lasty),newiw,newih);
          storecanvascommands("context.drawImage(oimg," + Math.min(x,lastx) + "," + Math.min(y,lasty) + "," + newiw + "," + newih + ");", true);
 } else if (eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
          context.drawImage(oimg,eval(cropx),eval(cropy),eval(eval(curiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)),eval(eval(curih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)),eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("yoff").value)),newiw,newih);
          storecanvascommands("context.drawImage(oimg," + cropx + "," + cropy + "," + eval(eval(curiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)) + "," + eval(eval(curih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)) + "," + eval(eval(ewtwo) + eval(document.getElementById("xoff").value)) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + "," + newiw + "," + newih + ");", true);
 } else {
          context.drawImage(oimg,eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("yoff").value)),newiw,newih);
          storecanvascommands("context.drawImage(oimg," + eval(eval(ewtwo) + eval(document.getElementById("xoff").value)) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + "," + newiw + "," + newih + ");", true);
 }
 } else {
          context.drawImage(oimg,eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("yoff").value)));
          storecanvascommands("context.drawImage(oimg," + eval(eval(ewtwo) + eval(document.getElementById("xoff").value)) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + ");", true);
}
        }
      } else {
        context.clearRect(0,0,elem.width,elem.height);
        document.getElementById('spareimg').src=uval;
        oimg=document.getElementById('spareimg');
        curih=oimg.height;
        curiw=oimg.width;
        if (eval(document.getElementById('rotation').value) != 0) {
          drawRotated(eval(document.getElementById('rotation').value));
        } else {
 if (imageclickmode != 0 || eval(scalex) != 1.0 || eval(scaley) != 1.0 || eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
 newiw=postnewiw(eval(eval(curiw - cropx)  * scalex), eval(curih - cropy), eval(curiw - cropx), curih, cropy);
 newih=postnewih(eval(eval(curih - cropy)  * scaley), eval(curiw - cropx), eval(curih - cropy), curiw, cropx);
 //alert("newiW=" + newiw + " and newih=" + newih);
 if (imageclickmode != 0) {
          context.drawImage(oimg,Math.min(x,lastx),Math.min(y,lasty),newiw,newih);
          storecanvascommands("context.drawImage(oimg," + Math.min(x,lastx) + "," + Math.min(y,lasty) + "," + newiw + "," + newih + ");", true);
 } else if (eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
          context.drawImage(oimg,eval(cropx),eval(cropy),eval(eval(curiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)),eval(eval(curih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)),eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("yoff").value)),newiw,newih);
          storecanvascommands("context.drawImage(oimg," + cropx + "," + cropy + "," + eval(eval(curiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)) + "," + eval(eval(curih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)) + "," + eval(eval(ewtwo) + eval(document.getElementById("xoff").value)) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + "," + newiw + "," + newih + ");", true);
 } else {
          context.drawImage(oimg,eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("yoff").value)),newiw,newih);
          storecanvascommands("context.drawImage(oimg," + eval(eval(ewtwo) + eval(document.getElementById("xoff").value)) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + "," + newiw + "," + newih + ");", true);
 }
 } else {
          context.drawImage(oimg,eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("yoff").value)));
          storecanvascommands("context.drawImage(oimg," + eval(eval(ewtwo) + eval(document.getElementById("xoff").value)) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + ");", true);
 }
        }
      }
   }
}

function readOBlob(opt_startByte, opt_stopByte) {
   ewtwo = eval(zeroone * eval(   Math.min(x,lastx) +   Math.abs(x - lastx) / 2               ));
   ehtwo = eval(zeroone * eval(   Math.min(y,lasty) +   Math.abs(y - lasty) / 2               ));
    var files = document.getElementById("file").files;
    if (!files.length) {
      var ivo=document.getElementById('vsiurl');
      if (ivo) {
      if (ivo.value.replace('+','') == '') alert("Please select a file!");
      } else {
      alert("Please select a file!");
      }
      return;
    } else {
      w = files[0].name;
      document.getElementById("fil").value = w;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        //cis = window.open("", "_blank", "top=20,left=20,width=200,height=200");
        //ww = cis;
        //cis.document.write(evt.target.result);
        //document.getElementById("url").value = evt.target.result;
        //document.getElementById("acont").value = evt.target.result;
        //document.getElementById("submit").click();
        //cis.document.write(evt.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;"));
        //document.body.innerHTML = document.body.innerHTML + "<div id=be style=display:block;>" + evt.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</div>";
        document.getElementById("byte_content").textContent = evt.target.result;
        document.getElementById("byte_range").textContent = 
            ["Read bytes: ", start + 1, " - ", stop + 1,
             " of ", file.size, " byte file"].join("");
        process(evt.target.result);
      }
    };

    var blob = file.slice(start, stop + 1);
    reader.readAsDataURL(blob);   // Thanks to http://stackoverflow.com/questions/22255580/javascript-upload-image-file-and-draw-it-into-a-canvas
    reader.onload = function(e) {
    ximg = new Image();
    ximg.onload = function() {
        if (eval(document.getElementById('rotation').value) != 0) {
          oimg = ximg;
          curih=oimg.height;
          curiw=oimg.width;
          drawRotated(eval(document.getElementById('rotation').value));
        } else {
   ewtwo -= eval(zeroone * ximg.width / 2);
   ehtwo -= eval(zeroone * ximg.height / 2);
 if (imageclickmode != 0 || eval(scalex) != 1.0 || eval(scaley) != 1.0 || eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
          curih=ximg.height;
          curiw=ximg.width;
 newiw=postnewiw(eval(eval(curiw - cropx)  * scalex), eval(curih - cropy), eval(curiw - cropx), curih, cropy);
 newih=postnewih(eval(eval(curih - cropy)  * scaley), eval(curiw - cropx), eval(curih - cropy), curiw, cropx);
 //alert("newiw=" + newiw + " and nEwih=" + newih);
 if (imageclickmode != 0) {
 //alert("newiw=" + newiw + " and NEwih=" + newih);
          context.drawImage(ximg,Math.min(x,lastx),Math.min(y,lasty),newiw,newih);
          storecanvascommands("context.drawImage(oimg," + Math.min(x,lastx) + "," + Math.min(y,lasty) + "," + newiw + "," + newih + ");", true);
 } else if (eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
          context.drawImage(ximg,eval(cropx),eval(cropy),eval(eval(curiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)),eval(eval(curih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)),eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("yoff").value)),newiw,newih);
          storecanvascommands("context.drawImage(oimg," + cropx + "," + cropy + "," + eval(eval(curiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)) + "," + eval(eval(curih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)) + "," + eval(rwtwo + document.getElementById("xoff").value) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + "," + newiw + "," + newih + ");", true);
 } else {
          context.drawImage(ximg,eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("yoff").value)),newiw,newih);
          storecanvascommands("context.drawImage(oimg," + eval(eval(ewtwo) + eval(document.getElementById("xoff").value)) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + "," + newiw + "," + newih + ");", true);
 }
 } else {
          context.drawImage(ximg,eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("yoff").value)));
          storecanvascommands("context.drawImage(oimg," + eval(eval(ewtwo) + eval(document.getElementById("xoff").value)) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + ");", true);
 }
        }
    }
    ximg.src = e.target.result;
    };
}
 
function readBlob(opt_startByte, opt_stopByte) {
   ewtwo = eval(zeroone * eval(   Math.min(x,lastx) +   Math.abs(x - lastx) / 2               ));
   ehtwo = eval(zeroone * eval(   Math.min(y,lasty) +   Math.abs(y - lasty) / 2               ));
    var files = document.getElementById("file").files;
    if (!files.length) {
      var ivo=document.getElementById('vsiurl');
      if (ivo) {
      if (ivo.value.replace('+','') == '') alert("Please select a file!");
      } else {
      alert("Please select a file!");
      }
      return;
    } else {
      w = files[0].name;
      document.getElementById("fil").value = w;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        //cis = window.open("", "_blank", "top=20,left=20,width=200,height=200");
        //ww = cis;
        //cis.document.write(evt.target.result);
        //document.getElementById("url").value = evt.target.result;
        //document.getElementById("acont").value = evt.target.result;
        //document.getElementById("submit").click();
        //cis.document.write(evt.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;"));
        //document.body.innerHTML = document.body.innerHTML + "<div id=be style=display:block;>" + evt.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</div>";
        document.getElementById("byte_content").textContent = evt.target.result;
        document.getElementById("byte_range").textContent = 
            ["Read bytes: ", start + 1, " - ", stop + 1,
             " of ", file.size, " byte file"].join("");
        process(evt.target.result);
      }
    };

    var blob = file.slice(start, stop + 1);
    reader.readAsDataURL(blob);   // Thanks to http://stackoverflow.com/questions/22255580/javascript-upload-image-file-and-draw-it-into-a-canvas
    reader.onload = function(e) {
    ximg = new Image();
    ximg.onload = function() {
      context.clearRect(0,0,elem.width,elem.height);
      storecanvascommands("context.clearRect(" + 0 + "," + 0 + "," + elem.width + "," + elem.height + ");", false);
      if (eval(document.getElementById('rotation').value) != 0) {
          oimg = ximg;
          curih=oimg.height;
          curiw=oimg.width;
          drawRotated(eval(document.getElementById('rotation').value));
      } else {
   ewtwo -= eval(zeroone * ximg.width / 2);
   ehtwo -= eval(zeroone * ximg.height / 2);
 if (imageclickmode != 0 || eval(scalex) != 1.0 || eval(scaley) != 1.0 || eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
        curih=ximg.height;
        curiw=ximg.width;
 newiw=postnewiw(eval(eval(curiw - cropx)  * scalex), eval(curih - cropy), eval(curiw - cropx), curih, cropy);
 newih=postnewih(eval(eval(curih - cropy)  * scaley), eval(curiw - cropx), eval(curih - cropy), curiw, cropx);
 //alert("newiw=" + newiw + " and Newih=" + newih);
 if (imageclickmode != 0) {
          context.drawImage(ximg,Math.min(x,lastx),Math.min(y,lasty),newiw,newih);
          storecanvascommands("context.drawImage(ximg," + Math.min(x,lastx) + "," + Math.min(y,lasty) + "," + newiw + "," + newih + ");", true);
 } else if (eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
          context.drawImage(ximg,eval(cropx),eval(cropy),eval(eval(curiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)),eval(eval(curih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)),eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("yoff").value)),newiw,newih);
          storecanvascommands("context.drawImage(ximg," + cropx + "," + cropy + "," + eval(eval(curiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)) + "," + eval(eval(curih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)) + "," + eval(eval(ewtwo) + eval(document.getElementById("xoff").value)) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + "," + newiw + "," + newih + ");", true);
 } else {
          context.drawImage(ximg,eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(eval(ehtwo) + eval(document.getElementById("yoff").value)),newiw,newih);
          storecanvascommands("context.drawImage(ximg," + eval(eval(ewtwo) + eval(document.getElementById("xoff").value)) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + "," + newiw + "," + newih + ");", true);
 }
 } else {
          context.drawImage(ximg,eval(eval(ewtwo) + eval(document.getElementById("xoff").value)),eval(ehtwo + document.getElementById("yoff").value));
          storecanvascommands("context.drawImage(ximg," + eval(eval(ewtwo) + eval(document.getElementById("xoff").value)) + "," + eval(eval(ehtwo) + eval(document.getElementById("yoff").value)) + ");", true);
 }
      }
    }
    ximg.src = e.target.result;
    };
}
  
function process(infilecontents) {
         //if (1 == 7) { alert(infilecontents); }
         //var ourlines = infilecontents.split(String.fromCharCode(10)); 
         //var ourwords = infilecontents.split(String.fromCharCode(32)); 
         //var myfis = "<br><br><p id=myf align=center>Filename is <strong>" + escape(document.getElementById("file").files[0].mozFullPath + document.getElementById("file").value) + "</strong> ... Type is (" + (document.getElementById("file").files[0].type || "n/a") + ") ... Date is " + (document.getElementById("file").files[0].lastModifiedDate ? document.getElementById("file").files[0].lastModifiedDate.toLocaleDateString() : "n/a") + " ... Size is " + infilecontents.length + " bytes ... Line Count is " + ourlines.length + " ... Word Count is " + ourwords.length + "</p>";
         //document.body.innerHTML = document.body.innerHTML + myfis;
         //var huh = document.URL.split("?");
         //if (huh.length > 1) {
         //  location.href = huh[0] + "?myf=" + decodeURIComponent(myfis);
         //} else {
         //  location.href = document.URL + "?myf=" + decodeURIComponent(myfis);
         //}
         //alert(infilecontents);
         fcont = infilecontents;
         //document.getElementById("byte_content").style.display='block';
         document.getElementById("byte_range").style.display='block';
}

function intwo() {
  x=0; 
  y=0;
  lastx=0; 
  lasty=0;  
  isScribble=2;
}

function touchWindowHandler(event) // thanks to http://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
         switch(event.type)
    {
        case "touchstart": type = "onclick"; 
        //alert(88 + moid + event.targetTouches.length); 
        break;
        
        default: return;
    }

             //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                              first.screenX, first.screenY, 
                              first.clientX, first.clientY, false, 
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}


function touchHandler(event) // thanks to http://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
    //if (event.targetTouches.length == 1) {

    switch(event.type)
    {
        //case "touchstart": type="mousedown"; break;
        case "touchmove":  type="mousemove"; break;        
        case "touchend":   type="mouseup"; break;
        default: return;
    }

             //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                              first.screenX, first.screenY, 
                              first.clientX, first.clientY, false, 
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    
    event.preventDefault();
    event.stopPropagation();
    
    switch(type)
    {
        //case "mousedown": if (isScribble == 1) { isScribble=2; storecanvascommands("context=context;", false); } break;
        case "mousemove": if (isScribble == 2 || isScribble == 1) {
       if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {
       if (event.pageX || event.pageY) {
       x = event.pageX - elemLeft;
       y = event.pageY - elemTop;
       } else {
       x = event.clientX - elemLeft;
       y = event.clientY - elemTop;
       }
       lastx=x;
       lasty=y;
       } else {
       lastx=x;
       lasty=y;
       if (event.pageX || event.pageY) {
       x = event.pageX - elemLeft;
       y = event.pageY - elemTop;
       } else {
       x = event.clientX - elemLeft;
       y = event.clientY - elemTop;
       }
       }
       
       
       
    if (isScribble == 2) {
    if (x != lastx || y != lasty) {
      document.getElementById('divannotation').style.display='block';
      document.getElementById('myisubject').style.display = 'inline';
      document.getElementById('myiemail').style.display = 'inline';
    context.strokeStyle=document.getElementById('mycolour').value;
    storecanvascommands("context.fillStyle='" + document.getElementById('mycolour').value + "';", false);
    context.beginPath();
    storecanvascommands("context.beginPath();", false);
    context.moveTo(x,y);
    storecanvascommands("context.moveTo(" + x + "," + y + ");", false);
    context.lineTo(lastx,lasty);
    storecanvascommands("context.lineTo(" + lastx + "," + lasty + ");", false);
    context.stroke();
    storecanvascommands("context.stroke();", false);
	}
	}
		isScribble=2;


    }
    break;        
        case "mouseup":  if (isScribble == 2) {  x=0; y=0; lastx=0; lasty=0; isScribble=1; storecanvascommands("context=context;", true); } break;
        default: return;
    }
    
    //}

}

function drawRotated(degrees) {  // thanks to http://stackoverflow.com/questions/17411991/html5-canvas-rotate-image
   var needflip=0;
   var wasf=document.getElementById('rotation').value;
   var spareewtwo = eval(zeroone * eval(   Math.min(x,lastx) +   Math.abs(x - lastx) / 2               ));
   var spareehtwo = eval(zeroone * eval(   Math.min(y,lasty) +   Math.abs(y - lasty) / 2               ));
    ewtwo = eval(elem.width/2);
    ehtwo = eval(elem.height/2);

    if (document.getElementById('rof').value.indexOf('of ') != -1) {
    storecanvascommands("context.clearRect(" + 0 + "," + 0 + "," + elem.width + "," + elem.height + ");", false);
    context.clearRect(0,0,elem.width,elem.height);
    }
    //if (document.getElementById('rof').value == '' && oimg != null) {
    //storecanvascommands("context.clearRect(" + 0 + "," + 0 + "," + elem.width + "," + elem.height + ");", false);
    //context.clearRect(0,0,elem.width,elem.height);

    // save the unrotated context of the canvas so we can restore it later
    // the alternative is to untranslate & unrotate after drawing
    storecanvascommands("context.save();", false);
    context.save();
    //}

    // move to the center of the canvas
    if (eval(txtoffx) != 0.0 || eval(txtoffy) != 0.0) {
    //alert("Ewtwo,Ehtwo=" + ewtwo + "," + ehtwo);
    storecanvascommands("context.translate(" + txtoffx + "," + txtoffy + ");", false);
    context.translate(txtoffx,txtoffy);
    if (rotcmd != '') {
    rotoffx=eval(-txtoffx);
    rotoffy=eval(-txtoffy);
    }
    } else if (eval(document.getElementById("xoff").value) != 0 || eval(document.getElementById("yoff").value) != 0) {
    ewtwo = eval(eval(spareeewtwo) * 0 + eval(document.getElementById("xoff").value));
    ehtwo = eval(eval(spareeehtwo) * 0 + eval(document.getElementById("yoff").value));
    //alert("Ewtwo,ehtwo=" + ewtwo + "," + ehtwo);
    storecanvascommands("context.translate(" + ewtwo + "," + ehtwo + ");", false);
    context.translate(ewtwo,ehtwo);
    ewtwo = eval(-ewtwo);
    ehtwo = eval(-ehtwo);
    
    
    } else if (0 == 0) {
      curih=oimg.height;
      curiw=oimg.width;
      
      //if (eval(degrees) >= 180) {
      //  needflip=true;
      //  degrees = eval(360 - wasf);
      //  document.getElementById('rotation').value=degrees;
      //} 
      var dx=0, dy=0;
 newiw=postnewiw(eval(eval(curiw - cropx)  * scalex), eval(curih - cropy), eval(curiw - cropx), curih, cropy);
 newih=postnewih(eval(eval(curih - cropy)  * scaley), eval(curiw - cropx), eval(curih - cropy), curiw, cropx);
    //alert(newiw + ' ' + newih);
    //ewtwo = eval(eval(   Math.min(x,lastx) +   1 * offxmaybe(eval(document.getElementById("xoff").value),newih,newiw) +   Math.abs(x - lastx) / 2  - postscalew(scalex,oimg.height,oimg.width) * oimg.width / 2             ));
    //ehtwo = eval(eval(   Math.min(y,lasty) +   1 * offymaybe(eval(document.getElementById("yoff").value),newiw,newih) +   Math.abs(y - lasty) / 2  - postscaleh(scaley,oimg.width,oimg.height) * oimg.height / 2            ));
    ewtwo = eval(eval(   Math.min(x,lastx) +   1 * offxmaybe(eval(document.getElementById("xoff").value),newih,newiw) +   Math.abs(x - lastx) / 2  - postscalew(scalex,oimg.height,oimg.width) * oimg.width / 2             ));
    ehtwo = eval(eval(   Math.min(y,lasty) +   1 * offymaybe(eval(document.getElementById("yoff").value),newiw,newih) +   Math.abs(y - lasty) / 2  - postscaleh(scaley,oimg.width,oimg.height) * oimg.height / 2            ));
    //alert("ewtwo,ehtwo=" + ewtwo + "," + ehtwo);

    if (eval(degrees) >= 270) {
      needflip=1;
    } else if (eval(degrees) >= 180) {
      needflip=-1;
    }


    storecanvascommands("context.translate(" + ewtwo + "," + ehtwo + ");", false);
    context.translate(ewtwo,ehtwo);
    
    if (needflip != 0) {
      context.scale(needflip, -needflip);
      storecanvascommands("context.scale(" + eval(needflip) + "," + eval(-needflip) + ");", false);
    }
    
    //ewtwo = eval(-ewtwo + Math.min(x,lastx) +   1 * offxmaybe(eval(document.getElementById("xoff").value),newih,newiw) +   Math.abs(x - lastx) / 2  - postscalew(scalex,oimg.height,oimg.width) * oimg.width / 2        );
    //ehtwo = eval(-ehtwo + Math.min(y,lasty) +   1 * offymaybe(eval(document.getElementById("yoff").value),newiw,newih) +   Math.abs(y - lasty) / 2  - postscaleh(scaley,oimg.width,oimg.height) * oimg.height / 2       );
    ewtwo = eval(-ewtwo + Math.min(x,lastx) + dx +   1 * offxmaybe(eval(document.getElementById("xoff").value),newih,newiw) +   Math.abs(x - lastx) / 2  - postscalew(scalex,oimg.height,oimg.width) * oimg.width / 2        );
    ehtwo = eval(-ehtwo + Math.min(y,lasty) + dy +   1 * offymaybe(eval(document.getElementById("yoff").value),newiw,newih) +   Math.abs(y - lasty) / 2  - postscaleh(scaley,oimg.width,oimg.height) * oimg.height / 2       );

    // New idea below
    ewtwo = eval(dx - (offxmaybe(eval(document.getElementById("xoff").value),newih,newiw))); //eval(-ewtwo + Math.min(x,lastx) +   1 * offxmaybe(eval(document.getElementById("xoff").value),newih,newiw) +   Math.abs(x - lastx) / 2  - postscalew(scalex,oimg.height,oimg.width) * oimg.width / 2        );
    ehtwo = eval(dy - (offymaybe(eval(document.getElementById("yoff").value),newiw,newih))); //eval(-ehtwo + Math.min(y,lasty) +   1 * offymaybe(eval(document.getElementById("yoff").value),newiw,newih) +   Math.abs(y - lasty) / 2  - postscaleh(scaley,oimg.width,oimg.height) * oimg.height / 2       );


    //alert("ewTwo,ehTwo=" + ewtwo + "," + ehtwo);
    } else {
    //alert("ewTwo,ehtwo=" + ewtwo + "," + ehtwo);
    storecanvascommands("context.translate(" + ewtwo + "," + ehtwo + ");", false);
    context.translate(ewtwo,ehtwo);
    ewtwo = eval(-ewtwo);
    ehtwo = eval(-ehtwo);
    }

    // rotate the canvas to the specified degrees
    storecanvascommands("context.rotate(" + degrees*Math.PI/180 + ");", false);
    context.rotate(degrees*Math.PI/180);

    if (rotcmd != '') {
    var sparerotcmd=rotcmd;
    //rotcmd='';
    //alert("sparerotcmd=" + sparerotcmd);
    eval(sparerotcmd);
    } else {
  
    if (document.getElementById('rof').value != '') {
      oimg = origimg;
      curih=oimg.height;
      curiw=oimg.width;
    }
    if (document.getElementById('rof').value == '' || oimg != null) {
    // draw the image
    // since the context is rotated, the image will be rotated also
 if (imageclickmode != 0 || eval(scalex) != 1.0 || eval(scaley) != 1.0 || eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
      curih=oimg.height;
      curiw=oimg.width;
 newiw=postpostnewiw(eval(eval(curiw - cropx)  * scalex), eval(curih - cropy), eval(curiw - cropx), curih, cropy);
 newih=postpostnewih(eval(eval(curih - cropy)  * scaley), eval(curiw - cropx), eval(curih - cropy), curiw, cropx);
 if (imageclickmode != 0) {
          context.drawImage(oimg,eval(ewtwo + eval(document.getElementById("xoff").value)),eval(ehtwo + eval(document.getElementById("yoff").value)),newiw,newih);
          storecanvascommands("context.drawImage(oimg," + eval(ewtwo + eval(document.getElementById("xoff").value)) + "," + eval(ehtwo + eval(document.getElementById("yoff").value)) + "," + newiw + "," + newih + ");", true);


 } else if (eval(cropwidth) != 100.00 || eval(cropheight) != 100.000 || eval(cropx) != 0.00 || eval(cropy) != 0.00) {
 //alert("newiw=" + newiw + " and newiH=" + newih);
          context.drawImage(oimg,eval(cropx),eval(cropy),eval(eval(curiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)),eval(eval(curih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)),eval(ewtwo + eval(document.getElementById("xoff").value)),eval(ehtwo + eval(document.getElementById("yoff").value)),newiw,newih);
          //storecanvascommands("context.drawImage(oimg," + cropx + "," + cropy + "," + eval(eval(curiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)) + "," + eval(eval(curih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)) + "," + -oimg.width/2 + eval(document.getElementById("xoff").value) + "," + -oimg.height/2 + eval(document.getElementById("yoff").value) + "," + newiw + "," + newih + ");", true);
          storecanvascommands("context.drawImage(oimg," + cropx + "," + cropy + "," + eval(eval(curiw - cropx)  * cropwidth / ((document.getElementById('cselwidth').value == '%') ? 100.0 : 1.00)) + "," + eval(eval(curih - cropy)  * cropheight / ((document.getElementById('cselheight').value == '%') ? 100.0 : 1.00)) + "," + eval(ewtwo + eval(document.getElementById("xoff").value)) + "," + eval(ehtwo + eval(document.getElementById("yoff").value)) + "," + newiw + "," + newih + ");", true);
 } else {
          context.drawImage(oimg,eval(ewtwo + eval(document.getElementById("xoff").value)),eval(ehtwo + eval(document.getElementById("yoff").value)),newiw,newih);
          storecanvascommands("context.drawImage(oimg," + eval(ewtwo + eval(document.getElementById("xoff").value)) + "," + eval(ehtwo + eval(document.getElementById("yoff").value)) + "," + newiw + "," + newih + ");", true);
 }
 } else {
    storecanvascommands("context.drawImage(oimg," + eval(ewtwo + eval(document.getElementById("xoff").value)) + "," + eval(ehtwo + eval(document.getElementById("yoff").value)) + ");", false);
    //context.drawImage(oimg,
    //eval(elem.width/2 + eval(document.getElementById("xoff").value) - Math.sin(degrees*Math.PI/180)*(oimg.height/1)*1),
    //eval(elem.height/2 + eval(document.getElementById("yoff").value) - Math.sin(degrees*Math.PI/180)*(oimg.width/1)*1));
    //alert(98);
    context.drawImage(oimg,eval(ewtwo + eval(document.getElementById("xoff").value)),eval(ehtwo + eval(document.getElementById("yoff").value))); 
 }
    //alert(980);
    document.getElementById('rof').value = '';
    oimg = null;
    } 
    }

    // we’re done with the rotating so restore the unrotated context
    storecanvascommands("context.restore();", false);
    context.restore();
    document.getElementById('rotation').value=wasf;
}

function maybe(tv) {
  if (tv != "" && eval(document.getElementById("rotation").value) != 0) {
    drawRotated(eval(document.getElementById("rotation").value));
  }
}

function tryit() {
 var tds, hstuff='', koff=-1;
 //alert(9800);
 document.getElementById('myiframe').width='400px';
 tds=document.getElementsByTagName('img');
 if (document.URL.indexOf('/india.') != -1) koff--;
 origimg=tds[eval(koff + tds.length)];
 origih=origimg.height;
 origiw=origimg.width;
 tds=document.getElementsByTagName('td');
 var scalestuff="Scale Width: <input style='width:120px;' onchange='scalex=this.value;' min='0.0000001' id='scalex' type='number' value='1.0000000' step='0.0000001'></input> Height: <input style='width:120px;' onchange='scaley=this.value;' min='0.0000001' id='scaley' type='number' value='1.0000000' step='0.0000001'></input><br>Cropping X: <input style='width:100px;' onchange='cropx=this.value;' min='0.0' id='cropx' type='number' value='0.00' step='0.01'></input> Y: <input style='width:100px;' onchange='cropy=this.value;' min='0.01' id='cropy' type='number' value='0.00' step='0.01'></input><br>Cropping Width<select id='cselwidth'><option value='%'>%</option><option value='px'>px</option></select>: <input style='width:60px;' onchange='cropwidth=this.value;' min='0.01' id='cropwidth' type='number' value='100.00' step='0.01'></input> Height<select id='cselheight'><option value='%'>%</option><option value='px'>px</option></select>: <input style='width:60px;' onchange='cropheight=this.value;' min='0.01' id='cropheight' type='number' value='100.00' step='0.01'></input><br>";
 if (tds.length > 0) {
 //alert(98);
    hstuff+="<div style='position: absolute; top:600px; left:860px; display:none; background-color: lightgreen; ' id='divan" + "notation'><h4>Your Annotations++</h4>";
    hstuff+="&nbsp;<img src='http://www.rjmprogramming.com.au/MarkItUp/line.png' onclick=' doline(); ' alt='Line' title='Line'></img>";
    hstuff+="&nbsp;<img src='http://www.rjmprogramming.com.au/MarkItUp/rectangle.png' onclick=' dorectangle(); ' alt='Rectangle' title='Rectangle'></img>";
    hstuff+="&nbsp;<img src='http://www.rjmprogramming.com.au/MarkItUp/rectangleborder.png' onclick=' dorectangleborder(); ' alt='Rectangle Border' title='Rectangle Border'></img>";
    hstuff+="&nbsp;<img src='http://www.rjmprogramming.com.au/MarkItUp/circle.png' onclick=' docircle(); ' alt='Circle' title='Circle'></img>";
    hstuff+="&nbsp;<img src='http://www.rjmprogramming.com.au/MarkItUp/clear.png' onclick=' clearall(); ' alt='Clear' title='Clear'></img>";
    hstuff+="&nbsp;<img src='http://www.rjmprogramming.com.au/MarkItUp/sline.png' onclick=\" alert('Ready to Scribble in two seconds.  Any key stroke stops scribbling.'); setTimeout(intwo,2000); \" alt='Scribble' title='Scribble'></img>";
    hstuff+="&nbsp;<img src='http://www.rjmprogramming.com.au/MarkItUp/zline.png' onclick=\" if (isScribble == 2 || isScribble == 1) { storecanvascommands('context=context;', true); } isScribble=0; \" alt='End of scribble' title='End of scribble'></img>";
    hstuff+="&nbsp;<img src='http://www.rjmprogramming.com.au/MarkItUp/minus.png' onclick=\" if (isScribble == 2 || isScribble == 1) { isScribble=0; storecanvascommands('context=context;', true); }  undo(); \" alt='Undo' title='Undo'></img>";
    hstuff+="&nbsp;<img src='http://www.rjmprogramming.com.au/MarkItUp/minusminus.png' onclick=\" if (isScribble == 2 || isScribble == 1) { isScribble=0; storecanvascommands('context=context;', true); } butnotfirst=1; undo();  butnotfirst=0; \" alt='Undo original image only and replace by transparent background' title='Undo original image only and replace by transparent background'></img>";
    hstuff+="&nbsp;<img src='http://www.rjmprogramming.com.au/MarkItUp/plus.png' onclick=\" if (isScribble == 2 || isScribble == 1) { isScribble=0; storecanvascommands('context=context;', true); }  redo(); \" alt='Redo' title='Redo'></img>";
    hstuff+="&nbsp;<img src='http://www.rjmprogramming.com.au/MarkItUp/image.png' onclick=\" document.getElementById('file').click();  document.getElementById('file').style.display='block'; document.getElementById('dpf').style.display='block'; \" alt='Image' title='Image'></img><input style='display:none;' id='file' type='file' name='file'><div id=dpf style='display:none;'>&nbsp;&nbsp;<span class='readBytesButtons'><button style='display:none;' data-endbyte='4' data-startbyte='0'>1-5</button><button style='display:none;' data-endbyte='14' data-startbyte='5'>6-15</button><button style='display:none;' data-endbyte='7' data-startbyte='6'>7-8</button><br>... vs Image URL: <input id='vsiurl' type='url' value='+' onblur='readUBlob(this.value,0,0);' style='width:60%;'></input><br>... Offset X: <input style='width:10%;' id='xoff' type='number' value='0'></input> Y: <input style='width:10%;' id='yoff' type='number' value='0'></input> Rotation<select id='rof' onchange=' maybe(this.value); '><option value=''>in Degrees</option><option value=' of Canvas'> of Canvas</option><option value=' into Canvas'> into Canvas</option></select>: <input style='width:10%;' max='360' min='-360' id='rotation' type='number' value='0'></input><br>" + scalestuff + "<button onclick='zeroone=0.0; readBlob(0,0);'>Place into Canvas</button><button onclick='zeroone=0.0; readOBlob(0,0);'>Overlay into Canvas</button><br><select id='imageclickmode' onchange=' imageclickmode=eval(this.value); '><option value=0>Scaling as shown above</option><option value=1>Scaling to fit last two click/touch rectangle</option><option value=2>Scaling to suit last two click/touch rectangle width</option><option value=3>Scaling to suit last two click/touch rectangle height</option></select><br><button onclick='zeroone=1.0; readBlob(0,0);'>Place Click</button><button onclick='zeroone=1.0; readOBlob(0,0);'>Overlay Click</button></div><div id='byte_range' style='display:none;'></div><div id='byte_content' style='display:none;'></div><input id='fil' value='' type='hidden'></input><img id='spareimg' src='' style='display:none;'></img>";
    hstuff+="<br>Annotation (optional): <input onblur='placeannotation(this);' id='iannotation' type='text' value=''></input><br><span>Anno B&amp;W (optional): <input onblur='placeannotation(this);' id='jannotation' type='text' value=''></input><br>Style: <input type='text' id='myfont' value='18px Verdana'></input>&nbsp;<input type='text' id='mycolour' value='black'></input></span><br>";
    hstuff+="<form style='display:none;' id='myform' method='post' enctype='application/x-www-urlencoded' action='http://www.rjmprogramming.com.au/HTMLCSS/world.php' target='myiframetwo'><input type='hidden' name='mysubject' id='mysubject' value='My " + xxuworld + " Map'></input><input type='hidden' name='myfname' id='myfname' value=''></input><input type='submit' id='bsubmit' value='Submit' style='display:none;'></input><input type='hidden' name='ismobile' id='ismobile' value=''></input><input type='hidden' name='mode' id='mode' value='1'></input><input type='hidden' name='to' id='to' value=''></input><input type='hidden' name='mydurl' id='mydurl' value=''></input></form>";
    hstuff+="<iframe style='display:none;' id='myiframetwo' src='http://www.rjmprogramming.com.au/HTMLCSS/world.php'></iframe>";
    hstuff+="<input style='display:none;' onblur='fixmyemail(this.value + String.fromCharCode(32),1);' type='text' id='myisubject' value='My " + xxuworld + " Map '></input>&nbsp;<input style='background-color: yellow;' type='button' value='Email (optional)' onclick='  capture(document.getElementById(" + '"' + "mydurl" + '"' + "),document.getElementById(" + '"' + "bsubmit" + '"' + "),document.getElementById(" + '"' + "myemail" + '"' + "));   '></input>&nbsp;<a style='display:none;' target='_blank' id='myemail' href='mailto:fill.in.email@address?subject=My%20" + xxuworld + "%20Map&body='></a><input style='display:none;' onblur='fixmyemail(this.value,0);' type='text' id='myiemail' value='' title='Fill this in for emailed attachment'></input>";
    hstuff+="</div>";
    if (tds[eval(-1 + tds.length)].innerHTML.indexOf('diva' + 'nnotation') == -1) {
 //alert(hstuff);
      tds[eval(-1 + tds.length)].innerHTML+=hstuff;
    }
 //alert(980);
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();
    var hh = today.getHours();
    var minm = today.getMinutes(); //January is 0!
    var ss = today.getSeconds();
    document.getElementById('myfname').value = xxlworld + "_" + yyyy + "_" + mm + "_" + hh + "_" + minm + "_" + ss + ".png"; 
    document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
    document.getElementById('mode').value = '';
    document.getElementById('ismobile').value = 'y';
    document.getElementById('myisubject').style.display = 'inline';
    document.getElementById('myiemail').style.display = 'inline';
    document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
    document.getElementById('myform').action = document.getElementById('myform').action.replace('mode=1', 'mode=');
    //document.getElementById('myemail').href = '#' + document.getElementById('myemail').href;
 }

    document.body.addEventListener('keyup', function(event) {
       if (isScribble == 2 || isScribble == 1) {
        isScribble=0;
        storecanvascommands("context=context;", true);
       }
    });


    if (isTouch || isiPad) { 
    //elem.addEventListener("touchstart", touchHandler, true);
    elem.addEventListener("touchmove", touchHandler, true);
    elem.addEventListener("touchend", touchHandler, true);
    elem.addEventListener("touchcancel", touchHandler, true);    

    //elem.addEventListener('touchstart', function(event) {
    //   if (isScribble == 1) {
    //    isScribble=2;
    //   }
    //});

	} else {

    elem.addEventListener('mouseup', function(event) {
       if (isScribble == 2) {
        x=0; y=0; lastx=0; lasty=0; 
        isScribble=1;
        storecanvascommands("context=context;", true);
       }
    });
    
    elem.addEventListener('touchend', function(event) {
       if (isScribble == 2) {
        isScribble=1;
        storecanvascommands("context=context;", true);
       }
    });

    elem.addEventListener('touchstart', function(event) {
       if (isScribble == 1) {
        isScribble=2;
        storecanvascommands("context=context;", false);
       }
    });


    elem.addEventListener('mousedown', function(event) {
       elem.title='(' + x + ',' + y + ')';
       if (isScribble == 1) {
        x=0; y=0; lastx=0; lasty=0; 
        isScribble=2;
        storecanvascommands("context=context;", false);
       }
    });
    
    elem.addEventListener('mouseover', function(event) {
       var xx, yy;
       if (event.pageX || event.pageY) {
       xx = event.pageX - elemLeft;
       yy = event.pageY - elemTop;
       } else {
       xx = event.clientX - elemLeft;
       yy = event.clientY - elemTop;
       }
       elem.title='(' + xx + ',' + yy + ')';
    });
    
        
    elem.addEventListener('mousemove', function(event) {
       if (isScribble == 2) { // || isScribble == 1) {

       if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {
       if (event.pageX || event.pageY) {
       x = event.pageX - elemLeft;
       y = event.pageY - elemTop;
       } else {
       x = event.clientX - elemLeft;
       y = event.clientY - elemTop;
       }
       lastx=x;
       lasty=y;
       } else {
       lastx=x;
       lasty=y;
       if (event.pageX || event.pageY) {
       x = event.pageX - elemLeft;
       y = event.pageY - elemTop;
       } else {
       x = event.clientX - elemLeft;
       y = event.clientY - elemTop;
       }
       }
       elem.title='(' + x + ',' + y + ')';
       
       
       
    if (isScribble == 2)  {
    if (x != lastx || y != lasty) {
      document.getElementById('divannotation').style.display='block';
      document.getElementById('myisubject').style.display = 'inline';
      document.getElementById('myiemail').style.display = 'inline';
    context.strokeStyle=document.getElementById('mycolour').value;
    storecanvascommands("context.fillStyle='" + document.getElementById('mycolour').value + "';", false);
    context.beginPath();
    storecanvascommands("context.beginPath();", false);
    context.moveTo(x,y);
    storecanvascommands("context.moveTo(" + x + "," + y + ");", false);
    context.lineTo(lastx,lasty);
    storecanvascommands("context.lineTo(" + lastx + "," + lasty + ");", false);
    context.stroke();
    storecanvascommands("context.stroke();", false);
    
    
	}
	}
		isScribble=2;


    }

    });
    
	}
}


setTimeout(tryit, 3000);