/*
 * home.js
 * 
 * Javascript scrolly navigation-y hoopajoop.
 * by Max Thom Stahl for HHMI, 2009
 */

jQuery.easing.def = "easeOutQuad";

$(function () {
  // Offsets for the two stages of the animation, the first starting from
  // zero and the second being just a raw number. This is so that, depending
  // on the situation the animation can animate to different instances of the
  // illustration (see notes).
  // var offsets = [ 0, 598, 1226, 1631 ];    // Original offsets
  var offsets = [ 244, 834, 1529, 1861 ];     // New offsets
  var anchors = [ 'a-breakthrough-vision', 'a-global-perspective', 'an-eye-for-education', 'a-collaborative-focus' ];
  var index = -1;   // Currently-displayed "frame"
  var width = 2028; // Width of one instance of the illustration
  var intro_animation_timer = null;
  var slide_to = function (j) {
    // Must clear timer if it's set
    if(intro_animation_timer != null) {
      window.clearTimeout(intro_animation_timer);
      intro_animation_timer = null;
    }
    
    // Transitions from 3 to 0 or vice versa are the edge case where
    // the animation should wrap around.

    /**
     * Code to determine which "frame" is closest. Keep this around for a wee bit.
     */
    if(index == 3 && j == 0) {
      target_offset = 2 * width + offsets[0];
    }
    else if(index == 0 && j == 3) {
      target_offset = offsets[j];
    }
    else {
      target_offset = width + offsets[j];
    }
    
    // Replacement for code above. Always animates the illustration to the left. Always.
    // t = 500;    // Time in milliseconds for the animation to run
    // if(j >= index) {
    //   target_offset = width + offsets[j];
    //   t *= (j - index);
    // }
    // else {
    //   target_offset = 2 * width + offsets[j];
    //   t *= ((j + 4) - index);
    // }
    
    // The .current_ class is used to denote when there is a text box
    // presently displayed. If there is, the next line will slide it right.
    
    // ARTICLE OPENING EXIT ANIMATION
    // $(".article.current_").animate({ right: "-1100px" }, 1000, "easeInQuad", function () {
    //   $(".article.current_ h3.article-title,.article.current_ p,.article.current_ ul.nav").css("margin-left", "550px");
    // });
    $(".article.current_").fadeOut(600);
    
    // Illustration animation happens concurrently with text box animation.
    $("#illustration").animate({
      left: "-" + target_offset + "px"
    }, 750, "easeInOutQuad", function () {
      // Next line is for if an edge case has made it necessary to animate
      // to the left or right instance of the illustration. To reset the
      // state of the illustration it must be returned to the same offset
      // in the middle instance.
      $("#illustration").css("left", "-" + (offsets[j] + width) + "px");
      
      index = j;
    });
    // A second animation to move the white background box into position and
    // also cascade the text in.
    if(index == -1) {
      $("#white-background")
      .animate({
        right: "0px"
      }, 600, "easeOutQuad", function () {
        // $("#home-section .article")
        // .eq(j)
        // .animate({
        //   right: "-550px"
        // }, 600, "easeOutQuad", function () {
        //   // CASCADE ANIMATION
        //   
        //   // Setup cascade
        //   $("#home-section .article").eq(j).show();
        //   $("h3.article-title,p,ul.nav", $(this)).css("margin-left", "550px");
        //   
        //   // Header
        //   $("h3.article-title", $(this)).animate({ marginLeft: "0px" }, 300, "easeOutQuad");
        //   // Paragraphs
        //   $("p", $(this)).animate({ marginLeft: "0px" }, 600, "easeOutQuad");
        //   // Links
        //   $("ul.nav", $(this)).animate({ marginLeft: "0px" }, 900, "easeOutQuad");
        // })
        // .addClass("current_");
        $("#home-section .article")
        .eq(j)
        .fadeIn(300)
        .addClass("current_");
      })
      .addClass("out_");
    }
    else {
      $("#home-section .article")
      .eq(index)
      .fadeOut(300, function () {
        $("#home-section .article")
        .eq(j)
        .fadeIn(300)
        .addClass("current_");
      })
      .removeClass("current_");
    }
    
    // Toggle the current_ state of the nav
    $("#site-navigation li.nav-item a")
    .removeClass("current_")
    .eq(j)
    .addClass("current_");
    
    // Finally, add the anchor link
    document.location.href = document.location.href.replace(/#.*/, '') + "#" + anchors[j];
    
    // Fade out play/pause button
    $("#play-pause-link").fadeOut(350);
  };
  
  // Add click function to each nav item. 
  $("#site-navigation li.nav-item a").each(function (i) {
    $(this)
    .click(function () {
      if(i == index) {
        // Reset the entire page if the user clicks on a nav
        // item two times consecutively. First fade out the
        // article.
        $(".article.current_")
        .fadeOut(300, function () {
          // Then slide the white background div to the right.
          $("#white-background").animate({ right: "-550px" }, 300, "easeInQuad");
          
          // Fade in play/pause button
          $("#play-pause-link")
          .fadeIn(350)
          .children("img")
          .attr("src", "_files/images/content/Homepage-Pause.png")
          .attr("alt", "Pause");
        })
        .removeClass("current_");
        
        index = -1;
        intro_animation();
        return false;
      }
      $("#illustration").stop();
      slide_to(i); 
      return false;
    });
  });
  
  // Intro animation is just the whole thing panning very slowly.
  // Happens when home is first loaded and when user closes one of
  // the openers on the home page.
  var intro_animation = function () {
    $("#illustration").animate({
      left: "-" + (2 * width) + "px"
    }, 50000, "linear", function () {
      $("#illustration").css('left', '-' + width + 'px');
      intro_animation();
    });
  }
  
  // Check for an anchor tag. If there's an anchor, animate to that part
  // of the illustration.
  anchor = document.location.href.replace(/^[^#]*#?/, '');
  if(anchor == 'a-breakthrough-vision') {
    slide_to(0);
  }
  else if(anchor == 'a-global-perspective') {
    slide_to(1);
  }
  else if(anchor == 'an-eye-for-education') {
    slide_to(2);
  }
  else if(anchor == 'a-collaborative-focus') {
    slide_to(3);
  }
  else {
    intro_animation_timer = window.setTimeout(function () {
      $("#illustration").animate({
        left: "-=20px"
      }, 1000, "easeInQuad", function () {
        intro_animation();
        intro_animation_timer = null;
      });
    }, 1000);
  }
  
  // Set up play/pause link
  $("#play-pause-link").toggle(function () {
    // Pause
    window.clearTimeout(intro_animation_timer);
    $("#illustration").stop();
    $(this)
    .children("img")
    .attr("src", "_files/images/content/Homepage-Replay.png")
    .attr("alt", "Replay");
  }, function () {
    // Play
    $(this)
    .children("img")
    .attr("src", "_files/images/content/Homepage-Pause.png")
    .attr("alt", "Pause");
    $("#illustration").animate({
      left: "-=20px"
    }, 1000, "easeInQuad", function () {
      intro_animation();
      intro_animation_timer = null;
    });
  });
});