/* Grim monkeypatch until jQuery support for transform arrives */

 (function ($) {
     // Monkey patch jQuery 1.3.1+ css() method to support CSS 'transform'
     // property uniformly across Safari/Chrome/Webkit, Firefox 3.5+, IE 9+, and Opera 11+.
     // 2009-2011 Zachary Johnson www.zachstronaut.com
     // Updated 2011.05.04 (May the fourth be with you!)
     function getTransformProperty(element)
     {
         // Try transform first for forward compatibility
         // In some versions of IE9, it is critical for msTransform to be in
         // this list before MozTranform.
         var properties = ['transform', 'WebkitTransform', 'msTransform', 'MozTransform', 'OTransform'];
         var p;
         while (p = properties.shift())
         {
             if (typeof element.style[p] != 'undefined')
             {
                 return p;
             }
         }

         // Default to transform also
         return 'transform';
     }

     var _propsObj = null;

     var proxied = $.fn.css;
     $.fn.css = function (arg, val)
     {
         // Temporary solution for current 1.6.x incompatibility, while
         // preserving 1.3.x compatibility, until I can rewrite using CSS Hooks
         if (_propsObj === null)
         {
             if (typeof $.cssProps != 'undefined')
             {
                 _propsObj = $.cssProps;
             }
             else if (typeof $.props != 'undefined')
             {
                 _propsObj = $.props;
             }
             else
             {
                 _propsObj = {}
             }
         }

         // Find the correct browser specific property and setup the mapping using
         // $.props which is used internally by jQuery.attr() when setting CSS
         // properties via either the css(name, value) or css(properties) method.
         // The problem with doing this once outside of css() method is that you
         // need a DOM node to find the right CSS property, and there is some risk
         // that somebody would call the css() method before body has loaded or any
         // DOM-is-ready events have fired.
         if
         (
             typeof _propsObj['transform'] == 'undefined'
             &&
             (
                 arg == 'transform'
                 ||
                 (
                     typeof arg == 'object'
                     && typeof arg['transform'] != 'undefined'
                 )
             )
         )
         {
             _propsObj['transform'] = getTransformProperty(this.get(0));
         }

         // We force the property mapping here because jQuery.attr() does
         // property mapping with jQuery.props when setting a CSS property,
         // but curCSS() does *not* do property mapping when *getting* a
         // CSS property.  (It probably should since it manually does it
         // for 'float' now anyway... but that'd require more testing.)
         //
         // But, only do the forced mapping if the correct CSS property
         // is not 'transform' and is something else.
         if (_propsObj['transform'] != 'transform')
         {
             // Call in form of css('transform' ...)
             if (arg == 'transform')
             {
                 arg = _propsObj['transform'];

                 // User wants to GET the transform CSS, and in jQuery 1.4.3
                 // calls to css() for transforms return a matrix rather than
                 // the actual string specified by the user... avoid that
                 // behavior and return the string by calling jQuery.style()
                 // directly
                 if (typeof val == 'undefined' && jQuery.style)
                 {
                     return jQuery.style(this.get(0), arg);
                 }
             }

             // Call in form of css({'transform': ...})
             else if
             (
                 typeof arg == 'object'
                 && typeof arg['transform'] != 'undefined'
             )
             {
                 arg[_propsObj['transform']] = arg['transform'];
                 delete arg['transform'];
             }
         }

         return proxied.apply(this, arguments);
     };
 })(jQuery);
 

/* end of monkey patch */

// Image slider
Slider = (function(){
  
  images  = [];
  wait    = 2000;
  fade    = 400;
  current = 0;
  
  getImages = function(){
    images = $("#iphone img");
  };
  
  start = function(){
    images.first().css({opacity: 1});
    next();
  };
  
  next = function(){
    setTimeout(function(){
      
      images.clearQueue();
      next_img = images.get(current+1) == undefined ? 0 : current + 1 
      
      $(images.get(current)).animate({opacity: 0},fade);
     
      $(images.get(next_img)).stop().animate({
        opacity: 1
      }, fade,function(){
        current = next_img;
        next();
      });
      
    },wait);
  }
  
  return {
    init: function(){
      getImages();
      if(images.length > 0){
        start();
      }
    }
  }
})();

// Darrell Animations!
Animations = (function(){
  
  darrells = [];
  window_width = $(window).width();
  window_height = $(window).height();  
  
  
  animation_limits = {
    launch    : { start: 75, end: 550 },
    parachute : { start: 1500, end: 2300 },
    claw      : { start: 3300, end: 4000 },
  }
  
  recalculateDimensions = function(){
    window_width = $(window).width();
    window_height = $(window).height();
  }
  
  getDarrells = function(){
    darrells = $("#darrell-one,#darrell-two,#darrell-three")
  }
  
  animate = function(){
    var scrollTop = $(window).scrollTop();
    
    // check what range we are in then animate accordingly
    if(scrollTop > animation_limits.launch.start && scrollTop < animation_limits.launch.end){
      animateLaunch(scrollTop);
    }else if(scrollTop > animation_limits.parachute.start && scrollTop < animation_limits.parachute.end){
      animateParachute(scrollTop);
    }else if(scrollTop > animation_limits.claw.start && scrollTop < animation_limits.claw.end){
      animateClaw(scrollTop);
    }else{
      // resets, has to do it this way for some reason
      $(darrells).css({display: "none", top: -300});
    }
    
 }
  
  animateLaunch = function(top){
    darrell = $(darrells[0]);
    y_pos = 620;
    
    
    range = animation_limits.launch.end - animation_limits.launch.start;
    x_pos = Math.ceil(window_width - ((animation_limits.launch.end - top)/range) * (window_width + 200));
    
    if(Math.ceil(x_pos/50) % 2 == 0){
      darrell.addClass("roll")
    }else{
      darrell.removeClass("roll");
    }
    
    darrell.css({
      top: y_pos,
      left: x_pos,
      display: "block"
    });
  }
  
  animateParachute = function(top){
    
    //left/right is dealt with by css right so don't need to worry about it
    
    range = animation_limits.parachute.end - animation_limits.parachute.start;
    y_pos = Math.ceil(window_height - ((animation_limits.parachute.end - top)/range * (window_height*1.5)));
    $(darrells[1]).css({
      top: y_pos,
      display: "block"
    });
  }
  
  animateClaw = function(top){
   
   range = animation_limits.claw.end - animation_limits.claw.start;
   
   rotation = Math.ceil(-90 + (((animation_limits.claw.end - top)/range) * 210));
   rotation_text = "rotate("+rotation+"deg)"

   $(darrells[2]).css({
     top: -15,
     left: 250,
     display: "block",
     transform: rotation_text
   });
  }
  
  
  return {
    init: function(){
      getDarrells();
      recalculateDimensions();    
      if(screen.width > 800 && $(window).width() > 900){
        $("body").addClass("can_animate");
        $(window).scroll(animate);
      }
    }
  }
})();


// Start the document
$(document).ready(function(){
  
  // Image slider init
  Slider.init();
  
  // Darrell animations init
  // Animations.init();
  
  
  
});


var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytvideo', {
      height: '325',
      width: '485',
      videoId: 'jtsBtD-qIrc',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(evt) {
  
}
var played = false;
function onPlayerStateChange(evt) {
  if(!played && evt.data == YT.PlayerState.PLAYING){
    played = true;
    _gaq.push(['_trackEvent', 'Video', 'Played', '1']);
  }
  
  if(evt.data == YT.PlayerState.ENDED){
    _gaq.push(['_trackEvent', 'Video', 'Ended', '1']);
  }
}

