/* useful master class for easy tabbed content.
 *
 * expects DOM in the format:
 *
 * <div class="TabbedContent">
 *   <ul class="TabLinks">
 *     <li><a>tab1</a></li>
 *     <li><a>tab2</a></li>
 *   </ul>
 *   <ul class="TabContent">
 *     <li>content1</li>
 *     <li>content2</li>
 *   </ul>
 * </div>
 *
 * To add more specific stuff (like instantiating child units), just subclass it
 * and add your own selector. e.g.,
 *
 * BLIP.Class.create("BLIP.Unit.TabbedContent.MyCustomTabbedContent", BLIP.Unit.TabbedContent,
 *   function(config) {
 *     BLIP.Unit.TabbedContent.call(this, config);
 *   },
 *   {
 *     selector : "#MyCustomContent" + BLIP.Unit.TabbedContent.prototype.selector,
 *     init : function() {
 *       // my init stuff here
 *       this.superClass.init();
 *     }
 *  }
 * );
 *
 */
BLIP.Class.create("BLIP.Unit.TabbedContent", BLIP.Unit,
	function(config) {
		BLIP.Unit.call(this, config);
	},
	{
		selector : ".TabbedContent",

		init : function() {

			this.domRoot.find(".TabLinks > li:first-child, .TabContent > li:first-child")
				.addClass("Current");
			this.initEvents();
		},

		initEvents : function() {
			var thisContext = this;

			this.domRoot.find(".TabLinks > li  a").each(function(n, el) {
				$(el).click(function() {
					thisContext.onTabClick(n);
				});
			});
		},

		onTabClick : function(tabIndex) {
			this.setCurrentTab(tabIndex);
		},

		setCurrentTab : function(tab) {
			var iTab = tab+1;

			this.domRoot
				.find(".TabLinks > li, .TabContent > li")
				.removeClass("Current");
			this.domRoot
				.find([
					".TabLinks > li:nth-child(",
					"), .TabContent > li:nth-child(",
					")"].join(iTab))
				.addClass("Current");
		}
	}
);