timeline sorter

by stofke

HTML

<div class="hours hours1 orange">A</div>
<div class="hours hours2 yellow">B</div>
<div class="hours hours3 blue">C</div>
<div class="hours hours4 green">D</div>
<div class="hours hours5 red">E</div>

<button class="collapse">collapse</button>
<button class="overlap1">sort</button>
<button class="reset">reset</button>

CSS

div.blue {
    background-color: #a4dcdf;
}

div.orange {
    background-color: #fd9226;
}

div.green {
    background-color: #88b37e;
}

div.yellow {
    background-color: #d8d03f;
}

div.red {
    background-color: #c16558;
}
div.hours1{
  top: 0px;
  left: 10px;
  width: 100px;//(110-10)
}
div.hours2{
  top: 30px;
  left: 80px;
  width: 50px;
}
div.hours3{
  top: 60px;
  left: 120px;
  width: 50px;
}

div.hours4{
  top: 90px;
  left: 5px;
  width: 70px;
}

div.hours5{
  top: 120px;
  left: 110px;
  width: 30px;
}
div.hours {
  position: absolute;
  height:20px;
  color: white;
  text-align:center;
  border:white;
  -webkit-box-shadow: 3px 3px 6px 2px rgba(00, 00, 00, .2);
  box-shadow: 3px 3px 6px 2px rgba(00, 00, 00, .2);
  font: bold 18px Arial, Helvetica, Geneva, sans-serif;
  line-height:20px;     
}

button{
    position:static;
    margin-top:200px;
}
.collapse,
.overlap1,
.overlap2,
.overlap3,
reset{
    float:left;
}

JavaScript

//first column is initial row, second number startposition and last the endposition
data1 = [
    [1, 10, 110],
    [2, 80, 130],
    [3, 120, 170],
    [4, 5, 70],
    [5, 110, 140]
    ];

//console.log("original data1: ", data1);
//add a column to keep track of the row, to start set it to  row 1
data1 = $.each(data1, function(index, value) {
    value[3] = 0;
});

//console.log("original data1 with added column: ", data1);
//make a new Array to store the elements in with their new row number
data2 = [];


var counter = 0;
$.each(data1, function(index, value) {

    data1 = jQuery.map(data1, function(value, index) {

        counter++;

        if (value != data1[0]) {

            console.log("Comparing element " + counter + " from data1: [" + value + "] with " + data1[0]);

            if (value[2] >= data1[0][1] && value[1] <= data1[0][2]) {
                console.log("Element " + counter + " from data1: [" + value + "] overlaps with " + data1[0] + " incrementing row counter with 1");
                value[3]++;

            } else {
                console.log("Element " + counter + " from data1: [" + value + "] does not overlap with " + data1[0] + " move to data2 array and remove from data1");
                data2.push(value);
                console.log("Added [" + value + "] to data2: ", data2);
                return null; //delete from array
            }
        } else {
            data2.push(value);
            console.log("Added [" + value + "] to data2: ", data2);
            return null; //delete from array
        }
        return [value];
    });

});

function sorter(data_A, data_B) {
    return (data_A[0] - data_B[0]);
}

data2 = data2.sort(sorter);

console.log(data2);

$(".collapse").click(function() {
    $.each(data2, function(index, value) {
        $("div.hours" + (index + 1)).animate({
            "top": 0
        }, "slow");
    });

});

$(".overlap1").click(function() {
    $.each(data2, function(index, value) {
       ...