/*------------------------------------------------------------------------------
	$Id: xnav.js,v 1.2 2010/04/07 09:33:26 qare Exp $
	Author:	mok
			btapley
------------------------------------------------------------------------------*/
adobe.use("adobe.u.adaptCustomMouse");
adobe.link("product.creativesuite/xnav/screen.css", { media: "screen" });
adobe.link("lib/animator.js");

adobe.AnimatingHover = Class.create((function() {
	var _oid = 1;
	
	var _states = {
		INACTIVE:	0,
		ACTIVE:		1,
		ACTIVATING:	2,
		DEACTIVATING:	3
	};
	
	var _state_translations = [];
	
	_state_translations[_states.INACTIVE] = {
		mouseenter: function() {
			this.nextstate = _states.ACTIVATING;
			this.animator.seekTo(_states.ACTIVE);
		}
	};
	
	_state_translations[_states.ACTIVE] = {
		mouseleave: function() {
			this.nextstate = _states.DEACTIVATING;
			this.animator.seekTo(_states.INACTIVE);
		}
	};
	
	_state_translations[_states.ACTIVATING] = {
		mouseleave: function() {
			this.nextstate = _states.DEACTIVATING;
			this.animator.seekTo(_states.INACTIVE);
		},
		complete: function() {
			this.nextstate = _states.ACTIVE;
			if(this.currentstate == _states.ACTIVE) { 
				return;
			}
			this.currentstate = _states.ACTIVE;
			this.options.onhoveractive(this.oid);
		}
	};
	
	_state_translations[_states.DEACTIVATING] = {
		mouseenter: function() {
			this.nextstate = _states.ACTIVATING;
			this.animator.seekTo(_states.ACTIVE);
		},
		complete: function() {
			this.nextstate = _states.INACTIVE;
			if(this.currentstate == _states.INACTIVE) { 
				return;
			}
			this.currentstate = _states.INACTIVE;
			this.options.onhoverinactive(this.oid);
		}
	};
		
	return {
		initialize: function(query, options) {
			this.oid = _oid++;
			this.elements = (function() {
				if(Object.isArray(query)) {
					return query;
				}
				if(Object.isElement(query)) {
					return [query];	
				}
				if(Object.isString(query)) {
					return $$(query);	
				}
			})();
			
			this.elements = this.elements.collect(Element.extend);
						
			this.options = Object.extend({
				activestyle: "",
				delay: 0,
				duration: 400,
				inactivestyle: "",
				onhoveractive: Prototype.emptyFunction,
				onhoverinactive: Prototype.emptyFunction,
				transition: Animator.tx.easeInOut
			}, options || {});
			
			this.nextstate = _states.INACTIVE;
			
			this.animator = new Animator({
				transition: this.options.transition,
				duration: this.options.duration,
				onComplete: (function() {
					this.fireEvent("complete");
				}).bind(this)
			});
			
			if(this.elements.length) {
				
				this.animator.addSubject(new CSSStyleSubject(
						this.elements, 
						this.options.inactivestyle, 
						this.options.activestyle));
				
				this.animator.jumpTo(this.nextstate);
				
				this.elements
				.invoke("adaptCustomMouse", "mouseenter", this.handleMouseEvent.bindAsEventListener(this))
				.invoke("adaptCustomMouse", "mouseleave", this.handleMouseEvent.bindAsEventListener(this));
			}
		},
		fireEvent: function(eventname) {
			try {
				(_state_translations[this.nextstate][eventname] || 
				Prototype.emptyFunction)
				.call(this, eventname);
			} catch(e) {
				throw(e);
			}
		},
		handleMouseEvent: function(event) {
			return this.fireEvent(event.type);
		}
	};
})());

document.observe("dom:loaded", init_xnav);

function init_xnav() {

	var xNavStyles = {
		containerInactive: "color:#FFFFFF",
		containerActive: "color:#666666",
		paneInactive: "opacity:0",
		paneActive: "opacity:1",
		suiteLinkActive: "padding-left: 4px; padding-right: 4px; border-bottom-color: #888; color:#004477; background-color: #FFF",
		suiteLinkInactive: "padding-left: 1px; padding-right: 1px; border-bottom-color: #ECECEC; color:#444444; background-color: #ECECEC"
	};
	
	/* container animation */	
	var container = $("xnav");
	
	if(!container) return;
	
	// set up dimmer for nav bar on hover	
	var xNavHoverer = new adobe.AnimatingHover(container, {
		duration: 400,
	   	transition: Animator.tx.easeInOut,
		activestyle: xNavStyles.containerActive,
		inactivestyle: xNavStyles.containerInactive,
		onhoveractive: function() {
			container.fire("xnav:active");
		},
		onhoverinactive: function() {
			container.fire("xnav:inactive");
		}
	});
	
	/* suite map animation */
	var mapID = "#xnav-pane-body";	
	var CHILD = " ";	
	var suite_product_selectors = 
				[ ".suite-item-cslv", ".suite-item-ac", ".suite-item-br", ".suite-item-cn", ".suite-item-ct", ".suite-item-dc", ".suite-item-dl", 
				 ".suite-item-dw", ".suite-item-ec", ".suite-item-fb", ".suite-item-fc", ".suite-item-fl", ".suite-item-fw", ".suite-item-fx", ".suite-item-id", 
				 ".suite-item-il", ".suite-item-ol", ".suite-item-ps", ".suite-item-pr", ".suite-item-sb", ".suite-item-vc"];
	
	var suite_link_hovers = suite_product_selectors.collect(createHover);
	
	function createHover(selector) {
		return new adobe.AnimatingHover(mapID+CHILD+selector, {
			activestyle: xNavStyles.suiteLinkActive,
			inactivestyle: xNavStyles.suiteLinkInactive
		});
	}	
	
	//set up pane opener after dimming	
	var pane = $("xnav-pane"),
	paneBody = $("xnav-pane-body"),
	paneTab = $("xnav-tab"),
	pane_animator = new Animator({
		duration: 400
	});
	
	pane.setStyle("zIndex", 100);
	
	addPaneSubjects();
	
	pane_animator.jumpTo(0);
	
	paneTab.observe("click", function() {
		var highlight = (paneTab.hasClassName("active")) ? paneTab.removeClassName("active") : paneTab.addClassName("active");
		pane_animator.toggle();	
	});
	
	container.observe("xnav:active", function() {
		paneTab.addClassName("active");
		addPaneSubjects();
		pane_animator.seekTo(1);
	});
	
	container.observe("xnav:inactive", function() {
		paneTab.removeClassName("active");
		pane_animator.seekTo(0);
	});
	
	$("xnav-pane-handle").observe("click", function () {
		container.fire("xnav:inactive");
	});
	
	function addPaneSubjects() {
		pane_animator.clearSubjects();
		pane_animator.addSubject(new CSSStyleSubject(pane, 
					xNavStyles.paneInactive+";height:0px", 
					xNavStyles.paneActive+";height:"+paneBody.scrollHeight+"px"));
	}	
}