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

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;
    context.fillRect(Math.min(x,lastx), Math.min(y,lasty), Math.abs(x - lastx), Math.abs(y - lasty));
}

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

function docircle() { // new idea ... March, 2016
    context.strokeStyle=document.getElementById('mycolour').value;
    context.beginPath();
    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);
    context.stroke();
}

function doline() { // new idea ... March, 2016
    context.strokeStyle=document.getElementById('mycolour').value;
    context.beginPath();
    context.moveTo(x,y);
    context.lineTo(lastx,lasty);
    context.stroke();
}

function clearall() { // new idea ... March, 2016
    context.clearRect(0, 0, elem.width, elem.height);
    elem.style.borderRight='1px solid black';
    elem.style.borderBottom='1px solid black';
}

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));
    context.strokeStyle = "black";
    document.getElementById('iannotation').value='';
  } else {
    context.strokeStyle = "blue";
    document.getElementById('jannotation').value='';
  }
  //context.font = cf;
  context.font = document.getElementById('myfont').value;
  context.strokeStyle=document.getElementById('mycolour').value;
  context.strokeText(anno.value,eval(2 + Math.min(x,lastx)),eval((Math.min(y,lasty) + Math.max(y,lasty)) / 2));
  anno.value = '';
 }
}

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');
        context.drawImage(oimg,eval(document.getElementById("xoff").value),eval(document.getElementById("yoff").value));
      } else {
        context.clearRect(0,0,elem.width,elem.height);
        document.getElementById('spareimg').src=uval;
        oimg=document.getElementById('spareimg');
        context.drawImage(oimg,eval(document.getElementById("xoff").value),eval(document.getElementById("yoff").value));
      }
   }
}

function readOBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById("file").files;
    if (!files.length) {
      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) {
    var img = new Image();
    img.onload = function() {
      context.drawImage(img,eval(document.getElementById("xoff").value),eval(document.getElementById("yoff").value));
    }
    img.src = e.target.result;
    }
}
 
function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById("file").files;
    if (!files.length) {
      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) {
    var img = new Image();
    img.onload = function() {
      context.clearRect(0,0,elem.width,elem.height);
      context.drawImage(img,eval(document.getElementById("xoff").value),eval(document.getElementById("yoff").value));
    }
    img.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; } break;
        case "mousemove": if (isScribble == 2) {

       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 (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;
    context.beginPath();
    context.moveTo(x,y);
    context.lineTo(lastx,lasty);
    context.stroke();
	}


    }
    break;        
        case "mouseup":  if (isScribble == 2) { isScribble=1; } break;
        default: return;
    }
    
    //}

}


function tryit() {
 var tds=document.getElementsByTagName('td'), hstuff='';
 if (tds.length > 0) {
    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=' isScribble=0; ' alt='End of scribble' title='End of scribble'></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 type='url' value='+' onblur='readUBlob(this.value,0,0);' style='width:60%;'></input><br>... Offset X: <input style='width:25%;' id='xoff' type='number' value='0'></input> Offset Y: <input style='width:25%;' id='yoff' 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 World 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 World 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%20World%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' + 'nnotaxtion') == -1) tds[eval(-1 + tds.length)].innerHTML+=hstuff;
    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 = "world_" + 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;
       }
    });

    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) {
        isScribble=1;
       }
    });
    
    elem.addEventListener('touchend', function(event) {
       if (isScribble == 2) {
        isScribble=1;
       }
    });

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


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

       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 (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;
    context.beginPath();
    context.moveTo(x,y);
    context.lineTo(lastx,lasty);
    context.stroke();
	}


    }

    });
    
	}
}


setTimeout(tryit, 2000);