$(document).ready(function() {
  
  var inAction = false;
  
  $(".control li").click(function() {
    
    if ($(this).attr("class") === $(".control li.active").attr("class")) {
      return;
    }
    
    if (!inAction) {
      
      var actClass = $(this).attr("class").replace(/\bactive\b/, ""),
          previous = $(".bg.active"),
          bgTransDur = parseFloat(previous.css("transition-duration"), 10) * 1000,
          trans;
      
      if (actClass === "iron") {
        trans = "translateX(100%)";
      } else if (actClass === "cap") {
        trans = "translateY(100%)";
      } else if (actClass === "bw") {
        trans = "translateX(-100%)";
      } else if (actClass === "thor") {
        trans = "translateY(-100%)";
      }
      inAction = true;
      console.log(bgTransDur);
      $(".control li.active").removeClass("active");
      $(this).addClass("active");
      $(".control").addClass("in-action");
      $(".content .inner.active").removeClass("active");
      $(".bg.active").removeClass("active");
      previous.css("transform", trans);
      
      /* hack for returning bg in original state */
      setTimeout(function() {
        previous.addClass("fast");
        previous.attr("style", "");
        previous.css("transform");
        previous.removeClass("fast");
      }, bgTransDur);
      
      $(".content .inner." + actClass).addClass("active");
      $(".bg." + actClass).addClass("active");
      $(".content").scrollTop(0);
      
      setTimeout(function() {
        inAction = false;
        $(".control").removeClass("in-action");
      }, bgTransDur + 100);
    }
  }); 
});