/*	
	ExtendedTabs 0.9
		jQuery plugin for a simple and powerful tab API.
		
	Created by Chris Burke
	Based on code by Klaus Hartl at http://stilbuero.de/tabs/
	
	Example:
		$('#tab-container').tabs(); //Enable tabbed system
		$('#tab-container').tabActivate(2); //Activate the 2nd tab (This could have been done above also)
		$('#tab-container').tabDisable(2) //Makes the 2nd tab not selectable
	
	Comments:
		Most operations set CSS classes, these are defined below. You can use this, for example,
		to hide a tab when you tabDisable() it.
		
*/
(function(){
	// basic stuff
	var ON_CLASS = 'tab-sel-on';				//Style set on the LI tag of the current tab
	var DISABLED_CLASS = 'tab-sel-disabled';	//Style set on the LI tag of disabled tabs
	var OFF_CLASS = 'tab-hidden';				//Style set on the DIV tag of a hidden tab

	if (!console) {
		var console = { };
	}
	if (!console.warn) {
		console.log = function(){ };
	}

	/* public $.fn.tabs(options)
			Initializes the tabs.
			
			Options may be an array with the following paramaters:
				on: (int) - 1 based tab index (optional)
				autoheight: (bool) - Automaticly set the heights of each tab to be the same. (Does not yet work)

			Example:
				$('#tab-container').tabs(); //Create a tabbed interface
	*/
	$.fn.tabs = function(options) {
		// options
		var on = options && options.on && (typeof options.on == 'number' && options.on > 0) ? options.on - 1 : 0;
		var autoheight = options && (options.autoheight) ? true : false; //This doesnt work yet
		var high = 0;
		$(this).each(function() {
			if ($(this).css('height') > high) {
				high = $(this).css('height');
			}
		});
		if (autoheight) {
			console.log("Tab calc height: %i", high);
			$(this).attr({'height': high});
		}
		return this.each(function() {
			// retrieve active tab from hash in url
			var re = /([_\-\w]+$)/i;
			if (location.hash) {
				var hashId = location.hash.replace('#', '');
				console.log("Initial tab id: %s", hashId);
				$(this).find('>ul>li>a').each(function(i) {
					if (re.exec(this.href)[1] == hashId) {
						on = i;
						var unFocus = function() { // required to not scroll to fragment
							scrollTo(0, 0);
							console.log("Ran unFocus()");
						}
						// be nice to IE via Conditional Compilation
						// this needs to preceed call to unFocus for other browsers
						/*@cc_on
						//location.replace('#'); // required to not scroll to fragment
						setTimeout(unFocus, 150); // IE needs a little timeout here
						@*/
						unFocus();
						setTimeout(unFocus, 100); // be nice to Opera
					}
				});
			}
			$(this).find('>div').not(':eq(' + on + ')').addClass(OFF_CLASS); //init, turn off contents
			$(this).find('>ul>li:nth(' + on + ')').addClass(ON_CLASS); //init, turn on list item
			$(this).find('>ul>li>a').tabsClickBind(this);
		});
	};

	/* private $.fn.tabsClickBind(container)
			Binds the click event to the collection of A tags
			
			Paramaters:
				container: DOM element refering to the containing DIV

			Notes:
				This funciton is for internal use only.
	*/
	$.fn.tabsClickBind = function(container) {
		return this.click(function(evt) {
			if (!$(this.parentNode).is('.' + ON_CLASS)) {
				console.log('Tab changing; this: %o; evt: %o', this, evt);
				var re = /([_\-\w]+$)/i;
				var target = $('#' + re.exec(this.href)[1]);
				if (target.size() > 0) {
					$(container).find('>div:visible').addClass(OFF_CLASS); //turn off the visible one
					target.removeClass(OFF_CLASS); //turn on the selected one
					$(container).find('>ul>li').removeClass(ON_CLASS); //turn off the old one thats on
					$(this.parentNode).addClass(ON_CLASS);
				} else {
					alert('There is no such container.');
				}
			}
			return false;
		});
	}
	
	/* public $.fn.tabActivate(num)
			Activates the specific tab.
			
			Paramaters:
				num: 1 based integer refering to the tab to activate

			Example:
				$('#tab-container').tabActivate(2); //Activate the 2nd tab
	*/
	$.fn.tabActivate = function(num) {
		return this.each(function(){
			$(">ul>li:nth("+((num)-1)+")>a", $(this)).trigger('click');
		});
	};
	
	/* public $.fn.tabGetActive()
			Returns a jQuery-wrapped DOM element which is the active DIV tab

			Example:
				$('#tab-container').tabGetActive().css('background':'blue'); //Sets the backcolor of a tab to blue
	*/
	$.fn.tabGetActive = function() {
		/* Returns the visible tab $(DIV) element */
		return $(this).find('>div:visible');
	}
	
	/* public $.fn.tabDisable(num)
			Disables a tab (removes the click event handler from the A tag)

			Example:
				$('#tab-container').tabDisable(2) //Makes the 2nd tab not selectable
				
			Note:
				Removes all click handlers associated with the A tag, not just the tab handler.
	*/
	$.fn.tabDisable = function(num) {
		return this.each(function(){
			$(">ul>li:nth("+((num)-1)+")>a", $(this)).unclick().find('..').addClass(DISABLED_CLASS);
		});
	};
	
	/* public $.fn.tabEnable(num)
			Enables a tab (adds the click event handler for the A tag)

			Example:
				$('#tab-container').tabEnable(2) //Makes the 2nd tab selectable
			
			Note:
				Does not check if the handler already exists.
	*/
	$.fn.tabEnable = function(num) {
		return this.each(function(){
			$(">ul>li:nth("+((num)-1)+")>a", $(this)).tabsClickBind(this).find('..').removeClass(DISABLED_CLASS);
		});
	};
})();


/*
This is an example tabs.css:

.tab-hidden {
	display: none;
}
.tabbed-container ul li {
	background-color: #5A5A5A;
}
.tabbed-container div {
	background-color: #808080;
}
.tabbed-container ul {
	margin: 4px;
	margin-top: 10px;
	margin-bottom: 0;
	padding: 0;
}

.tabbed-container ul li {
	display: inline;
	margin: 0;
	padding: 0;
	padding-left: 2px;
	padding-right: 2px;
	border: 1px solid black;
}
.tabbed-container ul li.tab-sel-on {
	background-color: #808080;
	border-bottom: 1px solid #808080;
}
.tabbed-container ul li.tab-sel-disabled {
	display: none;
}
.tabbed-container ul li a {
	outline: 0;
}
.tabbed-container div {
	padding: 0;
	margin: 4px;
	margin-top: 0;
	border: 1px solid black;
}

*/