/**
 * Namespace our methods in the FUWT variable
 */
var FUWT = {

	// vars!!!
	prev_button_url: "files/images/nav/arrow-button-back.png",
	next_button_url: "files/images/nav/arrow-button-fwd.png",
	prev_button_faded_url: "files/images/nav/arrow-button-back-fade.png",
	next_button_faded_url: "files/images/nav/arrow-button-fwd-fade.png",

	setupHomepage: function()
	{
		FUWT.setCalloutHeights();	

		// attach event to tab headers
		var tabHeads = $$('a.tabHead');

		for (var i = 0; i < tabHeads.length; i++)
		{
			var tabHead = tabHeads[i];
			tabHead.observe('click', FUWT.changeTab.bind(tabHead));
		}

		// attach events to next/prev buttons
		var nextButtons = $$('a.next');
		for (var i = 0; i < nextButtons.length; i++)
		{
			var button = nextButtons[i];
			button.observe('click', FUWT.next.bind(button));
		}

		var prevButtons = $$('a.prev');
		for (var i = 0; i < prevButtons.length; i++)
		{
			var button = prevButtons[i];
			button.observe('click', FUWT.prev.bind(button));
		}
	},

	setCalloutHeights: function ()
	{
		var leftCallout = $('left-callout');
		var middleCallout = $('middle-callout');
		var rightCallout = $('right-callout');

		if (leftCallout == null || middleCallout == null || rightCallout == null)
		{
			// we don't have all callouts, can't resize
			return false;
		}
	
		// calculate max height
		var maxHeight = leftCallout.getHeight() > middleCallout.getHeight() ? leftCallout.getHeight() : middleCallout.getHeight();
		maxHeight = maxHeight > rightCallout.getHeight() ? maxHeight : rightCallout.getHeight();
	
		leftCallout.setStyle({
			height: maxHeight+"px"
		});
	
		middleCallout.setStyle({
			height: maxHeight+"px"
		});
	
		rightCallout.setStyle({
			height: maxHeight+"px"
		});
	},

	/**
	 * Make sure to bind the a.tabHead element to this using Function.bind()
	 */
	changeTab: function ()
	{	
		// get the element that contains all tab links
		var thisAncestors = this.ancestors();
		for (var i = 0; i < thisAncestors.length; i++)
		{
			var ancestor = thisAncestors[i];
			if (ancestor.tagName == 'UL')
			{
				var tabsList = ancestor;
				break;
			}
		}

		// set the active class on all tabs
		var tabAnchors = tabsList.select("a.tabHead");
		for (var i = 0; i < tabAnchors.length; i++)
		{
			var anchor = tabAnchors[i];
			if (anchor != this)
			{
				anchor.removeClassName('active');
			}
			else
			{
				anchor.addClassName('active');
				// this is sort of a hack - the tabs are not tied to the content
				// so instead we keep the active tab count and match it to content
				// i don't like this, but requires rewriting some markup to fix
				var activeTabNum = i;
			}
		}

		// change tab content
		var tabsContents = $('tabs').select('div.tab');

		for (var i = 0; i < tabsContents.length; i++)
		{
			var tabContent = tabsContents[i];
			if (i == activeTabNum)
			{
				tabContent.addClassName('active');
			}
			else
			{
				tabContent.removeClassName('active');
			}
		}
	},

	switchPage: function (button, increment)
	{
		// get the "pages" associated with next button

		var buttonAncestors = button.ancestors();
		var tab = null;

		for (var i = 0; i < buttonAncestors.length; i++)
		{
			var ancestor = buttonAncestors[i];
			if (ancestor.tagName == "DIV" && ancestor.hasClassName('tab'))
			{
				tab = ancestor;
				break;
			}
		}

		var pages = tab.select('.page');

		// unset active page
		var activeIndex = null;
		for (var i = 0; i < pages.length; i++)
		{
			var page = pages[i];

			if (page.hasClassName('active'))
			{
				page.removeClassName('active');
				activeIndex = i;
				break;
			}
		}

		// set active page
		if (activeIndex != null)
		{
			activeIndex += increment;
			if (activeIndex >= pages.length)
			{
				activeIndex = pages.length - 1;
			}
			else if (activeIndex < 0)
			{
				activeIndex = 0;
			}

			pages[activeIndex].addClassName('active');

			// set the buttons to faded/inactive if needed
			if (activeIndex == 0)
			{
				// deactivate the prev button
				var prevButtons = tab.select('a.prev');
				for (var i = 0; i < prevButtons.length; i++)
				{
					FUWT.setImgSrc(prevButtons[i].select('img'), FUWT.prev_button_faded_url);
				}
			}
			else if (activeIndex == parseInt(pages.length - 1))
			{
				// deactivate the next button
				var nextButtons = tab.select('a.next');
				for (var i = 0; i < nextButtons.length; i++)
				{
					FUWT.setImgSrc(nextButtons[i].select('img'), FUWT.next_button_faded_url);
				}
			}
			else
			{
				// activate the next button
				var nextButtons = tab.select('a.next');
				for (var i = 0; i < nextButtons.length; i++)
				{
					FUWT.setImgSrc(nextButtons[i].select('img'), FUWT.next_button_url);
				}
				// activate the prev button
				var prevButtons = tab.select('a.prev');
				for (var i = 0; i < prevButtons.length; i++)
				{
					FUWT.setImgSrc(prevButtons[i].select('img'), FUWT.prev_button_url);
				}
			}

		}
		else
		{
			alert ("Unable to find next article");
		}
	},

	setImgSrc: function(imgArray, src)
	{
		for (var i = 0; i < imgArray.length; i++)
		{
			imgArray[i].src = src;
		}
	},

	next: function() 
	{
		FUWT.switchPage(this, 1);
	},

	prev: function()
	{
		FUWT.switchPage(this, -1);
	}

}

Event.observe(window, 'load', FUWT.setupHomepage);