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

//++++++++++++++++++++++++++++++++++++
// YUI ACCORDION MENU
// 2 may 2009 - Michael Gurov
//
// accordion menu
//
// REQUIRES: yahoo-dom-event.js, animation-min.js, stylesheet-min.js
//
// to define create DIV with class="accordion" every <A> will be button  
// <DIV> - holder for sub buttons
// in script : var accordion1 = new accordion('accordion1', {});
// available properties:
// multi - for enable more than one sub item open
// vAlignItem, vAlignSubItem - vertical aligning of text in the buttons
// animDuration - duration in seconds of open close sub items
// animEasingExpand, animEasingCollapse - type of easing like YAHOO.util.Easing.backOut. Could be found in http://developer.yahoo.com/yui/docs/YAHOO.util.Easing.html
//
// CSS:
// .accordion - main div
// .menuButton - level 1 button
// .mouseOver - level 1 button mouse over
// .accSubHolder - DIV holding sub buttons
// .menuSubButton - level 2 button
// .mouseOverSub - level 2 button mouse over
// .selectedButton - level 1 button afeter open sub menu
// .subHolderTop - DIV on top of DIV holding sub buttons 
// .subHolderBottom - DIV on top of DIV holding sub buttons
// .menuButton3 - custom class for every level 1 button
// .menuSubButton2_3 - custom class for every level 2 button
//++++++++++++++++++++++++++++++++++++

accordion = function(accId, properties){
		this.props = {
			multi:false,
			vAlignItem:'middle',
			vAlignSubItem:'middle',
			animDuration:0.3,	
			animEasingExpand:YAHOO.util.Easing.backOut,
			animEasingCollapse:YAHOO.util.Easing.backIn
		}

		var css = ".accordion a{text-decoration:none;}"+
						".menuButton{cursor:pointer;}"+
						".menuSubButton{cursor:pointer;}"+
						".accSubHolder{height:0px;overflow:hidden;}"+
						".expand{	height:auto;}";
		var sheet = new YAHOO.util.StyleSheet(css);

		if (typeof properties == 'undefined')	{ properties = {};}
		this.getProperties(properties);
		var accItems = Dom.getChildren(accId);
		this.accItems = accItems;
		this.selectedItem = 0;
		var subItemsTmp, itemInd = 0, subItemInd = 0;
		for(i=0;i<accItems.length;i++){
			accItems[i].mainObj = this;
			 if(accItems[i].tagName == "A"){
				itemInd++;
				accItems[i].itemInd = itemInd;
				if((i<accItems.length-1)&&(accItems[i+1].tagName== "DIV")){	// has subMenu 
					accItems[i].SH = accItems[i+1];
					accItems[i+1].upMenu = accItems[i];
					Event.addListener(accItems[i], "click", Event.preventDefault); 
					accItems[i].hasSubMenu = true;
				} else {accItems[i].hasSubMenu = false;}
				this.prepareItem(accItems[i]);
			 } else {	// sub menu DIV
				accItems[i].targetHeight = 0;
				subItemsTmp = Dom.getChildren(accItems[i]);
				Dom.addClass(accItems[i],'accSubHolder');
				subItemInd = 0
				for(j=0;j<subItemsTmp.length;j++){	
					subItemInd++;
					subItemsTmp[j].itemInd = itemInd;
					subItemsTmp[j].subItemInd = subItemInd;
					this.prepareSubItem(subItemsTmp[j]);
				}
				this.addSubholderTopBottom(accItems[i]);
			 	Dom.setStyle(accItems[i], 'opacity', '0');
			 }
		}
		
}

