<!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 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')];
if (document.URL.indexOf('?image12') != -1) { // doppelganger image logic
cropping=2;
var huhc='image12';
while (document.URL.indexOf('?' + 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.1;
for (i=1; i<=imageo.length; i++) {
document.getElementById('i' + i).style.opacity=opacity;
}
} else if (oid == 'opacity+') {
opacity+=0.1;
for (i=1; i<=imageo.length; i++) {
document.getElementById('i' + i).style.opacity=opacity;
}
} else if (oid == '-') {
lefts[0]-=5;
document.getElementById('i1').style.left='' + lefts[0] + 'px';
} else if (oid == '+') {
lefts[0]+=5;
document.getElementById('i1').style.left='' + lefts[0] + 'px';
} else if (oid == ' ') {
lastoid='x';
} else if (oid == '') {
if (lastoid == '') {
tops[0]-=5;
document.getElementById('i1').style.top='' + tops[0] + 'px';
} else {
lastoid='';
}
} else if (('*' + oid + '*').indexOf('i1*') != -1) {
lastoid=oid;
tops[0]+=5;
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) {
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>';
} else {
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.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>';
}
setTimeout(dowhich, 8);
};
imageo[which].src = images[which];
which++;
//setTimeout(dowhich, 8000);
} else {
lefttwo=prevlefttwo;
setTimeout(creep,1500);
}
}
function creep() {
var inext, ourlt=0, offset=0;
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 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): <br><input onblur="assess(this.value);" value="" type="text"></input></h4><iframe id="myiframe" src="" style="position:absolute;top:0;left:' + nwidth + 'px;width:100%;height:100vh;display:none;z-index:19;"></iframe>';
}
function assess(intv) {
var myurl=document.URL.split('#')[0].split('?')[0], ans='', viai=false;
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 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) viai=true;
myurl+='?' + cv[icv] + '=' + encodeURIComponent(ans.replace('+',''));
} else {
if (ans.indexOf('+') != -1) viai=true;
myurl+='&' + cv[icv] + '=' + encodeURIComponent(ans.replace('+',''));
}
}
}
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;
}
}
}
</script>
</head>
<body>
</body>
</html>