/*------------------------------------------------------------------------------
	$Id: Flyout.js,v 1.2.2.1 2010/04/07 11:30:50 mok Exp $
	Class: 	adobe.Flyout
	Author:	mok
------------------------------------------------------------------------------*/
adobe.Flyout = Class.create((function(){
	return {	
		initialize : function(container,options) {
			
			if(!$(container)) return;
						
			this.options = Object.extend({
				PANEL_CLASS : ".dyn-flyout",
				TRIGGER_ELEMENT : ".flyout-title",
				TRIGGER_CONTAINER : "div",
				TRIGGER_CLASS : ".flyout-button",
				TRIGGER_PANEL : ".flyout-menu",
				STYLE_PANEL_OPENED : "flyout-open",
				STYLE_PANEL_CLOSED : "flyout-menu-closed",				
				STYLE_TAB_OPENED : "tab-highlight",
				STYLE_TAB_CLOSED : "tab-unhighlight"
			}, options);
			
			this.triggers = this.options.PANEL_CLASS + " " + this.options.TRIGGER_CLASS;
			this.triggerContainers = $$(this.triggers);
			
			this.openedView = [];
			this.elements = [];
			this.viewportOffset = [];
			this.closedView = [];
			this.currentViewID = "";
			this.total = [];
			
			this.query = adobe.u.getSearchParam("flyout") || false;
			
			this.setTriggerIDs();		
			this.watching = this.watchClicks.bindAsEventListener(this);
			this.sifrClick = this.watchSifrClick.bindAsEventListener(this);
			this.keying = this.keyPress.bindAsEventListener(this);		
			this.triggerContainers.invoke("observe","click",this.setCurrentView.bindAsEventListener(this));				
			this.triggerContainers.invoke("observe","keydown", this.keying.bindAsEventListener(this));	
			
			if(this.query!=false) {
				this.openedView[0] = this.triggerContainers[this.query-1];
				
				this.openPanel();
				this.an = new Animator({
					duration: 8000,
					interval: 100,
					transition: Animator.tx.easeInOut,
					onComplete: (function() {
						if(!this.openedView[0]) return;
						$(this.openedView[0]).next().setOpacity(1);
						this.closedView[0] = this.openedView[0];
						this.openedView[0] = "";
						this.closePanel();						
					}).bind(this)
					
				});
				this.an.addSubject(new NumericalStyleSubject($(this.openedView[0]).next(), "opacity", 1, 0));
				
				this.anObserve = function() {
					if($(this.openedView[0]) == "") return;
					this.an.jumpTo(1);
					this.an.clearSubjects();
				}
				$(this.openedView[0]).observe("click",this.anObserve.bind(this));
				
				this.an.play()
			}
			
		},		
		
		keyPress : function(e) {
			var target = e.target;
			if(e.keyCode == 32) {
				this.setCurrentView(e);						
			}			
		},	
		
		setTriggerIDs : function() {
			this.elements = this.triggerContainers.invoke("identify");
			$$(this.options.TRIGGER_PANEL).
			invoke("removeClassName", "flyout-menu").
			invoke("addClassName",this.options.STYLE_PANEL_CLOSED);
			
		},		
		getOpenedViewId : function() {
			return this.openedView[0] || false;
		},	
		setCurrentView : function(event) {
			
			event.stop();
			var target = event.target;
			var id = (Element.hasClassName(target,"flyout-title")) ? target.up(1).id :  target.up().id
	
			if(!id) return;
			
			var currentOpened = this.getOpenedViewId();
			
			if(!currentOpened) { // if nothing opened, set opened to clicked id
				//console.log("if nothing opened, set opened to clicked id");
				this.openedView[0] = id; 
				this.openPanel();				
				return;
			}
			if(currentOpened == id) {	// if clicked id is already open, close it
				//console.log("if clicked id is already open, close it");
				this.closeSinglePanel(id);
				return;
			} else {					// if clicked id is not the opened, close the other and open clicked
				//console.log("if clicked id is not the opened, close the other and open clicked");
				document.fire('flyout:closepanel');
				this.closedView[0] = this.openedView[0];
				this.openedView[0] = id;	
				this.openPanel()
				this.closePanel();			
				
			}
		},
		stopObservingClicks : function(event){
			Event.stopObserving(window,"click",this.watching);
			
		},
		watchClicks : function(event) {			
			var elem = event.target,
				id = event.target.id;
			
			if(elem.nodeName == "HTML") return;
			
			var elem = Element.getOffsetParent(elem);
		
			if(!this.getOpenedViewId()) { return; }
			
			if(((elem.id==this.openedView[0]) && (Element.hasClassName(elem,"flyout-tab"))) || (elem.tagName == "LI")) return;										
			
			if((elem.tagName == "BODY")|| elem.className.indexOf("flyout") < 0) {
				Event.stopObserving(window,'click',this.watching);				
				this.closeSinglePanel(this.openedView[0]);
			}
			if(this.query!=false) this.anObserve();				
		},
		watchSifrClick : function() {
			this.closedView[0] = this.getOpenedViewId();
			this.openedView[0] = "";
			this.closePanel();
			document.stopObserving('sifr:click',this.sifrClick);
			if(this.query!=false) this.anObserve();	
		},
		closeSinglePanel : function(id) {
			this.closedView[0] = id; 
			this.openedView[0] = ""; 
			this.closePanel();
		},
	
		openPanel : function() {		
			var oid = $(this.openedView[0]);
			$(this.openedView[0]).next().setOpacity(1)
			if(!oid.next()) return;
			
			$$(this.triggers).invoke("addClassName",this.options.STYLE_TAB_CLOSED);
			
			oid.addClassName(this.options.STYLE_TAB_OPENED).removeClassName(this.options.STYLE_TAB_CLOSED);
			
			oid.next().addClassName(this.options.STYLE_PANEL_OPENED).removeClassName(this.options.STYLE_PANEL_CLOSED);
			oid.next().setStyle({ "zoom" : 1 });
			document.observe('click',this.watching);
			document.observe('sifr:click',this.sifrClick);
			document.fire('flyout:opening');	
		
		},		
		closePanel : function() {			
			var oid = $(this.closedView[0]);
			if(!$(this.openedView[0])) $$(this.triggers).invoke("removeClassName",this.options.STYLE_TAB_CLOSED);
			if(!oid.next) return;
			oid.removeClassName(this.options.STYLE_TAB_OPENED);
			oid.next().addClassName(this.options.STYLE_PANEL_CLOSED).removeClassName(this.options.STYLE_PANEL_OPENED);		
		}
	};
})());