{% extends "base.html" %}

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

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

}
function handle_variables(transport) {
    lock = false;
    json = transport.responseText.evalJSON();
    //$('status_bin').innerHTML = "Recieved: \n" + json;
    if(! $('variables_bin').started) {
        $('variables_bin').started = true
        $('variables_bin').innerHTML = '';
    }
    if(json.length < 1) {
        $('variables_bin').innerHTML = '<br />';
        $('variables_bin').started = false;
    }

    var symbol = -1;
    for(i = 0; i<symbols.length; i++) {
        for(j=0; j<json.length; j++) {
            if(symbols[i].pk == json[j].fields.symbol) {
                symbol = i;
                break;
            }
        }
    }
    if(symbol == -1) { return; }

    if(!($('set_symbol'+symbol))){
        $('variables_bin').innerHTML += '<span id="set_symbol' +
            symbol + '"></span>';
    }
    $('set_symbol'+symbol).innerHTML = 
        '<img src="/static/' + symbols[symbol].render + '" />: ' + 
        '<span class="clickable" onClick="toggle_allvars(' + symbol +
        ');" id="all_vars'+symbol+'">(all)</a>'; 

    var prevars = variables.length;
    for(i=0; i<json.length; i++) {
        variables[i+prevars] = json[i].fields;
        variables[i+prevars].pk = json[i].pk;
        //if(! variables[i+prevars].isgeneric) {
            $('set_symbol'+symbol).innerHTML += ' ' + 
            '<span class="clickable" id="variable'+(i+prevars)+'"' + 
            'onClick="toggle_variable('+(i+prevars)+');">'+
            variables[i+prevars].name + '</span> ';
            variables[i+prevars].isselected = false;
        //}
    }
    $('set_symbol'+symbol).innerHTML += '<br />';
    toggle_allvars(symbol);
}

function toggle_allvars(snum) {
    if(lock) return;
    symbols[snum].isall = true;
    $('all_vars'+snum).style["border"] = "2px solid green";
    for(i=0;i<variables.length;i++) {
        if(variables[i].symbol = snum) {
            variables[i].isselected = true;
            if(! variables[i].isgeneric) {
                $('variable'+i).style["border"] = "2px solid white";
            }
        }
    }
    var whichvars = ''
    for(i=0; i<variables.length; i++){
        if(variables[i].isselected == true){
            whichvars += variables[i].pk + ","
        }
    }
    
    //$('status_bin').innerHTML = "Requested: \n" +
        "/json/equs_by_vars/" + whichvars + "/" + "<br />";
    lock = true;
    var freshEquationsRequest = new Ajax.Request(
        "/json/equs_by_vars/" + whichvars + "/",
        { method: 'get', 
          onSuccess: handle_equations});
}

function toggle_symbol(snum) {
    if(lock) return;
    if(symbols[snum].isselected == false) {
        symbols[snum].isselected = true;
        $('symbol'+snum).style["border"] = "2px solid green";
    } else {
        symbols[snum].isselected = false;
        $('symbol'+snum).style["border"] = "2px solid white";
        if($('set_symbol'+snum)) {
            $('set_symbol'+snum).innerHTML = '';
        }
    }
    var whichsymbols = ''
    for(i=0; i<symbols.length; i++){
        if(symbols[i].isselected == true){
            whichsymbols += symbols[i].pk + ",";
        }
    }
    lock = true;
    var freshVariablesRequest = new Ajax.Request(
        "/json/vars_by_symbs/" + whichsymbols + "/",
        { method: 'get', 
          onSuccess: handle_variables});
}
function toggle_variable(vnum) {
    if(lock) return;
    var symbol = variables[vnum].symbol
    if(symbols[symbol].isall) {
        $('all_vars'+symbol).style["border"] = "2px solid white"
        for(i=0;i<variables.length;i++) {
            if(variables[i].symbol == symbol) {
                variables[i].isselected = false;
            }
        }
        symbols[symbol].isall = false;
    }
    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 += variables[i].pk + ","
        }
    }
    
    //$('status_bin').innerHTML = "Requested: \n" +
        "/json/equs_by_vars/" + whichvars + "/" + "<br />";
    lock = true;
    var freshEquationsRequest = new Ajax.Request(
        "/json/equs_by_vars/" + whichvars + "/",
        { method: 'get', 
          onSuccess: handle_equations});
}
function handle_equations(transport) {
    lock = false;
    //$('status_bin').innerHTML += "Recieved: \n" + transport.responseText;
    json = transport.responseText.evalJSON();
    //$('status_bin').innerHTML += "<br />Recieved: \n" + json;
    $('equations_bin').innerHTML = '';
    if(json.length < 1)
        $('equations_bin').innerHTML = '<br />';
    for(i=0; i<json.length; i++) {
        equations[json[i].pk-1] = json[i].fields;
        equations[json[i].pk-1] = json[i].pk;
        equationsTMP[i] = json[i].fields;
        equationsTMP[i].pk = json[i].pk;
        $('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>Symbols<!-- <span onClick="get_variables();">(fetch)</span>-->: </b>
<div id="symbols_bin" style="border: 2px solid black; width: 100%;">
(none yet!)
</div>
<br />
<b>Variables<!-- <span onClick="get_variables();">(fetch)</span>-->: </b>
<div id="variables_bin" style="border: 2px solid black; width: 100%;
    padding: 3px;">
(none yet, choose some symbols!)
</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; width=1px, height=1px;">-->
<b>Status: </b>
<div id="status_bin" style="border: 2px solid black; width: 100%;">
(nothing...)</div>
</span>
<script type="text/javascript">
window.onLoad = get_symbols();
</script>
{% endblock %}