<html>
<head>
<title>Reveal Gimp Transparency Primer Tutorial - RJM Programming - September, 2014</title>
<script type='text/javascript'>
var timer=null;
var atag=null;
var startHeight = 00;
var endHeight = 667;
var hgad = 10;
var ok = true;
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) endHeight = document.getElementById('iis').style.height.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';
document.getElementById('surprise').style.height = eval(((startHeight + hgad) % endHeight));
//alert(document.getElementById('surprise').style.height);
startHeight = eval(((startHeight + hgad) % endHeight));
}
</script>
</head>
<body id='xbod' align='center' onclick='document.getElementById("mya").click();' style='background: url("surprise.png"); background-color: yellow;'>
<div id="link">
<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 align='center'>Surprise!</h1>
<div align='center' onclick='document.getElementById("mya").click();' >
<table><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();' align='center' id='surprise' style='display: none; overflow: hidden;'>
<table cellspacing=10 cellpadding=10 align='center' 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;' align='top' id='mycard1'>My <br>Card <br>Before<h2 style='color: red;' align='center'>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;' align='top' id='mycard2'>My <br>Card <br>After<h2 style='color: red;' align='center'>Happy Birthday! <br><br><br>Have a Ball!</h2></td>
</tr>
</table>
</div>
<img id='iis' src='IMG4286.png' style='display:none;' onclick='document.getElementById("mya").click();' ></img>
</body>
<html>