/**
 * Copyright (c) Richard Wall
 * 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/
 *
 * @module jarmon
 */

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

// A VBScript and Javascript helper function to convert IE responseBody to a
// byte string.
// http://miskun.com/javascript/internet-explorer-and-binary-files-data-access/
var IEBinaryToArray_ByteStr_Script =
    "<!-- IEBinaryToArray_ByteStr -->\r\n"+
    "<script type='text/vbscript'>\r\n"+
    "Function IEBinaryToArray_ByteStr(Binary)\r\n"+
    "	IEBinaryToArray_ByteStr = CStr(Binary)\r\n"+
    "End Function\r\n"+
    "Function IEBinaryToArray_ByteStr_Last(Binary)\r\n"+
    "	Dim lastIndex\r\n"+
    "	lastIndex = LenB(Binary)\r\n"+
    "	if lastIndex mod 2 Then\r\n"+
    "		IEBinaryToArray_ByteStr_Last = Chr( AscB( MidB( Binary, lastIndex, 1 ) ) )\r\n"+
    "	Else\r\n"+
    "		IEBinaryToArray_ByteStr_Last = "+'""'+"\r\n"+
    "	End If\r\n"+
    "End Function\r\n"+
    "</script>\r\n";
document.write(IEBinaryToArray_ByteStr_Script);

jarmon.GetIEByteArray_ByteStr = function(IEByteArray) {
    if(typeof(jarmon.ByteMapping) === 'undefined') {
        jarmon.ByteMapping = {};
        for ( var i = 0; i < 256; i++ ) {
            for ( var j = 0; j < 256; j++ ) {
                jarmon.ByteMapping[ String.fromCharCode( i + j * 256 ) ] =
                    String.fromCharCode(i) + String.fromCharCode(j);
                }
        }
    }

    var rawBytes = IEBinaryToArray_ByteStr(IEByteArray);
    var lastChr = IEBinaryToArray_ByteStr_Last(IEByteArray);
    return rawBytes.replace(/[\s\S]/g,
        function( match ) { return jarmon.ByteMapping[match]; }) + lastChr;
};

/*
 * BinaryFile over XMLHttpRequest
 * Part of the javascriptRRD package
 * Copyright (c) 2009 Frank Wuerthwein, fkw@ucsd.edu
 * MIT License [http://www.opensource.org/licenses/mit-license.php]
 *
 * Original repository: http://javascriptrrd.sourceforge.net/
 *
 * Based on:
 *   Binary Ajax 0.1.5
 * Copyright (c) 2008 Jacob Seidelin, cupboy@gmail.com,
 *    http://blog.nihilogic.dk/
 *   MIT License [http://www.opensource.org/licenses/mit-license.php]
 */

// ============================================================
// Exception class
jarmon.InvalidBinaryFile = function(msg) {
  this.message=msg;
  this.name="Invalid BinaryFile";
};

// pretty print
jarmon.InvalidBinaryFile.prototype.toString = function() {
  return this.name + ': "' + this.message + '"';
};

