var mySearchForm = null;

var SearchForm = Class.create({

    initialize: function() {
        this.form = $('search-lot');
        this.types = $$('.search-types')[0];
        this.stypes = $$('.search-subtypes')[0];
        this.cantons = $$('.search-cantons')[0];
        
        this.detail_showed = false;
        this.title_begin = '';

        this.initTypes();
        this.initCantons();
        this.initSubmit();
    },

    initTypes: function() {
        var inputs = this.types.select('input');
        for (var i = 0; i < inputs.size(); i++) {
            this.initTypeRadio(inputs[i]);
        }
    },

    initCantons: function() {
        var button = this.cantons.down('h3').down('.search-canton-change');
        button.observe('click', this.onButtonCantonsClicked.bindAsEventListener(this));
    },

    initSubmit: function() {
        this.form.observe('submit', this.onFormSubmit.bindAsEventListener(this));
    },

    onFormSubmit: function(e) {
        var link;
        var url_param_sep = '?';

        // type
        var types = this.form.getInputs('radio', 'type');
        var selected_type;
        types.each(function(item) {
            if (item.checked) {
                selected_type = item.value;
            }
        });

        if ($('all').checked) {
            link = 'http://www.remicom.com/comm.asp';
        } else if ($('comm').checked) {
            link = 'http://www.remicom.com/search_fonds2.asp';
        } else if ($('immov').checked) {
            link = 'http://www.remicom.com/search2.asp';
        } else if ($('immol').checked) {
            link = 'http://www.remicom.com/searchloc.asp';
        } else if ($('ent').checked) {
            link = 'http://www.remicom.com/search_fonds2.asp';
            selected_type = 6;
        }


        if (selected_type) {
            link += url_param_sep + "type=" + selected_type;
            url_param_sep = '&';
        }

        var cantons = this.form.getInputs('checkbox', 'canton');
        var canton_str = "";
        cantons.each(function(item) {
            if (item.checked) {
                canton_str += item.value + ",";
            }
        });

        if (canton_str.length > 0) {
            canton_str = canton_str.substring(0, (canton_str.length - 1));
            link += (url_param_sep + "canton=" + canton_str);
        }

        document.location.href = link;
    },

    initTypeRadio: function(item) {
        Event.observe(item, 'click', this.onTypeRadioClicked.bindAsEventListener(this));
    },

    onTypeRadioClicked: function(e) {
        var item = e.element();
        this.updateSubTypesContent(item);
        this.checkAllSubtypes();
        
        this.initButtonChange();

        var type = item.next('label').innerHTML;

        this.updateBoxTitle(this.types, type);

        this.closeTypes();
        this.openSubTypes();
    },

    initButtonChange: function() {
        var button = this.types.down('h3').down('.search-type-change');
        button.observe('click', this.onButtonChangeClicked.bindAsEventListener(this));
        button.show();
    },

    onButtonChangeClicked: function(e) {
        var button = e.element();
        var box = button.up('div');
        this.openTypes();

        // Effacement du titre allongé
        box.down('.title').update(this.title_begin);

        // Masquage du bouton [changer]
        button.stopObserving();
        button.hide();

        // Masquage de sous-type
        this.closeSubTypes();
    },

    onButtonCantonsClicked: function(e) {
        this.openCantons();
        e.element().update('[masquer]');
        e.element().stopObserving();
        e.element().observe('click', this.onButtonCantonsCloseClicked.bindAsEventListener(this));
    },
    onButtonCantonsCloseClicked: function(e) {
        this.closeCantons();
        e.element().update('[choisir]');
        e.element().stopObserving();
        e.element().observe('click', this.onButtonCantonsClicked.bindAsEventListener(this));
    },


    updateBoxTitle: function(box, title) {
        var title_begin = box.down('.title').innerHTML;
        box.down('.title').update(title_begin + ' : ' + title);
        this.title_begin = title_begin;
    },

    updateSubTypesContent: function(item) {
        if (!this.detail_showed) {
            $('detail-intro').hide();
        } else {
            $('detail-' + this.detail_showed).hide();
        }
        $('detail-' + item.id).show();
        this.detail_showed = item.id;
    },

    checkAllSubtypes: function() {
        var first_checkbox = $('detail-' + this.detail_showed).down('input');
        if (first_checkbox) {
            first_checkbox.checked = true;
        }
    },


    /** ========== Utility methods ========================================= **/

    openTypes: function() {
        Effect.SlideDown(this.types.down('.box-content'), {
            duration: 0.5
        });
    },

    closeTypes: function() {
        Effect.SlideUp(this.types.down('.box-content'), {
            duration: 0.5
        });
    },

    openSubTypes: function() {
        Effect.SlideDown(this.stypes.down('.box-content'), {
            duration: 0.5
        });
    },

    closeSubTypes: function() {
        Effect.SlideUp(this.stypes.down('.box-content'), {
            duration: 0.5
        });
    },

    openCantons: function() {
        Effect.SlideDown(this.cantons.down('.box-content'), {
            duration: 0.5
        });
    },

    closeCantons: function() {
        Effect.SlideUp(this.cantons.down('.box-content'), {
            duration: 0.5
        });
    }

});

SearchForm.init = function() {
    mySearchForm = new SearchForm();
}