var currentSectionMenu = null;
var topMenuSelection = null;
var sectionMenuSelection = null;
var currentSectionID = "";
var currentStatusID = "";

function productionMenuSectionClicked(link) {
	var sectionID = link.id.split(":")[0];
	var sectionMenuID = "menu-section-"+sectionID;
	
	if (link != topMenuSelection) {
		if (topMenuSelection) {
			topMenuSelection.className = "";
		}
		link.className = "selected";
		topMenuSelection = link;
		currentSectionID = sectionID;
		
		displayProductions(currentSectionID)
	}
}

function productionMenuStatusClicked(link) {
	var statusID = link.id.split(":")[0];
	if (link != sectionMenuSelection) {
		if (sectionMenuSelection) {
			sectionMenuSelection.className = "";
		}
		link.className = "selected";
		sectionMenuSelection = link;
		currentStatusID = statusID;
		
		displayProductions(currentSectionID, currentStatusID)
	}
}

// version is array, like: compareBrowserVersion([1, 7]) to compare it to version 1.7. -1 if current browser is older, 0 if equal, 1 if newer.

var _compareBrowserVersion_Version = null;
function compareBrowserVersion(version) {
	if (!_compareBrowserVersion_Version) {
		_compareBrowserVersion_Version = $.browser.version.split('.');
		for (var i=0; i<_compareBrowserVersion_Version.length; i++)
			_compareBrowserVersion_Version[i] = parseInt(_compareBrowserVersion_Version[i])
		
	}
	
	for (var i=0; i<version.length; i++) {
		if (_compareBrowserVersion_Version[i] < version[i])
			return -1;
		else if (_compareBrowserVersion_Version[i] > version[i])
			return 1;
	}
	return 0;
}

// To avoid evoking the hashchange action every time the hash is changed in software,
// set currentHash right before changing the hash. (Implemented in setHash below.)

var currentHash = window.location.hash;
$(window).bind('hashchange', function hashChanged() {
	if (window.location.hash != currentHash) {
		processHash();
		currentHash = window.location.hash;
	}
})

function setHash(section, status, production) {
	if (production) {
		window.location.hash = currentHash = '#' + production;
	} else {
 		window.location.hash = currentHash = "#" + (section ? section : "") + ":" + (status ? status : "");
 	}
}

var currentlyDisplayedProductions = {};

function displayProductions(section, status, production) {
	//console.log("displayProductions(",section,",",status,",",production,")");
	if (currentlyDisplayedProductions.section == undefined || currentlyDisplayedProductions.section != section || currentlyDisplayedProductions.status != status) {
		var productionSelector = "#select-production-notice";
		if (section && status) {
			// Display a specific selection / status combo
			thumbnailsSelector = "li.productionThumbnail."+section+"-section."+status+"-status";
		} else if (section) {
			// Display all productions in the section
			thumbnailsSelector = "li.productionThumbnail."+section+"-section";
		} else if (status) {
			// Display all productions with this status
			thumbnailsSelector = "li.productionThumbnail."+status+"-status";
		} else {
			// No limits set; display all
			thumbnailsSelector = "li.productionThumbnail";
		}
		
		var thumbnailsCSS = {'opacity': '0'}

		if ($.browser.msie && compareBrowserVersion([8]) < 0) {
			// IE older than 8.0
			// IE-specific quirk:
			// On block elements (like <li>) with hasLayout, display: inline works like display: inline-block
			thumbnailsCSS.display = "inline";
			thumbnailsCSS.width = 90;
		} else if ($.browser.mozilla && compareBrowserVersion([1,9]) < 0 ) {
			// Gecko older than 1.9, inline-block not yet supported. Use gecko-only extension.
			thumbnailsCSS.display = "-moz-inline-stack";
		} else {
			thumbnailsCSS.display = "inline-block";
		}
		
		// New JQuery-based approach:
		$('li.productionThumbnail:not('+thumbnailsSelector+')').css('display', 'none');
		$(thumbnailsSelector).css('display', 'block').css(thumbnailsCSS).animate({'opacity': 1});
		
		currentlyDisplayedProductions = {section: section, status: status};
	}
	
	if (production) {
		setHash(section,status,production);
		openProduction(production);
	} else {
		// closeProduction will set the hash...
		closeProduction();
	}
}

var currentProduction = null;

function openProduction(production) {
	var productionPopup = $("#"+production);
	if (currentProduction) {
		resetProduction(currentProduction);
		$("#"+currentProduction).fadeOut("fast");
	}
	
	resetProduction(production);
	$("#popupBackground").css({
		"height": document.documentElement.clientHeight*2+1000,
		"opacity": "0.7"
	});
	$("#popupBackground").fadeIn("slow");
	productionPopup.fadeIn("slow");
	currentProduction = production;
}

function closeProduction() {
	if (currentProduction) {
		$("#"+currentProduction).fadeOut("fast");
		$("#popupBackground").fadeOut("normal");
		resetProduction(currentProduction);
		currentProduction = null;
	}
	setHash(currentlyDisplayedProductions.section, currentlyDisplayedProductions.status);
}

