var videoPlayerInitialised = false;
var playerReadyListeners = [];
function playerReady(obj) {
	/* ignore obj - it's some other random thing, not the player object we can actually call API methods on */
	var player = document.getElementById('mainstage_video');
	videoPlayerInitialised = true;
	for (var i = 0; i < playerReadyListeners.length; i++) {
		playerReadyListeners[i](player);
	}
	player.addViewListener('PLAY', 'playerPlayEvent');

player.addModelListener('STATE', 'stateMonitor');
}


function onPlayerReady(listener) {
	playerReadyListeners[playerReadyListeners.length] = listener;
}

var playerPlayListeners = [];
function playerPlayEvent() {
	var player = document.getElementById('mainstage_video');
	for (var i = 0; i < playerPlayListeners.length; i++) {
		playerPlayListeners[i](player);
	}
}

function onPlayerPlay(listener) {
	playerPlayListeners[playerPlayListeners.length] = listener;
}


var playerCompleteListeners=[];

function onPlayerComplete(listener) {
	playerCompleteListeners[playerCompleteListeners.length] = listener;
}

function playerCompleteEvent() {
	var player = document.getElementById('mainstage_video');
	for (var i = 0; i < playerCompleteListeners.length; i++) {
		playerCompleteListeners[i](player);
	}
}

function stateMonitor(obj)
{
if(obj.newstate == 'COMPLETED')
{
playerCompleteEvent();
}
};

