var mixObject = {
    createPreview:function(containingDiv, labelText, callback){
		var localizedMessagesUri = this.context.getManagedAssetUrl("LocalizedMessages.js",this.context.assetType_WEB);
		require(["dojo/dom-style", "dojo/dom-class", "dojo/store/Memory", "dijit/form/FilteringSelect", localizedMessagesUri], this.lang.hitch(this, function(domStyle, domClass, Memory, FilteringSelect, localizedMessages){
			this.context.coachViewData.containingDiv = containingDiv;
			domClass.add(this.context.coachViewData.containingDiv, "BPMWYSIWYG");
			
			var option1label =  localizedMessages.getMessage("defaultOption1");
			var option2label =  localizedMessages.getMessage("defaultOption2");
			var option3label =  localizedMessages.getMessage("defaultOption3");
			this.context.coachViewData.containingDiv.querySelector(".option1label").innerHTML = option1label;
			this.context.coachViewData.containingDiv.querySelector(".option2label").innerHTML = option2label;
			this.context.coachViewData.containingDiv.querySelector(".option3label").innerHTML = option3label;
			
			this.context.coachViewData.singleSelectNode = this.context.coachViewData.containingDiv.querySelector(".listTypeSingleSelect");
			this.context.coachViewData.multiSelectNode = this.context.coachViewData.containingDiv.querySelector(".listTypeMultiSelect");
			this.context.coachViewData.multiSelect1 = this.context.coachViewData.containingDiv.querySelector(".BPMMultiCheck1");
			this.context.coachViewData.multiSelect2 = this.context.coachViewData.containingDiv.querySelector(".BPMMultiCheck2");
			this.context.coachViewData.multiSelect3 = this.context.coachViewData.containingDiv.querySelector(".BPMMultiCheck3");

			this.context.coachViewData.connectHandles = [];
			
			this.handleCheckBoxClick = function(evt){
				if (!!evt && !!evt.currentTarget) {
					domClass.toggle(evt.currentTarget, "dijitCheckBoxChecked");
					domClass.toggle(evt.currentTarget, "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 = [];
			};
			
			/* adds a filtering select dijit with default values */
			var ID = "SELECT_" + dojox.uuid.generateRandomUuid();
			this.context.coachViewData.singleSelectNode.innerHTML = "<input id=\"" + ID+ "\" />";
			
			var valueStore = new Memory({data:[
					{name:option1label, id:option1label},
					{name:option2label, id:option2label},
					{name:option3label, id:option3label}
			]});

			this.context.coachViewData.singleSelectDijit = new FilteringSelect({
				id: ID,
				name: ID,
				value: option1label,
				store: valueStore,
				searchAttr: "name"
			}, ID);
			
			domStyle.set(this.context.coachViewData.singleSelectNode, "display", "");
			domStyle.set(this.context.coachViewData.multiSelectNode, "display", "none");
			
			callback();
		}));	
    },
    propertyChanged:function(propertyName, propertyValue){
		var configHelperUri = this.context.getManagedAssetUrl("ConfigHelper.js",this.context.assetType_WEB);
		require(["dojo/dom-style", "dojo/dom-class", "dojo/_base/connect", configHelperUri], this.lang.hitch(this, function(domStyle, domClass, connect, configHelper){
			if(propertyName == "listType" && propertyValue == "single"){
				domStyle.set(this.context.coachViewData.singleSelectNode, "display", "");
				domStyle.set(this.context.coachViewData.multiSelectNode, "display", "none");
				this.clearHandles();
			} else if(propertyName == "listType" && propertyValue == "multi"){
				domStyle.set(this.context.coachViewData.singleSelectNode, "display", "none");
				domStyle.set(this.context.coachViewData.multiSelectNode, "display", "");
				this.context.coachViewData.connectHandles[0] = connect.connect(this.context.coachViewData.multiSelect1, "onclick", dojo.hitch(this, this.handleCheckBoxClick));
				this.context.coachViewData.connectHandles[1] = connect.connect(this.context.coachViewData.multiSelect2, "onclick", dojo.hitch(this, this.handleCheckBoxClick));
				this.context.coachViewData.connectHandles[2] = connect.connect(this.context.coachViewData.multiSelect3, "onclick", dojo.hitch(this, this.handleCheckBoxClick));
			} else if(propertyName == "@style"){
				var width = configHelper.getResponsiveConfigOptionValue(this, "@width");
				var minWidth = configHelper.getResponsiveConfigOptionValue(this, "@minWidth");
				if(width != undefined || minWidth != undefined) {
					domClass.add(this.context.coachViewData.singleSelectNode, "BPMCVHorzStretch");
					domClass.add(this.context.coachViewData.multiSelectNode, "BPMCVHorzStretch");
				} else {
					domClass.remove(this.context.coachViewData.singleSelectNode, "BPMCVHorzStretch");
					domClass.remove(this.context.coachViewData.multiSelectNode, "BPMCVHorzStretch");
				}
			}
		}));	
    }
};