text: ﻿app.view.note.menu = app.view.note.menu || {};
  app.view.note.menu.base = {
      getInitialState: function () {
          return {
              active: (this.props.context === 'note' || this.props.context === 'tracker') ? 'add' : null,
              fullview: true // menu is always visible in edit mode
          };
      },
      componentWillMount: function () {
          this.events = _.clone(Backbone.Events);
      },
      componentDidMount: function () {
      },
      shouldComponentUpdate: function (nextProps, nextState) {
          return true;
      },
      componentDidUpdate: function () {
          //app.lib.focus.restore();
      },
      componentWillUnmount: function () {
      },
  
      itemClicked: function (event) {
          var type = $(event.target).data('type');
  
          this.setState({ active: null });
  
          switch (type) {
              case 'more':
                  app.events.trigger('contextmenu', event.target, {
                      type: 'textmenu',
                      items: [
                          {
                              icon: 'icon-trash-alt',
                              text: 'Delete'
                          },
                          {
                              icon: 'icon-cog',
                              text: 'Settings'
                          }
                      ]
                  });
                  break;
              case 'archive':
                  this.props.model.archiveNote();
                  break;
              case 'remove':
                  this.props.model.removeNote();
                  break;
              case 'tag':
                  if (!this.props.model.data().tag) {
                      this.props.model.setTag();
                  }
                  else {
                      this.props.model.removeTag();
                  }
                  break;
          }
  
          this.setState({ active: type });
      },
  
      render: function () {
          var content = this.renderItems(this.state.active);
  
          return (
              React.DOM.div({
                  className: window.classnames({
                      'noselect': true,
                      'picker': true,
                      'active': this.state.active,
                      'fullview':this.state.fullview
                  })
              },
                  React.DOM.div({ className: 'hint', onClick: this.itemClicked },
                      React.DOM.i({ className: 'item icon-ellipsis' })
                  ),
                  React.DOM.div({ className: 'content' },
                      React.DOM.div({ className: 'root' },
                          this.renderItems('root', this.state.active)
                      ),
                      content ? React.DOM.div({ className: 'sub' },
                          content
                      ) : null
                  )
              )
          );
      },
      renderItems: function (parent, active) {
          if (parent === 'options') {
              return app.view.note.options[this.props.context]({
                  model: this.props.model,
                  events: this.props.events
              });
              //return this['render.options.' + this.props.context]();
          }
          else {
              var items = this.commands[parent];
              return _.map(items, function (item, index) {
                  return React.DOM.i({
                      key: index,
                      'className': item.icon + ' ' + window.classnames({
                          'item': true,
                          'active': active === item.value
                      }),
                      'data-type': item.value,
                      onClick: this.execute.bind(this, parent, item.value),
                      style: item.color ? { color: app.lib.color(item.color) } : {},
                      title: item.text
                  });
              }, this);
          }
      },
  
      execute: function (parent, command, event) {
          if (this.commands[command] || command === 'options') {
              if (this.state.active === command) {
                  this.setState({ active: null });
              }
              else {
                  this.setState({ active: command });
              }
          }
          else {
              switch (parent) {
                  case 'root': {
                      this.setState({ active: null });
                      switch (command) {
                          case 'more': {
                              this.menu(event);
                              //this['menu.' + this.props.context](event);
                              break;
                          }
                          case 'tag': {
                              this.tag();
                              break;
                          }
                      }
                      break;
                  }
                  case 'add': {
                      this.props.model.addItem(this.props.context, command);
                      break;
                  }
                  case 'color': {
                      this.props.model.updateColor(command);
                      break;
                  }
              }
          }
      },
      clear: function () {
          //TODO: context avare reset
          this.props.model.reset();
      },
      moveToArchive: function () {
          this.props.model.setStatus(this.props.context, 'archive');
      },
      moveToTrash: function () {
          this.props.model.setStatus(this.props.context, 'trash');
      },
      moveToAll: function () {
          this.props.model.setStatus(this.props.context, 'all');
      },
      moveToInbox: function () {
          this.props.model.setStatus(this.props.context, 'inbox');
      },
      remove: function () {
          this.props.model.remove(this.props.context);
      },
  
      tag: function () {
          if (!this.props.model.data('tag')) {
              this.props.model.setTag();
          }
          else {
              this.props.model.removeTag();
          }
      },
      releseTag: function () {
          this.props.model.update({ tag: { $set: null } });
          delete this.props.model.data().tag;
  
          this.props.model.save(this.props.context);
      },
      releseAndDelete: function () {
          this.props.model.update({ tag: { $set: null } });
          delete this.props.model.data().tag;
  
          this.props.model.save(this.props.context).done(function () {
              this.props.model.collection.remove(this.props.model);
          }.bind(this));
      }
  };