(function($) {
  $.preloadImages = function(callback) {
    var loader = $('<div id="imageLoader"><div class="loader-text">Loading: <span id="percent">0</span>%</div></div>');
    var percent = $('span#percent', loader);
    $('body').append(loader);
    var loaderImg = './images/loader.gif';
    var images = [
      './images/big_logo.png',
      './images/curve.png',
      './images/line.gif',
      './images/intro/image_01.png',
      './images/intro/image_02.png',
      './images/intro/image_03.png',
      './images/intro/image_04.png',
      './images/box/box-top.png',
      './images/box/box-bottom.png',
      './images/box/box-left.png',
      './images/box/box-right.png',
      './images/box/box-top-left.png',
      './images/box/box-top-right.png',
      './images/box/box-bottom-right.png',
      './images/box/box-bottom-left.png',
      './images/box/box-invert-top.png',
      './images/box/box-invert-bottom.png',
      './images/box/box-invert-left.png',
      './images/box/box-invert-right.png',
      './images/box/box-invert-top-left.png',
      './images/box/box-invert-top-right.png',
      './images/box/box-invert-bottom-right.png',
      './images/box/box-invert-bottom-left.png',
      './images/gallery-scroller.png',
      './images/bg_merc_acad.jpg',
      './images/bg_clarendon.jpg'
    ];

    $('img').each(function() { images.push($(this).attr('src')); });

    var totalLoaded = 0;
    var totalImages = images.length;

    var loadThisImage = function(src) {
      var img = new Image();
      $(img).load(function() {
        totalLoaded++;
        var perc = (totalLoaded / totalImages) * 100;
        setTimeout(function() {percent.text(perc.toFixed(0));},10);
          
        if (totalLoaded == totalImages) {
          setTimeout(function() {
            loader.remove();
            var introSpace = $('<div id="introSpace"></div>');
            $('body').append(introSpace);
            var main = $('#main');
            $.playIntro(introSpace, main, callback);
          }, 250);
        }
      }).attr('src', src);
    };
    var graphic = new Image();
    $(graphic).load(function() {
      for (var i = 0; i < images.length; i++) {
        loadThisImage(images[i]);
      };
    }).attr('src', loaderImg);
  };
  $.playIntro = function(canvas, main, callback) {
    var skip = $('<span class="skip-button">Skip</span>');
    canvas.append('<div class="skip-area"></div>');
    $('.skip-area', canvas).append(skip);
    skip.click(function() {
      $('div', canvas).stop(true);
      if (!main.is('.visible')) {
        main.addClass('visible');
        callback();
      }
      canvas.remove();
    });

    main.show();

    var time = 2500;
    var prev = null;
    for (var i = 1; i <= 4; i++) {
      var start = 100 + ((time - 500) * (i - 1));
      var img = $('<img class="anim" id="img0'+i+'" src="./images/intro/image_0'+i+'.png"\>');
      img.css('opacity',0);
      canvas.append(img);

      img.animate({'opacity':0},{queue: true, duration: start}); 
      img.animate({'opacity':1},{queue: true, easing: 'easeInOutQuad', duration: time, complete: function() {
        var timg = $(this);
        timg.prev('.anim').hide();
        if (timg.attr('id') == 'img04') {
          img.animate({'width':'397px', 'height':'60px'}, {queue: false, easing: 'easeOutBack', duration: 2000});
          img.animate({'left':'-13px'}, {queue: false, easing: 'easeInOutCirc', duration: 2000});
          img.animate({'top':'-4px'}, {queue: false, easing: 'easeInOutSine', duration: 2000});
        }
      }}); 
      prev = img;
    }

    canvas.animate({'opacity':1}, {queue: false, duration: (time*5), complete: function() {
      skip.remove();
      if (!main.is('.visible')) {
        main.addClass('visible');
        callback();
      }
      canvas.animate({'opacity':0}, {queue: false, easing: 'easeInOutQuad', duration: 3000, complete: function() { canvas.remove(); }});
    }});
    
    /*
    var img = $('<div id="animImage"></div>');
    var skip = $('<span class="skip-button">Skip</span>');
    main.show();

    var corners = [ 'tl', 'tr', 'bl', 'br' ];

    canvas.append(img);
    
    for (var i = 0; i < corners.length; i++) {
      canvas.append('<div id="' + corners[i] + '" class="anim block"></div>');
      canvas.append('<div id="' + corners[i] + '-black" class="anim black-block"></div>');
    }
    canvas.append('<div class="skip-area"></div>');
    $('.skip-area', canvas).append(skip);

    var blocks = $('.anim', canvas);
    var color = $('.block', canvas);
    var black = $('.black-block', canvas);
    img.css('opacity', 0);
    blocks.css('opacity', 0);

    skip.click(function() {
      $('div', canvas).stop(true);
      if (!main.is('.visible')) {
        main.addClass('visible');
        callback();
      }
      canvas.remove();
    });

    img.animate({'opacity': 1}, {queue: true, duration: 1000});
    blocks.animate({'opacity': 1}, {queue: true, duration: 1000 });
    blocks.animate({'opacity':1}, {queue:true, duration: 500});
    black.animate({'left': '+=4px','top':'+=4px'}, {queue: true, duration: 400});
    black.animate({'opacity':1}, {queue: true, duration: 2000});
    black.animate({'left': '-=5px','top': '-=5px', 'opacity': 0}, {queue: true, duration: 500});
    black.animate({'opacity':0}, {queue: true, duration: 2000, complete: function() {
      black.remove();
      canvas.animate({'opacity':1}, {queue: false, duration: 1000, complete: function() {
        skip.remove();
        if (!main.is('.visible')) {
          main.addClass('visible');
          callback();
        }
        canvas.animate({'opacity':0}, {queue: false, easing: 'easeInOutQuad', duration: 3000, complete: function() { canvas.remove(); }});
      }});
    }});
     */
  };
})(jQuery);