<!doctype html>
<html>
<head>
<title>Emoji Overlay - RJM Programming - November, 2016</title>
<meta charset="UTF-8">
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>

var overlaynum=0;
var overlayarr=[];
var overallsofar='';
var lasttop=0;
var one_forty_two=location.search.split('fontsize=')[1] ? location.search.split('fontsize=')[1].split('&')[0] : '142';
var cf = "bold " + Math.floor(eval((1 * one_forty_two) / 2)) + "px Impact";
var canvascmds=[];
var elem, context, pretoh="";

function docgetclass(inc, intag) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(inc);
} else {
var ijl;
var anarris=[];
var huhs=document.getElementsByTagName(intag);
for (ijl=0; ijl<huhs.length; ijl++) {
if (huh[ijl].className.indexOf(inc) != -1) {
anarris.push(huhs[ijl]);
}
}
return anarris;
}
}

function checkforclass() {
var buildup="";
var cfcs=docgetclass('emojioverlay','*');
for (var ij=0; ij<cfcs.length; ij++) {
if (cfcs[ij].innerHTML.replace(/&/g,'&').indexOf(';&') != -1) {
var emjs=cfcs[ij].innerHTML.replace(/&/g,'&').split("&");
buildup=''; //&#' + emjs[1].split(';')[0] + ';';
cfcs[ij].style.opacity=eval(cfcs[ij].style.opacity / eval(-1 + emjs.length));
for (var iemjs=1; iemjs<emjs.length; iemjs++) {
buildup+='<span style="position:absolute;top:' + cfcs[ij].style.top + ';left:' + cfcs[ij].style.left + ';font-size:' + cfcs[ij].style.fontSize + ';opacity:' + cfcs[ij].style.opacity + ';z-index:' + cfcs[ij].style.zIndex + ';">&#' + emjs[iemjs].split(';')[0] + ';</span>';
}
cfcs[ij].innerHTML=buildup;
cfcs[ij].style.visibility='visible';
//alert(buildup);
}
}
}

function placeemoji(cpis) {
var dl="", intext="",intxs;
if (cpis == "" && canvascmds.length > 0) {
for (var iip=0; iip<canvascmds.length; iip++) {
cpis+=dl + canvascmds[iip];
if (dl == "") intxs=document.getElementsByTagName('p');
dl=",";
}
}
if (cpis != "") {
//alert(cpis);
var cps=cpis.split(',');
elem=document.getElementById('mycanvas');
elem.width = elem.width;
for (var ip=0; ip<cps.length; ip++) {
if (dl == "") {
intext='&#' + cps[ip] + ";";
} else {
intext=intxs[ip].innerHTML.split('<')[0];
}
context = elem.getContext("2d");
context.font = cf;
context.strokeStyle = "rgba(0,0,0," + eval(1.0 / eval(canvascmds.length)) + ")";
context.fillStyle = "rgba(127,127,127," + eval(1.0 / eval(canvascmds.length)) + ")";
context.strokeText(intext, 0, 80);
context.fillText(intext, 0, 80);
pretoh = elem.toDataURL("image/png",0);
}
}
}

function draw() {
var sofar="";
overlaynum=overlayarr.length;
for (var i=0; i<overlaynum; i++) {
sofar+=overlayarr[i].replace('opacity:1.0;', 'opacity:' + eval(1.0 / overlaynum) + ';');
}
document.getElementById('mylefttd').innerHTML=sofar + overallsofar;
checkforclass();
//alert(65);
placeemoji("");
}

function testcall() {
var sofar="", acnt=1;
var one = location.search.split('emojicp1=')[1] ? location.search.split('emojicp1=')[1].split('&')[0] : "";
if (one != "") {
while (one != "") {
canvascmds.push(one.replace('-',''));
overlayarr.push('<p title="Email Me ..." onclick=" donw(document.getElementById(' + "'" + 'mylefttd' + "'" + ').innerHTML); " style="opacity:1.0;z-index:5;font-size:' + one_forty_two + 'px;position:absolute;top:0px;left:0px;">&#' + one.replace('-','') + ';</p>');
acnt++;
one = location.search.split('emojicp' + acnt + '=')[1] ? location.search.split('emojicp' + acnt + '=')[1].split('&')[0] : "";
}
}
draw();
}

function testcallcsv(incsv) {
//alert(incsv);
if (('' + incsv) != '') {
var sofar="", acnt=1, preone=('' + incsv).split(',');
var one = preone[0];
if (one != "") {
while (one != "") {
oneatatime(one, false);
acnt++;
if (acnt > preone.length) {
one = "";
} else {
one = preone[eval(-1 + acnt)];
}
}
}
//alert(64);
draw();
}
return true;
}

