/* ------------------------------------------------------------------------------
 *
 *  # Handsontable - Excel-like tables with extensive funtionality
 *
 *  Demo JS code for handsontable_ac_password.html page
 *
 * ---------------------------------------------------------------------------- */


// Setup module
// ------------------------------

var HotAutocompletePassword = function() {


    //
    // Setup module components
    //

    // HOT autocomplete and password type examples
    var _componentHotAutocompletePassword = function() {
        if (typeof Handsontable == 'undefined') {
            console.warn('Warning - handsontable.min.js is not loaded.');
            return;
        }


        // Autocomplete lazy mode
        // ------------------------------

        // Add sample data
        var hot_date_data = [
            {car: "Mercedes", qty: 100, date: "11/01/2015", color: "yellow", price: 32500},
            {car: "Chevrolet", qty: 100, date: "11/02/2015", color: "red", price: 42400},
            {car: "Dodge", qty: 100, date: "11/03/2015", color: "orange", price: 24900},
            {car: "Hummer", qty: 100, date: "11/04/2015", color: "green", price: 54000},
            {car: "Suzuki", qty: 100, date: "11/05/2015", color: "blue", price: 29300},
            {car: "Toyota", qty: 100, date: "11/06/2015", color: "gray", price: 54500},
            {car: "Nissan", qty: 100, date: "11/07/2015", color: "black", price: 44900},
            {car: "Porsche", qty: 100, date: "11/08/2015", color: "white", price: 35000},
            {car: "Volkswagen", qty: 100, date: "11/09/2015", color: "purple", price: 41000},
            {car: "BMW", qty: 100, date: "11/10/2015", color: "lime", price: 48800},
            {car: "Audi", qty: 100, date: "11/11/2015", color: "olive", price: 21000},
            {car: "Cadillac", qty: 100, date: "11/12/2015", color: "cyan", price: 63900}
        ];

        // Define element
        var hot_ac_lazy = document.getElementById('hot_ac_lazy');

        // Initialize with options
        var hot_ac_lazy_init = new Handsontable(hot_ac_lazy, {
            data: hot_date_data,
            stretchH: 'all',
            colHeaders: ['Car', 'Qty', 'Date', 'Color', 'Price'],
            columns: [
                {
                    data: 'car',
                    type: 'autocomplete',
                    source: ['Mercedes', 'Chevrolet', 'Dodge', 'Hummer', 'Suzuki', 'Toyota', 'Nissan', 'Porsche', 'Volkswagen', 'BMW', 'Audi', 'Cadillac'],
                    strict: false
                },
                {
                    data: 'qty',
                    type: 'numeric',
                    className: 'htLeft'
                },
                {
                    data: 'date',
                    type: 'date',
                    dateFormat: 'MM/DD/YYYY',
                    correctFormat: true,
                    defaultDate: '01/01/1900'
                },
                {
                    data: 'color',
                    type: 'autocomplete',
                    source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
                    strict: false
                },
                {
                    data: 'price',
                    type: 'numeric',
                    className: 'htLeft',
                    numericFormat: {
                        pattern: '$0,0.00'
                    }
                }
            ]
        });



        // Autocomplete strict mode
        // ------------------------------

        // Define element
        var hot_ac_strict = document.getElementById('hot_ac_strict');

        // Initialize with options
        var hot_ac_strict_init = new Handsontable(hot_ac_strict, {
            data: hot_date_data,
            stretchH: 'all',
            colHeaders: ['Car<br>(allowInvalid true)', 'Qty', 'Date', 'Color<br>(allowInvalid false)', 'Price'],
            columns: [
                {
                    data: 'car',
                    type: 'autocomplete',
                    source: ['Mercedes', 'Chevrolet', 'Dodge', 'Hummer', 'Suzuki', 'Toyota', 'Nissan', 'Porsche', 'Volkswagen', 'BMW', 'Audi', 'Cadillac'],
                    strict: true
                },
                {
                    data: 'qty',
                    className: 'htLeft',
                    type: 'numeric'
                },
                {
                    data: 'date',
                    type: 'date',
                    dateFormat: 'MM/DD/YYYY',
                    correctFormat: true,
                    defaultDate: '01/01/1900'
                },
                {
                    data: 'color',
                    type: 'autocomplete',
                    source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
                    strict: true,
                    allowInvalid: false
                },
                {
                    data: 'price',
                    type: 'numeric',
                    className: 'htLeft',
                    numericFormat: {
                        pattern: '$0,0.00'
                    }
                }
            ]
        });



        // Autocomplete strict mode (AJAX)
        // ------------------------------

        // Define element
        var hot_ac_ajax = document.getElementById('hot_ac_ajax');

        // Initialize with options
        var hot_ac_ajax_init = new Handsontable(hot_ac_ajax, {
            data: hot_date_data,
            stretchH: 'all',
            colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
            columns: [
                {
                    data: 'car',
                    type: 'autocomplete',
                    source: function (query, process) {
                        $.ajax({
                            url: '../../../../global_assets/demo_data/handsontable/cars.json',
                            dataType: 'json',
                            data: {
                                query: query
                            },
                            success: function (response) {
                                console.log("response", response);
                                process(response.data);
                            }
                        });
                    },
                    strict: true
                },
                {
                    data: 'qty',
                    className: 'htLeft',
                    type: 'numeric'
                },
                {
                    data: 'date',
                    type: 'date',
                    dateFormat: 'MM/DD/YYYY',
                    correctFormat: true,
                    defaultDate: '01/01/1900'
                },
                {
                    data: 'color',
                    type: 'autocomplete',
                    source: function (query, process) {
                        $.ajax({
                            url: '../../../../global_assets/demo_data/handsontable/colors.json',
                            dataType: 'json',
                            data: {
                                query: query
                            },
                            success: function (response) {
                                console.log("response", response);
                                process(response.data);
                            }
                        });
                    },
                    strict: true,
                    allowInvalid: false
                },
                {
                    data: 'price',
                    type: 'numeric',
                    className: 'htLeft',
                    numericFormat: {
                        pattern: '$0,0.00'
                    }
                }
            ]
        });




        // Password cell type
        // ------------------------------

        // Add sample data used in all password example
        var people = [
            {id: 1, name: {first: 'Joe', last: 'Fabiano'}, email: '<a href="#">joe.fabiano@ex.com</a>', password: 'djeiryt812ewe'},
            {id: 2, name: {first: 'Fred', last: 'Wecler'}, email: '<a href="#">fred.wecler@ex.com</a>', password: 'sdfw78273e2d'},
            {id: 3, name: {first: 'Steve', last: 'Wilson'}, email: '<a href="#">steve.wilson@ex.com</a>', password: 'asdk3uasce'},
            {id: 4, name: {first: 'Maria', last: 'Fernandez'}, email: '<a href="#">m.fernandez@ex.com</a>', password: '12438127we'},
            {id: 5, name: {first: 'Pierre', last: 'Barbault'}, email: '<a href="#">pierre.barbault@ex.com</a>', password: 'aksdiuw3'},
            {id: 6, name: {first: 'Nancy', last: 'Moore'}, email: '<a href="#">nancy.moore@ex.com</a>', password: '18894ksdf'},
            {id: 7, name: {first: 'Barbara', last: 'MacDonald'}, email: '<a href="#">b.macdonald@ex.com</a>', password: 'asd9834r3e'},
            {id: 8, name: {first: 'Wilma', last: 'Williams'}, email: '<a href="#">wilma.williams@ex.com</a>', password: '323908jffwe'},
            {id: 9, name: {first: 'Sasha', last: 'Silver'}, email: '<a href="#">sasha.silver@ex.com</a>', password: 's8884ijs3asdf2'},
            {id: 10, name: {first: 'Don', last: 'Pérignon'}, email: '<a href="#">don.pérignon@ex.com</a>', password: 'e89293234434f'},
            {id: 11, name: {first: 'Aaron', last: 'Kinley'}, email: '<a href="#">aaron.kinley@ex.com</a>', password: '12e3932asdw'}
        ];

        // Define element  
        var hot_password = document.getElementById('hot_password');

        // Initialize with options
        var hot_password_init = new Handsontable(hot_password, {
            data: people,
            stretchH: 'all',
            colHeaders: ['ID', 'First name', 'Last name', 'Email', 'Password'],
            columns: [
                {data: 'id'},
                {data: 'name.first'},
                {data: 'name.last'},
                {data: 'email', renderer: "html"},
                {data: 'password', type: 'password', width: 50}
            ]
        });



        // Fixed hash length
        // ------------------------------

        // Define element
        var hot_password_fixed = document.getElementById('hot_password_fixed');

        // Initialize with options
        var hot_password_fixed_init = new Handsontable(hot_password_fixed, {
            data: people,
            stretchH: 'all',
            colHeaders: ['ID', 'First name', 'Last name', 'Email', 'Password'],
            columns: [
                {data: 'id'},
                {data: 'name.first'},
                {data: 'name.last'},
                {data: 'email', renderer: "html"},
                {data: 'password', type: 'password', hashLength: 8, width: 50}
            ]
        });



        // Custom hash symbol
        // ------------------------------

        // Define element
        var hot_password_custom = document.getElementById('hot_password_custom');

        // initialize with options
        var hot_password_custom_init = new Handsontable(hot_password_custom, {
            data: people,
            stretchH: 'all',
            colHeaders: ['ID', 'First name', 'Last name', 'Email', 'Password'],
            columns: [
                {data: 'id'},
                {data: 'name.first'},
                {data: 'name.last'},
                {data: 'email', renderer: "html"},
                {data: 'password', type: 'password', hashSymbol: '&#9632;', width: 50}
            ]
        });
    };


    //
    // Return objects assigned to module
    //

    return {
        init: function() {
            _componentHotAutocompletePassword();
        }
    }
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
    HotAutocompletePassword.init();
});
