// Because sometimes you really need to know
$.browser['real_safari'] = $.browser.safari && !/chrome/.test(navigator.userAgent.toLowerCase())
$.browser['mobile'] = !!navigator.userAgent.match(/AppleWebKit.*?Mobile/) || /android/.test(navigator.userAgent.toLowerCase())
$.browser['desktop'] = !$.browser.mobile

  $('html')
    .addClass('ready')
    .addClass( $.browser.real_safari ? 'safari' : 'not-safari' )
    .addClass( $.browser.webkit ? 'webkit' : 'not-webkit' )
    .addClass( $.browser.mobile ? 'mobile' : 'desktop' )    


// Set up some useful classes, primarily for CSS animations and transitions
$(document).ready( function() {
  
  $(window).load( function() {$('html').addClass('loaded')} )

} )


// Covert element with the class 'img' and a 'data-src' attribute to  real <img />
;(function($) {
  $.fn.convert_to_real_img = function() {
    var $this = $(this).filter('[data-src]')
    return $this.each(function() {
      var fake_img = $(this),
          img = $('<img />').attr( {
            src: fake_img.data('src'),
            alt: fake_img.data('alt'),
            width: fake_img.data('width'),
            height: fake_img.data('height'),
            'class': fake_img.attr('class').replace('img', '')
          } )
      fake_img.replaceWith(img)
    })
  }
})(jQuery);

// Nivo slider for splash img
$(document).ready( function() {

  var done_loading = false,
      IMAGES = [],
      images_loaded = 0,
      last_loaded_timeout = null,
      fake_images = $('.img[data-src]'),
      fake_image_hrefs = fake_images.map(function() {
        return $(this).data('src')
      }).get(),
      $slider = $('#slider')

  var load_images = function() {
    for(var i = 0, ii = fake_image_hrefs.length; i < ii; i++) {
      IMAGES[i] = new Image()
      IMAGES[i].onload = item_loaded
      IMAGES[i].src = fake_image_hrefs[i]
   }
  }

  var item_loaded = function() {
    clearTimeout(last_loaded_timeout)
    images_loaded++
        
    if(!done_loading && images_loaded >= fake_image_hrefs.length) {
      done_loading = true
      fake_images.convert_to_real_img()

      setTimeout(function() {
        $slider.nivoSlider( {
          effect:       ( $.browser.desktop ? 'boxRainGrow,boxRain,boxRainGrowReverse,boxRainReverse' : 'boxRain,boxRainReverse' ),
          boxCols:      ( $.browser.desktop ? 12 : 6 ),
          boxRows:      ( $.browser.desktop ? 4 : 2),
          animSpeed:    2000,
          pauseTime:    5000,
          keyboardNav:  false,
          pauseOnHover: false,
          directionNav: false,
          controlNav:   false
        } )
        if( $('.more_info').is(':visible') ) $slider.data('nivoslider').stop()
      }, 2000)
    } else {
      last_loaded_timeout = setTimeout(kill_preloading, 6000)
    }
  }
  
  var kill_preloading = function() {
    images_loaded = fake_image_hrefs.length
    item_loaded()
  }


  $('<img />').load( function() {
    $('html').addClass('splash_ready')
    load_images()
  } ).attr( 'src', $('#splash .img').first().data('src') )

} )



// Modal video widget
$(function() {

  var $container = $('#examples'),
      $examples = $container.find('.example'),
      $active_example,
      $slider = $('#slider')
  
  var setup = function() {
    // 'Esc' key exits modal
    $(document).keyup(function(e) {
      if(e.which == 27) hide_info(e)
    })

    // Loop over examples, preparing content and binding events
    $examples.each(function() {
      var $this = $(this)
      // Copy out all the info for this example then strip it from the DOM
      var $flowchart_thumb = $this.find('.flowchart_thumb')
      var $contents = $this.find('h2, video, .caption, p, h3, ul').add($flowchart_thumb)
      var $cloned_contents = $contents.clone(true)
      var $close_button = $('<div class="close_button" />')
      $this.find('video, p, ul, .flowchart_thumb').remove()
      
      var $more_info = $('<div class="more_info" />')
                        .append($cloned_contents)
                        .append($close_button)
                        .wrapInner('<div class="inner" />')
                        .appendTo($container)
                        .click(hide_info)
      
      if( $more_info.find('.flowchart_thumb')[0] )
        $more_info.children('.inner').append('<img class="magnifier" src="//d33qppnskagxq7.cloudfront.net/images/magnifier.png" />')

      $more_info.addClass( $this.attr('class').replace('example', '') )

      // Show associated info panel when thumbnail is clicked
      $this.children('.thumb').click(function(e) {
        show_info($more_info)
      })
    })
  }
  
  var show_info = function($chosen) {
    if( $slider.data('nivoslider') ) $slider.data('nivoslider').stop()

    if( $active_example ) {
      $active_example.hide()
      sublimevideo.unprepare( $active_example.find('video')[0] )
    }
    
    $active_example = $chosen
    
    var video = $chosen.find('video')[0]
    sublimevideo.prepare(video)
    
    var $modal = $chosen.children('.inner')

    $modal.css('margin-top', $chosen.children('.inner').outerHeight() / -2)
    $chosen.hide().fadeIn(400)
  }
    
  var hide_info = function(e) {
    if( !$active_example  ) return

    if( !$(e.target).hasClass('close_button') && $(e.target).parents().andSelf().is('.inner') ) return

    var video = $active_example.find('video')[0]
    $active_example.fadeOut(400, function() {
      sublimevideo.unprepare(video)
      $('.grow').removeClass('grow')
      if( $slider.data('nivoslider') ) $slider.data('nivoslider').start()
    })

    $active_example = false
  }
  
  setup()
  
  $(window).load(function() {
    $container.find('.flowchart_thumb').convert_to_real_img()
  })

})



$('#examples .flowchart_thumb, #examples .magnifier').live('click', function() {

  var $info_div = $(this).closest('.more_info')

  $info_div.toggleClass('grow')

  sublimevideo.stop()

  if( $.browser.desktop ) return

  if( $info_div.hasClass('grow') ) {
    $info_div.find('video').fadeOut()
  } else {
    $info_div.find('video').fadeIn()
  }

})