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

var fcont, w, isScribble=0;
var xua = navigator.userAgent; 
var isiPad = /iPad/i.test(xua) || /iPhone OS 3_1_2/i.test(xua) || /Andrxoid/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 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);
 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 (eval(laststop) > 0) {
  laststop--;
  upto = majors[laststop];
 } else if (eval(laststop) == 0) {
  laststop = -1;
 }
 
 context.clearRect(0, 0, elem.width, elem.height);
 context.drawImage(origimg,0,0);
 if (eval(upto) >= 0) {
   for (var iup=0; iup <= upto; iup++) {
     eval(canvascommands[iup]);
   }
 }
}

function storecanvascommands(thecmd, major) {
 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
    //context.strokeStyle=document.getElementById('mycolour').value;
    context.fillStyle=document.getElementById('mycolour').value;
    storecanvascommands("context.fillStyle='" + document.getElementById('mycolour').value + "';", false);
    context.fillRect(Math.min(x,lastx), Math.min(y,lasty), Math.abs(x - lastx), Math.abs(y - lasty));
    storecanvascommands("context.fillRect(" + Math.min(x,lastx) + "," + Math.min(y,lasty) + "," + Math.abs(x - lastx) + "," + Math.abs(y - lasty) + ");", true);
}

function dorectangleborder() { // new idea ... March, 2016
    context.strokeStyle=document.getElementById('mycolour').value;
    //context.fillStyle=document.getElementById('mycolour').value;
    storecanvascommands("context.strokeStyle='" + document.getElementById('mycolour').value + "';", false);
    context.rect(Math.min(x,lastx), Math.min(y,lasty), Math.abs(x - lastx), Math.abs(y - lasty));
    storecanvascommands("context.fillRect(" + Math.min(x,lastx) + "," + Math.min(y,lasty) + "," + Math.abs(x - lastx) + "," + Math.abs(y - lasty) + ");", false);
    context.stroke();
    storecanvascommands("context.stroke();", true);
}

function docircle() { // new idea ... March, 2016
    context.strokeStyle=document.getElementById('mycolour').value;
    storecanvascommands("context.strokeStyle='" + document.getElementById('mycolour').value + "';", false);
    context.beginPath();
    storecanvascommands("context.beginPath();", false);
    context.arc(eval((x + lastx) / 2.0),eval((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((x + lastx) / 2.0) + "," + eval((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);
}

function doline() { // new idea ... March, 2016
    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(" + x + "," + y + ");", false);
    context.lineTo(lastx,lasty);
    storecanvascommands("context.lineTo(" + lastx + "," + lasty + ");", false);
    context.stroke();
    storecanvascommands("context.stroke();", true);
}

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);
}

function placeannotation(anno) { // new idea ... March, 2016
 if (anno.value != '') {
  if (anno.id == 'jannotation') {
    context.clearRect(Math.min(x,lastx), Math.min(y,lasty), Math.abs(x - lastx), Math.abs(y - lasty));
    storecanvascommands("context.clearRect(" + Math.min(x,lastx) + "," + 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(2 + Math.min(x,lastx)),eval((Math.min(y,lasty) + Math.max(y,lasty)) / 2));
  storecanvascommands("context.strokeText(" + anno.value + "," + eval(2 + Math.min(x,lastx)) + "," + eval((Math.min(y,lasty) + Math.max(y,lasty)) / 2) + ");", false);
  anno.value = '';
  storecanvascommands("document.getElementById('" + anno.id + "').value='';", true);
 }
}

function readUBlob(uval, opt_startByte, opt_stopByte) {
   //var oimg;
   if (uval.replace('+','') != '') {
      if (uval.substring(0,1) == '+') {
        document.getElementById('spareimg').src=uval.substring(1);
        oimg=document.getElementById('spareimg');
        if (eval(document.getElementById('rotation').value) != 0) {
          drawRotated(eval(document.getElementById('rotation').value));
        } else {
          context.drawImage(oimg,eval(document.getElementById("xoff").value),eval(document.getElementById("yoff").value));
          storecanvascommands("context.drawImage(oimg," + eval(document.getElementById("xoff").value) + "," + eval(document.getElementById("yoff").value) + ");", true);
        }
      } else {
        context.clearRect(0,0,elem.width,elem.height);
        document.getElementById('spareimg').src=uval;
        oimg=document.getElementById('spareimg');
        if (eval(document.getElementById('rotation').value) != 0) {
          drawRotated(eval(document.getElementById('rotation').value));
        } else {
          context.drawImage(oimg,eval(document.getElementById("xoff").value),eval(document.getElementById("yoff").value));
          storecanvascommands("context.drawImage(oimg," + eval(document.getElementById("xoff").value) + "," + eval(document.getElementById("yoff").value) + ");", true);
        }
      }
   }
}

function readOBlob(opt_startByte, opt_stopByte) {

    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;
          drawRotated(eval(document.getElementById('rotation').value));
        } else {
          context.drawImage(ximg,eval(document.getElementById("xoff").value),eval(document.getElementById("yoff").value));
          storecanvascommands("context.drawImage(ximg," + eval(document.getElementById("xoff").value) + "," + eval(document.getElementById("yoff").value) + ");", true);
        }
    }
    ximg.src = e.target.result;
    };
}
 
function readBlob(opt_startByte, opt_stopByte) {

    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;
          drawRotated(eval(document.getElementById('rotation').value));
      } else {
          context.drawImage(ximg,eval(document.getElementById("xoff").value),eval(document.getElementById("yoff").value));
          storecanvascommands("context.drawImage(ximg," + eval(document.getElementById("xoff").value) + "," + 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
    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
    storecanvascommands("context.translate(" + elem.width/2 + "," + elem.height/2 + ");", false);
    context.translate(elem.width/2,elem.height/2);

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

    if (document.getElementById('rof').value != '') oimg = origimg;
    if (document.getElementById('rof').value == '' || oimg != null) {
    // draw the image
    // since the context is rotated, the image will be rotated also
    storecanvascommands("context.drawImage(oimg," + -oimg.width/2 + eval(document.getElementById("xoff").value) + "," + -oimg.height/2 + 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,-oimg.width/2 + eval(document.getElementById("xoff").value),-oimg.height/2 + 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();
}

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);
 tds=document.getElementsByTagName('img');
 if (document.URL.indexOf('/india.') != -1) koff--;
 origimg=tds[eval(koff + tds.length)];
 tds=document.getElementsByTagName('td');
 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=''></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/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><button onclick='readBlob(0,0);'>Place into Canvas</button><button onclick='readOBlob(0,0);'>Overlay into Canvas</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);