// =====================================================================
// BinaryFile class
//   Allows access to element inside a binary stream
jarmon.BinaryFile = function(strData, iDataOffset, iDataLength) {

    var data = strData;
    var dataOffset = iDataOffset || 0;
    var dataLength = 0;
    // added
    var doubleMantExpHi=Math.pow(2,-28);
    var doubleMantExpLo=Math.pow(2,-52);
    var doubleMantExpFast=Math.pow(2,-20);

    if (typeof strData === "string") {
        dataLength = iDataLength || data.length;
    } else {
      throw new jarmon.InvalidBinaryFile(
          "Unsupported type " + (typeof strData));
    }

    this.getRawData = function() {
        return data;
    };

    this.getByteAt = function(iOffset) {
        return data.charCodeAt(iOffset + dataOffset) & 0xFF;
    };

    this.getLength = function() {
        return dataLength;
    };

    this.getSByteAt = function(iOffset) {
        var iByte = this.getByteAt(iOffset);
        if (iByte > 127)
            return iByte - 256;
        else
            return iByte;
    };

    this.getShortAt = function(iOffset) {
        var iShort = (
            this.getByteAt(iOffset + 1) << 8) + this.getByteAt(iOffset);
        if (iShort < 0) iShort += 65536;
        return iShort;
    };
    this.getSShortAt = function(iOffset) {
        var iUShort = this.getShortAt(iOffset);
        if (iUShort > 32767)
            return iUShort - 65536;
        else
            return iUShort;
    };
    this.getLongAt = function(iOffset) {
        var iByte1 = this.getByteAt(iOffset),
            iByte2 = this.getByteAt(iOffset + 1),
            iByte3 = this.getByteAt(iOffset + 2),
            iByte4 = this.getByteAt(iOffset + 3);

        var iLong = (((((iByte4 << 8) + iByte3) << 8) + iByte2) << 8) + iByte1;
        if (iLong < 0) iLong += 4294967296;
        return iLong;
    };
    this.getSLongAt = function(iOffset) {
        var iULong = this.getLongAt(iOffset);
        if (iULong > 2147483647)
            return iULong - 4294967296;
        else
            return iULong;
    };
    this.getStringAt = function(iOffset, iLength) {
        var aStr = [];
        for (var i=iOffset,j=0;i<iOffset+iLength;i++,j++) {
            aStr[j] = String.fromCharCode(this.getByteAt(i));
        }
        return aStr.join("");
    };

    // Added
    this.getCStringAt = function(iOffset, iMaxLength) {
        var aStr = [];
        for (var i=iOffset,j=0;(i<iOffset+iMaxLength) &&
             (this.getByteAt(i)>0);i++,j++) {
            aStr[j] = String.fromCharCode(this.getByteAt(i));
        }
        return aStr.join("");
    };

    // Added
    this.getDoubleAt = function(iOffset) {
        var iByte1 = this.getByteAt(iOffset),
            iByte2 = this.getByteAt(iOffset + 1),
            iByte3 = this.getByteAt(iOffset + 2),
                iByte4 = this.getByteAt(iOffset + 3),
                iByte5 = this.getByteAt(iOffset + 4),
            iByte6 = this.getByteAt(iOffset + 5),
            iByte7 = this.getByteAt(iOffset + 6),
            iByte8 = this.getByteAt(iOffset + 7);
        var iSign=iByte8 >> 7;
        var iExpRaw=((iByte8 & 0x7F)<< 4) + (iByte7 >> 4);
        var iMantHi=((((((iByte7 & 0x0F) << 8) + iByte6) << 8) + iByte5) << 8) + iByte4;
        var iMantLo=((((iByte3) << 8) + iByte2) << 8) + iByte1;

        if (iExpRaw===0) return 0.0;
        if (iExpRaw===0x7ff) return undefined;

        var iExp=(iExpRaw & 0x7FF)-1023;

        var dDouble = ((iSign===1)?-1:1)*Math.pow(2,iExp)*(1.0 + iMantLo*doubleMantExpLo + iMantHi*doubleMantExpHi);
        return dDouble;
    };
    // added
    // Extracts only 4 bytes out of 8, loosing in precision (20 bit mantissa)
    this.getFastDoubleAt = function(iOffset) {
        var iByte5 = this.getByteAt(iOffset + 4),
            iByte6 = this.getByteAt(iOffset + 5),
            iByte7 = this.getByteAt(iOffset + 6),
            iByte8 = this.getByteAt(iOffset + 7);
        var iSign=iByte8 >> 7;
        var iExpRaw=((iByte8 & 0x7F)<< 4) + (iByte7 >> 4);
        var iMant=((((iByte7 & 0x0F) << 8) + iByte6) << 8) + iByte5;

        if (iExpRaw===0) return 0.0;
        if (iExpRaw===0x7ff) return undefined;

        var iExp=(iExpRaw & 0x7FF)-1023;

        var dDouble = ((iSign===1)?-1:1)*Math.pow(2,iExp)*(1.0 + iMant*doubleMantExpFast);
        return dDouble;
    };

    this.getCharAt = function(iOffset) {
        return String.fromCharCode(this.getByteAt(iOffset));
    };
};

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 = jQuery.Deferred();
    $.ajax({
        url: url,
        dataType: 'text',
        cache: false,
        mimeType: 'text/plain; charset=x-user-defined',
        xhr: function() {
            // Save a reference to the native xhr object - we need it later
            // in IE to access the binary data from responseBody
            this._nativeXhr = jQuery.ajaxSettings.xhr();
            return this._nativeXhr;
        },
        complete: function(jqXHR, textStatus) {
            this._nativeXhr = null;
            delete this._nativeXhr;
        },
        success: function(data, textStatus, jqXHR) {
            // In IE we return the responseBody
            if(typeof(this._nativeXhr.responseBody) !== 'undefined') {
                d.resolve(
                    new jarmon.BinaryFile(
                        jarmon.GetIEByteArray_ByteStr(
                            this._nativeXhr.responseBody)));
            } else {
                d.resolve(new jarmon.BinaryFile(data));
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            d.reject(new Error(textStatus + ':' + 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" : "";

    var fmt;
    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
 * @param transformer {Function} A callable which performs a
 *      tranfsformation of the values returned from the RRD file.
 **/
jarmon.RrdQuery = function(rrd, unit, transformer) {
    this.rrd = rrd;
    this.unit = unit;
    if(typeof(transformer) !== 'undefined') {
 	    this.transformer = transformer;
 	} else {
 	    this.transformer = function(v) {return v;};
 	}
};

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(typeof(dsId) === 'undefined' && dsId !== null) {
        dsId = 0;
    }
    var ds = this.rrd.getDS(dsId);

    if(typeof(cfName) === 'undefined' && 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(i=startRowIndex; i<endRowIndex; i++) {
        val = this.transformer(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);
    var 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.
 * @param transformer {Function} A callable which performs a
 *      tranfsformation of the values returned from the RRD file.
 **/
jarmon.RrdQueryRemote = function(url, unit, downloader, transformer) {
    this.url = url;
    this.unit = unit;
    if(typeof(downloader) == 'undefined') {
        this.downloader = jarmon.downloadBinary;
    } else {
        this.downloader = downloader;
    }
    this.transformer = transformer;

    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.
    var self = this;
    if(!this._download) {
        this._download = this.downloader(this.url);
    }

    // Set up a deferred which will call getData on the local RrdQuery object
    // returning a flot compatible data object to the caller.
    var ret = jQuery.Deferred();

    // Add a pair of callbacks to the current download which will callback the
    // result which we setup above.
    this._download.always(
        function(res) {
            if(res instanceof Error) {
                ret.reject(res);
            } else {
                // Upon successful download convert the resulting binary
                // into an RRD file
                var rrd = new RRDFile(res);
                self.lastUpdate = rrd.getLastUpdate();

                var rq = new jarmon.RrdQuery(rrd, self.unit, self.transformer);
                try {
                    ret.resolve(rq[methodName].apply(rq, args));
                } catch(e) {
                    ret.reject(e);
                }
            }
            return res;
        });

    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(typeof(self.options.yaxis.tickDecimals) === 'number') {
            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, 10);
        if(ds.toString() === dsi.toString()) {
            ds = dsi;
        }
        var label = recipe.data[j][2];
        var unit = recipe.data[j][3];
        var transformer = recipe.data[j][4];

        if(typeof(dataDict[rrd]) === 'undefined') {
            dataDict[rrd] = new jarmon.RrdQueryRemote(
                rrd, unit, this.downloader, transformer);
        }
        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.
     **/
    var self = this;
    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 = {
                data: [
                    [this.startTime, 0],
                    [this.endTime, 0]
                ],
                lines: {
                    lineWidth: 0
                }
            };
        }

        results.push(result);
    }

    return jQuery.when.apply(null, results).pipe(
        function() {
            var data = Array.prototype.slice.call(arguments);
            // Clear any previous error messages.
            self.template.find('.error').empty().hide();

            var i, label, disabled = [];
            var 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': '-110px',
                      '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;
        }, null)
        .fail(
            function(failure) {
                self.template.find('.chart').empty().hide();
                self.template.find('.graph-legend').empty().hide();
                self.template.find('.error').text(
                    'error: ' + failure.message);

            })
        .always(
            function(res) {
                self.template.removeClass('loading');
                return res;
            });
};


/**
 * 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;
            var $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);
    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();
};

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).appendTo(this.$tabPanels);

    return $placeholder;
};

jarmon.TabbedInterface.prototype.setup = function() {
    // 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'));
};


jarmon.buildTabbedChartUi = function ($chartTemplate, chartRecipes,
                                      $tabTemplate, tabRecipes,
                                      $controlPanelTemplate) {
    /**
     * Setup chart date range controls and all charts
     **/
    var p = new jarmon.Parallimiter(2);
    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(), 10);
            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(), 10);
            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
    var tzoffsetEl = this.ui.find('[name="tzoffset"]');
    if(tzoffsetEl.is('select')) {
        var label, val;
        for(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(! isNaN(currentDate.getTime()) ) {
                    $(this).data(
                        'dateinput')._initial_val = currentDate.getTime();
                    $(this).data('dateinput').setValue(currentDate);
                    break;
                }
            }
        })
        .bind(
            'onHide',
            {self: this},
            function(e) {
                var self = e.data.self;
                // Called after a calendar date has been chosen by the user.
                // Use the sibling selector that we generated above
                // before opening the calendar
                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()) {
                    // Update the prepared time range select box to
                    // value "custom"
                    self.ui.find('[name="from_standard"]').val('custom');
                    var from = null;
                    var to = null;
                    if($(this).hasClass('from_custom')){
                        from = newDate.getTime();
                    } else {
                        to = newDate.getTime();
                    }
                    self.setTimeRange(from, to);
                    self.update();
            }
        });

    // 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 self = this;
    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) {
            var range = jarmon.timeRangeShortcuts[i][1](now);
            this.setTimeRange(range[0], range[1]);
            break;
        }
    }

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

    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(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 jQuery.when.apply(null, chartsLoading).done(
        function() {
            var chartData = Array.prototype.slice.call(arguments);

            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(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);
        });
};

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(typeof(from) !== 'undefined' && from !== null) {
        this.ui.find('[name="from"]').val(from);
    }
    if(typeof(to) !== 'undefined' && 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 jQuery.Deferred();
    this._callQueue.unshift([d, callable, args]);
    this._nextCall();
    return d;
};

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