YNU_JEUS/app_home/Soonsu/kr/comsquare/js/control/XFormsImg.js

XFormsImg.prototype = new XFormsBindableControl;

function XFormsImg (strParentId, strAlert, strHelp, strHint, strAccesskey, strBind, bCache, strClass, bDisabled, 
					bDragMode, bDropMode, strId, nNavindex, strRef, strSrc, strStyle, strTag, bUpload, strVisibility, strUserDefineAttrib)
{
	if (!strId)
	{
		return;
	}
	
	XFormsBindableControl.call(this, strParentId, strAlert, strHelp, strHint, strAccesskey, strBind, strClass, bDisabled, strId, nNavindex, strRef, strStyle, strTag, strVisibility, strUserDefineAttrib);
	
	/**
	 * Attribute
	 */
	this.attribute["cache"] = String(bCache);
	this.attribute["src"] = strSrc;
	this.attribute["upload"] = String(bUpload);
	
	/**
	 * Property
	 */
	this.src = strSrc;
	this.upload = bUpload;
	
	this.m_heUploadUI = null;
	this.m_bUploadUIVisible = false;
	
};

XFormsImg.prototype.getBindingType = function ()
{
	return BT_SINGLE;
};

/**
* 인스턴스 데이터를 실제 컨트롤에 반영
* @return
*/
XFormsImg.prototype.refresh = function ()
{
	if (null != this.m_heControl)
	{
		var strRef = this.attribute["ref"];
		if (null != strRef && "" != strRef)
		{
			var strValue = this.getValue(strRef);
			this.setSrc(strValue);
		}
	}
};

/**
 * Attribute 값을 변경시키고 Attribute 값 변화에 맞는 동작을 수행한다.
 * @param strAttribute
 * @param strValue
 * @return
 */
XFormsImg.prototype.init = function ()
{
	XFormsBindableControl.prototype.init.call(this);
	
	var xnFrame = document.getElementById("HE___TF_ImageUploadFrame");
	if (xnFrame)
	{
		if (xnFrame.attachEvent)
		{
			xnFrame.attachEvent("onload", XFormsImg.uploadTempComplete);
		}
		else
		{
			xnFrame.addEventListener("load", XFormsImg.uploadTempComplete, false);
		}
	}
	
	if (this.upload)
	{
		this.createUploadUI();
	}
	
	var nBorderStyle = parseInt((this.m_heControl.style.border).replaceAll("px", ""));
	var nBorderLeftStyle = parseInt((this.m_heControl.style.borderLeft).replaceAll("px", ""));
	var nBorderTopStyle = parseInt((this.m_heControl.style.borderTop).replaceAll("px", ""));
	var nBorderRightStyle = parseInt((this.m_heControl.style.borderRight).replaceAll("px", ""));
	var nBorderBottomStyle = parseInt((this.m_heControl.style.borderBottom).replaceAll("px", ""));
	if ("" != nBorderStyle && null != nBorderStyle)
	{
		if ("" != nBorderLeftStyle && null)
		{
			this.m_heControl.style.borderLeft = nBorderLeftStyle;
		}
	}	
	this.resizeControl();
};

