var $body, i, $d, cl, $fan, pages, $active, currentRot, colorVariations,
    max = 24, selectedColorVariation = 0, $gradient, $title, currentColors, $export;

colorVariations = [
  {
    startHue: 0,
    light: 75,
    saturation: 100,
    type: 'huslp'
  }
];

$body = $('body');
$fan = $('.js-fan');
$title = $('.js-title');
$gradient = $('.gradient');
$d = $(document);
$export = $('.js-palette');

function convertCategories(pal) {
  pal = pal || 'hsl';
  var newCategories = {};
  for(var cetegory in colorCategories) {
    if(pal == 'husl'){
      var hsl = tinycolor(colorCategories[cetegory]).toHsl();
      newCategories[cetegory] = $.husl.toHex(hsl.h, hsl.s * 100, hsl.l * 100);
    }else if(pal == 'huslp'){
      var hsl = tinycolor(colorCategories[cetegory]).toHsl();
      newCategories[cetegory] = $.husl.p.toHex(hsl.h, hsl.s * 100, hsl.l * 100);
    }else{
      newCategories[cetegory] = colorCategories[cetegory];  
    }
  }
  return newCategories;
}

createPalette(max, colorVariations[0]);

function createPalette (max, color) {
  var categories,getCatNames, startHue, s, l, type, currentColors = [], previousColor;
  
  startHue = color.startHue;
  s = color.saturation;
  l = color.light;
  type = color.type;
  categories = convertCategories(type);
  getCatNames = nearestColor.from(categories);
  
  pages = []; currentRot = 0;
  
  max = parseInt(max); startHue = parseInt(startHue), s = parseInt(s), l = parseInt(l);
  
  if ( $('.fan').length && colorVariations.length === 1 ) {
    $('.fan').empty();
  }
  
  for (i = 0; i < max; i++) {
    var hsl = [(startHue + (i / max) * 360) % 360, s, l];
    var $page = $('<div />', {class: 'fan-page js-page'});
    var $color = $('<div />', {class: 'fan-color'});

    var color, colorCSS, rotation, scale, colorName, colorCategory;
    
    pages.push($page);
    
    switch(type) {
      case 'hcl':
        //color = chroma.cubehelix((startHue / 360) * 2, 2, hsl[0]/100, 1, hsl[2]/100);
        //color = chroma('hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)').hex();
        var c = chroma.cubehelix().start(startHue).rotations(-0.5).gamma(hsl[1]/100).lightness([Math.max(.1,1 - (hsl[2]/100)), hsl[2]/100]);
        color = 'red'
        color = c(hsl[0]/360).hex();
        break;
      case 'huslp':
        color = $.husl.p.toHex.apply(this, hsl);
        break;
      case 'husl':
        color = $.husl.toHex.apply(this, hsl);
        break;
      default:
        color = tinycolor( 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)' ).toHexString();
        break;
    }
    
    colorName = getClosestNamedColor( color ).name;
    colorCategory = getCatNames( color ).name;
    
    rotation = (i + 1) * (360 / max);
    scale = i * 2;
    $page.css({
      "transform": "translate3d(0,0," + scale + "px) rotate(" + rotation + "deg)"
    }).data('rotation', rotation).data('scale', scale).data('color', color).data('colorname', colorName);
    
    if( previousColor ) {
      $page.data('previouscolor', previousColor);
    }
    
    if( i+1 == max ){
      $fan.find('js-page:eq(0)').data('previouscolor', color);
    }
    
    previousColor = color;
    
    currentColors.push({name: colorName, color: color, category: colorCategory});
    
    $color.css({
      "color": color,
      "background-color": color
    });
    $color.html("<span class='color-bg'><strong>" + color.toUpperCase() + "</strong><em class='color'>" + colorName + "</em></span>");
    
    $page.append($color);
    $fan.append($page);
  }
  
  $gradient.each(function(){
    var $that = $(this);
    $gradient.find('.fan-color').remove();
    pages.forEach(function($page){
      var $color = $('<div />', {class: 'fan-color'});
      $color.css('background-color', $page.data('color') );
      $that.append($color)
    });
  });
  
  $export.html(JSON.stringify(currentColors));
  $body.append($fan);
  $active = pages[pages.length - 1];
}

