var $root = $(document.documentElement),
    $window = $(window);

$root.attr("class","js");

$(function(){

  function animateLoader() { 

    var loader = $("#loader"),
        loaderPos = 0;
    setInterval(function(){
      if(loaderPos == 12)
        loaderPos = 0;
      loader.css("background-position", (loaderPos * -15) + "px 0");
      loaderPos++;
    }, 60);

  }
  function preload() {

    var $works = $("section"),
        postboxCompose = function() {

          var postboxCompose = $works.eq(1),
              emptyElt = $("<div/>");

          postboxCompose
            .append($("<span/>", {"class":"compose-area"}))
            .children()
            .wrapAll(emptyElt.clone().addClass("wrap"))
            .end()
            .prepend(emptyElt.clone().addClass("shadow"))
            .prepend(emptyElt.clone().addClass("gradient"));

        },
        kickoffTodos = function() {

          var kickoffTodos = $works.eq(5),
              emptyElt = $("<span/>");

          kickoffTodos
            .prepend(emptyElt.clone().addClass("starsFront"))
            .prepend(emptyElt.clone().addClass("starsMiddle"))
            .prepend(emptyElt.clone().addClass("starsBack"))
            .prepend(emptyElt.clone().addClass("bg"))
            .append(emptyElt.clone().addClass("blur"));

        },
        thanks = function() {

          var animBox = $works.eq(6).children("p").eq(0),
              animImagesLength = 100;

          function insertImg(src) {
            var img = $("<img/>", {
              alt:"",
              src:"images/thanks/" + src + ".png"
            })
            img.appendTo(animBox);
          }

          for(var i = animImagesLength; i > -1; i--) insertImg(i);

        };

    postboxCompose();
    kickoffTodos();
    thanks();

  };

  animateLoader();
  preload();

});

