var tags=
{
    processKey: function( event )
    {
        var inputElement = event.target;
        if ( event.keyCode == 27 ) // ESC
        {
            inputElement.value = '';
            $(inputElement).blur();
            return;
        }

        if ( inputElement.value.indexOf( ',' ) != -1 )
        {
            tags.addKeywords( inputElement );
        }
    },

    processBlurDelayed: function( inputElement )
    {
        if ( inputElement.isFocused || inputElement.form.isSubmitted )
        {
            return;
        }

        tags.addKeywords( inputElement );
    },

    processBlur: function( event )
    {
        var inputElement = event.target;
        inputElement.isFocused = false;
        setTimeout( function() { tags.processBlurDelayed( inputElement ); }, 200 );
    },

    processFocus: function()
    {
        this.isFocused = true;
    },

    addKeywords: function( inputElement )
    {
        var keywords = inputElement.value.split( ',' );
        var ul = $(inputElement).prev( 'ul' );
        for ( var i in keywords )
        {
            var keyword = keywords[i].replace( /^\s*(.*?)\s*$/, '\$1' );
            if ( keyword )
            {
                ul.append( '<li><span class="border-box"><span class="border-tl"></span><span class="border-tr"></span><span class="border-content"><span class="tag"></span><a class="removetag" href="#" onclick="$(this).parents( \'li\').remove(); return false;"></a></span><span class="border-br"></span><span class="border-bl"></span></span></li>' ).find( 'li:last span.tag' ).text( keyword );
            }
        }
        inputElement.value = '';
    },

    addAutoCompletedWord: function( event, word )
    {
        var inputElement = event.target;
        tags.addKeywords( inputElement );
    },

    onSubmit: function( event )
    {
        var formElement = event.target;
        formElement.isSubmitted = true;
        $(formElement).find( 'input.tags' ).each( function()
        {
            var keywords = [];
            var ul = $(this).prev( 'ul' );
            ul.children( 'li' ).each( function()
            {
                keywords.push( $(this).text() );
            } );
            ul.remove();

            $(this).unbind( 'keyup' );
            $(this).unbind( 'focus' );
            $(this).unbind( 'blur' );

            this.value = keywords.join( ', ' ) + ( ( this.value )? ', ' + this.value: '' );
        } );
    },

    init: function()
    {
        $('form').each( function()
        {
            var hasInputTags = false;
            this.isSubmitted = false;
            $(this).find( 'input.tags' ).each( function()
            {
                hasInputTags = true;
                $(this).before( '<ul></ul>' );
                tags.addKeywords( this );
                $(this).bind( 'keyup', tags.processKey );
                $(this).bind( 'focus', tags.processFocus );
                $(this).bind( 'blur', tags.processBlur );
                $(this).autocomplete( ezpFilesRoot + '/tags', { minChars: 3 } );
                $(this).result( tags.addAutoCompletedWord );
            } );

            if ( hasInputTags )
            {
                $(this).bind( 'submit', tags.onSubmit );
            }
        } );
    }
}

$(document).ready( tags.init );