$d.on('mouseenter', '.js-page', function(){
  var $this = $(this);
  var match = false, before, after;
  
  pages.forEach(function($el, i){
    var data = $el.data();
    if( $el[0] === $this[0] ){
      $el.css({
        "transform": "translate3d(0,0," + (parseInt(data.scale) + 50) + "px) rotate(" + parseInt(data.rotation) + "deg)"
      });
      match = i;
    }
  });
  
  before = pages[match - 1] ? pages[match - 1] : pages[pages.length - 1];
  after = pages[match + 1] ? pages[match + 1] : pages[0];
  
  before.css({
    "transform": "translate3d(0,0," + parseInt(before.data().scale) + "px) rotate(" + (parseInt(before.data().rotation) - 5) + "deg)"
  });
  after.css({
    "transform": "translate3d(0,0," + parseInt(after.data().scale) + "px) rotate(" + (parseInt(after.data().rotation) + 5) + "deg)"
  });
});


$d.on('mouseleave', '.js-page', function(){
  pages.forEach(function($el, i){
    var data = $el.data();
    $el.css({
      "transform": "translate3d(0,0," + parseInt(data.scale) + "px) rotate(" + parseInt(data.rotation) + "deg)"
    });
  });
});

$d.on('click', '.js-page', function(){
  var $this = $(this);
  
  if($this[0] === $active[0]) {
    $fan.css("transform", "rotate(0deg)");
    $('html').css('background-color', '#fff' );
    $('#hexval').val('#fff');
    $active = pages[pages.length - 1];
    currentRot = 0;
    $title.html("");
  } else {
    var currentRot = parseInt($active.data().rotation);
    var newRot = parseInt($this.data().rotation);
    $fan.css("transform", "rotate(" + -newRot + "deg)");
    $('html').css({
      'background-color': $this.data().color,
    });
    
    //$('html')[0].style['background-image'] = '-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, '+ $this.data().color +'), color-stop(100%, '+$this.data().previouscolor+'))';

    $active = $this;
    $title.html($this.data('colorname'));
    $('#hexval').val( $this.data().color ).focus().select();
  }
  
});

$d.on('change', '#hue', function(){
  var startHue = colorVariations[selectedColorVariation].startHue = parseInt( $(this).val() );
  createPalette(max, colorVariations[selectedColorVariation]);
  $('.hue-val').html(startHue)
});

$d.on('change', '#colors', function(){
  max = $(this).val();
  createPalette(max, colorVariations[selectedColorVariation]);
  $('.colors-val').html(max);
});

$d.on('change', '#light', function(){
  var light = colorVariations[selectedColorVariation].light = parseInt( $(this).val() );
  createPalette(max, colorVariations[selectedColorVariation]);
  
  if(parseInt(light) > 75) {
    $('html').addClass('bg-dark');
  }else{
    $('html').removeClass('bg-dark');
  }
  $('.light-val').html(light);
});

$d.on('change', '#saturation', function(){
  var saturation = colorVariations[selectedColorVariation].saturation = parseInt( $(this).val() );
  createPalette(max, colorVariations[selectedColorVariation]);
  $('.saturation-val').html(saturation);
});

$d.on('click', '.js-toggle-settings', function(){
  $body.toggleClass('show-settings');
});

$d.on('change', '.js-color-type', function(){
  var type = colorVariations[selectedColorVariation].type = $(this).val();
  createPalette(max, colorVariations[selectedColorVariation]);
});

var timer;

$d.on('keyup', '#startcolor', function(){
  var $this = $(this), val, hsl;
  val = $this.val();
  if( tinycolor( val ).isValid() ) {
    clearTimeout(timer);
    hsl = tinycolor( val ).toHsl();
    colorVariations[selectedColorVariation].startHue = hsl.h;
    $('#hue').val(hsl.h);
    colorVariations[selectedColorVariation].saturation = (hsl.s * 100) || 1;
    $('#saturation').val((hsl.s * 100) || 1);
    colorVariations[selectedColorVariation].light = (hsl.l * 100) || 1;
    $('#light').val((hsl.l * 100) || 1);
    
    setTimeout(function(){
      createPalette(max, colorVariations[selectedColorVariation]);
    },500);
  }
});