/* jshint debug: true, expr: true */

;(function($){

  /* constants & defaults. */
  var data_color    = 'data-ab-color';
  var data_parent   = 'data-ab-parent';
  var data_css_bg   = 'data-ab-css-background';
  var event_cf      = 'ab-color-found';

  var defaults      = {
    selector:             '[data-adaptive-background]',
    parent:               null,
    exclude:              [ 'rgb(0,0,0)', 'rgb(255,255,255)' ],
    normalizetextcolor:   false,
    normalizedtextcolors:  {
      light:      "#fff",
      dark:       "#000"
    },
    lumaclasses:  {
      light:      "ab-light",
      dark:       "ab-dark"
    }
  };

  // include rgbaster - https://github.com/briangonzalez/rgbaster.js
  /* jshint ignore:start */
  !function(n){"use strict";var t=function(){return document.createelement("canvas").getcontext("2d")},e=function(n,e){var a=new image,o=n.src||n;"data:"!==o.substring(0,5)&&(a.crossorigin="anonymous"),a.onload=function(){var n=t("2d");n.drawimage(a,0,0);var o=n.getimagedata(0,0,a.width,a.height);e&&e(o.data)},a.src=o},a=function(n){return["rgb(",n,")"].join("")},o=function(n){return n.map(function(n){return a(n.name)})},r=5,i=10,c={};c.colors=function(n,t){t=t||{};var c=t.exclude||[],u=t.palettesize||i;e(n,function(e){for(var i=n.width*n.height||e.length,m={},s="",d=[],f={dominant:{name:"",count:0},palette:array.apply(null,new array(u)).map(boolean).map(function(){return{name:"0,0,0",count:0}})},l=0;i>l;){if(d[0]=e[l],d[1]=e[l+1],d[2]=e[l+2],s=d.join(","),m[s]=s in m?m[s]+1:1,-1===c.indexof(a(s))){var g=m[s];g>f.dominant.count?(f.dominant.name=s,f.dominant.count=g):f.palette.some(function(n){return g>n.count?(n.name=s,n.count=g,!0):void 0})}l+=4*r}if(t.success){var p=o(f.palette);t.success({dominant:a(f.dominant.name),secondary:p[0],palette:p})}})},n.rgbaster=n.rgbaster||c}(window);
  /* jshint ignore:end */


  /*
    our main function declaration.
  */
  $.adaptivebackground = {
    run: function( options ){
      var opts = $.extend({}, defaults, options);

      /* loop over each element, waiting for it to load
         then finding its color, and triggering the
         color found event when color has been found.
      */
      $( opts.selector ).each(function(index, el){
        var $this = $(this);

        /*  small helper functions which applies
            colors, attrs, triggers events, etc.
        */
        var handlecolors = function () {
          var img = usecssbackground() ? getcssbackground() : $this[0];

          rgbaster.colors(img, {
            palettesize: 20,
            exclude: opts.exclude,
            success: function(colors) {
              $this.attr(data_color, colors.dominant);
              $this.trigger(event_cf, { color: colors.dominant, palette: colors.palette });
            }
          });

        };

        var usecssbackground = function(){
          var attr = $this.attr( data_css_bg );
          return (typeof attr !== typeof undefined && attr !== false);
        };

        var getcssbackground = function(){
          var str = $this.css('background-image');
          var regex = /\(([^)]+)\)/;
          var match = regex.exec(str)[1].replace(/"/g, '')
          return match;
        };

        /* subscribe to our color-found event. */
        $this.on( event_cf, function(ev, data){

          // try to find the parent.
          var $parent;
          if ( opts.parent && $this.parents( opts.parent ).length ) {
            $parent = $this.parents( opts.parent );
          }
          else if ( $this.attr( data_parent ) && $this.parents( $this.attr( data_parent ) ).length ){
            $parent = $this.parents( $this.attr( data_parent ) );
          }
          else if ( usecssbackground() ){
            $parent = $this;
          }
          else if (opts.parent) {
            $parent = $this.parents( opts.parent );
          }
          else {
            $parent = $this.parent();
          }

          $parent.css({ backgroundcolor: data.color });
		  $parent.parent('.wbalist_item').css({ backgroundcolor: data.color });
		  $parent.children('.bg_wtop_banner').css("background-image","linear-gradient(" + data.color + ",transparent)");
          // helper function to calculate yiq - http://en.wikipedia.org/wiki/yiq
          var getyiq = function(color){
            var rgb = color.match(/\d+/g);
            return ((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000;
          };

          var getnormalizedtextcolor = function (color){
            return getyiq(color) >= 128 ? opts.normalizedtextcolors.dark : opts.normalizedtextcolors.light;
          };

          var getlumaclass = function (color){
            return getyiq(color) <= 128 ? opts.lumaclasses.dark : opts.lumaclasses.light;
          };

          // normalize the text color based on luminance.
          if ( opts.normalizetextcolor )
            $parent.css({ color: getnormalizedtextcolor(data.color) });

          // add a class based on luminance.
          $parent.addclass( getlumaclass(data.color) )
                 .attr('data-ab-yaq', getyiq(data.color));

          opts.success && opts.success($this, data);
        });

        /* handle the colors. */
        handlecolors();

      });
    }
  };

})(jquery);