var card = {
  width: 800,
  height: 450,
  holder: null,
  canUpdate: true,
  scenes: Array('default', 'night', 'nightfall'),
  snowHolder: null,
  classes: ['option-1', 'option-2', 'option-3'],
  
  init: function()
  {
    var self = this;
    
    self.holder = $('#card');
    
    $('#btn-close').click(function(e)
    {
      e.preventDefault();
      $('#notification')
        .animate({
          'top': -500
        }, 500, function()
        {
          $(this).remove();
        });
    });
    
    var sheepSound = document.getElementById('sheep-sound');
    var windSound = document.getElementById('wind-sound');
    
    card.background = $('#backgrounds a.current').data('variation');
    card.scene = $('#toggle-scene').data('variation');
    card.snow = $('#toggle-snow').data('variation');
    card.sheep = $('#toggle-sheep').data('variation');
    
    var version = parseInt($.browser.version);
    if($.browser.msie === true && version < 9)
    {
      var storm = snowStorm(window, document);
      storm.snowColor = '#eae7ff';
      storm.flakesMax = 200;
      storm.flakesMaxActive = 100;
      storm.targetElement = 'snow-ie';
      storm.snowStick = false;
    
      $('#toggle-snow').addClass('defect');
    }
    else
    {
      snow.init();
      snow.background = $('#backgrounds a.current').data('variation') - 1;
      snow.scene = $('#toggle-scene').data('variation') - 1;
      snow.setParticles($('#toggle-snow').data('variation'));
    
      $('#toggle-snow')
        .click(function(e)
        {
          e.preventDefault();
          
          var el = $(this);
          var variation = el.data('variation');
          
          variation = (++variation > 8 ? variation = 1 : variation);
          el.attr('data-variation', variation);
          el.data('variation', variation);
          
          el.removeClass('state-1');
          el.removeClass('state-2');
          el.removeClass('state-3');
          el.removeClass('state-4');
          el.removeClass('state-5');
          el.removeClass('state-6');
          el.removeClass('state-7');
          el.removeClass('state-8');
          
          el.addClass('state-' + variation);
          card.snow = variation;
          
          self.updateSocial();
          
          windSound.src = 'audio/wind-' + variation + '.' + ($.browser.webkit ? 'mp3' : 'ogg');
          
          $('#snow-value').val(variation);
          snow.setParticles(variation);
        });
    };
    
    $('#btn-send')
      .click(function(e)
      {
        e.preventDefault();
        $(this).toggleClass('active');
        self.holder.toggleClass('flip');
      });
      
    $('#toggle-scene')
      .click(function(e)
      {
        e.preventDefault();
        
        if(self.canUpdate)
        {
          var el = $(this);
          var variation = el.data('variation');
          
          variation = (++variation > 3 ? variation = 1 : variation);
          el.attr('data-variation', variation);
          el.data('variation', variation);
          
          el.removeClass('state-1');
          el.removeClass('state-2');
          el.removeClass('state-3');
          el.removeClass('state-4');
          el.removeClass('state-5');
          el.removeClass('state-6');
          el.removeClass('state-7');
          el.removeClass('state-8');
          
          el.addClass('state-' + variation);
          
          snow.scene = variation - 1;
          card.scene = variation;
          $('.layer').attr('data-folder', self.scenes[snow.scene]);
          
          $('#scene-value').val(variation);
          
          self.updateSocial();
          
          self.updateImages($('.layer'), true);
        };
      });
    
    $('#backgrounds a')
      .click(function(e)
      {
        e.preventDefault();

        if(self.canUpdate)
        {
          $('#backgrounds a').removeClass('current');
          
          var el = $(this);
          var target = $('#background');
          var variation = el.data('variation');
          el.addClass('current');
          
          target.attr('data-variation', variation);
          target.data('variation', variation);
          
          snow.background = variation - 1;
          card.background = variation;
          
          self.updateSocial();
            
          $('#background-value').val(variation);
          
          self.updateImages(target);
        };
      });
    
    $('#toggle-sheep')
      .click(function(e)
      {
        e.preventDefault();
        
        if(self.canUpdate)
        {
          var el = $(this);
          var target = $('#sheep');
          var variation = target.data('variation');
          
          variation = (++variation > 4 ? variation = 1 : variation);
          target.attr('data-variation', variation);
          target.data('variation', variation);
          
          el.removeClass('state-1');
          el.removeClass('state-2');
          el.removeClass('state-3');
          el.removeClass('state-4');
          el.removeClass('state-5');
          el.removeClass('state-6');
          el.removeClass('state-7');
          el.removeClass('state-8');
          
          el.addClass('state-' + variation);
          
          card.sheep = variation;
          
          self.updateSocial();
          
          sheepSound.src = 'audio/sheep-' + variation + '.' + ($.browser.webkit ? 'mp3' : 'ogg');
          
          $('#sheep-value').val(variation);
          
          self.updateImages(target);
        }
      });
    
    self.holder
      .mousemove(function(event) {
        var el = $(this);
        offset = Math.round(9 / 800 * (event.pageX - el.offset().left));
        
        snow.wind = (snow.width/2 - (event.pageX - el.offset().left));
        
        self.animateElements(el, offset);
      });
    
    if(self.holder.hasClass('send'))
    {
      $('#btn-switch').trigger('click');
    };
  },
  
  updateSocial: function()
  {
    $('#btn-facebook').attr('href', 'http://www.facebook.com/sharer.php?u=' + hostUrl + '%3Famount_of_snow%3D' + (card.snow) + '%26background_variation%3D' + (card.background) + '%26sheep_variation%3D' + (card.sheep) + '%26scene%3D' + (card.scene));
    $('#btn-twitter').attr('href', 'https://twitter.com/intent/tweet?text=Fijne feestdagen allemaal&url=' + hostUrl + '%3Famount_of_snow%3D' + (card.snow) + '%26background_variation%3D' + (card.background) + '%26sheep_variation%3D' + (card.sheep) + '%26scene%3D' + (card.scene));
  },
  
  updateImages: function(images, hardSwitch)
  {
    var self = this;
    self.canUpdate = false;
    
    images.each(function()
    {
      var el = $(this);
      var imageName = el.data('image');
      var filename = imageName.substr(0, imageName.length - 4) + '-' + el.data('variation') + imageName.substr(imageName.length - 4);
      var newImage = el.clone();
      newImage.attr('src', 'images/' + el.data('folder') + '/' + filename);
      newImage
        .insertAfter(el)
        .hide()
        .imgpreload({
          all: function()
          {
            if(hardSwitch)
            {
              newImage.show();
              el.remove();
              self.canUpdate = true;
            }
            else
            {
              if(newImage.hasClass('sheep'))
              {
                newImage.fadeIn(500);
                el.fadeOut(500, function()
                {
                  $(this).remove();
                  self.canUpdate = true;
                });
              }
              else
              {
                newImage.fadeIn(500, function()
                {
                  el.remove();
                  self.canUpdate = true;
                });
              };
            };
          }
        });
    });
  },
  
  animateElements: function(el, value)
  {
    el
      .find('.layer')
      .css({
        'left': (0 - value * 800)
      })
      .end();
  }
};