accordion.prototype = {
	
	getProperties:function(properties){
		if (!YAHOO.lang.isUndefined(properties.multi)) { this.props.multi = properties.multi}
		if (!YAHOO.lang.isUndefined(properties.vAlignItem)) { this.props.vAlignItem = properties.vAlignItem}
		if (!YAHOO.lang.isUndefined(properties.vAlignSubItem)) { this.props.vAlignSubItem = properties.vAlignSubItem}
		if (!YAHOO.lang.isUndefined(properties.animDuration)) { this.props.animDuration = properties.animDuration}
		if (!YAHOO.lang.isUndefined(properties.animEasingExpand)) { this.props.animEasingExpand = properties.animEasingExpand}
		if (!YAHOO.lang.isUndefined(properties.animEasingCollapse)) { this.props.animEasingCollapse = properties.animEasingCollapse}
	},
	
	prepareItem:function(itemObj){
		var itemIH = itemObj.innerHTML;
		itemObj.innerHTML = "";
		if (YAHOO.env.ua.gecko>0){	Dom.setStyle(itemObj, 'opacity', '0');	}	// to prevent pixel appearance in FF
		var itemDiv = document.createElement('div');
		itemDiv.father = itemObj;
		itemDiv.mainObj = itemObj.mainObj;
		Dom.addClass(itemDiv,'menuButton');
		Dom.addClass(itemDiv,'menuButton' + itemObj.itemInd);
		var textDiv = document.createElement('div');
		textDiv.innerHTML = itemIH;
		itemDiv.appendChild(textDiv);
		itemObj.appendChild(itemDiv);
		this.vAlignItem(itemDiv, textDiv, this.props.vAlignItem);
		Event.addListener(itemDiv, "mouseover", this.mouseOver);
		Event.addListener(itemDiv, "mouseout", this.mouseOut);
		if(itemObj.hasSubMenu){ Event.addListener(itemDiv, "click", this.itemClick,{mainAcc:this});}
	},
	
	prepareSubItem:function(itemObj){
		var itemIH = itemObj.innerHTML;
		itemObj.innerHTML = "";
		if (YAHOO.env.ua.gecko>0){	Dom.setStyle(itemObj, 'opacity', '0');	}	// to prevent pixel appearance in FF
		var itemDiv = document.createElement('div');
		Dom.addClass(itemDiv,'menuSubButton');
		Dom.addClass(itemDiv,'menuSubButton' + itemObj.itemInd + '_' + itemObj.subItemInd);
		var textDiv = document.createElement('div');
		textDiv.innerHTML = itemIH;
		itemDiv.appendChild(textDiv);
		itemObj.appendChild(itemDiv);
		var subHolder = Dom.getAncestorBy(itemObj);
		subHolder.targetHeight = subHolder.targetHeight + Dom.getRegion(itemDiv).height;
		this.vAlignItem(itemDiv, textDiv, this.props.vAlignSubItem);
	
		Event.addListener(itemDiv, "mouseover", this.mouseOverSub);
		Event.addListener(itemDiv, "mouseout", this.mouseOutSub);
	},
	
	addSubholderTopBottom:function(subholderObj){
		var topDiv = document.createElement('div');
		Dom.addClass(topDiv,'subHolderTop');
		Dom.insertBefore(topDiv, Dom.getFirstChild(subholderObj));
		subholderObj.targetHeight = subholderObj.targetHeight + Dom.getRegion(topDiv).height;

		var bottomDiv = document.createElement('div');
		Dom.addClass(bottomDiv,'subHolderBottom');
		Dom.insertAfter(bottomDiv, Dom.getLastChild(subholderObj));
		subholderObj.targetHeight = subholderObj.targetHeight + Dom.getRegion(bottomDiv).height;
	},
	
	vAlignItem:function(divOutObj, divInObj, alignType){
		var textHeight = Dom.getRegion(divInObj).height;
		var itemHeight = Dom.getRegion(divOutObj).height;
		var marginTop;
		if (alignType == 'top') {
			marginTop = 0
		} else if (alignType == 'middle') {
			marginTop = Math.floor((itemHeight - textHeight)/2);
		} else if (alignType == 'bottom'){
			marginTop = itemHeight - textHeight;
		}
		
		if (marginTop > 0){
			Dom.setStyle(divInObj, 'padding-top', marginTop + 'px');
		}
	},
	
	mouseOver:function (ev){
		Dom.addClass(this,'mouseOver');
		Event.preventDefault(ev);
	},
	mouseOut:function (ev){
		Dom.removeClass(this,'mouseOver');
		Event.preventDefault(ev);
	},

	mouseOverSub:function (ev){
		Dom.addClass(this,'mouseOverSub');
		Event.preventDefault(ev);
	},
	mouseOutSub:function (ev){
		Dom.removeClass(this,'mouseOverSub');
		Event.preventDefault(ev);
	},
	
	itemClick:function(ev, props){
		var mainObj = props.mainAcc;
		Dom.removeClass(this.father.mainObj.selectedItem,'selectedButton');
		//accordion.prototype.collapseAnim(this.mainObj.selectedItem);
		if(!Dom.hasClass(this.father.SH, 'expand')){
			Dom.addClass(this.father.SH,'expand');
			//this.father.mainObj.selectedItem = this;
			Dom.addClass(this,'selectedButton');
			accordion.prototype.expandAnim(this.father.SH, mainObj);
		} else {
			accordion.prototype.collapseAnim(this.father.SH);
		}
	},
	
	expandAnim:function(subHolderObj){
		Dom.setStyle(subHolderObj, 'opacity', '1');
		var mainObj = subHolderObj.mainObj;
		var attributes = {
			height : {from : 0, to : subHolderObj.targetHeight}
		}
		var animation = new YAHOO.util.Anim(subHolderObj,attributes,
														mainObj.props.animDuration,
														mainObj.props.animEasingExpand);
		animationEnd = function() {
			// if not multy close other open item
			if ((!mainObj.props.multi)&&(mainObj.selectedItem != 0)&&(mainObj.selectedItem!=subHolderObj.upMenu)){
				mainObj.collapseAnim(subHolderObj.mainObj.selectedItem.SH);
			}
			mainObj.selectedItem = subHolderObj.upMenu;
		}
		animation.onComplete.subscribe(animationEnd);
		animation.animate();
	},

	collapseAnim:function(subHolderObj){
		var mainObj = subHolderObj.mainObj;
		var attributes = {
			height : {to : 0 }
		}
		
		var animation = new YAHOO.util.Anim(subHolderObj,attributes,
														mainObj.props.animDuration,
														mainObj.props.animEasingCollapse);
		animationEnd = function() {
			Dom.removeClass(subHolderObj,"expand");
			Dom.setStyle(subHolderObj, 'height', '0px');
		}
		animation.onComplete.subscribe(animationEnd);
		animation.animate();
	}

}