function PayoffsUI(config){

	var self = this;
	self.id = config.id;
	self.slideshow = config.slideshow;

	// Create DOM
	self.dom = document.createElement("div");
	self.dom.className = "object";
	var dom = self.dom;
	_configText(config, dom);
	if(config.scale){
		dom.style.transform = "scale("+config.scale+","+config.scale+")";
	}

	// Add Image Background
	var bg = new ImageBox({
		src: "assets/ui/payoffs_ui.png",
		x:0, y:0, width:300, height:300
	});
	dom.appendChild(bg.dom);

	// Labels
	dom.appendChild(_makeLabel("label_cooperate", {x:148, y:17, rotation:45, align:"center", color:"#cccccc", size:15}));
	dom.appendChild(_makeLabel("label_cooperate", {x:52, y:17, rotation:-45, align:"center", color:"#cccccc", size:15}));
	dom.appendChild(_makeLabel("label_cheat", {x:245, y:90, rotation:45, align:"center", color:"#cccccc", size:15}));
	dom.appendChild(_makeLabel("label_cheat", {x:6, y:90, rotation:-45, align:"center", color:"#cccccc", size:15}));

	// Inc(rement) De(crement) Numbers
	// which are symmetrical, and update each other!
	var numbers = [];
	var _makeIncDec = function(letter,x,y){
		(function(letter,x,y){

			var number = new IncDecNumber({
				x:x, y:y, max:5, min:-5,
				value: PD.PAYOFFS[letter],
				onchange: function(value){
					publish("pd/editPayoffs/"+letter,[value]);
					publish("payoffs/onchange");
				}
			});
			listen(self, "pd/editPayoffs/"+letter,function(value){
				number.setValue(value);
			});
			number.slideshow = self.slideshow;
			dom.appendChild(number.dom);
			numbers.push(number);

		})(letter,x,y);
	};

	_makeIncDec("R", 191-64, 127-47);
	_makeIncDec("R", 233-64, 127-47);

	_makeIncDec("T", 121-64, 197-47);
	_makeIncDec("S", 161-64, 197-47);

	_makeIncDec("S", 263-64, 197-47);
	_makeIncDec("T", 306-64, 197-47);

	_makeIncDec("P", 192-64, 268-47);
	_makeIncDec("P", 232-64, 268-47);

	// Add & Remove
	self.add = function(){ _add(self); };
	self.remove = function(){
		unlisten(self);
		for(var i=0;i<numbers.length;i++) unlisten(numbers[i]);
		for(var i=0;i<self.slideshow.dom.children.length;i++){
			if(self.slideshow.dom.children[i]==self.dom){
				_remove(self);
				break;
			}
		}
	};

}

function PayoffsUI(config){

	var self = this;
	self.id = config.id;
	self.slideshow = config.slideshow;

	// Create DOM
	self.dom = document.createElement("div");
	self.dom.className = "object";
	var dom = self.dom;
	_configText(config, dom);
	if(config.scale){
		dom.style.transform = "scale("+config.scale+","+config.scale+")";
	}

	// Add Image Background
	var bg = new ImageBox({
		src: "assets/ui/payoffs_ui.png",
		x:0, y:0, width:300, height:300
	});
	dom.appendChild(bg.dom);

	// Labels
	dom.appendChild(_makeLabel("label_cooperate", {x:148, y:17, rotation:45, align:"center", color:"#cccccc", size:15, width:70, lineHeight:1}));
	dom.appendChild(_makeLabel("label_cooperate", {x:52, y:17, rotation:-45, align:"center", color:"#cccccc", size:15, width:70, lineHeight:1}));
	dom.appendChild(_makeLabel("label_cheat", {x:245, y:90, rotation:45, align:"center", color:"#cccccc", size:15, width:70, lineHeight:1}));
	dom.appendChild(_makeLabel("label_cheat", {x:6, y:90, rotation:-45, align:"center", color:"#cccccc", size:15, width:70, lineHeight:1}));

	// Inc(rement) De(crement) Numbers
	// which are symmetrical, and update each other!
	var numbers = [];
	var _makeIncDec = function(letter,x,y){
		(function(letter,x,y){

			var number = new IncDecNumber({
				x:x, y:y, max:5, min:-5,
				value: PD.PAYOFFS[letter],
				onchange: function(value){
					publish("pd/editPayoffs/"+letter,[value]);
					publish("payoffs/onchange");
				}
			});
			listen(self, "pd/editPayoffs/"+letter,function(value){
				number.setValue(value);
			});
			number.slideshow = self.slideshow;
			dom.appendChild(number.dom);
			numbers.push(number);

		})(letter,x,y);
	};

	_makeIncDec("R", 191-64, 127-47);
	_makeIncDec("R", 233-64, 127-47);

	_makeIncDec("T", 121-64, 197-47);
	_makeIncDec("S", 161-64, 197-47);

	_makeIncDec("S", 263-64, 197-47);
	_makeIncDec("T", 306-64, 197-47);

	_makeIncDec("P", 192-64, 268-47);
	_makeIncDec("P", 232-64, 268-47);

	// Add & Remove
	self.add = function(){ _add(self); };
	self.remove = function(){
		unlisten(self);
		for(var i=0;i<numbers.length;i++) unlisten(numbers[i]);
		for(var i=0;i<self.slideshow.dom.children.length;i++){
			if(self.slideshow.dom.children[i]==self.dom){
				_remove(self);
				break;
			}
		}
	};

}

fix formatting - slide 5