// file: airlines.js

// Herve Saint-Amand
// Saarbruecken
// Sun May  4 05:58:21 2008

//---------------------------------------------------------------------------------------------------------------------------------
// global vars

// HTML element handles
var divGraphOptions;

// string->string map of currently selected options
var selectedOptions;


// the rest is vars that are filled in in the CGI-generated HTML
// these are arrays of [id, label] arrays (a sorted hash of sorts)
var FIELDS;
var GRAPH_TYPES;
var AGGREGATES;

//---------------------------------------------------------------------------------------------------------------------------------
// HTML generation

function repaintGraphOptions () {
    var html = "<table>";


    function _makeSelector (id, options) {
        var html = "<select id='" +id+ "' onChange='selectChanged(\"" +id+ "\", this.options[this.selectedIndex].value)'>";

        for (var i = 0; i < options.length; i++) {
            var key = options[i][0];
            var lbl = options[i][1];
            html += "<option value='" +key+ "'" + (selectedOptions[id] == key ? " selected" : "") + ">" + lbl;
        }

        return html + "</select>";
    }

    function _make_row (label, valSel) {
        return "<tr><td class='label'>" + label + "</td><td class='value'>" + valSel + "</td></tr>";
    }


    // at top: graph size and type selector
    html += _make_row ("Graph size:", _makeSelector ('graph_size', GRAPH_SIZES));
    html += _make_row ("Graph type:", _makeSelector ('graph_type', GRAPH_TYPES));

    // X and Y axis selectors are constant regardless of graph type
    html += _make_row ("X Axis:", _makeSelector ('x_axis', FIELDS));
    html += _make_row ("Y Axis:", _makeSelector ('y_axis', FIELDS));

    // 3D graphs have a z-axis
    if (selectedOptions.graph_type == '3d')
        html += _make_row ("Z Axis:", _makeSelector ('z_axis', FIELDS));

    // aggregate function selector
    html += _make_row ("Aggregate:", _makeSelector ('aggregate', AGGREGATES));

    html += _make_row ("", "<button onclick='submit()'>Graph it</button>");
    html += "</table>";

    // html = html.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    divGraphOptions.innerHTML = html;
}

//---------------------------------------------------------------------------------------------------------------------------------
// event handlers

function selectChanged (id, selectedValue) {
    selectedOptions[id] = selectedValue;

    if (id == 'graph_type') {
        repaintGraphOptions ();
    }

}

function submit () {
    var url = "graph.cgi?";
    for (var i in selectedOptions)
        url += i + '=' + selectedOptions[i] + '&';
    location = url;
}

function onLoad () {

    // bind handles
    divGraphOptions = document.getElementById ('graph-options');

    // set default values for options
    selectedOptions = {
        graph_size: '640x480',
        graph_type: '2d_lines',
        x_axis:     'days_prior_to_departure',
        y_axis:     'price',
        z_axis:     'price',
        aggregate:  'avg',
    };

    // init
    repaintGraphOptions ();
    
}

//---------------------------------------------------------------------------------------------------------------------------------