var snow = {
  canvas: document.getElementById('snow'),
  ctx: null,
  width: 800,
  height: 450,
  wind: 0,
  scene: 0,
  background: 0,
  colors: [
    ['rgba(255, 255, 255, 0.5)', 'rgba(208, 187, 151, 0.3)', 'rgba(114, 109, 90, 0.5)'],
    ['rgba(150, 150, 255, 0.5)', 'rgba(150, 150, 255, 0.3)', 'rgba(37, 41, 63, 0.5)'],
    ['rgba(255, 150, 150, 0.5)', 'rgba(255, 150, 150, 0.3)', 'rgba(168, 142, 81, 0.3)']
  ],
  particles: [],
  
  init: function()
  {
    var self = this;
    self.ctx = self.canvas.getContext('2d');
    
    function loop()
    {
      self.ctx.clearRect(0, 0, self.width, self.height);
      for(var i = 0; i < self.particles.length; i++)
      {
        self.particles[i].update();
      };
      setTimeout(loop, 1000/30);
    };
    loop();
  },
    
  randomRange: function(min,max){
    return Math.round(Math.random()*(max-min) + min);
  },
  
  particle: function()
  {
    var _this = this;
    _this.x = snow.randomRange(0, snow.width);
    _this.y = snow.randomRange(0, snow.height);
    _this.depth = snow.randomRange(-100, 200);
    _this.scale = 250/(250+_this.depth);
    _this.speedX = snow.randomRange(-2, 2) * _this.scale;
    _this.speedY = 5 * _this.scale;
    
    _this.update = function()
    {
      snow.ctx.fillStyle = snow.colors[snow.scene][snow.background];
      snow.ctx.beginPath();
      snow.ctx.arc(_this.x, _this.y, 1.5 * _this.scale, 0, Math.PI*2, true);
      snow.ctx.closePath();
      snow.ctx.fill();
      
      if(snow.background != 2)
      {
        _this.x+=_this.speedX + snow.wind * (0.02 * _this.scale);
        _this.y+=_this.speedY;
        if(_this.y > snow.height)
        {
          _this.y = -20;
        };
      }
      else
      {
        _this.x+=_this.speedX/4;
        _this.y-=_this.speedY/10;
        if(_this.y < -20)
        {
          _this.y = snow.height;
        };
      };
      
      if(_this.x > snow.width) _this.x = -20;
      if(_this.x < -20) _this.x = snow.width;
    }
    _this.update();
  },
  
  setParticles: function(number)
  {
    number = Math.pow(number, 3) * 10 + 100;
    var self = this;
    if(self.particles.length > number)
    {
      while(self.particles.length > number)
      {
        self.particles.pop();
      };
    }
    else
    {
      for(var i = self.particles.length; i < number - self.particles.length; i++)
      {
        self.particles[i] = new self.particle();
      };
    };
  }
};

