$(document).ready(function(){
	// JS code to initiate homepage features
	// =====================================
	// To review Javascript turned off CSS styles
	$(".noScript").removeClass("noScript");

	// FC#2: Start FC#2 slideshow
		setInterval( "miniSlideShow( 'homepageCalloutRotator', 0, 0 )", 8000 );

	// Center Column Tabs: Create tab sets (get/set heights first)

		$( "#tabsOne" ).tabs();
		$( "#tabsTwo" ).tabs();

	/* New and Events Accordion: Create accordion feature*/
		$("#accordion").accordion({ autoHeight: false, fillSpace: true, header: 'DIV.intruderHeader', event: "mouseover" });

	// Main Audience Slideshow: Initialize (rotating tabs)
		$( "#way-tabs" ).tabs({ 
			event: 'mouseover',
			select: function( event, ui ) { resetPanel( ui.index ); },
			show: function( event, ui ) { animatePanel( ui.index ); }
		});
		$( "#way-tabs" ).tabs( "rotate", way_duration , false );
		//resetPanel( 0 );
		
	// Main Audience Slideshow: The tabs rotator gets confused when I attach an additional hover event on the entire div, so...
		$( ".way-panel, #way-tabs .ui-tabs-nav a" ).hover(
			function() { $( "#way-tabs" ).tabs( "rotate", null ) }, 
			function() { $( "#way-tabs" ).tabs( "rotate", way_duration , false ) }
		);
	// Main Audience Slideshow: Prev and Next buttons
		$( "#way-tabs-prev" ).click( function(){
			var index = $( "#way-tabs" ).tabs( "option", "selected" ); // zero based
			var panels = $( ".way-panel" ).length - 1; // zero based
			newIndex = index == 0 ? panels : index - 1;
			$( "#way-tabs" ).tabs({ selected: newIndex });
		})
		$( "#way-tabs-next" ).click( function(){
			var index = $( "#way-tabs" ).tabs( "option", "selected" ); // zero based
			var panels = $( ".way-panel" ).length - 1; // zero based
			newIndex = index == panels ? 0 : index + 1;
			$( "#way-tabs" ).tabs({ selected: newIndex });
		})

	// Main Audience Slideshow: Bind onclick event (to go location in "rel" attribute)
		$("#way-tabs li a").each(function(){
			var tabHref = $(this).attr("rel");
			$(this).click(function(){
				document.location.href = tabHref;
			})
		})

});

// Functions Supporting Homepage Features
function miniSlideShow( wrapper, fIn, fOut ) {
	var $active = $('#'+ wrapper +' .intruderContainer.active');
	if ( $active.length == 0 ) $active = $('#'+ wrapper +' .intruderContainer:last');
	var $next =  $active.next().length ? $active.next() : $('#'+ wrapper +' .intruderContainer:first');
	$active.fadeOut(fOut, function(){
		$next.fadeIn(fIn).addClass('active');
	}).removeClass('active');
}
function setTabPanelHeights( tabGroupObj ){
	var maxHeight = 0;
	tabGroupObj.children('div').each(function(index) {
		var myHeight = $(this).outerHeight()
		if( myHeight > maxHeight ) maxHeight = myHeight;
	});
	tabGroupObj.children('div').each(function(index) {
		$(this).css( 'height', maxHeight+'px');
	});
}

// Main Audience Slideshow:  Slideshow Animations
	function resetPanel( index ){
		// Set starting positions (set them all in anticapation of misc tab browsing) 
		$('div.bgImage').css('top', '-60px').css('left', '0px').css('opacity', '1');
		$('div.fgImage').css('bottom', '48px').css('right', '22px');
		$('div.frameHeader').css('left', '-400px');
		$('div.frameCopy').css('left', '-400px');
		// I prefer a simple fade-in on the text, which would look like this
		/*
		$('div.frameHeader').fadeIn();
		$('div.frameCopy').fadeIn();
		*/
	}
	function animatePanel( index ){
		var frame = $("#way-tabs #way-tabs-"+(index+1) );
		frame.find('div.fgImage').animate({bottom: '-52px'}, way_transitionIn);
		frame.find('div.bgImage').animate({top: '0px'}, 
			{
			duration: (way_transitionIn*0.9), 
			queue: false,
			complete: function(){
				// Once the background is in place, whip in the text
				frame.find('div.frameHeader').animate({left: '45px'}, (way_transitionIn*0.35));
				frame.find('div.frameCopy').animate({left: '45px'}, (way_transitionIn*0.20));
			}
		});
	}
	
	var way_transitionOut = 2000;
	function exitAnimation( index ){
		var frame = $("#way-tabs #way-tabs-"+(index+1) );
		frame.find('div.fgImage').animate({right: '-400px'}, 2000);
		frame.find('div.bgImage').animate({left: '-733px', opacity: 0}, 3000);
		frame.find('div.frameHeader').animate({left: '733px'}, 2000);
		frame.find('div.frameCopy').animate({left: '733px'}, 2000);
	}