var ColourPicker = {
    colourSchemes: [
                       {lightColour: "#beaa81", darkColour: "#aa7400"},
                       {lightColour: "#a59ca5", darkColour: "#a59ca5"},
                       {lightColour: "#cfa46d", darkColour: "#cfa46d"},
                       {lightColour: "#9ab4bd", darkColour: "#9ab4bd"},
                       {lightColour: "#969f60", darkColour: "#969f60"},
                       {lightColour: "#b77878", darkColour: "#b77878"},
                       {lightColour: "#b7ba6a", darkColour: "#b7ba6a"},
                       {lightColour: "#8c92b1", darkColour: "#8c92b1"},
                       {lightColour: "#ffc24c", darkColour: "#ffc24c"},
                       {lightColour: "#b8d4ca", darkColour: "#b8d4ca"}
                   ],
    colourPicker: null,
    enable: function() {
        if (this.colourPicker) return;
        this.colourPicker = document.createElement("div");
        this.colourPicker.id = "colourPicker";
        var link = document.getElementById("colour");
        var cell;
        var scheme;
        for (var i = 0; i < this.colourSchemes.length; i++) {
            scheme = this.colourSchemes[i];
            cell = document.createElement("div");
            cell.style.backgroundColor = scheme.lightColour;
            cell.title = scheme.name;
            this.colourPicker.appendChild(cell);
            this.changeColourScheme(cell, i);
        }
        var navigation = document.getElementById("navigation");
        navigation.insertBefore(this.colourPicker, navigation.firstChild);
    },
    changeColourScheme: function(element, cssNumber) {
        addHandler(element, "click", function() {
            document.getElementById("colour").href = "templates/default/style/colour" + cssNumber + ".css";
        });
    } 
}