<html>
  <head>
    <title>Ganglia Custom Dashboard</title>
    <script language="javascript" src="js/jquery-1.8.2.min.js"></script>
    <!--
    <script language="javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.14.custom.min.css" />
    -->
    <link type="text/css" href="css/dash.css" rel="Stylesheet" />
    <script language="javascript">
      $(document).ready(function() {
        $.get('../api/views.php?action=list', function(data) {
          if (data.status == 'ok') {
            var toInsert = '';
            $.each(data.message, function(k, d) {
              toInsert += '<span class="viewlink" onClick="loadView(\'' + encodeURIComponent(d) + '\')">' + d + '</span>';
            });
            $('#views').html(toInsert);
          } else {
            alert('Error retrieving view list: ' + data.message);
          }
        });
      });
      function loadView(view) {
        // Show loader while loading view.
        $('#viewport').html('');
        $('#ajaxloader').clone().appendTo('#viewport');

        // Actual loading routine
        $.get('../views.php?r=hour&cs=&ce=&m=&tab=v&vn=' + encodeURIComponent(view) + '&standalone=1&just_graphs=1&base=..', function(data) {
          $('#viewport').html(data);
        });
        /*
        $.get('../api/views.php?action=get&view_name=' + encodeURIComponent(view), function(data) {
          if (data.status == 'ok') {
            alert(data.message);
          }
        });
        */
      }
    </script>
    <style type="text/css">
    </style>
  </head>
  <body>
    <div id="console">
      <div id="viewlist">
        <div id="views"></div>
      </div>
      <div id="viewport"></div>
    </div>
    <div id="ajaxloader" class="loader">
      <img src="img/ajax-loader.gif" alt="[Loading ...]" border="0" />
    </div>
  </body>
</html>
