$(document).ready( function() {

	// bind print call to printme class
	$(".printme").click( function() {
		window.print();
	});
	
	// set up nav menu slideout behaviour
	$("#mainnav > li > a").click( function(e) {
		if ( $(this).parent().children("ul").length > 0 ) {
			// only prevent the browser from following the link
			// if there is a sub-menu to slide out
			e.preventDefault();
		}
		$(this).blur();
		if ( $(this).parent().children("ul").css("display") == "none" ) {
			$(this).parent().siblings().css("font-weight", "normal");
			$(this).parent().siblings().children("ul").css("display", "none");
			$(this).parent().css("font-weight", "bold");
			$(this).parent().children("ul").show("blind", {direction: 'left'}, 500);
		} else {
			$(this).parent().css("font-weight", "normal");
			$(this).parent().children("ul").hide("blind", {direction: 'left'}, 500);
		}
	});

	// set up click handler on non-nav columns to close any open subnav
	$("#contentBox, #extrasBox").click( function() {
		$("#mainnav ul").each( function() {
			if ( $(this).css("display") != "none" ) {
				$(this).parent().css("font-weight", "normal");
				$(this).hide("blind", {direction: 'left'}, 500);
			}
		});
	});
	
	// get number of items in main nav menu to determine submenu length
	var numlis = $("#mainnav").children("li").length;
	
	// get nav menu width/height to determine submenu column width/height
	var navwidth = $("#mainnav").width();
	var navheight = $("#mainnav").height();
	var navpad = parseInt( $("#mainnav").css("padding-top") );
	
	// iterate through each of the submenus, arranging into columns
	$("#mainnav li").each( function() {
		
		var numcols = 0;
		var numsublis = $(this).children("ul").children("li").length;
		
		// show submenu so that we can get the height of the li elements
		$(this).children("ul").show();
		
		// go through each li element in the sub menu and re-flow if 
		// necessary to stay flush with the main menu
		$(this).children("ul").children("li").each( function( index ) {
			if ( numcols > 0 ) {
				var lpos = (numcols) * navwidth;
				var prevtop = $(this).prev().position().top;
				var prevheight = $(this).prev().height()+parseInt( $(this).prev().css("padding-top") )+parseInt( $(this).prev().css("padding-bottom") );
				var tpos = 0;
				if ( index % numlis == 0 ) {
					tpos = navpad;
				} else {
					tpos = prevheight + prevtop;
				}
				$(this).css("position", "absolute");
				$(this).css("top", tpos);
				$(this).css("left", lpos);
			}
			var colmodulo = (index+1) % numlis;
			if ( colmodulo == 0 && (index+1) != numsublis) {
				numcols++;
			}
		});
		
		// hide the submenu again
		$(this).children("ul").hide();
		
		// work out the new width of the submenu and apply it
		var subwidth = navwidth * (numcols+1);
		$(this).children("ul").css("width", subwidth);
		$(this).children("ul").css("height", navheight);
			
	});
	
	// set up the background images for the gsrollover class
	$(".gsrollover").each( function() {
		// set the height of the image truncating spans
//		alert( $(this).height() );
		$(this).find("span").height( $(this).height() );
		$(this).find("a").height( $(this).height() );
		
		// apply the backgound image so that the greyscale bottom half is the 
		// background		
		var bgImg = $(this).find("img").attr("src");
		$(this).css("background", "url('"+bgImg+"') no-repeat left bottom");
		
		// make sure the captions are of the right width and hide them
		$(this).find(".rocaption").width( $(this).width() );
		$(this).find(".rocaption").hide();
	});
	
	// set up the rollover behaviour for the gsrollover class
	$(".gsrollover").hover( function() {
		
		// fade the foreground image down to reveal the greyscale 
		// background image
		$(this).find("span").fadeTo(600, 0);
		
		// if there's a caption div, slide it up
		$(this).find(".rocaption").show("slide", {direction: 'down'}, 600);
		
	}, function() {
		
		// fade the foreground image back up
		$(this).find("span").fadeTo(600, 1);		
		
		// if there's a caption div, slide it down again
		$(this).find(".rocaption").hide("slide", {direction: 'down'}, 600);
		
	});

	// hack to prevent contentPadder and extrasMedCol from scrolling on IOS devices 
	// as of IOS 4 they don't support inline scrolling elements
        // this will be fixed in the mobile style sheet when it is ready
	var iosregexp = new RegExp("iP(od|ad|hone);.+AppleWebKit");
	if ( navigator.userAgent.match(iosregexp) ) {
		$("#contentPadder").css("height", "auto");
		$(".extrasMedCol").css("height", "auto");	
		$("#listscroller").css("height", "auto");	
	}

  	// also for WebKit-using Android Browsers
	var andregexp = new RegExp("Android \d\.\d.+AppleWebKit");
	if ( navigator.userAgent.match(andregexp) ) {
		$("#contentPadder").css("height", "auto");
		$(".extrasMedCol").css("height", "auto");	
		$("#listscroller").css("height", "auto");	
	}

	$("#contentBox h2.pulldown").toggle( function() {
		
		var narrsection = $(this).attr('id');
		$(this).addClass('pullexpand');
		$("#"+narrsection+"text").slideDown(500, 'swing');	
			
	}, function() {
		var narrsection = $(this).attr('id');	
		$(this).removeClass('pullexpand');
		$("#"+narrsection+"text").slideUp(400, 'swing', function() {

//			$("#"+narrsection+"text").addClass('expanded');

		});		
	});
	
	// hide all the narrative text boxes
	$("#contentBox div.pulldown").hide();

	// make it obvious that the narrative h2 are clickable with hand cursor
	$("#contentBox h2.pulldown").css("cursor", "pointer");
	$("#contentBox h2.pulldown").hover( function() {

		$(this).addClass('pullhover');

	}, function() {

		$(this).removeClass('pullhover');

	});
	


});