script.js

var FourColors = function(inactive, inactiveHover, active, activeHover) {
    this.inactive = inactive;
    this.inactiveHover = inactiveHover;
    this.active = active ;
    this.activeHover = activeHover;
}

var Category = function(id, name, icon, colors) {
    this.id = id;
    this.name = name;
    this.icon = icon;
    this.colors = colors;
}

var SubCategories = function(id, categoryId, name) {
    this.id = id;
    this.categoryId = categoryId;
    this.name = name;
}

var Search = function(keyWord) {
    this.keyWord = keyWord;
}


// KnockoutModels
function WidgetModel() {
    var self = this;

    self.userSelection = ko.observableArray([]);

    self.categories = [
        new Category( 1, "Alimentation", "A" , new FourColors("#666666", "#BAD9CD", "#1A805A", "#156648") ),
        new Category( 2, "Animaux de compagnie", "B" , new FourColors("#666666", "#FBC3D2", "#F2386B", "#D9325E") ),
        new Category( 3, "Auto moto", "C" , new FourColors("#666666", "#CDE0E5", "#5899A9", "#377D8E") ),
        new Category( 5, "Culture et loisirs", "E" , new FourColors("#666666", "#D1D1D1", "#666666", "#5A5252") ),
        new Category( 8, "Emploi et formation", "G" , new FourColors("#666666", "#D5CAE4", "#734FA5", "#603898") ),
        new Category( 9, "Enfants", "F" , new FourColors("#666666", "#BBEBE1", "#1FBD9A", "#00AC86") ),
        new Category( 10, "Entretien de la maison", "O" , new FourColors("#666666", "#FFD7BA", "#FF7C1C", "#EC6401") ),
        new Category( 11, "Finance", "H" , new FourColors("#666666", "#BBEBE1", "#1FBD9A", "#00AC86") ),
        new Category( 12, "Hifi", "I" , new FourColors("#666666", "#FCD2CF", "#F46B5F", "#E05145") ),
        new Category( 13, "Hygiène - beauté", "D" , new FourColors("#666666", "#FBD3E5", "#F16CA9", "#DE4D90") ),
        new Category( 14, "Immobilier", "J" , new FourColors("#666666", "#D5CAE4", "#734FA5", "#603898") ),
        new Category( 15, "Informatique", "K" , new FourColors("#666666", "#C3DFF4", "#3796D9", "#197DC3") ),
        new Category( 16, "Jardinage et bricolage", "L" , new FourColors("#666666", "#DAECC4", "#85C13C", "#6CA922") ),
        new Category( 17, "Jeux de hasard", "M" , new FourColors("#666666", "#FFD7BA", "#FF7C1C", "#EC6401") ),
        new Category( 18, "Luxe", "N" , new FourColors("#666666", "#D1D1D1", "#666666", "#5A5252") ),
        new Category( 19, "Mode et accessoires ", "P" , new FourColors("#666666", "#FBC3D2", "#F2386B", "#D9325E") ),
        new Category( 20, "Photo, caméscope", "Q" , new FourColors("#666666", "#E0C6D7", "#99417B", "#892E6A") ),
        new Category( 21, "Produit  Bio et éco-citoyen", "R" , new FourColors("#666666", "#BAD9CD", "#1A805A", "#156648") ),
        new Category( 22, "Santé", "S" , new FourColors("#666666", "#E0C6D7", "#99417B", "#892E6A") ),
        new Category( 23, "Sport", "T" , new FourColors("#666666", "#DAECC4", "#85C13C", "#6CA922") ),
        new Category( 24, "Téléphonie", "U" , new FourColors("#666666", "#FCD2CF", "#F46B5F", "#E05145") ),
        new Category( 25, "Univers de la maison", "O", new FourColors("#666666", "#FFD7BA", "#FF7C1C", "#EC6401") ),
        new Category( 26, "Voyage", "V", new FourColors("#666666", "#C3DFF4", "#3796D9", "#197DC3") )

        //col_off_hover: "#", col_on: "#", col_on_hover: "#",   { id: 4, name: "Business", ico: "" },
        // { col_off_hover: "#", col_on: "#", col_on_hover: "#",  id: 6, name: "Distribution", ico: "", items: []},
        // { col_off_hover: "#", col_on: "#", col_on_hover: "#",  id: 7, name: "Electroménager", ico: "", items: []},
    ];

    self.subCategories = [
        new SubCategories(1, 1, "Recettes et émissions de cuisine"),
        new SubCategories(2, 1, "Café, thé, chocolat à boire"),
        new SubCategories(3, 1, "Petit déjeuner (biscotte, céréales…)"),
        new SubCategories(4, 1, "Produits laitiers"),
        new SubCategories(5, 1, "Gâteaux salés et sucrés"),
        new SubCategories(6, 1, "Fruits et Légumes"),
        new SubCategories(7, 1, "Produits surgelés"),
        new SubCategories(8, 1, "Viandes, volailles, charcuteries"),
        new SubCategories(9, 1, "Conserves"),
        new SubCategories(10, 1, "Produits allégés"),
        new SubCategories(11, 1, "Cidres, vin et champagnes"),
        new SubCategories(12, 1, "Eaux"),

        // Animaux de compagnie
        new SubCategories(21, 2, "Chien"),
        new SubCategories(22, 2, "Chat"),
        new SubCategories(23, 2, "Poission"),
        new SubCategories(24, 2, "Oiseau"),
        new SubCategories(25, 2, "Rongeur"),
        new SubCategories(26, 2, "NAC"),

        // Auto moto
        new SubCategories(31, 2, "Voiture neuve"),
        new SubCategories(32, 2, "Voiture d'occasion"),
        new SubCategories(33, 2, "Moto neuve"),
        new SubCategories(34, 2, "Moto d'occasion")
    ];

    self.selectedCategory = ko.observable(null);
    self.selectedSubCategory = ko.observable(self.subCategories);

    self.searches = ko.observableArray([
        new Search("Santé"),
        new Search("Amour"),
        new Search("Bonheur")
    ]);

    self.addSearch = function(event, data) {
        var newSearch = data.currentTarget.value;
        console.log("addSearch" + newSearch);
        self.searches.push(new Search(newSearch));
    };

    self.editCategory = function(event, data){
        /*console.log("editCategory" + event + " " + data);
        selectedCategory = categorie;
        var str ='';
        for (var prop in categorie) str += prop + " => " + this[prop] + "\n";
        console.log(str);*/
        self.selectedCategory = _.findWhere(self.categories, { id: event.id});
        var toto = '';
    };

    self.setHoverColor = function() { 
        console.log("over");
        //alert(str);
    };
    self.setNormalColor = function() {
    };
};

ko.applyBindings(new WidgetModel());