﻿$(function() {
    quickSearch = new QuickSearch();
    quickSearch.init();
});

QuickSearch = function() { }

QuickSearch.prototype.url = '/ProductSearch.ashx';

QuickSearch.prototype.catId = 0;
QuickSearch.prototype.parentId = 0;
QuickSearch.prototype.categoryList = [];

QuickSearch.prototype.ddlCats = null;
QuickSearch.prototype.ddlMakes = null;
QuickSearch.prototype.ddlModels = null;
QuickSearch.prototype.ddlYears = null;
QuickSearch.prototype.ddlCarTypes= null;

QuickSearch.prototype.make = '';
QuickSearch.prototype.model = '';
QuickSearch.prototype.year = '';
QuickSearch.prototype.carType = '';

QuickSearch.prototype.products = new Array();

QuickSearch.prototype.init = function() {
    this.initControls();

    this.getCategories();
    this.getMakes();
};

QuickSearch.prototype.initControls = function() {
    var s = this;

    this.ddlCats = $('select[id$=ddlProducts]');
    this.ddlMakes = $('select[id$=ddlMakes]');
    this.ddlModels = $('select[id$=ddlModels]');
    this.ddlYears = $('select[id$=ddlYears]');
    this.ddlCarTypes = $('select[id$=ddlCarTypes]');

    this.disableElement(this.ddlModels, true, false);
    this.disableElement(this.ddlYears, true, false);
    this.disableElement(this.ddlCarTypes, true, false);

    this.ddlCats.change(function() {
        s.catId = $(this).val();

        if ($(this).val() == '0') {
            s.parentId = 0;
        } else {
            for (var i = 0; i < s.categoryList.length; i++) {
                if (s.categoryList[i]['catId'] == s.catId) {
                    s.parentId = s.categoryList[i]['parentId'];
                }
            }
        }

        s.getMakes();
        s.getModels();
        s.getYears();
        s.getCarTypes();
    });

    this.ddlMakes.change(function() {
        s.make = $(this).val();

        if (s.make == '0') {
            s.model = '0';
            s.year = '0';
            s.carType = '0';
        }

        s.disableElement(s.ddlModels, true, true);
        s.disableElement(s.ddlYears, true, true);
        s.disableElement(s.ddlCarTypes, true, true);

        //s.getCategories();
        s.getModels();
    });

    this.ddlModels.change(function() {
        s.model = $(this).val();

        s.disableElement(s.ddlYears, true, true);
        s.disableElement(s.ddlCarTypes, true, true);

        //s.getCategories();
        s.getYears();
    });

    this.ddlYears.change(function() {
        s.year = $(this).val();

        s.disableElement(s.ddlCarTypes, true, true);

        //s.getCategories();
        s.getCarTypes();
    });

    this.ddlCarTypes.change(function() {
        //s.getCategories();
        s.carType = $(this).val();
    });

    $('input[id$=btnQuickSearch]').click(function() {

        if (s.ddlCats.val() == '0') {
            $('#errMsg').slideDown(500, function() {
                $(this)
                    .delay(1000)
                    .slideUp(500);
            });
        } else {

            var url;

            for (var i = 0; i < s.categoryList.length; i++) {
                if (s.categoryList[i]['catId'] == s.catId)
                    url = s.categoryList[i]['url'];
            }

            if (s.make == '') s.make = '0';
            if (s.model == '') s.model = '0';
            if (s.year == '') s.year = '0';
            if (s.carType == '') s.carType = '0';

            window.location = url + '?make=' + $.URLEncode(s.make) + '&model=' + $.URLEncode(s.model) + '&year=' + $.URLEncode(s.year) + '&carType=' + $.URLEncode(s.carType);

            //window.location = url + '?make=' + s.encode(s.make) + '&model=' + s.encode(s.model) + '&year=' + s.encode(s.year) + '&carType=' + s.encode(s.carType);
        }

        return false;
    });
};

/*QuickSearch.prototype.encode = function(value) {
    return $.URLEncode(value.replace('&', '-and-').replace('/', '-or-').replace(' ', '_'));       
};*/

QuickSearch.prototype.getCategories = function() {
    var s = this;

    // Only get categories if the product hasn't been selected
    // because searching for vehicles may return categories
    // that are not included in the product list

    //if (s.ddlCats.val() < 1) {

    if (s.make == null || s.make == '0') s.make = '';
    if (s.model == null || s.model == '0') s.model = '';
    if (s.year == null || s.year == '0') s.year = '';
    if (s.carType == null || s.carType == '0') s.carType = '';

    $.ajax({
        url: s.url,
        cache: false,
        data: {
            method: 'getCategories',
            make: s.make,
            model: s.model,
            year: s.year,
            carType: s.carType
        },
        success: function(data) {
            var cats = eval('(' + data + ')');

            var selectedValue = s.ddlCats.val();

            s.ddlCats
                .find('option').remove().end()
                .append('<option value="0">Select a Product...</option>');

            for (var i = 0; i < cats.length; i++) {

                var indent = s.indent(cats[i].level);

                var option = '<option value="' + cats[i].id + '" ';

                /*if (cats[i].disabled == 'disabled') {
                if (cats[i].level == 0)
                option += 'class="disabled-0"';
                else
                option += 'class="disabled"';
                }*/

                if (cats[i].level == 0)
                    option += 'class="level-0"';
                else if (cats[i].level == 1)
                    option += 'class="level-1"';

                option += '>' + indent + cats[i].name + '</option>';

                s.ddlCats.append(option);

                s.categoryList[i] = [];
                s.categoryList[i]['catId'] = cats[i].id;
                s.categoryList[i]['parentId'] = cats[i].parentId;
                s.categoryList[i]['url'] = cats[i].url;

                //http://www.brantmessenger.com/2009/10/15/ie-select-option-disabled-fix-using-jquery/


                $('option.level-0')
                    .css('color', '#f86d07');
                /*.css('font-size', '1.1em')
                .css('font-weight', 'bold')
                .css('margin-top', '10px');*/

                $('option.level-1')
                    .css('color', '#ed8d05');
                    /*.css('margin-top', '4px');*/

                /*.click(function(event) {
                alert($(this).val());
                });*/
            }

            s.ddlCats.val(selectedValue);
        }
    });
    //}
};

