/**
 * Copyright (c) 2010 Richard Wall <richard (at) the-moon.net>
 * See LICENSE for details.
 *
 * Wrappers and convenience fuctions for working with the javascriptRRD, jQuery,
 * and Flot charting packages.
 *
 * Designed to work well with the RRD files generated by Collectd:
 * - http://collectd.org/
 *
 * Requirements:
 * - JavascriptRRD: http://javascriptrrd.sourceforge.net/
 * - jQuery: http://jquery.com/
 * - Flot: http://code.google.com/p/flot/
 * - MochiKit.Async: http://www.mochikit.com/
 *
 * @module jarmon
 */

/**
 * A namespace for Jarmon
 *
 * @class jarmon
 * @static
 */
if(typeof jarmon == 'undefined') {
    var jarmon = {};
}


jarmon.downloadBinary = function(url) {
    /**
     * Download a binary file asynchronously using the jQuery.ajax function
     *
     * @method downloadBinary
     * @param url {String} The url of the object to be downloaded
     * @return {Object} A deferred which will callback with an instance of javascriptrrd.BinaryFile
     */

    var d = new MochiKit.Async.Deferred();

    $.ajax({
        _deferredResult: d,
        url: url,
        dataType: 'text',
        cache: false,
        beforeSend: function(request) {
            try {
                request.overrideMimeType('text/plain; charset=x-user-defined');
            } catch(e) {
                // IE doesn't support overrideMimeType
            }
        },
        success: function(data) {
            try {
                this._deferredResult.callback(new BinaryFile(data));
            } catch(e) {
                this._deferredResult.errback(e);
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            // Special case for IE which handles binary data slightly
            // differently.
            if(textStatus == 'parsererror') {
                if (typeof xhr.responseBody != 'undefined') {
                    return this.success(xhr.responseBody);
                }
            }
            this._deferredResult.errback(new Error(xhr.status));
        }
    });
    return d;
};


jarmon.localTimeFormatter = function (v, axis) {
    /**
     * Copied from jquery.flot.js and modified to allow timezone
     * adjustment.
     *
     * @method localTimeFormatter
     * @param v {Number} The timestamp to be formatted
     * @param axis {Object} A hash containing information about the time axis
     * @return {String} The formatted datetime string
     **/
    // map of app. size of time units in milliseconds
    var timeUnitSize = {
        "second": 1000,
        "minute": 60 * 1000,
        "hour": 60 * 60 * 1000,
        "day": 24 * 60 * 60 * 1000,
        "month": 30 * 24 * 60 * 60 * 1000,
        "year": 365.2425 * 24 * 60 * 60 * 1000
    };

    // Offset the input timestamp by the user defined amount
    var d = new Date(v + axis.options.tzoffset);

    // first check global format
    if (axis.options.timeformat != null)
        return $.plot.formatDate(d, axis.options.timeformat, axis.options.monthNames);

    var t = axis.tickSize[0] * timeUnitSize[axis.tickSize[1]];
    var span = axis.max - axis.min;
    var suffix = (axis.options.twelveHourClock) ? " %p" : "";

    if (t < timeUnitSize.minute)
        fmt = "%h:%M:%S" + suffix;
    else if (t < timeUnitSize.day) {
        if (span < 2 * timeUnitSize.day)
            fmt = "%h:%M" + suffix;
        else
            fmt = "%b %d %h:%M" + suffix;
    }
    else if (t < timeUnitSize.month)
        fmt = "%b %d";
    else if (t < timeUnitSize.year) {
        if (span < timeUnitSize.year)
            fmt = "%b";
        else
            fmt = "%b %y";
    }
    else
        fmt = "%y";

    return $.plot.formatDate(d, fmt, axis.options.monthNames);
};


/**
 * A wrapper around an instance of javascriptrrd.RRDFile which provides a
 * convenient way to query the RRDFile based on time range, RRD data source (DS)
 * and RRD consolidation function (CF).
 *
 * @class jarmon.RrdQuery
 * @constructor
 * @param rrd {Object} A javascriptrrd.RRDFile
 * @param unit {String} The unit symbol for this data series
 **/
jarmon.RrdQuery = function(rrd, unit) {
    this.rrd = rrd;
    this.unit = unit;
};

jarmon.RrdQuery.prototype.getData = function(startTimeJs, endTimeJs, dsId, cfName) {
    /**
     * Generate a Flot compatible data object containing rows between start and
     * end time. The rows are taken from the first RRA whose data spans the
     * requested time range.
     *
     * @method getData
     * @param startTimeJs {Number} start timestamp in microseconds
     * @param endTimeJs {Number} end timestamp in microseconds
     * @param dsId {Variant} identifier of the RRD datasource (string or number)
     * @param cfName {String} The name of an RRD consolidation function (CF)
     *      eg AVERAGE, MIN, MAX
     * @return {Object} A Flot compatible data series
     *      eg label: '', data: [], unit: ''
     **/

    if (startTimeJs >= endTimeJs) {
        throw RangeError(
            ['starttime must be less than endtime. ',
             'starttime: ', startTimeJs,
             'endtime: ', endTimeJs].join(''));
    }

    var startTime = startTimeJs/1000;
    var lastUpdated = this.rrd.getLastUpdate();

    // default endTime to the last updated time (quantized to rrd step boundry)
    var endTime = lastUpdated - lastUpdated%this.rrd.getMinStep();
    if(endTimeJs) {
        endTime = endTimeJs/1000;
    }

    if(dsId == null) {
        dsId = 0;
    }
    var ds = this.rrd.getDS(dsId);

    if(cfName == null) {
        cfName = 'AVERAGE';
    }

    var rra, step, rraRowCount, lastRowTime, firstRowTime;

    for(var i=0; i<this.rrd.getNrRRAs(); i++) {
        // Look through all RRAs looking for the most suitable
        // data resolution.
        rra = this.rrd.getRRA(i);

        // If this rra doesn't use the requested CF then move on to the next.
        if(rra.getCFName() != cfName) {
            continue;
        }

        step = rra.getStep();
        rraRowCount = rra.getNrRows();
        lastRowTime = lastUpdated-lastUpdated%step;
        firstRowTime = lastRowTime - rraRowCount * step;

        // We assume that the RRAs are listed in ascending order of time range,
        // therefore the first RRA which contains the range minimum should give
        // the highest resolution data for this range.
        if(firstRowTime <= startTime) {
            break;
        }
    }
    // If we got to the end of the loop without ever defining step, it means
    // that the CF check never succeded.
    if(!step) {
        throw TypeError('Unrecognised consolidation function: ' + cfName);
    }

    var flotData = [];
    var dsIndex = ds.getIdx();

    var startRowTime = Math.max(firstRowTime, startTime - startTime%step);
    var endRowTime = Math.min(lastRowTime, endTime - endTime%step);
    // If RRD exists, but hasn't been updated then the start time might end up
    // being higher than the end time (which is capped at the last row time of
    // the chosen RRA, so cap startTime at endTime...if you see what I mean)
    startRowTime = Math.min(startRowTime, endRowTime);

    /*
    console.log('FRT: ', new Date(firstRowTime*1000));
    console.log('LRT: ', new Date(lastRowTime*1000));
    console.log('SRT: ', new Date(startRowTime*1000));
    console.log('ERT: ', new Date(endRowTime*1000));
    console.log('DIFF: ', (lastRowTime - startRowTime) / step);
    console.log('ROWS: ', rraRowCount);
    */

    var startRowIndex = rraRowCount - (lastRowTime - startRowTime)  / step;
    var endRowIndex = rraRowCount - (lastRowTime - endRowTime)  / step;

    //console.log('SRI: ', startRowIndex);
    //console.log('ERI: ', endRowIndex);

    var val;
    var timestamp = startRowTime;
    for(var i=startRowIndex; i<endRowIndex; i++) {
        val = rra.getEl(i, dsIndex)
        flotData.push([timestamp*1000.0, val]);
        timestamp += step
    }

    // Now get the date of the earliest record in entire rrd file, ie that of
    // the last (longest range) rra.
    rra = this.rrd.getRRA(this.rrd.getNrRRAs()-1);
    firstUpdated = lastUpdated - (rra.getNrRows() -1) * rra.getStep();

    return {'label': ds.getName(), 'data': flotData, 'unit': this.unit,
            'firstUpdated': firstUpdated*1000.0,
            'lastUpdated': lastUpdated*1000.0};
};


jarmon.RrdQuery.prototype.getDSNames = function() {
    /**
     * Return a list of RRD Data Source names
     *
     * @method getDSNames
     * @return {Array} An array of DS names.
     **/
    return this.rrd.getDSNames();
};


/**
 * A wrapper around RrdQuery which provides asynchronous access to the data in a
 * remote RRD file.
 *
 * @class jarmon.RrdQueryRemote
 * @constructor
 * @param url {String} The url of a remote RRD file
 * @param unit {String} The unit suffix of this data eg 'bit/sec'
 * @param downloader {Function} A callable which returns a Deferred and calls
 *      back with a javascriptrrd.BinaryFile when it has downloaded.
 **/
jarmon.RrdQueryRemote = function(url, unit, downloader) {
    this.url = url;
    this.unit = unit;
    this.downloader = downloader || jarmon.downloadBinary;
    this.lastUpdate = 0;
    this._download = null;
};


jarmon.RrdQueryRemote.prototype._callRemote = function(methodName, args) {
    // Download the rrd if there has never been a download and don't start
    // another download if one is already in progress.
    if(!this._download) {
        this._download = this.downloader(this.url)
                .addCallback(
                    function(self, binary) {
                        // Upon successful download convert the resulting binary
                        // into an RRD file and pass it on to the next callback
                        // in the chain.
                        var rrd = new RRDFile(binary);
                        self.lastUpdate = rrd.getLastUpdate();
                        return rrd;
                    }, this);
    }

    // Set up a deferred which will call getData on the local RrdQuery object
    // returning a flot compatible data object to the caller.
    var ret = new MochiKit.Async.Deferred().addCallback(
        function(self, methodName, args, rrd) {
            var rq = new jarmon.RrdQuery(rrd, self.unit);
            return rq[methodName].apply(rq, args);
        }, this, methodName, args);

    // Add a pair of callbacks to the current download which will callback the
    // result which we setup above.
    this._download.addBoth(
        function(ret, res) {
            if(res instanceof Error) {
                ret.errback(res);
            } else {
                ret.callback(res);
            }
            return res;
        }, ret);

    return ret;
};


jarmon.RrdQueryRemote.prototype.getData = function(startTime, endTime, dsId, cfName) {
    /**
     * Return a Flot compatible data series asynchronously.
     *
     * @method getData
     * @param startTime {Number} The start timestamp
     * @param endTime {Number} The end timestamp
     * @param dsId {Variant} identifier of the RRD datasource (string or number)
     * @return {Object} A Deferred which calls back with a flot data series.
     **/
    if(this.lastUpdate < endTime/1000) {
        this._download = null;
    }
    return this._callRemote('getData', [startTime, endTime, dsId, cfName]);
};


jarmon.RrdQueryRemote.prototype.getDSNames = function() {
    /**
     * Return a list of RRD Data Source names
     *
     * @method getDSNames
     * @return {Object} A Deferred which calls back with an array of DS names.
     **/
    return this._callRemote('getDSNames');
};


/**
 * Wraps RrdQueryRemote to provide access to a different RRD DSs within a
 * single RrdDataSource.
 *
 * @class jarmon.RrdQueryDsProxy
 * @constructor
 * @param rrdQuery {Object} An RrdQueryRemote instance
 * @param dsId {Variant} identifier of the RRD datasource (string or number)
 **/
jarmon.RrdQueryDsProxy = function(rrdQuery, dsId) {
    this.rrdQuery = rrdQuery;
    this.dsId = dsId;
    this.unit = rrdQuery.unit;
};

jarmon.RrdQueryDsProxy.prototype.getData = function(startTime, endTime) {
    /**
     * Call I{RrdQueryRemote.getData} with a particular dsId
     *
     * @method getData
     * @param startTime {Number} A unix timestamp marking the start time
     * @param endTime {Number} A unix timestamp marking the start time
     * @return {Object} A Deferred which calls back with a flot data series.
     **/
    return this.rrdQuery.getData(startTime, endTime, this.dsId);
};


/**
 * A class for creating a Flot chart from a series of RRD Queries
 *
 * @class jarmon.Chart
 * @constructor
 * @param template {Object} A jQuery containing a single element into which the
 *      chart will be drawn
 * @param options {Object} Flot options which control how the chart should be
 *      drawn.
 **/
jarmon.Chart = function(template, recipe,  downloader) {
    this.template = template;
    this.recipe = recipe;
    this.downloader = downloader;

    this.options = jQuery.extend(true, {yaxis: {}}, recipe.options);

    this.data = [];

    this.setup();

    var self = this;


    // Listen for clicks on the legend items - onclick enable / disable the
    // corresponding data source.
    $('.graph-legend .legendItem', this.template[0]).live('click', function(e) {
        self.switchDataEnabled($(this).text());
        self.draw();
    });

    this.options['yaxis']['ticks'] = function(axis) {
        /*
         * Choose a suitable SI multiplier based on the min and max values from
         * the axis and then generate appropriate yaxis tick labels.
         *
         * @param axis: An I{Object} with min and max properties
         * @return: An array of ~5 tick labels
         */
        var siPrefixes = {
            0: '',
            1: 'K',
            2: 'M',
            3: 'G',
            4: 'T'
        }
        var si = 0;
        while(true) {
            if( Math.pow(1000, si+1)*0.9 > axis.max ) {
                break;
            }
            si++;
        }

        var minVal = axis.min/Math.pow(1000, si);
        var maxVal = axis.max/Math.pow(1000, si);

        var stepSizes = [0.01, 0.05, 0.1, 0.25, 0.5, 1, 5, 10, 25, 50, 100, 250];
        var realStep = (maxVal - minVal)/5.0;

        var stepSize, decimalPlaces = 0;
        for(var i=0; i<stepSizes.length; i++) {
            stepSize = stepSizes[i]
            if( realStep < stepSize ) {
                if(stepSize < 10) {
                    decimalPlaces = 2;
                }
                break;
            }
        }

        if(self.options.yaxis.tickDecimals != null) {
            decimalPlaces = self.options.yaxis.tickDecimals;
        }

        var tickMin = minVal - minVal % stepSize;
        var tickMax = maxVal - maxVal % stepSize + stepSize

        var ticks = [];
        for(var j=tickMin; j<=tickMax; j+=stepSize) {
            ticks.push([
                j*Math.pow(1000, si),
                j.toFixed(decimalPlaces)
            ]);
        }

        self.siPrefix = siPrefixes[si];

        return ticks;
    };
};

jarmon.Chart.prototype.setup = function() {
    this.template.find('.title').text(this.recipe['title']);
    this.data = [];
    var recipe = this.recipe;
    var dataDict = {};
    for(var j=0; j<recipe['data'].length; j++) {
        var rrd = recipe['data'][j][0];
        var ds = recipe['data'][j][1];
        // Test for integer DS index as opposed to DS name
        var dsi = parseInt(ds);
        if(ds.toString() == dsi.toString()) {
            ds = dsi;
        }
        var label = recipe['data'][j][2];
        var unit = recipe['data'][j][3];

        if(typeof dataDict[rrd] == 'undefined') {
            dataDict[rrd] = new jarmon.RrdQueryRemote(rrd, unit, this.downloader);
        }
        this.addData(label, new jarmon.RrdQueryDsProxy(dataDict[rrd], ds));
    }
};

jarmon.Chart.prototype.addData = function(label, db, enabled) {
    /**
     * Add details of a remote RRD data source whose data will be added to this
     * chart.
     *
     * @method addData
     * @param label {String} The label for this data which will be shown in the
     *               chart legend
     * @param db {String} The url of the remote RRD database
     * @param enabled {Boolean} true if you want this data plotted on the chart,
     *      false if not.
     **/
    if(typeof enabled == 'undefined') {
        enabled = true;
    }
    this.data.push([label, db, enabled]);
};

jarmon.Chart.prototype.switchDataEnabled = function(label) {
    /**
     * Enable / Disable a single data source
     *
     * @method switchDataEnabled
     * @param label {String} The label of the data source to be enabled /
     *      disabled.
     **/
    for(var i=0; i<this.data.length; i++) {
        if(this.data[i][0] == label) {
            this.data[i][2] = !this.data[i][2];
        }
    }
};

jarmon.Chart.prototype.setTimeRange = function(startTime, endTime) {
    /**
     * Alter the time range of this chart and redraw
     *
     * @method setTimeRange
     * @param startTime {Number} The start timestamp
     * @param endTime {Number} The end timestamp
     **/
    this.startTime = startTime;
    this.endTime = endTime;
    return this.draw();
}

jarmon.Chart.prototype.draw = function() {
    /**
     * Draw the chart
     * A 'chart_loading' event is triggered before the data is requested
     * A 'chart_loaded' event is triggered when the chart has been drawn
     *
     * @method draw
     * @return {Object} A Deferred which calls back with the chart data when
     *      the chart has been rendered.
     **/
    this.template.addClass('loading');

    var result;
    var results = [];
    for(var i=0; i<this.data.length; i++) {
        if(this.data[i][2]) {
            result = this.data[i][1].getData(this.startTime, this.endTime);
        } else {
            // If the data source has been marked as disabled return a fake
            // empty dataset
            // 0 values so that it can contribute to a stacked chart.
            // 0 linewidth so that it doesn't cause a line in stacked chart
            result = new MochiKit.Async.Deferred();
            result.callback({
                data: [
                    [this.startTime, 0],
                    [this.endTime, 0]
                ],
                lines: {
                    lineWidth: 0
                }
            });
        }

        results.push(result);
    }

    return MochiKit.Async.gatherResults(results)
            .addCallback(
                function(self, data) {
                    // Clear any previous error messages.
                    self.template.find('.error').empty().hide();

                    var i, label, disabled = [];
                    unit = '';
                    for(i=0; i<data.length; i++) {
                        label = self.data[i][0];
                        if(label) {
                            data[i].label = label;
                        }
                        if(typeof data[i].unit != 'undefined') {
                            // Just use the last unit for now
                            unit = data[i].unit;
                        }
                        if(!self.data[i][2]) {
                            disabled.push(label);
                        }
                    }

                    $.plot(self.template.find('.chart').empty().show(), data, self.options);

                    var yaxisUnitLabel = $('<div>').text(self.siPrefix + unit)
                                                   .css({width: '100px',
                                                         position: 'absolute',
                                                         top: '80px',
                                                         left: '-90px',
                                                         'text-align': 'right'});
                    self.template.find('.chart').append(yaxisUnitLabel);

                    // Manipulate and move the flot generated legend to an
                    // alternative position.
                    // The default legend is formatted as an HTML table, so we
                    // grab the contents of the cells and turn them into
                    // divs.
                    // Actually, formatting the legend first as a one column
                    // table is useful as it generates an optimum label element
                    // width which we can copy to the new divs + a little extra
                    // to accomodate the color box
                    var legend = self.template.find('.graph-legend').show();
                    legend.empty();
                    self.template.find('.legendLabel').each(
                        function(i, el) {
                            var orig = $(el);
                            var label = orig.text();
                            var newEl = $('<div />', {
                                'class': 'legendItem',
                                'title': 'Data series switch - click to turn \
                                          this data series on or off'
                            })
                                .width(orig.width()+20)
                                .text(label)
                                .prepend(orig.prev().find('div div').clone().addClass('legendColorBox'))
                                .appendTo(legend);
                            // The legend label is clickable - to enable /
                            // disable different data series. The disabled class
                            // results in a label formatted with strike though
                            if( $.inArray(label, disabled) > -1 ) {
                                newEl.addClass('disabled');
                            }
                        }
                    ).remove();
                    legend.append($('<div />').css('clear', 'both'));
                    self.template.find('.legend').remove();

                    yaxisUnitLabel.position(self.template.position());
                    return data;
                }, this)
            .addErrback(
                function(self, failure) {
                    self.template.find('.chart').empty().hide();
                    self.template.find('.graph-legend').empty().hide();
                    self.template.find('.error').text('error: ' + failure.message);

                }, this)
            .addBoth(
                function(self, res) {
                    self.template.removeClass('loading');
                    return res;
                }, this);
};


/**
 * Generate a form through which to choose a data source from a remote RRD file
 *
 * @class jarmon.RrdChooser
 * @constructor
 **/
jarmon.RrdChooser = function($tpl) {
    this.$tpl = $tpl;
    this.data = {
        rrdUrl: '',
        dsName: '',
        dsLabel: '',
        dsUnit:''
    };
};

jarmon.RrdChooser.prototype.drawRrdUrlForm = function() {
    var self = this;
    this.$tpl.empty();

    $('<form/>').append(
        $('<div/>').append(
            $('<p/>').text('Enter the URL of an RRD file'),
            $('<label/>').append(
                'URL: ',
                $('<input/>', {
                    type: 'text',
                    name: 'rrd_url',
                    value: this.data.rrdUrl
                })
            ),
            $('<input/>', {type: 'submit', value: 'download'}),
            $('<div/>', {class: 'next'})
        )
    ).submit(
        function(e) {
            self.data.rrdUrl = this['rrd_url'].value;
            $placeholder = $(this).find('.next').empty();
            new jarmon.RrdQueryRemote(self.data.rrdUrl).getDSNames().addCallback(
                function($placeholder, dsNames) {
                    if(dsNames.length > 1) {
                        $('<p/>').text(
                            'The RRD file contains multiple data sources. \
                             Choose one:').appendTo($placeholder);

                        $(dsNames).map(
                            function(i, el) {
                                return $('<input/>', {
                                    type: 'button',
                                    value: el
                                }
                            ).click(
                                function(e) {
                                    self.data.dsName = this.value;
                                    self.drawDsLabelForm();
                                }
                            );
                        }).appendTo($placeholder);
                    } else {
                        self.data.dsName = dsNames[0];
                        self.drawDsLabelForm();
                    }
                }, $placeholder
            ).addErrback(
                function($placeholder, err) {
                    $('<p/>', {'class': 'error'}).text(err.toString()).appendTo($placeholder);
                }, $placeholder
            );
            return false;
        }
    ).appendTo(this.$tpl);
}

jarmon.RrdChooser.prototype.drawDsLabelForm = function() {
    var self = this;
    this.$tpl.empty();

    $('<form/>').append(
        $('<p/>').text('Choose a label and unit for this data source.'),
        $('<div/>').append(
            $('<label/>').append(
                'Label: ',
                $('<input/>', {
                    type: 'text',
                    name: 'dsLabel',
                    value: this.data.dslabel || this.data.dsName
                })
            )
        ),
        $('<div/>').append(
            $('<label/>').append(
                'Unit: ',
                $('<input/>', {
                    type: 'text',
                    name: 'dsUnit',
                    value: this.data.dsUnit
                })
            )
        ),
        $('<input/>', {type: 'button', value: 'back'}).click(
            function(e) {
                self.drawRrdUrlForm();
            }
        ),
        $('<input/>', {type: 'submit', value: 'save'}),
        $('<div/>', {class: 'next'})
    ).submit(
        function(e) {
            self.data.dsLabel = this['dsLabel'].value;
            self.data.dsUnit = this['dsUnit'].value;
            self.drawDsSummary();
            return false;
        }
    ).appendTo(this.$tpl);
};


jarmon.RrdChooser.prototype.drawDsSummary = function() {
    var self = this;
    this.$tpl.empty();

    jQuery.each(this.data, function(i, el) {
        $('<p/>').append(
            $('<strong/>').text(i),
            [': ', el].join('')
        ).appendTo(self.$tpl);
    });

    this.$tpl.append(
        $('<input/>', {type: 'button', value: 'back'}).click(
            function(e) {
                self.drawDsLabelForm();
            }
        ),
        $('<input/>', {type: 'button', value: 'finish'})
    );
};


jarmon.ChartEditor = function($tpl, chart) {
    this.$tpl = $tpl;
    this.chart = chart;

    $('form', this.$tpl[0]).live(
        'submit',
        {self: this},
        function(e) {
            var self = e.data.self;
            self.chart.recipe.title = this['title'].value;
            self.chart.recipe.data = $(this).find('.datasources tbody tr').map(
                function(i, el) {
                    return $(el).find('input[type=text]').map(
                        function(i, el) {
                            return el.value;
                        }
                    );
                }
            );
            self.chart.setup();
            self.chart.draw();
            return false;
        }
    );

    $('form', this.$tpl[0]).live(
        'reset',
        {self: this},
        function(e) {
            var self = e.data.self;
            self.draw();
            return false;
        }
    );

    $('form input[name=datasource_delete]', this.$tpl[0]).live(
        'click',
        function(e) {
            $(this).closest('tr').remove();
        }
    );

    $('form input[name=datasource_add]', this.$tpl[0]).live(
        'click',
        {self: this},
        function(e) {
            var self = e.data.self;
            self._addDatasourceRow(
                self._extractRowValues(
                    $(this).closest('tr')
                )
            );
            $(this).closest('tr').find('input[type=text]').val('');
        }
    );
};

jarmon.ChartEditor.prototype.draw = function() {
    var self = this;
    this.$tpl.empty();

    $('<form/>').append(
        $('<div/>').append(
            $('<label/>').append(
                'Title: ',
                $('<input/>', {
                    type: 'text',
                    name: 'title',
                    value: this.chart.recipe.title
                })
            )
        ),
        $('<fieldset/>').append(
            $('<legend/>').text('Data Sources'),
            $('<table/>', {'class': 'datasources'}).append(
                $('<thead/>').append(
                    $('<tr/>').append(
                        $('<th/>').text('RRD File'),
                        $('<th/>').text('DS Name'),
                        $('<th/>').text('DS Label'),
                        $('<th/>').text('DS Unit'),
                        $('<th/>')
                    )
                ),
                $('<tfoot/>').append(
                    $('<tr/>').append(
                        $('<td/>').append(
                            $('<input/>', {type: 'text'})
                        ),
                        $('<td/>').append(
                            $('<input/>', {type: 'text'})
                        ),
                        $('<td/>').append(
                            $('<input/>', {type: 'text'})
                        ),
                        $('<td/>').append(
                            $('<input/>', {type: 'text'})
                        ),
                        $('<td/>').append(
                            $('<input/>', {
                                type: 'button',
                                value: 'add',
                                name: 'datasource_add'
                            })
                        )
                    )
                ),
                $('<tbody/>')
            )
        ),
        $('<input/>', {type: 'submit', value: 'save'}),
        $('<input/>', {type: 'reset', value: 'reset'})
    ).appendTo(this.$tpl);

    for(var i=0; i<this.chart.recipe.data.length; i++) {
        this._addDatasourceRow(this.chart.recipe.data[i]);
    }
};


jarmon.ChartEditor.prototype._extractRowValues = function($row) {
    return $row.find('input[type=text]').map(
        function(i, el) {
            return el.value;
        }
    )
};


jarmon.ChartEditor.prototype._addDatasourceRow = function(record) {
    $('<tr/>').append(
        $('<td/>').append(
            $('<input/>', {type: 'text', value: record[0]})
        ),
        $('<td/>').append(
            $('<input/>', {type: 'text', value: record[1]})
        ),
        $('<td/>').append(
            $('<input/>', {type: 'text', value: record[2]})
        ),
        $('<td/>').append(
            $('<input/>', {type: 'text', value: record[3]})
        ),
        $('<td/>').append(
            $('<input/>', {
                type: 'button',
                value: 'delete',
                name: 'datasource_delete'
            })
        )
    ).appendTo(this.$tpl.find('.datasources tbody'));
};


jarmon.TabbedInterface = function($tpl, recipe) {
    this.$tpl = $tpl;
    this.recipe = recipe;
    this.placeholders = [];

    this.$tabBar = $('<ul/>', {'class': 'css-tabs'}).appendTo($tpl);

    // Icon and hidden input box for adding new tabs. See event handlers below.
    this.$newTabControls = $('<li/>', {
        'class': 'newTabControls',
        'title': 'Add new tab'
    }).append(
        $('<img/>', {src: 'assets/icons/next.gif'}),
        $('<input/>', {'type': 'text'}).hide()
    ).appendTo(this.$tabBar);

    this.$tabPanels = $('<div/>', {'class': 'css-panes charts'}).appendTo($tpl);
    var tabName, $tabPanel, placeNames;
    for(var i=0; i<recipe.length; i++) {
        tabName = recipe[i][0];
        placeNames = recipe[i][1];

        $tabPanel = this.newTab(tabName);

        for(var j=0; j<placeNames.length; j++) {
            this.placeholders.push([
                placeNames[j], $('<div/>').appendTo($tabPanel)]);
        }
    }

    this.setup();

    // Show the new tab name input box when the user clicks the new tab icon
    $('ul.css-tabs > li.newTabControls > img', $tpl[0]).live(
        'click',
        function(e) {
            $(this).hide().siblings().show().focus();
        }
    );

    // When the "new" tab input loses focus, use its value to create a new
    // tab.
    // XXX: Due to event bubbling, this event seems to be triggered twice, but
    // only when the input is forcefully blurred by the "keypress" event handler
    // below. To prevent two tabs, we blank the input field value. Tried
    // preventing event bubbling, but there seems to be some subtle difference
    // with the use of jquery live event handlers.
    $('ul.css-tabs > li.newTabControls > input', $tpl[0]).live(
        'blur',
        {self: this},
        function(e) {
            var self = e.data.self;
            var value = this.value;
            this.value = '';
            $(this).hide().siblings().show();
            if(value) {
                self.newTab(value);
                self.setup();
                self.$tabBar.data("tabs").click(value);
            }
        }
    );

    // Unfocus the input element when return key is pressed. Triggers a
    // blur event which then replaces the input with a tab
    $('ul.css-tabs > li > input', $tpl[0]).live(
        'keypress',
        function(e) {
            if(e.which == 13) {
                $(this).blur();
            }
        }
    );

    // Show tab name input box when tab is double clicked.
    $('ul.css-tabs > li > a', $tpl[0]).live(
        'dblclick',
        {self: this},
        function(e) {
            var $originalLink = $(this);
            var $input = $('<input/>', {
                'value': $originalLink.text(),
                'name': 'editTabTitle',
                'type': 'text'
            })
            $originalLink.replaceWith($input);
            $input.focus();
        }
    );

    // Handle the updating of the tab when its name is edited.
    $('ul.css-tabs > li > input[name=editTabTitle]', $tpl[0]).live(
        'blur',
        {self: this},
        function(e) {
            var self = e.data.self;
            $(this).replaceWith(
                $('<a/>', {
                    href: ['#', this.value].join('')
                }).text(this.value)
            )
            self.setup();
            self.$tabBar.data("tabs").click(this.value);
        }
    );

    $('input[name=add_new_chart]', $tpl[0]).live(
        'click',
        {self: this},
        function(e) {
            console.log(e);
        }
    );
};

jarmon.TabbedInterface.prototype.newTab = function(tabName) {
    // Add a tab
    $('<li/>').append(
        $('<a/>', {href: ['#', tabName].join('')}).text(tabName)
    ).appendTo(this.$tabBar);
    var $placeholder = $('<div/>');
    // Add tab panel
    $('<div/>').append(
        $placeholder,
        $('<div/>', {'class': 'tab-controls'}).append(
            $('<input/>', {
                type: 'button',
                value: 'Add new chart',
                name: 'add_new_chart'
            })
        )
    ).appendTo(this.$tabPanels);

    return $placeholder;
};

jarmon.TabbedInterface.prototype.setup = function() {
    this.$newTabControls.remove();
    // Destroy then re-initialise the jquerytools tabs plugin
    var api = this.$tabBar.data("tabs");
    if(api) {
        api.destroy();
    }
    this.$tabBar.tabs(this.$tabPanels.children('div'));
    this.$newTabControls.appendTo(this.$tabBar);
};


jarmon.buildTabbedChartUi = function ($chartTemplate, chartRecipes,
                                      $tabTemplate, tabRecipes,
                                      $controlPanelTemplate) {
    /**
     * Setup chart date range controls and all charts
     **/
    var p = new jarmon.Parallimiter(1);
    function serialDownloader(url) {
        return p.addCallable(jarmon.downloadBinary, [url]);
    }

    var ti = new jarmon.TabbedInterface($tabTemplate, tabRecipes);

    var charts = jQuery.map(
        ti.placeholders,
        function(el, i) {
            var chart = new jarmon.Chart(
                $chartTemplate.clone().appendTo(el[1]),
                chartRecipes[el[0]],
                serialDownloader
            );

            $('input[name=chart_edit]', el[1][0]).live(
                'click',
                {chart: chart},
                function(e) {
                    var chart = e.data.chart;
                    new jarmon.ChartEditor(
                        chart.template.find('.graph-legend'), chart).draw();
                }
            );

            $('input[name=chart_delete]', el[1][0]).live(
                'click',
                {chart: chart},
                function(e) {
                    var chart = e.data.chart;
                    chart.template.remove();
                }
            );

            return chart;
        }
    );

    var cc = new jarmon.ChartCoordinator($controlPanelTemplate, charts);
    // Update charts when tab is clicked
    ti.$tpl.find(".css-tabs:first").bind(
        'click',
        {'cc': cc},
        function(e) {
            var cc = e.data.cc;
            // XXX: Hack to give the tab just enough time to become visible
            // so that flot can calculate chart dimensions.
            window.clearTimeout(cc.t);
            cc.t = window.setTimeout(
                function() {
                    cc.update();
                }, 100);
        }
    );

    // Initialise all the charts
    cc.init();

    return [charts, ti, cc];
};


// Options common to all the chart on this page
jarmon.Chart.BASE_OPTIONS = {
    grid: {
        clickable: false,
        borderWidth: 1,
        borderColor: "#000",
        color: "#000",
        backgroundColor: "#fff",
        tickColor: "#eee"
    },
    legend: {
        position: 'nw',
        noColumns: 1
    },
    selection: {
        mode: 'x'
    },
    series: {
        points: { show: false },
        lines: {
            show: true,
            steps: false,
            shadowSize: 0,
            lineWidth: 1
        },
        shadowSize: 0
    },
    xaxis: {
        mode: "time",
        tickFormatter: jarmon.localTimeFormatter
    }
};

// Extra options to generate a stacked chart
jarmon.Chart.STACKED_OPTIONS = {
    series: {
        stack: true,
        lines: {
            fill: 0.5
        }
    }
};


// A selection of useful time ranges
jarmon.timeRangeShortcuts = [
    ['last hour', function(now) { return [now-60*60*1000*1, now]; }],
    ['last 3 hours', function(now) { return [now-60*60*1000*3, now]; }],
    ['last 6 hours', function(now) { return [now-60*60*1000*6, now]; }],
    ['last 12 hours', function(now) { return [now-60*60*1000*12, now]; }],
    ['last day', function(now) { return [now-60*60*1000*24, now]; }],
    ['last week', function(now) { return [now-60*60*1000*24*7, now]; }],
    ['last month', function(now) { return [now-60*60*1000*24*31, now]; }],
    ['last year', function(now) { return [now-60*60*1000*24*365, now]; }]
];


/**
 * Presents the user with a form and a timeline with which they can choose a
 * time range and co-ordinates the refreshing of a series of charts.
 *
 * @class jarmon.ChartCoordinator
 * @constructor
 * @param ui {Object} A one element jQuery containing an input form and
 *      placeholders for the timeline and for the series of charts.
 **/
jarmon.ChartCoordinator = function(ui, charts) {
    var self = this;
    this.ui = ui;
    this.charts = charts;

    // Style and configuration of the range timeline
    this.rangePreviewOptions = {
        grid: {
            borderWidth: 1
        },
        selection: {
            mode: 'x'
        },
        xaxis: {
            mode: 'time',
            tickFormatter: jarmon.localTimeFormatter
        },
        yaxis: {
            ticks: []
        }
    };

    var options = this.ui.find('select[name="from_standard"]');
    for(var i=0; i<jarmon.timeRangeShortcuts.length; i++) {
        options.append($('<option />').text(jarmon.timeRangeShortcuts[i][0]));
    }

    // Append a custom option for when the user selects an area of the graph
    options.append($('<option />').text('custom'));
    // Select the first shortcut by default
    options.val(jarmon.timeRangeShortcuts[0][0]);

    options.bind('change', function(e) {
        // No point in updating if the user chose custom.
        if($(this).val() != 'custom') {
            self.update();
        }
    });

    // Update the time ranges and redraw charts when the custom datetime inputs
    // are changed
    this.ui.find('[name="from_custom"]').bind('change',
        function(e) {
            self.ui.find('[name="from_standard"]').val('custom');
            var tzoffset = parseInt(self.ui.find('[name="tzoffset"]').val());
            self.setTimeRange(new Date(this.value + ' UTC').getTime() - tzoffset, null);
            self.update();
        }
    );

    this.ui.find('[name="to_custom"]').bind('change',
        function(e) {
            self.ui.find('[name="from_standard"]').val('custom');
            var tzoffset = parseInt(self.ui.find('[name="tzoffset"]').val());
            self.setTimeRange(null, new Date(this.value + ' UTC').getTime() - tzoffset);
            self.update();
        }
    );

    // Populate a list of tzoffset options if the element is present in the
    // template as a select list
    tzoffsetEl = this.ui.find('[name="tzoffset"]');
    if(tzoffsetEl.is('select')) {
        var label, val;
        for(var i=-12; i<=12; i++) {
            label = 'UTC';
            val = i;
            if(val >= 0) {
                label += ' + ';
            } else {
                label += ' - ';
            }
            val = Math.abs(val).toString();
            if(val.length == 1) {
                label += '0';
            }
            label += val + '00';
            tzoffsetEl.append($('<option />').attr('value', i*60*60*1000).text(label));
        }

        tzoffsetEl.bind('change', function(e) {
            self.update();
        });
    }

    // Default timezone offset based on localtime
    var tzoffset = -1 * new Date().getTimezoneOffset() * 60 * 1000;
    tzoffsetEl.val(tzoffset);

    // Update the time ranges and redraw charts when the form is submitted
    this.ui.find('[name="action"]').bind('click', function(e) {
        self.update();
        return false;
    });

    // When a selection is made on the range timeline, or any of my charts
    // redraw all the charts.
    $(document).bind(
        'plotselected',
        {self: this},
        function(e, ranges) {
            var self = e.data.self;
            var eventSourceIsMine = false;

            // plotselected event may be from my range selector chart or
            if( self.ui.has(e.target) ) {
                eventSourceIsMine = true;
            } else {
                // ...it may come from one of the charts under my supervision
                for(var i=0; i<self.charts.length; i++) {
                    if(self.charts[i].template.has(e.target).length > 0) {
                        eventSourceIsMine = true;
                        break;
                    }
                }
            }

            if(eventSourceIsMine) {
                // Update the prepared time range select box to value "custom"
                self.ui.find('[name="from_standard"]').val('custom');

                // Update all my charts
                self.setTimeRange(ranges.xaxis.from, ranges.xaxis.to);
                self.update();
            }
        }
    );

    // Add dhtml calendars to the date input fields
    this.ui.find(".timerange_control img")
        .dateinput({
            'format': 'dd mmm yyyy 00:00:00',
            'max': +1,
            'css': {'input': 'jquerytools_date'}})
        .bind('onBeforeShow', function(e) {
            var classes = $(this).attr('class').split(' ');
            var currentDate, input_selector;
            for(var i=0; i<=classes.length; i++) {
                input_selector = '[name="' + classes[i] + '"]';
                // Look for a neighboring input element whose name matches the
                // class name of this calendar
                // Parse the value as a date if the returned date.getTime
                // returns NaN we know it's an invalid date
                // XXX: is there a better way to check for valid date?
                currentDate = new Date($(this).siblings(input_selector).val());
                if(currentDate.getTime() != NaN) {
                    $(this).data('dateinput')._input_selector = input_selector;
                    $(this).data('dateinput')._initial_val = currentDate.getTime();
                    $(this).data('dateinput').setValue(currentDate);
                    break;
                }
            }
        })
        .bind('onHide', function(e) {
            // Called after a calendar date has been chosen by the user.

            // Use the sibling selector that we generated above before opening
            // the calendar
            var input_selector = $(this).data('dateinput')._input_selector;
            var oldStamp = $(this).data('dateinput')._initial_val;
            var newDate = $(this).data('dateinput').getValue();
            // Only update the form field if the date has changed.
            if(oldStamp != newDate.getTime()) {
                $(this).siblings(input_selector).val(
                    newDate.toString().split(' ').slice(1,5).join(' '));
                // Trigger a change event which should automatically update the
                // graphs and change the timerange drop down selector to
                // "custom"
                $(this).siblings(input_selector).trigger('change');
            }
        });

    // Avoid overlaps between the calendars
    // XXX: This is a bit of hack, what if there's more than one set of calendar
    // controls on a page?
    this.ui.find(".timerange_control img.from_custom").bind(
        'onBeforeShow',
        {self: this},
        function(e) {
            var self = e.data.self;
            var otherVal = new Date(
                self.ui.find('.timerange_control [name="to_custom"]').val());

            $(this).data('dateinput').setMax(otherVal);
        }
    );
    this.ui.find(".timerange_control img.to_custom").bind(
        'onBeforeShow',
        {self: this},
        function(e) {
            var self = e.data.self;
            var otherVal = new Date(
                self.ui.find('.timerange_control [name="from_custom"]').val());

            $(this).data('dateinput').setMin(otherVal);
        }
    );

};


jarmon.ChartCoordinator.prototype.update = function() {
    /**
     * Grab the start and end time from the ui form, highlight the range on the
     * range timeline and set the time range of all the charts and redraw.
     *
     * @method update
     **/

    var selection = this.ui.find('[name="from_standard"]').val();

    var now = new Date().getTime();
    for(var i=0; i<jarmon.timeRangeShortcuts.length; i++) {
        if(jarmon.timeRangeShortcuts[i][0] == selection) {
            range = jarmon.timeRangeShortcuts[i][1](now);
            this.setTimeRange(range[0], range[1]);
            break;
        }
    }

    var startTime = parseInt(this.ui.find('[name="from"]').val());
    var endTime = parseInt(this.ui.find('[name="to"]').val());
    var tzoffset = parseInt(this.ui.find('[name="tzoffset"]').val());

    this.ui.find('[name="from_custom"]').val(
        new Date(startTime + tzoffset).toUTCString().split(' ').slice(1,5).join(' '));
    this.ui.find('[name="to_custom"]').val(
        new Date(endTime + tzoffset).toUTCString().split(' ').slice(1,5).join(' '));

    this.rangePreviewOptions.xaxis.tzoffset = tzoffset;

    var chartsLoading = [];
    for(var i=0; i<this.charts.length; i++){
        this.charts[i].options.xaxis.tzoffset = tzoffset;
        // Don't render charts which are not currently visible
        if(this.charts[i].template.is(':visible')) {
            chartsLoading.push(
                this.charts[i].setTimeRange(startTime, endTime));
        }
    }
    return MochiKit.Async.gatherResults(chartsLoading).addCallback(
        function(self, startTime, endTime, chartData) {

            var firstUpdate = new Date().getTime();
            var lastUpdate = 0;

            for(var i=0; i<chartData.length; i++) {
                for(var j=0; j<chartData[i].length; j++) {
                    if(chartData[i][j].firstUpdated < firstUpdate) {
                        firstUpdate = chartData[i][j].firstUpdated;
                    }
                    if(chartData[i][j].lastUpdated > lastUpdate) {
                        lastUpdate = chartData[i][j].lastUpdated;
                    }
                }
            }

            var ranges = {
                xaxis: {
                    from: Math.max(startTime, firstUpdate),
                    to: Math.min(endTime, lastUpdate)
                }
            };

            // Add a suitable extended head and tail to preview graph time axis
            var HOUR = 1000 * 60 * 60;
            var DAY = HOUR * 24;
            var WEEK = DAY * 7;
            var MONTH = DAY * 31;
            var YEAR = DAY * 365;
            var periods = [HOUR, HOUR*6, HOUR*12,
                           DAY, DAY*3,
                           WEEK, WEEK*2,
                           MONTH, MONTH*3, MONTH*6, YEAR];

            var range = ranges.xaxis.to - ranges.xaxis.from;
            for(var i=0; i<periods.length; i++) {
                if(range <= periods[i]) {
                    i++;
                    break;
                }
            }

            // Dummy data for the range timeline
            var data = [
                [Math.max(ranges.xaxis.from - periods[i-1], firstUpdate), 1],
                [Math.min(ranges.xaxis.to + periods[i-1], lastUpdate), 1]];

            self.rangePreview = $.plot(self.ui.find('.range-preview'), [data],
                                       self.rangePreviewOptions);

            self.rangePreview.setSelection(ranges, true);
        }, this, startTime, endTime);
};

jarmon.ChartCoordinator.prototype.setTimeRange = function(from, to) {
    /**
     * Set the start and end time fields in the form and trigger an update
     *
     * @method setTimeRange
     * @param startTime {Number} The start timestamp
     * @param endTime {Number} The end timestamp
     **/
    if(from != null) {
        this.ui.find('[name="from"]').val(from);
    }
    if(to != null) {
        this.ui.find('[name="to"]').val(to);
    }
};

jarmon.ChartCoordinator.prototype.init = function() {
    /**
     * Reset all charts and the input form to the default time range - last hour
     *
     * @method init
     **/
    this.update();
};

/**
 * Limit the number of parallel async calls
 *
 * @class jarmon.Parallimiter
 * @constructor
 * @param limit {Number} The maximum number of in progress calls
 **/
jarmon.Parallimiter = function(limit) {
    this.limit = limit || 1;
    this._callQueue = [];
    this._currentCallCount = 0;
};

jarmon.Parallimiter.prototype.addCallable = function(callable, args) {
    /**
    * Add a function to be called when the number of in progress calls drops
    * below the configured limit
    *
    * @method addCallable
    * @param callable {Function} A function which returns a Deferred.
    * @param args {Array} A list of arguments to pass to the callable
    * @return {Object} A Deferred which fires with the result of the callable
    *       when it is called.
    **/
    var d = new MochiKit.Async.Deferred();
    this._callQueue.unshift([d, callable, args]);
    this._nextCall();
    return d;
};

jarmon.Parallimiter.prototype._nextCall = function() {
    if(this._callQueue.length > 0) {
        if(this._currentCallCount < this.limit) {
            this._currentCallCount++;
            var nextCall = this._callQueue.pop();
            nextCall[1].apply(null, nextCall[2]).addBoth(
                function(self, d, res) {
                    d.callback(res);
                    self._currentCallCount--;
                    self._nextCall();
                }, this, nextCall[0]);
        }
    }
};