XFormsImg.prototype.createUploadUI = function ()
{
	this.m_heUploadShadowUI = document.createElement("div");
	this.m_heUploadShadowUI.style.position = "absolute";
	this.m_heUploadShadowUI.style.backgroundColor = "#FFFFFF";
	this.m_heUploadShadowUI.style.visibility = "hidden";
	this.m_heUploadShadowUI.style.filter = "alpha(opacity = 50)";
	this.m_heUploadShadowUI.style.opacity = 0.5;
	this.m_heUploadShadowUI.style.top = this.getAttribute("top");
	this.m_heUploadShadowUI.style.left = this.getAttribute("left");
	this.m_heUploadShadowUI.style.width = this.getAttribute("width");
	this.m_heUploadShadowUI.style.height = this.getAttribute("height");
	this.m_heControl.parentNode.appendChild(this.m_heUploadShadowUI);

	this.m_heUploadUI = document.createElement("div");
	this.m_heUploadUI.setAttribute("id", "HE_" + this.id);
	this.m_heUploadUI.style.position = "absolute";
	this.m_heUploadUI.style.visibility = "hidden";
	this.m_heUploadUI.style.top = this.getAttribute("top");
	this.m_heUploadUI.style.left = this.getAttribute("left");
	this.m_heUploadUI.style.width = this.getAttribute("width");
	this.m_heUploadUI.style.height = this.getAttribute("height");
	this.m_heUploadUI.style.overflow = "hidden";
	this.m_heControl.parentNode.appendChild(this.m_heUploadUI);
	
	var heDetachButton= document.createElement("button");
	heDetachButton.id = "HE_" + this.id + ".detach";
	heDetachButton.style.position = "absolute";
	heDetachButton.style.right = "4px";
	heDetachButton.style.top = "4px";
	heDetachButton.style.width = "16px";
	heDetachButton.style.height = "16px";
	heDetachButton.style.backgroundColor = "transparent";
	heDetachButton.style.backgroundImage = "url(" + __getAppName() + "/kr/comsquare/image/img/detach.gif)";
	heDetachButton.style.backgroundRepeat = "no-repeat";
	heDetachButton.style.backgroundPosition = "center";
	heDetachButton.style.borderStyle = "none";
	heDetachButton.onclick = function ()
	{
		XFormsImg.deleteFile(this.id);
	};
	this.m_heUploadUI.appendChild(heDetachButton);
	
	var objDetach = new XFormsButton(this.id, "", "", "", "", "", false, "", "", false, false, "", "", "", this.id+".detach", -1, "", "", -1, false, "", "xforms:button", "visible");
	objDetach.init();
	
	var heAttachDiv= document.createElement("div");
	heAttachDiv.id = "HE_" + this.id + ".attach";
	heAttachDiv.style.position = "absolute";
	heAttachDiv.style.left = "50%";
	heAttachDiv.style.top = "50%";
	heAttachDiv.style.width = "32px";
	heAttachDiv.style.height = "32px";
	heAttachDiv.style.fontSize = "0pt";
	heAttachDiv.style.overflow = "hidden";
	heAttachDiv.style.backgroundImage = "url(" + __getAppName() + "/kr/comsquare/image/img/attach.gif)";
	heAttachDiv.style.backgroundRepeat = "no-repeat";
	heAttachDiv.style.backgroundPosition = "center";
	this.m_heUploadUI.appendChild(heAttachDiv);

	var objAttach = new XFormsButton(this.id, "", "", "", "", "", false, "", "", false, false, "", "", "", this.id+".attach", -1, "", "", -1, false, "", "xforms:button", "visible");
	objAttach.init();
	
	heAttachDiv.style.marginLeft = (heAttachDiv.offsetWidth/-2)+"px";
	heAttachDiv.style.marginTop = (heAttachDiv.offsetHeight/-2)+"px";

	var heAttachForm = document.createElement("form");
	heAttachForm.id = "HE___TF_ImageUploadForm_" + this.id;
	heAttachForm.name = "HE___TF_ImageUploadForm_" + this.id;
	heAttachForm.action = __getAppName() + "/FileUpload.tfs";
	heAttachForm.method = "post";
	heAttachForm.encoding = "multipart/form-data";
	heAttachForm.enctype = "multipart/form-data";
	heAttachForm.target = "HE___TF_ImageUploadFrame";
	heAttachForm.style.backgroundColor = "transparent";
	heAttachDiv.appendChild(heAttachForm);

	this.createUploadFileInput();
};

