create motioncontrols

function createmotioncontrols(namespace) {
var controlpanel = document.createElement("div")
window.document.body.appendChild(controlpanel)
var id = document.createAttribute("id")
controlpanel.setAttributeNode(id)
id.value  = namespace + "motioncontrolpanel"
var style = document.createAttribute("style")
controlpanel.setAttributeNode(style)
style.value = "position:fixed;left:" + (window.innerWidth * .05) + "px"
var height = window.innerHeight * .5
style.value = style.value + ";top:" + (window.innerHeight * .3) + "px"
var width = height / 11
style.value = style.value + ";width:" + width + "px"
style.value = style.value + ";height:" + height + "px"
style.value = style.value + ";font-size:" + height + "px"
createreadout("whattomove",1,controlpanel,"",namespace,width,"selectwhattomove")
function createreadout(thisid,position,controlpanel,value,namespace,width,action) {
var frame = document.createElement("div")
controlpanel.appendChild(frame)
var style = document.createAttribute("style")
frame.setAttributeNode(style)
style.value = "position:absolute;left:0px;bottom:" + ((position - 1) * width) + "px"
style.value = style.value + ";width:" + width + "px"
style.value = style.value + ";height:" + width + "px"
style.value = style.value + ";font-size:" + width + "px"
if (action === "") {
var readout = document.createElement("div")}
else {
var readout = document.createElement("a")
var href = document.createAttribute("href")
readout.setAttributeNode(href)
href.value = "javascript:" + namespace + "(" + action + ")"}
frame.appendChild(readout)
var id = document.createAttribute("id")
readout.setAttributeNode(id)
id.value = namespace + thisid
var style = document.createAttribute("style")
readout.setAttributeNode(style)
style.value = "postion:absolute;left:0%;bottom:0%;width:90%;height:90%"
style.value = style.value + ";font-size:90%;color:greenyellow"
readout.appendChild(document.createTextNode(value))}
// createreadout(thisid,position,controlpanel,value,namespace,width,action)
createreadout("motion",2,controlpanel,0,namespace,width,"")
var buttons = "-,minus;+,plus;d,down;u,up;r,right;l,left".split(";")
for (var i = 0; i < buttons.length; i = i + 1) {
var label = buttons[i].split(",")[0]
var action =  namespace + '("' + buttons[i].split(",")[1] + '")'
createbutton(label,action,i,controlpanel,width)}
function createbutton(label,thisaction,position,controlpanel,width) {
var buttonframe = document.createElement("div")
controlpanel.appendChild(buttonframe)
var style = document.createAttribute("style")
buttonframe.setAttributeNode(style)
style.value = "position:absolute;left:0px;bottom:" + ((position + 2) * width) + "px"
style.value = style.value + ";width:" + width + "px"
style.value = style.value + ";height:" + width + "px"
style.value = style.value + ";font-size:" + width + "px"
var button = document.createElement("div")
buttonframe.appendChild(button)
var style = document.createAttribute("style")
button.setAttributeNode(style)
style.value = "postion:absolute;left:0%;bottom:0%;width:90%;height:90%"
style.value = style.value + ";font-size:90%;color:pink;background-color:lightgrey"
var action = document.createAttribute("onmouseover")
button.setAttributeNode(action)
action.value = namespace + '("' + thisaction + '")'
var stop = document.createAttribute("onmouseout")
button.setAttributeNode(stop)
stop.value = namespace + '("stop")'
button.appendChild(document.createTextNode(label)}
// createbutton(label,thisaction,position,controlpanel,width)
createbutton("s","slower",8,controlpanel,width)
// createreadout(thisid,position,controlpanel,value,namespace,width,action)

createreadout("speed",9,controlpanel,1,namespace,width,"")

createbutton("s","slower",10,controlpanel,width)}