<!doctype html>
<html>
<head>
<title>Merge Photos - RJM Programming - July, 2017</title>
<script type='text/javascript'>
// https://authorjulieglover.files.wordpress.com/2011/05/obama2527sdoppelganger.jpg
var fone='i1';
var db='',my_h1='',my_h3='',my_h4='';
var timero=null, wo=null;
var lastoid='';
var doit=true;
var cropping=0;
var which=0;
var widths=[0,0];
var heights=[0,0];
var lefts=[0,0];
var tops=[0,0];
var prevlefttwo=0, lefttwo=0, opacity=1.0, next=3;
var imageo=[], iois;
var images=[(location.search.split('image1=')[1] ? decodeURIComponent(location.search.split('image1=')[1].split('&')[0]) : 'IMG_0085.JPG'),(location.search.split('image2=')[1] ? decodeURIComponent(location.search.split('image2=')[1].split('&')[0]) : 'IMG_0086.JPG')];
var qm="?";
if (document.URL.indexOf('?image12') != -1 || document.URL.indexOf('&image12') != -1) { // doppelganger image logic
cropping=2;
if (document.URL.indexOf('&image12') != -1) qm="&";
var huhc='image12';
while (document.URL.indexOf(qm + huhc + eval(1 + cropping)) != -1) {
cropping++;
huhc+='' + cropping;
}
var oneimage=(location.search.split(huhc + '=')[1] ? decodeURIComponent(location.search.split(huhc + '=')[1].split('&')[0]) : '');
for (iois=0; iois<cropping; iois++) {
if (iois < 2) {
images[iois]=oneimage;
} else {
images.push(oneimage);
next=eval(1 + iois);
}
}
}
while ('' != (location.search.split('image' + next + '=')[1] ? decodeURIComponent(location.search.split('image' + next + '=')[1].split('&')[0]) : '')) {
images.push((location.search.split('image' + next + '=')[1] ? decodeURIComponent(location.search.split('image' + next + '=')[1].split('&')[0]) : ''));
widths.push(0);
heights.push(0);
lefts.push(0);
tops.push(0);
next++;
}
for (iois=1; iois<next; iois++) {
imageo.push(new Image());
imageo[eval(-1 + iois)].index=eval(-1 + iois);
imageo[eval(-1 + iois)].crop=cropping;
imageo[eval(-1 + iois)].src=images[eval(-1 + iois)];
}
dowhich();
function andtwo() {
document.getElementById('top_less').innerHTML='';
document.getElementById('top_more').innerHTML='';
document.getElementById('left_less').innerHTML='';
document.getElementById('left_more').innerHTML='';
document.getElementById('opacity_less').innerHTML='';
document.getElementById('opacity_more').innerHTML='';
}
function andt() {
lastoid='';
}
function doitf(oid) {
var i;
if (oid == 'opacity-') {
opacity-=0.05;
for (i=1; i<=imageo.length; i++) {
document.getElementById('i' + i).style.opacity=opacity;
}
} else if (oid == 'opacity+') {
opacity+=0.05;
for (i=1; i<=imageo.length; i++) {
document.getElementById('i' + i).style.opacity=opacity;
}
} else if (oid == '-') {
lefts[0]-=3;
document.getElementById('i1').style.left='' + lefts[0] + 'px';
} else if (oid == '+') {
lefts[0]+=3;
document.getElementById('i1').style.left='' + lefts[0] + 'px';
} else if (oid == ' ') {
lastoid='x';
} else if (oid == '') {
if (lastoid == '') {
tops[0]-=3;
document.getElementById('i1').style.top='' + tops[0] + 'px';
} else {
lastoid='';
}
} else if (('*' + oid + '*').indexOf('i1*') != -1) {
lastoid=oid;
tops[0]+=3;
document.getElementById(oid).style.top='' + tops[0] + 'px';
setTimeout(andt,1000);
//document.title='here' + tops[0] + 'px';
if (document.body.innerHTML.indexOf('to' + 'p_less') == -1) {
document.body.innerHTML+='<a id="top_less" onclick="doitf(' + "''" + ');" style="position:absolute;top:0;left:0;z-index:9;cursor:pointer;text-decoration:none;">^</a><a id="top_more" onclick="doitf(' + "'i1'" + ');" style="position:absolute;top:0;left:30px;z-index:9;cursor:pointer;text-decoration:none;">v</a><a id="left_less" onclick="doitf(' + "'-'" + ');" style="position:absolute;top:0;left:60px;z-index:9;cursor:pointer;text-decoration:none;"><</a><a id="left_more" onclick="doitf(' + "'+'" + ');" style="position:absolute;top:0;left:90px;z-index:9;cursor:pointer;text-decoration:none;">></a><a id="opacity_less" onclick="doitf(' + "'opacity-'" + ');" style="position:absolute;top:0;left:120px;z-index:9;cursor:pointer;text-decoration:none;">-</a><a id="opacity_more" onclick="doitf(' + "'opacity+'" + ');" style="position:absolute;top:0;left:150px;z-index:9;cursor:pointer;text-decoration:none;">+</a>';
setTimeout(andtwo,30000);
}
} else {
lastoid='';
if (document.body.innerHTML.indexOf('to' + 'p_less') == -1) {
document.body.innerHTML+='<a id="top_less" onclick="doitf(' + "''" + ');" style="position:absolute;top:0;left:0;z-index:9;cursor:pointer;text-decoration:none;">^</a><a id="top_more" onclick="doitf(' + "'i1'" + ');" style="position:absolute;top:0;left:30px;z-index:9;cursor:pointer;text-decoration:none;">v</a><a id="left_less" onclick="doitf(' + "'-'" + ');" style="position:absolute;top:0;left:60px;z-index:9;cursor:pointer;text-decoration:none;"><</a><a id="left_more" onclick="doitf(' + "'+'" + ');" style="position:absolute;top:0;left:90px;z-index:9;cursor:pointer;text-decoration:none;">></a><a id="opacity_less" onclick="doitf(' + "'opacity-'" + ');" style="position:absolute;top:0;left:120px;z-index:9;cursor:pointer;text-decoration:none;">-</a><a id="opacity_more" onclick="doitf(' + "'opacity+'" + ');" style="position:absolute;top:0;left:150px;z-index:9;cursor:pointer;text-decoration:none;">+</a>';
setTimeout(andtwo,30000);
}
doit=false;
}
}
function dowhich() {
if (eval(0 + which) < imageo.length) {
//alert(images[which]);
imageo[which].onerror = function () {
window.setTimeout(dowhich, 8);
};
imageo[which].onload = function () {
var xoff=0.0;
if (this.crop > 0 && this.crop >= this.index) {
widths[this.index] = eval((('' + this.width).replace('px','')) / this.crop); // or 'width' if you want a special/scaled size
heights[this.index] = ('' + this.height).replace('px',''); // or 'height' if you want a special/scaled size
prevlefttwo=lefttwo;
lefts[this.index] = prevlefttwo;
lefttwo+=eval('' + widths[this.index]);
if (this.index > 0) {
xoff+=eval(widths[this.index]); //eval(100.0 / this.crop);
}
document.body.innerHTML+='<div onclick="doitf(this.id);" id="i' + eval(1 + this.index) + '" style="overflow:hidden;position:absolute;top:' + tops[this.index] + 'px;left:' + lefts[this.index] + 'px;width:' + widths[this.index] + 'px;height:' + heights[this.index] + 'px;opacity:' + opacity + ';background:url(' + images[this.index] + ');background-position: ' + Math.floor(xoff) + 'px 0px;"></div>';
//db+='<div onclick="doitf(this.id);" id="i' + eval(1 + this.index) + '" style="overflow:hidden;position:absolute;top:' + tops[this.index] + 'px;left:' + lefts[this.index] + 'px;width:' + widths[this.index] + 'px;height:' + heights[this.index] + 'px;opacity:' + opacity + ';background:url(' + images[this.index] + ');background-position: ' + Math.floor(xoff) + 'px 0px;"></div>';
//document.title+=which + ' . ' + imageo.length + ' +-+ ' + this.index + ' .-. ' + db;
} else {
document.title+=' here ' + next + ' = ';
widths[this.index] = ('' + this.width).replace('px',''); // or 'width' if you want a special/scaled size
heights[this.index] = ('' + this.height).replace('px',''); // or 'height' if you want a special/scaled size
prevlefttwo=lefttwo;
lefts[this.index] = prevlefttwo;
lefttwo+=eval('' + widths[this.index]);
//document.title=lefttwo;
document.body.innerHTML+='<img onclick="doitf(this.id);" id="i' + eval(1 + this.index) + '" src="' + images[this.index] + '" style="position:absolute;top:' + tops[this.index] + 'px;left:' + lefts[this.index] + 'px;width:' + widths[this.index] + 'px;height:' + heights[this.index] + 'px;opacity:' + opacity + '"></img>';
//db+='<img onclick="doitf(this.id);" id="i' + eval(1 + this.index) + '" src="' + images[this.index] + '" style="position:absolute;top:' + tops[this.index] + 'px;left:' + lefts[this.index] + 'px;width:' + widths[this.index] + 'px;height:' + heights[this.index] + 'px;opacity:' + opacity + '"></img>';
//document.title+=which + ' . ' + imageo.length + ' +++ ' + this.index + ' ... ' + db;
}
dowhich();
//setTimeout(dowhich, 8);
};
imageo[which].src = images[which];
which++;
//alert(which);
//setTimeout(dowhich, 8000);
} else {
lefttwo=prevlefttwo;
//alert(db);
document.body.innerHTML+=db;
db='';
setTimeout(creep,1500);
}
}
function creep() {
var inext, ourlt=0, offset=0;
if (db != '') {
document.body.innerHTML+=db;
db='';
}
if (lefttwo <= eval(widths[0] / 100.0)) {
if (doit) {
lefttwo=0;
opacity=0.3;
document.getElementById('i1').style.opacity=opacity;
for (inext=eval(-1 + next); inext>=2; inext--) {
document.getElementById('i' + inext).style.left=lefttwo + 'px';
document.getElementById('i' + inext).style.opacity=opacity;
}
}
dorest();
} else {
if (doit) {
for (inext=eval(-1 + next); inext>=2; inext--) {
if (inext == eval(-1 + next)) {
lefttwo-=eval(prevlefttwo / 100.0);
opacity-=eval(0.7 / 100.0);
document.getElementById('i1').style.opacity=opacity;
document.getElementById('i' + inext).style.left=lefttwo + 'px';
document.getElementById('i' + inext).style.opacity=opacity;
offset+=widths[eval(-1 + inext)];
} else {
ourlt=(0 - eval(lefts[eval(-1 + inext)] / 100.0));
//alert(ourlt + ' ... ' + inext + ' ... ' + document.getElementById('i' + inext).style.left.replace('px',''));
document.getElementById('i' + inext).style.left=eval(ourlt + eval(document.getElementById('i' + inext).style.left.replace('px',''))) + 'px';
document.getElementById('i' + inext).style.opacity=opacity;
}
}
setTimeout(creep, 200);
} else {
dorest();
}
}
}
function retitle(newTitle) { // thanks to https://stackoverflow.com/questions/7501424/set-title-in-the-window-popup
if (wo.document.readyState == 'loading' || wo.document.readyState == 'complete') {
wo.document.title=newTitle;
window.clearInterval(timero);
}
}
function copytocanvas() {
var mwidth=Math.max(eval(eval(1 * lefts[0]) + eval(widths[0])), eval(eval(1 * lefts[eval(-1 + lefts.length)]) + eval(widths[eval(-1 + widths.length)])));
var mheight=Math.max(eval(eval(tops[0]) + eval(tops[0])), eval(eval(tops[eval(-1 + tops.length)]) + eval(heights[eval(-1 + heights.length)])));
var bodyih=document.body.innerHTML;
if (1 == 1) {
wo=window.open("","_blank","top=50,left=50,width=" + mwidth + ",height=" + mheight);
timero=window.setInterval("retitle('Select All/Copy here ready for Email Body paste')", 10);
wo.document.write("<html><head><style> * { cursor:none; } </style></head><body>" + (bodyih.split('<h1')[0] + document.getElementById('myh1').outerHTML.split('>')[0] + "> </h1>" + bodyih.split('</h4>')[1]).replace('>><','><').replace('><<','><').replace('>-<','><').replace('>v<','><').replace('>^<','><').replace('>+<','><') + "</body></html>");
} else { // didn't work for us, but thanks to https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
//alert(mheight + ' ... ' + mwidth);
document.body.innerHTML+='<canvas id="canvas" width="' + mwidth + '" height="' + mheight + '" style="border:2px solid yellow;position:absolute;top:0px;left:0px;"></canvas>';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' + mwidth + '" height="' + mheight + '">' +
'<foreignObject width="' + mwidth + '" height="' + mheight + '">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
bodyih +
'</div>' +
'</foreignObject>' +
'</svg>';
//alert(data);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
location.href='#canvas';
}
}
function hgoes(offon) {
if (offon == 0) {
//alert(1);
my_h1=document.getElementById('myh1').innerHTML;
my_h3=document.getElementById('myh3').innerHTML;
my_h4=document.getElementById('myh4').innerHTML;
document.getElementById('myh1').innerHTML=' ';
document.getElementById('myh3').innerHTML='';
document.getElementById('myh4').innerHTML='';
andtwo();
//alert(2);
setTimeout("hgoes(1)", 7000);
//alert(3);
} else {
document.getElementById('myh1').innerHTML=my_h1;
document.getElementById('myh3').innerHTML=my_h3;
document.getElementById('myh4').innerHTML=my_h4;
document.getElementById('top_less').innerHTML='^';
document.getElementById('top_more').innerHTML='v';
document.getElementById('left_less').innerHTML='<';
document.getElementById('left_more').innerHTML='>';
document.getElementById('opacity_less').innerHTML='-';
document.getElementById('opacity_more').innerHTML='+';
}
}
function dorest() {
var nwidth=Math.max(eval(eval(0 * lefts[0]) + eval(widths[0])), eval(eval(0 * lefts[eval(-1 + lefts.length)]) + eval(widths[eval(-1 + widths.length)])));
if (document.body.innerHTML.indexOf('to' + 'p_less') == -1) {
document.body.innerHTML+='<a id="top_less" onclick="doitf(' + "''" + ');" style="position:absolute;top:0;left:0;z-index:9;cursor:pointer;text-decoration:none;">^</a><a id="top_more" onclick="doitf(' + "'i1'" + ');" style="position:absolute;top:0;left:30px;z-index:9;cursor:pointer;text-decoration:none;">v</a><a id="left_less" onclick="doitf(' + "'-'" + ');" style="position:absolute;top:0;left:60px;z-index:9;cursor:pointer;text-decoration:none;"><</a><a id="left_more" onclick="doitf(' + "'+'" + ');" style="position:absolute;top:0;left:90px;z-index:9;cursor:pointer;text-decoration:none;">></a><a id="opacity_less" onclick="doitf(' + "'opacity-'" + ');" style="position:absolute;top:0;left:120px;z-index:9;cursor:pointer;text-decoration:none;">-</a><a id="opacity_more" onclick="doitf(' + "'opacity+'" + ');" style="position:absolute;top:0;left:150px;z-index:9;cursor:pointer;text-decoration:none;">+</a>';
setTimeout(andtwo,30000);
}
nwidth+=4;
document.body.innerHTML+='<h1 id="myh1" style="position:absolute;top:0;left:' + nwidth + 'px;width:100%;">Merging Photos</h1><h3 id="myh3" style="position:absolute;top:40px;left:' + nwidth + 'px;width:100%;">RJM Programming - August, 2017</h3><h4 id="myh4" style="position:absolute;top:100px;left:' + nwidth + 'px;width:100%;">Prefix (egs. image1,image2 (multiple images) or <br>image12 (horizontally halved parts of single image will be superimposed) or <br>image1,image234 (combinations) ... <br>add plus (+) to place on top of this blurb, preprefix by toggle=1& to throb it): <br><input onblur="assess(this.value);" value="" type="text"></input><br><br><input type="button" value="Select All/Copy here or via New Window and Select All/Copy into Email Body ..." onclick="hgoes(0); setTimeout(copytocanvas,6500);"></input></h4><iframe id="myiframe" src="" style="position:absolute;top:0;left:' + nwidth + 'px;width:100%;height:100vh;display:none;z-index:19;"></iframe>';
if (document.URL.indexOf('toggle=') != -1) {
setTimeout(oponezero, 1000);
}
}
function oponezero() {
var nextis='';
for (var ii=1; ii<=next; ii++) {
if (document.getElementById('i' + ii)) {
if (('i' + ii) == fone) {
document.getElementById('i' + ii).style.opacity=1.0;
} else if (nextis == '') {
nextis=('i' + ii);
document.getElementById('i' + ii).style.opacity=0.0;
} else {
document.getElementById('i' + ii).style.opacity=0.0;
}
}
}
if (nextis != '') fone=nextis;
setTimeout(oponezero, (location.search.split('toggle=')[1] ? eval(location.search.split('toggle=')[1].split('&')[0] * 500) : 500));
}
function assess(intv) {
var myurl=document.URL.split('#')[0].split('?')[0], ans='', viai=false, extras="";
viai=false;
if (intv.indexOf('toggle=') == 0 && intv.indexOf('&') != -1) {
extras=intv.split('&')[0] + '&';
intv=intv.split('&')[1];
}
tv=intv;
if (intv.indexOf('+') != -1) {
viai=true;
tv=intv.replace(/\+/g,'');
}
if (tv == '') {
if (!viai) location.href=myurl;
if (viai) {
document.getElementById('myh1').innerHTML='';
document.getElementById('myh3').innerHTML='';
document.getElementById('myh4').innerHTML='';
document.getElementById('myiframe').style.display='block';
document.getElementById('myiframe').src=myurl;
}
} else {
var cv=tv.split(','), eg='';
for (var icv=0; icv<cv.length; icv++) {
if (cv[icv].indexOf('image') == 0) {
if (cv[icv].length > 6) {
if (eval(cv[icv].length - 5) == 2) {
eg=' Doppelganger examples are https://authorjulieglover.files.wordpress.com/2011/05/obama2527sdoppelganger.jpg or http://1.bp.blogspot.com/_1XbCsR5voz8/SyVjz6MiFsI/AAAAAAAAGWg/Zw_ZoyTsEaw/s400/lincoln+doppelganger.jpg or https://authorjulieglover.files.wordpress.com/2011/05/palindoppelganger2.png';
} else {
eg='';
}
ans=prompt('Enter Image URL (made up of ' + eval(cv[icv].length - 5) + ' horizontal sections) associated with the label ' + cv[icv] + eg, '');
} else {
ans=prompt('Enter Image URL associated with the label ' + cv[icv], '');
}
if (ans == null || ans == '') {
location.href=myurl;
} else if (myurl.indexOf('?') == -1) {
if (ans.indexOf('+') != -1) {
if (ans.substring(0,1) == '+' && ans.slice(-1) == '+') {
viai=true;
ans=ans.substring(1, eval(-2 + ans.length));
} else if (ans.substring(0,1) == '+') {
viai=true;
ans=ans.substring(1);
} else if (ans.slice(-1) == '+') {
viai=true;
ans=ans.substring(0, eval(-1 + ans.length));
}
}
myurl+='?' + extras + cv[icv] + '=' + encodeURIComponent(ans);
} else {
if (ans.indexOf('+') != -1) {
if (ans.substring(0,1) == '+' && ans.slice(-1) == '+') {
viai=true;
ans=ans.substring(1, eval(-2 + ans.length));
} else if (ans.substring(0,1) == '+') {
viai=true;
ans=ans.substring(1);
} else if (ans.slice(-1) == '+') {
viai=true;
ans=ans.substring(0, eval(-1 + ans.length));
}
}
myurl+='&' + cv[icv] + '=' + encodeURIComponent(ans);
}
}
}
if (!viai) location.href=myurl.replace('%2B','+').replace('%2B','+');
if (viai) {
document.getElementById('myh1').innerHTML='';
document.getElementById('myh3').innerHTML='';
document.getElementById('myh4').innerHTML='';
document.getElementById('myiframe').style.display='block';
//if (myurl.indexOf('%2B') != -1) alert(myurl + ' vs ' + myurl.replace('%2B','+').replace('%2B','+'));
document.getElementById('myiframe').src=myurl.replace('%2B','+').replace('%2B','+');
}
}
}
</script>
</head>
<body>
</body>
</html>