var Canvas = function(id){
  this.el = document.getElementById(id);
  this.screen = this.el.getContext("2d");
}

Canvas.prototype = {
  loadImage: function(url) {
    return new Promise(_.bind(function(resolve) {
      var img = new Image(),
          self = this;
      
      img.onload = function() {
        self.el.width = img.width;
        self.el.height = img.height;
        self.screen.drawImage(img,0,0);
        return _.debounce(resolve(img),100);
      };
      
      img.src = url;
      // make sure the load event fires for cached images too
      if ( img.complete || img.complete === undefined ) {
          img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
          img.src = url;
      }
    }, this));
  },
  
  toBoxShadow: function(blur, zoom, filter) {
    var 
        width = this.screen.canvas.clientWidth,
        height = this.screen.canvas.clientHeight,
        imgData = this.screen.getImageData(0,0,width,height);

    var pixelShadow = '';
    var x=0, y=0, color = 0, vector = [];
    
    for (var i=0;i<imgData.data.length;i+=4 ) {
      
      vector = [ imgData.data[i],imgData.data[i+1], imgData.data[i+2], imgData.data[i+3] ]
      
      if (typeof filter === 'function') {
        color = filter(vector);
      } else {
        color = vector.join(',');
      }
        
      if ((i/4) % width) {
          x++;
      } else {
          y++; x=0;
      }
      
       pixelShadow +=  x*zoom+'px '+y*zoom+'px '+ 1*blur+'px '+0+'px rgba(' + color + '),';
    }
    // removes last comma if exists
    pixelShadow = (/,$/i.test(pixelShadow)) ? pixelShadow.substr(0, pixelShadow.length - 1) : pixelShadow;
    return pixelShadow;
   },
  
   filters: {
     invert: function(vector) {
       return Array(255-vector[0],255-vector[1],255-vector[2], vector[0]);
     } 
   }
  
}

var Style = function(selector, body) {
   //this.props = _.extend({}, properties);
   this.el = selector;
   this.reference = 
   this.head = this.el + '{ ';
   this.body = body || '';
   this.keyframes = [];
}

Style.prototype = {
  
  addKeyframe: function(name, code) {
    var 
       webkit = '@-webkit-keyframes '+ name + code,
       common = '@keyframes ' + name + code;
    this.keyframes.push(webkit+common);
    return this;
  },
  
  addAnimation: function(name, duration, timingf, iteration, delay) {
    var 
       create = function(vendor) {
         return vendor+'animation-name: '+name+'; '+vendor+'animation-duration: '+duration+'s; '+vendor+'animation-timing-function: '+timingf+'; '+vendor+'animation-delay: '+delay+'; '+vendor+'animation-iteration-count: '+iteration+'; '+vendor+'animation-direction: normal;'
       }
       
    this.body += create('-webkit-') + create('');
  },
  
  addPseudo: function(pseudo, code) {
    this.head = this.el + '::' + pseudo + code + this.head;
  },
  
  toString: function() {
    return this.head + this.body + '} ' + this.keyframes.join(' ');
  },
  
  appendToHead: function(headTag) {
    var
      style = document.createElement('style');
    
    style.type = 'text/css';
    style.innerHTML = this.toString();
    headTag.appendChild(style);
  },
  remove: function()  {
    
  }
}



//
// Main
//

var App = function(canvasId, imageList, appId) {
  this.canvas = new Canvas(canvasId);
  this.imgList = imageList;
  this.el =  document.getElementById(appId);
  this.running = false;
  this.baseHead = document.getElementsByTagName('head')[0].innerHTML;
  
  var that = this;
  
  var img = document.getElementById('image');
  if (img) {
    this.imgSource = img.src;
  } else {
    if (imageList[0]) {
      imageList[0].id = "image";
      this.imgSource = imageList[0].src;
    }
  }
  
  _.each(this.imgList, function(i) {
    i.addEventListener('click', function(e) {
      var old = document.getElementById('image');
      if (old && old.id != e.toElement.id) {
        old.id = "";
        e.toElement.id = "image";
        that.imgSource = e.toElement.src;
        if (that.running) {
          that.el.innerHTML = "";
          that.running = false;
          that.render();
        }
      }
    })
  });
}

App.prototype.render = function() {
  var that = this;
  
  // restarting codepen
  document.getElementsByTagName('head')[0].innerHTML = this.baseHead;
  
  var startButton = document.createElement('div');
  startButton.className = "btn-start";
  startButton.innerHTML = '<div class="button raised blue half"><div class="center" fit>GO!</div><paper-ripple fit></paper-ripple></div>';
  
  this.el.appendChild(startButton);
  
  startButton.addEventListener('click', function(e) {
    setTimeout(function() {
      startButton.parentNode.removeChild(startButton);
    },300);
    
    setTimeout(_.bind(that.start,that), 600);
  });
}

App.prototype.start = function() { 

  var that = this;
  var template = document.createElement('div');
  var spinner = document.createElement('span');
  template.className = "shadowesome half";
  spinner.innerHTML = "Please wait, generating shadows...";
  template.appendChild(spinner);
  this.el.appendChild(template);
  this.running = true;
  this.canvas.loadImage(this.imgSource)
    .then(function(img) { 
      var
        head = "",style,frame,
        mocks = {
          normal: that.canvas.toBoxShadow(0,1),
          blur: that.canvas.toBoxShadow(5, 1),
          invert: that.canvas.toBoxShadow(0, 1, that.canvas.filters.invert),
          half: that.canvas.toBoxShadow(0,.5),
          double: that.canvas.toBoxShadow(0,2)
        }
        for (var key in mocks) {

          style = new Style('.shadowesome.'+key+'::after', 'box-shadow: ' + mocks.normal +';');
          frame = '{ 0%,100% {  box-shadow: ' + mocks.normal + ' } 50% { box-shadow: '+mocks[key]+' } }';
          style.addKeyframe(key, frame);  
          style.addAnimation(key,3,'linear',1,0);
          head += style.toString(); 
        }
        
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = head;
        document.getElementsByTagName('head')[0].appendChild(style);
        
        spinner.parentNode.removeChild(spinner);
    });
  
    var onBtnClick = function(e) {
      var value = e.currentTarget.attributes.getNamedItem('data-attr').value;
      if (value.length) {
      
      }
      var shadow = document.getElementsByClassName('shadowesome')[0];
      shadow.className = 'shadowesome ' + value; 
    }
  
    var btns = document.getElementsByClassName("btn");
    _.each(btns, function(b) { b.addEventListener('click', onBtnClick); });
}

window.onload = function() {
  var imgList = document.getElementsByTagName('img');
  
  var app = new App('canvas', imgList, 'app-shadow').render();
  
  console.log('No jQuery was required :)');
};