<!doctype html>
<html>
<head>
    <style>

/* Modal begin */
.transcribe_modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.transcribe_modal_content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close_transcribe_modal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close_transcribe_modal:hover,
.close_transcribe_modal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Modal end */



#class_editor {
    display:none;
}

#class_selector {
    /*width: 600px;*/
   width:100%; /* or whatever width you want. */
   height:30px; /* or whatever width you want. */
   max-width:100%; /* or whatever width you want. */
   display: inline-block;
   float: top;
}

#navigation{
    left:0px;
    top:0px;
    width:100%;
    height: 10%;
    overflow: scroll;
    position:absolute;
}

#class_selector{
    left:0px;
    top:10%;
    width:100%;
    height: 5%;
    overflow: hide;
    position:absolute;
}

#command_buttons{
    left:0px;
    top:15%;
    width:100%;
    height: 5%;
    overflow: hide;
    position:absolute;
}
/*
#active {
   width:15%; /* or whatever width you want. */
   height:80%; /* or whatever width you want. */
   max-width:15%; /* or whatever width you want. */
   display: inline-block;
   float: left;
   position:absolute;
   left:80%;
   top:20%;
   width:20%;
}*/

/*
#canvaces{
    left:0px;
    top:20%;
    width:80%;
    height: 80%;
    overflow: scroll;
    position:absolute;
}
*/


#canvaces{
    left:0px;
    top:0px;
    display:block;
    width:80%;
    height:100%;
    overflow: scroll;
    position:absolute;
}

#active {
   top: 20%;
   height: 80%;
   display: block;
   position:absolute;
   overflow: scroll;
   left:80%;
   width:20%;
}

#transcriptions{
    left:0px;
    top:20%;
    width:80%;
    height: 80%;
    overflow: scroll;
    position:absolute;
}
#wysiwyg{
    left:0px;
    top:20%;
    width:80%;
    height: 80%;
    overflow: scroll;
    position:absolute;
}


</style>
<meta charset="UTF-8" />
<title>(F)ast (R)ectangle (A)nnotation (T)ool</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/frat_gui.js"></script>
    <script>
        var classesUI = null;

        var http_config={};
        var request = new XMLHttpRequest();
        request.open('GET', '/frat_config.json', false);  // `false` makes the request synchronous
        request.send(null);
        http_config = JSON.parse(request.responseText);


        function page_load(){
            classesUI = new ClassIdEditor(http_config["class_colors"], "class_editor", "class_selector");
            classesUI.write_gui(http_config["class_colors"]);
            canvaces = new Canvaces("{{id}}",classesUI,"transcriptions","wysiwyg","config_editor","navigation","canvaces","command_buttons", "active","{{img_url}}", http_config);
        }
    </script>

</head>
<body onload="page_load()">

    <div id="class_editor">
    Class Editor
    </div>
    <div id="config_editor">
    </div>

    <div id="navigation">
    </div>


<div id="class_selector">
    Class selector
</div>

    <table><tr>
        <td>
            <div id="wysiwyg">
                <div id="canvaces" >
                    Canvaces
                </div>
            </div>
            <div id="transcriptions">
                TRANSCRIPTIONS
            </div>
        </td>
        <td>
            <div id="active">
                Selected Object
            </div>
        </td>
    </tr></table>
</div>
<div id="command_buttons">
    commands
</div>


</body>
</html>