MarkdownEditor = new Class({
	Implements: Options,
	options: {
		'ajaxEndpoint': 'api/markdown'
	},
	
	initialize: function(textarea,options){
		this.setOptions(options);
		this.element = new Element('div',{
			'class': 'edit markdown_editor',
			'title': textarea.get('name')
		});
		this.nav = new Element('div',{
			'class': 'nav'
		}).inject(this.element);	
		this.modesContainer  = new Element('div',{
			'class':'modes'
		}).inject(this.element);	
		var modes = ['edit','preview','html'];		
		modes.each(function(mode){
			var navlink = new Element('a',{
				'href': '#'+mode,
				'title': mode
			}).inject(this.nav)
			navlink.set('text',mode);
			var modepanel = new Element('div',{
				'class': mode+' mode'
			}).inject(this.modesContainer)
		}.bind(this));		
		this.textarea = textarea;
		this.navlinks = this.nav.getElements('a');
		this.navlinks[0].addClass('active');
		this.previewArea = this.element.getElement('.preview.mode');
		this.htmlArea = new Element('code').inject(this.element.getElement('.html.mode'));
		this.editArea = this.element.getElement('.edit.mode');
		this.element.inject(this.textarea,'before');
		this.editArea.adopt(this.textarea);		
		this.attachEvents();
		textarea.removeClass('markdown');
		this.requestConversion();
	},
	
	attachEvents: function(){		
		this.navlinks.each(function(a){
			a.addEvents({
				'click': function(event){
					event.preventDefault();
					event.stopPropagation();
					this.navlinks.removeClass('active');
					a.addClass('active');
					this.element.set('class', 'markdown_editor '+a.get('title'));
				}.bind(this)
			});			
		}.bind(this));
		this.textarea.addEvents({
			'keyup': function(event){
				window.clearTimeout(this.delayedCall);
				var call = function(){
					this.requestConversion();					
				}.bind(this);
				this.delayedCall = call.delay('500');				
			}.bind(this)			
		});
	},
	requestConversion: function(){
		var conversionRequest = new Request({
			url: this.options.ajaxEndpoint,
			onSuccess: function(response){
				this.previewArea.set('html',response);
				this.htmlArea.set('text',response);
			}.bind(this)			
		});
		
		var markdown = this.element.getElement('textarea').get('value')
		markdown = encodeURI(markdown);
		markdown = escape(markdown);
		console.log(markdown);
		conversionRequest.send('m='+markdown);		
	}
});

MarkdownEditor.apply = function(){
	$$('textarea.markdown').each(function(ta){
		new MarkdownEditor(ta,{
			ajaxEndpoint: '/markdown.php'
		});
	});	
}