// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

$(function(){
  $('#extended').tabs();
  $('.spotlight').fancybox({
    frameHeight: 400,
    frameWidth: 600,
    hideOnContentClick: false,
    centerOnScroll: true,
    callbackOnShow: function(){
      $('#contact_name').focus();
      $('#sponsor_page form').submit(function(){
        $.post(this.action, $(this).serialize(), null, "script");
        return false;
      })
    }
  });
  
  $('#embed_dimension, #embed_size').change(function(){
    var CONTROL_HEIGHT = 42,
        RATIO = 16.0/9.0,
        height, width;
    
    if('width' == $('#embed_dimension').val()){
      width = parseInt($('#embed_size').val(), 10);
      height = Math.round(width/RATIO) + CONTROL_HEIGHT;
    }else{
      height = parseInt($('#embed_size').val(), 10);
      width = Math.round((height - CONTROL_HEIGHT) * RATIO)
    }
    var tpl = $('#embed_code').attr('data-template');
    $('#embed_code').val(tpl.replace(/\{\{HEIGHT\}\}/g, height).replace(/\{\{WIDTH\}\}/g, width))
  }).change();
  
  $('#embed_code').bind('focus, click',function(){
    this.select();
  })
  
  $('li.icons li a').tipsy({gravity: 's'});
  
  // This is the menu "highlight" effect used in the menu (webkit only), feel free to use...
  if($.browser.safari){
    $('#nav > li ').mousemove(function(evt){
      var x = evt.pageX - this.offsetLeft,
          y = evt.pageY - this.offsetTop,
          xy = x+" "+y,
          bg = "-webkit-gradient(radial, "+xy+", 0, "+xy+", 170, from(rgba(255,255,255,0.15)), to(rgba(255,255,255,0.0))), #2c2c2c"
    
      $(this).css({background: bg});
    }).mouseleave(function(){
      $(this).css({background: '#222'});
    });
  };//...Enjoy :D
});