define(['jquery', 'underscore', 'backbone', 'text!modules/ricette/ricetteViewTemplate.html', 'modules/base/baseView',
    'controls/window/window', 'modules/editricetta/editricetta', 'jqx'],
        function($, _, Backbone, ricetteViewTemplate, BaseView, Window, EditRicetta) {

            var RicetteView = BaseView.extend({
                dataAdapter: undefined,
                //initialize template
                template: _.template(ricetteViewTemplate),
                window:null,
                editorRicetta: null,
                
                initialize: function() {
                    RicetteView.__super__.initialize.call(this);
                    //this.header.title = "pippo";
                },
                fillGrid: function(event)
                {
                    var self = event.data.scope;
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            self.dataAdapter._source.url = myManifest.Settings.DefaultURL + "/backend/ricette/" + item.value;
                            self.dataAdapter.dataBind();
                            $("#jqxgrid").jqxGrid('updatebounddata');
                        }
                    }
                },
                openRicetta: function(row) {
                    var editrow = row;
                    var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                    this.editorRicetta.openRicetta(dataRecord.ricetta_id);
                },
                //render the content into div of view
                render: function() {
                    //this.header.title = "pippo";
                    RicetteView.__super__.render.call(this);
                    var self = this;

                    if(self.window === null)
                    {
                        self.window = new Window({
                            id: "ricette",
                            title: "Ricette",
                            width: "850px",
                            resizable: true,
                            height: "510px",
                            maxHeight: 1000,
                            maxWidth: 1000,
                            content: "<p><div id=\"categoriaCmb\"></div></p>\n\
                                    <p><div id=\"jqxgrid\"></div></p>",
                            initContentFn: function() {
                                var source =
                                        {
                                            datatype: "jsonp",
                                            datafields: [
                                                {name: 'category_id'},
                                                {name: 'name'}
                                            ],
                                            url: myManifest.Settings.DefaultURL + "/backend/categories",
                                            data: {
                                            }
                                        };
                                var dataAdapter = new $.jqx.dataAdapter(source);
                                $("#categoriaCmb").jqxDropDownList(
                                        {
                                            width: 200,
                                            height: 25,
                                            source: dataAdapter,
                                            selectedIndex: 0,
                                            displayMember: "name",
                                            valueMember: "category_id"
                                        });

                                $("#categoriaCmb").on('select', {scope: self}, self.fillGrid);

                                // prepare the data
                                self.dataAdapter = new $.jqx.dataAdapter({
                                    datatype: "jsonp",
                                    datafields: [
                                        {name: 'ricetta_id', type: 'int'},
                                        {name: 'titolo', type: 'string'},
                                        {name: 'autore', type: 'string'}
                                    ],
                                    id: 'ricetta_id',
                                    url: myManifest.Settings.DefaultURL + "/backend/ricette/3"
                                });
                                $("#jqxgrid").jqxGrid({
                                    width: "100%",
                                    height: "87%",
                                    source: self.dataAdapter,
                                    filterable: true,
                                    autoshowfiltericon: true,
                                    columns: [
                                        {text: 'Titolo', dataField: 'titolo', width: "50%",
                                            cellsrenderer: function(row, columnfield, value, defaulthtml, columnproperties) {
                                                return "<div style='overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;'>" + unescape(value ) + "</div>";
                                            }
                                        },
                                        {text: 'Autore', dataField: 'autore', width: "30%",
                                            cellsrenderer: function(row, columnfield, value, defaulthtml, columnproperties) {
                                                return "<div style='overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;'>" + unescape(value ) + "</div>";
                                            }
                                        },
                                        {text: '', datafield: 'Edit', columntype: 'button', width: '10%', filterable: false, sortable: false, menu: false, 
                                            cellsrenderer: function() {
                                                return "Modifica";
                                            },
                                            buttonclick: function(row) {
                                                self.openRicetta(row);
                                            }
                                        },
                                        {text: '', datafield: 'Del', columntype: 'button', width: '10%', filterable: false, sortable: false, menu: false, 
                                            cellsrenderer: function() {
                                                return "Elimina";
                                            },
                                            buttonclick: function(row) {
                                                $.ajax({
                                                    url: myManifest.Settings.DefaultURL + "/backend/ricetta/" + row.id,
                                                    //dataType: "json",
                                                    type: 'DELETE'
                                                }).then(function (response) {
                                                    var msg = response;
                                                    alert(msg.message);
                                                });
                                            }
                                        }
                                    ]
                                });

                                $('#jqxgrid').on('rowdoubleclick', function(event)
                                {
                                    var args = event.args;
                                    var row = args.rowindex;
                                    self.openRicetta(row);
                                });
                            }
                        });

                        this.$el.append(this.template());
                        this.$el.find("#content").append(self.window.$el);
                        self.window.render();
                        
                        this.editorRicetta = new EditRicetta();
                        this.$el.find("#content").append(this.editorRicetta.$el);
                        
                        this.editorRicetta.render();
                    }
                    else
                        self.window.open();
                    return this;
                }
            });
            return RicetteView;
        });