var getValueFromCF = function(fullSuffixId){
	var cfValue = $jq("#cfield_"+fullSuffixId).val();
	if(cfValue === "null"){
		$jq("#cfield_"+fullSuffixId).val("");
		return "";
	}
	return cfValue;
};

var hasCFImg = function(fullSuffixId){
	var cfValue = getValueFromCF(fullSuffixId);
	return !ValueIsBlank(cfValue) && !endsWith(cfValue, "_todelete");
};

var getImgDeleteButton = function(fullSuffixId){
	return hasCFImg(fullSuffixId) ? '<img src="../base/img/icons/delete_icon.png">' : '';
};

var assignSize = function($obj, sizeJsonImg){
	if($jq.isEmptyObject(sizeJsonImg)){
		return false;
	}
	var $objsToModify = $obj.parent().find(".sve-cf-img-size");
	$objsToModify.css("height", sizeJsonImg["height"]);
	$objsToModify.css("width", sizeJsonImg["width"]);
};

var getTemplateImgHTML = function(fullSuffixId){
	return '<div class="qq-uploader sve-cf-img sve-cf-img-size" style="position:relative;" >'
	+ '<pre class="qq-upload-drop-area"><span></span></pre>'
	+ '<div class="qq-upload-button btn btn-success overlay sve-cf-img-size"></div>'
	+ '<ul class="qq-upload-list" style="margin-top:1px; position:absolute; top:0; right:0;">'
	+ '<li id="thumb"><a class="qq-upload-delete" href="#"> '+getImgDeleteButton(fullSuffixId)+' </a></li> </ul>'
	+ '</div>'
};

function initializeUploaderCFImg($obj){
	var fullSuffixId = $obj.attr("fullSuffixId");
	var cfKey = getValueFromCF(fullSuffixId);	
	var uploader = new qq.FineUploader({
		element : $obj[0],
		request : {
			endpoint : urlUploadImgCustomField+"&cfKey="+cfKey+"&fullSuffixId="+fullSuffixId+"&ts="+new Date().getTime(),
			forceMultipart : true,
			inputName : 'image'+fullSuffixId
		},		
		deleteFile: {
	        enabled: true,
	        forceConfirm: true,
	        endpoint: urlDeleteImgCustomField+"&cfKey="+cfKey,
	    },					
		callbacks : {
			onComplete : function(id, fileName, responseJSON) {
				if (responseJSON.success) {
					$jq("#cfield_"+fullSuffixId).val(responseJSON["cfImgName"]);
					uploadCFImgComplete(responseJSON, $obj);	
				}
			},
			onError : function(id, fileName, errorReason) {
				showUploadError(local_msgInformation, errorReason);
			}
		},
		template : getTemplateImgHTML(fullSuffixId),
	});	
	$obj.find(".qq-upload-delete").unbind("click").click(function() {
		deleteCFImg($obj); 
		return false;
	});
}

var loadImgExistentWithStyle = function($obj){
	var cfKey = getValueFromCF($obj.attr("fullSuffixId"));
	$obj.css("background-image","url("+urlLoadCFImageFromVeFile+"&cfKey="+cfKey+"&ts="+new Date().getTime()+")");
	$obj.css("background-size","cover");
	$obj.css("background-repeat","no-repeat");
	$obj.css("background-position","center center");
	$obj.addClass("sve-cf-img-size");
};

var processCFImage = function($obj){
	loadImgExistentWithStyle($obj);
	initializeUploaderCFImg($obj);
};

function uploadCFImgComplete(uploadResult, $obj){
	 if( uploadResult['status'] === '200'){
	 	processCFImage($obj);
	 	assignSize($obj, uploadResult);
	 }else{
		showUploadError(local_msgInformation, uploadResult['msg']);
	 }
}

var getJsonSizeFromObj = function($obj){
	return JSON.parse(unescape($obj.attr("sizejson")));
};

function deleteCFImg($obj){
	var fullSuffixId = $obj.attr("fullSuffixId");
	var cfValue = getValueFromCF(fullSuffixId);
	$jq("#cfield_"+fullSuffixId).val(cfValue+"_todelete");
	processCFImage($obj);
	assignSize($obj, getJsonSizeFromObj($obj));
}

var isReadOnlyObject = function($obj){
	return $obj.attr("readonlydiv") === "true";
};

var initializeCFImageFromSelector = function($selector){
	$selector.each(function(){
		var $obj = $jq(this);
		if(isReadOnlyObject($obj)){
			$obj.html($jq("<img>",{
				src: urlLoadCFImageFromVeFile+"&cfKey="+getValueFromCF($obj.attr("fullSuffixId"))+"&ts="+new Date().getTime(),
				class: "sve-cf-img-size"
			}));
			return true;
		}
		processCFImage($obj);
		assignSize($obj, getJsonSizeFromObj($obj));
	});
};

var initializeCFImageStep = function(step){
	var $stepTable = $jq(`div#div${step}`);
	var $selector = $stepTable.find("div[id^=cfield][id$=image]");
	initializeCFImageFromSelector($selector);
};

var initializeCFImage = function(){
	var $selector = $jq("div[id^=cfield][id$=image]");
	initializeCFImageFromSelector($selector);
};