var mixObject = {
    createPreview:function(containingDiv, labelText, callback){
		require([ "dojo/dom-construct", "dojo/dom-class", "dojo/dom-style"], this.lang.hitch(this, function(domConstruct, domClass, domStyle){
			this.context.coachViewData.containingDiv = containingDiv;
			
			this.context.coachViewData.checkboxNode = this.context.coachViewData.containingDiv.querySelector(".showAsCheckbox");
			this.context.coachViewData.selectableCheckboxNode = this.context.coachViewData.containingDiv.querySelector(".BPMCheckbox1");

			this.context.coachViewData.radioButtonsNode = this.context.coachViewData.containingDiv.querySelector(".showAsRadio");
			this.context.coachViewData.radioButton1 = this.context.coachViewData.containingDiv.querySelector(".BPMRadio1");
			this.context.coachViewData.radioButton2 = this.context.coachViewData.containingDiv.querySelector(".BPMRadio2");
			
			this.context.coachViewData.switchNode = this.context.coachViewData.containingDiv.querySelector(".showAsSwitch");
			this.context.coachViewData.trueLabelNodes = this.context.coachViewData.containingDiv.querySelectorAll(".trueLabel");
			this.context.coachViewData.falseLabelNodes = this.context.coachViewData.containingDiv.querySelectorAll(".falseLabel");
			
			this.context.coachViewData.mblSwitchInner = this.context.coachViewData.containingDiv.querySelector(".mblSwitch.mblSwSquareShape");
			this.context.coachViewData.mblSwitchKnob = this.context.coachViewData.containingDiv.querySelector(".mblSwitch .mblSwitchKnob");
			this.context.coachViewData.mblSwitchBgLeftNode = this.context.coachViewData.containingDiv.querySelector(".mblSwitchBg.mblSwitchBgLeft");
			this.context.coachViewData.mblSwitchBgRightNode = this.context.coachViewData.containingDiv.querySelector(".mblSwitchBg.mblSwitchBgRight");
			this.context.coachViewData.mblSwitchLeftTextNode = this.context.coachViewData.containingDiv.querySelector(".mblSwitch .mblSwitchTextLeft");
			this.context.coachViewData.mblSwitchRightTextNode = this.context.coachViewData.containingDiv.querySelector(".mblSwitch .mblSwitchTextRight");
			
			domStyle.set(this.context.coachViewData.checkboxNode, "display", "");
			domStyle.set(this.context.coachViewData.radioButtonsNode, "display", "none");
			domStyle.set(this.context.coachViewData.switchNode, "display", "none");
			
			this.context.coachViewData.connectHandles = [];

			this.handleCheckBoxClick = function(evt){
				if (!!evt && !!evt.currentTarget) {
					domClass.toggle(evt.currentTarget, "dijitCheckBoxChecked");
					domClass.toggle(evt.currentTarget, "dijitChecked");
				}
			};
			
			this.handleRadioButtonClick = function(evt){
				if (!!evt && !! evt.currentTarget) {
					var selectedButton = (evt.currentTarget == this.context.coachViewData.radioButton1)?this.context.coachViewData.radioButton1:this.context.coachViewData.radioButton2;
					var unselectedButton = (evt.currentTarget == this.context.coachViewData.radioButton1)?this.context.coachViewData.radioButton2:this.context.coachViewData.radioButton1;
					domClass.add(selectedButton, "dijitRadioChecked");
					domClass.add(selectedButton, "dijitChecked");
					domClass.remove(unselectedButton, "dijitRadioChecked");
					domClass.remove(unselectedButton, "dijitChecked");
				}
			};

			this.clearHandles = function() {
				for (var x=0; x<this.context.coachViewData.connectHandles.length; x++) {
					this.context.coachViewData.connectHandles[x].remove();
				}
				this.context.coachViewData.connectHandles = [];
			};
			
			this.context.coachViewData.resizeSwitch = lang.hitch(this, function() {
				// keep polling until the text nodes have a width
				// necessary because the initial property changed events are
				// fired before the dom is rendered and thus the switch can't
				// be sized properly
				if(this.context.coachViewData.mblSwitchLeftTextNode.clientWidth == 0 || this.context.coachViewData.mblSwitchRightTextNode.clientWidth == 0) {
					window.setTimeout(lang.hitch(this, this.context.coachViewData.resizeSwitch), 100);
					return;
				}
				
				var padding = 20;
				var desiredWidth = Math.max(this.context.coachViewData.mblSwitchLeftTextNode.clientWidth, this.context.coachViewData.mblSwitchRightTextNode.clientWidth);
				
				// center text
				this.context.coachViewData.mblSwitchLeftTextNode.style.marginLeft = Math.ceil((desiredWidth - this.context.coachViewData.mblSwitchLeftTextNode.clientWidth) / 2 + padding / 2) + "px";
				this.context.coachViewData.mblSwitchRightTextNode.style.marginLeft = Math.ceil((desiredWidth - this.context.coachViewData.mblSwitchRightTextNode.clientWidth) / 2 + padding / 2) + "px";
				
				// add padding and the width of the knob to desired width
				desiredWidth += this.context.coachViewData.mblSwitchKnob.clientWidth + padding;
				this.context.coachViewData.mblSwitchInner.style.width = desiredWidth + "px";
				this.context.coachViewData.mblSwitchBgLeftNode.style.width = desiredWidth + "px";
				this.context.coachViewData.mblSwitchBgRightNode.style.width = desiredWidth + "px";
				
				if(domClass.contains(this.context.coachViewData.mblSwitchInner, "mblSwitchOn")) {					
					this.context.coachViewData.mblSwitchKnob.style.left = (this.context.coachViewData.mblSwitchInner.clientWidth - this.context.coachViewData.mblSwitchKnob.clientWidth - 2) + "px";
				} else {
					this.context.coachViewData.mblSwitchKnob.style.left = "";
				}
			});
			
			// set default localized labels
			this.propertyChanged("trueLabel", null);
			this.propertyChanged("falseLabel", null);

			callback();
		}));	
    },
    propertyChanged:function(propertyName, propertyValue){
		var localizedMessagesUri = this.context.getManagedAssetUrl("LocalizedMessages.js",this.context.assetType_WEB);
		require([ "dojo/dom-construct", "dojo/dom-class", "dojo/dom-style", "dojo/_base/connect", localizedMessagesUri], this.lang.hitch(this, function(domConstruct, domClass, domStyle, connect, localizedMessages){
			if(propertyName == "showAs" && propertyValue == "checkbox"){
				domStyle.set(this.context.coachViewData.checkboxNode, "display", "");
				domStyle.set(this.context.coachViewData.radioButtonsNode, "display", "none");
				domStyle.set(this.context.coachViewData.switchNode, "display", "none");
				this.clearHandles();
				this.context.coachViewData.connectHandles[0] = connect.connect(this.context.coachViewData.selectableCheckboxNode, "onclick", dojo.hitch(this, this.handleCheckBoxClick));
			} else if(propertyName == "showAs" && propertyValue == "radio"){
				domStyle.set(this.context.coachViewData.checkboxNode, "display", "none");
				domStyle.set(this.context.coachViewData.radioButtonsNode, "display", "");
				domStyle.set(this.context.coachViewData.switchNode, "display", "none");
				this.clearHandles();
				this.context.coachViewData.connectHandles[0] = connect.connect(this.context.coachViewData.radioButton1, "onclick", dojo.hitch(this, this.handleRadioButtonClick));
				this.context.coachViewData.connectHandles[1] = connect.connect(this.context.coachViewData.radioButton2, "onclick", dojo.hitch(this, this.handleRadioButtonClick));				
			} else if(propertyName == "showAs" && propertyValue == "slider"){
				domStyle.set(this.context.coachViewData.checkboxNode, "display", "none");
				domStyle.set(this.context.coachViewData.radioButtonsNode, "display", "none");
				domStyle.set(this.context.coachViewData.switchNode, "display", "");
				this.clearHandles();
				this.context.coachViewData.connectHandles[0] = connect.connect(this.context.coachViewData.mblSwitchInner, "onclick", dojo.hitch(this, function(){
					if(domClass.contains(this.context.coachViewData.mblSwitchInner, "mblSwitchOff")){
						domClass.replace(this.context.coachViewData.mblSwitchInner, "mblSwitchOn", "mblSwitchOff");
					} else {
						domClass.replace(this.context.coachViewData.mblSwitchInner, "mblSwitchOff", "mblSwitchOn");
					}
					this.context.coachViewData.resizeSwitch();
				}));
				this.context.coachViewData.resizeSwitch();
			} else if(propertyName == "trueLabel"){
				for(var i = 0; i < this.context.coachViewData.trueLabelNodes.length; i++){
					this.context.coachViewData.trueLabelNodes[i].innerHTML = propertyValue || localizedMessages.getMessage("yes");
				}
				this.context.coachViewData.resizeSwitch();
			} else if(propertyName == "falseLabel"){
				for(var i = 0; i < this.context.coachViewData.falseLabelNodes.length; i++){
					this.context.coachViewData.falseLabelNodes[i].innerHTML = propertyValue || localizedMessages.getMessage("no");
				}
				this.context.coachViewData.resizeSwitch();
			}
		}));	
    }
};