XFormsImg.prototype.createUploadFileInput = function (heAttachForm)
{
	var heAttachForm = document.getElementById("HE___TF_ImageUploadForm_" + this.id);
	var heAttachFileOld = document.getElementById("HE_ImageInput_" + this.id);
	if (heAttachFileOld) heAttachForm.removeChild(heAttachFileOld);
	
	var heAttachFile = document.createElement("input");
	heAttachFile.id = "HE_ImageInput_" + this.id;
	heAttachFile.name = "HE_ImageInput_" + this.id;
	heAttachFile.type = "file";
	heAttachFile.onchange = function ()
	{
		var strControlId = this.parentNode.id.replace("HE___TF_ImageUploadForm_", "");
		XFormsImg.submitFile(strControlId);
		document.controls.item(strControlId).createUploadFileInput();
	};

	heAttachFile.style.position = "absolute";
	heAttachForm.appendChild(heAttachFile);

	var heAttachDiv= document.getElementById("HE_" + this.id + ".attach");
	var nButtonHeight = heAttachDiv.offsetHeight;
	var nButtonWidth = heAttachDiv.offsetWidth;

	heAttachFile = document.getElementById("HE_ImageInput_" + this.id);
	heAttachFile.style.filter = "alpha(opacity = 0)";
	heAttachFile.style.opacity = 0;
	heAttachFile.style.height = nButtonHeight + "px";
	heAttachFile.style.top = ((heAttachDiv.offsetHeight/2)-(heAttachFile.offsetHeight/2))+"px";
	
	if (is_ie)
	{
		heAttachFile.style.width = "0px";
		if (nButtonWidth < 95)
		{
			heAttachFile.style.left = (nButtonWidth-heAttachFile.offsetWidth)+"px";
		}
		else
		{
			heAttachFile.style.left = ((nButtonWidth/2)-heAttachFile.offsetWidth+47)+"px";
		}
	}
	else if (is_firefox)
	{
		heAttachFile.size = "1";
		if (nButtonWidth < 87)
		{
			heAttachFile.style.left = (nButtonWidth-heAttachFile.offsetWidth)+"px";
		}
		else
		{
			heAttachFile.style.left = ((nButtonWidth/2)-heAttachFile.offsetWidth+43)+"px";
		}
	}
	else if (is_opera)
	{
		heAttachFile.style.width = "57px";
		if (nButtonWidth < 58)
		{
			heAttachFile.style.left = (nButtonWidth-heAttachFile.offsetWidth)+"px";
		}
		else
		{
			heAttachFile.style.left = ((nButtonWidth/2)-heAttachFile.offsetWidth+29)+"px";
		}
	}
	else
	{
		heAttachFile.style.width = nButtonWidth+"px";
		heAttachFile.style.left = "0px";
	}
};

XFormsImg.prototype.showUploadUI = function ()
{
	if (this.upload)
	{
		this.m_bUploadUIVisible = true;
		this.m_heUploadUI.style.visibility = "visible";
		this.m_heUploadShadowUI.style.visibility = "visible";
		
		var nTop = this.getAttribute("top");
		var nLeft = this.getAttribute("left");
		var nWidth = this.getAttribute("width");
		var nHeight = this.getAttribute("height");
		
		this.m_heUploadUI.style.top = parseInt(nTop) +"px";
		this.m_heUploadUI.style.left = parseInt(nLeft) +"px";
		this.m_heUploadUI.style.width = parseInt(nWidth) +"px";
		this.m_heUploadUI.style.height = parseInt(nHeight) +"px";
	}
};

XFormsImg.prototype.hideUploadUI = function ()
{
	if (this.upload)
	{
		this.m_bUploadUIVisible = false;
		this.m_heUploadUI.style.visibility = "hidden";
		this.m_heUploadShadowUI.style.visibility = "hidden";
	}
};

XFormsImg.prototype.deleteFile = function (strId)
{
	if ("" != this.src)
	{
		this.setSrc("");
		model.setValue(this.attribute["ref"], "");
	}
};

XFormsImg.prototype.submitFile = function ()
{
	var heInput = document.getElementById("HE_ImageInput_" + this.id);
	var heForm = document.getElementById("HE___TF_ImageUploadForm_" + this.id);
	heForm.submit();
};

