if(typeof Category=='undefined') {
    var Category = {};
}

Category.Navigate = Class.create();
Category.Navigate.prototype = {
    initialize: function(config){
        this.navigationUrl = config.url;
        this.cat = config.cat;
        this.settings = $$('.super-attribute-select');
        this.navigationButton = $('apply-button');
        this.map = new Array();

        this.settings.each(function(element){
            Event.observe(element, 'change', this.nav.bind(this));
        }.bind(this));

        var childSettings = [];
        for(var i=this.settings.length-1;i>=0;i--){
            var prevSetting = this.settings[i-1] ? this.settings[i-1] : false;
            var nextSetting = this.settings[i+1] ? this.settings[i+1] : false;
            if(i!=0){
                this.settings[i].disabled=true;
            }
            $(this.settings[i]).childSettings = childSettings.clone();
            $(this.settings[i]).prevSetting   = prevSetting;
            $(this.settings[i]).nextSetting   = nextSetting;
            childSettings.push(this.settings[i]);
        }
    },

    getParameters: function(element){
        var elements = new Array()
        for(el = element; el = el.prevSetting;) {
            elements[elements.length] = el;
        }
        return Form.serializeElements(elements, true);
    },

    nav: function(event){
        var element = Event.element(event);
        this.navElement(element);
    },

    getOptions: function(element) {
        params = this.getParameters(element);
        params.cat = this.cat;
        $('loading-mask').show();
        new Ajax.Request(this.navigationUrl, {
            parameters: params,
            onSuccess: function(transport) {
                try {
                    if (transport.responseText.isJSON()) {
                        var response = transport.responseText.evalJSON()
                        this.fillSelect(element, response);
                        $('loading-mask').hide();
                    }
                } catch (e) {
                    $('loading-mask').hide();
                }
            }.bind(this)
        });
        return;
    },

    fillSelect: function(element, response) {
        this.clearSelect(element);
        this.map = [];
        index = 1;
        for(i in response) {
            element.options[index] = new Option(response[i].label, response[i].value);
            if (response[i].url) {
                this.map[index] = response[i].url;
            }
            index++;
        }
    },

    navElement: function(element) {
        if(element.nextSetting){
            element.nextSetting.disabled = false;
            this.getOptions(element.nextSetting);
            this.resetChildren(element.nextSetting);
            this.navigationButton.disabled = true;
        } else {
            this.navigationButton.disabled = false;
            var thatUrl = this.map[element.selectedIndex];
            this.navigationButton.observe('click', function(event) { setLocation(thatUrl); });
        }
    },

    resetChildren : function(element){
        if(element.childSettings) {
            for(var i=0;i<element.childSettings.length;i++){
                element.childSettings[i].selectedIndex = 0;
                element.childSettings[i].disabled = true;
            }
        }
    },

    clearSelect: function(element){
        for(var i=element.options.length-1;i>0;i--){
            element.remove(i);
        }
    }
}