// js/modules/controls.js
// Module reference argument, assigned at the bottom
// every device gets its model from the base and is rendered into seperate viewbases

(function (Device) {

    // Dependencies
    var Position = app.module("position"),
    	Option = app.module("option"),
    	Util = app.module("util"),
		Switch = app.module("switch");

    Device.Model = Backbone.Model.extend({
        defaults: {
            deviceId: 0,
            pos: Position.Model,
            type: ''
        }
    });

    Device.List = Backbone.Collection.extend({
        model: Device.Model
    });

    Device.View = Backbone.View.extend({
        initialize: function () {
            this.$el.addClass('device');
            this.pos = new Position.Model(this.model.get('pos'));
            this.type = this.model.get('type');
			this.template = Handlebars.compile(Util.getTemplate(this.type));
			//this.childControl = new Switch.View({ model: new Option.List(this.model.get('options')) });
        },
        render: function () {
            this.$el.attr('style', 'left:' + this.pos.get('x') + 'px;top:' + this.pos.get('y') + 'px');
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },
		events: {
		    "click .switch": "toggleSwitch",
			"change input.color": "updateColor"
		},
		updateColor: function() {
			$('.cpicker', this.$el).attr('style','background-color:#' + $('input.color', this.$el).val());
		},
		toggleSwitch: function () {
		    var status = this.model.get('options')[0].status;
		    status = (status == "off" ? "on" : "off");
		    this.model.get('options')[0].status = status;
		    this.model.trigger("change:options");
		    this.render();
		}
    });

})(app.module("device"));