text: var Vanity = {}
  Vanity.tooltip = function(event, pos, item) {
    if (item) {
      if (this.previousPoint != item.datapoint) {
        this.previousPoint = item.datapoint;
        $("#tooltip").remove();
        var y = item.datapoint[1].toFixed(2);
        var dt = new Date(parseInt(item.datapoint[0], 10));
        $('<div id="tooltip">' + dt.getUTCFullYear() + '-' + (dt.getUTCMonth() + 1) + '-' + dt.getUTCDate() + "<br>" + y + '</div>').css( {
          position: 'absolute', display: 'none',
          top: item.pageY + 5, left: item.pageX + 5,
          padding: '2px', border: '1px solid #ff8', 'background-color': '#ffe', opacity: 0.9
        }).appendTo("body").fadeIn(200);
      }
    } else {
      $("#tooltip").remove();
      this.previousPoint = null;            
    }
  }
  
  Vanity.metric = function(id) {      
    var metric = {};
    metric.chart = $("#metric_" + id + " .chart");
    metric.chart.height(metric.chart.width() / 7);
    metric.markings = [];
    metric.options = {
      xaxis:  { mode: "time", minTickSize: [7, "day"] },
      yaxis:  { ticks: [0, 100], autoscaleMargin: true },
      series: { lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: ["#fff", "#C6D2DA"] } },
                points: { show: false, radius: 1 }, shadowSize: 0 },
      colors: ["#0077CC"],
      legend: { position: 'sw', container: "#metric_" + id +" .legend", backgroundOpacity: 0.5 },
      grid:   { markings: metric.markings, borderWidth: 1, borderColor: '#eee', hoverable: true, aboveData: true } };
  
    metric.plot = function(lines) {
      $.each(lines, function(i, line) {
        $.each(line.data, function(i, pair) { pair[0] = Date.parse(pair[0]) })
      });
      var plot = $.plot(metric.chart, lines, metric.options);
      metric.chart.bind("plothover", Vanity.tooltip);
      metric.chart.data('plot', plot);
    }
    return metric;
  }
  
  $(function() {
    var checkboxes = $("#milestones input:checkbox");
    checkboxes.bind("change", function() {
      var markings = [];
      checkboxes.filter(":checked").each(function(i, checkbox) {
        var start = Date.parse($(this).attr("data-start"));
        var end = Date.parse($(this).attr("data-end"));
        var title = $(this).parent().text();
        markings.push({color: "#c66", xaxis: { from: start - 20000000, to: start }, label: title});
        if (end > start)
          markings.push({color: "#c99", xaxis: { from: end, to: end + 20000000 }});
      });
      $(".metric .marking.label").remove();
      $(".metric .chart").each(function() {
        var chart = $(this);
        var plot = chart.data('plot');
        plot.getOptions().grid.markings = markings;
        plot.draw();
        $.each(markings, function(i, mark) {
          if (mark.xaxis && mark.xaxis.from && mark.label) {
            var o = plot.pointOffset({x:mark.xaxis.from});
            $('<div class="marking label"></div>').css({left:o.left+4}).text(mark.label).appendTo(chart);
          }
        });
      });
    });
  
    $(".experiment.ab_test a.button.chooses").live("click", function() {
      var link = $(this);
      $.ajax({
        data: 'authenticity_token=' + encodeURIComponent(document.auth_token),
        success: function(request){ $('#experiment_' + link.attr("data-id")).html(request) },
        url: link.attr("data-url"), type: 'post'
      });
      return false;
    });
  });
  