(function() {
  
  var animationEndEventNames = {
      'WebkitAnimation' : 'webkitAnimationEnd',
      'MozAnimation'    : 'animation',
      'animation'       : 'animation'
  },
  animEndEventName = animationEndEventNames[ Modernizr.prefixed('animation') ];

  var Checkbox = {
      el: document.getElementById('checkme'),

      init: function() {
        this.bindEvents();    
      },
    
      bindEvents: function() {
        this.el.addEventListener('change', this.onChange, false);
        this.el.addEventListener(animEndEventName, this.onAnimationEnd, false);
      },
    
      onChange: function(e) {
        var cl = e.target.classList;
  
        cl.toggle('checked', this.checked);
        cl.toggle('unchecked', !this.checked);
        cl.toggle('checkmark', !this.checked);
        cl.toggle('box', this.checked);
      },
    
      onAnimationEnd: function(e) {
        var cl = e.target.classList;
  
        cl.toggle('checkmark', this.checked && !cl.contains('checkmark'));
        cl.toggle('box', !this.checked && !cl.contains('box'));
      }
  };
    
  Checkbox.init();
}());