<!DOCTYPE html>
<html>
<head>
	<title>{% block title %}Device {{ device }}{% endblock %}</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='codebase/dhtmlx.css') }}"/>
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='base.css') }}"/>
   <script type=text/javascript src="{{ url_for('static', filename='jquery-2.2.1.js') }}"></script>
	<script src="{{ url_for('static', filename='codebase/dhtmlx.js') }}"></script>
   <script src="{{ url_for('static', filename='check_err.js') }}"></script>
	<script>
      var propsTree
      function createPropertyTree(branch, id) {
         
         function getPropertyItemsOnLevel(branch, id) {
            var pathToProperties = "{{ url_for('process_json_command', command = 'get_property_list') }}"
            var completePath = pathToProperties + '?branch=' + branch
            
            $.getJSON(completePath, 
                      function(json) {
                           checkError(json)
                           parsePropertyItems(json, branch, id)
                         });
         }
         
         function parsePropertyItems(json, branch, id) {
            
            checkError(json)
            json = json.properties
            
            function loadPropertyInfo(branch) {
               
               var pathToProperties = "{{ url_for('get_property_list') }}"
               var completePath = pathToProperties + '?branch=' + branch
               
               $("#prop_info_place").load(completePath)
            }
            
            
            function setPropertyField(id, name, branch) {
               
               var func = function(){loadPropertyInfo(branch)}
               propsTree.insertNewItem(id, branch,
                                       name, 
                                       func);
               propsTree.closeAllItems()
            }
            
            for(var i = 0; i < json.length; i++) {
               
               setPropertyField(id, json[i].name, json[i].path)
               if(json[i].flags.indexOf("childs") != -1)
                  getPropertyItemsOnLevel(json[i].path, json[i].path)
            }  
         }
         
         getPropertyItemsOnLevel(branch, id)
      }
      
      var regTree
      function createRegistersList() {
         function parseJsonRegisterList(json) {
            checkError(json)
            json = json.registers
            
            function loadRegistersList(bank) {
               var pathToGetRegisterList = "{{ url_for('get_registers_list') }}"
               var completePath = pathToGetRegisterList + '?bank=' + bank

               $("#reg_info_place").load(completePath)
            }

            function loadRegisterInfo(bank, name) {
               var pathToGetRegister = "{{ url_for('get_register_info') }}"
               var completePath = pathToGetRegister + '?bank=' + bank +
                              '&name=' + name

               $("#reg_info_place").load(completePath)
            }

            function setRegisterField(id, bank, name) {
               
               var itemId = bank + "_" + name
               var func = function(){loadRegisterInfo(bank, name)}
               
               regTree.insertNewItem(id, itemId, name, func)
               regTree.closeAllItems()
            }
            
            function setbankField(bank) {
               
               var func = function(){loadRegistersList(bank)}
               regTree.insertNewItem(0, bank, bank, func);
               regTree.closeAllItems()
            }
            
            checkError(json)
            if(json.lenght <= 0)
               return
            
            //sort registers by bank
            function compareRegistersByBank(a,b) {
               if (a.bank < b.bank)
                  return -1;
               else if (a.bank > b.bank)
                  return 1;
               else 
                  return 0;
            }
            json.sort(compareRegistersByBank)
            
            
            //create bank dirs
            var curBankName = json[0].bank
            var created = 0
            for(var i = 0; i < json.length; i++) {
               
               //create new bank tab if it has not created already
               if(json[i].bank != curBankName) {
                  curBankName = json[i].bank
                  created = 0
               }
               
               if(!created) {
                  setbankField(json[i].bank )
                  created = 1
               }
               
               
               //insert register info to bank
               
               setRegisterField(json[i].bank, json[i].bank, json[i].name)
            }
         }
         
         //get registers json list
         var getRegistersListPath = "{{ url_for('process_json_command', command = 'get_registers_list') }}" 
         $.getJSON(getRegistersListPath, parseJsonRegisterList);
      }
      
		function doOnLoad()
      {
			propsTree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
			propsTree.setImagePath("{{ url_for('static', filename='codebase/imgs/dhxtree_skyblue/') }}");
         //generating properties list
         createPropertyTree('', 0)
         
			regTree = new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0,0,0,0,'SELECT')
			regTree.setImagePath("{{ url_for('static', filename='codebase/imgs/dhxtree_skyblue/') }}");
         createRegistersList()
		}
	</script>
</head>
<body onload="doOnLoad()">
	{% block info %}
      <div class="block1" >
         <h2>Device {{ device }} model={{ model }} control page </h2>
      </div>
   {% endblock %}
   
   <div class="tabs">
      <input type="radio" name="current" checked="checked" id="props_id"/>
      <label for="props_id">Properties</label>
      <input type="radio" name="current" id="labels_id"/>
      <label for="labels_id">Registers</label>
      <div>
         <table>
            <tr>
               <td valign="top">
                  <div id="treeboxbox_tree" class = "tree"></div>
               </td>
               <td valign="top" id="prop_info_place" />
            </tr>
         </table>         
      </div>
      <div>
         <table>
            <tr>
               <td valign="top">
                  <div id="treeboxbox_tree2" class="tree"></div>
               </td>
               <td valign="top" id="reg_info_place" />
            </tr>
         </table>
      </div>
   </div>
   {% block content %}
   {% endblock %}
    <div class="block1" >
      <a href="{{ url_for('process_json_command', command='help') }}">Json API usage</a>
    </div>
</body>
</html>