// convenience function to create a new instance of the VehicleSelectBoxes class
function fillSelectBoxes(makeBoxId, modelBoxId) {
    var v = new VehicleSelectBoxes(makeBoxId, modelBoxId);
}

///
/// This class uses the two select boxes with the given
/// ids for vehicle selection.
///
function VehicleSelectBoxes(makeBoxId, modelBoxId) {
    this.makeBox = document.getElementById(makeBoxId);
    this.modelBox = document.getElementById(modelBoxId);
    
    // post-constructor
    this.init = function() {  
        this.clearBoxes();
        this.addEventHandlers();
        this.populateMake();
    }

    // adds items to select to the select box
    this.addOption = function(selectBox, name, value, isSelectedByDefault) {
        var sld = false;
        if (typeof isSelectedByDefault != 'undefined') {
            sld = isSelectedByDefault;
        }
        var option = new Option(name, value, sld, false);
        selectBox.options[selectBox.length] = option;
    }

    // sets the boxes to an "empty" state
    this.clearBoxes = function() {
        this.makeBox.options.length = 0;
        this.modelBox.options.length = 0;
        this.addOption(this.makeBox, 'Select a Make', '');
        this.addOption(this.modelBox, 'Select a Model', '');
    }

    // fill the make box
    this.populateMake = function() {
        var self = this; // handle scoping issues #1
        function handleResults(self) {
            return function(results) { // handle the scoping issues #2
                for (var i = 0; i < results.length; i++) {
                    self.addOption(self.makeBox, results[i].Value, results[i].Key);
                }
            };
        }
        new WebRequest().callWebMethod('GetActiveMakeList', '', handleResults(self));
    }

    // add event handlers to the boxes here
    this.addEventHandlers = function() {
        var self = this;
        function handleMakeOnChange(self) {
            return function() {
            self.populateModel(self.makeBox.value);
                
                // assign the name of the make to the makeBox hidden field
                // so that it will also be submitted instead of just numeric value.
                var hiddenMake = document.getElementById('make');
                if (!hiddenMake) {
                    hiddenMake = document.createElement("input");
                    hiddenMake.setAttribute("type", "hidden");
                    hiddenMake.setAttribute("name", "make");
                    hiddenMake.setAttribute("id", "make");
                    self.makeBox.parentNode.insertBefore(hiddenMake, self.makeBox);
                }
                hiddenMake.value = self.makeBox.options[self.makeBox.selectedIndex].text;
            };
        }
        // fill modelBox with Model data using selected id from make
        this.makeBox.onchange = handleMakeOnChange(self);
    }

    // get the form that this element belongs to
    this.getForm = function(element) {
        var currentNode = element;
        while (currentNode.parentNode) {
            if (currentNode.NodeName.toLowerCase() == 'form') {
                return currentNode;
            }
        }
        return false;
    }

    this.init();
}

VehicleSelectBoxes.prototype.populateModel = function(selectedId) {
    var self = this;
    function handleResults(self) {
        return function(results) {
            self.modelBox.options.length = 0;
            for (var i = 0; i < results.length; i++) {
                self.addOption(self.modelBox, results[i], results[i]);
            }
        };
    }
    new WebRequest().callWebMethod('GetActiveModelListForDivisionId', 'divisionId=' + selectedId, handleResults(self));
}