define(["sugar-web/graphics/palette"], function (palette) {

    'use strict';

    var templatepalette = {};

    templatepalette.TemplatePalette = function (invoker, primaryText, templates) {
        palette.Palette.call(this, invoker, primaryText);

        this.sharedEvent = document.createEvent("CustomEvent");
        this.sharedEvent.initCustomEvent('template', true, true, {});

        this.buttons = [];

        var div = document.createElement('div');
        for (var i = 0; i < templates.length; i++) {
            var template = templates[i];
            var button = document.createElement("div");
            button.value = template;
            button.onmouseover = function() {
                this.style.background = "#ccc";
            };

            button.onmouseout = function() {
                this.style.background = "#000";
            };
            button.style.borderRadius = "0";
            button.style.width = "100%";
            if (i != 0) {
                button.style.marginTop = "3px";
            }
            button.innerHTML = "<img style='vertical-align: middle; margin-right:3px;' src='icons/" + template.icon + "'>" + template.name;
            div.appendChild(button);
            this.buttons.push(button);
        }
        this.setContent([div]);

        // Pop-down the palette when a item in the menu is clicked.

        var that = this;

        that.getPalette().firstChild.style.backgroundColor = "transparent";
        that.getPalette().firstChild.style.backgroundImage = "";

        function popDownOnButtonClick(event) {
            console.log(event);
            that.popDown();
        }

        for (var i = 0; i < this.buttons.length; i++) {
            var t = this;
            var button = t.buttons[i];
            var template = templates[i];

            (function (button, template) {
                button.addEventListener("click", function () {
                    that.sharedEvent.detail.value = template;
                    that.getPalette().dispatchEvent(that.sharedEvent);
                    that.popDown();
                });
            })(button, template);
            button.addEventListener('template', popDownOnButtonClick);
        }
    };

    var addEventListener = function (type, listener, useCapture) {
        return this.getPalette().addEventListener(type, listener, useCapture);
    };

    templatepalette.TemplatePalette.prototype =
        Object.create(palette.Palette.prototype, {
            addEventListener: {
                value: addEventListener,
                enumerable: true,
                configurable: true,
                writable: true
            }
        });

    return templatepalette;
});