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

            var RicetteView = BaseView.extend({
                dataAdapter: undefined,
                //initialize template
                template: _.template(ricetteViewTemplate),
                
                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/categoryitems/" + 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;
                    var window = new Window({
                        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/categoryitems/0"
                            });
                            $("#jqxgrid").jqxGrid({
                                width: "100%",
                                height: "87%",
                                source: self.dataAdapter,
                                filterable: true,
                                autoshowfiltericon: true,
                                columns: [
                                    {text: 'Titolo', dataField: 'titolo', width: "58%",
                                        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: "34%",
                                        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: '7%',
                                        cellsrenderer: function() {
                                            return "Edit";
                                        },
                                        buttonclick: function(row) {
                                            self.openRicetta(row);
                                        }
                                    }
                                ]
                            });

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

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