<html>
<head>
<title>Reveal Gimp Transparency Primer Tutorial - RJM Programming - July, 2016</title>
<script type='text/javascript'>

var timer=null;
var atag=null;
var startHeight = 00;
var endHeight = 667;
var startWidth = 00;
var endWidth = 504;
var hgad = 10;
var ok = true;
var okstart = true;
var nowbw=0;
var nowsw=0;

function startSurprise(ais) {
atag = ais;
//alert(atag.innerHTML);
if (atag.innerHTML.indexOf("Reveal ") != -1) {
document.getElementById('xbod').style.backgroundImage = null;
document.getElementById('hgad').style.display = 'block';
document.getElementById('mycard1').innerHTML = '';
document.getElementById('mycard2').innerHTML = '';
if (endHeight == 0 && endWidth == 0) {
endHeight = document.getElementById('iis').style.height.replace('px', '');
endWidth = document.getElementById('iis').style.width.replace('px', '');
} else if (endHeight == 0) {
endHeight = document.getElementById('iis').style.height.replace('px', '');
} else if (endWidth == 0) {
endWidth = document.getElementById('iis').style.width.replace('px', '');
}
if (document.getElementById('link').innerHTML != "") ok = false;
atag.innerHTML = atag.innerHTML.replace("Reveal ", "Stop revealing ");
timer = setInterval(continueSurprise, 1000);
} else if (ok == true) {
atag.innerHTML = atag.innerHTML.replace("Stop revealing ", "Reveal ");
clearInterval(timer);
timer = null;
}
if (document.getElementById('link').innerHTML == '') ok = true;
document.getElementById('link').innerHTML = '';
}

function continueSurprise() {
document.getElementById('surprise').style.display = 'block';
startHeight = eval(((startHeight + hgad) % endHeight));
startWidth = eval(((startWidth + hgad) % endWidth));
if (startHeight <= hgad && startWidth <= hgad && !okstart) {
startHeight = hgad; //document.getElementById('iis').style.height.replace('px', '');
startWidth = hgad; //document.getElementById('iis').style.width.replace('px', '');
} else if (startHeight <= hgad && !okstart) {
startHeight = document.getElementById('iis').style.height.replace('px', '');
} else if (startWidth <= hgad && !okstart) {
startWidth = document.getElementById('iis').style.width.replace('px', '');
}
document.getElementById('surprise').style.height = startHeight;
document.getElementById('surprise').style.width = startWidth;
nowsw=eval(window.getComputedStyle(document.getElementById('surprise'), null).getPropertyValue("width").replace('px',''));
if (eval('0' + nowbw) > eval(startWidth)) document.getElementById('surprise').style.marginLeft = eval((nowbw - startWidth) / 2) + 'px';
okstart=false;
}

</script>
</head>
<body id='xbod' onresize="nowbw=eval(window.getComputedStyle(document.getElementById('xbod'), null).getPropertyValue('width').replace('px',''));" onload="nowbw=eval(window.getComputedStyle(document.getElementById('xbod'), null).getPropertyValue('width').replace('px',''));" onclick='document.getElementById("mya").click();' style='text-align:center;width:100%;background: url("surprise.png"); background-color: yellow;'>
<div id="link" style='text-align:center;width:100%;'>
<a id='myaa' style="width:100%;height:100%;display:block;position:absolute;top:0;left:0;" href='#' onclick=' startSurprise(document.getElementById("mya")); '></a>
</div>
<h1 style='text-align:center;width:100%;'>Surprise!</h1>
<div onclick='document.getElementById("mya").click();' style='text-align:center;width:100%;'>
<table style='text-align:center;width:100%;'><tr><td><a id='mya' href='#' onclick=' startSurprise(this); '>Reveal the surprise below ... </a></td>
<td id='hgad' style='display:none;'><a href='#' onclick=' hgad = eval(hgad + 10); if (this.innerHTML.indexOf("but maybe") == -1) { this.innerHTML = this.innerHTML.replace("got all day.", "you? ... But maybe you need to slow down!"); } if (hgad == 100) { this.innerHTML = this.innerHTML.replace("down!", "down? ... You might need a pedestrian road crossing button to play with at home?!"); } '>Haven't got all day.</a></td></tr></table>
</div>
<div onclick='document.getElementById("mya").click();' id='surpriseod' style='text-align:center;width:100%;'>
<div onclick='document.getElementById("mya").click();' id='surprise' style='display: none; overflow: hidden; margin-left:60px;'>
<table cellspacing=10 cellpadding=10 id='surpriset' onclick='document.getElementById("mya").click();'>
<tr>
<td style="display: none; width: 504px; height:667px; background: url('IMG_4286.gif') no-repeat; border: 2px solid green;"><h1 style='color: silver; text-align:top;' id='mycard1'>My <br>Card <br>Before<h2 style='color: red;' style='text-align:center;width:100%;'>Happy Birthday! <br><br><br>Have a Ball!</h3></td>
<td style="width: 504px; height:667px; background: url('IMG4286.png') no-repeat; border: 2px solid green;"><h1 style='color: silver; text-align:top;' id='mycard2'>My <br>Card <br>After<h2 style='color: red;' style='text-align:center;width:100%;'>Happy Birthday! <br><br><br>Have a Ball!</h2></td>
</tr>
</table>
</div>
</div>
<img id='iis' src='IMG4286.png' style='display:none;' onclick='document.getElementById("mya").click();' ></img>
</body>
<html>