vatModule.controller('devGridController', ['$log', '$scope','$translate',
    function ($log, $scope, $translate) {
        'use strict';
        var customers = [{
            "ID": 1,
            "CompanyName": "Super Mart of the West",
            "Street": "702 SW 8th Street",
            "City": "Bentonville",
            "StateID": 2,
            "Zipcode": 72716,
            "Phone": "(800) 555-2797",
            "Fax": "(800) 555-2171",
            "Website": "http://www.nowebsitesupermart.com"
        }, {
            "ID": 2,
            "CompanyName": "Electronics Depot",
            "Street": "2455 Paces Ferry Road NW",
            "City": "Atlanta",
            "StateID": 1,
            "Zipcode": 30339,
            "Phone": "(800) 595-3232",
            "Fax": "(800) 595-3231",
            "Website": "http://www.nowebsitedepot.com"
        }, {
            "ID": 3,
            "CompanyName": "K&S Music",
            "Street": "1000 Nicllet Mall",
            "City": "Minneapolis",
            "StateID": 7,
            "Zipcode": 55403,
            "Phone": "(612) 304-6073",
            "Fax": "(612) 304-6074",
            "Website": "http://www.nowebsitemusic.com"
        }, {
            "ID": 4,
            "CompanyName": "Tom's Club",
            "Street": "999 Lake Drive",
            "City": "Issaquah",
            "StateID": 6,
            "Zipcode": 98027,
            "Phone": "(800) 955-2292",
            "Fax": "(800) 955-2293",
            "Website": "http://www.nowebsitetomsclub.com"
        }, {
            "ID": 5,
            "CompanyName": "E-Mart",
            "Street": "3333 Beverly Rd",
            "City": "Hoffman EStateIDs",
            "StateID": 7,
            "Zipcode": 60179,
            "Phone": "(847) 286-2500",
            "Fax": "(847) 286-2501",
            "Website": "http://www.nowebsiteemart.com"
        }, {
            "ID": 6,
            "CompanyName": "Walters",
            "Street": "200 Wilmot Rd",
            "City": "Deerfield",
            "StateID": 3,
            "Zipcode": 60015,
            "Phone": "(847) 940-2500",
            "Fax": "(847) 940-2501",
            "Website": "http://www.nowebsitewalters.com"
        }, {
            "ID": 7,
            "CompanyName": "StereoShack",
            "Street": "400 Commerce S",
            "City": "Fort Worth",
            "StateID": 5,
            "Zipcode": 76102,
            "Phone": "(817) 820-0741",
            "Fax": "(817) 820-0742",
            "Website": "http://www.nowebsiteshack.com"
        }, {
            "ID": 8,
            "CompanyName": "Circuit Town",
            "Street": "2200 Kensington Court",
            "City": "Oak Brook",
            "StateID": 6,
            "Zipcode": 60523,
            "Phone": "(800) 955-2929",
            "Fax": "(800) 955-9392",
            "Website": "http://www.nowebsitecircuittown.com"
        }, {
            "ID": 9,
            "CompanyName": "Premier Buy",
            "Street": "7601 Penn Avenue South",
            "City": "Richfield",
            "StateID": 4,
            "Zipcode": 55423,
            "Phone": "(612) 291-1000",
            "Fax": "(612) 291-2001",
            "Website": "http://www.nowebsitepremierbuy.com"
        }, {
            "ID": 10,
            "CompanyName": "ElectrixMax",
            "Street": "263 Shuman Blvd",
            "City": "Naperville",
            "StateID": 2,
            "Zipcode": 60563,
            "Phone": "(630) 438-7800",
            "Fax": "(630) 438-7801",
            "Website": "http://www.nowebsiteelectrixmax.com"
        }, {
            "ID": 11,
            "CompanyName": "Video Emporium",
            "Street": "1201 Elm Street",
            "City": "Dallas",
            "StateID": 10,
            "Zipcode": 75270,
            "Phone": "(214) 854-3000",
            "Fax": "(214) 854-3001",
            "Website": "http://www.nowebsitevideoemporium.com"
        }, {
            "ID": 12,
            "CompanyName": "Screen Shop",
            "Street": "1000 Lowes Blvd",
            "City": "Mooresville",
            "StateID": 1,
            "Zipcode": 28117,
            "Phone": "(800) 445-6937",
            "Fax": "(800) 445-6938",
            "Website": "http://www.nowebsitescreenshop.com"
        }];
        var states = [{
            "ID": 1,
            "Name": "Alabama"
        }, {
            "ID": 2,
            "Name": "Alaska"
        }, {
            "ID": 3,
            "Name": "Arizona"
        }, {
            "ID": 4,
            "Name": "Arkansas"
        }, {
            "ID": 5,
            "Name": "California"
        }, {
            "ID": 6,
            "Name": "Colorado"
        }, {
            "ID": 7,
            "Name": "Connecticut"
        }, {
            "ID": 8,
            "Name": "Delaware"
        }, {
            "ID": 9,
            "Name": "District of Columbia"
        }, {
            "ID": 10,
            "Name": "Florida"
        }];
        var initGrid = function () {           
            $scope.dataGridOptions = {
                dataSource: customers,
                editing: {
                    mode: "row",
                    allowUpdating: true,
                    allowDeleting: true,
                    allowAdding: true
                },
                columns: [
                    { dataField: 'ID', visible: false },
                    {
                        dataField:'CompanyName',
                        caption: 'CompanyName',
                        cellTemplate: 'companyTemplate',
                        editCellTemplate: function (cellElement, cellInfo) {
                            var name = document.createElement("div");
                            cellElement.get(0).appendChild(name);
                            $(name).dxTextBox({
                                placeholder:'Company name',
                                valueChangeEvent: "keyup",
                                value:cellInfo.value,
                                onValueChanged: function (e) {                                  
                                    cellInfo.setValue(e.value);
                                }
                            });
                            var link = document.createElement("div");
                            cellElement.get(0).appendChild(link);
                            $(link).dxTextBox({
                                placeholder: 'Company link',
                                valueChangeEvent: "keyup",
                                value: cellInfo.data.Website,                                
                                onValueChanged: function (e) {
                                    //data.value.replace(/\s/g, "").toLowerCase()
                                    cellInfo.data.Website=e.value;
                                }
                            });
                        }
                    },
                    {
                        caption: 'Address',
                        alignment: 'center',
                        columns: ['Street', 'City',
                            {
                                dataField: 'StateID',
                                caption: 'State',
                                lookup: {
                                    dataSource: states,
                                    displayExpr: "Name",
                                    valueExpr: "ID"
                                }
                            }
                        ]
                    },
                    "Phone", "Fax"],
                paging: { pageSize: 10 },
                pager: {
                    showPageSizeSelector: true,
                    allowPageSized: [5, 10, 20],
                    showInfo: true
                },
                loadPanel: {
                    enabled: true
                },
                //scrolling: {
                //    mode: "virtual"
                //},
                columnChooser: {
                    enabled: true,
                    height: 150,
                    width: 300,
                    emptyPanelText: 'A place to hide the columns'
                },
                activeStateEnabled: true,
                bindingOptions: {
                    allowColumnReordering: 'allowColumnReordering',
                    columnAutoWidth: 'autoWidth',
                    allowColumnResizing: 'allowColumResizing'

                },
                onEditingStart: function (info) {
                    console.log(info);
                }
            };
        };

        (function () {
            $scope.showPanel = 1;
            $scope.autoWidth = true;
            $scope.allowColumnReordering = true;
            $scope.allowColumResizing = true;
            initGrid();
        })();
}]);