<div class="view-column">

    <script type="text/javascript" src="{{ deploy_context | safe }}/static/js/d3.v3.js"></script>
    <script type="text/javascript" src="{{ deploy_context | safe }}/static/js/tvbviz.js?{{ currentVersionJS }}"></script>
    <script type="text/javascript" src="{{ deploy_context | safe }}/static_view/pearson_correlation/pearson_correlation.js?{{ currentVersionJS }}"></script>

    <link rel="stylesheet" href="{{ deploy_context | safe }}/static/style/subsection_svg.css?{{ currentVersionJS }}" type="text/css"/>

    <ul class="toolbar-inline">

        <li>
            <label for="mode_select">Mode</label>
            <select id="mode_select" onchange="Pc_changeMode(this.value)">
                {% for mod in mode_list %}
                    {% if mod==mode %}
                        <option value="{{ mod }}" selected="selected">{{ mod }}</option>
                    {% else %}
                        <option value="{{ mod }}">{{ mod }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </li>

        <li>
            <label for="state_select">State Variable</label>
            <select id="state_select" onchange="Pc_changeState(this.value)">
                {% for state in state_list %}
                    {% if state==state_variable %}
                        <option value="{{ loop.index0 }}" selected="selected">{{ state }}</option>
                    {% else %}
                        <option value="{{ loop.index0 }}">{{ state }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </li>

    </ul>

    <div id="pearson-viewer"></div>

    <script type="text/javascript">

        function initPcViewer(width, height) {
            $("#main").addClass("colscheme-1");
            Pc_init('{{ matrix_shape }}', "{{ viewer_title }}", '{{ matrix_labels | safe }}',
                '{{ url_base  }}', ["Place mouse over matrix elements to inspect their values",
                    "Drag in colorbar to select and show entries in a range of values"],
                '{{ pearson_min }}', '{{ pearson_max }}', width, height);
        }

        // For the burst Preview part
        function launchViewer(width, height) {
            initPcViewer(width, height);
            Pc_getData($("#state_select option:selected").val(), $("#mode_select option:selected").text());
        }
        $(document).ready(function () {
            if (! {{ 'true' if isPreview is defined else 'false' }}) {
                initPcViewer();
                Pc_getData($("#state_select option:selected").val(), $("#mode_select option:selected").text());
            }
        });
    </script>

</div>
