// Constants
var THUMB_WIDTH = 92;
var THUMB_HEIGHT = 75;
var LARGE_WIDTH = 248;
var LARGE_HEIGHT = 208;
var ANIMATION_DURATION_ENLARGE = 500;
var ANIMATION_DURATION_SHRINK = 500;

// Global Variables
var activeTestimonialArray = new Array();
var playerArray = new Array();

// Main function to handle testimonial asset resizing
// obj - object reference to a '.thumb' element
function updateAndEnlarge(obj) {
	// STEP 1: Clear the current playing video
	var activeTestimonialId;
	while (activeTestimonialId = activeTestimonialArray.shift()) {
		jQuery('#' + activeTestimonialId).find('.large object').wrap('<div>').parent().empty();
		jQuery('#' + activeTestimonialId).find('.large').each(function(){shrink(this)});
	}
	// STEP 2: Expand the image and show the requested video
	enlarge(obj, function(){updatePlayers(obj)});
}

// Enlarge a testimonial image
// obj - object reference to a '.thumb' element
// fn  - function to run at the end of the resizing
function enlarge(obj, fn) {
	var animParams = { width: LARGE_WIDTH, height: LARGE_HEIGHT, opacity: 0 };
	var completeFn = !jQuery(obj).siblings('img.large').length
		? (function(o) { jQuery(o).hide().siblings('.large').show() })        // video; just show it
		: (function(o) { jQuery(o).hide().siblings('.large').fadeIn(200) });  // image; quickly fade in large version
	jQuery(obj)
		.animate(animParams, {
			duration: ANIMATION_DURATION_ENLARGE,
			easing: "easeOutCirc",
			step: function() { jQuery(this).parents('.story').children('.text').css('padding-left', jQuery(this).width() + 10) },
			complete: function() { completeFn(this); if (fn) fn(); }
		});
}

// Shrink a testimonial image
// obj - object reference to a '.large' element
// fn  - function to run at the end of the resizing
function shrink(obj, fn) {
	var animParams = { width: THUMB_WIDTH, height: THUMB_HEIGHT, opacity: 1 };
	jQuery(obj)
		.hide()
		.siblings('.thumb')
			//.show()
			.animate(animParams, {
				duration: ANIMATION_DURATION_SHRINK,
				easing: "easeOutCirc",
				step: function() { jQuery(this).parents('.story').children('.text').css('padding-left', jQuery(this).width() + 10) },
				complete: fn
			});
}

// Update the video player array
function updatePlayers(obj) {
	var currentTestimonialId = jQuery(obj).parents('.story').attr("id");
	activeTestimonialArray.push(currentTestimonialId);
	var html = "";
	for (var i = 0; i < playerArray.length; i++) {
		if (playerArray[i].id == currentTestimonialId) {
			html = playerArray[i].html;
			break;
		}
	}
	// Add the requested video content to the DOM to initiate playback
	jQuery(obj).siblings(".large").append(html);
}

// Render a single Brightcove player
function renderPlayer(playerId) {
	// By use of this code snippet, I agree to the Brightcove Publisher T and C 
	// found at http://corp.brightcove.com/legal/terms_publisher.cfm. 
	
	var config = new Array();
	
	/* 
	* feel free to edit these configurations
	* to modify the player experience
	*/
	config["videoId"] = null; //the default video loaded into the player
	config["videoRef"] = null; //the default video loaded into the player by ref id specified in console
	config["lineupId"] = null; //the default lineup loaded into the player
	config["playerTag"] = null; //player tag used for identifying this page in brightcove reporting
	config["autoStart"] = true; //tells the player to start playing video on load
	config["preloadBackColor"] = "#ffffff"; //background color while loading the player
	config["wmode"] = "transparent"; //set the window mode
	
	/* 
	* set the player's size using the parameters below
	* to make this player dynamically resizable, set the width and height as a percentage
	*/
	config["width"] = LARGE_WIDTH;
	config["height"] = LARGE_HEIGHT;
	
	/* do not edit these config items */
	config["playerId"] = playerId;
	
	document.write('<div class="large">');

	createExperience(config, 8);

	document.write('</div>');
	
	var testimonyId = "testimony_" + playerId;

	// Remove the video player OBJECT tag from the DOM and store it in an array
	// We have to wrap it in an additional DIV tag because we only want the OBJECT
	// tag. For IE, an additional SCRIPT tag is rendered and we want to keep that.
	playerArray.push({
		id: testimonyId, 
		html: jQuery("#" + testimonyId).find(".large object").wrap("<div>").parent().remove().html()});
}

// Start-up functions
jQuery(function() {
	jQuery('.story .thumb').click(function() { updateAndEnlarge(this); });
});