/***************************/
//@Author: Billy
/***************************/

/*
	Create a tabbed set of pages from a set of specified elements.

	<script type="text/javascript">
		$().ready (function () {
			$("#tabContainer").tabify ({
				tabMap: "news->newsTab;tutorials->learningTab;links->otherPlaces"
			});
		});
	</script>
	
	@param tabType The child tags to be the clickable tabs. The default is "li".
	
	$("#menu").tabify ({
		tabType: "div"
	});
	
	would treat all child divs of the element with the id "menu" as the clickable tabs.
	
	@param tabMap  Which tabs map to which elements to show/hide. 
	By default if a tab of id "links" is clicked, elements of the *class* "links" would be shown.
	
	The format of this map is tab_id->element_id;..... 
	e.g.
	
	$("#menu").tabify ({
		tabMap: "news->newsTab;tutorials->learningTab;links->otherPlaces"
	});	
*/
	jQuery.fn.fadeIn = function (speed, callback) { 
		return this.animate ({opacity: 'show'}, speed, function () { 
			if (jQuery.browser.msie) {
				this.style.removeAttribute ('filter');  
			}
			if (jQuery.isFunction (callback)) {
				callback ();  
			}
		}); 
	}; 

	jQuery.fn.fadeOut = function (speed, callback)
	{
		return this.animate({opacity: 'hide'}, speed, function()
			{
				if (jQuery.browser.msie)
				{
					this.style.removeAttribute ('filter');
			}
				if (jQuery.isFunction (callback))
				{
					callback ();
			}
			});
	}; 

	jQuery.fn.fadeTo = function (speed,to,callback)
	{ 
		return this.animate({opacity: to}, speed, function()
			{ 
				if (to == 1 && jQuery.browser.msie)
				{
				this.style.removeAttribute ('filter');  
			}
				if (jQuery.isFunction (callback))
				{
					callback ();
				}
		}); 
		};
		
		// create closure
		(function($) {

/*
	When fading a html node with the .fadeIn() and .fadeOut() functions in jQuery, 
	IE drops the windows Cleartype rendering; which results in very ugly text. 
	This problem appears to be very common, but no one has a nice solution for the problem.

	The most common way to solve this problem is by removing the filter CSS attribute. 
	Code taken from http://malsup.com/jquery/fadetest.html.
*/

	$.fn.extend ({ 
 		tabify: function (options) {

			// by default, tabify the chid <li> elements 
			var defaults =
			{ 
				tabType: "li",
				tabMap: "",
				activeClass: "active",
				inactiveClass: "inactive",
				initialContent: null
			}; 
 		
 			var options = $.extend (defaults, options);
 			
 			// the selector for the currently shown element
 			var g_currentEl = null;

 			// the index of the current active tab
 			var g_currentIndex = 0;
 			
    		return this.each (function () {
    			var tabType = options.tabType; 
    			var tabMap = options.tabMap; 
    			var activeClass = options.activeClass; 
    			var inactiveClass = options.inactiveClass; 
    			var initialContent = options.initialContent; 
   				var sel = "#" + this.id + " > " + tabType;
				var tabs = $("#" + this.id + " > " + tabType);
   				var tabPagePairs = tabMap.split (";");
   				
//  				need to check the tabPagePairs stuff is right
   				
   				if (tabPagePairs == "")
   				{
   					tabPagePairs = null;
   				}
   				
				/* var myFile = document.location.toString ();
				if (myFile.match ('#'))
				{
					// the URL contains an anchor
				  // click the navigation item corresponding to the anchor
					initialContent = myFile.split('#')[1] + "Tab";
				} */
				
				 if (document.location.hash)
				{
				  initialContent = document.location.hash + "Tab";
				  initialContent = initialContent.replace("#", "");
				}

				if (initialContent != null)
				{
					var newIndex = -1;
					g_currentEl = $("#" + initialContent);

				
					if ((tabs != null) && (tabs.length > 0))
					{
						for (var i = 0; i < tabs.length; i++)
						{
							// load the tab
							$(tabs [i].id).children().each(function(index, item)
							{
								var subTabs = $("#" + this.id + " > " + tabType);
							});							

							if (initialContent == tabs [i].id)
							{
								newIndex = i;
								//i = -1;	// force exit from loop
							}
							// else if it is the course tab and we have a year selected
							else if( initialContent.indexOf("year") === 0 && tabs[i].id == "profileTab" )
							{
							    newIndex = i;
							    isYearProfileCase = true;
							}
							
							if (newIndex != -1)
							{
								switchPages (tabs, tabPagePairs, g_currentIndex, newIndex, activeClass, inactiveClass);

								if( !(tabs[i].id.indexOf("year") === 0) )
								{
											g_currentEl = switchPages;
											g_currentIndex = newIndex;
								}
							}
						}
					}
				}
   				else
   				{
   					// by default, select the first page and tab
   					switchPages (tabs, tabPagePairs, -1, 0, activeClass, inactiveClass);
   				}

				$(sel).click (function (e) {

					var newIndex = -1;
					if ((tabs != null) && (tabs.length > 0))
					{
						for (var i = tabs.length - 1; i >= 0; -- i)
						{
							if (e.target == tabs [i])
							{
								newIndex = i;
								i = -1;	// force exit from loop					
							}
						}	

						if ((newIndex != -1) && (newIndex != g_currentIndex)) {		
							
							//var hscroll = (document.all ? document.scrollLeft : window.pageXOffset);
							//var vscroll = (document.all ? document.scrollTop : window.pageYOffset);
							
							g_currentEl = switchPages (tabs, tabPagePairs, g_currentIndex, newIndex, activeClass, inactiveClass);
							location.hash = g_currentEl.replace('Page','');
							g_currentIndex = newIndex;
						}
					}
				});
    		});
    	}
	});



	function switchPages (tabs, tabPagePairs, oldIndex, newIndex, activeClass, inactiveClass)
	{
		if(oldIndex == newIndex)
		{
			return;
		}
		// display the newly selected element, 
		// hide the old one
		var pageToShow = "";
		var pageToHide = null;
		
		if (tabPagePairs != null)
		{		
			for (var i = tabPagePairs.length - 1; i >= 0; -- i) {
				var tabPagePair = tabPagePairs [i].split ("->");

				if (tabPagePair.length >= 2) {									
					if (tabPagePair [0] == tabs [newIndex].id) {
						pageToShow = "#" + tabPagePair [1];
						
						if ((oldIndex != -1) && (pageToHide != null)) {
							i = -1;	// force exit from loop
						}
					} else if ((oldIndex != -1) && (tabPagePair [0] == tabs [oldIndex].id)) {
						pageToHide = "#" + tabPagePair [1];
						
						if (pageToShow != "") {
							i = -1;	// force exit from loop
						}
					}
				}
			}

		} else {
			// get the elements that have classes 
			// that match the <li> ids.

			// if the id of the childItem ends in "Tab"
			// then replace it with "Page" and use that element		
			pageToShow = tabToPage (tabs [newIndex]);

			// otherwise  match by class.
			if (pageToShow == null) {
				pageToShow = "." + tabs [newIndex].id;
			}
		}

		selectTab (tabs [oldIndex], tabs [newIndex], activeClass, inactiveClass);

		// Use our custom fade-in function
		// to work around the ie css bug
		// http://malsup.com/jquery/fadetest.html
		if (pageToShow != null) {
			$(pageToShow).fadeIn ("def");
		}
		
		if (pageToHide == null)
		{
			if (oldIndex != -1)
			{
				if (tabPagePairs != null)
				{
					pageToHide = tabPagePairs [oldIndex] [1];
				}
				if (pageToHide == null)
				{	
					pageToHide = tabToPage (tabs [oldIndex]);
				}
				// otherwise  match by class.
				if (pageToHide == null)
				{
					pageToHide = "." + tabs [oldIndex].id;
				}
			}
		}

		if (pageToHide != null)
		{
			$(pageToHide).css ("display", "none");
		}
		
		return pageToShow;
	}
	
	// get the id for the "page" to display based on the tab id.
	function getTabPageID(tabID,tabPagePairs)
	{
		if (tabPagePairs != null)
		{
			for (var i = tabPagePairs.length - 1; i >= 0; -- i)
			{
				var tabPagePair = tabPagePairs [i].split ("->");
				if (tabPagePair.length >= 2 && tabPagePair[0] == tabs[tabID].id)
				{
					return tabPagePair [1];
				}
			}
		}
		return "";
	}

// end of closure
})(jQuery);


function tabToPage (elem) {
	var elemId = elem.id;

	if (elemId != null) {
		var tabIndex = elemId.indexOf ("Tab");

		if (tabIndex != -1) {
			return "#" + elemId.substring (0, tabIndex) + "Page"; 
		}
	}

	return null;
}


function selectTab (tabToMakeInactive, tabToMakeActive, activeClass, inactiveClass) {
	if (tabToMakeInactive != null) {
		$(tabToMakeInactive).removeClass (activeClass);
		$(tabToMakeInactive).addClass (inactiveClass);
	}

	if (tabToMakeActive != null) {
		$(tabToMakeActive).removeClass (inactiveClass);
		$(tabToMakeActive).addClass (activeClass);
	}
}