﻿	function showPicture()
	{
		var sUrl='../ajaxserver/tinanh.aspx';		
		sendRequest(sUrl,null,'GET');
	}
	//call-back function
	function showThumbnailPicture()
	{
		
		if (XmlHTTP.readyState == STATE_COMPLETED)
		{
			if (XmlHTTP.status == 200)
			{				
				var tblPictureBody = document.getElementById("tblPictureBody");
				
				//remove all old thumbnail pictures
				while (tblPictureBody.hasChildNodes())
				{
					tblPictureBody.removeChild(tblPictureBody.firstChild);
				}
				
				var pictureList = XmlHTTP.responseXML.selectNodes("//Anh");		
				var tblFullPicture = document.getElementById('tblFullPicture')
				alert(pictureList.length);
				if (pictureList.length == 0) 
					return;
				
				var oImg, strPictureDescription, oPictureDescription, strPicturePath ;
				for(var i=0; i<pictureList.length; i++)
				{
					strPicturePath = pictureList[i].getElementsByTagName("AnhLon")[0].firstChild.nodeValue;
					strPictureDescription = pictureList[i].getElementsByTagName("ChuThich")[0].firstChild.nodeValue;
					oPictureDescription = document.createTextNode(strPictureDescription);
					var strNewImage = "<img onclick=\"showFullPicture('" 
					+ strPicturePath + 	"','" + strPictureDescription + "');\" border='0' style='filter:alpha(opacity=70)'"
					+ " onmouseover='high(this); style.cursor=\"hand\"; "
					+ " window.status=\"Click chuột để xem ảnh...\"' onmouseout='window.status=window.defaultStatus;low(this)'>";										
					
					oImg = document.createElement(strNewImage);					
					oImg.setAttribute("src",pictureList[i].getElementsByTagName("AnhNho")[0].firstChild.nodeValue);					
					addTableCell(oImg, false);								
					addTableCell(oPictureDescription, true);
				}//for			
			}//status==200
				
		}//STATE_COMPLETED
	}
	//append mot node picture vao bang tblPicture
	function addTableCell(childNode, isDescription)
	{
		var oRow, oCol;
		oRow = document.createElement("TR");
		oCol = document.createElement("<TD class=\"Chuthich\""+(isDescription?" style=\"PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px\"":"")+">");
		oCol.appendChild(childNode);
		oRow.appendChild(oCol);
		document.getElementById("tblPictureBody").appendChild(oRow);
	}
	//Xem anh lon trong mot the div co z-index > 0
	function showFullPicture(picturePath, pictureDescription)
	{		
		var tblFullPictureBody = document.getElementById("tblFullPictureBody");		
		var oImg;		
		oImg = document.createElement("IMG");		
		oImg.setAttribute("src", picturePath);
		var oDescription = document.createTextNode(pictureDescription);		
		//clear prev picture
		var tdFullPicture = document.getElementById("tdFullPicture");		
		var tdDescription = document.getElementById("tdDescription");
		if (tdFullPicture.hasChildNodes())
		{
			tdFullPicture.firstChild.replaceNode(oImg);
			tdDescription.firstChild.replaceNode(oDescription);
		}	
		else
		{
			tdFullPicture.appendChild(oImg);
			tdDescription.appendChild(oDescription);
		}		
		toggleVisibility("divFullPicture","visible");	
		resizePicture(oImg);//resizing picture			
		alignDivFullPicture();		
	}

	function alignDivFullPicture()
	{		
		document.getElementById("divFullPicture").style.top = document.body.scrollTop + 100;
		document.getElementById("divFullPicture").style.left = document.body.scrollLeft + 200;
	}	
	function toggleVisibility(div_id, feature)
	{			
		document.getElementById(div_id).style.visibility = feature;
	}	
	function resizePicture(img)
	{
		var x,y;
		x=img.height;
		y=img.width;
		//alert(y);
		if(y>500)
		{
			//y=x*img1.width / img1.height; 
			y=500;
			x=img.height*y / img.width;
			img.height=x;
			img.width=y;
		}
	}	
	function showLoadingPicture(targetElement)
	{
		//show Loading picture
		var oRow, oCol,oImg;
		oRow = document.createElement("TR");
		oCol = document.createElement("<TD align=center>");
		oImg = document.createElement("<img src=Images/loading.gif>");
		oCol.appendChild(oImg);
		oCol.appendChild(document.createElement("BR"));		
		oCol.appendChild(document.createTextNode("Loading...Please wait"));
		oRow.appendChild(oCol);
		document.getElementById(targetElement).appendChild(oRow);	
		return oRow;
	}
	function hideLoadingPicture(oRow)
	{
		//hide Loading picture
		oRow.removeNode(true);	
	}
	
	function window_onload()
	{		
		var oRow = showLoadingPicture("tblPictureBody");		
		alert('loading');
		//loading Picture List (Ajax)
		showPicture();	
		hideLoadingPicture(oRow);		
		toggleVisibility("divFullPicture","hidden");
	}	