<html>
<head>
		<script src="<!--[#SITE_URL;]-->/Javascript"></script>
		<style>
			.DIV_GRID 
			{
				position: absolute;
				
				width: 100px;
				height: 100px;
				border-color: #CCCCCC;
				border-style: solid;
	    		border-width: 1px;
	    		
	    		-ms-transform: rotate(45deg); /* IE 9 */
	    		-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
	    		transform: rotate(45deg);
			}
			
			
			.DIV_GRID:hover 
			{	
				border-color: #CCCCCC;
				border-style: solid;
	    		border-width: 1px;
	    		
	    		-webkit-box-shadow: inset 0 0 10px #08f;
			    -moz-box-shadow: inset 0 0 10px #08f;
			    box-shadow: inset 0 0 10px #08f;
			}
			
		</style>
</head>
<body>
	<img src="<!--[#SITE_URL;]-->/Record/household/download?PARAM_HOUSEHOLD_ID=1" />
	<form name="sample-upload-form">
		<input type="file" name="PARAM_HOUSEHOLD_IMAGE" />
		<input type="text" id="PARAM_DESCRIPTION" />
		<button type="button" onclick="SANDBOX_SEND_REQUEST();" style="width:300px;">UPLOAD</button>
		<br />
		<br />
		<br />
		<button type="button" onclick="READ_CACHE();" style="width:300px;">READ SYNC CACHE</button>
		<button type="button" onclick="FLUSH_CACHE();" style="width:300px;">FLUSH SYNC CACHE</button>
	</form>


	<input type="checkbox" id="chk">
	
	<img id="sample_image" />
	<div
		id = 'main_div' 
		style =
		"
			position: relative;
		    width: 100%;
		    height: 50%;
		    overflow: scroll;
		"
	>
		<script>
			
			var image_data = 
			[
				'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
			];
			document.getElementById('sample_image').setAttribute('src', image_data[0]);
			//var sound1 = new Audio('file:///C:/Users/user/file1.mp3'); 
			//audio.play();
			//player.pause();
			
			var element = null;
			var ROW_INDEX = 0;
			var COL_INDEX = 0;
			
			
			while(ROW_INDEX < 10)
			{
				while(COL_INDEX < 10)
				{
					element = document.createElement("div");
					document.getElementById('main_div').appendChild(element);
					
					element.className = "DIV_GRID";
					

					//element.style.top = (ROW_INDEX * 144) + 20;
					element.style.top = (ROW_INDEX * 72) + 20;
					//element.style.top = (ROW_INDEX * 65) + 15;
					
					if(ROW_INDEX % 2 == 0)
					{
						element.style.left = (COL_INDEX * 144) + 20;
						//element.style.left = (COL_INDEX * 130) + 15;
					}
					else
					{
						element.style.left = (COL_INDEX * 144) - 52;
						//element.style.left = (COL_INDEX * 130) - 57;
					}
					COL_INDEX ++;
				}
				COL_INDEX = 0;
				ROW_INDEX ++;
			}
		
			var BGM_COMPLETE = new Audio('<!--[#SITE_URL;]-->/p/status/complete.mp3');
		
		</script>
	 	 	
 	</div>
	<textarea id="HTTP_RESULT" style="width: 100%; height: 300px;"></textarea>
	
	
	<script>
	
	   	function REQUEST_RESULT(IS_SUCCESS, RESPONSE_STRING)
   		{
   			if(IS_SUCCESS === true)
   			{
   				//var JO = JSRC_JSON.REF_CREATE(RESPONSE_STRING);
   				//alert("SUCCESS: \n" + JSRC_JSON.REF_READ(JO, 'ACTION_NAME'));
   				//alert("SUCCESS: \n" + JSRC_JSON.REF_READ_ARRAY(JO, 'ACTION_NAME', '1'));
   				//if(JSRC_JSON.REF_IS_SUCCESS(JO) === true)
   				
   				
   				alert("SUCCESS: \n" + RESPONSE_STRING);
   				JSOC_ELEMENT.VAR_VALUE("HTTP_RESULT", RESPONSE_STRING);
   			}
   			else
   			{
   				alert("ERROR: \n" + RESPONSE_STRING);
   			}
   		}
   	
   		var PARAM_SET = '';		
   		function SANDBOX_SEND_REQUEST()
		{
			PARAM_SET = JSRC_HTTP.REF_ADD('sample-upload-form', 'PARAM_HOUSEHOLD_ID[]', 1);
			
			PARAM_SET = JSRC_HTTP.REF_ADD(PARAM_SET, 'PARAM_HOUSEHOLD_PROVINCE_ID[]', FLAG_BIGINT_NULL);
			PARAM_SET = JSRC_HTTP.REF_ADD(PARAM_SET, 'PARAM_HOUSEHOLD_MUNICIPALITY_ID[]', FLAG_BIGINT_NULL);
			PARAM_SET = JSRC_HTTP.REF_ADD(PARAM_SET, 'PARAM_HOUSEHOLD_BARANGAY_ID[]', FLAG_BIGINT_NULL);
			
			PARAM_SET = JSRC_HTTP.REF_ADD(PARAM_SET, 'PARAM_HOUSEHOLD_DISTRICT[]', FLAG_NVARCHAR_NULL);
			PARAM_SET = JSRC_HTTP.REF_ADD(PARAM_SET, 'PARAM_HOUSEHOLD_BARCODE[]', FLAG_NVARCHAR_NULL);
			PARAM_SET = JSRC_HTTP.REF_ADD(PARAM_SET, 'PARAM_HOUSEHOLD_CONTACT_NUMBER[]', FLAG_NVARCHAR_NULL);
			PARAM_SET = JSRC_HTTP.REF_ADD(PARAM_SET, 'PARAM_HOUSEHOLD_STATUS[]', FLAG_TINYINT_NULL);
					
			CUS_SEND_REQUEST
		    (
		    	REQUEST_RESULT,
	         	'<!--[#SITE_URL;]-->/Record/household/save',
	            '<!--[#SITE_URL;]-->/System/nonce/get',
	            PARAM_SET
	   		);	
		}
		
		function READ_CACHE()
		{
			// Sync Queue Result data
			PARAM_SET = JSRC_HTTP.REF_ADD('', 'PARAM_SYNCHRONIZE', 'null');
			
			CUS_SEND_REQUEST
		    (
		    	REQUEST_RESULT,
	         	'<!--[#SITE_URL;]-->/Synchronize/sync_server/server/queue',
	            '<!--[#SITE_URL;]-->/System/nonce/get',
	            PARAM_SET
	   		);
		}
			
		function FLUSH_CACHE()
		{
			// Clear sync cache
			PARAM_SET = JSRC_HTTP.REF_ADD('', 'PARAM_SYNCHRONIZE', 'null');
			
			CUS_SEND_REQUEST
		    (
		    	REQUEST_RESULT,
	         	'<!--[#SITE_URL;]-->/Synchronize/sync_server/server/clear',
	            '<!--[#SITE_URL;]-->/System/nonce/get',
	            PARAM_SET
	   		);
		}
		
	</script>