Quintus.Editor = function(Q) {
  
    Q.register('editor',{
      added: function() {
        var stage = this.entity;
  
        stage.pause();
        $("#quintus-editor").remove();
        this.controls = $("<div id='quintus-editor'>")
            .appendTo(Q.wrapper)
            .css({position:"absolute",top:0, zIndex: 100});
  
        _.bindAll(this,'move','paint','erase','select','tile','play','touch','drag','release','out','in','selectTile','save');
  
        this.buttons = {
          move: this.button("move",this.move),
          paint: this.button("paint",this.paint),
          erase: this.button("erase",this.erase),
          select: this.button("tile",this.tile),
          play: this.button("play",this.play),
          out: this.button("-",this.out),
          in: this.button("+",this.in),
          save: this.button("save",this.save) 
        };
  
        this.select('move');
  
        this.activeTile = 1;
  
        Q.el.on('touchstart mousedown',this.touch);
        Q.el.on('touchmove mousemove',this.drag);
        Q.el.on('touchend mouseup',this.release);
      },
  
      select: function(button) {
        if(this.selected) {
          this.buttons[this.selected].css('backgroundColor','#DDD');
        }
        this.selected = button;
  
        if(this.buttons[this.selected]) {
          this.buttons[this.selected].css('backgroundColor','#FFF');
        }
  
      },
  
      button: function(text,callback) {
  
        var elem = $("<div>")
                     .text(text)
                     .css({float:'left',
                           margin: "10px 5px",
                           padding:"15px 5px",
                           backgroundColor:'#DDD',
                           width:35,
                           textAlign:'center',
                           fontSize: "14px",
                           cursor:'pointer',
                           fontFamily: 'Arial',
                           fontWeight:'bold',
                           borderRadius: "5px",
                         color:"black"})
                      .appendTo(this.controls);
  
                           
        elem.on('mousedown touchstart',callback);
        return elem;
      },
  
      play: function(e) {
        if(this.playing) {
          this.buttons['play'].text('Play');
          Q.input.disableTouchControls();
          this.entity.trigger('reset');
          this.select();
        } else {
          Q.el.off('touchstart mousedown',this.touch);
          Q.el.off('touchmove mousemove',this.drag);
          Q.el.off('touchend mouseup',this.release);
          this.select('play');
          this.buttons['play'].text('reset');
          this.playing = true;
          this.entity.unpause();
          Q.controls();
        }
        e.preventDefault();
      },
  
      move: function() {
        this.select('move');
      },
  
      paint: function() {
        this.select('paint');
      },
  
      erase: function() {
        this.select('erase');
      },
  
      tile: function() {
        if(!this.tiles) this.setupTiles();
        $(this.tiles).show();
      },
  
      setupTiles: function() {
        var sheet = this.entity.collision.sheet();
  
        this.tiles = document.createElement("canvas");
        this.tiles.width = Q.el.width();
        this.tiles.height = Q.el.height();
  
        var x = 0, y = 0, ctx = this.tiles.getContext('2d');
  
        for(var i=0;i<sheet.frames;i++) {
          sheet.draw(ctx, x, y, i);
          x += sheet.tilew;
          if(x >= this.tiles.width) {
            x = 0;
            y += sheet.tileh;
          }
        }
  
        $(this.tiles)
          .prependTo(Q.wrapper)
          .css({position:'absolute',
                top:60, 
                zIndex: 200,
                backgroundColor:'white',
                width: Q.el.width(),
                height: Q.el.height()
              })
          .on('touchstart mousedown',this.selectTile);
      },
  
      selectTile: function(e) {
        var touch = e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0] : e,
            canvasPos = $(this.tiles).position(),
            canvasX = (touch.pageX - canvasPos.left),
            canvasY = (touch.pageY - canvasPos.top),
            tileLayer = this.entity.collision,
            sheet = tileLayer.sheet(),
            tileX = Math.floor(canvasX / sheet.tilew),
            tileY = Math.floor(canvasY / sheet.tileh),
            frame = tileX + tileY * Math.floor(this.tiles.width / sheet.tilew);
  
         $(this.tiles).hide();
         if(frame <= sheet.frames) {
           this.activeTile = frame;
         }
         e.preventDefault();
  
      },
  
      out: function() {
        this.entity.viewport.scale /= 1.5;
        this.entity.viewport.recenter();
      },
  
      in: function() {
        this.entity.viewport.scale *= 1.5;
        this.entity.viewport.recenter();
      },
  
      touch: function(e) {
        var touch = e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0] : e,
            stage = this.entity;
  
        this.start = { pageX: touch.pageX, pageY: touch.pageY };
        this.viewportX = stage.viewport.centerX;
        this.viewportY = stage.viewport.centerY;
  
        this.tool(touch);
        e.preventDefault();
      },
  
      drag: function(e) {
        var touch = e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0] : e,
            stage = this.entity;
  
        if(this.start) {
          this.tool(touch);
        }
        e.preventDefault();
  
      },
  
      release: function(e) {
        this.start= null;
      }, 
  
      tool: function(touch) {
        var stage = this.entity,
            viewport = stage.viewport;
  
        switch(this.selected) {
          case 'move':
            stage.centerOn(this.viewportX + (this.start.pageX - touch.pageX) / viewport.scale,
                           this.viewportY + (this.start.pageY - touch.pageY) / viewport.scale);
            break;
          case 'paint':
            var tile = this.tilePos(touch.pageX, touch.pageY);
            stage.collision.setTile(tile.x,tile.y,this.activeTile);
            break;
          case 'erase':
            var tile = this.tilePos(touch.pageX, touch.pageY);
            stage.collision.setTile(tile.x,tile.y,0);
            break;
        }
  
      },
  
      tilePos: function(x,y) {
        var canvasPos = $(Q.el).position(),
            canvasX = (x - canvasPos.left) / Q.el.width() * Q.width,
            canvasY = (y - canvasPos.top) / Q.el.height() * Q.height,
            viewport = this.entity.viewport,
            tileLayer = this.entity.collision,
            tileX = Math.floor((canvasX / viewport.scale + viewport.x - tileLayer.p.x) / tileLayer.p.tileW),
            tileY = Math.floor((canvasY / viewport.scale + viewport.y - tileLayer.p.y) / tileLayer.p.tileH);
  
        return { x: tileX, y: tileY };
      },
  
      setFile: function(levelFile) {
        this.levelFile = levelFile;
      },
  
      save: function() {
        var levelName = prompt("Level Name?",this.levelFile);
        if(levelName) {
          $$.post('/save',{ tiles: this.entity.collision.p.tiles, level: levelName });
        }
      }
  
    });
  
  };