var expand_dur = 500;		// The length of time the animations should happen over in ms
var aspect_ratio = 3/4;		// height / width
var margin = 25;			// The distance from the edge of the window to the popup
var padding = 25;			// The distance from the edge of the popup to the video

var start_width = null;		// the width of the box to act as a link
var start_height = null;	// the height of the box to act as a link
var end_width = null;		// The final width of the window
var end_height = null;		// The final height of the window
var video_width = null;		// The width of the videos to be played
var video_height = null;	// The hight of the videos to be played

$(function(){
	$(".video-button").click(function(){
	  var video_expand_anim = $(".video-expand-anim");
	  if(video_expand_anim.width() == 0){
		
		var video_id = this.getAttribute("data-video-id");
		$(this).addClass('expanded-from');

		start_width = $(this).width();
		start_height = $(this).height();
		end_height = $(window).height() - (margin*2);
		end_width = end_height / aspect_ratio;
		video_height = end_height - (padding*2);
		video_width = video_height / aspect_ratio;
		var position = $(this).position();
		var vid_holder = $('.video-container');
		
		$('<iframe class="video-player" webkitAllowFullScreen allowFullScreen></iframe>').appendTo('.video-container');
		$('.video-player').attr({width:video_width, height:video_height});
		switch(video_id){
			case "1":
				$('.video-player').attr('src', "http://player.vimeo.com/video/31732785\?title=0\&byline=0\&portrait=0\&autoplay=1");
				break;
			case "2":
				$('.video-player').attr('src', "http://player.vimeo.com/video/31732483\?title=0\&byline=0\&portrait=0\&autoplay=1");
				break;
			case "3":
				$('.video-player').attr('src', "http://player.vimeo.com/video/31915352\?title=0\&byline=0\&portrait=0\&autoplay=1");
				break;
			case "4": //Molecule Video
				$('.video-player').attr('src', "http://player.vimeo.com/video/33998758\?title=0\&byline=0\&portrait=0\&autoplay=1");
				break;
			case "5": //Blaster Video
				$('.video-player').attr('src', "http://player.vimeo.com/video/33996104\?title=0\&byline=0\&portrait=0\&autoplay=1");
				break;
			case "6": //Centerfire Video
				$('.video-player').attr('src', "http://player.vimeo.com/video/34046330\?title=0\&byline=0\&portrait=0\&autoplay=1");
				break;
		}
		
		vid_holder.css({"margin-top": (end_height - video_height)/2 + "px", "margin-left":(end_width - video_width)/2 + "px"});
		video_expand_anim.css({"top" : position.top + "px", "left" :position.left + "px", width:start_width, height:start_height});
	    video_expand_anim.fadeIn("fast")
	         .animate({width:end_width, height:end_height, left: ($(window).width() - end_width)/2, top: $(window).scrollTop() + margin },expand_dur);
	    $('.video-closer').delay(expand_dur).css({width:end_width, height:end_height-padding-55}).fadeIn("fast");
		$('.video-container').delay(expand_dur+300).fadeIn("slow");

	  }
	  else if((end_width - video_expand_anim.width()) < 10){
        Shrink();
	  }
	  return false;
	});
    $(".video-expand-anim").click(function(){
	    Shrink();
	    return false;
    })
})

function Shrink(){
	var origin = $('.video-button.expanded-from');
	var position = origin.position();
	origin.removeClass('expanded-from');
	$('.video-closer').fadeOut("fast");
	$('.video-container').fadeOut("slow", function(){$('.video-player').remove()});
	$(".video-expand-anim").delay(expand_dur).animate({width:start_width, height:start_height, left:position.left, top:position.top}, expand_dur)
	.fadeOut("fast")
    .animate({width:0, height:0},0);
    return false;
}