var mouth = {
  song: [
    '6.183453559875488',
    '7.104609489440918',
    '7.5359930992126465',
    '8.796854972839355',
    '9.638373374938965',
    '10.070096969604492',
    '11.256718635559082',
    '12.472908973693848',
    '12.914762496948242',
    '13.354269981384277',
    '13.730142593383789',
    '20.846446990966797',
    '21.678539276123047',
    '22.128170013427734',
    '23.312318801879883',
    '24.160634994506836',
    '24.568849563598633',
    '25.792341232299805',
    '26.579076766967773',
    '27.017013549804688',
    '28.232608795166016',
    '29.080778121948242',
    '29.49605369567871',
    '30.718503952026367',
    '31.510276794433594',
    '31.926395416259766',
    '33.174346923828125',
    '34.046470642089844',
    '34.430809020996094',
    '35.65499496459961',
    '36.07007598876953',
    '36.47617721557617',
    '36.916263580322266',
    '37.31538009643555',
    '37.74626159667969',
    '38.1623420715332',
    '38.56449508666992',
    '38.976070404052734',
    '39.36819076538086',
    '40.56855392456055',
    '41.37472152709961',
    '41.815834045410156',
    '43.01304626464844',
    '43.80451965332031',
    '44.24420166015625',
    '45.506446838378906',
    '46.66676330566406',
    '47.912479400634766',
    '48.6942024230957',
    '49.13501739501953',
    '50.438602447509766',
    '51.32676315307617',
    '51.74867630004883',
    '52.572566986083984',
    '52.98103332519531',
    '53.38823699951172',
    '53.81830596923828',
    '54.288246154785156'
  ],
  
  init: function()
  {
    var self = this;
    
    self.mouth = $('#mouth');
    
    var audio = document.getElementById('pompompompom');
    
    audio.addEventListener("timeupdate", function() {
      if(audio.currentTime > self.song[0] && audio.currentTime - self.song[0] < 5)
      {
        var timer = self.song.shift();
        self.song.push(timer);
        
        self.mouth.addClass('active');
        setTimeout(function()
        {
          self.mouth.removeClass('active');
        }, 100);
      }
    }, false);
  }
};

$(document).ready(function()
{
  $('#container')
    .hide()
    .find('img')
    .imgpreload({
      each: function()
      {
      },
      all: function()
      {
        $('#container').show();
        $('#loading').hide();
        card.init();
        
        var version = parseInt($.browser.version);
        if($.browser.msie === true && version < 9)
        {
        }
        else
        {
          mouth.init();
        }
      }
    });
  
  var cache = [];
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    };
  };

  jQuery.preLoadImages(
    "images/default/background-1.jpg",
    "images/default/background-2.jpg",
    "images/default/background-3.jpg",
    "images/default/sheep-1.png",
    "images/default/sheep-2.png",
    "images/default/sheep-3.png",
    "images/default/sheep-4.png",
    "images/night/background-1.jpg",
    "images/night/background-2.jpg",
    "images/night/background-3.jpg",
    "images/night/sheep-1.png",
    "images/night/sheep-2.png",
    "images/night/sheep-3.png",
    "images/night/sheep-4.png",
    "images/nightfall/background-1.jpg",
    "images/nightfall/background-2.jpg",
    "images/nightfall/background-3.jpg",
    "images/nightfall/sheep-1.png",
    "images/nightfall/sheep-2.png",
    "images/nightfall/sheep-3.png",
    "images/nightfall/sheep-4.png"
  );

});