App.SearchBox = function() {

    /* Private */

    /* Properties */

    var cmp = {};

    var callback = null;
    var watermarks = [
        ['location', 'Town or Postcode...'],
        ['priceFrom', '£0'],
        ['priceTo', '£Any'],
        ['mileageFrom', '0'],
        ['mileageTo', 'Any'],
        ['ageFrom', '0'],
        ['ageTo', 'Any'],
        ['engineSizeFrom', '0'],
        ['engineSizeTo', 'Any'],
        ['mpgFrom', '0'],
        ['mpgTo', 'Any'],
        ['colour', 'Colour...'],
        ['keywords', 'Keywords...']
    ];





    /* Methods */

    var init = function() {

        /* Constructor */

        // Close up the unused panels in the search
        $('.carSearch .collapsible .moduleItemContent').hide();

        TVI.event('.carSearch .collapsible .moduleItemTitleBar', 'click', function() {

            var moduleElement = $(this).parents('.moduleItem');
            var contentElement = moduleElement.find('.moduleItemContent');

            if (!moduleElement.hasClass('open')) {

                openPanel($(this));
            }
            else {

                closePanel($(this));
            }

        });

        // Hover class for plus buttons in search
        $('.carSearch .collapsible .moduleItemTitleBar').mouseenter(function() {
            $(this).parents('.moduleItem').find('.buttonThin').addClass('buttonThinHover');
        });
        $('.carSearch .collapsible .moduleItemTitleBar').mouseleave(function() {
            $(this).parents('.moduleItem').find('.buttonThin').removeClass('buttonThinHover');
        });


        // More option button on search
        TVI.event('.carSearch .moreOptions', 'click', function() {

            $(this).hide();

            $('.carSearch .advancedOptions').show();

        });


        initSearchForm();

    };





    var initSearchForm = function() {

        /* initialises the search form */

        cmp.findCarForm = new TVI.Form({

            ID: 'findCarForm',
            data: {
                search: 1
            },
            buttons: [{

                selector: '.resultsButtons .hidden',
                enter: true,
                handler: submit

//            },{

//                selector: '.resultsButtons .list',
//                handler: show

//            },{

//                selector: '.resultsButtons .map',
//                handler: show

            }]

        });


        //handle control change events
        $('#findCarForm-make-control').change(makeChanged);
        $('#findCarForm-distance-control').change(distanceChanged);
        $('#findCarForm-range-control, #findCarForm-transmissionType-control, #findCarForm-bodyStyle-control, #findCarForm-numberOfDoors-control').change(search);


        //load search data
        $('#findCarForm-make .TVI-customDDL-button-text').text('Loading...');
        $('#findCarForm-range .TVI-customDDL-button-text').text('Loading...');


        //set watermarks
        $('#findCarForm INPUT').focus(function() {

            var index = $('#findCarForm INPUT').index(this);

            var el = $('#findCarForm-' + watermarks[index][0] + '-control');
            var value = watermarks[index][1];

            if (el.val() === value) { el.val(''); }

        }).blur(function() {

            var index = $('#findCarForm INPUT').index(this);

            var el = $('#findCarForm-' + watermarks[index][0] + '-control');
            var value = watermarks[index][1];

            if (el.val() === '') { el.val(value); }

        });

        setWatermarks();


        //handle form change event
        TVI.addListener('findCarForm_change', search);


        //handle location popup selection
        TVI.event('.location A', 'click', locationChanged);


        //load current search                
        cmp.findCarForm.load({

            meta: true,
            url: '/Handlers/App.Buying.aspx/getSearch',
            success: function(d) {

                //clear form data if not required
                if (cmp.load !== true) {

                    cmp.findCarForm.clear();

                    setWatermarks();

                    //set make default text
                    $('#findCarForm-make-control OPTION:first').text('Choose a Make...');

                    //update DDL
                    TVI.Components.CustomDDL.update($('#findCarForm-make-control'));
                    TVI.Components.CustomDDL.update($('#findCarForm-range-control'));

                    setSort(d.sort);

                    return;

                }


                setWatermarks();

                //set make default text
                $('#findCarForm-make-control OPTION:first').text('Choose a Make...');

                //update make DDL
                TVI.Components.CustomDDL.update($('#findCarForm-make-control'));


                cmp.currentRange = d.range;

                if (d.make !== '') {

                    cmp.findCarForm.loading = true;

                    $('#findCarForm-make-control').trigger('change');

                    cmp.findCarForm.loading = false;

                }
                else {

                    TVI.Components.CustomDDL.update($('#findCarForm-range-control'));

                }

                TVI.Components.CustomDDL.update($('#findCarForm-distance-control'));
                TVI.Components.CustomDDL.update($('#findCarForm-transmissionType-control'));
                TVI.Components.CustomDDL.update($('#findCarForm-bodyStyle-control'));
                TVI.Components.CustomDDL.update($('#findCarForm-numberOfDoors-control'));

                //save the current location
                cmp.currentLocation = cmp.findCarForm.field('location').val();


                //open panels if searching        
                openPanels(d);


                setSort(d.sort);

            }

        });

    };





    var clearWatermarks = function() {

        /* loop through watermarks clearing value if necessary */

        var watermarkCount = watermarks.length;

        for (var i = 0; i < watermarkCount; i++) {

            var el = $('#findCarForm-' + watermarks[i][0] + '-control');

            if (el.val() === watermarks[i][1]) {

                el.val('');

            }

        }

    };





    var closePanel = function(el) {

        var moduleElement = el.parents('.moduleItem');
        var contentElement = moduleElement.find('.moduleItemContent');

        contentElement.slideUp(200);
        moduleElement.removeClass('open');
        moduleElement.find('.icon16Minus').removeClass('icon16Minus').addClass('icon16Plus');

    };





    var distanceChanged = function() {

        /* Handles distance changed event */

        //check if location exists and do search
        if (cmp.findCarForm.field('location').val() === 'Town or Postcode...') { return; }

        search();

    };





    var locationChanged = function() {

        /* Handles location popup selection */

        var locationID = $(this).find('SPAN').text()

        cmp.currentLocation = $(this).find('LABEL').text()

        //add PA location ID to form data
        cmp.findCarForm.hiddenData = {

            locationID: locationID

        };

        cmp.findCarForm.field('location').val(cmp.currentLocation);

        //allow form to continue
        cmp.findCarForm.loading = false;

        //close popup
        TVI.Popup.close();


        search();

    };





    var makeChanged = function() {

        /* Handle make select list changed */

        var make = cmp.findCarForm.field('make').val();

        cmp.findCarForm.field('range').clear();

        $('#findCarForm-range SELECT').html('<option value="">Loading...</option>');
        $('#findCarForm-range .TVI-customDDL-button-text').text('Loading...');

        TVI.ajax({

            url: '/Handlers/App.Buying.aspx/getRange',
            data: {
                make: make
            },
            success: function(d) {

                updateRange(d);

            }

        });

        search();

    };





    var openPanel = function(el) {

        var moduleElement = el.parents('.moduleItem');
        var contentElement = moduleElement.find('.moduleItemContent');

        contentElement.slideDown(200);
        moduleElement.addClass('open');
        moduleElement.find('.icon16Plus').removeClass('icon16Plus').addClass('icon16Minus');
        
        TVI.Components.layout(moduleElement);

    };





    var openPanels = function(d) {

        /* opens the search panels if a value exists in the search parameters */

        //loop through parameter names and check if value exists
        for (var p in d) {

            if (d[p] !== '') {

                openPanel($('#findCarForm-' + p));

            }

        }

    };





    var rangeChanged = function() {

        search();

    };





    var search = function(params) {

        //check search isn't already running
        if (cmp.findCarForm.loading) { return; }


        //clear watermarks
        clearWatermarks();


        //clear location data if changing location
        var location = cmp.findCarForm.field('location').val();

        if (cmp.currentLocation !== location) {

            cmp.findCarForm.hiddenData.locationID = undefined;
            cmp.findCarForm.hiddenData.mapX = undefined;
            cmp.findCarForm.hiddenData.mapY = undefined;

            //            cmp.findCarForm.hiddenData = {};

            cmp.currentLocation = location;

        }


        //check if callback if required and save for later
        if (params && params.success !== undefined) {

            callback = params.success;

        }


        //set loading indicator
        $('.resultsFound').html('<div style="height:30px;">Searching...</div>');


        //submit search 
        cmp.findCarForm.submit({

            url: '/Handlers/App.Buying.aspx/getListingsCount',
            success: function(d) {

                //check if returning a list of locations for the user to choose from
                if (d.locations === true) {

                    //only show top 25 locations
                    var rowcount = d.rows.length;
                    var maxcount = 25;

                    if (rowcount > maxcount) {

                        var newrows = [];

                        for (var i = 0; i < maxcount; i++) {

                            newrows.push(d.rows[i]);

                        }

                        d.rows = newrows;

                    }

                    var locations = '' +

                    '{for l in rows}' +
                        '<div class="location">' +
                            '<a href="#">' +
                                '<span class="data">${l.ID}</span>' +
                                '<label>${l.name}</label>' +
                            '</a>' +
                        '<div>' +
                    '{/for}';

                    locations = locations.process(d);

                    TVI.Popup.show({

                        title: 'Choose Your Location',
                        template: '<div class="content inner">' + locations + '</div>'

                    });


                    //add one-time listener to popup close event to clear location if not selected from list
                    TVI.addListener('TVI.Popup.close', function() {

                        if (cmp.findCarForm.loading === true) {

                            cmp.findCarForm.loading = false;

                            cmp.findCarForm.field('location').clear();

                            cmp.currentLocation = null;

                            search(params);

                        }

                    }, cmp, true);


                    cmp.findCarForm.loading = true;

                    return;

                }

                //check if map coordinates have been returned and save them in the form
                if (d.mapX) {

                    cmp.findCarForm.hiddenData.mapX = d.mapX;
                    cmp.findCarForm.hiddenData.mapY = d.mapY;

                    cmp.findCarForm.hiddenData.locationID = undefined;

                }


                cmp.count = d.count;

                //show result count
                var result = '<div style="height:30px;"><strong>' + cmp.count + '</strong> Result' + (cmp.count !== 1 ? 's' : '') + ' Found</div>';
                
                
                $('.resultsFound').html(result);


                //run callback if required
                if (callback !== null) {

                    callback.call(cmp);

                    callback = null;

                }

            }

        });

        setWatermarks();

    };





    var setSort = function(sort) {

        if (sort === undefined || sort === '') { return; }


        $('#listingSortForm-sort-control').val(sort);

        TVI.Components.CustomDDL.update($('#listingSortForm-sort-control'));

    };





    var setWatermarks = function() {

        /* loops through watermarks adding text to each element */

        var watermarkCount = watermarks.length;

        for (var i = 0; i < watermarkCount; i++) {

            var el = $('#findCarForm-' + watermarks[i][0] + '-control');

            if (el.val() === '') { el.val(watermarks[i][1]); }

        }

    };





//    var show = function() {

//        /* Handles the list/map show buttons */

//        var btn = $(this);

//        var url = '/buy/list.aspx';

//        if (btn.hasClass('map')) {

//            url = '/buy/map.aspx';

//        }

//        window.location.href = url;

//        //        //run quick search and redirect on success
//        //        search({
//        //        
//        //            success: function(){
//        //            
//        //                var data = cmp.findCarForm.val();
//        //                
//        //                if (cmp.currentLocation === ''){
//        //                
//        //                    delete data['distance'];
//        //                
//        //                }
//        //                
//        //                delete data['success'];
//        //                                    
//        //                TVI.redirect(url, data);
//        //            
//        //            }
//        //        
//        //        });        

//    };





    var submit = function() {

        /* Handles enter key event */

        //fire blur event on all input boxes, this will only search once
        $('#findCarForm INPUT').blur();

    };





    var updateRange = function(d) {

        cmp.findCarForm.field('range').meta(d);

        $('#findCarForm-range-control OPTION:first').text('Choose a Model...');

        $('#findCarForm-range-control').val(cmp.currentRange);

        TVI.Components.CustomDDL.update($('#findCarForm-range-control'));

        //        $('#findCarForm-range-control').trigger('change');

        cmp.currentRange = undefined;

    };





    /* Public */

    TVI.apply(cmp, {

        /* Properties */

        load: true

        /* Methods */

    });


    TVI.ready(init);


    return cmp;


} ();