$(function(){

  $("body > div").append(
    $("<div/>", {id: "iphone"}).append(
      $("<div/>", {id: "mask"})
    )
  );

  var iphoneMask = $("#mask"),
      thumbLinks = $("div > ul a"),
      activeClass = "active";

  thumbLinks
    .append($("<span/>", {className: "led"}))
    .append($("<span/>", {className: "default-shadow"}))
    .append($("<span/>", {className: "active-shadow"}))
    .append($("<span/>", {className: "reflection"}))
    .each(function(){
      iphoneMask.append($("<img/>", {
        alt: "",
        src: $(this).attr("href")
      }))
    })
    .click(function(){
      var $this = $(this),
          thisIndex = thumbLinks.index($this);
      if (!iphoneMask.children().eq(thisIndex).is("." + activeClass)) {
        iphoneMask.children()
            .filter("." + activeClass).removeClass(activeClass).end()
            .eq(thisIndex).addClass(activeClass);
        thumbLinks.filter("." + activeClass).removeClass(activeClass);
        $this.addClass(activeClass);
      }
      return false;
    });

    iphoneMask.children().eq(0).addClass(activeClass);
    thumbLinks.eq(0).addClass(activeClass);

});