/* Zoom palette */


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

  var zoompalette = {};

  /* We setup the palette with zoom icons */
  zoompalette.zoomPalette = function(invoker, primaryText) {
    palette.Palette.call(this, invoker, primaryText);
    this.getPalette().id = "zoompalette";
    this.zoomEvent = document.createEvent('CustomEvent');
    this.zoomEvent.initCustomEvent('zoom', true, true, {
	  'zoom': 3
    });
    this.popEvent = document.createEvent('CustomEvent');
    this.popEvent.initCustomEvent('pop', true, true, {});
    this.template = '{{#rows}}' + '{{#.}}' + '<button class="toolbutton zoombuttons" style="height:55px; width:55px; background-image: url({{ icon }}); "></button>' + '</td>' + '{{/.}}' + '{{/rows}}';
    var rows = [
      [{
        icon: 'icons/zoom-out.svg'
      }, {
        icon: 'icons/zoom-in.svg'
      }, {
        icon: 'icons/zoom-to-width.svg'
      }, {
        icon: 'icons/zoom-original.svg'
      }]
    ];
    var zoomElem = document.createElement('div');
    zoomElem.innerHTML = mustache.render(this.template, {
      rows: rows
    });
    this.setContent([zoomElem]);
    var buttons = zoomElem.querySelectorAll('button');
    var that = this;
    invoker.addEventListener('click', function(e) {
		that.getPalette().dispatchEvent(that.popEvent);
	});

    function popDownOnButtonClick(event) {
      that.popDown();
    }
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function(e) {
	    for (var j = 0 ; j < buttons.length ; j++)
			if (this == buttons[j]) break;
        that.zoomEvent.detail.zoom = j;
        that.getPalette().dispatchEvent(that.zoomEvent);
		that.popDown();
	  });
    }
    popDownOnButtonClick({
      target: buttons[0]
    });
  };
	
  var addEventListener = function(type, listener, useCapture) {
    return this.getPalette().addEventListener(type, listener, useCapture);
  };

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