var TuinyEditable = new Class(
{
	Implements: [ Options, Events ],

	nbsp: '          ',

	options:
	{
		inputId: null,
		inputType: 'text',
		inputOptions: {}
	},

	initialize: function( element, options )
	{
		this.setOptions( options );

		this.element = document.id( element );
		this.element.store( 'tuiny', this );
		this.hidden = document.id( this.options.inputId );

		var value = this.element.get( 'html' );
		if ( value.replace( /\s+/igm, '' ) == '' ) this.element.set( 'html', this.nbsp );

		switch ( this.hidden.get( 'tag' ) )
		{
			case 'input':
			case 'wysiwyg':
				this.hidden.set( 'value', value );
				break;
			case 'textarea':
				this.hidden.set( 'value', value.replace( /\n/igm, '' ).replace( /<br\s*\/?>/igm, "\n" ) );
				break;
		}

		this.bound = {
			onFocus: this.onFocus.bind( this ),
			onClickOut: this.onClickOut.bind( this ),
			onKeyDown: this.onKeyDown.bind( this )
		};
		this.attach();
	},

	attach: function( attach )
	{
		var method = ( attach != false ) ? 'addEvent' : 'removeEvent';
		this.element[ method ]( 'click', this.bound.onFocus );
		return this;
	},

	detach: function( attach )
	{
		return this.attach( false );
	},

	onFocus: function()
	{
		if ( this.input ) return;

		var value = this.hidden.get( 'value' );

		switch ( this.options.inputType )
		{
			case 'text':
				this.input = new Element( 'input', Object.merge( this.options.inputOptions, { type: this.options.inputType, value: value } ) );
				break;
			case 'textarea':
				this.input = new Element( 'textarea', Object.merge( this.options.inputOptions, { value: value } ) );
				break;
			case 'wysiwyg':
				this.input = new Element( 'textarea', Object.merge( this.options.inputOptions, { value: value } ) );
				break;
		}
		this.element.addEvent( 'mousedown', function( e )
		{
			e.stopPropagation();
		});
		var styles = this.element.getStyles(/*'padding-top','padding-right','padding-bottom','padding-left',*/'font-family','font-size','font-weight','line-height','border-top','border-right','border-bottom','border-left','background-color','color');
		var coordinates = this.element.getCoordinates();
		var position = { 'position': 'absolute', 'display': 'block' };
		this.input.setStyles( Object.merge( styles, coordinates, position ) );
		if ( this.options.inputType != 'wysiwyg' )
		{
			this.input.addEvent( 'blur', this.bound.onClickOut );
			this.input.addEvent( 'keydown', this.bound.onKeyDown );
			this.element.setStyle( 'visibility', 'hidden' );
		}
		else
		{
			this.element.setStyle( 'display', 'none' );
		}
		this.input.inject( this.element, 'after' );
		if ( this.options.inputType == 'wysiwyg' )
		{
			this.input.setStyle( 'min-height', 100 );
			this.mooEditable = new MooEditable( this.input );
			document.addEvent( 'click', function(e){ if (!this.mooEditable.container.contains(e.target)) this.bound.onClickOut(); }.bind( this ) );
			this.mooEditable.focus();
		}
		else
		{
			this.input.focus();
		}
		return false;
	},
	
	onKeyDown: function( e )
	{
		e.stopPropagation();
		switch ( this.options.inputType )
		{
			case 'text':
				if ( e.key == 'enter' ) this.onClickOut();
				break;
			case 'wysiwyg':
				break;
		}
	},

	onClickOut: function()
	{
		if ( !this.input ) return;
		if ( this.options.inputType == 'wysiwyg' )
		{
			this.mooEditable.detach();
		}

		var value = this.input.get( 'value' );
		this.hidden.set( 'value', value );

		if ( value.replace( /\s+/igm, '' ) == '' ) { var a = new Element( 'a' ); value = a.set( 'html', this.nbsp ).get( 'text' ); a.destroy(); }

		this.input.destroy();
		if ( this.options.inputType != 'wysiwyg' )
		{
			this.element.setStyle( 'visibility', 'visible' );
		}
		else
		{
			this.element.setStyle( 'display', '' );
		}
		this.element.set( 'html', value.replace( /\n/gm, '<br\>' ) );
		this.input = null;

		var submit = $( this.options.submit );
		if ( submit )
		{
			submit.setStyle( 'display', 'block' );
			//var button = $$( '#tuiny-submit input' );
			//if ( button ) button.highlight();
		}
	}
});

window.addEvent( 'domready', function()
{
	$$( '.tuiny-editable' ).each( function( element )
	{
		var options = {};
		var data = ( element.get( 'data-tuiny') || element.className ).clean().split( ' ' );

		data.each( function( s )
		{
			var split = s.split( ':' );
			if ( split[ 1 ] )
			{
				try
				{
					options[ split[ 0 ] ] = JSON.decode( split[ 1 ] );
				}
				catch ( e )
				{
					if ( window.console ) window.console.log( e );
				}
			}
		});

		element.store( '$tuiny:options', options );

		new TuinyEditable( element, options );
	});
});