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


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

	lang : {}, // lang element

	toggle : {},
	content : {},
	
	
	

	//
	//  Initialize the langs
	//
	initialize: function(options) {
		//Object.extend(this.options, options || {});
		
	    this.options = Object.extend({
	    	
			lang : {}, // carousel element eg div
		    duration : 0.1,
			
		    // selectors
			selectors : {
		    	lang : '#lang',

				altContent : 'form',
				altLabel : 'label',
				altOptions : 'option',
				
				toggle : '#langToggle',
				content : '#langContent',
				
				dummy : '#dummy'
			},
			classNames : {
				toggleActive : 'lang_toggle_active',
				
				dummy : '#dummy'
			},

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

	},


	start : function(){


		this.lang = $$(this.options.selectors.lang).first();
		if(!this.lang) return;
		
		/*		
		
		altContent = this.lang.select(this.options.selectors.altContent).first();
		
		//this.altContent.hide();
		

		var myTemplate = new Template('<li><a href="#{value}">#{text}</a></li>');

		var list = '';
		this.lang.select(this.options.selectors.altOptions).each(function(option){
			list +=	myTemplate.evaluate(option);
		});

		//console.info('list' , list);
		//console.info('altLabel' , this.lang.select(this.options.selectors.altLabel).first().innerHTML  );

		
		var myTemplate = new Template('<a id="langToggle" href="#">#{text}</a><div id="langContent" style="height: 0px;" ><ul id="navLang" class="nav navV" >#{list}</ul></div>');
		data = {
				list : list,
				text : this.lang.select(this.options.selectors.altLabel).first().innerHTML
		};
		
		langContent = myTemplate.evaluate(data);

	
		altContent.replace(langContent);
		*/

		this.toggle = this.lang.select(this.options.selectors.toggle).first();
		this.content = this.lang.select(this.options.selectors.content).first();
		
		//console.info('test' , this.toggle);
		Event.observe(this.toggle, 'click', this.toggleClickHandler.bind(this), false);
		Event.observe(this.lang, 'mouseover', this.mouseoverHandler.bind(this), false);
		Event.observe(this.lang, 'mouseout', this.mouseoutHandler.bind(this), false);

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

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

	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);
		startHeight = 0;
		endHeight = this.content.scrollHeight;

		this.getEffect(this.content, startHeight, endHeight);		
	},
	
	close : function() {
		this.toggle.removeClassName(this.options.classNames.toggleActive);
		startHeight = this.content.scrollHeight;
		endHeight = 0;
		
		this.getEffect(this.content, startHeight, endHeight);
	},
	
	
	// 
	// open an active lang
	//
	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;
	}

}