/* 
 * Auto Complete class 2009 By Onur CANCI
 * onur@cancisoft.com
 */

var oComplete = new Class({
    
    Options: {
        delay : 900 ,
        minLength : 3
    },

    Choices:{ },
    
    timer:null,

    hideTimer:null,

    initialize: function(frm,url) {
        this.Form = $(frm);
        this.URL = url;
        this.addEvent();
    },

    list : null,

    selected: null,

    showChoices: function(r) {
        this.target.Choices = r;

        // Create list
        if(this.target.list != null)
            this.target.list.empty();
        else
            this.target.list = new Element('ul');
        
        this.target.list.set('class','cCompleter');
        this.target.list.setStyle('left',this.box.getCoordinates().left);
        this.target.list.setStyle('top',this.box.getCoordinates().top + this.box.getCoordinates().height);
        this.target.list.setStyle('width',this.box.getStyle('width'));

        this.box.setStyle('background-color','#FFFFFF');

        this.target.Choices.each(function(el) {
            var select = new Element('li');
            select.set('class','cCompleterElement');
            select.set('text',el);

            select.addEvent('mouseover', this.target.selectOption.bind({
                'target' : this.target,
                'el':select
            }) );

            select.addEvent('mouseout', this.target.deselectOption.bind({
                'target':this.target,
                'el':select
            }));

            select.addEvent('click', this.target.select.bind(this) );

            this.target.list.appendChild(select);
        },this);

        document.body.appendChild(this.target.list);
    },

    select:function(){
        this.box.value = this.target.selected.innerHTML;
    },

    deselectOption:function(){
        this.target.selected = null;
        this.el.removeClass('cCompleterElementActive');
    },

    selectOption:function(){
        this.target.selected = this.el;
        this.el.addClass('cCompleterElementActive');
    },

    hideTimed: function(){
        this.hideChoices.delay(900,this);
    },

    hideChoices: function() {
        if(this.list != null)
            this.list.dispose();
    },

    query: function(evt){
        this.target.box = this.box;

        if(this.target.Options.minLength <= this.box.value.length ) {

            if(evt.key == 'enter' || evt.key == 'down' || evt.key == 'up' || evt.key == 'left' || evt.key == 'right') {
                //this.target.select();

                //if(this.target.selected == null && this.target.list.hasChild('li')) {

//                    if(this.target.selected == null)
//                        this.target.selected = this.target.list.getChildren('li')[0];

                    /*if(evt.key == 'up') {
                        this.target.selected.fireEvent('mouseout');
                        this.target.selected.getPrevious('li').fireEvent('mouseover');
                    }

                    if(evt.key == 'down'){
                        this.target.selected.fireEvent('mouseout');
                        this.target.selected.getNext('li').fireEvent('mouseover');
                    }*/

               // }

            }
            else {
                $clear( this.target.timer );
                this.target.timer = this.target.sendQuery.delay(this.target.Options.delay,this);
            }
        }
    },

    sendQuery:function(){

        var str = '';
        this.target.Form.getElements('input').each(function(el){
            str += el.name+'='+el.value+"&";
        });
        str += 'field='+this.box.name;

        this.box.setStyle('background-color','#EAEAEA');

        new Request.JSON({
            url: this.target.URL,
            method : 'post'
        }).addEvent('onComplete',this.target.showChoices.bind(this)).send(str);

    },

    addEvent: function(){

        // Disable auto complete
        this.Form.set('autocomplete','off');

        this.Form.addEvent('submit',function(e){ 
            e.stop();
        });

        this.Form.getElements('input').each(function(el){
            if(el.type == 'text')
                el.addEvent('keyup',this.query.bind({
                    'target':this ,
                    'box':el
                }) );

            el.addEvent('focus',this.hideChoices.bind(this));
            el.addEvent('blur',this.hideTimed.bind(this) );

        },this);
    }

});