var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var $ = Dom.get;

//++++++++++++++++++++++++++++++++++++
// YUI TABS
// 9 may 2009 - Michael Gurov
//
//
// REQUIRES: yahoo-dom-event.js, animation-min.js, stylesheet-min.js
//
// to define create DIV that will hold the tabs element
// this DIV should contain 2 divs - tabs holder and body holder
// tabs holder DIV will contain DIV for every tab
// body holder DIV will conatin DIV for every body element

// in script : var tabs = new tabsM('tabsId',{}); 
// available properties:
// selectedIndex - set the index of open tab on creation
// animDuration - time in seconds for switch between body elements
//
// CSS:
// .tabs - main div
// .headerHolder - tabs holder DIV
// .headerButton - every holder tab
// .headerButtonLeft - div in left of holder tab
// .headerButtonRight - div in right of holder tab
// .headerButtonOver - holder tab on mouse over
// .headerButtonOverLeft - left of holder tab on mouse over
// .headerButtonOverRight - right of holder tab on mouse over
// .headerButtonSelected - holder tab selected
// .headerButtonLeftSelected - left of holder tab selected
// .headerButtonRightSelected - right of holder tab selected
// .tabBodyHolder - body holder DIV
// .bodyDiv - every DIV for body

//++++++++++++++++++++++++++++++++++++

tabsM = function(tabsId, properties){
	this.props = {
		selectedIndex :0,
		animDuration:0.15
	}
	if (YAHOO.lang.isUndefined(properties))	{ properties = {};}
	this.getProperties(properties);
	this.init(tabsId);
}

tabsM.prototype = {
	getProperties:function(properties){
		if (!YAHOO.lang.isUndefined(properties.selectedIndex)) { this.props.selectedIndex = properties.selectedIndex}
		if (!YAHOO.lang.isUndefined(properties.animDuration)) { this.props.animDuration = properties.animDuration}
	},
	
	init:function(tabsId){
		this.tabsDiv = $(tabsId);
		this.tabsItems = Dom.getChildren(this.tabsDiv);
		this.headerHolder = this.tabsItems[0];
		this.bodyHolder = this.tabsItems[1];
		
		var css = ".headerButton{position:relative;cursor:pointer;}"+
						".bodyDiv{position:absolute;}";
		var sheet = new YAHOO.util.StyleSheet(css);		
		
		this.prepareHeader();
		this.prepareBody();
		var bodyDivs =  Dom.getChildren(this.bodyHolder);
	},
	
	prepareHeader:function(){
		Dom.addClass(this.headerHolder, 'headerHolder');
		this.headerButtons =  Dom.getChildren(this.headerHolder);
		Dom.addClass(this.headerButtons, 'headerButton');
		for(var i=0; i<this.headerButtons.length;i++){
			this.headerButtons[i].mainObj = this;
			Event.addListener(this.headerButtons[i], "click", this.changeSelection,{selectedIndex:i}); 
			Event.addListener(this.headerButtons[i], "mouseover", this.mouseOverTab,{selectedIndex:i}); 
			Event.addListener(this.headerButtons[i], "mouseout", this.mouseOutTab,{selectedIndex:i}); 
			
			var textDiv = document.createElement('div');
			textDiv.innerHTML = this.headerButtons[i].innerHTML;
			this.headerButtons[i].innerHTML = "";
			this.headerButtons[i].appendChild(textDiv);
			
			this.headerButtons[i].leftDiv = document.createElement('div');
			Dom.addClass(this.headerButtons[i].leftDiv, 'headerButtonLeft');
			this.headerButtons[i].appendChild(this.headerButtons[i].leftDiv);
			this.headerButtons[i].rightDiv = document.createElement('div');
			Dom.addClass(this.headerButtons[i].rightDiv, 'headerButtonRight');
			this.headerButtons[i].appendChild(this.headerButtons[i].rightDiv);
			this.selectTab(this.props.selectedIndex);
		}
	},

	prepareBody:function(){
		Dom.addClass(this.bodyHolder, 'tabBodyHolder');
		this.bodyDivs =  Dom.getChildren(this.bodyHolder);
		Dom.addClass(this.bodyDivs, 'bodyDiv');
		Dom.setStyle(this.bodyDivs, 'opacity', '1');
		Dom.setStyle(this.bodyDivs[0], 'opacity', '0');
	},
	
	changeSelection:function(ev, props){
		Event.preventDefault(ev);
		this.mainObj.selectBodyDiv(props.selectedIndex);
		this.mainObj.selectTab(props.selectedIndex);
	},
	
	selectBodyDiv:function(selectedIndex){
		if(this.props.selectedIndex != selectedIndex){
			var animationHide = new YAHOO.util.Anim(this.bodyDivs[this.props.selectedIndex],{opacity : {from : 0, to : 1}}, this.props.animDuration);
			animationHide.animate();
			
			var animationShow = new YAHOO.util.Anim(this.bodyDivs[selectedIndex],{opacity : {from : 1, to : 0}}, this.props.animDuration);
			animationShow.animate();
		}
	},

	mouseOverTab:function(ev, props){
		if (this.mainObj.props.selectedIndex != props.selectedIndex){
			Dom.addClass(this, 'headerButtonOver');
			Dom.addClass(this.leftDiv, 'headerButtonOverLeft');
			Dom.addClass(this.rightDiv, 'headerButtonOverRight');
		}
	},

	mouseOutTab:function(ev, props){
		Dom.removeClass(this, 'headerButtonOver');
		Dom.removeClass(this.leftDiv, 'headerButtonOverLeft');
		Dom.removeClass(this.rightDiv, 'headerButtonOverRight');
	},

	selectTab:function(selectedIndex){
		if (this.props.selectedIndex != selectedIndex){
			this.deSelectTab(this.props.selectedIndex);
		}
		this.props.selectedIndex = selectedIndex;
		Dom.addClass(this.headerButtons[selectedIndex], 'headerButtonSelected');
		Dom.addClass(this.headerButtons[selectedIndex].leftDiv, 'headerButtonLeftSelected');
		Dom.addClass(this.headerButtons[selectedIndex].rightDiv, 'headerButtonRightSelected');
	},
	deSelectTab:function(selectedIndex){
		Dom.removeClass(this.headerButtons[selectedIndex], 'headerButtonSelected');
		Dom.removeClass(this.headerButtons[selectedIndex].leftDiv, 'headerButtonLeftSelected');
		Dom.removeClass(this.headerButtons[selectedIndex].rightDiv, 'headerButtonRightSelected');
	}
}