--- rat/lonratedt.pm	2014/05/20 14:36:39	1.111
+++ rat/lonratedt.pm	2016/01/15 19:13:04	1.112
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # Edit Handler for RAT Maps
 #
-# $Id: lonratedt.pm,v 1.111 2014/05/20 14:36:39 raeburn Exp $
+# $Id: lonratedt.pm,v 1.112 2016/01/15 19:13:04 damieng Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -43,28 +43,89 @@ use HTML::Entities();
 # --------------------------------------------------------- Build up RAT screen
 sub ratedt {
   my ($r,$url)=@_;
-  my %layout = ('border' => "0",
-                'rows'   => "1,250,*");
-  my $js ='
-<script type="text/javascript">
-    var flag=0;
-</script>';
-
-  my $start_page = 
-      &Apache::loncommon::start_page('Edit Sequence',$js,
-				     {'frameset'    => 1,
-				      'add_entries' => \%layout});
-
-  my $end_page = 
-      &Apache::loncommon::end_page({'frameset' => 1});
-
   $r->print(<<ENDDOCUMENT);
-$start_page
-<frame name="server" src="$url/loadonly/ratserver" noresize="noresize"
-       noscroll="noscroll" />
-<frame name="code" src="$url/loadonly/adveditmenu" />
-<frame name="mapout" src="/adm/rat/map.html" />
-$end_page
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Edit Sequence</title>
+    
+    <style>
+html, body {
+  margin: 0;
+  padding: 0;
+}
+#server {
+  display: none;
+}
+#top {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 20%;
+  border: 0;
+}
+#bottom {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 80%;
+  border: 0;
+}
+#code, #mapout {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+#infout {
+  position: absolute;
+  z-index: 1;
+  right: 16px;
+  bottom: 0;
+  width: 420px;
+  min-width: 200px;
+  height: 300px;
+  border: 1px solid black;
+  overflow: auto;
+}
+    </style>
+  </head>
+  
+  <body>
+    <iframe id="server" name="server" src="$url/loadonly/ratserver"></iframe>
+    <div id="top"><iframe id="code" name="code" src="$url/loadonly/adveditmenu"></iframe></div>
+    <div id="bottom"><iframe id="mapout" name="mapout" src="/adm/rat/map.html"></iframe></div>
+    <iframe id="infout"></iframe>
+    <script>
+var flag=0;
+
+var resize = function(e) {
+    // auto-resize top iframe
+    var code = document.getElementById('code');
+    var codedoc = (code.contentDocument) ? code.contentDocument : code.contentWindow.document;
+    var top = document.getElementById('top');
+    top.style.height = ''; // reset height in case it needs to be reduced
+    codedoc.body.style.overflow = 'hidden'; // to hide scrollbar
+    var topHeight = codedoc.body.scrollHeight;
+    top.style.height = topHeight + 'px';
+    // set remainder to the other iframe
+    var bottom = document.getElementById('bottom');
+    bottom.style.height = window.innerHeight - topHeight + 'px';
+    // fix right position of infout depending on scrollbar width
+    var mapout = document.getElementById('mapout');
+    var mapoutdoc = (mapout.contentDocument) ? mapout.contentDocument : mapout.contentWindow.document;
+    var infout = document.getElementById('infout');
+    infout.style.right = (mapout.offsetWidth - mapoutdoc.body.clientWidth) + 'px';
+}
+var iframe = document.getElementById('code');
+iframe.onload = resize;
+window.addEventListener('resize', resize, false);
+    </script>
+    
+  </body>
+</html>
 ENDDOCUMENT
 }
 
