function createVehicleWidget(params, name) {
    var widget = createWidget(params, name)

    widget.useSelectize = params.useSelectize
    widget.htmlSelectors = {
        container: '#vehicle-search',
        type: '#vehicle-type',
        brand: '#vehicle-brand',
        year: '#vehicle-year',
        model: '#vehicle-model'
    }

    // Methods
    widget.onInit = function () {
        if (this.useSelectize === true) {
            // Initialize select lists (selectize)                                                      onDropdownClose = Temp fix to remove "selected" class (see issue: https://github.com/selectize/selectize.js/issues/1191)
            $(this.htmlSelectors.type).selectize({ placeholder: '- Select Type -', selectOnTab: true, onDropdownClose: function (dd) { $(dd).find('.selected:not(.active)').removeClass('selected') } })
            $(this.htmlSelectors.brand).selectize({ placeholder: '- Select Brand -', selectOnTab: true, onDropdownClose: function (dd) { $(dd).find('.selected:not(.active)').removeClass('selected') } })
            $(this.htmlSelectors.year).selectize({ placeholder: '- Select Year -', selectOnTab: true, onDropdownClose: function (dd) { $(dd).find('.selected:not(.active)').removeClass('selected') } })
            $(this.htmlSelectors.model).selectize({ placeholder: '- Select Model -', selectOnTab: true, onDropdownClose: function (dd) { $(dd).find('.selected:not(.active)').removeClass('selected') } })
            document.querySelector(this.htmlSelectors.type).selectize.on('change', this.onTypeSelected.bind(this))
            document.querySelector(this.htmlSelectors.brand).selectize.on('change', this.onBrandSelected.bind(this))
            document.querySelector(this.htmlSelectors.year).selectize.on('change', this.onYearSelected.bind(this))
            document.querySelector(this.htmlSelectors.model).selectize.on('change', this.onModelSelected.bind(this))
        } else {
            document.querySelector(this.htmlSelectors.type).onchange = this.onTypeSelected.bind(this)
            document.querySelector(this.htmlSelectors.brand).onchange = this.onBrandSelected.bind(this)
            document.querySelector(this.htmlSelectors.year).onchange = this.onYearSelected.bind(this)
            document.querySelector(this.htmlSelectors.model).onchange = this.onModelSelected.bind(this)
        }

        // Update with data
        this.update(this.data, true)
    }
    widget.onUpdate = function (data, isInit) {
        if (data == null) {
            data = {
                Page: 1,
                Engine: {
                    SearchType: 2,
                    Type: null,
                    TypeName: null,
                    Brand: null,
                    BrandName: null,
                    Year: null,
                    Model: null,
                }
            }
        }
        this.data = data
        var nbItemsLoaded = 0
        var htmlType = document.querySelector(this.htmlSelectors.type)
        var htmlBrand = document.querySelector(this.htmlSelectors.brand)
        var htmlYear = document.querySelector(this.htmlSelectors.year)
        var htmlModel = document.querySelector(this.htmlSelectors.model)

        // Load types
        if (isInit === true) {
            this.setLoading(true)
            this.loadingMethods.loadTypes().done(function (data) {
                this.refreshList(htmlType, data, this.data.Type)
                this.onItemLoaded(++nbItemsLoaded)
            })
        } else {
            this.selectValue(htmlType, this.data.Engine.Type, true)
            //htmlType.selectize.setValue(this.data.Type, true)
            this.onItemLoaded(++nbItemsLoaded)
        }

        if (this.data.Engine.Type !== null) {
            // Load brands
            this.loadingMethods.loadBrands(this.data.Engine.Type).done(function (data) {
                this.refreshList(htmlBrand, data, this.data.Engine.Brand)
                this.onItemLoaded(++nbItemsLoaded)
            })
        } else {
            // Clear brands
            this.refreshList(htmlBrand, null, null)
            this.refreshList(htmlYear, null, null)
            this.refreshList(htmlModel, null, null)
            return
        }

        if (this.data.Engine.Brand !== null) {
            // Load years
            this.loadingMethods.loadYears(this.data.Engine.Type, this.data.Engine.Brand).done(function (data) {

                this.refreshList(htmlYear, data, this.data.Engine.Year)
                this.onItemLoaded(++nbItemsLoaded)
            })
        } else {
            // Clear years
            this.refreshList(htmlYear, null, null)
            this.refreshList(htmlModel, null, null)
            return
        }

        if (this.data.Engine.year !== null) {
            // Load models
            this.loadingMethods.loadModels(this.data.Engine.Type, this.data.Engine.Brand, this.data.Engine.Year).done(function (data) {
                this.refreshList(htmlModel, data, this.data.Engine.Model)
                this.onItemLoaded(++nbItemsLoaded)
            })
        } else {
            // Clear model
            this.refreshList(htmlModel, null, null)
            return
        }
    }
    widget.onClear = function () {
        var htmlType = document.querySelector(this.htmlSelectors.type)
        var htmlBrand = document.querySelector(this.htmlSelectors.brand)
        var htmlYear = document.querySelector(this.htmlSelectors.year)
        var htmlModel = document.querySelector(this.htmlSelectors.model)
        if (this.useSelectize === true) {
            htmlType.selectize.clear(true)
        } else {
            htmlType.selectedIndex = 0
        }
        this.refreshList(htmlBrand, null, null)
        this.refreshList(htmlYear, null, null)
        this.refreshList(htmlModel, null, null)
    }

    widget.onTypeSelected = function (value) {
        value = this.useSelectize === true ? value : value.target.value
        this.data.Engine.Type = value
        this.data.Engine.TypeName = this.useSelectize === true ?
            document.querySelector(this.htmlSelectors.type).innerText :
            document.querySelector(this.htmlSelectors.type).querySelector('[value="' + value + '"]').innerText

        if (value === '')
            return

        this.loadingMethods.loadBrands(value).done(function (data) {
            var htmlBrand = document.querySelector(this.htmlSelectors.brand)
            var htmlYear = document.querySelector(this.htmlSelectors.year)
            var htmlModel = document.querySelector(this.htmlSelectors.model)
            this.refreshList(htmlBrand, data, null)
            this.refreshList(htmlYear, null, null)
            this.refreshList(htmlModel, null, null)
            this.openList(htmlBrand)
        })
    }
    widget.onBrandSelected = function (value) {
        value = this.useSelectize === true ? value : value.target.value
        this.data.Engine.Brand = value
        this.data.Engine.BrandName = this.useSelectize === true ?
            document.querySelector(this.htmlSelectors.brand).innerText :
            document.querySelector(this.htmlSelectors.brand).querySelector('[value="' + value + '"]').innerText

        if (value === '')
            return

        this.loadingMethods.loadYears(this.data.Engine.Type, value).done(function (data) {
            var htmlYear = document.querySelector(this.htmlSelectors.year)
            var htmlModel = document.querySelector(this.htmlSelectors.model)
            this.refreshList(htmlYear, data, null)
            this.refreshList(htmlModel, null, null)
            this.openList(htmlYear)
        })
    }
    widget.onYearSelected = function (value) {
        value = this.useSelectize === true ? value : value.target.value
        this.data.Engine.Year = value

        if (value === '')
            return

        this.loadingMethods.loadModels(this.data.Engine.Type, this.data.Engine.Brand, value).done(function (data) {
            var htmlModel = document.querySelector(this.htmlSelectors.model)
            this.refreshList(htmlModel, data, null)
            this.openList(htmlModel)
        })
    }
    widget.onModelSelected = function (value) {
        value = this.useSelectize === true ? value : value.target.value
        this.data.Engine.Model = value

        if (value === '' || this.loaded === false)
            return

        searchGTM.push(searchGTM.events.Vehicle, {
            vehicleType: this.data.Engine.TypeName,
            vehicleBrand: this.data.Engine.BrandName,
            vehicleYear: this.data.Engine.Year,
            vehicleModel: this.data.Engine.Model
        })

        this.submit()
    }

    widget.openList = function (element) {
        if (this.useSelectize === true) {
            element.selectize.open()
        } else {
            element.focus()
        }
    }
    widget.refreshList = function (element, data, preSelection) {
        if (this.useSelectize === true) {
            this.refreshSelectize(element, data, preSelection)
        } else {
            this.refreshSelect(element, data, preSelection)
        }
    }
    widget.selectValue = function (element, value, silent) {
        if (this.useSelectize === true) {
            element.selectize.setValue(this.data.Engine.Type, silent)
        } else {
            element.value = value
        }
    }
    widget.refreshSelectize = function (element, data, preSelection) {
        var selectize = element.selectize
        selectize.clear(true)
        selectize.clearOptions()

        if (data !== null) {
            for (var i = 0; i < data.length; i++) {
                selectize.addOption({ value: data[i].Id, text: data[i].Value })
            }
        }

        selectize.setValue(preSelection === null ? '' : preSelection, true)
        selectize.refreshOptions(false)
    }
    widget.refreshSelect = function (element, data, preSelection) {
        var options = '<option disabled selected>- Select -</option>'
        if (data !== null) {
            for (var i = 0; i < data.length; i++) {
                var option = data[i]
                options += '<option value="' + option.Id + '">' + option.Value + '</option>'
            }
        }
        element.innerHTML = options

        if (preSelection !== null) {
            element.value = preSelection
        }
    }
    widget.onItemLoaded = function (nbItemsLoaded) {
        var count =
                this.data.Engine.Type === null ? 1 :
                this.data.Engine.Brand === null ? 2 :
                this.data.Engine.Year === null ? 3 : 4

        if (nbItemsLoaded == count) {
            this.setLoading(false)
            this.onLoaded(this)
        }
    }
    return widget
}