var doKuler = true;

function hexToR(h) { return parseInt(h.substring(1,3),16); }
function hexToG(h) { return parseInt(h.substring(3,5),16); }
function hexToB(h) { return parseInt(h.substring(5,7),16); }

function DekoElement(kind, n) {
  
  var
  field = windowSize(),
  aspect = field.w / field.h,
  speed = 0.05,
  huespeed = 0.1,
  vendorPrefixes = ['webkit','moz','o'],
  x;
  
  this.setParameters = function() {
    this.position = { x : Math.random() * 100, y: Math.random() * 100 };
    this.speed = { x : Math.random() * speed - speed / 2, y : Math.random() * speed / aspect - speed / 2 / aspect };
    if (doKuler) {
      var colorNumber = Math.floor(Math.random() * 5);
      // var colorNumber = Math.floor(Math.random() * 3) + 1;
      this.kulerColor = kuler.c[colorNumber];
      this.kulerRGB = hexToR(this.kulerColor) + ', ' + hexToG(this.kulerColor) + ', ' + hexToB(this.kulerColor);
    } else {
      this.hue = Math.floor(Math.random() * 360);
    }
  };

  this.setCSS = function() {
    var cssText =
    'left: '    + this.position.x + '%; '  +
    'top: '     + this.position.y + '%; '  +
    'width: '   + this.size       + 'px; ' +
    'height: '  + this.size       + 'px; ' +
    'opacity: ' + this.opacity    + '; ';
    if (doKuler) {
      for (x = 0; x < vendorPrefixes.length; x++) {
        prefix = vendorPrefixes[x];
        cssText +=
        'background-image: -' + 
        prefix + '-radial-gradient(' +
        'center, circle closest-side, ' +
        'rgba(' + this.kulerRGB + ', 0.8), ' +
        'rgba(' + this.kulerRGB + ', 0.8) 94%, ' +
        'rgba(' + this.kulerRGB + ', 1) 97%, ' +
        'rgba(' + this.kulerRGB + ', 0) 100% ' +
        ');';
      }
    } else {
      for (x = 0; x < vendorPrefixes.length; x++) {
        prefix = vendorPrefixes[x];
        cssText +=
        'background-image: -' + prefix + '-radial-gradient(center, circle closest-side, hsla(' + this.hue + ', 100%, 50%, 1), hsla(' + this.hue + ', 100%, 50%, 0));';
      }
    }
    this.el.style.cssText = cssText;
  };

  switch(kind) {
    case 'dot' :
    this.size = Math.random() * 100 + 200;
    this.brigthness = Math.random();
    this.opacity = (this.size / 500) * this.brigthness;
    this.setParameters();
    this.el = document.createElement('div');
    this.el.className = 'dekoElement';
    this.el.id = 'el_' + n;
    this.setCSS();
    
    this.iterate = function() {
      this.position.x += this.speed.x;
      this.position.y += this.speed.y;
      this.position.x = this.position.x < 0 ? 100 : this.position.x > 100 ? 0 : this.position.x;
      this.position.y = this.position.y < 0 ? 100 : this.position.y > 100 ? 0 : this.position.y;
      if (!doKuler) {
        this.hue += huespeed;
        if (this.hue >= 360) {
          this.hue = 0;
        }
      }
      this.setCSS();
    };
    break;
    case 'drop' :
    this.size = Math.random() * 200 + 100;
    this.brigthness = Math.random();
    this.opacity = (this.size / 300) * Math.random(); // * this.brigthness;
    this.setParameters();
    this.el = document.createElement('div');
    this.el.className = 'dekoElement';
    this.el.id = 'el_' + n;
    this.setCSS();
    
    this.iterate = function() {
      this.opacity -= 0.002;
      if (this.opacity < 0) {
        this.opacity = (this.size / 300); // * this.brigthness;
        this.position = { x : Math.random() * 100, y: Math.random() * 100 };
      }
      if (!doKuler) {
        this.hue += huespeed;
        if (this.hue >= 360) {
          this.hue = 0;
        }
      }
      this.setCSS();
    };
    break;
    case 'minidrop' :
    this.size = Math.random() * 20 + 20;
    this.brigthness = Math.random();
    this.opacity = (this.size / 40) * Math.random(); // * this.brigthness;
    this.setParameters();
    this.el = document.createElement('div');
    this.el.className = 'dekoElement';
    this.el.id = 'el_' + n;
    this.setCSS();
    
    this.iterate = function() {
      this.opacity -= 0.007;
      if (this.opacity < 0) {
        this.opacity = (this.size / 40); // * this.brigthness;
        this.position = { x : Math.random() * 100, y: Math.random() * 100 };
      }
      if (!doKuler) {
        this.hue += huespeed;
        if (this.hue >= 360) {
          this.hue = 0;
        }
      }
      this.setCSS();
    };
    break;
    default: break;
  }
  document.body.appendChild(this.el);
}

function Deko() {

  var
  area = windowSize(),
  deko = [],
  i,
  framerate = 25,
  density = 1 / 10000, // 40000 equals 50 on my screen
  dekoCount = Math.floor(density * area.w * area.h),
  kulerSetName;

  if (doKuler) {
    kulerSetName = document.createElement('div');
    kulerSetName.className = 'kulerSetName';
    kulerSetName.appendChild(document.createTextNode('Kuler Set: ' + kuler.setname + ' by ' + kuler.author));
    document.body.appendChild(kulerSetName);
    document.body.classList.add('blackBackdrop');
    // 'background-color: ' + kuler.c[0] + ';' +
  }

  function iterateDeko(dekor){
    var i, l = dekor.length;
    for (i = 0; i < dekor.length; i++) {
      dekor[i].iterate();
    }
  }

  for (i = 0; i < dekoCount; i++) {
    deko[i] = new DekoElement('minidrop', i);
  }

  setInterval(function(){ iterateDeko(deko); }, 1000 / framerate);

}