$(function() {
    do_vehicle_index();
});


function do_vehicle_index() {

    var selectedOpt = -1;

    var vi_helper = function(field_name) {
        selectedOpt = -1;

        switch ( field_name ) {
            case 'vehicle_style':
                var mode = 'style';
                break;
            case 'vehicle_trim':
                var mode = 'trim';
                break;
            case 'vehicle_model':
                var mode = 'model';
                break;
            case 'vehicle_make':
                var mode = 'make';
                break;
            default:
                var mode = 'year';
        }

        var year = $('#vehicle_year').val();
        var make = $('#vehicle_make').val();
        var model = $('#vehicle_model').val();
        var trim = $('#vehicle_trim').val();
        var style = $('#vehicle_style').val();

        $.ajax({
            timeout: 3000,
            type: "GET",
            url: "/ajax_serv/vehicle_index.php",
            data: "mode="+mode+
                  "&year="+year+
                  "&make="+make+
                  "&model="+model+
                  "&trim="+trim+
                  "&style="+style,

            success: function(json_data) {
                var jsd = eval('('+json_data+')');

                $('#viHint').remove();

                if ( jsd.length == 0 )
                    return;

                $('body').append("<div id=\"viHint\"></div>");

                $('#viHint').css({
                    top: ( $('#'+field_name).offset().top + $('#'+field_name).height() + 6 ) + 'px',
                    left: ( $('#'+field_name).offset().left ) + 'px'
                });

                var i=0;
                for ( vl in jsd ) {
                    $('#viHint').append("<div id=\"hintOpt_" + i + "\">" + jsd[vl] + "</div>");
                    i++;
                }

                $('#viHint div').mousedown(function() {
                    $('#'+field_name).val( $(this).text() );
                });

            }
        });
    }

    $('#vehicle_year, #vehicle_make, #vehicle_model, #vehicle_trim, #vehicle_style').blur(function() {
        setTimeout( function() {
            $('#viHint').remove();
        }, 300);
    }).keyup(function(e) {
        if ( e.keyCode == 16 )
            return;

        var opts = new Array;

        $('#viHint div').each(function() {
            opts.push($(this).text());
        }).removeClass('selected');

        if ( e.keyCode == 40 ) {
            selectedOpt++;

            if ( typeof(opts[selectedOpt]) == 'undefined' )
                selectedOpt--;

            $('#hintOpt_'+selectedOpt).addClass('selected');
            $(this).val( opts[selectedOpt] );
            return;
        }

        if ( e.keyCode == 38 ) {
            selectedOpt--;

            if ( typeof(opts[selectedOpt]) == 'undefined' )
                selectedOpt = 0;

            $('#hintOpt_'+selectedOpt).addClass('selected');
            $(this).val( opts[selectedOpt] );
            return;
        }

        vi_helper( $(this).attr('id') );
    }).focus(function() {
        var dis = $(this).attr('id');
        
        setTimeout( function() {
            vi_helper( dis );
        }, 100);
    });

}