/* =========================================================
 * bootstrap-colorpicker.js 
 * http://www.eyecon.ro/bootstrap-colorpicker
 * =========================================================
 * Copyright 2012 Stefan Petre
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================= */

!function( $ ) {

  // Color object

  var Color = function(val) {
    this.value = {
      h: 1,
      s: 1,
      b: 1,
      a: 1
    };
    this.setColor(val);
  };

  Color.prototype = {
    constructor: Color,

    //parse a string to HSB
    setColor: function(val){
      val = val.toLowerCase();
      var that = this;
      $.each( CPGlobal.stringParsers, function( i, parser ) {
        var match = parser.re.exec( val ),
          values = match && parser.parse( match ),
          space = parser.space||'rgba';
        if ( values ) {
          if (space === 'hsla') {
            that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
          } else {
            that.value = CPGlobal.RGBtoHSB.apply(null, values);
          }
          return false;
        }
      });
    },

    setHue: function(h) {
      this.value.h = 1- h;
    },

    setSaturation: function(s) {
      this.value.s = s;
    },

    setLightness: function(b) {
      this.value.b = 1- b;
    },

    setAlpha: function(a) {
      this.value.a = parseInt((1 - a)*100, 10)/100;
    },

    // HSBtoRGB from RaphaelJS
    // https://github.com/DmitryBaranovskiy/raphael/
    toRGB: function(h, s, b, a) {
      if (!h) {
        h = this.value.h;
        s = this.value.s;
        b = this.value.b;
      }
      h *= 360;
      var R, G, B, X, C;
      h = (h % 360) / 60;
      C = b * s;
      X = C * (1 - Math.abs(h % 2 - 1));
      R = G = B = b - C;

      h = ~~h;
      R += [C, X, 0, 0, X, C][h];
      G += [X, C, C, X, 0, 0][h];
      B += [0, 0, X, C, C, X][h];
      return {
        r: Math.round(R*255),
        g: Math.round(G*255),
        b: Math.round(B*255),
        a: a||this.value.a
      };
    },

    toHex: function(h, s, b, a){
      var rgb = this.toRGB(h, s, b, a);
      return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
    },

    toHSL: function(h, s, b, a){
      if (!h) {
        h = this.value.h;
        s = this.value.s;
        b = this.value.b;
      }
      var H = h,
        L = (2 - s) * b,
        S = s * b;
      if (L > 0 && L <= 1) {
        S /= L;
      } else {
        S /= 2 - L;
      }
      L /= 2;
      if (S > 1) {
        S = 1;
      }
      return {
        h: H,
        s: S,
        l: L,
        a: a||this.value.a
      };
    }
  };

  // Picker object

  var Colorpicker = function(element, options){
    this.element = $(element);
    var format = options.format||this.element.data('color-format')||'hex';
    this.format = CPGlobal.translateFormats[format];
    this.isInput = this.element.is('input');
    this.component = this.element.is('.color') ? this.element.find('.add-on') : false;

    this.picker = $(CPGlobal.template)
      .appendTo('body')
      .on('mousedown', $.proxy(this.mousedown, this));

    if (this.isInput) {
      this.element.on({
        'focus': $.proxy(this.show, this),
        'keyup': $.proxy(this.update, this)
      });
    } else if (this.component){
      this.component.on({
        'click': $.proxy(this.show, this)
      });
    } else {
      this.element.on({
        'click': $.proxy(this.show, this)
      });
    }
    if (format === 'rgba' || format === 'hsla') {
      this.picker.addClass('alpha');
      this.alpha = this.picker.find('.colorpicker-alpha')[0].style;
    }

    if (this.component){
      this.picker.find('.colorpicker-color').hide();
      this.preview = this.element.find('i')[0].style;
    } else {
      this.preview = this.picker.find('div:last')[0].style;
    }

    this.base = this.picker.find('div:first')[0].style;
    this.update();
  };

  Colorpicker.prototype = {
    constructor: Colorpicker,

    show: function(e) {
      this.update();
      this.picker.show();
      this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
      this.place();
      $(window).on('resize', $.proxy(this.place, this));
      if (!this.isInput) {
        if (e) {
          e.stopPropagation();
          e.preventDefault();
        }
      }
      $(document).on({
        'mousedown': $.proxy(this.hide, this)
      });

      this.element.trigger({
        type: 'show',
        color: this.color
      });
    },

    update: function(){
      this.color = new Color(this.isInput ? this.element.prop('value') : this.element.data('color'));
      this.picker.find('i')
        .eq(0).css({left: this.color.value.s*100, top: 100 - this.color.value.b*100}).end()
        .eq(1).css('top', 100 * (1 - this.color.value.h)).end()
        .eq(2).css('top', 100 * (1 - this.color.value.a));
      this.previewColor();
    },

    setValue: function(newColor) {
      this.color = new Color(newColor);
      this.picker.find('i')
        .eq(0).css({left: this.color.value.s*100, top: 100 - this.color.value.b*100}).end()
        .eq(1).css('top', 100 * (1 - this.color.value.h)).end()
        .eq(2).css('top', 100 * (1 - this.color.value.a));
      this.previewColor();
      this.element.trigger({
        type: 'changeColor',
        color: this.color
      });
    },

    hide: function(){
      this.picker.hide();
      $(window).off('resize', this.place);
      if (!this.isInput) {
        $(document).off({
          'mousedown': this.hide
        });
        if (this.component){
          this.element.find('input').prop('value', this.format.call(this));
        }
        this.element.data('color', this.format.call(this));
      } else {
        this.element.prop('value', this.format.call(this));
      }
      this.element.trigger({
        type: 'hide',
        color: this.color
      });
    },

    place: function(){
      var offset = this.component ? this.component.offset() : this.element.offset();
      this.picker.css({
        top: offset.top + this.height,
        left: offset.left
      });
    },

    //preview color change
    previewColor: function(){
      try {
        this.preview.backgroundColor = this.format.call(this);
      } catch(e) {
        this.preview.backgroundColor = this.color.toHex();
      }
      //set the color for brightness/saturation slider
      this.base.backgroundColor = this.color.toHex(this.color.value.h, 1, 1, 1);
      //set te color for alpha slider
      if (this.alpha) {
        this.alpha.backgroundColor = this.color.toHex();
      }
    },

    pointer: null,

    slider: null,

    mousedown: function(e){
      e.stopPropagation();
      e.preventDefault();

      var target = $(e.target);

      //detect the slider and set the limits and callbacks
      var zone = target.closest('div');
      if (!zone.is('.colorpicker')) {
        if (zone.is('.colorpicker-saturation')) {
          this.slider = $.extend({}, CPGlobal.sliders.saturation);
        }
        else if (zone.is('.colorpicker-hue')) {
          this.slider = $.extend({}, CPGlobal.sliders.hue);
        }
        else if (zone.is('.colorpicker-alpha')) {
          this.slider = $.extend({}, CPGlobal.sliders.alpha);
        } else {
          return false;
        }
        var offset = zone.offset();
        //reference to knob's style
        this.slider.knob = zone.find('i')[0].style;
        this.slider.left = e.pageX - offset.left;
        this.slider.top = e.pageY - offset.top;
        this.pointer = {
          left: e.pageX,
          top: e.pageY
        };
        //trigger mousemove to move the knob to the current position
        $(document).on({
          mousemove: $.proxy(this.mousemove, this),
          mouseup: $.proxy(this.mouseup, this)
        }).trigger('mousemove');
      }
      return false;
    },

    mousemove: function(e){
      e.stopPropagation();
      e.preventDefault();
      var left = Math.max(
        0,
        Math.min(
          this.slider.maxLeft,
          this.slider.left + ((e.pageX||this.pointer.left) - this.pointer.left)
        )
      );
      var top = Math.max(
        0,
        Math.min(
          this.slider.maxTop,
          this.slider.top + ((e.pageY||this.pointer.top) - this.pointer.top)
        )
      );
      this.slider.knob.left = left + 'px';
      this.slider.knob.top = top + 'px';
      if (this.slider.callLeft) {
        this.color[this.slider.callLeft].call(this.color, left/100);
      }
      if (this.slider.callTop) {
        this.color[this.slider.callTop].call(this.color, top/100);
      }
      this.previewColor();
      this.element.trigger({
        type: 'changeColor',
        color: this.color
      });
      return false;
    },

    mouseup: function(e){
      e.stopPropagation();
      e.preventDefault();
      $(document).off({
        mousemove: this.mousemove,
        mouseup: this.mouseup
      });
      return false;
    }
  }

  $.fn.colorpicker = function ( option, val ) {
    return this.each(function () {
      var $this = $(this),
        data = $this.data('colorpicker'),
        options = typeof option === 'object' && option;
      if (!data) {
        $this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
      }

        if (typeof option === 'string') data[option](val);
    });
  };

  $.fn.colorpicker.defaults = {
  };

  $.fn.colorpicker.Constructor = Colorpicker;

  var CPGlobal = {

    // translate a format from Color object to a string
    translateFormats: {
      'rgb': function(){
        var rgb = this.color.toRGB();
        return 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
      },

      'rgba': function(){
        var rgb = this.color.toRGB();
        return 'rgba('+rgb.r+','+rgb.g+','+rgb.b+','+rgb.a+')';
      },

      'hsl': function(){
        var hsl = this.color.toHSL();
        return 'hsl('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%)';
      },

      'hsla': function(){
        var hsl = this.color.toHSL();
        return 'hsla('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%,'+hsl.a+')';
      },

      'hex': function(){
        return  this.color.toHex();
      }
    },

    sliders: {
      saturation: {
        maxLeft: 100,
        maxTop: 100,
        callLeft: 'setSaturation',
        callTop: 'setLightness'
      },

      hue: {
        maxLeft: 0,
        maxTop: 100,
        callLeft: false,
        callTop: 'setHue'
      },

      alpha: {
        maxLeft: 0,
        maxTop: 100,
        callLeft: false,
        callTop: 'setAlpha'
      }
    },

    // HSBtoRGB from RaphaelJS
    // https://github.com/DmitryBaranovskiy/raphael/
    RGBtoHSB: function (r, g, b, a){
      r /= 255;
      g /= 255;
      b /= 255;

      var H, S, V, C;
      V = Math.max(r, g, b);
      C = V - Math.min(r, g, b);
      H = (C === 0 ? null :
        V == r ? (g - b) / C :
          V == g ? (b - r) / C + 2 :
            (r - g) / C + 4
        );
      H = ((H + 360) % 6) * 60 / 360;
      S = C === 0 ? 0 : C / V;
      return {h: H||1, s: S, b: V, a: a||1};
    },

    HueToRGB: function (p, q, h) {
      if (h < 0)
        h += 1;
      else if (h > 1)
        h -= 1;

      if ((h * 6) < 1)
        return p + (q - p) * h * 6;
      else if ((h * 2) < 1)
        return q;
      else if ((h * 3) < 2)
        return p + (q - p) * ((2 / 3) - h) * 6;
      else
        return p;
    },

    HSLtoRGB: function (h, s, l, a)
    {
      if (s < 0) {
        s = 0;
      }
      var q;
      if (l <= 0.5) {
        q = l * (1 + s);
      } else {
        q = l + s - (l * s);
      }

      var p = 2 * l - q;

      var tr = h + (1 / 3);
      var tg = h;
      var tb = h - (1 / 3);

      var r = Math.round(CPGlobal.HueToRGB(p, q, tr) * 255);
      var g = Math.round(CPGlobal.HueToRGB(p, q, tg) * 255);
      var b = Math.round(CPGlobal.HueToRGB(p, q, tb) * 255);
      return [r, g, b, a||1];
    },

    // a set of RE's that can match strings and generate color tuples.
    // from John Resig color plugin
    // https://github.com/jquery/jquery-color/
    stringParsers: [
      {
        re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
        parse: function( execResult ) {
          return [
            execResult[ 1 ],
            execResult[ 2 ],
            execResult[ 3 ],
            execResult[ 4 ]
          ];
        }
      }, {
        re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
        parse: function( execResult ) {
          return [
            2.55 * execResult[1],
            2.55 * execResult[2],
            2.55 * execResult[3],
            execResult[ 4 ]
          ];
        }
      }, {
        re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
        parse: function( execResult ) {
          return [
            parseInt( execResult[ 1 ], 16 ),
            parseInt( execResult[ 2 ], 16 ),
            parseInt( execResult[ 3 ], 16 )
          ];
        }
      }, {
        re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
        parse: function( execResult ) {
          return [
            parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
            parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
            parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
          ];
        }
      }, {
        re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
        space: 'hsla',
        parse: function( execResult ) {
          return [
            execResult[1]/360,
            execResult[2] / 100,
            execResult[3] / 100,
            execResult[4]
          ];
        }
      }
    ],
    template: '<div class="colorpicker dropdown-menu">'+
      '<div class="colorpicker-saturation"><i><b></b></i></div>'+
      '<div class="colorpicker-hue"><i></i></div>'+
      '<div class="colorpicker-alpha"><i></i></div>'+
      '<div class="colorpicker-color"><div /></div>'+
      '</div>'
  };

}( window.jQuery )