$j(function() {
    var searchResultType = $j('#searchResultType');
    var key = $j('#key');
    var longitude = $j('#longitude');
    var latitude = $j('#latitude');
    var variant = ($j('#testVersion').val());

    searchResultType.cookieFill();
    key.cookieFill();
    longitude.cookieFill();
    latitude.cookieFill();

    if (variant == 'AC') {
        // Test A - auto-complete enabled, drop-down menus disabled          
        $j("#ftSearchString").attr("id", "ftSearchString_ac"),
        $j("#offers_header").css("display", "none"),
        $j("#ftSearchString_ac").css("font-size", "14px"),
        $j("#ftSearchString_ac").css("height", "20px"),
        $j("#topBreaks").css("margin-top", "-2px"),
        $j("#ftLocationsWrap").css("margin-bottom", "5px"),
        $j("#ftTravelDetailsWrap").css("margin-bottom", "5px"),
        $j("#ftAdvancedOptions").css("padding-top", "5px"),
        $j("#topBreaks ul li").css("line-height", "22px"),
        $j("#topBreaks img").css("top", "20px"),
        $j("#ftLocations").css("display", "none");
        $j("#searchFormParams").append('<input type="hidden" name="ftLocation" id="ftLocation" value="" />');
        $j("#searchFormParams").append('<input type="hidden" name="locationCode" id="locationCode" value="" />');
        $j("#searchFormParams").append('<input type="hidden" name="countryCode" id="ftRootLoc" value="" />');
        $j("#searchFormParams").append('<input type="hidden" name="regionCode" id="ftRegion" value="" />');

        var locationCode = $j('#locationCode');
        locationCode.cookieFill();
    }
    else {
        // Test B - auto-complete disabled, drop-down menus enabled            
        $j("#ftSearchString").attr("id", "ftSearchString"),
        $j("#ftSearchString").css("font-size", "11px"),
        $j("#offers_header").css("display", "block"),
        $j("#ftLocations").css("display", "block");
    }

    $j("#ftSearchString_ac").autocomplete('/Search/AutoSuggest',
    {
        dataType: 'json',
        parse: function(data) {
            var rows = new Array();
            var previousType = 0;

            for (var i = 0; i < data.length; i++) {
                if (data[i].Type != previousType) {
                    data[i].IsFirst = true;
                }

                rows[i] = { data: data[i], value: data[i], result: data[i].Title };
                previousType = data[i].Type;
            }

            return rows;
        },

        formatItem: function(row, i, max, value, term, header) {
            return '<div class="ac_heading_' + row.Category + '_' + row.IsFirst + '"></div>' + '<div class="title">' + row.Title
                + '</div>' + '<div class="subtitle">' + row.Subtitle + '</div>';
        }
    });

    var autoCompleteInput = $j('input#ftSearchString_ac');

    autoCompleteInput.result(function(event, data, formatted) {
        if (data) {
            searchResultType.val(data.Category);
            key.val((data.Id != null) ? data.Id : "");
            locationCode.val((data.Id != null) ? data.Id : "");
            longitude.val((data.Longitude != null) ? data.Longitude : "");
            latitude.val((data.Latitude != null) ? data.Latitude : "");
        }
        else {
            searchResultType.val('');
            key.val('');
            locationCode.val('');
            longitude.val('');
            latitude.val('');
        }

        searchResultType.cookify();
        key.cookify();
        locationCode.cookify();
        longitude.cookify();
        latitude.cookify();
    });

    autoCompleteInput.blur(function() {
        autoCompleteInput.search();
    });

    autoCompleteInput.keypress(function() {
        autoCompleteInput.search();
    });

});

// Settings for front-end - pls look into 'autocomplete.js' file for reference before you modify these
$j.Autocompleter.defaults = {
    inputClass: "ac_input",
    resultsClass: "ac_results",
    resultsClassList: "ac_results_list",
    loadingClass: "ac_loading",
    lineSeparator: " ",
    inputSeparator: "",
    minChars: 3,
    delay: 400,
    matchCase: false,
    matchSubset: false,
    matchContains: true,
    selectOnly: true,
    cacheLength: 400,
    max: 10,
    mustMatch: false,
    extraParams: {},
    selectFirst: false,
    // If you need to auto-fill the search field along with suggested results
    autoFill: false,
    width: 390,
    //multiple: false,
    //multipleSeparator: "\\n",
    highlight: function(value, term) {
        return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\ \(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span class='highlite'>$1</span>");
    },
    scroll: false,
    scrollHeight: 180
};