var Quicknav = Class.create();
Quicknav.prototype = {
	// ******************************************************************************
	// Constants
	// ******************************************************************************
	Version : '0.2',


	// ******************************************************************************
	// vars
	// ******************************************************************************

	quicknav : {}, // quicknav element

	toggle : {},
	content : {},
	
	
	

	//
	//  Initialize the quicknavs
	//
	initialize: function(options) {
		//Object.extend(this.options, options || {});
		
	    this.options = Object.extend({
	    	
			quicknav : {}, // carousel element eg div
		    duration : 0.4,
			
		    // selectors
			selectors : {
		    	quicknav : '#navQuick',

				toggle : '#navQuickToggle',
				content : '#navQuickPulldown',
				blocker : '#navQuickBlocker',
				
				dummy : '#dummy'
			},
			classNames : {
				toggleActive : 'quicknav_toggle_active',
				
				dummy : '#dummy'
			},

			dummy : '#dummy'
		}, options || {});
		
	
		//document.observe('dom:loaded', this.start.bind(this));
	    this.start();

	},


	start : function(){

		this.quicknav = $$(this.options.selectors.quicknav).first();
		if(!this.quicknav) return;
		this.quicknav.show();
		

		this.toggle = this.quicknav.select(this.options.selectors.toggle).first();
		this.content = this.quicknav.select(this.options.selectors.content).first();
		this.blocker = this.quicknav.select(this.options.selectors.blocker).first();
		

		Event.observe(this.toggle, 'click', this.toggleClickHandler.bind(this), false);
		Event.observe(this.toggle, 'mouseover', this.mouseoverHandler.bind(this), false);
		Event.observe(this.toggle, 'mouseout', this.mouseoutHandler.bind(this), false);
		Event.observe(this.content, 'mouseover', this.mouseoverHandler.bind(this), false);
		Event.observe(this.content, 'mouseout', this.mouseoutHandler.bind(this), false);
		
		Event.observe(this.blocker, 'click', this.blockerClickHandler.bind(this), false);

	},
	
	
	//
	//  Activate an quicknav 
	//
	toggleClickHandler : function(ev) {
		ev.stop();
		//console.info(index);
		if(this.toggle.hasClassName(this.options.classNames.toggleActive)){
			// close
			this.close();

		} else {
			this.open();
		}
	},

	blockerClickHandler : function(ev) {
		ev.stop();
		this.close();

	},
	
	mouseoverHandler : function() {
		//console.info('mouseover');
		if(typeof(this.closeTimer) != 'undefined') window.clearTimeout(this.closeTimer);
	},

	mouseoutHandler : function() {
		//console.info('mouseout');
		this.closeTimer = window.setTimeout(this.timerAfterFinish.bind(this), 1000);
	},
	
	timerAfterFinish : function() {
		//console.info('closetimer');
		
		if(this.toggle.hasClassName(this.options.classNames.toggleActive)){
			this.close();
		}
	},

	
	open : function() {
		this.toggle.addClassName(this.options.classNames.toggleActive);
		var startHeight = 0;
		var endHeight = this.content.scrollHeight;
		
		
		
		this.blocker.setStyle({
			width : document.viewport.getDimensions().width + 'px',
			height : (document.viewport.getDimensions().height - parseInt(this.blocker.getStyle('top'))) + 'px'
			});
		this.blocker.setStyle({width : document.viewport.getDimensions().width + 'px'});
		//this.blocker.show();

		
		var effects = [];
		effects.push(this.getPulldownEffect(this.content, startHeight, endHeight));
		effects.push(this.getBlockerEffectShow(this.blocker));
		
		this.effectParallel(effects);
		
	},
	
	close : function() {
		this.toggle.removeClassName(this.options.classNames.toggleActive);
		var startHeight = this.content.scrollHeight;
		var endHeight = 0;
		
		var effects = [];
		effects.push(this.getPulldownEffect(this.content, startHeight, endHeight));
		effects.push(this.getBlockerEffectHide(this.blocker));
		
		this.effectParallel(effects);
	},
	
	
	effectParallel : function(effects) {
	    
		new Effect.Parallel(effects, {
			duration: this.options.duration, 
			queue: {
				position: 'end', 
				scope: 'quickNavAnimation'
			},
			beforeStart: function() {
				//this.animating = true;
			}.bind(this),
			afterFinish: function() {

			}.bind(this)
		});
	},
	
	
	// 
	// open an active quicknav
	//
	getPulldownEffect : function(content, startHeight, endHeight) {

		var effect = new Effect.Tween(content, startHeight, endHeight, {
			duration: this.options.duration,
			transition: Effect.Transitions.sinoidal,
			queue: {
				position: 'end', 
				scope: 'quicknavAnimation'
			},
			beforeStart: function() {
				this.animating = true;
			}.bind(this),
			afterFinish: function() {
				this.animating = false;
			}.bind(this)
		}, function(p){
				content.setStyle({height : p + 'px'});
			}.bind(this)
		);
		return effect;
	},
	
	// 
	// fade blocker
	//
	getBlockerEffectShow : function(content) {

		var effect = new Effect.Fade(content, {
			from : 0,
			to : 0.5,
			duration: this.options.duration,
			transition: Effect.Transitions.sinoidal,
			queue: {
				position: 'end', 
				scope: 'quicknavAnimation'
			},
			beforeStart: function() {
				this.blocker.setStyle({opacity : 0});
				this.blocker.show();
			}.bind(this)
		});
		return effect;
	},
	getBlockerEffectHide : function(content) {

		var effect = new Effect.Fade(content, {
			from : 0.5,
			to : 0,
			duration: this.options.duration,
			transition: Effect.Transitions.sinoidal,
			queue: {
				position: 'end', 
				scope: 'quicknavAnimation'
			},
			afterFinish: function() {
				this.blocker.setStyle({opacity : 0});
			}.bind(this)
		});
		return effect;
	}	

}