var terribleIE6 = badIE7 = IE = false;
	
	
	$(document).ready(function(){
		
	/*
		//	preload images
		$.each(['/layout/overlay/black.png', '/layout/overlay/black.png'], function(){
			$('<img>').attr('src',this);
		});
	*/
		
		//	flag for naughty IE 6
		IE			= $.browser.msie;
		terribleIE6	= ( IE && $.browser.version.indexOf('6')==0 ) ? true : false;
		badIE7		= ( IE && $.browser.version.indexOf('7')==0 ) ? true : false;
		
		
		//	initiate main tab navigation
		init_tab_navigation();
		
		//	initiate intro "more" expand link
		init_intro_more();
		
		if( ! terribleIE6 )
		{
			//	initiate drawer tabs (map and vocab)
			init_drawers();
			
			//	initiate tab drop down menus
			init_tab_menus();
		}

		//	initiate map and vocab tools
		init_vocab();
		init_map();
		
		
		//	initiate slideshow links
		init_slideshow();
		
		
		//	initiate any vocab icon tools
		init_vocab_icons();
		
		
		//	setup some css styles (these don't validate as 2.1, so we add them here)
		if( ! IE) {
			$('#toolbox a').hover(function(){$(this).css('opacity',.6)},function(){$(this).css('opacity',1)});
		}
		$('#drawer ul.legend').css({'overflow-y':'auto','overflow-x':'hidden'});
		
		
		//	load video links
		$('#video_box li.video a').click(function(e){
			e.preventDefault();
			
			var url = $(this).attr('href');
			var embed = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" title="'+url+'">'
							+'<param name="src" value="{video_file}">'
							+'<param name="autoplay" value="false">'
							+'<param name="controller" value="true">'
							+'<param name="width" value="240">'
							+'<param name="height" value="196">'
							+'<embed src="'+url+'" autoplay="false" width="240" height="196" controller="true" pluginspage="http://www.apple.com/quicktime/download/">'
						+'</object>';

			$('#video_box').html(embed);
		});
		
		
		
		$('table.elder_stories tr')
				.mouseover(function(){
					var c = $(this).attr('class');
					c = c.substr(c.indexOf('elder_'),c.indexOf(' '));
					$('table.elder_stories tr.'+c).addClass('hover');
				})
				.mouseout(function(){
					var c = $(this).attr('class');
					c = c.substr(c.indexOf('elder_'),c.indexOf(' '));
					$('table.elder_stories tr.'+c).removeClass('hover');
				});
		
		
		$('ul.menu.stories.selected li:even').addClass('even');
		
		
		
		$('#sidebar div.item').each(function(){
			var id		= $(this).attr('id');
			var $panel	= $(this).find('div.sidebar-content');

			if		($.cookie(id)=='open')		$panel.show();
			else if	($.cookie(id)=='closed')	$panel.hide();
		});
		
		$('#sidebar div.item h5 a').click(function(e){
			e.preventDefault();
			
			var $item	= $(this).parents('div.item:first');
			var $panel	= $item.find('div.sidebar-content');
			var id		= $item.attr('id');
			
			$.cookie(id, ($panel.is(':visible')?'closed':'open'), {'path':'/'});
			
			$panel.toggle("blind", { direction: "vertical" }, 300);
		});
		
		
	/*
		//Load new CSS for screen resolution < 1024
		if (screen.width < 1024){
		
  	   		var fileref=document.createElement("link");
		  	fileref.setAttribute("rel", "stylesheet");
		  	fileref.setAttribute("type", "text/css");
		  	fileref.setAttribute("href", "/css/small-window.css");
	  		document.getElementsByTagName("head")[0].appendChild(fileref);
	  		
		}
	*/
		 
	});




	//	initiate main tab navigation
	function init_tab_navigation()
	{
		//		..when tab is clicked, load content via ajax rather than linking to new page
		$('#navigation #categories a').click(
			function(e)
			{
				e.preventDefault();
				
				//	replace current section items with loading
				$('#navigation #sections div.banner').html('<div class="loading"><img src="/images/icons/upload.gif" /></div>');
				
				//	set url for ajax navigation request
				var url = '/embeds/navigation/'+$(this).attr('name')+'/';
				
				//	load navigation, and re-initialize the tabs after loading
				$('#navigation').load(url, null, init_tab_navigation);
			});
		
	}
	



	//	initiate intro "more" expand link
	function init_intro_more()
	{
		$('div.intro p.more a').click(
			function(e){
				e.preventDefault();
				
				var $a = $(this);
				var $intro = $('#intro_words');
				var url = '/site/intro/'+$('#intro_words_url').val()+'/';
				var open = false;
				var h = $intro.height();
				
				//	hide the more/less link while loading
				$a.toggle();
				

				//	are we opening to show full intro, or closing?
				if( ! $intro.hasClass('full'))
				{
					open = true;
					url += 'full/';
					
					//	slide the intro open and slap some loading style to it
					$intro.addClass('loading')
						  .css('height',250)
						  .html('<img src="/images/icons/upload.gif" />')
						  .show('blind', { direction: 'vertical' }, 300);
						  
				} else {
					$intro.addClass('loading')
						  .css('height',h)
						  .html('')
						  .hide('blind', { direction: 'vertical' }, 300, function(){
						  			$intro.html('<img src="/images/icons/upload.gif" />')
						  				  .css('height','auto')
						  				  .show();
						  		});
				}

				//	load the new stuff
				$.ajax({
					url		: url,
					success	: function(html){
						//	toggle the more/less link
						$a.text(open ? '- close' : '+ read more').toggle();
						
						//	put in the content
						$intro.replaceWith(html);
						
					}
				});
			});
	}



	//	initiate drawer tabs (map and vocab)
	function init_drawers()
	{
		var $drawers = $('#drawers');
		
		//	if drawer is not fixed (ie, it's a pull out tab rather than the vocab/map page itself)
		if( ! $drawers.hasClass('fixed'))
		{
			//	initiate drawer tab handling
			$('#drawers a.tab').click(
			function(e)
			{
				e.preventDefault();
				
				//	if we're clicking a tab that's already open, then close it...
				if(	   $(this).hasClass('selected')
					&& $drawers.hasClass('open'))
						close_drawers();					
				else
				{
					
					//	if drawer is not already open, open it, stuff in a loading drawer and select the appropriate tab
					if( ! $drawers.hasClass('open') )
					{
						$('#drawers a.tab').addClass('dim').removeClass('selected');
						$(this).addClass('selected').removeClass('dim');
						$drawers.addClass('open')
									 .append('<div id="drawer" class="loading"><img src="/images/icons/upload.gif" /></div>');
						
						if(badIE7)	$drawers.show();
						else		$drawers.show("slide", { direction: "left" }, 150);
					}
					//	else, it's already open.. replace current drawer with loading drawer
					else $("#drawer").replaceWith('<div id="drawer" class="loading"><img src="/images/icons/upload.gif" /></div>');
					
					//	setup an ajax request url for appropriate drawer content and request it
					var url = '/tools/drawers/'+$(this).attr('name')+'/';

					$.ajax({
						url		: url,
						success	: function(html){
							//	replace the #drawer div with new content
							$("#drawers").replaceWith(html);
							
							//	re-initialize the drawers
							init_drawers();
							init_vocab();
							init_map();
						}
					});
				}
			});

			if($drawers.hasClass('open'))
			{
				//	setup drawers close handling
				$(document).bind('mousedown', function(e){
					var $target = $(e.target);
					var within = $target.attr('id')=='drawers';
					var within = (within || $target.parents('div#drawers').length) > 0 ? true : false;
					if( ! within && $target.parents('body').length > 0){
						//	cancel close handling
						$(document).unbind('mousedown');
						if($drawers.hasClass('open')) close_drawers();
					}
				});
			}
		}
		
		
	}
	
	
		
	
	// drawers close handling
	function close_drawers()
	{
		var $drawers = $('#drawers');

		//	slide current drawer out
		if(badIE7)
		{
				$drawers.find("#drawer").remove();
				$drawers.find('a.tab').removeClass('dim selected');
				$drawers.removeClass('open');
		}
		else $drawers.hide("slide", { direction: "left", distance: 702 }, 150, function(){
				$(this).find("#drawer").remove();
				$(this).find('a.tab').removeClass('dim selected');
				$(this).removeClass('open').show();

			});

	}



	//	initiate vocabulary
	function init_vocab()
	{
		//	find all drawer vocab list links
		$('#drawers ul.vocab.legend a').click(
			function(e)
			{
				e.preventDefault();
				
				$('#drawers ul.vocab.legend li').removeClass('selected');
				$(this).parents('li:first').addClass('selected');
				
				//	setup an ajax request url for appropriate drawer
				var url = '/tools/drawers/vocab/'+$(this).attr('name')+'/';
				
				//	request the drawer
				$("#drawers div.content").load(url);
				
				/*
				$.ajax({
					url		: url,
					success	: function(html){
						//	replace the #drawer div with new content
						$("#drawers div.content").replaceWith(html);
					}
				});
				*/
			});	
	}

	
	
	//	initiate map
	var map, map_loaded;
	function map_is_loaded(){
		map_loaded = true;
		if(map) map.loaded();
		//	show the legend
		$('ul.legend').show();
		}
		
	function init_map()
	{
		map_loaded = false;
		
		//	if map hasn't been initialized yet (ie, cookie not present.. cause we need to present plugin details before showing content, as per CCO tech requirements)
		$('a.show_map').click(function(e){
			e.preventDefault();
			
			//	replace current drawer with loading drawer
			$("#drawer").replaceWith('<div id="drawer" class="loading"><img src="/images/icons/upload.gif" /></div>');
					
			//	setup an ajax request url for appropriate drawer content and request it
			var url = '/tools/drawers/map/show/';

			$.ajax({
				url		: url,
				success	: function(html){
					//	replace the #drawer div with new content
					$("#drawer").html(html).removeClass('loading');
					//	initialize map
					init_map();
				}
			});
		});

		
		//	check if map swf is present
		if($('#swf_map').length > 0)
		{
			//	build a map object with appropriate methods
			map = {
				swf:			$('#swf_map').get(0),
				is_loaded:		map_loaded ? true : false,
				loaded:			function(){ if(this.swf){ this.is_loaded = true; } },
				showLayer:		function(layer){ if(this.is_loaded) this.swf.showLayer(layer); },
				showLocation:	function(location,posX,posY){ if(this.is_loaded) this.swf.showLocation(location,posX,posY); },
				showTown:		function(town,posX,posY){ if(this.is_loaded) this.swf.showTown(town,posX,posY); }
			};
			
			
			//	define functionality for legend links
			$('#map_layers a').click(function(e){
				e.preventDefault();
				var layer = $(this).attr('name');
				map.showLayer(layer);
			});
			
			$('#map_locations a').click(function(e){
				e.preventDefault();
				var location = $(this).text();
				var coord = $(this).attr('name').split('_');
				map.showLocation(location, coord[0], coord[1]);
			});
			
			$('#map_towns a').click(function(e){
				e.preventDefault();
				var town = $(this).text();
				var coord = $(this).attr('name').split('_');
				map.showTown(town, coord[0], coord[1]);
			});
			
		}
	}









	function open_tool_panel(top, left, is_reverse, width)
	{
		//	make sure any presious panels are closed
		close_tool_panel();
		
		//	default width
		if( ! width ) width = 267;
		
		//	pad positioning to orient to top right corner, centered on icon
		left	-= width - 37;
		top		-= 13;

		//	make the panel div
		var $panel = $(document.createElement('div'))
				.css({
					'position':		'absolute',
					'top':			top,
					'left':			left,
					'width':		width+'px'
				})
				.attr('id','tool_panel');
		
		if(is_reverse) $panel.addClass('tool_panel_reverse');
		
		//	put the div in the body
		$('body').append($panel);


		//	panel close handling
		$(document).bind('mousedown', function(e){
			var $target = $(e.target);
			var within = $target.attr('id')=='tool_panel';
			var within = (within || $target.parents('div#tool_panel').length) > 0 ? true : false;
			if( ! within  && $target.parents('body').length > 0) close_tool_panel();
		});

		
		//	return the panel reference
		return $panel;
		
	}

	
	
	
	function close_tool_panel()
	{
		//	cancel close handling
		$(document).unbind('mousedown');

		//	clase the panel
		$panel = $('#tool_panel');
		if($panel.length > 0) $panel.remove();
	}






	//	initiate any vocab icon tools
	function init_vocab_icons()
	{
		$('a.vocab_icon').click(
			function(e)
			{
				e.preventDefault();
				
				//	get some variables
				var $a		= $(this);
				
				var id		= $a.attr('name').substr(6);
				
				var width = 267;
				
				//Coordonnate of the mouse click
				var xClick = e.pageX;
				
				var is_reverse = (xClick < width);
				
				var offset	= $a.offset();
				var top		= offset.top;
				var left	= offset.left+$a.innerWidth();
				
				if(is_reverse) left	+= 180;
				
																
				//	get an openned panel
				$panel = open_tool_panel(top, left, is_reverse, width);
				
				//	load the content
				$panel.load('/tools/panel_vocab/'+id+'/');
						
			});
	}

	
	
	
	function init_slideshow()
	{
		$('#slideshow p.prev_next a').click( function(e)
			{
				e.preventDefault();
				
				//	setup next/prev picture ajax request url
				var url = $(this).attr('href');
				
				//	for ie sake, watch for furl url presense of http://domain... strip it off
				if(url.substr(0,7) == 'http://')
				{
					url = url.substr(7).split('/');
					url.shift();
					url = '/'+url.join('/');
				}
				
				url = '/site/menu_slideshow'+url;
				
				
				//	request the picture
				$.ajax({
					url		: url,
					success	: function(html){
						//	replace the #slideshow div with new content
						$("#slideshow").replaceWith(html);
						//	re-initialize the pictures
						init_slideshow();
					}
				});
				
				
			});
	}




	//	initiate tab drop down menus, but only if "intro" tab is not selected
	
	//	first, initiage some global variabes...
	var current_tab = false;
	var default_selected_tab_class = '';
	var Menu_stories;			
	var Menu_pictures;			
	var Menu_plunge;			

	function init_tab_menus()
	{
		if( ! $('ul.menu_tab li.intro').hasClass('selected') )
		{
			//	initiate a current tab setting, and define the tab selected by default
			var $tab = $('ul.menu_tab li.selected');
			if($tab.length)
			{
				$tab.attr('id', 'default_selected_tab');
				default_selected_tab_class = $tab.attr('class');
			}
			
			//	initiate menus
			Menu_stories	= new TabMenu({'name': 'stories', 'ajax': '/site/menu_stories/'});			
			Menu_pictures	= new TabMenu({'name': 'pictures', 'ajax': '/site/menu_slideshow/', 'onload': function(){ init_slideshow(); } });			
			Menu_plunge		= new TabMenu({'name': 'plunge', 'ajax': '/site/menu_plunge/'});			
		}	
	}	

	function test(){
		alert($('#slideshow p.prev_next a').length);
	}


	//	Menu Tab Class
	
	function TabMenu(settings){
		
		
		//	show menu (roll over)
		this.show_menu = function()
		{

			if( ! this.$menu.is(':visible') )
			{
				//	if there's currently an open menu, shut it down
				if(current_tab) eval('Menu_'+current_tab).cancel_menu();
				
				//	select this tab
				this.select_tab();
				
				//	slide open the menu
				this.$menu.show('slide', { direction: 'up' }, 250, function(){
					
					//	set the menu close handling
					//	do this on the show callback to avoid errors in mouseout during show animation
					$(document).bind('mousemove.'+thisMenu.name, function(e)
					{
						//	test mouse positioning in relation to menu + tab divs
						var x = e.pageX;
						var y = e.pageY;
						
						var mx = thisMenu.$menu.offset().left;
						var my = thisMenu.$menu.offset().top;
						
						var tx = thisMenu.$tab.offset().left;
						var ty = thisMenu.$tab.offset().top;
						
						var within_m = (			  x < mx || x > (mx+thisMenu.$menu.width()))	? false : true;
						var within_m = ( !within_m || y < my || y > (my+thisMenu.$menu.height()))	? false : true;
						var within_t = (			  x < tx || x > (tx+thisMenu.$tab.width()))		? false : true;
						var within_t = ( !within_t || y < ty || y > (ty+thisMenu.$tab.height()+5))	? false : true; 
						
						//	if mouse is outside, close the menu
						if( ! within_m && ! within_t )
						{
							$(document).unbind('mousemove.'+thisMenu.name);	//	cancel close handling
							thisMenu.hide_menu();							//	hide the menu
						}
					});
				});
			}
		}
		
		
		//	hide menu (roll out)
		this.hide_menu = function()
		{
			if( this.$menu.is(':visible') )
			{
				//	slide the menu shut, deselect tabs at end of animation
				this.$menu.hide('slide', { direction: 'up' }, 200, function(){ thisMenu.deselect_tab(); });
			}
		}
		
		this.cancel_menu = function()
		{
			$(document).unbind('mousemove.'+this.name);	//	cancel close handling
			this.$menu.hide();
		}
		
		
		//	select this tab
		this.select_tab = function()
		{
			current_tab = this.name;							//	track this as selected tab
			$('ul.menu_tab li').removeClass('selected fill');	//	deselect all tabs
			this.$tab.addClass('selected fill');				//	select this menu's tab
		}
		
		//	deselect this tab
		this.deselect_tab = function()
		{
			//	another menu may have already been initiated as this one is closing
			//	..if so, we'll leave all tab selection duties to that opening menu, otherwise continue..
			if( current_tab == this.name )
			{
				//	currently tab is now null
				current_tab = false;
				//	run through all tabs...
				$('ul.menu_tab li').each( function()
					{
						//	if this tab was previously identified as default selected, reset it's selection status
						if($(this).attr('id') == 'default_selected_tab') $(this).attr('class', default_selected_tab_class);
						
						//	otherwise, deselect it
						else $(this).removeClass('selected fill');
					});
			}
		}
		

		//	initialize, as long as we've been given a name
		if( settings.name )
		{
			//	set thisMenu variable to use as a menu object reference from within event handling functions, where "this" refers to event
			var thisMenu = this;
			
			//	settings
			this.name			= settings.name;
			this.id				= 'menu_'+this.name;
			this.ajax			= settings.ajax;
			this.timerID		= null;
			
			if(settings.onload)
				this.onload		=  settings.onload;
			
			this.$tab			= $('ul.menu_tab li.'+this.name);
			this.$tab_link		= $('ul.menu_tab li.'+this.name+' a');
			
			//	if the story tab is present, and it's not class 'fill', make the menu element
			if( this.$tab_link.length && ! this.$tab.hasClass('fill') )
			{
				
				this.$menu = $(document.createElement('div'))
					.css({
						'position':		'absolute',
						'width':		'700px',
						'z-index':		'500',
						'display':		'none'
					})
					.attr('id',this.id);	
			
				//	shove the menu into the content area, just after the sublink tabs
				$('ul.menu_tab + div.clear').after(this.$menu);
				
				//	setup an ajax url to fetch menu data
				var href = this.$tab_link.attr('href');
				
			//	if(settings.name == 'stories')
			//		alert(href);
				
				//	for ie sake, watch for furl url presense of http://domain... strip it off
				if(href.substr(0,7) == 'http://')
				{
					href = href.substr(7).split('/');
					href.shift();
				} else href = href.split('/');
				
				this.ajax += href[1]+'/'+href[2];


				//	tab hover handling
				this.$tab_link
					.mouseover( function(e)
					{
						//	if we're currently viewing a tab, scroll over the next one immediately
						if(current_tab)
							thisMenu.show_menu();
						//	otherwise, delay the opening to require a "mouse pause" over the tab to initiate the menu opening
						else
							thisMenu.timerID = setTimeout("Menu_"+thisMenu.name+".show_menu()", 500);
					})
					.mouseout( function(e)
					{
						//	cancel the menu opening if our mouse has just "passed through"
						clearTimeout(thisMenu.timerID);
					});
				
				//	load the menu, and run onload if any
				this.$menu.load(this.ajax, function(){ if(thisMenu.onload) thisMenu.onload(); } );
			//	this.$menu.html('<h1>Test: '+this.ajax+'</h1>');
			
			}
		}
	}