$window.load(function(){

  // Helpers

  var browserCSSPrefix = "",
      animationEndEvent = "animationend";

  if($.browser.webkit) {
    browserCSSPrefix = "-webkit-";
    animationEndEvent = "webkitAnimationEnd";
  }
  else if($.browser.mozilla)
    browserCSSPrefix = "-moz-";
  else if($.browser.opera)
    browserCSSPrefix = "-o-";

  var windowWidth = $root.width(),
      windowHeight = $root.height(),
      $style = $("<style/>").appendTo("head"),
      $works = $("section"),
      logo = $("h1"),
      baseline = $("h2"),
      reactiveClass = "reactive",
      visibleClass = "visible",
      hiddenClass = "hidden",
      resizeScreenshot = function(screenshot){

        var windowWidth = $root.width(),
            windowHeight = $root.height();
            screenshotWidth = screenshot.width(),
            screenshotHeight = screenshot.height();

        if(windowHeight < screenshotHeight)
          screenshot.css(
            prefix("transform"),"scale(" + windowHeight / screenshotHeight + ")"
          );
        else if(windowWidth < screenshotWidth)
          screenshot.css(
            prefix("transform"),"scale(" + windowWidth / screenshotWidth + ")"
          );
        else
          screenshot.css(prefix("transform"),"scale(1)");

      },
      prefix = function(obj) {
        if(obj instanceof Object) {
          var dict = obj,
              newDict = {};
          $.each(dict,function(key , value) {
            newDict[prefix(key)] = value;
          });
          return newDict;
        }
        if([
          "transform",
          "animation",
          "animation-name",
          "animation-duration",
          "animation-timing-function",
          "animation-iteration-count",
          "animation-direction",
          "animation-delay"
        ].indexOf(obj) > -1)
          obj = browserCSSPrefix + obj;
        return obj;
      },
      insertCSSAnimation = function(name, properties) {
        var anim = "@" + browserCSSPrefix + "keyframes " + name + " {\n";
        $.each(properties, function(progress, props) {
          anim += "\t" + progress + "% {\n";
          $.each(props,function(key , value) {
            anim += "\t\t" + key + ":" + value + ";\n";
          })
          anim += "\t" + "}\n";
        })
        anim += "}\n";
        $style.append(anim);
      };

  // Works

  function personal32pxSet(){

    var personal32pxSet = $works.eq(0),
        images = personal32pxSet.children("img");

    function inAnim(){

      personal32pxSet.addClass(visibleClass);

      var animName = "inPersonal32pxSet";

      insertCSSAnimation(animName, {
        0 : prefix({ "transform" : "translateX(" + windowWidth + "px)" }),
        50 : prefix({ "transform" : "translateX(-20px)" }),
        100 : prefix({ "transform" : "translateX(0)" })
      });

      images
        .css(prefix({
          "transform":"translateX(" + windowWidth + "px)",
          "animation":animName + " .8s cubic-bezier(.2,.6,.3,1)"
        }))
        .bind(animationEndEvent, function(e){
          if(e.originalEvent.animationName == animName) {
            images.css(prefix("transform"),"translateX(0)");
            $root.addClass(reactiveClass);
          }
        });

      images.eq(0).css(prefix("animation-delay"),"1.2s");
      images.eq(1).css(prefix("animation-delay"),"1.4s");
      images.eq(2).css(prefix("animation-delay"),"1.6s");
      images.eq(3).css(prefix("animation-delay"),"1.8s");

    }
    function outAnim(){

      if(!$root.is("." + reactiveClass)) return;

      $root.removeClass(reactiveClass);

      var animName = "outPersonal32pxSet",
          imagesLength = images.length;

      insertCSSAnimation(animName, {
        0 : {},
        100 : prefix({ "transform":"translateX(-" + windowWidth + "px)" })
      });

      images.each(function(i){

        var $this = images.eq(i),
            animDelay = 0;

        if(i == 1) animDelay = "08";
        else if(i == 2) animDelay = "16";
        else if(i == 3) animDelay = "24";

        $this
          .css(
            prefix("animation"),
            animName + " 1s cubic-bezier(.7,0,.6,.2) ." + animDelay + "s"
          )
          .bind(animationEndEvent, function(){
            $this.addClass(hiddenClass);
            if(i == imagesLength - 1) {
              personal32pxSet.removeClass(visibleClass);
              postboxCompose();
            }
          });

      });

    }

    inAnim();
    $root.click(outAnim);

  };
  function postboxCompose(){

    var postboxCompose = $works.eq(1),
        gradient = postboxCompose.children(".gradient"),
        shadow = postboxCompose.children(".shadow"),
        wrap = postboxCompose.children(".wrap");

    postboxCompose.addClass(visibleClass);
    $root.css("background","#DF93BE");
    logo.css("text-shadow","0 1px 0 rgba(0,0,0,.35)");
    baseline.css({
      "color":"#5A3D51",
      "text-shadow":"0 1px 0 rgba(255,255,255,.15)"
    });

    insertCSSAnimation("showGradient", {
      0 : prefix({
        "opacity":"0",
        "transform":"scale(1.2)"
      }),
      100 : {}
    });

    insertCSSAnimation("showWindow", {
      0 : prefix({
        "opacity":"0",
        "transform":"scale(.3)"
      }),
      40 : prefix({
        "opacity":"0",
        "transform":"scale(.3)"
      }),
      50 : prefix({
        "opacity":".1",
        "transform":"scale(1.05)"
      }),
      60 : prefix({
        "opacity":".2",
        "transform":"scale(.98)"
      }),
      70 : prefix({
        "opacity":".3",
        "transform":"scale(1.02)"
      }),
      100 : {}
    });

    insertCSSAnimation("resizeShadow", {
      0 : prefix({
        "opacity":"0",
        "transform":"scaleY(.965) translateY(11px)"
      }),
      40 : prefix({
        "opacity":"0",
        "transform":"scaleY(.965) translateY(11px)"
      }),
      68 : prefix({"transform":"scaleY(.965) translateY(11px)"}),
      100 : {}
    });

    insertCSSAnimation("toolbarSlidesUp", {
      0 : prefix({"transform":"translateY(21px)"}),
      80 : prefix({"transform":"translateY(21px)"}),
      100 : {}
    });

    insertCSSAnimation("formatSlidesDown", {
      0 : prefix({"transform":"translateY(-26px)"}),
      88 : prefix({"transform":"translateY(-26px)"}),
      100 : {}
    });

    insertCSSAnimation("outWindow", {
      0 : {},
      20 : prefix({
        "opacity":".9",
        "transform":"scale(1.05)"
      }),
      35 : prefix({
        "opacity":".8",
        "transform":"scale(1.05)"
      }),
      100 : prefix({
        "transform":"scale(.1)",
        "opacity":"0"
      })
    });

    insertCSSAnimation("outGradient", {
      0 : {},
      100 : prefix({
        "opacity":"0",
        "transform":"translateY(20px)"
      })
    });

    gradient.css(
      prefix("animation"), "showGradient .8s linear"
    );

    shadow.css(
      prefix("animation"), "resizeShadow 3.5s ease-out"
    );

    wrap.css(
      prefix("animation"), "showWindow 1.8s ease-in"
    );

    postboxCompose.find("[src*=toolbar]").css(
      prefix("animation"), "toolbarSlidesUp 3s cubic-bezier(.2,.6,.3,1)"
    );

    postboxCompose.find("[src*=format]").css(
      prefix("animation"), "formatSlidesDown 3.2s cubic-bezier(.2,.6,.3,1)"
    );

    postboxCompose.bind(animationEndEvent, function(e){
      if(e.originalEvent.animationName == "formatSlidesDown") {
        $root.addClass(reactiveClass).click(function(){

          gradient.css(
            prefix("animation"),"outGradient .8s linear"
          );

          shadow.css(
            prefix("animation"),"outWindow .8s cubic-bezier(.7,0,.6,.2)"
          );

          wrap.css(
            prefix("animation"),"outWindow .8s cubic-bezier(.7,0,.6,.2)"
          );

          $root.removeClass(reactiveClass);

          postboxCompose.bind(animationEndEvent, function(e){
            if(e.originalEvent.animationName == "outGradient") {
              postboxCompose.removeClass(visibleClass);
              postboxToolbarGlyphs();
            }
          });

        });
      }
    });

    $window.resize(function(){
      resizeScreenshot(shadow);
      resizeScreenshot(wrap);
    });

  };
  function postboxToolbarGlyphs(){

    var postboxToolbarGlyphs = $works.eq(2),
        images = postboxToolbarGlyphs.children(),
        inAnimName = "inPostboxToolbarGlyph",
        outAnimName = "outPostboxToolbarGlyph";

    postboxToolbarGlyphs.addClass(visibleClass);
    $root.css("background","#D0D0D0");
    logo.css("text-shadow","0 1px 0 rgba(0,0,0,.35)");
    baseline.css({
      "color":"#888",
      "text-shadow":"0 1px 0 rgba(255,255,255,.3)"
    });

    var centerValue = parseInt(images.length / 2),
        centerImage = images.eq(centerValue),
        centerImageXPos = centerImage.position().left,
        centerImageYPos = centerImage.position().top;

    insertCSSAnimation("showCenterPostboxGlyph", {
      0 : prefix({
        "opacity":"0",
        "transform":"scale(2.5)"
      }),
      30 : prefix({
        "opacity":"0",
        "transform":"scale(2.5)"
      }),
      50 : prefix({
        "transform":"scale(.6)"
      }),
      100 : {}
    });

    centerImage.css(
      prefix("animation"),
      "showCenterPostboxGlyph 2.2s cubic-bezier(.2,.6,.3,1)"
    );

    images.each(function(i){

      if(i == centerValue) return;

      var $this = images.eq(i),
          thisInAnimName = inAnimName + i,
          thisInAnimDelay = 65 + (i/1.5),
          offsetX = (centerImageXPos - $this.position().left) + "px",
          offsetY = (centerImageYPos - $this.position().top) + "px",
          props = {
            0 : prefix({
              "opacity":"0",
              "transform":"translate(" + offsetX + "," + offsetY + ")"
            }),
            100 : {}
          };

      props[thisInAnimDelay] = prefix({
        "opacity":"0",
        "transform":"translate(" + offsetX + "," + offsetY + ")"
      });

      insertCSSAnimation(thisInAnimName, props);

      $this.css(
        prefix("animation"),
        thisInAnimName + " 3s cubic-bezier(.2,.6,.3,1)"
      );

    });

    postboxToolbarGlyphs.bind(animationEndEvent, function(e){
      if(e.originalEvent.animationName == inAnimName + (images.length - 1)) {
        $root.addClass(reactiveClass).click(function(){
          $root.removeClass(reactiveClass);
          insertCSSAnimation(outAnimName, {
            0 : {},
            20 : prefix({"transform":"scale(1.2)"}),
            100 : prefix({
              "opacity":"0",
              "transform":"scale(.1)"
            })
          });
          images
            .css(
              prefix("animation"),
              outAnimName + " 1.2s cubic-bezier(.2,.6,.3,1)"
            )
            .eq(images.length - 1)
            .bind(animationEndEvent, function(e){
              if(e.originalEvent.animationName == outAnimName) {
                postboxToolbarGlyphs.removeClass(visibleClass);
                postboxFolderIcons();
              }
            });
        });
      }
    });

  }
  function postboxFolderIcons(){

    var postboxFolderIcons = $works.eq(3),
        images = postboxFolderIcons.children(),
        imagesLength = images.length,
        inAnimName = "inPostboxFolderIcons";

    postboxFolderIcons.addClass(visibleClass);
    $root.css("background","#DCE1E7");
    logo.css("text-shadow","0 1px 0 #A4AFBE");
    baseline.css({
      "color":"#A4AFBE",
      "text-shadow":"0 1px 0 rgba(255,255,255,.5)"
    });

    insertCSSAnimation(inAnimName, {
      0 : prefix({"transform":"translateY(-" + windowHeight + "px)"}),
      94 : prefix({"transform":"translateY(8px)"}),
      100 : prefix({"transform":"translateY(0)"})
    });

    function outAnim() {

      var outAnimName = "outPostboxFolderIcons";

      insertCSSAnimation(outAnimName, {
        0 : {},
        40 : prefix({"transform":"translateY(-8px)"}),
        100 : prefix({"transform":"translateY(" + windowHeight + "px)"})
      });

      images.each(function(i){
        var $this = images.eq(i);
        $this
          .css(prefix({
            "animation":outAnimName+" .8s cubic-bezier(.7,0,.6,.2) "+i/15+"s"
          }))
          .bind(animationEndEvent, function(){
            $this.css(prefix("transform"),"translateY(" + windowHeight + "px)");
            if(i == imagesLength - 1) {
              postboxFolderIcons.removeClass(visibleClass);
              kickoffBlankslateIcons();
            }
          });
      });

      $root.removeClass(reactiveClass);

    };

    images.each(function(i){
      var $this = images.eq(i);
      $this
        .css(prefix({
          "transform":"translateY(-" + windowHeight + "px)",
          "animation":inAnimName + " 1.5s ease-in " + i/15 + "s"
        }))
        .bind(animationEndEvent, function(e){
          if(e.originalEvent.animationName == inAnimName) {
            $this.css(prefix("transform"),"translateY(0)");
            if(i == imagesLength - 1)
              $root.addClass(reactiveClass).click(outAnim);
          }
        });
    });

  }
  function kickoffBlankslateIcons(){

    var kickoffBlankslateIcons = $works.eq(4),
        icons = kickoffBlankslateIcons.children("img"),
        inAnim = function(){

          var iconSquaresNumber = 100,
              iconSquareElt = $("<span/>", {"class":"square"}),
              iconsSquaresWrap = $("<span/>", {"class":"wrap"}),
              iconsNumber = icons.length,
              animName = "inKickoffBlankslateIcons";

          insertCSSAnimation(animName, {
            0 : prefix({
              "opacity":"0",
              "transform":"translateX("
                          + windowWidth
                          + "px) scale(10) rotate(180deg)"
            }),
            50 : prefix({
              "opacity":".5",
              "transform":"translateX(-5px) scale(.5) rotate(-10deg)"
            }),
            100 : {"opacity":"1"}
          });

          function styleBrand(){

            $root.css("background","#F6F7FA");
            logo.css({
              "color":"#000",
              "text-shadow":"none"
            });
            baseline.css({
              "color":"#ACB5CE",
              "text-shadow":"0 1px 0 #fff"
            });

          }
          function createParticles() {

            var wrap = iconsSquaresWrap.clone(),
                bg = $(this).attr("src");

            for (var i=0; i < iconSquaresNumber; i++) {
              var x = (i % 10) * 25,
                  y = ~~(i / 10) * 25;
              iconSquareElt
                .clone()
                .css(prefix({
                  "opacity":"0",
                  "background-image":"url(" + bg + ")",
                  "background-repeat":"no-repeat",
                  "background-position":"-" + x + "px -" + y + "px",
                  "animation":animName
                              + " 2.8s cubic-bezier(.1,.8,.4,1) "
                              + Math.random()
                              + "s"
                }))
                .appendTo(wrap)
                .bind(animationEndEvent, function(e){
                  if(e.originalEvent.animationName == animName) {
                    $(this).css("opacity","1");
                  }
                });

            };

            kickoffBlankslateIcons.append(wrap);

          }
          function animListener(e) {
            if(e.originalEvent.animationName == animName) {
              $root.addClass(reactiveClass).click(outAnim);
              $(this).unbind(animationEndEvent, animListener);
            }
          }

          kickoffBlankslateIcons.addClass(visibleClass);
          styleBrand();
          icons.each(createParticles);
          kickoffBlankslateIcons.bind(animationEndEvent, animListener);

        },
        outAnim = function(){

          var animName = "outKickoffBlankslateIcons",
              animDuration = 1200,
              squares = kickoffBlankslateIcons.find(".square"),
              delays = [];

          insertCSSAnimation(animName, {
            0 : {},
            100 : prefix({
              "opacity":"0",
              "transform":"translateX(-"
                          + windowWidth
                          + "px) scale(.1) rotate(-300deg)"
            })
          });

          function hideParticles() {

            var $this = $(this),
                delay = Math.random();

            delays.push(delay);

            $this
              .css(prefix({
                "animation-name":animName,
                "animation-duration":animDuration + "ms",
                "animation-timing-function":"cubic-bezier(.7,0,.6,.2)",
                "animation-delay":delay
              }))
              .bind(animationEndEvent, function(e){
                if(e.originalEvent.animationName == animName)
                  $this.addClass(hiddenClass);
              });

          }

          squares.each(hideParticles);
          $root.removeClass(reactiveClass).unbind("click", outAnim);

          setTimeout(function(){
            kickoffBlankslateIcons.removeClass(visibleClass);
            kickoffTodos();
          }, animDuration + (delays.sort().pop() * 1000));

        };

    inAnim();

  }
  function kickoffTodos(){

    var kickoffTodos = $works.eq(5),
        screenshot = kickoffTodos.children("img"),
        inAnim = function() {

          var bg = kickoffTodos.children(".bg"),
              starsBack = kickoffTodos.children(".starsBack"),
              starsMiddle = kickoffTodos.children(".starsMiddle"),
              starsFront = kickoffTodos.children(".starsFront"),
              blur = kickoffTodos.children(".blur"),
              stars = [starsBack,starsMiddle,starsFront],
              starsLength = stars.length,
              auroraAnimName = "inAuroraFadesIn",
              starsAnimName = "inMoveStars",
              screenshotAnimName = "inKickoffTodosWindow",
              inBlurAnimName = "inKickoffTodosBlurWindow",
              outBlurAnimName = "outKickoffTodosBlurWindow";

          logo.css({
            "color":"#fff",
            "text-shadow":"0 1px 0 #000"
          });
          baseline.css({
            "color":"#666E8A",
            "text-shadow":"0 1px 0 #000"
          });

          kickoffTodos.addClass(visibleClass);

          insertCSSAnimation(auroraAnimName, {
            0 : prefix({
              "opacity":"0",
              "transform":"scale(1.1) translateX(10px)"
            }),
            100 : {}
          });

          insertCSSAnimation(starsAnimName, {
            0 : {"opacity":"0"},
            2 : prefix({
              "opacity":"1",
              "transform":"translateX(-160px)"
            }),
            4 : prefix({
              "opacity":".2",
              "transform":"translateX(-320px)"
            }),
            5 : prefix({
              "opacity":"1",
              "transform":"translateX(-400px)"
            }),
            99: prefix({"transform":"translateX(-8000px)"}),
            100 : prefix({
              "opacity":"0",
              "transform":"translateX(-8000px)"
            })
          });

          insertCSSAnimation(screenshotAnimName, {
            0 : {"opacity":"0"},
            100 : {}
          });

          insertCSSAnimation(inBlurAnimName, {
            0 : prefix({
              "opacity":"0",
              "transform":"scale(.96)"
            }),
            100 : {"opacity":".7"}
          });

          insertCSSAnimation(outBlurAnimName, {
            0 : {"opacity":".7"},
            100 : {"opacity":"0"}
          });

          bg
            .css(prefix("animation"), auroraAnimName + " 1.5s ease-out")
            .bind(animationEndEvent, function(e){
              if(e.originalEvent.animationName == auroraAnimName)
                $root.css("background","#03092B");
            });

          for (var i=0; i < starsLength; i++)
            stars[i].css(prefix({
              "animation-name":starsAnimName,
              "animation-timing-function":"linear",
              "animation-iteration-count":"infinite"
            }));

          starsFront.css(prefix("animation-duration"), "420s");
          starsMiddle.css(prefix("animation-duration"),"660s");
          starsBack.css(prefix("animation-duration"),  "840s");

          screenshot.addClass(hiddenClass);

          blur
            .css(prefix({
              "opacity":"0",
              "animation":inBlurAnimName + " .4s ease-out 1.2s"
            }))
            .bind(animationEndEvent, function(e){
              if(e.originalEvent.animationName == inBlurAnimName) {
                blur
                  .css(prefix("animation"), outBlurAnimName + " 1s linear")
                  .bind(animationEndEvent, function(e){
                    if(e.originalEvent.animationName == outBlurAnimName) {
                      blur.addClass(hiddenClass);
                      $root.addClass(reactiveClass).click(outAnim);
                    }
                  });
                screenshot
                  .css(prefix("animation"), screenshotAnimName + " .5s linear")
                  .removeClass(hiddenClass);
              }
            });

        },
        outAnim = function() {

          var outGlobalAnimName = "outKickoffTodosGlobal",
              outScreenshotAnimName = "outKickoffTodosScreenshot";

          insertCSSAnimation(outGlobalAnimName, {
            0 : {},
            100 : {"opacity":"0"}
          });

          insertCSSAnimation(outScreenshotAnimName, {
            0 : {},
            100 : {"opacity":"0"}
          });

          kickoffTodos
            .css(
              prefix("animation"),
              outGlobalAnimName + " 2.5s ease-out"
            )
            .bind(animationEndEvent, function(e){
              if(e.originalEvent.animationName == outGlobalAnimName) {
                kickoffTodos.removeClass(visibleClass);
                thanks();
              }
            });

          screenshot
            .css(
              prefix("animation"),
              outScreenshotAnimName + " 2s cubic-bezier(.2,.5,.3,1)"
            )
            .bind(animationEndEvent, function(e){
              if(e.originalEvent.animationName == outScreenshotAnimName)
                screenshot.addClass(hiddenClass);
            });

          $root.css("background","#000").removeClass(reactiveClass);

        };

    inAnim();
    $window.resize(function(){
      resizeScreenshot(screenshot);
    });

  }
  function thanks(){

    var thanks = $works.eq(6),
        inAnim = function(){

          var gradient = $("<span/>", {"class":"gradient"}),
              gradientAnimName = "inThanksGradient",
              infoAnimName = "inThanksInfo",
              copyright = thanks.children("p").eq(1),
              lis = thanks.find("li"),
              mail = lis.eq(0),
              twitter = lis.eq(1),
              info = [copyright,mail,twitter],
              infoLength = info.length,
              styleBrand = function() {

                $root.css("background","#000");
                logo.css({
                  "color":"#fff",
                  "text-shadow":"0 1px 0 #000"
                });
                baseline.css({
                  "color":"#777",
                  "text-shadow":"0 1px 0 #000"
                });

              },
              showInfo = function() {

                for (var j=0; j < infoLength; j++) {
                  info[j]
                    .css(
                      prefix("animation"),
                      infoAnimName + " 1.2s cubic-bezier(.2,.5,.3,1)"
                    )
                    .bind(animationEndEvent, function(e){
                      if(e.originalEvent.animationName == infoAnimName)
                        $(this).css("opacity",1);
                    });
                };

                mail.css(prefix("animation-delay"),".4s");
                twitter.css(prefix("animation-delay"),".6s");

              };

          insertCSSAnimation(gradientAnimName, {
            0 : prefix({
              "opacity":"0",
              "transform":"scale(1.5)"
            }),
            100 : {"opacity":"1"}
          });

          insertCSSAnimation(infoAnimName, {
            0 : prefix({
              "opacity":"0",
              "transform":"translateY(15px)"
            }),
            100 : {"opacity":"1"}
          });

          gradient.css(
            prefix("animation"),
            gradientAnimName + " 2s cubic-bezier(.2,.5,.3,1)"
          );

          for (var i=0; i < infoLength; i++) {
            info[i].css("opacity",0);
          };

          var animImages = thanks.children("p").eq(0).children("img"),
              i = 0,
              animImagesLength = animImages.length - 1,
              thanksAnim = setInterval(function(){
                animImages.eq(i).remove();
                i++;
                if(i == animImagesLength) {
                  clearInterval(thanksAnim);
                  showInfo();
                }
              }, 30);

          thanks.prepend(gradient).addClass(visibleClass);
          styleBrand();

        };

    inAnim();

  }
  function removeLoader(){

    var $loader = $("#loader"),
        animName = "removeLoader";

    insertCSSAnimation(animName, {
      0 : {},
      10 : prefix({"transform":"scale(1.2)"}),
      15 : prefix({"transform":"scale(1.2)"}),
      100 : prefix({
        "transform":"scale(.1)",
        "opacity":"0"
      })
    });

    $loader
      .css(prefix("animation"), animName + " 1.5s cubic-bezier(.2,.6,.3,1)")
      .bind(animationEndEvent, function(){
        $loader.remove();
      });

  };

  // Let the show begin

  removeLoader();
  personal32pxSet();

});