var filmPos = 0; // current position in thumbs
var normalPos = 0; // position of film before we zoomed in
var big = false; // bigmode flag

/**
 * start up function
 */
function startUp() {

	doTopNav();
}

/**
 * determine whether to display flash or image in top navigation
 */
function doTopNav() {

	// add flash or image based on browser support of flash
	if (Flash.hasVersion(10,0,0)) {$("#top").html(Flash.embed("/swf/crane.swf", 980, 200, {wmode:"opaque"} ));}
	else {$("#top").html('<img src="/img/toronto.jpg" alt="" width="980" height="200" />');}
	// setup event listeners for menus
	$('#topNav').children().hover(onOverTop, onOutTop);
}

/**
 * users mouses over top navigation
 */
function onOverTop() {

	$(this).children(".topNavSubMenu").css( {display:"block", position:"absolute", opacity:0.0} );
	$(this).children(".topNavSubMenu").animate( {opacity:0.75} );
}

/**
 * user mouses out of top navigation
 */
function onOutTop() {

	$(this).children(".topNavSubMenu").css( {display:"none"} );
}


/**
 * user clicks on a thumb in the filmstrip
 */
function filmThumbClick(n, skip) {

	// normal size thumb
	if (!big) {
		$("#filmThumbImg" + filmPos).css( {borderColor:"#000000"} );
		$("#filmThumbImg" + n).css( {borderColor:"#ffffff"} );
		if (skip == undefined) {
			$("#filmItem" + filmPos).animate( {opacity:0.0},
				function() {
					// remove old image and fade in new one
					$("#filmItem" + n).css( {opacity:0.0, display:"block"} );
					if (filmPos != n) {$("#filmItem" + filmPos).css( {display:"none"} );}
					$("#filmItem" + n).animate( {opacity:1.0} );
					filmPos = n;
				}
			);
		}
		else {
			$("#filmItem" + filmPos).css( { display:"none" } );
			$("#filmItem" + n).css( { display:"block" } );
			filmPos = n;
		}
	}
	// big mode img
	else {
		if (skip == undefined) {
			$("#bigFilmHolder").animate( {opacity:0.0},
				function() {
					$("#bigFilmImgHolder").html("<img id='bigFilmImg' src='" + filmImg[n] + "' />");
					$("#bigFilmDescription").html(filmDescription[n]);
					filmPosition();
					filmPos = n;
					$("#bigFilmHolder").animate( {opacity:1.0} );
				}
			);
		}
		else {
			$("#bigFilmImgHolder").html("<img id='bigFilmImg' src='" + filmImg[n] + "' />");
			$("#bigFilmDescription").html(filmDescription[n]);
			filmPosition();
			filmPos = n;
		}
	}
}

function filmThumbOver(n) {

	$("#filmThumbImg" + n).css( {borderColor:n == filmPos ? "#ffffff" : "#aaaaaa"} );
}

function filmThumbOut(n) {
	$("#filmThumbImg" + n).css( {borderColor:n == filmPos ? "#ffffff" : "#000000"} );
}

function filmNextClick() {

	var total = $(".filmThumbImg").size();

	if (filmPos < total - 1) {filmThumbClick(filmPos + 1);}
	else {filmThumbClick(0);}
}

function filmPreviousClick() {

	var total = $(".filmThumbImg").size();

	if (filmPos > 0) {filmThumbClick(filmPos - 1);}
	else {filmThumbClick(total - 1);}
}

function filmZoomClick() {

	normalPos = filmPos;
	big = true;
	$("#bigFilmCloud").css( {display:"block", opacity:0.0 } );
	$("#bigFilmHolder").css( {display:"block", opacity:0.0 } );
	$("#bigFilmCloud").animate( {opacity:0.6} );
	$("#bigFilmHolder").animate( {opacity:1.0} );
	filmThumbClick(filmPos, true);
}

function filmCloseClick() {

	big = false;
	$("#bigFilmCloud").animate( {opacity:0.0}, function() { $("#bigFilmCloud").css( {display:"none"} ); } );
	$("#bigFilmHolder").animate( {opacity:0.0}, function() { $("#bigFilmHolder").css( {display:"none"} ); } );
	var n = filmPos;
	filmPos = normalPos;
	filmThumbClick(n, true);
}

function filmPosition() {

	var w = $("#bigFilmImg").width();

	$("#bigFilmDescription").css( { width: w < 445 ? 445 : w } );
	$("#bigFilmHolder").css( {
		left: -$("#bigFilmHolder").width() / 2 - 20,
		top: ($(window).height() - $("#bigFilmHolder").height()) / 2 - 15
	} );
}

$(document).ready(startUp);