@(engineInfoId: String, params: Seq[io.prediction.commons.settings.Param])
var EngineSettingsModel = Backbone.Model.extend({
    /* Required params: app_id, id (engine_id) */
    urlRoot: function(){
        return '/apps/' + this.get("app_id") + '/engine_settings';
    },
    /* Override save for displaying saving status */
    save: function(attributes, options) {
        var settingSave = toastr.info('Saving Settings...','', {positionClass: 'toast-bottom-right'});
        var result = Backbone.Model.prototype.save.call(this, attributes, options);
        toastr.clear(settingSave);
        return result;
    }
});

var EngineSettingsView = Backbone.View.extend({
    el: '#engineContentHolder',
    initialize : function() {
        this.subViews = []; // keep track of sub view
        this.template = _.template($("#engineTemplate").html());
        this.index = 0;
        this.engine_id = this.options.engine_id;
        this.app_id = this.options.app_id;
        this.itemtypelist = {}; // storing itemtypes
        var self = this;
        this.model = new EngineSettingsModel({app_id: this.app_id, id: this.engine_id, infotype: "engine", infoid: this.options.engineinfo_id});
        this.model.fetch({
            success: function() {
                self.render();

                // load itemtypes to this.itemtypelist and display it
                var currItemTypeList = self.model.get('itemtypelist');
                if (currItemTypeList) {
                    for (var i=0;i < currItemTypeList.length; i++) {
                        var currItemtype_id = currItemTypeList[i];
                        self.itemtypelist[currItemtype_id] = true;
                        self.addItemTypeView(currItemtype_id);
                    }
                }

            @for(p <- params) {
                self.initValue('@p.id');
            }
            }
        });
    },
    initValue: function(attrName){
        var value = this.model.get(attrName);
        this.$el.find('#'+attrName).val(value);
    },
    events : {
        "click #engineAddItemTypeBtn" : "addItemType",
        'keypress #engineAddItemTypeInput': 'onEnterAddItemType',
        @for(p <- params) {
            @if(p.ui.uitype != "slider") {
        "change #@(p.id)": "@(p.id)Changed",
            }
        }
        "change #trainingdisabled" : "trainingdisabledChanged",
        "change #trainingschedule" : "trainingscheduleChanged",
        "change #engineAllItemTypes" : "toggleAllItemTypes"
    },
    onEnterAddItemType : function(e) {
        if (e.keyCode == 13) { // if it's ENTER
            this.addItemType();
            return false;
        } else { // continue if it's not ENTER
            return true;
        }
    },
    addItemType : function() {
        var inputObj = this.$el.find('#engineAddItemTypeInput');
        var itemtype_id = inputObj.val();
        // add itemtype
        this.itemtypelist[itemtype_id] = true;
        this.model.set({
            itemtypelist: MapKeyToArray(this.itemtypelist),
            allitemtypes: false
        });
        var self = this;
        this.model.save({},{
            success: function(model, res) {
                self.addItemTypeView(itemtype_id);
                inputObj.val(''); // clear input field
                self.$el.find('#engineAllItemTypes').attr('checked', false); // unselect include all
            }
        });
        return false;
    },
    addItemTypeView: function(itemtype_id){
        var itemTypeView = new EngineSettingsItemTypeView({ itemtype_id: itemtype_id, index: this.index});
        this.$el.find('#engineItemTypeList_ContentHolder').append(itemTypeView.render().el);
        this.subViews.push(itemTypeView);
        this.listenTo(itemTypeView, 'ItemTypeRemoved', this.itemtypeRemoved);
        itemTypeView.listenTo(this, 'AllItemTypesSelected', itemTypeView.remove);
        this.index += 1;
    },
    itemtypeRemoved: function(itemtype_id) {
        if (itemtype_id in this.itemtypelist) {
            delete this.itemtypelist[itemtype_id];
            if ($.isEmptyObject(this.itemtypelist)) { // if no more selected item types
                this.model.set({allitemtypes: true});
                this.$el.find('#engineAllItemTypes').prop('checked', true);
            }
            this.model.set({itemtypelist: MapKeyToArray(this.itemtypelist)});
            this.model.save();
        }
    },
    toggleAllItemTypes: function() {
        var inputObj = this.$el.find('#engineAllItemTypes');
        var isAllItemTypes = inputObj.is(':checked');
        if (isAllItemTypes == true) {   // select AllItemTypes
            this.trigger('AllItemTypesSelected');
            this.itemtypelist = {};
            this.model.set({itemtypelist: MapKeyToArray(this.itemtypelist), allitemtypes: true});
            this.model.save();
        } else { //unselect AllItemTypes
            createDialog('Item Type Required','You must select at least one item type for the engine.', {
                  resizable: false,
                  height:185,
                  modal: false,
                  buttons: {
                    Okay: function() {
                        $( this ).dialog( "close" );
                    }
                  }
            });
            inputObj.prop('checked', true); // disallow unselect ALlItemTypes manually
        }
    },
    trainingdisabledChanged: function(e) {
        var trainingdisabled = this.$el.find('#trainingdisabled').is(':checked');
        this.model.set({trainingdisabled: trainingdisabled});
        this.model.save();
        return false;
    },
    trainingscheduleChanged: function(e) {
        var trainingschedule = this.$el.find('#trainingschedule').val();
        this.model.set({trainingschedule: trainingschedule});
        this.model.save();
        return false;
    },
    @for(p <- params) {
        @if(p.ui.uitype != "slider") {
    @(p.id)Changed: function(e) {
        var @p.id = this.$el.find('#@p.id').val();
        this.model.set({@p.id: @p.id});
        this.model.save();
        return false;
    },
        }
    }
    render : function() {
        this.$el.html(this.template({'data': this.model.toJSON()}));
        var self = this;
        @for(p <- params) {
            @if(p.ui.uitype == "slider") {
        var @p.id = self.model.get('@p.id');

        this.$el.find("#slider-@p.id").slider({
            value : @p.id,
            min : @p.ui.slidermin.get,
            max : @p.ui.slidermax.get,
            step : @p.ui.sliderstep.get,
            slide : function(event, ui) {
                self.model.set({@p.id: ui.value});
                self.model.save({}, {success: function(){
                    self.$el.find("#slider-@p.id-val").text(ui.value);
                }});
            }
        });
        this.$el.find("#slider-@p.id-val").text(@p.id);
            }
        }
        return this;
    },
    reloadData : function() { // Required Engine Module Function
    },
    close : function() {  // Required Engine Module Function
        try {
            @for(p <- params) {
                @if(p.ui.uitype == "slider") {
            this.$el.find("#slider-@p.id").slider("destroy");
                }
            }
        } catch(e){};

        this.remove();
        this.off();
        // handle other unbinding needs, here
        _.each(this.subViews, function(subView){
            if (subView.close){
                subView.close();
            }
        });
    }
});

/* Required Param: itemtype_id, index*/
var EngineSettingsItemTypeView = Backbone.View.extend({
    tagName: 'tr',
    initialize: function(){
        this.template_el = '#engineItemTypeList_template';
        this.template = _.template($(this.template_el).html()); // define template function
        this.itemtype_id = this.options.itemtype_id;
        this.index  = this.options.index;
    },
    events : {
        "click .removeItemTypeBtn" : "removeItemType"
    },
    render: function(){
        //this.$el.html( this.template({"data": this.model.toJSON()}) );
        this.$el.html( this.template({"data": {
            itemtype_id: this.itemtype_id,
            index: this.index
        }}) );
        return this;
    },
    removeItemType: function() {
        this.remove();
        this.trigger('ItemTypeRemoved', this.itemtype_id);
        return false;
    }
});

var createEngineView = function(app_id, engine_id, engineinfo_id) { // Required Engine Module Function
    return new EngineSettingsView({app_id: app_id, engine_id: engine_id, engineinfo_id: engineinfo_id});
};