(function($) {

    var container, version, makes, models, topLabels, modArray, modelLbl;
    var sett = {
        containerSel: '.extended-make-model',
        labelsSel: '#topLabels',
        makesSel: '#makes',
        modelsSel: '#models',
        versionSel: '#version',
        infoTip: {
            tipSel: 'versionToolTip',
            tipHtml: typeof _navdata_versioninfo != 'undefined' ? _navdata_versioninfo : 'Tool tip for version',
            top: 5,
            left: 5
        }
    };

    // on page ready event handler
    $(function() {
        init();
        $.each(makes, function() {
            $(this).attr('selectedIndex') > 0 ? updateModels($(this)) : '';
        });
        refreshView();
        if (sett.infoTip && typeof version.find('a') != 'undefined') {
            setInfoTip(version.find('a'), sett.infoTip);
        }
        version.find('a').hover();
        toggleItem(version.find('input'));
        toggleItem(version);
    })

    var init = function() {
        modArray = arrModels;
        container = $(sett.containerSel);
        topLabels = container.find(sett.labelsSel + ' span');
        makes = container.find(sett.makesSel + ' select').each(function(i, sel) {
            $(sel).attr('val', i).bind('change', onMakeChange);
        });
        models = container.find(sett.modelsSel + ' select').each(function(i, sel) {
            $(sel).attr('val', i).bind('change', onModelChange);
        });
        modelLbl = container.find(sett.modelsSel).find('span');
        version = container.find(sett.versionSel);
    };

    var onMakeChange = function(e) {
        var makeSel = $(e.target);
        if (makeSel.attr('selectedIndex') > 0) {
            updateModels(makeSel);
        }
        else {
            var modelSel = models[makeSel.attr('val')].options[0].selected = 'true';
        }
        refreshView();
    };

    var onModelChange = function(e) {
        refreshView();
    };

    var refreshView = function() {
        var enabledModels = {};
        // makes
        $.each(makes, function(i, makeSel) {
            if ($(makeSel).attr('selectedIndex') > 0) {
                toggleItem($(makeSel));
                toggleItem($(models[i]));
                enabledModels[i] = '1';
                toggleItem($(topLabels[i]));
                if (i < 2) {
                    toggleItem($(makes[i + 1]));
                    toggleItem($(topLabels[i + 1]));
                }
            }
            else {
                if (i < 2) {
                    toggleItem($(makes[i + 1]), true);
                    toggleItem($(topLabels[i + 1]), true)
                }
            }
        });
        // models & version
        toggleItem(modelLbl, true);
        $.each(models, function(i, modelSel) {
            if (!enabledModels[i])
                toggleItem($(modelSel), true);
            else
                toggleItem(modelLbl);
        });
    };

    var updateModels = function(makeSel) {
        if (!modArray || modArray.length == 0) return;
        // update
        var selMakeIndex = makeSel.attr('selectedIndex');
        var modelSel = models[makeSel.attr('val')];
        if (modArray[selMakeIndex]) {
            var selModelVal = $(modelSel).val();
            // clean all but first
            var firstOpt = modelSel.options[0];
            modelSel.options.length = 0;
            modelSel.options[0] = firstOpt;

            // apend options
            var modList = modArray[selMakeIndex].split(';');
            $.each(modList, function(i, value) {
                modelSel.options[i + 1] = new Option(value.split(',')[1], value.split(',')[0]);
                if (value.split(',')[0] == selModelVal) {
                    modelSel.options[i + 1].selected = 'true';
                }
            })
        }
    };

    var toggleItem = function(item, disable) {
        if (typeof item != 'undefined' && disable) {
            item.attr('disabled', 'disabled');
            item.css('color', '#AEAEAE')
        }
        else {
            item.attr('disabled', '')
            item.css('color', '#000066')
        }
    };

    // default tooltip
    var setInfoTip = function(info, options) {
        if (typeof info == 'undefined' || typeof options.tipSel == 'undefined') return;
        var tipSel = options.tipSel;
        var tipHtml = options.tipHtml ? options.tipHtml : '';
        if ($('#' + tipSel).size() == 0) {
            container.append('<div id="' + tipSel + '" class="toolTip"><div class="toolTipTitle">INFO</div><div id="toolTipContent" class="toolTipContent">' + tipHtml + '</div></div>');
        }
        else {
            $('#' + tipSel + ' .toolTipContent').html(tipHtml);
        }
        $.each(info, function() {
            $(this).tooltip({
                position: ['bottom', 'right'],
                offset: [options.top, options.left],
                effect: 'fade',
                fadeOutSpeed: 100,
                predelay: 400,
                tip: '#' + tipSel
            });
        })
    }

})(jQuery);