function resetProduction(production) {
	restorePopupDefaults(production);
	
	// Restore default CSS styles
	var productionPopup = $("#"+production);
	
	// Reset panels
	$(".infoPane", productionPopup).css({'display': 'block'});
	$(".trailerPane", productionPopup).css({'display': 'none'});
	
	// Clear trailer video
	$('.trailer', productionPopup).html('');
	
}

var popupDefaults = Array();

var popupDefaultLeft = "";
var popupDefaultWidth = "";
var popupDefaultHeight = "";
var boxDefaultWidth = "";
var boxDefaultHeight = "";

function restorePopupDefaults(production) {
	var defaults = popupDefaults[production];
	if (defaults) {
		var productionPopup = $("#"+production);
		var productionBox = $('.productionBox', productionPopup);
		
		productionPopup.css( {	'left': 	defaults['popupLeft'],
								'width':	defaults['popupWidth'],
								'height':	defaults['popupHeight']
							  } );
		productionBox.css( {	'width':	defaults['boxWidth'],
								'height':	defaults['boxHeight'],
								'padding':	defaults['padding']
							} );
	}
}

function savePopupDefaults(production) {
	var productionPopup = $("#"+production);
	var productionBox = $('.productionBox', productionPopup);
	var defaults = {'popupLeft': 	productionPopup.css('left'),
					'popupWidth':	productionPopup.css('width'),
					'popupHeight':	productionPopup.css('height'),
					'boxWidth':		productionBox.css('width'),
					'boxHeight':	productionBox.css('height'),
					'boxPadding':	productionBox.css('padding')
	};
	popupDefaults[production] = defaults;
}

function playTrailer(production, src, width, height) {
	width = parseInt(width);
	height = parseInt(height);
	
	var productionPopup = $("#"+production);
	var productionBox = $('.productionBox', productionPopup);
	var productionInfoPane = $('.infoPane', productionPopup);
	var productionTrailerPane = $('.trailerPane', productionPopup);
	var productionTrailer = $('.trailer', productionPopup);
	
	savePopupDefaults(production);
	
	var headerHeight = 28;
	var marginHeight = 0;
	var controllerHeight = 16;
	productionInfoPane.fadeOut("normal");
	productionTrailerPane.fadeIn("normal");
	
	productionPopup.css({'width': (width+50)+'px', 'height': (height+controllerHeight+headerHeight+100)+'px'});
	productionBox.animate({'width': width+'px', 'height': (height+controllerHeight+headerHeight+(marginHeight*2))+'px'});
	productionBox.css({'padding':'0 0 0 0'});
	
	var testLeft = productionPopup.css('left');
		
	var currentLeft = parseInt(productionPopup.css('left'));
	var currentWidth = parseInt(productionBox.css('width'));
	
	var newLeft = currentLeft - ((width - currentWidth) / 2);
	
	productionPopup.animate({'left': newLeft+'px'});
	
	// Uses jquery media plugin:
	productionTrailer.media( { 
		src:					"trailers/"+src,
		width: 					width, 
		height: 				height+16, 
		autoplay: 				true, 
		bgColor: 				'black',
		params:					{	qtsrcdontusebrowser:	'true',
									controller:				'true',
									kioskmode:				'true'
								}
	} );
	//productionTrailer.html(trailerObjectHTML(src, width, height));
}


function loadProductionSection(section, status) {
	displayProductions(section, status);
}

function loadProduction(production) {
	var productionPopup = document.getElementById(production);
	if (productionPopup) {
		var productionClass = productionPopup.getAttribute('class');
		var sectionClass = productionClass.match(/(\w+)-section/);
		displayProductions(sectionClass[1], '', production);
	} else {
		//console.log("No production found named "+production);
	}
	
}

function processHash() {
	if (window.location.hash) {
		var hash = window.location.hash.substr(1);
		if (hash.indexOf(":") >= 0) {
			var split = hash.split(":");
			loadProductionSection(split[0], split[1]);
		} else {
			loadProduction(hash);
		}
	} else {
		// Default section to display...
		loadProductionSection('current');
	}
}

function setupProductionSections() {
	
}

var productionsInitalized = false;
function productionsInit() {
	// quit if this function has already been called
	if (productionsInitalized) return;
	productionsInitalized = true;
	
	
	setupProductionSections();
	processHash();
	
	if ($.browser.msie && compareBrowserVersion([7]) < 0) {
		// Older than IE7; use 8-bit png controls
		$('div.productionBox a.close').css('background-image', 'url("../images/popup-close-button-8bit.png")');
		$('div.productionBox a.next').css('background-image', 'url("../images/popup-next-button-8bit.png")');
		$('div.productionBox a.previous').css('background-image', 'url("../images/popup-previous-button-8bit.png")');
	} 
}




////
//// Load productionsInit() when DOM is ready...
//// Using JScript...
////

$(document).ready(function(){
	productionsInit();
});