<!-- Copyright 2008 Orbitz WorldWide

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at:

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
{% load static %}

<html>
  <head>
    <title>Graphite Composer</title>
    <link rel="stylesheet" type="text/css" href="{% static "js/ext/resources/css/ext-all.css" %}"/>
  </head>
  <body onload="init();" data-static-root="{% get_static_prefix %}" data-base-url="{% url "browser" %}"{% if queryString %} data-query-string="{{ queryString }}"{% endif %}{% if showTarget %} data-show-target="{{ showTarget }}"{% endif %}>

    {% if jsdebug %}
      <script type="text/javascript" src="{% static "js/ext/adapter/ext/ext-base-debug.js" %}"></script>
      <script type="text/javascript" src="{% static "js/ext/ext-all-debug.js" %}"></script>
    {% else %}
      <script type="text/javascript" src="{% static "js/ext/adapter/ext/ext-base.js" %}"></script>
      <script type="text/javascript" src="{% static "js/ext/ext-all.js" %}"></script>
    {% endif %}

    <script type="text/javascript">
      /* A global cache of current metadata about metrics the user selects */
      var TargetRecord = new Ext.data.Record.create(['value']);

      var TargetStore = new Ext.data.ArrayStore({
        fields: TargetRecord.fields
      });

      function getTargetRecord(target) {
        var index = indexOfTarget(target);
        return (index == -1) ? null : TargetStore.getAt(index);
      }

      function addTarget(target) {
        TargetStore.add([ new TargetRecord({value: target}) ]);
      }

      function removeTarget(target) {
        var record = getTargetRecord(target);

        if (record) {
          TargetStore.remove(record);
        }
      }

      function indexOfTarget(target) {
        return TargetStore.findExact('value', target);
      }

      function insertTarget(index, target) {
        TargetStore.insert(index, [ new TargetRecord({value: target}) ]);
      }

      function replaceTarget(oldTarget, newTarget) {
        var oldRecord = getTargetRecord(oldTarget);
        var newRecord = getTargetRecord(newRecord);

        if (oldRecord && (!newRecord)) {
          oldRecord.set('value', newTarget);
          TargetStore.commitChanges();
        }
      }
    </script>

    <script type="text/javascript" src="{% static "js/browser.js" %}"></script>
    <script type="text/javascript" src="{% static "js/composer_widgets.js" %}"></script>
    <script type="text/javascript" src="{% static "js/composer.js" %}"></script>
    <script type="text/javascript" src="{% static "js/completer.js" %}"></script>

    <style type="text/css">
    /* Hack to fix this bug http://extjs.net/forum/showthread.php?s=a570aba1bf2fc67a2287684c5d91c662&t=74230 */
    .x-list-body {
      height: 100%;
      position: absolute;
    }

    /* More readable style for search results */
    #searchResults a {
      font-size: 8pt;
      font-family: monospace;
    }
    </style>

    <script type="text/javascript">
      Ext.BLANK_IMAGE_URL = '{% static "js/ext/resources/images/default/s.gif" %}';

      var Browser;
      var Composer;
      var GraphiteConfig = {
        showMyGraphs: {{showMyGraphs}},
        searchEnabled: {{searchEnabled}},
        refreshInterval: {{refreshInterval}},
      };

      function init() {
        Browser = new GraphiteBrowser();
        Composer = new GraphiteComposer();

        new Ext.Viewport({
          layout: 'border',
          items: [
            Browser.panel,
            { //Panel that holds the composer window
              region: 'center',
              items: [Composer.window]
            }
          ]
        });

        Composer.window.show();

        /* Direct graph loading */
        if (document.body.dataset.queryString) {
          Composer.loadURL("?" + document.body.dataset.queryString);
        }
        /* Automatic tree expansion */
        if (document.body.dataset.showTarget) {
          var parts = document.body.dataset.showTarget.split('.');

          if (parts[0] == "Graphite") {
            parts.shift();
          }

          recursiveExpand.expand(Browser.trees.graphite, parts);

        }
        /* Enable forward / backward functionality */
        Composer.enableHistory(window.top);
      } // init

</script>

  </head>
  <body onload="init();">
  </body>
</html>