(function($) {
	VISIBLE_FEATURE_COUNT = 3;
	//PAUSE_BEFORE_FEATURES_PANEL = 2000;
	PAUSE_BEFORE_FEATURES_PANEL = 0;
	FEATURES_FADE_IN_STAGGER_DELAY = 200;
	FEATURES_SCROLL_TIME = 600;
	FEATURE_HEIGHT = 87;
	BACKGROUND_FADE_TIME = 1000;
	HEADLINE_SLIDE_TIME = 600;
	AUTOSCROLL_DELAY = 10000;
	CLICK_THROUGH_TO_FEATURE_DELAY = 1000;
	
	//var headlineAnimationOff = {'left': '150px', 'opacity': 0};
	//var headlineAnimationOn = {'left': '0px', 'opacity': 1};
	/* less exciting but less processor-intensive version */
	var headlineAnimationOff = {'left': '618px'};
	var headlineAnimationOn = {'left': '0px'};
	
	function Feature(mainstage, initialFeatureData) {
	
		var videoFlashVariables = {
			controlbar: 'over',
			skin: "/swf/mediaplayer/skins/Modieus_Slim/stylish_slim.swf"
			//skin: "/swf/mediaplayer/skins/beelden.zip"
		};
		
		var videoParameters = {
			menu: "false",
			allowfullscreen: "true",
			allowscriptaccess: "always",
			plugins: "googlytics-1"
		};
		
		// var featureHtml = $('<a class="main_feature"><div class="transition_layer"></div><p class="alt"></p><div class="headline"><div class="headline_inner"><h1></h1><h2><span></span></h2></div></div><div id="mainstage_video"></div></a>');
		var featureHtml = $('<a class="main_feature"><div class="transition_layer"></div><div id="mainstage_video"></div></a>');
		$(mainstage).html(featureHtml);
		
		var currentFeatureData;
		var transitionLayer = $('.transition_layer', featureHtml);
		transitionLayer.fadeTo(1, 0);
		var headline = $('.headline', featureHtml);
		
		/* show feature immediately, with no transition */
		function showFeature(featureData) {
			currentFeatureData = featureData;
			if (featureData.href) {
				$(featureHtml).attr({'href': featureData.href});
			} else {
				$(featureHtml).removeAttr('href');
			}
			$(featureHtml).css({'background-image': 'url(' + featureData.backgroundImage + ')'});
			$('.alt', featureHtml).text(featureData.alt);
			$('h1', headline).text(featureData.headline);
			$('h2 span', headline).text(featureData.headline2);
			
			if (!featureData.headline) {
				headline.css(headlineAnimationOff);
			}
			if (featureData.video) {
				initVideo(featureData);
			}
		}
		
		/* Change feature link and headline to the new feature, and fade the headline on */
		var switchHeadline = function(featureData) {
			if (featureData.href) {
				$('a.main_feature', mainstage).attr('href', featureData.href);
			} else {
				$('a.main_feature', mainstage).removeAttr('href');
			}
			if (featureData.headline) {
				$('h1', headline).text(featureData.headline);
				$('h2 span', headline).text(featureData.headline2);
				headline.animate(headlineAnimationOn, HEADLINE_SLIDE_TIME);
			}
		}
		
		function transitionToFeature(featureData) {
			/* Stop any currently playing video */
			$('#mainstage_video', mainstage).replaceWith('<div id="mainstage_video"></div>')
			videoPlayerInitialised = false;
			
			/* make sure the back layer is showing the background image from the previous current
			feature - it might not if transition is still happening */
			$('a.main_feature', mainstage).css({'background-image': 'url(' + currentFeatureData.backgroundImage + ')'});
			$('a.main_feature .alt').text(currentFeatureData.alt);
			
			transitionLayer.stop().css({'opacity': 0});
			transitionLayer.css({'background-image': 'url(' + featureData.backgroundImage + ')'});
			transitionLayer.fadeTo(BACKGROUND_FADE_TIME, 1, function() {
				$('a.main_feature', mainstage).css({'background-image': 'url(' + featureData.backgroundImage + ')'});
				$('a.main_feature .alt').text(featureData.alt);
				if (featureData.video) {
					initVideo(featureData);
				}
			});
			
			if (currentFeatureData.headline) {
				/* need to fade current headline off first */
				headline.stop().animate(headlineAnimationOff, HEADLINE_SLIDE_TIME, function() {
					switchHeadline(featureData);
				})
			} else {
				switchHeadline(featureData);
			}
			
			currentFeatureData = featureData;
		}
		
		function initVideo(featureData) {
			$('#mainstage_video').css({'z-index': -2});
			swfobject.embedSWF("http://outreachconvention.com/swf/player.swf", "mainstage_video", "694", "348", "9.0.0", false, videoFlashVariables, videoParameters, false);
			$('#mainstage_video').css({'z-index': -2});
			
			onPlayerReady(function(player) {
				player.style.zIndex = -2;
				player.sendEvent('LOAD', {
					file: featureData.video,
					image: featureData.backgroundImage
				});
				player.style.zIndex = 12;
			})
			
			onPlayerComplete(function(){ $('#mainstage_video').css({"visibility":"hidden"});
			$('a.main_feature').css({"background-image":"url("+ featureData.endImage+")"}).attr("href",featureData.href)
			$('div.transition_layer').css("opacity","0")})
		}
		
		function onPlayVideo(listener) {
			onPlayerPlay(listener);
		}
		
		showFeature(initialFeatureData);
		
		return {
			showFeature: showFeature,
			transitionToFeature: transitionToFeature,
			onPlayVideo: onPlayVideo
		}
	}
	
	function FeaturesPanel(mainstage, data, feature) {
		
		var currentFeatureNumber = 0;
		var topVisibleTrayIndex = 0;
		var topPopulatedTrayIndex = 0;
		var bottomPopulatedTrayIndex = -1;
		
		var featuresPanel = $('<div class="features_panel"><div class="features_nav features_nav_up"><a href="javascript:void(0)">Up</a></div><div class="features_viewport"><div class="features_tray"><ul class="features"></ul></div></div><div class="features_nav features_nav_down"><a href="javascript:void(0)">Down</a></div></div>');
		var featuresUl = $('ul.features', featuresPanel);
		var headline = $('.headline', mainstage);
		
		/* timestamp of the last click on a feature which didn't take us through to the feature;
		we will not click through to the feature unless this is more than CLICK_THROUGH_TO_FEATURE_DELAY ago */
		var lastNavigationClickTime;
		
		/* return the index into 'data' of the feature in tray position i */
		function featureNumberAtTrayIndex(i) {
			var featureNumber = ((VISIBLE_FEATURE_COUNT - 3) - i) % data.length;
			if (featureNumber < 0) featureNumber += data.length;
			return featureNumber;
		}
		
		function scrollTrayIntoPosition() {
			while (topVisibleTrayIndex < topPopulatedTrayIndex) prependFeature();
			
			var bottomVisibleTrayIndex = topVisibleTrayIndex + VISIBLE_FEATURE_COUNT + 1;
			while (bottomVisibleTrayIndex > bottomPopulatedTrayIndex) appendFeature();
			
			$('.features_tray', featuresPanel).stop().animate(
				{'top': (-topVisibleTrayIndex * FEATURE_HEIGHT) + 'px'}, FEATURES_SCROLL_TIME);
		}
		
		/* return true if feature has changed, false if not */
		function selectFeature(trayIndex) {
			topVisibleTrayIndex = trayIndex - VISIBLE_FEATURE_COUNT + 1;
			scrollTrayIntoPosition();
			//var featureNumber = featureNumberAtTrayIndex(trayIndex);
			var featureNumber = featureNumberAtTrayIndex(trayIndex - 2);
			$('li.current_feature', featuresUl).css("opacity","0.75");
			$('li.current_feature', featuresUl).removeClass('current_feature');
			$('li.feature_number_' + featureNumber, featuresUl).addClass('current_feature');
			$('li.feature_number_' + featureNumber, featuresUl).css("opacity","1");
			
			if (featureNumber != currentFeatureNumber) {
				currentFeatureNumber = featureNumber;
				feature.transitionToFeature(data[featureNumber]);
				return true;
			} else {
				return false;
			}
		}
		
		/* return a <li> for a feature item */
		function createFeatureLi(trayIndex) {
			var featureNumber = featureNumberAtTrayIndex(trayIndex);
			var featureData = data[featureNumber];
			var feature = $('<li class="feature"><div class="thumbnail"><img src="" width="55" height="55" alt="" /></div><div class="title"><a></a><br /><span></span></div></li>');
			feature.addClass('feature_number_' + featureNumber);
			if (featureNumber == currentFeatureNumber) feature.addClass('current_feature');
			$('.thumbnail img', feature).attr('src', featureData.thumbnail);
			$('.title a', feature).attr('href', featureData.href);
			$('.title a', feature).text(featureData.featureTitle);
			$('.title span', feature).text(featureData.featureText);
			feature.hover(function() {
				feature.addClass('feature_hover');
			}, function() {
				feature.removeClass('feature_hover');
			}).click(function() {
				disableAutoscroll();
				var featureHasChanged = selectFeature(trayIndex + 2);
				var currentTime = (new Date).getTime();
				if (featureHasChanged || lastNavigationClickTime > (currentTime - CLICK_THROUGH_TO_FEATURE_DELAY)) {
					lastNavigationClickTime = currentTime;
				} else {
					var href = $('.title a', this).attr('href');
					if (href != null) {
						document.location.href = href;
					}
				}
				return false;
			})
			return feature;
		}
		
		function prependFeature() {
			topPopulatedTrayIndex -= 1;
			var feature = createFeatureLi(topPopulatedTrayIndex);
			
			featuresUl.prepend(feature);
			centreFeatureText(feature);
			featuresUl.css({'top': topPopulatedTrayIndex * FEATURE_HEIGHT});
		}
		function appendFeature(opts) {
			opts = opts || [];
			bottomPopulatedTrayIndex += 1;
			var feature = createFeatureLi(bottomPopulatedTrayIndex);
			featuresUl.append(feature);
			centreFeatureText(feature);
			
			if (opts.fade) {
				feature.hide();
				setTimeout(function() {feature.fadeIn()}, (bottomPopulatedTrayIndex + 1) * FEATURES_FADE_IN_STAGGER_DELAY);
			}
		}
		
		function centreFeatureText(feature) {
			var title = $('.title', feature);
			title.css({'padding-top': (FEATURE_HEIGHT - title.get(0).offsetHeight) / 2 + 'px'});
		}
		
		function selectNextFeature() {
			selectFeature(topVisibleTrayIndex + VISIBLE_FEATURE_COUNT - 2);
		}
		
		function selectPreviousFeature() {
			selectFeature(topVisibleTrayIndex + VISIBLE_FEATURE_COUNT);
		}
		
		var autoscrollTimer;
		var isAutoscrolling = false;
		var autoscrollIsDisabled = false;
		function startAutoscroll() {
			if (!isAutoscrolling && !autoscrollIsDisabled) {
				autoscrollTimer = setInterval(selectPreviousFeature, AUTOSCROLL_DELAY);
				isAutoscrolling = true;
			}
		}
		function stopAutoscroll() {
			clearInterval(autoscrollTimer);
			isAutoscrolling = false;
		}
		function disableAutoscroll() {
			autoscrollIsDisabled = true;
			stopAutoscroll();
		}
		
		/* hide in preparation for fade-on */
		mainstage.append(featuresPanel);
		$('.features_nav_up', featuresPanel).hide();
		$('.features_nav_down', featuresPanel).hide();
		
		/* fade on / create initial features */
		$('.features_nav_up', featuresPanel).fadeIn();
		
		for (i = 0; i < VISIBLE_FEATURE_COUNT; i++) {
			appendFeature({fade: true});
		}
		
		setTimeout(function() {
			$('.features_nav_down', featuresPanel).fadeIn(function() {
				/* when this has finished fading in, we can adjust headline box width */
				headline.wrap('<div class="headline_viewport"></div>');
			});
		}, (VISIBLE_FEATURE_COUNT + 1) * FEATURES_FADE_IN_STAGGER_DELAY);
		
		$('.features_nav_up', featuresPanel).click(function() {
			disableAutoscroll();
			selectNextFeature();
		})
		
		$('.features_nav_down', featuresPanel).click(function() {
			disableAutoscroll();
			selectPreviousFeature();
		})
		
		return {
			startAutoscroll: startAutoscroll,
			stopAutoscroll: stopAutoscroll,
			disableAutoscroll: disableAutoscroll
		};
	}
	
	$.fn.nocMainstage = function(data) {
		var mainstage = this;
		var feature = Feature(mainstage, data[0]);
		
		if (data.length > 1) {
			$(function() {
				setTimeout(function() {
					featuresPanel = FeaturesPanel(mainstage, data, feature);
					$(mainstage).hover(function() {
						featuresPanel.stopAutoscroll();
					}, function() {
						featuresPanel.startAutoscroll();
					})
					feature.onPlayVideo(function() {
						featuresPanel.disableAutoscroll();
					})
					featuresPanel.startAutoscroll();
				}, PAUSE_BEFORE_FEATURES_PANEL);
			})
		}
		
		/* start preloading images when the page's own images have loaded */
		$(window).load(function() {
			var backgroundImages = [];
			for (var i = 0; i < data.length; i++) {
				backgroundImages[i] = new Image();
				/* not validating in IE: backgroundImages[i].src = data[i].backgroundImage; */
			}
		})
	}
	
})(jQuery);