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.designLabel = this.context.coachViewData.containingDiv.querySelector(".DesignLabel");
			this.context.coachViewData.aboveCaptionNode = this.context.coachViewData.containingDiv.querySelector(".CaptionAbove");
			this.context.coachViewData.belowCaptionNode = this.context.coachViewData.containingDiv.querySelector(".CaptionBelow");
			this.context.coachViewData.captionNodes = this.context.coachViewData.containingDiv.querySelectorAll(".Caption");
			this.context.coachViewData.imageNode = this.context.coachViewData.containingDiv.querySelector("img");
			this.context.coachViewData.defaultPreviewImageURL = this.context.getManagedAssetUrl("image_preview.png");
			
			this.coachViewImpl_replaceWith = function(captionNode, newValue){
				if(domClass.contains(captionNode, "CaptionLeft") && newValue != "CaptionLeft") {
					domClass.replace(captionNode, newValue, "CaptionLeft");
				} else if(domClass.contains(captionNode, "CaptionRight") && newValue != "CaptionRight") {
					domClass.replace(captionNode, newValue, "CaptionRight");
				} else if(domClass.contains(captionNode, "CaptionCenter") && newValue != "CaptionCenter") {
					domClass.replace(captionNode, newValue, "CaptionCenter");
				} else {
					domClass.add(captionNode, newValue);
				}
			}
			
			for(var i = 0; i < this.context.coachViewData.captionNodes.length; i++){
				this.coachViewImpl_replaceWith(this.context.coachViewData.captionNodes[i], "CaptionLeft");
			}
			domStyle.set(this.context.coachViewData.aboveCaptionNode, "display", "");
			domStyle.set(this.context.coachViewData.belowCaptionNode, "display", "none");
			domStyle.set(this.context.coachViewData.designLabel, "display", "none");
			this.context.coachViewData.imageNode.setAttribute("src", this.context.coachViewData.defaultPreviewImageURL);
		
			callback();
		}));	
    },
    propertyChanged:function(propertyName, propertyValue){
		var configHelperUri = this.context.getManagedAssetUrl("ConfigHelper.js",this.context.assetType_WEB);
		require([ "dojo/dom-construct", "dojo/dom-class", "dojo/dom-style", configHelperUri], this.lang.hitch(this, function(domConstruct, domClass, domStyle, configHelper){
			if(propertyName=="@binding"){
				if(propertyValue){
					this.context.coachViewData.imageNode.setAttribute("src", propertyValue);
				}
				else{
					this.context.coachViewData.imageNode.setAttribute("src", this.context.coachViewData.defaultPreviewImageURL);
				}
			} else if(propertyName == "alternateText"){
				this.context.coachViewData.imageNode.setAttribute("alt", propertyValue);
			} else if(propertyName == "height"){
				if (!!propertyValue) {
					this.context.coachViewData.imageNode.setAttribute("height", propertyValue);
				} else {
					this.propertyChanged("@style", "");
				}
			} else if(propertyName == "width"){
				if (!!propertyValue) {
					this.context.coachViewData.imageNode.setAttribute("width", propertyValue);
				} else {
					this.propertyChanged("@style", "");
				}
			} else if(propertyName == "caption"){
				for(var i = 0; i < this.context.coachViewData.captionNodes.length; i++){
					this.context.coachViewData.captionNodes[i].innerHTML = !!propertyValue ? propertyValue : "";
				}
			} else if(propertyName == "captionVerticalPosition"){
				if(propertyValue == "above"){
					domStyle.set(this.context.coachViewData.aboveCaptionNode, "display", "");
					domStyle.set(this.context.coachViewData.belowCaptionNode, "display", "none");
				} else if(propertyValue == "below"){
					domStyle.set(this.context.coachViewData.aboveCaptionNode, "display", "none");
					domStyle.set(this.context.coachViewData.belowCaptionNode, "display", "");
				}
			} else if(propertyName == "captionHorizontalPosition"){
				if(propertyValue == "left"){
					for(var i = 0; i < this.context.coachViewData.captionNodes.length; i++){
						this.coachViewImpl_replaceWith(this.context.coachViewData.captionNodes[i], "CaptionLeft");
					}
				} else if(propertyValue == "center"){
					for(var i = 0; i < this.context.coachViewData.captionNodes.length; i++){
						this.coachViewImpl_replaceWith(this.context.coachViewData.captionNodes[i], "CaptionCenter");
					}
				} else if(propertyValue == "right"){
					for(var i = 0; i < this.context.coachViewData.captionNodes.length; i++){
						this.coachViewImpl_replaceWith(this.context.coachViewData.captionNodes[i], "CaptionRight");
					}
				}
			} else if(propertyName == "@style"){
				var layoutWidth = configHelper.getResponsiveConfigOptionValue(this, "@width");
				var layoutMinWidth = configHelper.getResponsiveConfigOptionValue(this, "@minWidth");
				var layoutHeight = configHelper.getResponsiveConfigOptionValue(this, "@height");
				var layoutMinHeight = configHelper.getResponsiveConfigOptionValue(this, "@minHeight");
				var width = configHelper.getResponsiveConfigOptionValue(this, "width");
				var height = configHelper.getResponsiveConfigOptionValue(this, "height");
				if(!width) {
					if (!!layoutWidth && layoutWidth.indexOf("px") != -1) {
						this.context.coachViewData.imageNode.setAttribute("width", layoutWidth.substring(0, layoutWidth.indexOf("px")));
					} else if (!!layoutMinWidth && layoutMinWidth.indexOf("px") != -1) {
						this.context.coachViewData.imageNode.setAttribute("width", layoutMinWidth.substring(0, layoutMinWidth.indexOf("px")));
					} else {
						this.context.coachViewData.imageNode.removeAttribute("width");
					}
				}
				if(!height) {
					if (!!layoutHeight && layoutHeight.indexOf("px") != -1) {
						this.context.coachViewData.imageNode.setAttribute("height", layoutHeight.substring(0, layoutHeight.indexOf("px")));
					} else if (!!layoutMinHeight && layoutMinHeight.indexOf("px") != -1) {
						this.context.coachViewData.imageNode.setAttribute("height", layoutMinHeight.substring(0, layoutMinHeight.indexOf("px")));
					} else {
						this.context.coachViewData.imageNode.removeAttribute("height");
					}
				}
			}
		}));	
    }
};