/*
	module name: lu-youtube-player.js
	date: Monday, October 19, 2009
	version: 1.0
	author: Jay Dansand (jay.dansand@gmail.com) for Lawrence University ITS
	purpose:
		Automatically create proper embed statements to play YouTube videos in "features" graphics
		on the Lawrence website.
		
		Depends on SWFObject and jQuery.
	configuration:
		None.
	usage:
		1) Create a DIV of class "youtube".
		2) Create an A link inside of the DIV, pointing to the actual YouTube video.
		3) Place an IMG tag inside the link with the preview for the video.  The embedded video will
			be created with dimensions to match the preview (INCLUDING the "chrome mini bar" from YouTube).
			So a 480x320 video will require 480x335 pixels (and the preview image should accommodate this.)
		
		When a user clicks the link, the video should play.  The script gracefully falls back if JS doesn't
		succeed (image links to actual YouTube video).
*/

jQuery(document).ready( function() {
	jQuery('.youtube').find('a[href *= youtube]').each(function() {
		jQuery(this).click(function() {
			playVideo(this);
			return false;
		});
	});
	setInterval(function() { togglePlayPause(true); }, 100);
});

function resumeSlides()
{
	jQuery('div [id ^= control] a, .control-arrow').unbind("click", resumeSlides);
	jQuery('#videoplayer').remove();
	jQuery('#icon').cycle('resume');
}

function togglePlayPause(justPicture)
{
	var link = document.getElementById("controlPlayPause");
	var d = document.getElementById("icon");
	if (!link || !d) return false;
	var invertedSense = ((!justPicture && d.cyclePause <= 0) || (justPicture && d.cyclePause > 0)) ? 1 : -1;
	if (!justPicture) d.cyclePause = 100 * invertedSense;
	if (link) link.innerHTML = (invertedSense > 0) ? "play" : "pause";
	if (!justPicture && invertedSense < 0) resumeSlides();
	return false;
}

function playVideo(calling_link)
{
	var playerID = "videoplayer";
	var icon = document.getElementById("icon");
	if (!icon) jQuery('div .youtube').show();
	//Pause slideshow:
	if (icon) icon.cyclePause = 100; //This is better than .cycle('pause') because onMouseOut will decrement cyclePause (causing it to resume.)
	else jQuery(calling_link).parent().hide(); //If we're embedded on a page that doesn't have an icon area
	jQuery('div [id ^= control] a, .control-arrow').one("click", resumeSlides);
	//Create new DIV (ridding ourselves of any previously existing ones first):
	jQuery("#" + playerID).remove();
	jQuery(calling_link.parentNode).before("<div id='" + playerID + "' style=\"display: block;\"></div>");
	//Get info about the video/size:
	var video = calling_link.href.match(/youtube.com.*[\/=]([\w\-]+)$/i)[1];
	var preview_img = jQuery(calling_link).children('img')[0];
	var width = (preview_img) ? preview_img.width : 400;
	var height = (preview_img) ? preview_img.height : 250;
	//Embed the Flash object:
	var params = {
		allowfullscreen : true,
		allowscriptaccess : "always"
	};
	var flashvars = {
		autoplay : 1,
		enablejsapi : 1,
		playerapiid : playerID
	}
	var flash_url = "http://www.youtube-nocookie.com/v/" + video + "&hl=en&fs=1&rel=0";
	swfobject.embedSWF(flash_url, playerID,
			width, height, "8.0.0", __scripts['swfobject']['path'] + "/expressInstall.swf", flashvars, params)
	//Hide controls by pushing them down (this allows them to come back once the player is removed):
	document.getElementById(playerID).style.marginBottom = (icon) ? "1000px" : "0px";
	return false;
}