iat = {};

// var to store video dimensions
var videos = new Array();
videos['authoring_app'] = {"x" : "934", "y" : "670"};
videos['how_to_create_a_gap_fill_question'] = {"x" : "934", "y" : "772"};
videos['how_to_create_a_multiple_choice_question'] = {"x" : "934", "y" : "772"};
videos['how_to_create_a_multiple_selection_question'] = {"x" : "934", "y" : "772"};
videos['how_to_create_a_numeric_question'] = {"x" : "934", "y" : "772"};
videos['how_to_create_a_question_bank'] = {"x" : "934", "y" : "670"};
videos['how_to_create_a_test_document'] = {"x" : "934", "y" : "772"};
videos['how_to_create_an_essay_question'] = {"x" : "934", "y" : "772"};
videos['how_to_run_an_invigilated_test_immediately'] = {"x" : "934", "y" : "670"};
videos['how_to_upload_a_candidate_group_to_ExamOnline'] = {"x" : "934", "y" : "670"};
videos['human_marking_essay_answers'] = {"x" : "934", "y" : "671"};
videos['introduction_to_examonline'] = {"x" : "934", "y" : "761"};
videos['support_for_essay_questions'] = {"x" : "934", "y" : "671"};
videos['support_for_hand_drawn_sketches'] = {"x" : "945", "y" : "735"};
videos['the_candidate_test_interface'] = {"x" : "934", "y" : "833"};
videos['the_delivery_app'] = {"x" : "934", "y" : "670"};
videos['the_results_app'] = {"x" : "934", "y" : "670"};
videos['video_help_buttons'] = {"x" : "934", "y" : "670"};

iat.showHelpVideo = function(name, title) {
    // we need to calc a vlaue for width and height for fancybox, because autoScale does not seem to work
	
	// fancy box needs extra space	
	var fboxExtraWidth = 100;	
	var fboxExtraHeight = 120;
	// work out our ideal dimensions
	var desiredHeight = Number(videos[name].y) + fboxExtraHeight;
	var desiredWidth = Number(videos[name].x) + fboxExtraWidth;
	// now get the viewport dimensions
	var h = $(window).height();	
	var w = $(window).width();	
	// and work out the available space, taking into account the fancybox extra
	var availableHeight = h - fboxExtraHeight;
	var availableWidth = w - fboxExtraWidth;
	// now set the nominal height and width for our vid
	var height = Math.min(desiredHeight, availableHeight);
	var width = Math.min(desiredWidth, availableWidth);
	// OK, now we've worked out the max we can display in terms of height and width, but if one of these is less than full scale and the other not, we get asymetric white space around the video,
	// so need to make sure they have the same scaling (if any)
	if (height < desiredHeight || width < desiredWidth) {
		// ok, at least one has been scaled, ensure both have the same scaling
		if ((height / desiredHeight) < (width / desiredWidth)) {
			// scale width by same as height
			width = (height / desiredHeight) * desiredWidth;
		} else {
			// scale height by same as width
			height = (width / desiredWidth) * desiredHeight;
		}
	}
	// scale width accordingly
//	alert(w + " by " + h + " desired = " + desiredWidth + " by " + desiredHeight + ", calculated : " + width + ", " + height);

	// major saga getting swfs to display without scroll bars. The easiest way is just to use the swf file as the url, then it scales fine, but the close button pops in IE:
	// access denied line 0, and the debugger says it is : __flash__removeCallback
	// quite a bit about this online, but none of the fixes worked, probably because we are using it in an iframe (spent hours trying and modding the fixes to use in the iframe, but no luck that way either)
	// The problem does not arise when we display an html file in the iframe, but we were getting scroll bars. The solution was to edit the html files and set the swf object dimensions to
	// 100% for width and height rather than the values they had. This means anytime we publish a video again we will need to edit the html file and set the width and height to 100%
	// However at least the results are good.
	var url = 'video/' + name;
	if ($.browser.msie) {
		url += '.htm';
	} else {
		url += '.swf';
	}
	$.fancybox({
			href: url,
			'width': width,    
			'height': height,
			title: title,
			titlePosition: 'outside',
			'type': 'iframe',
			onCleanup: function() {
			}
		});
	return false;
}