$(function(){

  var root = $("html"),
      welcomeTitle = root.find("hgroup"),
      emptyElt = "<div/>",
      vCardReferentId = "referent",
      boxId = "box",
      maskClass = "mask",
      topId = "top",
      topShadowId = "top-shadow",
      whiteLightsId = "white-lights",
      blueLightsId = "blue-lights",
      smokeId = "smoke",
      activeClass = "active",
      hiddenClass = "hidden",
      animAttr = "data-anim";

  root.attr("class", "j");

  $("section")
    .wrap($(emptyElt, {
      id: vCardReferentId,
      className: hiddenClass
    }))
    .wrap($(emptyElt, {
      id: "vcard-mask"
    }));

  var vCardReferent = $("#" + vCardReferentId);

  welcomeTitle
    .addClass(hiddenClass)
    .after($(emptyElt, {
        id: boxId,
        className: hiddenClass
      })
      .append($(emptyElt, {id: topId}))
      .append($(emptyElt, {id: topShadowId}))
      .append($(emptyElt, {id: whiteLightsId}))
      .append($(emptyElt, {id: blueLightsId}))
      .append($(emptyElt, {
        id: smokeId,
        className: hiddenClass
      }))
      .append(
        $("<a/>", {
          href: ".",
          click: function(){
            var blueLights = $("#" + blueLightsId);
            if(0 == blueLights.width()) {
              setTimeout(function(){
                blueLights.css("width","11px");
              }, 100);
              setTimeout(function(){
                blueLights.css("width","19px");
              }, 400);
              setTimeout(function(){
                blueLights.css("width","29px");
              }, 700);
              setTimeout(function(){
                $("#" + topShadowId).remove();
                $("#" + smokeId).removeClass().attr(animAttr, "evaporate");
                vCardReferent
                  .removeClass()
                  .attr(animAttr, "supersize")
                  .children()
                  .attr(animAttr, "slide-up");
              }, 1000);
              $("#" + topId).attr(animAttr, "fly");
            }
            return false;
          }
        })
      )
    )
    .children()
    .prepend($(emptyElt, {className: maskClass}));

  var box = $("#" + boxId);

  setTimeout(function(){
    welcomeTitle
      .removeClass()
      .attr(animAttr, "disappear")
      .find("." + maskClass)
      .attr(animAttr, "slide");
    box
      .removeClass()
      .attr(animAttr, "appear");
  }, 1000);

  setTimeout(function(){
    welcomeTitle.remove();
  }, 5000);

  if (!$.browser.webkit)
    setInterval(function(){
      $("#" + whiteLightsId).fadeToggle(1000);
    }, 1100);

  vCardReferent
    .find("[href='http://deaxon.com']")
    .prepend($("<span/>"));

  var picList = vCardReferent.find("ul:first"),
      picListItems = picList.children(),
      picLink = $("<a/>", {href: "."}).append($(emptyElt));

  picList.before(
    $("<nav/>")
      .append(picLink.clone())
      .append(picLink.clone())
      .append(picLink.clone())
  );

  picListItems
    .first()
    .addClass(activeClass);

  var picLinks = picList.prev().find("a");

  picLinks
    .click(function(){
      var activeLink = $(this);
      picLinks.removeClass();
      activeLink.addClass(activeClass);
      picListItems
        .removeClass()
        .eq(picLinks.index(activeLink))
        .addClass(activeClass);
      return false;
    })
    .first()
    .addClass(activeClass);

});