var MlEditor = new Class({
	initialize: function(element)
	{
		this.element = element;
		this.element.addClass('ml_editor');
		this.defaultLanguage = 'nl';
		this.activeLanguage = 'nl';
		this.mode = 'view';

		this.element.addEvent('click', stopEvent);
		this.element.addEvent('dblclick', this.view.bind(this));

		$('multiLanguageClose').addEvent('click', this.hide.bind(this));
		
		//$(this.element.id + "_edit").addEvent('dblclick', this.edit.bind(this));
	},

	buttonHover: function(e, button)
	{
		button.addClass('ubbButtonHover');
	},

	buttonUnHover: function(e, button)
	{
		button.removeClass('ubbButtonHover');
	},



	hide: function()
	{
		$("overlay").setStyle('display', 'none');
		$("dialogContainer").setStyle('display', 'none');
		$('multiLanguageSave').removeEvents();
		$('multiLanguageSaveClose').removeEvents();
		this.mode = 'view';
	},

	saveClose: function(e)
	{
		this.save(null);
		this.hide();
	},

	save: function(e)
	{
		if(this.mode == 'edit')
		{

			$('language_tab_'+this.activeLanguage+'_saved').setStyle('display', 'inline');

			if(this.element.innerHTML != $("multiLanguageText").getValue())
			{
				if(this.defaultLanguage == this.activeLanguage)
					this.element.setHTML($("multiLanguageText").getValue());

				url = site_url + 'shared/MlEditorServer.php?label='+this.element.id+'&language='+this.activeLanguage+'&value='+encodeURIComponent($("multiLanguageText").getValue());
				new XHR({
						method: 'GET'

					}).send(url, '');
			}
		}
	},

	edited: function(e)
	{
		if(this.mode == 'edit')
		{
			$('language_tab_'+this.activeLanguage+'_saved').setStyle('display', 'none');
			
		}
	},

	view: function(e)
	{
		e = new Event(e);
		e.stop();
		if(this.mode == 'view')
		{
			//this.element.setStyle('display', 'none');
			this.mode = 'edit';

			// /foo/g basicly means replace all occurances of foo, not just the first
			$("multiLanguageText").value = this.element.innerHTML.replace(/<br>/g,"");
			$('multiLanguageText').addEvent('keyup', this.edited.bind(this));
			$("multilanguageMeta").setHTML(this.element.id);
			$("overlay").setStyle('display', 'block');
			$("dialogContainer").setStyle('display', 'block');
			$("overlay").setStyle('top', window.getScrollTop() + "px");
			$("dialogContainer").setStyle('top', window.getScrollTop() + "px");
			$('multiLanguageSave').addEvent('click', this.save.bind(this));
			$('multiLanguageSaveClose').addEvent('click', this.saveClose.bind(this));

			$$('.language_tab').each(function(language_tab)
			{
				if(language_tab.getProperty('language') == this.defaultLanguage)
					language_tab.addClass('active');
				language_tab.removeEvents();
				language_tab.addEvent('click', this.changeLanguage.bind(this));
				language_tab.addListener('mouseover', this.buttonHover.bindWithEvent(this, [language_tab]));
				language_tab.addListener('mouseout', this.buttonUnHover.bindWithEvent(this, [language_tab]));

			}.bind(this)
			);
			this.changeLanguageByShortcode(this.activeLanguage);
		}
	},

	changeLanguage: function(e)
	{
		e = new Event(e);
		e.stop();
		
		
		this.changeLanguageByShortcode(e.target.getProperty('language'));
	},
	
	changeLanguageByShortcode: function(shortcode)
	{
		$$('.language_tab').each(function(language_tab)
		{
			language_tab.removeClass('active');
		}.bind(this)
		);
		
		$('language_tab_' + shortcode).addClass('active');
		
		this.activeLanguage = shortcode;
		
		$("multiLanguageText").setProperty('disabled', 'true');
		new Ajax(site_url + 'shared/MlEditorServer.php?action=getValue&label='+this.element.id+'&language='+this.activeLanguage, {
			method: 'post',
			onComplete: this.changeLanguageComplete.bind(this)

		}).request();
	},

	changeLanguageComplete: function(value)
	{
		$("multiLanguageText").setProperty('disabled', '');
		$("multiLanguageText").value = value;
	}

});


window.addEvent('load', function() {
	$$('.mlEditArea').each(function(element)
	{
		new MlEditor(element);
	}
	);
});