window.onload = function() {

  var rectHeight = 30;

  var rectWidth = 80;

  var padding = 15;

  var cellSize = 50;

  var labels = [];

  var builds = [];

  var object = [];

  var aType = []; //Queued

  var bType = []; //In Progres

  var cType = []; // Finished

  $("tr").each(function() {

    labels.push($(this).children().eq(0).text());

    var id = $(this).children().eq(0).text();

    var buildRequestId = $(this).children().eq(1).text();

    var createDate = $(this).children().eq(2).text();

    var devRepo = $(this).children().eq(3).text();

    var ownUUID = $(this).children().eq(4).text();

    var status = $(this).children().eq(9).text();

    var buildVersion = $(this).children().eq(5).text();

    var submitterEmail = $(this).children().eq(6).text();

    var correlations = $(this).children().eq(7).text();

    var reviewerEmail = $(this).children().eq(8).text();

    //labels.push($("td",this.cells[0]).text());

    object.push(new Event(id, buildRequestId ,createDate , devRepo, ownUUID,               status, buildVersion, submitterEmail, correlations, reviewerEmail));

    switch(status)

    {

      case "NEW":

        aType.push(object.length -1); 

        break;

      case "PROCESSING":

        bType.push(object.length -1);

        break;

      case "REBASING":

        bType.push(object.length -1);

        break;

      case "COMPLETED":

        cType.push(object.length -1);

        break;

      case "REJECTED":

        cType.push(object.length -1);

        break;

    }

  });

  $("table").hide();

  var paper = new Raphael(document.getElementById('holder'), 500, object.length * 100);

  drawLine(paper, aType.length, bType.length, cType.length, cellSize, padding);

  var mat = paper.rect(0, 0, paper.width, paper.height).attr({fill: "#F00", opacity: 0.1});

  var rectangles = [];

  mat.mouseover(function () {

    for (var c = 0; c < rectangles.length; c += 1) {

      if (rectangles[c].next.attr("font-size")) {

        rectangles[c].animate({                  

              transform : "s1"

            }, 1000, "elastic");

        rectangles[c].prev.animate({opacity: 0}, 500);

        rectangles[c].next.attr({"font-size" : 15});                  

      }

    }

  });

  process = function(i,label){ 

    txt = paper.text(390,((i+1)* cellSize) - 10,label.devRepo)

      .attr({ stroke: "none", opacity: 0, "font-size": 20});

    var a =paper.rect(200, ((i+1)* cellSize) - 25, rectWidth, rectHeight)

        .hover(function(){  

          this.animate({                  

            transform : "s2"

          }, 1000, "elastic");

          this.prev.animate({opacity: 1}, 500, "elastic");

          this.next.attr({"font-size" : 30});

        });

    rectangles.push(a);

    name = paper.text(240, ((i+1)* cellSize) - 15, label.id)

      .attr({"font-size" : 15});              

    if(i<aType.length){

      a.attr({                  

        fill : "#A50000"                        

      });

    }

    else if(i<aType.length + bType.length) {

      a.attr({                  

        fill : "#FED449"                                  

      });                

    }

    else{

      a.attr({ 

        fill : "#E0F0B3"

      });     

    }   

  };

  var place =0;     

  for(var i = 0, ii = aType.length ; i<ii; i++) {

    process(place, object[aType[i]]);

    place++;

  }

  for(var q = 0, qq = bType.length; q<qq; q++) {

    process(place , object[bType[q]]);

    place++;

  }

  for(var r = 0, rr = cType.length ; r<rr; r++) {

    process(place  , object[cType[r]]);

    place++;

  }

};

​

function process(){

}

​

function Event (id, buildRequestId, createDate, devRepo, ownUUID, status, buildVersion, submitterEmail, correlations, reviewerEmail) {

  this.id = id;

  this.buildRequestId = buildRequestId;

  this.createDate = createDate;

  this.devRepo = devRepo;

  this.ownUUID = ownUUID;

  this.status = status;

  this.buildVersion = buildVersion;

  this.submitterEmail = submitterEmail;

  this.correlations = correlations;

  this.reviewerEmail = reviewerEmail;

}

​

function drawLine(paper, aType, bType, cType, cellSize, padding){

  if(aType !== 0){

    //draw line 

    paper.path("M 25 "+ ((aType * 50)+ padding ) + " 325 "+((aType * 50)+ padding ))

      .attr({

        stroke:'#383838'

      });

    //draw text

    paper.text(70, padding, "Queued")

      .attr({

        "font-size" : 20,

        fill : "#0074C7"

      });

  }

  if(bType !== 0){

    //draw line

    paper.path("M 25 "+ (((aType+ bType) * 50)+ padding ) + " 325 "+(((aType+ bType) * 50)+ padding ))

      .attr({

        stroke:'#383838'

      });

    //draw text

    paper.text(80, ((aType * 50)+ 2* padding ), "In Progres")

      .attr({

        "font-size" : 20,

        fill : "#0074C7"

      });

  }

  if(cType !== 0){

    paper.path("M 25 "+ (((aType+ bType + cType) * 50)+ padding ) + " 325 "+ (((aType+ bType + cType) * 50)+ padding ))

      .attr({

        stroke:'#383838'

      });

    paper.text(70, (((aType+ bType) * 50)+ 2* padding ), "Finished")

      .attr({

        "font-size" : 20,

        fill : "#0074C7"

      });

  }

}

​

​

​

​