$(document).ready(function(){


  $('.button.play').click(function(){
    $(this).parent().parent().find(".videoFrame").show();
  });









  $('#spotlightLink').stop().animate({ color: '#566165' }, 200);

  $('.button.normal').hover(function(){
     /* $(this).bgFade('fadeIn', { 
        fadeSpeed: 300 
      });*/
      $(this).stop().animate({
        marginLeft: 7
      }, 200);
      if($(this).hasClass('play'))
      {
        var clr = ($(this).hasClass('green')) ? '#9ece22' : '#0091c7';
        $(this).children("span").stop().animate({ color: clr }, 200);
      }
  }, function() {
      $(this).stop().animate({
        marginLeft: 0
      }, 200);
      $(this).children("span").stop().animate({ color: '#353e42' }, 200);
  });
  
  $('.button.small').hover(function(){
      $(this).animate({
        marginLeft: 12
      }, 200);
  }, function() {
      $(this).stop().animate({
        marginLeft: 0
      }, 200);
  });




  // nav animation
  $('#aboutLink').live("click", function(){
    // set active navigation
    $(this).animate({ color: '#566165' }, 200);
    $('#spotlightLink').animate({ color: '#c5c9cb' }, 200);
    
    // headline
    animateHeadline(true);
    
    // animate content
    $('#spotlight').stop().animate({
      marginLeft: -150,
      opacity: 0
    }, 300, function(){
      $(this).hide();
      $('#about').css({"marginLeft":150,"opacity":0}).show().stop().animate({
        marginLeft: 0,
        opacity: 1
      }, 300);
    });
  });
  
  $('#spotlightLink').live("click", function(){
    // set active navigation
    $(this).animate({ color: '#566165' }, 200);
    $('#aboutLink').animate({ color: '#c5c9cb' }, 200);
    
    // headline
    animateHeadline(false);
    
    // animate content
    $('#about').stop().animate({
      marginLeft: 150,
      opacity: 0
    }, 300, function(){
      $(this).hide();
      $('#spotlight').css({"marginLeft":-150,"opacity":0}).show().stop().animate({
        marginLeft: 0,
        opacity: 1
      }, 300);
    });
  });



  // spotlight buttons
  $('#bw').hover(function(){
    $(this).stop().animate({
      marginLeft: -10
    }, 200);
  }, function(){
    $(this).stop().animate({
      marginLeft: 0
    }, 200);
  });
  // spotlight buttons
  $('#fw').hover(function(){
    $(this).stop().animate({
      marginRight: -10
    }, 200);
  }, function(){
    $(this).stop().animate({
      marginRight: 0
    }, 200);
  });


  $('#spotlight > div').hide();
  $('#spotlight > div:first').show();


  var distance = 50;
  var time = 300;

  // fw, bw animation
  $('#fw').click(function(){
    $('.videoFrame').hide();
    var oldActive = parseInt($('#spotlight').attr('active'));
    var active = (oldActive == 1) ? 0 : 1 + oldActive;
    setActive(active);

    $('#spotlight .'+oldActive+' > *').animate({
      opacity: 0
    }, time);
    $('#spotlight .'+oldActive).stop().animate({
      marginLeft: -distance,
      opacity: 0
    }, time, function(){
      $(this).hide();
      $('#spotlight .'+active).css({"marginLeft":distance,"opacity":0}).show();
      $('#spotlight .'+oldActive+' > *').css("opacity", 1);
      $('#spotlight .'+active).stop().animate({
        marginLeft: 0,
        opacity: 1
      }, time);
      $('#spotlight .'+active+' #text > *').css('marginLeft', 33).stop().animate({
        marginLeft: 0
      }, time+200);
      $('#spotlight .'+active+' #text ul').css('marginLeft', 50).stop().animate({
        marginLeft: 0
      }, time+300);
    });
  });

  $('#bw').click(function(){
    $('.videoFrame').hide();
    var oldActive = parseInt($('#spotlight').attr('active'));
    var active = (oldActive == 0) ? 1 : oldActive - 1;
    setActive(active);

    $('#spotlight .'+oldActive).stop().animate({
      marginLeft: distance,
      opacity: 0
    }, time, function(){
      $(this).hide();
      $('#spotlight .'+active).css({"marginLeft":-distance,"opacity":0}).show().stop().animate({
        marginLeft: 0,
        opacity: 1
      }, time);
    });
  });
});


function animateHeadline(fw){
  var text = (fw) ? "About" : "Spotlight";
  var inv = (fw) ? 1 : -1;
  
  $hl = $('#headline');
  $hl.stop().animate({
    marginLeft: inv * -50,
    opacity: 0
  }, 300, function(){
    $(this).css("marginLeft", inv * 50).text(text);
    $(this).animate({
      marginLeft: 0,
      opacity: 1
    }, 300);
  });
}

function setActive(nr){
  $('#spotlight').attr('active', nr);
}