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


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

	root : {}, // root element

	toggle : {},
	content : {},
	closeTimer : [],	
	active: 0,
	
	
	

	//
	//  Initialize the navs
	//
	initialize: function(options) {
		//Object.extend(this.options, options || {});
		
	    this.options = Object.extend({
	    	
			root : {},
		    duration : 0.1,
			
		    // selectors
			selectors : {
		    	root : '#navSiteContent',

				toggle : '#langToggle',
				content : '#langContent',
				
				dummy : '#dummy'
			},
			classNames : {
				toggleActive : 'selectBoxStyledToggleActive',
				optionActive : 'selectBoxStyledOptionActive',
				
				dummy : '#dummy'
			},

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

	},


	start : function(){

		this.root = $$(this.options.selectors.root).first();
		//console.info(this.root, 'this.root');
		if(!this.root) return;

		var index = 'navSite';
		var selectBox = $('navSite');

		var selectBoxToggleTemplate = new Template('<a id="#{id}" href="#" class="selectBoxStyledToggle #{className}" ><span class="label" >#{toggleLabel}</span><span class="button"></span></a>');
		var selectBoxTemplate = new Template('<div id="#{id}" style="#{style}" class="selectBoxStyled"><ul>#{optionsStr}</ul></div>');
		var optionTemplate = new Template('<li><a class="#{active}" href="#{href}">#{innerHTML}</a></li>');

		var optionsStr = '';
		var options = selectBox.select('a');
		//console.info(options);
		
		var toggleLabel;
		options.each(function(option, i){
			if(i == 0){
				toggleLabel = option.innerHTML;
			}
			if(option.hasClassName('navOpen') || option.hasClassName('active')){
				toggleLabel = option.innerHTML;
				option.active = this.options.classNames.optionActive;
				this.active = i;
				//console.info('this.options.classNames.optionActive=' + this.options.classNames.optionActive);
			} else {
				option.active = '';
			}
			optionsStr += optionTemplate.evaluate(option);
		}.bind(this));

		
		//console.info('optionsStr' , optionsStr);


		var selectBoxToggleObj = {
				toggleLabel : toggleLabel,
				id : 'styledSelectToggle_' + index,
				className : selectBox.className
		};
		var selectBoxToggleStr = selectBoxToggleTemplate.evaluate(selectBoxToggleObj);
		//console.info('selectBoxToggleStr' , selectBoxToggleStr);

		selectBox.insert({
			after : selectBoxToggleStr 
		});
		selectBox.hide();
		var selectBoxToggle = $('styledSelectToggle_' + index);
		
		// ***********************************************************************
		var selectBoxStyle = new Array(
				'height: 0px'
		);  
		
		if(selectBox.id) {
			var selectBoxId = selectBox.id;
		} else {
			var selectBoxId = selectBox.id;
		}
		
		var selectBoxObj = {
				optionsStr : optionsStr,
				id : 'styledSelectBox_' + index,
				style : selectBoxStyle.join(';')
		};
		var selectBoxStr = selectBoxTemplate.evaluate(selectBoxObj);
		
		//console.info('selectBoxStr' , selectBoxStr);

		$$('body').first().insert(selectBoxStr);
		var selectBoxStyled = $('styledSelectBox_' + index);
		
		//console.info('test' , this.toggle);
		Event.observe(selectBoxToggle, 'click', this.toggleClickHandler.bindAsEventListener(this, selectBoxToggle, selectBoxStyled), false);
		
		Event.observe(selectBoxToggle, 'mouseover', this.mouseoverHandler.bind(this, selectBoxToggle, selectBoxStyled), false);
		Event.observe(selectBoxStyled, 'mouseover', this.mouseoverHandler.bind(this, selectBoxToggle, selectBoxStyled), false);
		
		Event.observe(selectBoxToggle, 'mouseout', this.mouseoutHandler.bind(this, selectBoxToggle, selectBoxStyled), false);
		Event.observe(selectBoxStyled, 'mouseout', this.mouseoutHandler.bind(this, selectBoxToggle, selectBoxStyled), false);

		selectBoxStyled.select('a').each(function(elm, index){

			Event.observe(elm, 'click', this.linkClickHandler.bindAsEventListener(this, elm, index, selectBox, selectBoxToggle, selectBoxStyled), false);

		}.bind(this));
		
		
	},
	

	
	linkClickHandler : function(ev, elm, index, selectBox, selectBoxToggle, selectBoxStyled) {
		//ev.stop();
		//console.info(selectBox.options[index].value);
		this.close(selectBoxToggle, selectBoxStyled);
	},

	//
	//  Activate an nav 
	//
	toggleClickHandler : function(ev, selectBoxToggle, selectBoxStyled) {
		ev.stop();
		//console.info(selectBoxToggle, selectBoxStyled);
		if(selectBoxToggle.hasClassName(this.options.classNames.toggleActive)){
			// close
			this.close(selectBoxToggle, selectBoxStyled);

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

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

	mouseoutHandler : function(selectBoxToggle, selectBoxStyled) {
		//console.info('mouseout');
		this.closeTimer[selectBoxStyled.id] = window.setTimeout(this.timerAfterFinish.bind(this, selectBoxToggle, selectBoxStyled), 1000);
	},
	
	timerAfterFinish : function(selectBoxToggle, selectBoxStyled) {

		//console.info('closetimer');
		
		if(selectBoxToggle.hasClassName(this.options.classNames.toggleActive)){
			this.close(selectBoxToggle, selectBoxStyled);
		}
	},

	
	open : function(selectBoxToggle, selectBoxStyled) {

		selectBoxStyled.setStyle({
				left : selectBoxToggle.cumulativeOffset().left +'px',
				top : selectBoxToggle.cumulativeOffset().top +'px'
		});
		
		selectBoxToggle.addClassName(this.options.classNames.toggleActive);
		startHeight = 0;
		endHeight = selectBoxStyled.scrollHeight;

		this.getEffect(selectBoxStyled, startHeight, endHeight);		
	},
	
	close : function(selectBoxToggle, selectBoxStyled) {
		selectBoxToggle.removeClassName(this.options.classNames.toggleActive);
		startHeight = selectBoxStyled.scrollHeight;
		endHeight = 0;
		
		this.getEffect(selectBoxStyled, startHeight, endHeight);
	},
	
	
	// 
	// open an active nav
	//
	getEffect : function(content) {

		effect = new Effect.Tween(content, startHeight, endHeight, {
			duration: this.options.duration,
			transition: Effect.Transitions.sinoidal,
			queue: {
				position: 'end', 
				scope: 'langAnimation'
			},
			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;
	}

}