{% extends "base.html" %}

{% block javascript %}
<script type="text/javascript" src="/static/prototype.js">
</script>
<script type="text/javascript">
var variables = []
var equations = []
function get_variables() {
    $('status_bin').innerHTML= "Fetching..."
    var initialVariablesRequest = new Ajax.Request(
        "/json/all_vars/",
        { method: 'get', 
          onSuccess: handle_variables });
}

function handle_variables(transport) {
    json = transport.responseText.evalJSON();
    $('status_bin').innerHTML = "Recieved: \n" + json;
    $('variables_bin').innerHTML = '';
    for(i=0; i<json.length; i++) {
        variables[i] = json[i].fields;
        $('variables_bin').innerHTML += '<img src="/static/' + 
            variables[i].render + 
            '" style="padding:2px; border: 2px solid white; margin: 4px;" ' +
            'id="variable'+i+'" ' +
            'alt="'+variables[i].name+'" onClick="toggle_variable('+i+');">';
        variables[i].isselected = false;
    }

}
function toggle_variable(vnum) {
    if(variables[vnum].isselected == false) {
        variables[vnum].isselected = true;
        $('variable'+vnum).style["border"] = "2px solid green"
    } else {
        variables[vnum].isselected = false;
        $('variable'+vnum).style["border"] = "2px solid white"
    }
    var whichvars = ''
    for(i=0; i<variables.length; i++){
        if(variables[i].isselected == true){
            whichvars += (i+1) + ","
        }
    }
    var freshEquationsRequest = new Ajax.Request(
        "/json/equs_by_vars/" + whichvars,
        { method: 'get', 
          onSuccess: handle_equations});
}
function handle_equations(transport) {
    json = transport.responseText.evalJSON();
    $('status_bin').innerHTML = "Recieved: \n" + json;
    $('equations_bin').innerHTML = '<br />';
    for(i=0; i<json.length; i++) {
        equations[json[i].pk-1] = json[i].fields;
        $('equations_bin').innerHTML += '<a style="text-decoration:none;' +
            'border:none;" href="/equation/'+json[i].pk+'/">' +
            '<img src="/static/' + 
            json[i].fields.render + 
            '" style="padding:2px; border: 2px solid white; margin: 4px;" ' +
            'id="variable'+i+'" ' +
            'alt="'+json[i].fields.name+'"></a>';
    }

}

</script>
{% endblock %}

{% block title %}<span style="color: orange;">YAY!</span>{% endblock %}
{% block content %}
<b>Variables<!-- <span onClick="get_variables();">(fetch)</span>-->: </b>
<div id="variables_bin" style="border: 2px solid black; width: 100%;">
(none yet!)
</div>
<br />
<b>Matching Equations: </b>
<div id="equations_bin" style="border: 2px solid black; width: 100%;">
(none yet, choose some variables!)
</div>
<span style="visibility: hidden;">
<b>Status: </b>
<div id="status_bin" style="border: 2px solid black; width: 100%;">
(nothing...)</div>
</span>
<script type="text/javascript">
window.onLoad = get_variables();
</script>
{% endblock %}