Color Bar

by Nick Karnik

HTML

<div id=chart class=chart>
    <svg id=can class=can></svg>
</div>

CSS

.chart {
    width: 100%;
    height: 100px;
    background: red;
    cursor: pointer;
    border: 1px solid;
}
.can {
    background: white;
}
.lineBlock {
    cursor: col-resize;
    stroke-width: 5px;
}
.rectBlock {
}

JavaScript

var svgNS = "http://www.w3.org/2000/svg";
var selected = false;
var selectedLine = null;
var t = null;
var lineUnder = null;
var lines = [];

var colors = ['blue', 'green', 'yellow', 'orange', 'red', 'maroon', 'purple', 'pink', 'black', 'brown', 'magenta', 'cyan'];

function sortedInsert(line) {
    lines.push(line);
    lines.sort(function (a, b) {
        return a.x1.baseVal.value > b.x1.baseVal.value;
    });
}

function refresh() {
    can.innerHTML = "";

    var x = 0;

    for (i = 0; i < lines.length; i++) {
        if (i > 0) {
            x = lines[i - 1].x1.baseVal.value;
            width = lines[i].x2.baseVal.value - lines[i - 1].x2.baseVal.value;
            height = can.getBoundingClientRect().height;
        } else {
            x = 0;
            width = lines[i].x2.baseVal.value;
            height = can.getBoundingClientRect().height;
        }

        r = createRect(x, 0, width, height, colors[i % colors.length]);
        can.appendChild(r);

                    if (i == lines.length - 1) {
            x = lines[i].x2.baseVal.value;
            width = can.getBoundingClientRect().width;
            height = can.getBoundingClientRect().height;
        r = createRect(x, 0, width, height, colors[i+1 % colors.length]);
        can.appendChild(r);
                
            }

        //    lines[i].style.stroke = 'black';
        //  can.appendChild(lines[i]);
    }

    for (i = 0; i < lines.length; i++) {
        lines[i].style.stroke = 'black';
        can.appendChild(lines[i]);
    }

}
var rect = [];

function createRect(x, y, width, height, fill) {
    var r = document.createElementNS(svgNS, 'rect');

    r.setAttributeNS(null, 'x', x);
    r.setAttributeNS(null, 'y', y);
    r.setAttributeNS(null, 'width', width);
    r.setAttributeNS(null, 'height', height);
    r.setAttributeNS(null, 'style', 'fill:' + fill);
    r.classList.add('rectBlock');

    return r;
}

can.addEventListener('mousemove', function (mm) {
    if (!selected && (t ==...