<?php
#
# This file is (C) CFEngine AS. All rights reserved
#
?>

<div>

    <div class="left-column">
            <!-- example menu --><div id="astrolabe" class="astrolabe"><div class="menu"><div class="profilesCombo"><dl class="combobox"><button class="btn" style="width:100%;text-align:left"><span class="selectedLabel">(All hosts)</span>&nbsp;&nbsp;<i class="icon-caret-down" style="float:right;margin-left: 0;margin-top: 4px;font-size:16px"></i></button><dd class=""><ul class="dropdown-menu"><li itemid="OS"><span class="itemLabel">OS</span><i class="icon-remove icon-white deleteIcon"></i></li><li><span class="itemLabel">(All hosts)</span></li><li class="divider"></li><li class="addItem"><input class="addInput" placeholder="Add Tree" maxlength="256"><span class="addButton"></span></li></ul></dd></dl></div></div><div id="scrollable_list"><div class="containerWrapper"><div class="listContainer"><ul class="rootContainer"><li class="node expanded selectedElement" label="All hosts" class-regex=".*" count="1"><div rel="tooltip" data-placement="left" class="nodeWrapper" data-original-title=".*"><span class="nodeIcon icon-caret-right icon-caret-down"></span><div class="nodeHeader"><span class="nodeLabel">All hosts</span><span class="hostCountLabel">(1)</span><i class="addNodeButton bi bi-plus-lg"></i></div></div><span class="busyIcon" style="display: none; ">&nbsp;</span><ul class="sub-container" style=""><li class="host" hostkey="SHA=91e24c7a49008176341c47a682eda21ef7356216b85ce65deea1623c967dab08" hostname="192.168.2.2"><span class="hostIcon blue"></span><span class="hostLabel">192.168.2.2</span></li></ul></li></ul></div></div></div></div>
    </div>
    <div class="right-column-tabs">
        <div class="pageTitleWithTabs">
            <div class="contentWrapper">
                <h1><span>Page Title</span></h1>
            </div>
        </div>

        <div id="tabs-layout">
        <div class="contentWrapper">
            <ul>
                <li class="first"><a href="#tab-1">Tab 1</a></li>
                <li><a href="#tab-2">Tab 2</a></li>
                <li><a href="#tab-3">Tab 3</a></li>
                <li><a href="#tab-4">Tab 4</a></li>
            </ul>

            <div id="tab-1">
              test 1
            </div>

            <div id="tab-2">
                test 2
            </div>

            <div id="tab-3">
            </div>

            <div id="tab-4">
            </div>
        </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    // your local javascript

    var $tabs=$("#tabs-layout");

        $tabs.tabs({ show: function(event, ui) {
                TAB_INDEX = ui.index;


                $('#vitalsContainer').vitalSigns('setActiveMode',false);

                if (ui.index === 0) {
                    // we are in status tab
                    $('#hostsComplianceTimeseries').hostsComplianceTimeseries('setActive',true);
                    $('#hostsConnectivity').hostsConnectivity('setActive', true);
                    $('#hostsCompliance').hostsCompliance('setActive', true);
                    if (CONTEXT_CHANGED) {
                        $('#hostsComplianceTimeseries').hostsComplianceTimeseries('refresh');
                        $('#hostsConnectivity').hostsConnectivity('refresh');
                        $('#hostsCompliance').hostsCompliance('refresh');
                        CONTEXT_CHANGED = false;
                    }
                } else {
                    $('#hostsComplianceTimeseries').hostsComplianceTimeseries('setActive',false);
                    $('#hostsConnectivity').hostsConnectivity('setActive', false);
                    $('#hostsCompliance').hostsCompliance('setActive', false);
                }


                if (ui.index === 3) {
                    // we are in vitals tab
                    $('#vitalsContainer').vitalSigns('setActiveMode',true);
                    if (CONTEXT_CHANGED === true) {
                        $('#vitalsContainer').vitalSigns('refresh');
                        CONTEXT_CHANGED = false;
                    }
                } else {
                    $('#vitalsContainer').vitalSigns('setActiveMode',false);
                }
                if (ui.index === 1) {
                    /**
                     * load saved searches
                     */
                    $('#saved-searches-div').load('savedsearch/listSavedSearches');

                }
            }
        });

</script>
