/*****************************************************************\
  Magic TABS widget - automatically turns any UL items
  with "@tabbed" among their class names into a tab block
  
  REQUIRES PROTOTYPE
\*****************************************************************/

var AutoTab = Class.create();

Object.extend( AutoTab, {
	// Static methods/properties

	widgets: $A([]),

	_defaults: $H({ cssclass:'tabblock', tabstripcssclass:'tabstrip' }),
	
	setAppearance: function( optionshash ) {
		AutoTab._defaults = AutoTab._defaults.merge( $H(optionshash) );
	},
	
	_replaceAllTargets: function () {
		$A(document.body.getElementsByTagName("ul")).findAll( function(e) { return Element.classNames(e).include("@tabbed"); } ).each( function( e ) {
			AutoTab.widgets[AutoTab.widgets.length] = new AutoTab( e, AutoTab.widgets.length, AutoTab._defaults );
		} ); 
	}
});


AutoTab.prototype = {
	// Instance methods/properties

	mainul: null,
	tabsul: null,
	div: null,
	panels: null,

	initialize: function( replacedelement, widgetindex, optionshash ) {
		this.mainul = $(replacedelement);
		this.div = $( document.createElement("div") );
		this.div.className = optionshash.cssclass;
		this.tabsul = $( document.createElement("ul") );
		this.tabsul.className = optionshash.tabstripcssclass;
		this.mainul.parentNode.insertBefore( this.div, this.mainul );
		
		this.div.appendChild( this.tabsul );
		this.mainul.remove();
		this.div.appendChild( this.mainul );
		this.mainul.removeClassName("@tabbed");
		this.mainul.addClassName("tabpanels");
		this.div.style.clear="both";
		
		this.mainul.style.padding="0";
		this.mainul.style.listStyle="none";
		this.mainul.style.margin="0";

		this.tabsul.style.padding="0";
		this.tabsul.style.margin="0";
		this.tabsul.style.listStyle="none";
		this.tabsul.style.display="block";

		this.panels = new Array();

		var currtitle;
		var currtab, currpanel, currentry;
		var extranode;
		var tabindex = 0;
		for( var i=0; i<this.mainul.childNodes.length; i++ ) {
			currpanel = $(this.mainul.childNodes[i]);
			if (currpanel.nodeName.toUpperCase() != 'LI') {
				try { currpanel.remove(); } catch(e) {};
				continue;
			}
			currtitle = currpanel.title || ("Tab " + (tabindex+1));
			currpanel.title = "";
			currpanel.innerHTML = '<span class="top"></span><span class="left"></span><span class="content">' + currpanel.innerHTML + '</span><span class="right"></span><span class="bottom"></span>';

			currtab = $(document.createElement("li"));
			currtab.innerHTML = "<a href=\"javascript:AutoTab.widgets[" + widgetindex + "].select(" + tabindex + ");\"><span>" + currtitle + "</span></a>";
			currtab.className = currpanel.className;
			currtab.style.display = "inline";
			this.tabsul.appendChild( currtab );
			currentry = { tab:currtab, panel:currpanel };
			this.panels[tabindex] = currentry;
			tabindex ++;
		}

		this.select(0);
	},

	select: function( tabindex ) {
		tabindex = parseInt(tabindex);
		if ( isNaN(tabindex) ) { return; };
		if ( (tabindex < 0) || (tabindex >= this.panels.length)) { return; };
		
		for( var i=0; i< this.panels.length; i++ ) {
			this.panels[i].panel.style.display = "none";
			this.panels[i].tab.removeClassName("selected");
		}
		
		var selectedpanel = this.panels[tabindex].panel;
		selectedpanel.style.display = "";
		this.panels[tabindex].tab.addClassName("selected");
		var ajaxsource = selectedpanel.firstTagWithClass( "A", "@ajax" );
		if ( ajaxsource ) {
    		var targetdiv = $(ajaxsource.target) || selectedpanel;
			new Ajax.Updater( targetdiv, ajaxsource.href, { method: 'get', stripoutertags: true });
		}


	}

};	


// Static initialization
// Fire the changes as soon as the DOM is loaded.
Event.observeDOMReady( function() { AutoTab._replaceAllTargets() } );