var $_widgetName = 'source_selector';

widgetControls[ $_widgetName ] =
{
    input_control__input :
    {
        events :
        {
            keyup   : function()
            {
                this.ready()
            }
        },

        actions :
        {
            ready : function()
            {
                var self = this;
                setTimeout
                (
                    function ()
                    {
                        var val = self.template.val();
                        if ( prevInput != val )
                        {
                            if ( val.length >= 3 )
                            {
                                prevInput = val;
                                self.getPersonList();
                            } else
                            {
                                self.bricks('list_container').hide();
                            }
                        }
                    },
                    2000
                );
            },

            getPersonList : function ()
            {
                this.bricks('list_container').getPersonList();
            }
        }
    },
    list_container :
    {
        events :
        {

        },

        actions :
        {
            show          : function()
            {
                this.template.css( 'display', 'block' )
            },

            hide          : function()
            {
                this.template.css( 'display', 'none' )
            },

            getPersonList : function ()
            {
                var self = this;
                $.getJSON
                (
                    '/cp/ajax/get-person-by-mask',
                    //'/cp/ajax/get-' + source + '-by-mask',
                    {
                        mask: this.bricks( 'input_control__input' )
                                  .template.val()
                    },
                    function ( data )
                    {
                        if ( data.length > 0 )
                        {
                            //console.log( 100 )
                            self.bricks( 'list_container__listing' )
                                .createListing( data );
                        } else
                        {
                            self.hide();
                        }
                    }
                )
            }
        }
    },

    list_container__listing :
    {
        events :
        {

        },

        actions :
        {
            clear           : function ()
            {
                this.template.html('');
            },

            createListing   : function ( data )
            {

                this.bricks( 'list_container' ).template.hide();
                this.clear();
                for ( var key in data )
                {
                    var name = data[ key ][ 'name' ];
                    var id   = data[ key ][ 'id' ];

                    name = name.replace(
                        new RegExp
                        (
                            this.bricks( 'input_control__input' )
                                .template.val(),
                            'i'
                        ),
                        '<font color=red>$&</font>'
                    );

                    var list_item = new Brick( 'list_container__listing_item', this.widget)
                        .template
                        .attr( 'id', id )
                        .html( name );

                    this.template.append( list_item );
                }
                this.bricks( 'list_container' ).show();
            }

        }
    },

    list_container__listing_item :
    {
        events :
        {
            mouseover   : function ()
            {
                //console.log( 666 )
                this.itemBacklightOn( this.template );
            },

            mouseout    : function ()
            {
                this.itemBacklightOff( this.template );
            },

            click       : function ()
            {
                this.bricks( 'list_container' ).template.hide();
                this.setInputSelector( this.template );

                this.widget.callback( this.template.attr( 'id' ) );
            }

        },
        actions :
        {
            itemBacklightOn : function ( item )
            {
                $( item ).css( 'background-color', '#00ff00' );
            },

            itemBacklightOff : function ( item )
            {
                $( item ).css( 'background-color', '#fff' );
            },

            setInputSelector : function ( item )
            {
                var self = this;
                $.getJSON
                (
                    '/cp/ajax/get-person-by-id',
//                    '/cp/ajax/get-' + source + '-by-id',
                    {
                        id: $( item ).attr( 'id' )
                    },
                    function( data )
                    {
                        self.bricks( 'input_control__input' ).template
                            .val( data[ 'name' ] )
                            .attr( 'disabled', 'disabled' );
                        //fn( data );
                    }
                )
            }
        }
    }
}