var gbar = null;

dateify = function(s) {
    var y = s.substring(0, 4);
    var m = s.substring(4, 6);
    return m + "/" + y;
}

DynamicTable = function(tableElement, canvasElement) {
    this.table = tableElement;
    this.canvas = canvasElement;
    this.savedValue = null;
    
    // build a simple form + text box to attach to those that need editing
    this.inputBox = FORM({name: "dynamicTable", action:"", method:"GET"}, 
        INPUT({"type":"text", "size":"4", "name":"field"}));

    this.addRowRow = TR({}, 
                        TD({colspan:"2"}, 
                            A({href:"#", onclick:"dynTable.addRow(); return false;"}, 
                                "add row")
                        )
                    );

    this.table.appendChild(TBODY({}, this.addRowRow));
    
    // add event listeners
    this.graph = new CanvasGraph(this.canvas);
    this.graph.padding = {"top": 10, "left": 50, "bottom": 50, "right": 10};
    this.graph.setDataset("dynamic", []);
    this.graph.barChartWidth = 0.75;
    
    this.style = "drawBarChart";
    
};

DynamicTable.prototype.onFormChanged = function() {
    var rows = this.table.tBodies[0].rows;
    var getInputValue = function (row) {
        var numberOfCells = row.cells.length;
        var values = new Array();
        for (var i = 0; i < numberOfCells; i++) {
            var input = row.cells[i].firstChild;
            values[i] = input.value;
        }
        return values;
    };
    
    // get values and update
    var tableValues = map(getInputValue, rows);
    this.graph.setDataset("dynamic", tableValues);
    this.graph.clear();
    this.graph[this.style]({"dynamic": Color.redColor()});
};

DynamicTable.prototype.setStyle = function(name) {
    this.style = name;
    this.graph.clear();
    this.graph[this.style]({"dynamic": Color.redColor()});
    return false;
}

DynamicTable.prototype.makeDisplayedValue = function(row, col, value) {
    return TD({onclick: "dynTable.editCell(" + row + ", " + col + ")"},
                SPAN({className:"dynamicValue"}, value));
};

DynamicTable.prototype.makeInputBox = function(row, col, value) {
    var box = TD({},
                INPUT({"type":"text", "size":"4", 
                      "name":"field", "value":value,
                      "class":"dynamicTable",
                      "onchange":"dynTable.onFormChanged()"
                  }));
    return box;
};

DynamicTable.prototype.addRow = function() {
    var row = this.table.tBodies[0].rows.length;
    var value = 0;
    this.table.tBodies[0].appendChild(
            TR({}, 
                [this.makeInputBox(row, 0, value),
                 this.makeInputBox(row, 1, value)]
            )
    );
    return false;
};

var dynTable = null;

function dynamicTableInit() {
    dynTable = new DynamicTable($('dynamicTable'), $('dynamicCanvas'));
}

addLoadEvent(dynamicTableInit);

/*
    
function barchart() {
    // munge data into format that we like
    var entrycount = items(this.entries_count);
    var dataset = new Array();
    entrycount.sort()
    var labels = map(dateify, map(itemgetter(0), entrycount));
    
    for (var i = 0;i < entrycount.length; i++) {
        dataset.push([i, entrycount[i][1]])
    }
    
    // setup the graph
    if (CanvasGraph.isSupported("entries")) {
        gbar = new CanvasGraph("entries");    
        gbar.padding = {top: 10, left: 50, bottom: 30, right: 20};
        gbar.fontSize = 8;
        gbar.xOriginIsZero = false;
        gbar.xlabels = labels
        gbar.xtickSeparation = 80;
        
        gbar.setDataset("entries", dataset)    
        gbar.drawBarChart({"entries": Color.blueColor()});
    }
}   

addLoadEvent(barchart);
*/