<a href="javascript:atnbgstart20160727()" style="color: greenyellow; font-size: 5em;">start</a>
<br />
<div id="atnbgframe20160727">
</div>
<div id="atnbgleftbottomcontrolpanel20160727">
</div>
<script>
function atnbgstart20160727() {
//window.addEventListener("onresize",reset())
//var frame = document.getElementById("atnbgframe20160727")
var lbcp = document.getElementById("atnbgleftbottomcontrolpanel20160727")
styleleftbottomcontrolpanel(lbcp,10)
createleftbottomreadout(lbcp,"100%","atnbgwhattomovereadout20160727","greenyellow","atnbgframe20160727")
function styleleftbottomcontrolpanel(lbcp,controlcount) {
var styles = document.createAttribute("style")
lbcp.setAttributeNode(styles)
var height = window.innerHeight / controlcount
var v = "position:fixed;left:0px;bottom:0px"
v = v + ";width:" + height + "px"
v = v + ";height:" + height + "px"
v = v + ";font-size:" + height + "px"
v = v + ";background-color:pink"
styles.value = v}
function createleftbottomreadout(panel,bottom,id,color,value) {
var readout = createreadout(panel)
stylereadout(readout,bottom,color)
idreadout(readout,id)
initializereadout(readout,value)
function createreadout(panel) {
var readout = document.createElement("div")
panel.appendChild(readout)
return readout}
function stylereadout(readout,bottom,color) {
var styles = document.createAttribute("style")
readout.setAttributeNode(styles)
var v = "position:absolute;left:0%"
v = v + ";bottom:" + bottom
v = v + ";height:90%;font-size:90%"
v = v + ";color:" + color
styles.value = v}
function idreadout(readout,id) {
var id = document.createAttribute("id")
readout.setAttributeNode(id)
id.value = id}
function initializereadout(readout,value) {
var v = document.createTextNode(value)
readout.appendChild(v)}
} //createleftbottomreadout
} //start
</script>
