/*
	Copyright (c) 2010, ePages GmbH
	All Rights Reserved.

	epages.widget.TabBanner $Revision: 1.3 $

	usage:

<div dojoType="epages.widget.TabBanner"
     containerWidth="600px"
	 containerHeight="400px"
	 class="MyCSSClass"
	 enableFade="1"
	 > 	
	<ul class="Tabs">
		<li>tab 1</li>
		<li>tab 2</li>					
	</ul>
	
	<div class="TabPage">
		<h2>TabPage 1</h2>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
	</div>
	
	<div class="TabPage">
		<h2>TabPage 2</h2>
		<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
	</div>	

</div>

*/
dojo.provide("epages.widget.TabBanner");
dojo.require("epages.widget");
dojo.require("epages.string");

dojo.declare("epages.widget.TabBanner", [dijit._Widget], {

	containerWidth  : '400px',  // string - width of display container e.g. 400px
	containerHeight : '300px',  // string - height of display container e.g. 300px
	enableFade		: '0',		// string/boolean - if set to 1 triggers slow fade effect

	_tabArray       : undefined, // array - array with all tab nodes
	_tabPageArray	: undefined, // array - array with all tabpage nodes
	_selectedTabNode: undefined, // domNode - currently selected tab
	_ep_connects    : undefined, // array - saved event connections

	/**
	 * widget life cycle
	 */
	
	postMixInProperties : function() {
		this.inherited("postMixInProperties", arguments);
		this.enableFade = epages.string.toBoolean(this.enableFade);
	},

	postCreate: function() {
      this.inherited("postCreate", arguments);
	  dojo.addClass(this.domNode, "TabBanner");
	  this._ep_connects = [];
	  
	  var containerWidth = this.containerWidth;
	  var containerHeight = this.containerHeight;

	  dojo.style(this.domNode, "width", containerWidth);
	  dojo.style(this.domNode, "height", containerHeight);
	   
	  this._tabArray = dojo.query('ul.Tabs li', this.domNode);
	  if(this._tabArray === undefined) {
	  	console.warn("tabs not found in "+ this.declaredClass);
	  }

	  this._tabPageArray = dojo.query('.TabPage', this.domNode);
	  if(this._tabPageArray === undefined) {
	  	console.warn("tabpages not found in "+ this.declaredClass);
	  }	  
	  
	  if(this._tabPageArray.length != this._tabArray.length) {
	  	console.warn("tabs and tabpage count differs "+ this.declaredClass);
	  }
	  
	  dojo.forEach(this._tabArray, function(el, i) {
	  	el.setAttribute("ep_tabindex", i);
	  	this._ep_connects.push(dojo.connect(el, 'onclick', this, this.onclick));
	  }, this);

	  dojo.forEach(this._tabPageArray, function(el) {
	  	el.style.display="none";
	  });
	  
	  this.selectNode(this._tabArray[0]);	  
	},

	destroy : function() {
		// disconnect events
		for(var el in this._ep_connects) {
			dojo.disconnect( this._ep_connects[el] );
		}
	},

	/**
	 * events
	 */
	
	onclick : function(/* event object */ evt) {
	//summary: event function - tab clicked
		var tabNode = evt.currentTarget;
		this.selectNode(tabNode);
	},
	
	/**
	 * public functions
	 */
	selectNode : function(/* dom node*/ _newSelected) {
	// summary: controller for currently visible tabs
		if(_newSelected !== this._selectedTabNode) {
			if(this._selectedTabNode !== undefined) {
				dojo.removeClass( this._selectedTabNode, "Selected");
				var oldIndex = this._selectedTabNode.getAttribute("ep_tabindex");
				if (this.enableFade) {
					this.fadeOutTab(this._tabPageArray[oldIndex]);
				} else {
					this._tabPageArray[oldIndex].style.display = 'none';
				}
			}
			
			var newIndex = _newSelected.getAttribute("ep_tabindex");
			
			if (this.enableFade) {
				this.fadeInTab(this._tabPageArray[newIndex]);
			} else {
				this._tabPageArray[newIndex].style.display =''
			}
			
			// change currently selected node
			this._selectedTabNode = _newSelected;
			dojo.addClass( this._selectedTabNode, "Selected");
		}			
	},
	
	fadeOutTab : function(node) {
	// summary: function for slow fade out
	    dojo.fadeOut( {
	        node:node,
	        duration: 500,
			onEnd: function(){
      			this.node.style.display ='none';
     		}
	    }).play();
	},
	
	fadeInTab : function(node) {
	// summary: function for slow fade in
	    dojo.fadeIn( {
	        node:node,
	        duration: 500,
			onEnd: function(){
      			this.node.style.display ='';
     		}
	    }).play();
	}
});