lel

var colorList = [];

function initialize() {
    var sliders = document.getElementsByClassName("slider");
    var selectButton = document.getElementById("selectButton");
    var i=0;
    for (i = 0; i < sliders.length; i++) {
        sliders[i].addEventListener("change", update);
    }
    selectButton.addEventListener("click", selectClick);
    update();
}

function update() {
    var red=document.getElementById("sldRed").value;
    var green=document.getElementById("sldGreen").value;
    var blue=document.getElementById("sldBlue").value;
    document.getElementById("lblRed").innerHTML=red;
    document.getElementById("lblGreen").innerHTML=green;
    document.getElementById("lblBlue").innerHTML=blue;
    var swatch=document.getElementById("swatch");
    swatch.style.background="rgb("+red+","+green+","+blue+")";
}

function selectClick(){
    //Get current Color
    var color = getColor();

    //Add Color to the list
    addColor(color);

    //Write the list to UI
    showColors();
}

function getColor()
{
    var red=document.getElementById("sldRed").value;
    var green=document.getElementById("sldGreen").value;
    var blue=document.getElementById("sldBlue").value;
    return "rgb("+red+","+green+","+blue+")";
}

function addColor(color){
    colorList.push(color);
}

function removeColor(index){
    colorList.splice(index, 1);
}

function showColors(){
    //get the block for the list
    var colorListBlock=document.getElementById("colorListBlock");

    //Remove the current items
    //colorListBlock.innerHTML = "";
    //Dit is veel sneller:
    while(colorListBlock.firstChild)
    {
        colorListBlock.removeChild(colorListBlock.firstChild);
    }

    var i = 0;
    //Add them to the UI
    for(i = 0; i<colorList.length; i++)
    {
        colorListBlock.appendChild(createColorItem(i));
    }
}

function createColorItem(index)
{
    var color = colorList[index];
    var parentDiv = createParentDiv();
    var colorDiv = createColorDiv(color);
    var textDiv = createTextDiv(color);
    var deleteButton = createDeleteButton(index);

    parentDiv.appendChild(colorDiv);
    parentDiv.appendChild(textDiv);
    textDiv.appendChild(deleteButton);

    return parentDiv
}

function createParentDiv(){
    var parentDiv = document.createElement("div");
    parentDiv.style.clear = "both";
    return parentDiv;
}

function createColorDiv(color){
    var colorDiv = document.createElement("div");
    colorDiv.style.width = "50px";
    colorDiv.style.height = "50px";
    colorDiv.style.margin = "5px";
    colorDiv.style.border = "solid 1px #000000";
    colorDiv.style.cssFloat = "left";
    colorDiv.style.backgroundColor = color;
    return colorDiv;
}

function createTextDiv(color)
{
    var textDiv = document.createElement("div");
    textDiv.innerHTML = color;
    textDiv.style.cssFloat = "left";
    return textDiv;
}

function createDeleteButton(index){
    var deleteButton = document.createElement("input");
    deleteButton.type = "button";
    deleteButton.value = "Delete Color";
    deleteButton.id = "deleteButton" + index;
    deleteButton.addEventListener("click", deleteColorItem);
    return deleteButton;
}

function deleteColorItem(e){
    //Get the event Source Element
    var button = e.srcElement;
    //Get the color index from the button Id
    var indexText = button.id.substring(12, button.id.length)
    var index = parseInt(indexText);

    //Remove color from index
    removeColor(index);

    showColors();
}

window.addEventListener("load", initialize, false);