[% PROCESS _header.tt
        js           => [ "thruk/plugins/statusmap/jit-yc.js", "thruk/plugins/statusmap/statusmap.js" ]
        css          => "thruk/plugins/statusmap/Treemap.css",
        extra_header => "<!--[if IE]><script language='javascript' type='text/javascript' src='" _ url_prefix _ "thruk/plugins/statusmap/excanvas.js'></script><![endif]-->"
%]

<form method="get" action="statusmap.cgi">
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="top_pane"[% IF hidetop == 1 %]style="visibility:hidden; display:none;"[% END %]>
  <tr>
    <td align="left" valign="top" width="33%">
      [% PROCESS _infobox.tt %]
    </td>
    <td align="center" valign="top" width="33%">
      <div align="center" class='dataTitle'>Statusmap For All Hosts</div><br>
    </td>
    <td align="right" valign="top" width="33%">
      <table border="0" cellspacing=2 cellpadding=2 class='optBox'>
        <tr>
          <td align="left" class='optBoxItem'>Map Layout:</td>
          <td align="left" class='optBoxItem'>Detail Level:</td>
          <td align="left" class='optBoxItem'>Group By:</td>
        </tr>
        <tr>
          <td align="left" class='optBoxItem'>
            <select name='type'>
              <option value="table"[% IF type == 'table' %] selected[% END %]>Table Layout</option>
              <option value="circle"[% IF type == 'circle' %] selected[% END %]>Circular Layout</option>
              <!--
              <option value="hyper"[% IF type == 'hyper' %] selected[% END %]>Hyper Layout</option>
              -->
            </select>
          </td>
          <td align="left" class='optBoxItem'>
            <select name='detail'>
              <option value="0"[% IF detail == '0' %] selected[% END %]>0</option>
              <option value="1"[% IF detail == '1' %] selected[% END %]>+1</option>
              <option value="2"[% IF detail == '2' %] selected[% END %]>+2</option>
              <option value="3"[% IF detail == '3' %] selected[% END %]>+3</option>
            </select>
          </td>
          <td align="left" class='optBoxItem'>
            <select name='groupby'>
              <option value="parent"[% IF groupby == 'parent' %] selected[% END %]>Parent</option>
              <option value="address"[% IF groupby == 'address' %] selected[% END %]>IP Address</option>
              <option value="domain"[% IF groupby == 'domain' %] selected[% END %]>Domain</option>
              <option value="hostgroup"[% IF groupby == 'hostgroup' %] selected[% END %]>Hostgroup</option>
              <option value="servicegroup"[% IF groupby == 'servicegroup' %] selected[% END %]>Servicegroup</option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan=2 align="left" valign="bottom" class='optBoxItem'>
          </td>
          <td align="right" class='optBoxItem'>
            <input type='hidden' name='hidetop' id='hidetop' value='[% hidetop %]'>
            <input type='submit' value='Update'>
          </td>
        </tr>
      </table>
      [% PROCESS _help.tt topic = "statusmap" %]
    </td>
  </tr>
</table>
</form>
<br>
[% IF type == 'table' %]
<div class="hint">left mouseclick = zoom in, right mouse click = zoom out</div>
[% END %]
<div id="infovis"></div>
<div id="tooltip" class="tip" style="position: absolute; z-index: 13000; display: none;"></div>

<script type="text/javascript">
<!--

var nodename = '[% nodename %]';
var json     = '[% json %]';
var groupby  = '[% groupby %]';
var detail   = [% detail %];

function init(){
    //init data
    var infovis = document.getElementById('infovis');
    var w = infovis.offsetWidth - 20, h = infovis.offsetHeight - infovis.offsetTop - 20;
    infovis.style.width = w + 'px';
    infovis.style.height = h + 'px';

    var id_to_show = '[% host %]';

[% IF type == 'table' %]

    //init treemap
    show_tree_map(id_to_show);

[% ELSIF type == 'circle' %]

    // init circle map
    show_circle_map(id_to_show, w, h);

[% ELSIF type == 'hyper' %]

    // init hyper tree
    show_hypertree_map(id_to_show, w, h);

[% END %]

}

// show graph
init();
-->
</script>

[% PROCESS _footer.tt %]