XFormsImg.prototype.setAttachedFile = function (strFileName, strTempName)
{
	var strImgPath = __getAppName() + "/kr/comsquare/upload/" + model.getSessionId() + "/" + strTempName;
	this.setSrc(strImgPath);
	
	this.setValue(strFileName + "|" + strTempName);
};

XFormsImg.prototype.setAttribute = function (strAttribute, strValue)
{
	XFormsBindableControl.prototype.setAttribute.call(this, strAttribute, strValue);
	switch (strAttribute)
	{
		case "cache" :
		{
			this.attribute["cache"] = strValue;
			break;	
		}
		case "src" :
		{
			// Attribute 변경
			this.attribute["src"] = strValue;
			// Property 변경
			this.src = strValue;
			// HTML 적용
			this.m_heControl.src = strValue;
			break;
		}
	}
};

XFormsImg.prototype.setSrc = function (strSrc)
{
	if (this.upload && -1 < strSrc.indexOf("|"))
	{
		var arImageName = strSrc.split("|");
		if (2 == arImageName.length)
		{
			strSrc = __getAppName() + "/kr/comsquare/upload/" + model.getSessionId() + "/" + arImageName[1];
		}
	}
	
	if (this.src != strSrc)
	{
		// Attribute 변경
		this.attribute["src"] = strSrc;
		// Property 변경
		this.src = strSrc;
		// HTML 적용
		this.m_heControl.src = strSrc;
	}
};

XFormsImg.prototype.onClick = function (event)
{
	XFormsBindableControl.prototype.onClick.call(this, event);
	
	if (is_smartphone && this.upload)
	{
		(this.m_bUploadUIVisible) ? this.hideUploadUI() : this.showUploadUI(); 
	}
};

XFormsImg.prototype.onMouseEnter = function (event)
{
	XFormsBindableControl.prototype.onMouseEnter.call(this, event);
	
	if (this.upload)
	{
		this.showUploadUI();
	}
};

XFormsImg.prototype.onMouseOut = function (event)
{
	XFormsBindableControl.prototype.onMouseOut.call(this, event);

	if (this.upload && event.ptarget.parent != this && event.ptarget != this)
	{
		this.hideUploadUI();
	}
};

XFormsImg.deleteFile = function (strId)
{
	var objImage = document.controls.item(strId);
	if (null != objImage && objImage instanceof XFormsImg)
	{
		objImage.deleteFile();
	}
};

XFormsImg.submitFile = function (strId)
{
	var objImage = document.controls.item(strId);
	if (null != objImage && objImage instanceof XFormsImg)
	{
		objImage.submitFile();
	}
};

XFormsImg.uploadTempComplete = function ()
{
	var xnFrameDoc = document.getElementById("HE___TF_ImageUploadFrame").contentWindow.document;
	var strReturnXML;

	if (is_ie)
	{
		if (xnFrameDoc.XMLDocument) strReturnXML = xnFrameDoc.XMLDocument.xml;
	}
	else
	{
		var serializer = new XMLSerializer();
		strReturnXML = serializer.serializeToString(xnFrameDoc);
	}
	
	if (strReturnXML)
	{
		var xnReturn = XmlLib.loadXMLFromString(strReturnXML);
		if (xnReturn.selectSingleNode("/root"))
		{
			var xnTagName = xnReturn.selectSingleNode("/root/tagName");
			var xnFileName = xnReturn.selectSingleNode("/root/fileName");
			var xnTempName = xnReturn.selectSingleNode("/root/tempName");
			var strTagName = XmlLib.getTextValue(xnTagName);
			var strFileName = XmlLib.getTextValue(xnFileName);
			var strTempName = XmlLib.getTextValue(xnTempName);
			
			var objImg = document.controls.item(strTagName.substr("HE_ImageInput_".length));
			if (null != objImg)
			{
				objImg.setAttachedFile(strFileName, strTempName);
			}
		}
	}
};

