<html>
<head>
<title>Supervising Changing Everything - RJM Programming - January, 2015</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>


var xf=null;
var yf=null;


var mode='option';
var submode='Morse Code';
var optionMorse = ''; // option/Morse
var optionNonMorse = ''; // option/NonMorse
var buttonMorse = ''; // button/Morse
var buttonNonMorse = ''; // button/NonMorse
var subwas = '';

var mtable = [
'.-','a', //.-
'-...','b', //-...
'-.-.','c', //-.-.
'-..','d', //-..
'.','e', //.
'..-.','f', //..-.
'--.','g', //--.
'....','h', //....
'..','i', //..
'.---','j', //.---
'-.-','k', //-.-
'.-..','l', //.-..
'--','m', //--
'-.','n', //-.
'---','o', //---
'.--.','p', //.--.
'--.-','q', //--.-
'.-.','r', //.-.
'...','s', //...
'-','t', //-
'..-','u', //..-
'...-','v', //...-
'.--','w', //.--
'-..-','x', //-..-
'-.--','y', //-.--
'--..','z', //--..
'.----','1', //.----
'..---','2', //..---
'...--','3', //...--
'....-','4', //....-
'.....','5', //.....
'-....','6', //-....
'--...','7', //--...
'---..','8', //---..
'----.','9', //----.
'-----','0'
];

function aletter(myt) {
if (myt == "button") {
alert("I am a button using " + submode);
} else {
alert("I am a dropdown option using " + submode);
}
}

function toggle() {
if (mode == 'option') {
if (submode == 'Morse Code' && buttonMorse == '') {
yf.body.innerHTML = yf.body.innerHTML.replace(/\/option/g, '/input').replace(/option /g, 'input type="button" ').replace(/\/select/g, '/span').replace(/select /g, 'span ');
buttonMorse = yf.body.innerHTML;
} else if (submode == 'Morse Code') {
yf.body.innerHTML = buttonMorse;
} else if (buttonNonMorse == '') {
yf.body.innerHTML = yf.body.innerHTML.replace(/\/option/g, '/input').replace(/option /g, 'input type="button" ').replace(/\/select/g, '/span').replace(/select /g, 'span ');
buttonNonMorse = yf.body.innerHTML;
} else {
yf.body.innerHTML = buttonNonMorse;
}
mode = 'input type="button" ';
} else {
if (submode == 'Morse Code') {
yf.body.innerHTML = optionMorse;
} else {
yf.body.innerHTML = optionNonMorse;
}
mode = 'option';
}
}

function togglesub() {
var i, j=1, k;
if (submode == 'Morse Code') {
if (subwas == '' && mode != "option") subwas = yf.body.innerHTML;
if (mode != "option") yf.body.innerHTML = yf.body.innerHTML.replace(/this.type/g, 'thisDOTtype');
k = yf.body.innerHTML.indexOf(mtable[0]);
for (i=0; i<mtable.length; i+=2) {
if (mode == "option") {
yf.body.innerHTML = eval("yf.body.innerHTML.replace('>" + mtable[i] + "<', '>" + mtable[i + 1] + "<')");
} else {
yf.body.innerHTML = yf.body.innerHTML.substring(0,k) + eval("yf.body.innerHTML.substring(k).replace('" + mtable[i] + "', '" + mtable[i + 1] + "')");
if ((i + 2) < mtable.length) k = k + yf.body.innerHTML.substring(k).indexOf(mtable[i + 2]);
}
}
yf.body.innerHTML = yf.body.innerHTML.replace(/thisDOTtype/g, 'this.type');
if (mode == 'option') optionNonMorse = yf.body.innerHTML;
submode = 'Characters ';
} else if (mode != "option" && subwas != "") {
yf.body.innerHTML = subwas;
if (mode == 'option') optionMorse = yf.body.innerHTML;
submode = 'Morse Code';
} else {
for (i=1; i<mtable.length; i+=2) {
yf.body.innerHTML = eval("yf.body.innerHTML.replace('>" + mtable[i] + "<', '>" + mtable[i - 1] + "<')");
}
if (mode == 'option') optionMorse = yf.body.innerHTML;
submode = 'Morse Code';
}
}

function togglea(mis) {
if (mis == "Bigger") {
document.getElementById("a1").style.display='block';
document.getElementById("a2").style.display='block';
} else {
document.getElementById("a1").style.display='none';
document.getElementById("a2").style.display='none';
}
}

function connect_to_iframe() {
xf = document.getElementById("myiframe");
yf = (xf.contentWindow || xf.contentDocument);
if (yf.document) { yf = yf.document; }
}

</script>
</head>
<body style='background-color:lightgreen;' onload=' yf=top.document; connect_to_iframe(); togglesub(); togglesub(); optionMorse = yf.body.innerHTML; '>
<h1 align='center'>Changing the Iframe's Look Below ... <select id='mode' onchange='togglea(this.value);' title='Mode'><option value="Bigger">Bigger</option><option value="Big">Big</option></select> Time</h1>
<div align="center">

<a href='#' onclick='toggle();' id='a1' style='display:block;' title='Parent webpage controls child iframe document.body.innerHTML look'>Toggle Iframe dropdown OPTION and INPUT button</a><br>
<a href='#' onclick='togglesub();' id='a2' style='display:block;' title='Parent webpage controls child iframe document.body.innerHTML look'>Toggle Iframe Morse Code for Characters</a><br><br>
<iframe id='myiframe' style='width:100%; height:800px;' frameborder=0 src='change_everything.html' title='Changing the Look Big Time'></iframe>

</div>
</body>
</html>