<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head profile="http://www.w3.org/2006/03/hcard http://dublincore.org/documents/2008/08/04/dc-html/">
  <meta http-equiv="Content-Type" content="text/html; charset=utf8" />

  <title>$title</title>

    <script src="$resource_dir/mktree.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	    crossorigin="anonymous"></script>            
    <script src="$resource_dir/jquery.inlineStyler.min.js"></script>
    <link rel="stylesheet" href="$resource_dir/mktree.css" type="text/css">

    <style>
      xml-block { margin-left:1em; display:block; font-family:monospace; }
      .left { color:red; background-color:MistyRose; font-family:monospace; }
      .right { color:green; background-color:Lavender; font-family:monospace; }
      .error { color:yellow; background-color:black; font-family:monospace; }
      .artwork { font-family: monospace; }
      ul {padding-left: 6px; }
      li { list-style: none; padding-left: 6px; }
      
      #leftColumn { overflow: scroll; height: calc(100vh - 32px); font-family:monospace; }
      #centerColumn { overflow:scroll; height: calc(100vh - 55px); font-family:monospace; }
      #rightColumn { overflow: scroll;height:  calc(100vh - 32px); font-family:monospace; }

      .tab { overflow:hidden; border; 1px solid #ccc; background-color: #f1f1f1; }
      .tab button { background-color: inherit; float:left; border:none; outline:none; cursoer: pointer; padding: 14px 16px; }
      .tab button:hover { background-color: #ddd; }
      .tab button.active { background-color: #ccc; }
      .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; }
      }

    </style>

  <script src="https://www.w3schools.com/lib/w3.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

    <script src="$resource_dir/colresize.js"></script>

    <script type="text/javascript">
function openLeftFile(evt, fileName) {
    // Declare variables
    var i, tabcontent, tablinks;
    //  Get all elements w/ class='tabcontent' and hide them
    tabcontent = document.getElementById("leftColumn").getElementsByClassName("tabcontent");
    for (i=0; i<tabcontent.length; i++) {
        tabcontent[i].style.display="none";
    }
    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementById("leftColumn").getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(fileName).style.display = "block";
    evt.currentTarget.className += " active";
}

function openRightFile(evt, fileName) {
    // Declare variables
    var i, tabcontent, tablinks;
    //  Get all elements w/ class='tabcontent' and hide them
    tabcontent = document.getElementById("rightColumn").getElementsByClassName("tabcontent");
    for (i=0; i<tabcontent.length; i++) {
        tabcontent[i].style.display="none";
    }
    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementById("rightColumn").getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(fileName).style.display = "block";
    evt.currentTarget.className += " active";
}
                    
function sync2here(leftFile, leftLine, rightFile, rightLine)
{
    if (leftFile != -1) {
        leftDiv = document.getElementById("leftColumn")
    }
}

function OnScrollCenter()
{
    el2 = XXX()
                    
    if (el2.context.hasAttribute('whereLeft')) {
        document.getElementById(el2.context.getAttribute('whereLeft')).scrollIntoView()
    }                
    if (el2.context.hasAttribute('whereRight')) {
        document.getElementById(el2.context.getAttribute('whereRight')).scrollIntoView()
    }                
    console.log("---> " + el2.context.getAttribute('whereLeft') + " -- " + el2.context.getAttribute('whereRight'));
}

function XXX()
{
    var xxx = document.getElementById("centerColumn");
    var scroll = xxx.scrollTop;
    var elements = xxx.getElementsByTagName("li");
    var el;
    for (var i=0; i<elements.length; i++) {
        el = $$(elements[i]);
        if (el.offset().top > 0 && el.is(':visible')) {
            return el;
        }
    }
    return null;
}
</script>
</head>

<body>
  <div id="root">
    <table width=100% id="topTable">
      <tr>
	<td width=25%>
	  <div id="leftColumn">
	    <div class="tab">
	      <button id='defaultOpen' class="tablinks" onclick="openLeftFile(event, 'File1')">File1</button>
	    </div>
	    <!-- Tab Content -->
	    <div id="File1" class="tabcontent">
	      $leftFile
	    </div>
	  </div>
	</td>
	<td width=50%>
	  <div class="topnav">
	    <button type="button" onclick="expandTree('diffRoot')">Expand All</button>
	    <button type="button" onclick="collapseTree('diffRoot')">Collapse All</button>
	    <button type="button" onclick="expandDiffs('diffRoot')">Expand Diffs</button>
	  </div>
	  <div id="centerColumn" onscroll="OnScrollCenter()">
	    $body
	  </div>
	</td>
	<td width=25%>
	  <div id="rightColumn">
	    <div class="tab">
	      <button id='defaultOpenR' class="tablinks" onclick="openRightFile(event, 'R_File1')">File1</button>
	    </div>
	    <!-- Tab Content -->
	    <div id="R_File1" class="tabcontent">
	      $rightFile
	    </div>
          </div>
	</td>
      </tr>
    </table>

    <script>
      convertTrees()
      expandTree("diffRoot")
      
      $$(function() {
        $$("#topTable").colResizable();
      });

      // Get the element with id="defaultOpen" and click on it
      document.getElementById("defaultOpen").click();
      document.getElementById("defaultOpenR").click();

      $$(window).load(function() {
      var cssRules = {
        'propertyGroups' : {
          'inline' : ['color']
        },
        'elementGroups' : {
          'inline' : ['SPAN']
        }
      }
      $$('#centerColumn').inlineStyler(cssRules);
      });

    </script>

</body>
</html>
