{% extends "base_status.html" %}

{% block title %}Business Process{% endblock %}
{% block smallheader %}view{% endblock %}
{% block largeheader %}Business Process{% endblock %}

{% block nav1 %}{{ block.super }}{% endblock %}
{% block nav2 %}<a href="{% url bi.views.index %}">Business Process</a>{% endblock %}

{% load adagiostags %}

{% block header %}
    {{ block.super }}
    <link href="{% url media path="css/bi.css" %}" rel="stylesheet">
{% endblock %}

{% block content %}
    {% include "snippets/business_process_view_snippet.html" %}
{% endblock %}



{% block view_buttons %}{% endblock %}
{% block action_buttons %}{% endblock %}
{% block toolbar %}{% endblock %}



{% block footer %}
    {{ block.super }}
    <script src="{% url home %}rest/status.js"></script>
    <script>
        // When graphs link is clicked, simulate a click on 25hours tab as well
        $(document).ready(function() {
            $('#25hours').click();


            //
            function querystring(key) {
                var re=new RegExp('(?:\\?|&)'+key+'=(.*?)(?=&|$)','gi');
                var r=[], m;
                while ((m=re.exec(document.location.search)) != null) r.push(m[1]);
                return r;
            }
            var dom_id;
            var doms_to_hide = querystring('hide');
            var i;
            for (i in doms_to_hide) {
                dom_id = '#' + doms_to_hide[i];
                $(dom_id).hide();
            }

        });

        // Load graphs when you click a new timeperiod under graphs tab
        $('#graphs_ul').click(function(event){
            var anchor = event.target.href.split('#')[1];
            var title = event.target.text;
            my_element = document.getElementById(anchor);


            if (my_element.childElementCount == 0) {
                spinner = document.createElement( 'img');
                spinner.setAttribute("src", "{% url media path="select2/spinner.gif" %}");
                my_element.appendChild( spinner );
                var url = '{{ graphs_url }}';
                $.getJSON(url)
                        .done( function(data) {
                            $.each(data, function(i, item) {
                                        if (item['title'] == title) {
                                            graph_row = document.createElement( 'div');
                                            graph_row.setAttribute("class", "graph_row");

                                            div_notes = document.createElement('div');
                                            div_notes.setAttribute("class", "graph_notes");
                                            div_notes.textContent = item['notes'];
                                            graph_row.appendChild( div_notes );

                                            div_last_value = document.createElement('div');
                                            div_last_value.setAttribute("class", "graph_last_value");
                                            div_last_value.textContent = item['last_value'];
                                            div_notes.appendChild( div_last_value );

                                            new_img = document.createElement( 'img');
                                            new_img.setAttribute("title", item['notes']);
                                            new_img.setAttribute("class", 'graph_image');
                                            {% if static %}
                                            new_img.setAttribute("src", item['image_url']);
                                            {% else %}
                                            new_img.setAttribute("src", "{% url pnp.views.pnp 'image' %}?" + item['image_url'] + "&graph_width=350&graph_height=30");
                                            {% endif %}
                                            graph_row.appendChild( new_img );

                                            my_element.appendChild( graph_row );
                                        }
                                    }
                            )

                        })
                        .fail( function() {
                            console.log('failed to fetch info from pnp4nagios');
                        })
                        .always( function() {
                            spinner.setAttribute('class', 'hide');
                        });
            }

        });
    </script>
{% endblock %}

