/*
 * Copyright 2012 LinkedIn Corp.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

$.namespace('azkaban');

azkaban.TimeGraphView = Backbone.View.extend({
	events: {
	},
	
	initialize: function(settings) {
		this.model.bind('render', this.render, this);
		this.model.bind('change:page', this.render, this);
    this.modelField = settings.modelField;
    this.element = settings.el;
    this.render();
	},

	render: function(self) {
		var series = this.model.get(this.modelField);
    if (series == null) {
      return;
    }

    // Array of points to be passed to Morris.
    var data = [];
    
    // Map of y value to index for faster look-up in the lineColorsCallback to
    // get the status for each point.
    var indexMap = {};
	  for (var i = 0; i < series.length; ++i) {
      if (series[i].startTime == null || series[i].endTime == null) {
        console.log("Each element in series must have startTime and endTime");
        return;
      }
      var startTime = series[i].startTime;
      var endTime = series[i].endTime;
      if (endTime == -1) {
        endTime = new Date().getTime();
      }
      var duration = endTime - startTime;
      data.push({ 
        time: endTime,
        duration: duration
      });

      indexMap[endTime.toString()] = i;
    }

    var lineColorsCallback = function(row, sidx, type) {
      if (type != 'point') {
        return "#000000";
      }
      var i = indexMap[row.x.toString()];
      var status = series[i].status;
      if (status == 'SKIPPED') {
        return '#aaa';
      }
      else if (status == 'SUCCEEDED') {
        return '#4e911e';
      }
      else if (status == 'RUNNING') {
        return '#009fc9';
      }
      else if (status == 'PAUSED') {
        return '#c92123';
      }
      else if (status == 'FAILED' || 
          status == 'FAILED_FINISHING' || 
          status == 'KILLED') {
        return '#cc0000';
      }
      else {
        return '#ccc';
      }
    };

    Morris.Line({
      element: this.element,
      data: data,
      xkey: 'time',
      ykeys: ['duration'],
      labels: ['Duration'],
      lineColors: lineColorsCallback
    });
	}
});

@@ -2469,16 +2469,548 @@
     %7D;%0A%0A
+    var yLabelFormatCallback = function(y) %7B%0A      var seconds = y / 1000.0;%0A      return seconds.toString() + %22 s%22;%0A    %7D;%0A%0A    var hoverCallback = function(index, options, content) %7B%0A      // Note: series contains the data points in descending order and index%0A      // is the index into Morris's internal array of data sorted in ascending%0A      // x order.%0A      var status = series%5Boptions.data.length - index - 1%5D.status;%0A      return content + %0A          '%3Cdiv class=%22morris-hover-point%22%3EStatus: ' + status + '%3C/div%3E';%0A    %7D;%0A%0A
     Morr
@@ -3177,16 +3177,94 @@
 Callback
+,%0A      yLabelFormat: yLabelFormatCallback,%0A      hoverCallback: hoverCallback
 %0A    %7D);

Add status to time graph hover. Label y-axis in units of seconds, but should still scale similar to d3.time.scale.