<html xmlns="http://www.w3.org/1999/xhtml">
<title>Configure SVG Moon-Lander</title>
<style>
form {
  position: relative;
  z-index: 10;
}
</style>
<body>
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
   style="width:100%; height:100%; position:absolute; top:0; left:0;">
   <defs>
    <radialGradient
       id="radGrad"
       gradientUnits="userSpaceOnUse"
       cx="0"
       cy="0"
       fx="0"
       fy="0"
       r="150">
      <stop
         style="stop-color:#0CE;stop-opacity:1;"
         offset="0" />
      <stop
         style="stop-color:#038;stop-opacity:1;"
         offset="1" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="url(#radGrad)"/>
</svg>
<form>
Background Image: <br/>
<input type="file" name="backgroundImg" />
<p/>
Background Opacity: <br/>
<input type="text" name="backgroundOpacity" />
<p align="center">
<input type="button" value="Update" onclick="update()" />
</p>
</form>
<script type="text/javascript">
  var form = document.getElementsByTagName("form")[0];
  var background = window.opener.document.getElementById("background");
  document.getElementById("backgroundOrig").innerHTML = background.href.baseVal;
  form.backgroundOpacity.value = background.style.opacity;
  
  function update(){
    if ( form.backgroundImg.value != "" ) {
      background.href.baseVal  = form.backgroundImg.value;
    }
    background.style.opacity = form.backgroundOpacity.value;
    window.close();
  }
</script>
</body>
</html>
