1#@!#!123s

: / home / t / a / t / tattooscyy / www / public / wPaint-master / src /
Filename : wPaint.js
back
(function ($) {
  'use strict';

  /************************************************************************
   * Paint class
   ************************************************************************/
  function Paint(el, options) {
    this.$el = $(el);
    this.options = options;
    this.init = false;

    this.menus = {primary: null, active: null, all: {}};
    this.previousMode = null;
    this.width = this.$el.width();
    this.height = this.$el.height();

    this.ctxBgResize = true;
    this.ctxResize = true;

    this.generate();
    this._init();
  }
  
  Paint.prototype = {
    generate: function () {
      if (this.init) { return this; }

      var _this = this;

      // automatically appends each canvas
      // also returns the jQuery object so we can chain events right off the function call.
      // for the tempCanvas we will be setting some extra attributes but don't won't matter
      // as they will be reset on mousedown anyway.
      function createCanvas(name) {
        var newName = (name ? name.capitalize() : ''),
            canvasName = 'canvas' + newName,
            ctxName = 'ctx' + newName;

        _this[canvasName] = document.createElement('canvas');
        _this[ctxName] = _this[canvasName].getContext('2d');
        _this['$' + canvasName] = $(_this[canvasName]);
        
        _this['$' + canvasName]
        .attr('class', 'wPaint-canvas' + (name ? '-' + name : ''))
        .attr('width', _this.width + 'px')
        .attr('height', _this.height + 'px')
        .css({position: 'absolute', left: 0, top: 0});

        _this.$el.append(_this['$' + canvasName]);

        return _this['$' + canvasName];
      }

      // event functions
      function canvasMousedown(e) {
        e.preventDefault();
        e.stopPropagation();
        _this.draw = true;
        e.canvasEvent = 'down';
        _this._closeSelectBoxes();
        _this._callShapeFunc.apply(_this, [e]);
      }

      function documentMousemove(e) {
        if (_this.draw) {
          e.canvasEvent = 'move';
          _this._callShapeFunc.apply(_this, [e]);
        }
      }

      function documentMouseup(e) {

        //make sure we are in draw mode otherwise this will fire on any mouse up.
        if (_this.draw) {
          _this.draw = false;
          e.canvasEvent = 'up';
          _this._callShapeFunc.apply(_this, [e]);
        }
      }

      // create bg canvases
      createCanvas('bg');
      
      // create drawing canvas
      createCanvas('')
      .on('mousedown', canvasMousedown)
      .bindMobileEvents();
      
      // create temp canvas for drawing shapes temporarily
      // before transfering to main canvas
      createCanvas('temp').hide();
      
      // event handlers for drawing
      $(document)
      .on('mousemove', documentMousemove)
      .on('mousedown', $.proxy(this._closeSelectBoxes, this))
      .on('mouseup', documentMouseup);

      // we will need to preset theme to get proper dimensions
      // when creating menus which will be appended after this
      this.setTheme(this.options.theme);
    },

    _init: function () {
      var index = null,
          setFuncName = null;

      this.init = true;

      // run any set functions if they exist
      for (index in this.options) {
        setFuncName = 'set' + index.capitalize();
        if (this[setFuncName]) { this[setFuncName](this.options[index]); }
      }

      // fix menus
      this._fixMenus();

      // initialize active menu button
      this.menus.primary._getIcon(this.options.mode).trigger('click');      
    },

    resize: function () {
      var bg = this.getBg(),
          image = this.getImage();

      this.width = this.$el.width();
      this.height = this.$el.height();

      this.canvasBg.width = this.width;
      this.canvasBg.height = this.height;
      this.canvas.width = this.width;
      this.canvas.height = this.height;

      if (this.ctxBgResize === false) {
        this.ctxBgResize = true;
        this.setBg(bg, true);
      }

      if (this.ctxResize === false) {
        this.ctxResize = true;
        this.setImage(image, '', true, true);
      }
    },

    /************************************
     * setters
     ************************************/
    setTheme: function (theme) {
      var i, ii;

      theme = theme.split(' ');

      // remove anything beginning with "wPaint-theme-" first
      this.$el.attr('class', (this.$el.attr('class') || '').replace(/wPaint-theme-.+\s|wPaint-theme-.+$/, ''));
      
      // add each theme
      for (i = 0, ii = theme.length; i < ii; i++) {
        this.$el.addClass('wPaint-theme-' + theme[i]);
      }
    },

    setMode: function (mode) {
      this.setCursor(mode);
      this.previousMode = this.options.mode;
      this.options.mode = mode;
    },

    setImage: function (img, ctxType, resize, notUndo) {
      if (!img) { return true; }

      var _this = this,
          myImage = null,
          ctx = '';

      function loadImage() {
        var ratio = 1, xR = 0, yR = 0, x = 0, y = 0, w = myImage.width, h = myImage.height;

        if (!resize) {
          // get width/height
          if (myImage.width > _this.width || myImage.height > _this.height || _this.options.imageStretch) {
            xR = _this.width / myImage.width;
            yR = _this.height / myImage.height;

            ratio = xR < yR ? xR : yR;

            w = myImage.width * ratio;
            h = myImage.height * ratio;
          }

          // get left/top (centering)
          x = (_this.width - w) / 2;
          y = (_this.height - h) / 2;
        }

        ctx.clearRect(0, 0, _this.width, _this.height);
        ctx.drawImage(myImage, x, y, w, h);

        _this[ctxType + 'Resize'] = false;

        // Default is to run the undo.
        // If it's not to be run set it the flag to true.
        if (!notUndo) {
          _this._addUndo();
        }
      }
      
      ctxType = 'ctx' + (ctxType || '').capitalize();
      ctx = this[ctxType];
      
      if (window.rgbHex(img)) {
        ctx.clearRect(0, 0, this.width, this.height);
        ctx.fillStyle = img;
        ctx.rect(0, 0, this.width, this.height);
        ctx.fill();
      }
      else {
        myImage = new Image();
        myImage.src = img.toString();
        $(myImage).load(loadImage);
      }
    },

    setBg: function (img, resize) {
      if (!img) { return true; }
      
      this.setImage(img, 'bg', resize, true);
    },

    setCursor: function (cursor) {
      cursor = $.fn.wPaint.cursors[cursor] || $.fn.wPaint.cursors['default'];

      this.$el.css('cursor', 'url("' + this.options.path + cursor.path + '") ' + cursor.left + ' ' + cursor.top + ', default');
    },

    setMenuOrientation: function (orientation) {
      $.each(this.menus.all, function (i, menu) {
        menu.options.aligment = orientation;
        menu.setAlignment(orientation);
      });
    },

    getImage: function (withBg) {
      var canvasSave = document.createElement('canvas'),
          ctxSave = canvasSave.getContext('2d');

      withBg = withBg === false ? false : true;

      $(canvasSave)
      .css({display: 'none', position: 'absolute', left: 0, top: 0})
      .attr('width', this.width)
      .attr('height', this.height);

      if (withBg) { ctxSave.drawImage(this.canvasBg, 0, 0); }
      ctxSave.drawImage(this.canvas, 0, 0);

      return canvasSave.toDataURL();
    },

    getBg: function () {
      return this.canvasBg.toDataURL();
    },

    /************************************
     * prompts
     ************************************/
    _displayStatus: function (msg) {
      var _this = this;

      if (!this.$status) {
        this.$status = $('<div class="wPaint-status"></div>');
        this.$el.append(this.$status);
      }

      this.$status.html(msg);
      clearTimeout(this.displayStatusTimer);

      this.$status.fadeIn(500, function () {
        _this.displayStatusTimer = setTimeout(function () { _this.$status.fadeOut(500); }, 1500);
      });
    },

    _showModal: function ($content) {
      var _this = this,
          $bg = this.$el.children('.wPaint-modal-bg'),
          $modal = this.$el.children('.wPaint-modal');

      function modalFadeOut() {
          $bg.remove();
          $modal.remove();
          _this._createModal($content);
        }

      if ($bg.length) {
        $modal.fadeOut(500, modalFadeOut);
      }
      else {
        this._createModal($content);
      }
    },

    _createModal: function ($content) {
      $content = $('<div class="wPaint-modal-content"></div>').append($content.children());

      var $bg = $('<div class="wPaint-modal-bg"></div>'),
          $modal = $('<div class="wPaint-modal"></div>'),
          $holder = $('<div class="wPaint-modal-holder"></div>'),
          $close = $('<div class="wPaint-modal-close">X</div>');

      function modalClick() {
        $modal.fadeOut(500, modalFadeOut);
      }

      function modalFadeOut() {
        $bg.remove();
        $modal.remove();
      }

      $close.on('click', modalClick);
      $modal.append($holder.append($content)).append($close);
      this.$el.append($bg).append($modal);

      $modal.css({
        left: (this.$el.outerWidth() / 2) - ($modal.outerWidth(true) / 2),
        top: (this.$el.outerHeight() / 2) - ($modal.outerHeight(true) / 2)
      });

      $modal.fadeIn(500);
    },

    /************************************
     * menu helpers
     ************************************/
    _createMenu: function (name, options) {
      options = options || {};
      options.alignment = this.options.menuOrientation;
      options.handle = this.options.menuHandle;
      
      return new Menu(this, name, options);
    },

    _fixMenus: function () {
      var _this = this,
          $selectHolder = null;

      function selectEach(i, el) {
        var $el = $(el),
            $select = $el.clone();

        $select.appendTo(_this.$el);

        if ($select.outerHeight() === $select.get(0).scrollHeight) {
          $el.css({overflowY: 'auto'});
        }

        $select.remove();
      }

      // TODO: would be nice to do this better way
      // for some reason when setting overflowY:auto with dynamic content makes the width act up
      for (var key in this.menus.all) {
        $selectHolder = _this.menus.all[key].$menu.find('.wPaint-menu-select-holder');
        if ($selectHolder.length) { $selectHolder.children().each(selectEach); }
      }
    },

    _closeSelectBoxes: function (item) {
      var key, $selectBoxes;

      for (key in this.menus.all) {
        $selectBoxes = this.menus.all[key].$menuHolder.children('.wPaint-menu-icon-select');

        // hide any open select menus excluding the current menu
        // this is to avoid the double toggle since there are some
        // other events running here
        if (item) { $selectBoxes = $selectBoxes.not('.wPaint-menu-icon-name-' + item.name); }

        $selectBoxes.children('.wPaint-menu-select-holder').hide();
      }
    },

    /************************************
     * events
     ************************************/
    //_imageOnload: function () {
    //  /* a blank helper function for post image load calls on canvas - can be extended by other plugins using the setImage called */
    //},

    _callShapeFunc: function (e) {

      // TODO: this is where issues with mobile offsets are probably off
      var canvasOffset = this.$canvas.offset(),
          canvasEvent = e.canvasEvent.capitalize(),
          func = '_draw' + this.options.mode.capitalize() + canvasEvent;

      // update offsets here since we are detecting mouseup on $(document) not on the canvas
      e.pageX = Math.floor(e.pageX - canvasOffset.left);
      e.pageY = Math.floor(e.pageY - canvasOffset.top);

      // call drawing func
      if (this[func]) { this[func].apply(this, [e]); }

      // run callback if set
      if (this.options['draw' + canvasEvent]) { this.options['_draw' + canvasEvent].apply(this, [e]); }

      // run options (user) callback if set
      if (canvasEvent === 'Down' && this.options.onShapeDown) { this.options.onShapeDown.apply(this, [e]); }
      else if (canvasEvent === 'Move' && this.options.onShapeMove) { this.options.onShapeMove.apply(this, [e]); }
      else if (canvasEvent === 'Up' && this.options.onShapeUp) { this.options.onShapeUp.apply(this, [e]); }
    },

    _stopPropagation: function (e) {
      e.stopPropagation();
    },

    /************************************
     * shape helpers
     ************************************/
    _drawShapeDown: function (e) {
      this.$canvasTemp
      .css({left: e.PageX, top: e.PageY})
      .attr('width', 0)
      .attr('height', 0)
      .show();

      this.canvasTempLeftOriginal = e.pageX;
      this.canvasTempTopOriginal = e.pageY;
    },
    
    _drawShapeMove: function (e, factor) {
      var xo = this.canvasTempLeftOriginal,
          yo = this.canvasTempTopOriginal;

      // we may need these in other funcs, so we'll just pass them along with the event
      factor = factor || 2;
      e.left = (e.pageX < xo ? e.pageX : xo);
      e.top = (e.pageY < yo ? e.pageY : yo);
      e.width = Math.abs(e.pageX - xo);
      e.height = Math.abs(e.pageY - yo);
      e.x = this.options.lineWidth / 2 * factor;
      e.y = this.options.lineWidth / 2 * factor;
      e.w = e.width - this.options.lineWidth * factor;
      e.h = e.height - this.options.lineWidth * factor;

      $(this.canvasTemp)
      .css({left: e.left, top: e.top})
      .attr('width', e.width)
      .attr('height', e.height);
      
      // store these for later to use in our "up" call
      this.canvasTempLeftNew = e.left;
      this.canvasTempTopNew = e.top;

      factor = factor || 2;

      // TODO: set this globally in _drawShapeDown (for some reason colors are being reset due to canvas resize - is there way to permanently set it)
      this.ctxTemp.fillStyle = this.options.fillStyle;
      this.ctxTemp.strokeStyle = this.options.strokeStyle;
      this.ctxTemp.lineWidth = this.options.lineWidth * factor;
    },
    
    _drawShapeUp: function () {
      this.ctx.drawImage(this.canvasTemp, this.canvasTempLeftNew, this.canvasTempTopNew);
      this.$canvasTemp.hide();
    },

    /****************************************
     * dropper
     ****************************************/
    _drawDropperDown: function (e) {
      var pos = {x: e.pageX, y: e.pageY},
          pixel = this._getPixel(this.ctx, pos),
          color = null;

      // if we get no color try getting from the background
      //if(pixel.r === 0 && pixel.g === 0 && pixel.b === 0 && pixel.a === 0) {
      //  imageData = this.ctxBg.getImageData(0, 0, this.width, this.height)
      //  pixel = this._getPixel(imageData, pos);
      //}

      color = 'rgba(' + [ pixel.r, pixel.g, pixel.b, pixel.a ].join(',') + ')';

      // set color from dropper here
      this.options[this.dropper] = color;
      this.menus.active._getIcon(this.dropper).wColorPicker('color', color);
    },

    _drawDropperUp: function () {
      this.setMode(this.previousMode);
    },

    // get pixel data represented as RGBa color from pixel array.
    _getPixel: function (ctx, pos) {
      var imageData = ctx.getImageData(0, 0, this.width, this.height),
          pixelArray = imageData.data,
          base = ((pos.y * imageData.width) + pos.x) * 4;
      
      return {
        r: pixelArray[base],
        g: pixelArray[base + 1],
        b: pixelArray[base + 2],
        a: pixelArray[base + 3]
      };
    }
  };

  /************************************************************************
   * Menu class
   ************************************************************************/
  function Menu(wPaint, name, options) {
    this.wPaint = wPaint;
    this.options = options;
    this.name = name;
    this.type = !wPaint.menus.primary ? 'primary' : 'secondary';
    this.docked = true;
    this.dockOffset = {left: 0, top: 0};

    this.generate();
  }
  
  Menu.prototype = {
    generate: function () {
      this.$menu = $('<div class="wPaint-menu"></div>');
      this.$menuHolder = $('<div class="wPaint-menu-holder wPaint-menu-name-' + this.name + '"></div>');
      
      if (this.options.handle) { this.$menuHandle = this._createHandle(); }
      else { this.$menu.addClass('wPaint-menu-nohandle'); }
      
      if (this.type === 'primary') {

        // store the primary menu in primary object - we will need this reference later
        this.wPaint.menus.primary = this;

        this.setOffsetLeft(this.options.offsetLeft);
        this.setOffsetTop(this.options.offsetTop);
      }
      else if (this.type === 'secondary') {
        this.$menu.hide();
      }

      // append menu items
      this.$menu.append(this.$menuHolder.append(this.$menuHandle));
      this.reset();
      
      // append menu
      this.wPaint.$el.append(this.$menu);

      this.setAlignment(this.options.alignment);
    },

    // create / reset menu - will add new entries in the array
    reset: function () {
      var _this = this,
          menu = $.fn.wPaint.menus[this.name],
          key;

      // self invoking function
      function itemAppend(item) { _this._appendItem(item); }

      for (key in menu.items) {

        // only add unique (new) items (icons)
        if (!this.$menuHolder.children('.wPaint-menu-icon-name-' + key).length) {
          
          // add the item name, we will need this internally
          menu.items[key].name = key;

          // use default img if img not set
          menu.items[key].img = _this.wPaint.options.path + (menu.items[key].img || menu.img);

          // make self invoking to avoid overwrites
          (itemAppend)(menu.items[key]);
        }
      }
    },

    _appendItem: function (item) {
      var $item = this['_createIcon' + item.icon.capitalize()](item);

      if (item.after) {
        this.$menuHolder.children('.wPaint-menu-icon-name-' + item.after).after($item);
      }
      else {
        this.$menuHolder.append($item);
      }
    },

    /************************************
     * setters
     ************************************/
    setOffsetLeft: function (left) {
      this.$menu.css({left: left});
    },

    setOffsetTop: function (top) {
      this.$menu.css({top: top});
    },

    setAlignment: function (alignment) {
      var tempLeft = this.$menu.css('left');

      this.$menu.attr('class', this.$menu.attr('class').replace(/wPaint-menu-alignment-.+\s|wPaint-menu-alignment-.+$/, ''));
      this.$menu.addClass('wPaint-menu-alignment-' + alignment);

      this.$menu.width('auto').css('left', -10000);
      this.$menu.width(this.$menu.width()).css('left', tempLeft);

      // set proper offsets based on alignment
      if (this.type === 'secondary') {
        if (this.options.alignment === 'horizontal') {
          this.dockOffset.top = this.wPaint.menus.primary.$menu.outerHeight(true);
        }
        else {
          this.dockOffset.left = this.wPaint.menus.primary.$menu.outerWidth(true);
        }
      }   
    },

    /************************************
     * handle
     ************************************/
    _createHandle: function () {
      var _this = this,
          $handle = $('<div class="wPaint-menu-handle"></div>');

      // draggable functions
      function draggableStart() {
        _this.docked = false;
        _this._setDrag();
      }

      function draggableStop() {
        $.each(_this.$menu.data('ui-draggable').snapElements, function (i, el) {
          var offset = _this.$menu.offset(),
              offsetPrimary = _this.wPaint.menus.primary.$menu.offset();

          _this.dockOffset.left = offset.left - offsetPrimary.left;
          _this.dockOffset.top = offset.top - offsetPrimary.top;
          _this.docked = el.snapping;
        });

        _this._setDrag();
      }

      function draggableDrag() {
        _this._setIndex();
      }

      // the drag/snap events for menus are tricky
      // init handle for ALL menus, primary menu will drag a secondary menu with it, but that is un/binded in the toggle function
      this.$menu.draggable({handle: $handle});

      // if it's a secondary menu we want to check for snapping
      // on drag we set docked to false, on snap we set it back to true
      if (this.type === 'secondary') {
        this.$menu.draggable('option', 'snap', this.wPaint.menus.primary.$menu);
        this.$menu.draggable('option', 'start', draggableStart);
        this.$menu.draggable('option', 'stop', draggableStop);
        this.$menu.draggable('option', 'drag', draggableDrag);
      }

      $handle.bindMobileEvents();

      return $handle;
    },

    /************************************
     * generic icon
     ************************************/
    _createIconBase: function (item) {
      var _this = this,
          $icon = $('<div class="wPaint-menu-icon wPaint-menu-icon-name-' + item.name + '"></div>'),
          $iconImg = $('<div class="wPaint-menu-icon-img"></div>'),
          width = $iconImg.realWidth(null, null, this.wPaint.$el);

      function mouseenter(e) {
        var $el = $(e.currentTarget);

        $el.siblings('.hover').removeClass('hover');
        if (!$el.hasClass('disabled')) { $el.addClass('hover'); }
      }

      function mouseleave(e) {
        $(e.currentTarget).removeClass('hover');
      }

      function click() {
        _this.wPaint.menus.active = _this;
      }

      $icon
      .attr('title', item.title)
      .on('mousedown', $.proxy(this.wPaint._closeSelectBoxes, this.wPaint, item))
      .on('mouseenter', mouseenter)
      .on('mouseleave', mouseleave)
      .on('click', click);

      // can have index:0 so be careful here
      if ($.isNumeric(item.index)) {
        $iconImg
        .css({
          backgroundImage: 'url(' + item.img + ')',
          backgroundPosition: (-width * item.index) + 'px 0px'
        });
      }

      return $icon.append($iconImg);
    },

    /************************************
     * icon group
     ************************************/
    _createIconGroup: function (item) {
      var _this = this,
          css = {backgroundImage: 'url(' + item.img + ')'},
          $icon = this.$menuHolder.children('.wPaint-menu-icon-group-' + item.group),
          iconExists = $icon.length,
          $selectHolder = null,
          $option = null,
          $item = null,
          width = 0;

      // local functions
      function setIconClick() {

        // only trigger if menu is not visible otherwise it will fire twice
        // from the mousedown to open the menu which we want just to display the menu
        // not fire the button callback
        if (!$icon.children('.wPaint-menu-select-holder').is(':visible')) {
          item.callback.apply(_this.wPaint, []);
        }
      }

      function selectHolderClick() {
        $icon.addClass('active').siblings('.active').removeClass('active');
      }

      function optionClick() {

        // rebind the main icon when we select an option
        $icon
        .attr('title', item.title)
        .off('click.setIcon')
        .on('click.setIcon', setIconClick);
        
        // run the callback right away when we select an option
        $icon.children('.wPaint-menu-icon-img').css(css);
        item.callback.apply(_this.wPaint, []);
      }

      // crate icon if it doesn't exist yet
      if (!iconExists) {
        $icon = this._createIconBase(item)
        .addClass('wPaint-menu-icon-group wPaint-menu-icon-group-' + item.group)
        .on('click.setIcon', setIconClick)
        .on('mousedown', $.proxy(this._iconClick, this));
      }

      // get the proper width here now that we have the icon
      // this is for the select box group not the main icon
      width = $icon.children('.wPaint-menu-icon-img').realWidth(null, null, this.wPaint.$el);
      css.backgroundPosition = (-width * item.index) + 'px center';

      // create selectHolder if it doesn't exist
      $selectHolder = $icon.children('.wPaint-menu-select-holder');
      if (!$selectHolder.length) {
        $selectHolder = this._createSelectBox($icon);
        $selectHolder.children().on('click', selectHolderClick);
      }

      $item = $('<div class="wPaint-menu-icon-select-img"></div>')
      .attr('title', item.title)
      .css(css);

      $option = this._createSelectOption($selectHolder, $item)
      .addClass('wPaint-menu-icon-name-' + item.name)
      .on('click', optionClick);

      // move select option into place if after is set
      if (item.after) {
        $selectHolder.children('.wPaint-menu-select').children('.wPaint-menu-icon-name-' + item.after).after($option);
      }

      // we only want to return an icon to append on the first run of a group
      if (!iconExists) { return $icon; }
    },

    /************************************
     * icon generic
     ************************************/
    _createIconGeneric: function (item) {

      // just a go between for the iconGeneric type
      return this._createIconActivate(item);
    },

    /************************************
     * icon
     ************************************/
    _createIconActivate: function (item) {

      // since we are piggy backing icon with the item.group
      // we'll just do a redirect and keep the code separate for group icons
      if (item.group) { return this._createIconGroup(item); }

      var _this = this,
          $icon = this._createIconBase(item);

      function iconClick(e) {
        if (item.icon !== 'generic') { _this._iconClick(e); }
        item.callback.apply(_this.wPaint, [e]);
      }

      $icon.on('click', iconClick);

      return $icon;
    },

    _isIconDisabled: function (name) {
      return this.$menuHolder.children('.wPaint-menu-icon-name-' + name).hasClass('disabled');
    },

    _setIconDisabled: function (name, disabled) {
      var $icon = this.$menuHolder.children('.wPaint-menu-icon-name-' + name);

      if (disabled) {
        $icon.addClass('disabled').removeClass('hover');
      }
      else {
        $icon.removeClass('disabled');
      }
    },

    _getIcon: function (name) {
      return this.$menuHolder.children('.wPaint-menu-icon-name-' + name);
    },

    _iconClick: function (e) {
      var $el = $(e.currentTarget),
          menus = this.wPaint.menus.all;

      // make sure to loop using parent object - don't use .wPaint-menu-secondary otherwise we would hide menu for all canvases
      for (var menu in menus) {
        if (menus[menu] && menus[menu].type === 'secondary') { menus[menu].$menu.hide(); }  
      }

      $el.siblings('.active').removeClass('active');
      if (!$el.hasClass('disabled')) { $el.addClass('active'); }
    },

    /************************************
     * iconToggle
     ************************************/
    _createIconToggle: function (item) {
      var _this = this,
          $icon = this._createIconBase(item);

      function iconClick() {
        $icon.toggleClass('active');
        item.callback.apply(_this.wPaint, [$icon.hasClass('active')]);
      }

      $icon.on('click', iconClick);

      return $icon;
    },

    /************************************
     * select
     ************************************/
    _createIconSelect: function (item) {
      var _this = this,
          $icon = this._createIconBase(item),
          $selectHolder = this._createSelectBox($icon),
          i, ii, $option;

      function optionClick(e) {
        $icon.children('.wPaint-menu-icon-img').html($(e.currentTarget).html());
        item.callback.apply(_this.wPaint, [$(e.currentTarget).html()]);
      }

      // add values for select
      for (i = 0, ii = item.range.length; i < ii; i++) {
        $option = this._createSelectOption($selectHolder, item.range[i]);
        $option.on('click', optionClick);
        if (item.useRange) { $option.css(item.name, item.range[i]); }
      }

      return $icon;
    },

    _createSelectBox: function ($icon) {
      var $selectHolder = $('<div class="wPaint-menu-select-holder"></div>'),
          $select = $('<div class="wPaint-menu-select"></div>'),
          timer = null;

      function clickSelectHolder(e) {
        e.stopPropagation();
        $selectHolder.hide();
      }

      function iconMousedown() {
        timer = setTimeout(function () { $selectHolder.toggle(); }, 200);
      }

      function iconMouseup() {
        clearTimeout(timer);
      }

      function iconClick() {
        $selectHolder.toggle();
      }

      $selectHolder
      .on('mousedown mouseup', this.wPaint._stopPropagation)
      .on('click', clickSelectHolder)
      .hide();

      // of hozizontal we'll pop below the icon
      if (this.options.alignment === 'horizontal') {
        $selectHolder.css({left: 0, top: $icon.children('.wPaint-menu-icon-img').realHeight('outer', true, this.wPaint.$el)});
      }
      // vertical we'll pop to the right
      else {
        $selectHolder.css({left: $icon.children('.wPaint-menu-icon-img').realWidth('outer', true, this.wPaint.$el), top: 0});
      }

      $icon
      .addClass('wPaint-menu-icon-select')
      .append('<div class="wPaint-menu-icon-group-arrow"></div>')
      .append($selectHolder.append($select));

      // for groups we want to add a delay before the selectBox pops up
      if ($icon.hasClass('wPaint-menu-icon-group')) {
        $icon
        .on('mousedown', iconMousedown)
        .on('mouseup', iconMouseup);
      }
      else { $icon.on('click', iconClick); }

      return $selectHolder;
    },

    _createSelectOption: function ($selectHolder, value) {
      var $select = $selectHolder.children('.wPaint-menu-select'),
          $option = $('<div class="wPaint-menu-select-option"></div>').append(value);

      // set class for first item to remove any undesired styles like borders
      if (!$select.children().length) { $option.addClass('first'); }

      $select.append($option);

      return $option;
    },

    _setSelectValue: function (icon, value) {
      this._getIcon(icon).children('.wPaint-menu-icon-img').html(value);
    },

    /************************************
     * color picker
     ************************************/
    _createIconColorPicker: function (item) {
      var _this = this,
          $icon = this._createIconBase(item);

      function iconClick() {

        // if we happen to click on this while in dropper mode just revert to previous
        if (_this.wPaint.options.mode === 'dropper') { _this.wPaint.setMode(_this.wPaint.previousMode); }
      }

      function iconOnSelect(color) {
        item.callback.apply(_this.wPaint, [color]);
      }

      function iconOnDropper() {
        $icon.trigger('click');
        _this.wPaint.dropper = item.name;
        _this.wPaint.setMode('dropper');
      }

      $icon
      .on('click', iconClick)
      .addClass('wPaint-menu-colorpicker')
      .wColorPicker({
        mode: 'click',
        generateButton: false,
        dropperButton: true,
        onSelect: iconOnSelect,
        onDropper: iconOnDropper
      });

      return $icon;
    },

    _setColorPickerValue: function (icon, value) {
      this._getIcon(icon).children('.wPaint-menu-icon-img').css('backgroundColor', value);
    },

    /************************************
     * menu toggle
     ************************************/
    _createIconMenu: function (item) {
      var _this = this,
          $icon = this._createIconActivate(item);

      function iconClick() {
        _this.wPaint.setCursor(item.name);

        // the items name here will be the menu name
        var menu = _this.wPaint.menus.all[item.name];
        menu.$menu.toggle();
        if (_this.handle) {
          menu._setDrag();
        } else {
          menu._setPosition();
        }
      }

      $icon.on('click', iconClick);

      return $icon;
    },

    // here we specify which menu will be dragged
    _setDrag: function () {
      var $menu = this.$menu,
          drag = null, stop = null;

      if ($menu.is(':visible')) {
        if (this.docked) {

          // make sure we are setting proper menu object here
          drag = stop = $.proxy(this._setPosition, this);
          this._setPosition();
        }

        // register drag/stop events
        this.wPaint.menus.primary.$menu.draggable('option', 'drag', drag);
        this.wPaint.menus.primary.$menu.draggable('option', 'stop', stop);
      }
    },

    _setPosition: function () {
      var offset = this.wPaint.menus.primary.$menu.position();

      this.$menu.css({
        left: offset.left + this.dockOffset.left,
        top: offset.top + this.dockOffset.top
      });
    },

    _setIndex: function () {
      var primaryOffset = this.wPaint.menus.primary.$menu.offset(),
          secondaryOffset = this.$menu.offset();

      if (
        secondaryOffset.top < primaryOffset.top ||
        secondaryOffset.left < primaryOffset.left
      ) {
        this.$menu.addClass('wPaint-menu-behind');
      }
      else {
        this.$menu.removeClass('wPaint-menu-behind');
      }
    }
  };

  /************************************************************************
   * wPaint
   ************************************************************************/
  $.support.canvas = (document.createElement('canvas')).getContext;

  $.fn.wPaint = function (options, value) {

    function create() {
      if (!$.support.canvas) {
        $(this).html('Browser does not support HTML5 canvas, please upgrade to a more modern browser.');
        return false;
      }

      return $.proxy(get, this)();
    }

    function get() {
      var wPaint = $.data(this, 'wPaint');

      if (!wPaint) {
        wPaint = new Paint(this, $.extend(true, {}, options));
        $.data(this, 'wPaint', wPaint);
      }

      return wPaint;
    }

    function runOpts() {
      var wPaint = $.data(this, 'wPaint');

      if (wPaint) {
        if (wPaint[options]) { wPaint[options].apply(wPaint, [value]); }
        else if (value !== undefined) {
          if (wPaint[func]) { wPaint[func].apply(wPaint, [value]); }
          if (wPaint.options[options]) { wPaint.options[options] = value; }
        }
        else {
          if (wPaint[func]) { values.push(wPaint[func].apply(wPaint, [value])); }
          else if (wPaint.options[options]) { values.push(wPaint.options[options]); }
          else { values.push(undefined); }
        }
      }
    }

    if (typeof options === 'string') {
      var values = [],
          func = (value ? 'set' : 'get') + options.charAt(0).toUpperCase() + options.substring(1);

      this.each(runOpts);

      if (values.length) { return values.length === 1 ? values[0] : values; }
      
      return this;
    }

    options = $.extend({}, $.fn.wPaint.defaults, options);
    options.lineWidth = parseInt(options.lineWidth, 10);
    options.fontSize = parseInt(options.fontSize, 10);

    return this.each(create);
  };

  /************************************************************************
   * extend
   ************************************************************************/
  $.fn.wPaint.extend = function (funcs, protoType) {
    var key;
    
    function elEach(func) {
      if (protoType[func]) {
        var tmpFunc = Paint.prototype[func],
            newFunc = funcs[func];
        
        protoType[func] = function () {
          tmpFunc.apply(this, arguments);
          newFunc.apply(this, arguments);
        };
      }
      else {
        protoType[func] = funcs[func];
      }
    }

    protoType = protoType === 'menu' ? Menu.prototype : Paint.prototype;

    for (key in funcs) { (elEach)(key); }
  };

  /************************************************************************
   * Init holders
   ************************************************************************/
  $.fn.wPaint.menus = {};

  $.fn.wPaint.cursors = {};

  $.fn.wPaint.defaults = {
    path:            '/',                // set absolute path for images and cursors
    theme:           'standard classic', // set theme
    autoScaleImage:  true,               // auto scale images to size of canvas (fg and bg)
    autoCenterImage: true,               // auto center images (fg and bg, default is left/top corner)
    menuHandle:      true,               // setting to false will means menus cannot be dragged around
    menuOrientation: 'horizontal',       // menu alignment (horizontal,vertical)
    menuOffsetLeft:  5,                  // left offset of primary menu
    menuOffsetTop:   5,                  // top offset of primary menu
    bg:              null,               // set bg on init
    image:           null,               // set image on init
    imageStretch:    false,              // stretch smaller images to full canvans dimensions
    onShapeDown:     null,               // callback for draw down event
    onShapeMove:     null,               // callback for draw move event
    onShapeUp:       null                // callback for draw up event
  };
})(jQuery);