QuickSearch.prototype.indent = function(level) {
    var space = '';

    for (var i = 0; i < level; i++)
        space += '&nbsp;&nbsp;&nbsp;';

    return space;
};

QuickSearch.prototype.getMakes = function() {
    var s = this;

    $.ajax({
        url: s.url,
        cache: false,
        data: {
            method: 'getMakes',
            catId: s.parentId
        },
        success: function(data) {
            var makes = eval('(' + data + ')');

            if (makes.length > 0) {

                s.disableElement(s.ddlMakes, false, false);

                var selectedValue = s.ddlMakes.val();

                s.ddlMakes
                .find('option').remove().end()
                .append('<option value="0">Select a Manufacturer...</option>');

                for (var i = 0; i < makes.length; i++)
                    s.ddlMakes.append('<option value="' + makes[i].name + '">' + makes[i].name + '</option>');

                s.ddlMakes.val(selectedValue);
            } else {
                s.disableElement(s.ddlMakes, true, false);
                s.disableElement(s.ddlModels, true, false);
                s.disableElement(s.ddlYears, true, false);
                s.disableElement(s.ddlCarTypes, true, false);
            }
        }
    });
};

QuickSearch.prototype.getModels = function() {
    var s = this;

    $.ajax({
        url: s.url,
        cache: false,
        data: {
            method: 'getModels',
            catId: s.parentId,
            make: s.make
        },
        success: function(data) {
            var models = eval('(' + data + ')');

            if (models.length > 0) {

                var selectedValue = s.ddlModels.val();

                //if (s.ddlModels.val() == '0') {
                s.ddlModels
                    .find('option').remove().end()
                    .append('<option value="0">Select a Model...</option>');

                for (var i = 0; i < models.length; i++)
                    s.ddlModels.append('<option value="' + models[i].name + '">' + models[i].name + '</option>');

                if (s.ddlMakes.val() != '0')
                    s.disableElement(s.ddlModels, false, false);

                s.ddlModels.val(selectedValue);
                //}
            } else {
                s.disableElement(s.ddlModels, true, false);
                s.disableElement(s.ddlYears, true, false);
                s.disableElement(s.ddlCarTypes, true, false);
            }
        }
    });
};

QuickSearch.prototype.getYears = function() {
    var s = this;

    $.ajax({
        url: s.url,
        cache: false,
        data: {
            method: 'getYears',
            catId: s.parentId,
            make: s.make,
            model: s.model
        },
        success: function(data) {
            var years = eval('(' + data + ')');

            if (years.length > 0) {

                var selectedValue = s.ddlYears.val();

                //if (s.ddlYears.val() == '0') {
                s.ddlYears
                    .find('option').remove().end()
                    .append('<option value="0">Select a Year...</option>');

                for (var i = 0; i < years.length; i++)
                    s.ddlYears.append('<option value="' + years[i].name + '">' + years[i].name + '</option>');

                if (s.ddlModels.val() != '0')
                    s.disableElement(s.ddlYears, false, false);

                s.ddlYears.val(selectedValue);
                //}
            } else {
                s.disableElement(s.ddlYears, true, false);
                s.disableElement(s.ddlCarTypes, true, false);
            }
        }
    });
};

QuickSearch.prototype.getCarTypes = function() {
    var s = this;

    $.ajax({
        url: s.url,
        cache: false,
        data: {
            method: 'getCarTypes',
            catId: s.parentId,
            make: s.make,
            model: s.model,
            year: s.year
        },
        success: function(data) {
            var carTypes = eval('(' + data + ')');

            if (carTypes.length > 0) {

                var selectedValue = s.ddlCarTypes.val();
                //if (s.ddlCarTypes.val() == '0') {
                s.ddlCarTypes
                    .find('option').remove().end()
                    .append('<option value="0">Select a Car Type...</option>');

                for (var i = 0; i < carTypes.length; i++)
                    s.ddlCarTypes.append('<option value="' + carTypes[i].name + '">' + carTypes[i].name + '</option>');

                if (s.ddlYears.val() != '0')
                    s.disableElement(s.ddlCarTypes, false, false);

                s.ddlCarTypes.val(selectedValue);
                //}
            } else {
                s.disableElement(s.ddlCarTypes, true, false);
            }
        }
    });
};

QuickSearch.prototype.disableElement = function(element, disabled, resetValue) {
    var color = '#333333';

    if (disabled)
        color = '#cccccc';

    if (resetValue)
        element.val('0');

    element
        .attr('disabled', disabled)
        .css('color', color);
};