XFormsImg.create = function (strParentId, clAttribute, strStyle)
{
	// 메인노드 생성
	var xnImg = XFormsImg.createMainNode(clAttribute);
	var xnParent = document.getElementById("HE_" + strParentId);
	xnParent.appendChild(xnImg);

	// 하위노드 생성
	xnImg = XFormsImg.createSubNodes(xnImg, clAttribute);

	// object 생성
	return XFormsImg.createObject(strParentId, xnImg, clAttribute, strStyle);
};

XFormsImg.createMainNode = function (clAttribute)
{
	var xnImg = document.createElement("img");
	xnImg.setAttribute("alt", this.id);
	
	xnImg = XFormsImg.createAttribute(xnImg, clAttribute);
	return xnImg;
};

XFormsImg.createSubNodes = function (xnImg, clAttribute)
{
	return xnImg;
};

XFormsImg.createObject = function (strParentId, xnImg, clAttribute, strStyle)
{
	var strAlert = "";
	var strHelp = "";
	var strHint = "";
	var strAccesskey = "";
	var strBind = "";
	var bCache = true;
	var strClass = "";
	var bDisabled = false;
	var bDragMode = false;
	var bDropMode = false;
	var strId = "";
	var nNavindex = 9007199254740992;
	var strRef = "";
	var strSrc = "";
	var bUpload = false;
	var strVisibility = "visible";
	var strUserDefineAttrib = "";
	
	for (var i=0; i<clAttribute.count(); i++)
	{
		var strAttributeName = clAttribute.keys()[i];
		switch (strAttributeName)
		{
			case "alert" :
			{
				strAlert = clAttribute.item(strAttributeName);
				break;
			}
			case "help" :
			{
				strHelp = clAttribute.item(strAttributeName);
				break;
			}
			case "hint" :
			{
				strHint = clAttribute.item(strAttributeName);
				break;
			}
			case "accesskey" :
			{
				strAccesskey = clAttribute.item(strAttributeName);
				break;
			}
			case "bind" :
			{
				strBind = clAttribute.item(strAttributeName);
				break;
			}
			case "cache" :
			{
				if ("false" == clAttribute.item(strAttributeName))
				{
					bCache = false;
				}
				break;
			}
			case "class" :
			{
				strClass = clAttribute.item(strAttributeName);
				break;
			}
			case "disabled" :
			{
				if ("true" == clAttribute.item(strAttributeName))
				{
					bDisabled = true;
				}
				break;
			}
			case "dragmode" :
			{
				if ("true" == clAttribute.item(strAttributeName))
				{
					bDragMode = true;
				}
				break;
			}
			case "dropmode" :
			{
				if ("true" == clAttribute.item(strAttributeName))
				{
					bDropMode = true;
				}
				break;
			}
			case "id" :
			{
				strId = clAttribute.item(strAttributeName);
				break;
			}
			case "navindex" :
			{
				nNavindex = parseInt(clAttribute.item(strAttributeName));
				break;
			}
			case "ref" :
			{
				strRef = clAttribute.item(strAttributeName);
				break;
			}
			case "src" :
			{
				strSrc = clAttribute.item(strAttributeName);
				break;
			}
			case "visibility" :
			{
				strVisibility = clAttribute.item(strAttributeName);
				break;
			}
			
			default :
			{
				if (!STYLE_LIST[strAttributeName])
				{
					strUserDefineAttrib += strAttributeName + ":" + clAttribute.item(strAttributeName) + "; ";
				}
				break;
			}
		}
	}
	var objImg = new XFormsImg (strParentId, strAlert, strHelp, strHint, strAccesskey, strBind, bCache, strClass, bDisabled, bDragMode, bDropMode, strId, nNavindex, strRef, strSrc, strStyle, "xforms:img", bUpload, strVisibility, strUserDefineAttrib);
	return objImg;
};

XFormsImg.createAttribute = function (xnHtmlNode, clAttribute)
{
	xnHtmlNode = XFormsBindableControl.createAttribute(xnHtmlNode, clAttribute);
	return xnHtmlNode;
};