function oneatatime(inthing, wipeclean) {
var sofar="";
if (wipeclean || ('' + inthing).indexOf('-') != -1) {
if (document.getElementById('mylefttd').innerHTML != "") {
var firstidea=document.getElementById('mylefttd').innerHTML;
for (var jj=lasttop; jj>=0; jj-=200) {
while (firstidea.indexOf('top:' + jj + 'px') != -1) {
firstidea=firstidea.replace('top:' + jj + 'px','top:' + eval(200 + jj) + 'px');
}
}
overallsofar+=firstidea;
lasttop+=200;
}
document.getElementById('mylefttd').innerHTML=overallsofar;
overlaynum=0;
overlayarr=[];
canvascmds=[];
}
if (('' + inthing) != "") {
canvascmds.push(('' + inthing).replace('-',''));
overlayarr.push('<p title="Email Me ..." onclick=" donw(document.getElementById(' + "'" + 'mylefttd' + "'" + ').innerHTML); " style="opacity:1.0;z-index:5;font-size:' + one_forty_two + 'px;position:absolute;top:0px;left:0px;">&#' + ('' + inthing).replace('-','') + ';</p>');
}
draw();
}

function aemail(ame) { // thanks to http://www.telerik.com/forums/proper-way-to-do-mailto-and-tel-links(
window.top.location = ame.href;
}

function donw(what) {
if (what != "") {
if (what != " ") {
var whats=what.split(' onclick="'), w2;
if (whats.length >= 2) {
what=whats[0] + " ";
for (var ii=1; ii<whats.length; ii++) {
w2=whats[ii].split(' style=');
what+=whats[ii].replace(w2[0],' ');
}
}
}
var thisto=prompt('Please tell me who to email to?','fillin@email.here');
if (thisto == null) { thisto=''; }
if (thisto.indexOf('@') != -1) {
if (what == " ") {
what=what;
} else {
document.getElementById('myemailer').src='http://www.rjmprogramming.com.au/HTMLCSS/emoji_overlay_emailer.php?to=' + encodeURIComponent(thisto) + '&htmlis=' + encodeURIComponent(what);
}
}
var nw=window.open("","_blank","top=50,left=50,height=400,width=200");
nw.document.write('<!doctype html><html><head><meta charset="UTF-8"><title>Your Emoji Overlay courtesy of RJM Programming http://www.rjmprogramming.com.au/HTMLCSS/emoji_overlay.htm</title></head><body>' + what + '</body></html>');
if (pretoh != "") {
window.open(pretoh,"_blank","top=50,left=250,height=400,width=200");
}
}
}

</script>
</head>
<body onload=' checkforclass(); testcall(); ' style='background-color: teal;'>

<table>
<tbody id='mytbody'>
<tr>
<td id='mylefttd' style='position:absolute; top:0px;left:0px;width:15%;height:80%;background-color: white;'></td>
<td id='myrighttd' style='position:absolute; top:0;left:15%;width:85%;height:80%;background-color: #f0f0f0;'><iframe style='height:100%;width:100%;' id='myemojis' src='emoji_slideshow.htm' title='Emoji Slideshow'></iframe></td>
</tr>
<tr><td id='myleftlowertd' style='opacity:0.1;z-index:1;'></td><td style='position:absolute; top:80%;left:15%;'><h1> Emoji Overlay - RJM Programming - November, 2016</h1><h3> <a onclick=" var huh=prompt('Please enter Emoji Codepoints to overlay (-ve starts overlay afresh)','-128197,10133,128231'); if (huh == null) { huh=''; } if (huh != '') { testcallcsv(huh); } ">Click</a> an Emoji to Start and/or Codepoint link to Restart ... and you can Click your Emoji Overlays to Email them</h3></td></tr>
</tbody>
</table>
<div class='emojioverlay' id='emojioverlay' style='position:absolute;font-size:142px; top:80%;left:0px;width:15%;height:30%;z-index:5;opacity:1.0;visibility:hidden;'>&128197;&10133;&128231;</div>
<iframe id='myemailer' src='about:blank' style='display:none;width:1000px;height:1000px;'></iframe>
<canvas onclick=" document.getElementById('myemail').click(); " id='mycanvas' width=100 height=100 style='border: 3px solid green; background-color:#ffffff;position:absolute;top:50%;left:15%;width:15%;height:30%;z-index:9;'></canvas>
<a onclick=' if (pretoh != "") { window.open(pretoh,"_blank","top=50,left=250,height=400,width=200"); } if (navigator.userAgent.match(/Android/i)) { aemail(this); } ' style='display:none;' id='myemail' href='mailto:fill.in.email@address?subject=Your%20Emoji%20Overlay%20courtesy%20of%20RJM%20Programming%20http://www.rjmprogramming.com.au/HTMLCSS/emoji_overlay.htm&body='>Email</a>
</body>
</html>