/**
 * @author Mark Cassar
 */

 
com.cs.initClass("com.cs.dojo.dijit.layout");

/**
 * Extending the dojo TabContainer to work with Anchor Links.
 * 
 * Events: onChange(prevTab, newTab)
 * 		   onChangeContent(prevTabDomNode, newTabDomNode)
 * 
 * 		   Connect to them do not override them
 * 
 * @param {String/Object} dijitTabContainerID The id of the tab container
 * @param {Boolean} dontUseBackForward Whether you want to use back/forward (false) or not (true)
 * @param {Boolean} dontFadeTransition Wheter you want to disable fading transition between tabs
 * @param {Number} The fade duration in milliseconds
 */
com.cs.dojo.dijit.layout.TabContainer = function(dijitTabContainerID, dontUseBackForward, dontFadeTransition, fadeDuration) {
	if (dontUseBackForward == undefined) dontUseBackForward = false;
	if (dontFadeTransition == undefined) dontFadeTransition = false;
	this._tabContainer = dijit.byId(dijitTabContainerID);
	this._useBackForward = !dontUseBackForward;
	this._useFadeTransition = !dontFadeTransition;
	
	this._selectedTab = null;
	this._initialTab = null;
	this._anchorLinkPrefix = "tab-";
	
	/** For animation */
	this._currFadingAnimation = null;
	this._isFading = false;
	this._showingContent = null;
	this._newContentToShow = null; // DIV to show once faded out
	this._shownContent = null;
	
	this.fadeDuration = fadeDuration || 3000;
	
	var scope = this;
	
	this._getTabById = function(id) {
		var tabs = scope._tabContainer.getChildren();
		for (var i = 0;i<tabs.length;i++) {
			var tab = tabs[i];
			if (tab.id == id) {
				return tab;
			}
		}
		return null;
	}
	
	this._onURLChange = function(value, back){
		console.log("CHANGE: '"+value+"'");
		var selectTab = null;
		if (value != "") {
			//Something was selected
			if (value.length > scope._anchorLinkPrefix.length) {
				value = value.substring(scope._anchorLinkPrefix.length);
			}
			
			var newTab = scope._getTabById(value);
			if (newTab != null && newTab != scope._selectedTab) {
			
				selectTab = newTab;
			}
			scope._selectedTab = newTab;
			if (scope._initialTab == null) {
				scope._initialTab = scope._selectedTab;
			}
		}
		else {
			selectTab = scope._initialTab;
		}
		
		if (selectTab != null) {
			scope._tabContainer.selectChild(selectTab); //Select new tab
			scope._shownContent = scope._selectedTab.domNode;		
			scope._selectedTab = selectTab;
		}
		
	}
	
	this._initBackForward = function() {
		com.cs.require("com.cs.back.back");				
		com.cs.back.Back.setOnChange(scope._onURLChange);
	}
	
	this._onSelectChild = function(newChild){
	
	
		var id = scope._anchorLinkPrefix + newChild.id;
		if (scope._useBackForward) {
			if (com.cs.back.Back.getValue() == "" && newChild == scope._initialTab) {
			//This means to go to initial tab
			//If this tab is the initial tab, do nothing
			
			}
			else {
				com.cs.require("com.cs.back.back");
				com.cs.back.Back.setValue(id);
			}
		}
		scope.onChange(scope._selectedTab, newChild);
		scope._selectedTab = newChild;
		
		
	}
	
	/**
	 * @param {dijit.layout.TabContainer} tabContainer
	 */
	this._init = function(tabContainer) {
		scope._selectedTab = scope._tabContainer.selectedChildWidget;
		scope._shownContent = scope._selectedTab.domNode;
		
		if (scope._useBackForward) {
			scope._initBackForward();
			if (scope._initialTab == null) {
				scope._initialTab = scope._selectedTab; 
				
			}
		}
		else {
			scope._initialTab = scope._selectedTab;
		}
		dojo.subscribe(tabContainer.id+"-selectChild", scope, "_onSelectChild");
		
		
	}
	this._init(this._tabContainer);
	
	/** Public Methods */
	
	this.getSelectedTab = function(){
		return scope._selectedTab;
	}
	
	this.onChange = function(prevTab, newTab) {
		
		var domPrev = null;
		var domNext = null;
		if (prevTab != null) {
			domPrev = prevTab.domNode;
		}
		if (newTab != null) {
			domNext = newTab.domNode;
		}
		scope.onChangeContent(domPrev, domNext);
	}
	
	
	this.onChangeContent = function(prevTabContent, newTabContent) {
		//The default animation when changing tab
		//TODO: Mark for now animation is disabled
		if (false && scope._useFadeTransition) {
			
			var contentToHide = scope._shownContent;
			//Make sure that the new content to show is currently hidden and the content which you is currently shown is visible
			newTabContent.style.display = 'none';
			contentToHide.style.display = '';
			dojo.require("dojo.fx.easing");
			console.log(contentToHide);
			console.log(newTabContent);
			return;
			var showNewContent = function() {
				if (scope._newContentToShow != null) {
					//Display the new content
					
					scope._newContentToShow.style.display = '';
					scope._currFadingAnimation = dojo.fadeIn({
						node: scope._newContentToShow,
						duration: scope.fadeDuration,
						onEnd: function() {
							scope._showingContent = null; //Content is now shown
						},
						easing:dojo.fx.easing.cubicOut
					});
					scope._currFadingAnimation.play();					
					
					scope._shownContent = scope._newContentToShow;
				}
				scope._isFading = false;
			}
			
			scope._newContentToShow = newTabContent; //Update the new content to show once ready fading
			
			if (!scope._isFading) {
				//Start Fading if there is no current fading
				scope._isFading = true;
				
				if (scope._currFadingAnimation) scope._currFadingAnimation.stop();
				
				scope._currFadingAnimation = dojo.fadeOut({
					node: contentToHide,
					duration: scope.fadeDuration,
					onEnd: function() {
						contentToHide.style.display = 'none';
						scope._shownContent = null;
						showNewContent();
					},
					easing:dojo.fx.easing.cubicOut
				});
				scope._currFadingAnimation.play();					
				
			}
			
			
			//To make sure that new content alpha is 0%
			dojo.fadeOut({
				node:scope._newContentToShow,
				duration:1
			}).play();
			
		}

	}
	
	
}