<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> 
<%@ page session="false" %>
<!doctype html>
<html lang="ko" style="min-width:300px !important;overflow:hidden">
<head>
	<link rel="stylesheet" type="text/css" href="${contextRoot }/css/common.css" />
	<link rel="stylesheet" type="text/css" href="${contextRoot }/css/main.css" />
	<link rel="stylesheet" type="text/css" href="${contextRoot }/css/popupLayout.css" />
</head>
<body>
	<section id="contents">
		<article>
		<h2>파일 다운로드</h2>
		<table class="table_type4">
			<colgroup>
				<col width="20%">
			</colgroup>
			<tbody>
				<tr>
					<th>지역센터</th>
					<td>
						<select id="downloadRegionCd" onchange="getDownloadIntNo(this.value)" class="select w80">
							<option value="">선택</option>
							<c:forEach var="item" items="${centerList }">
							<option value="${item.REGION_CD }">${item.REGION_NM }</option>
							</c:forEach>
						</select>
					</td>
				</tr>
				<tr>
					<th>제어기번호</th>
					<td>
						<select id="strtIntNo" class="select w80">
							<option value="">----</option>
						</select> ~ 
						<select id="endIntNo" class="select w80">
							<option value="">----</option>
						</select>
						<a class="btn2 ml5" href="javascript:void(0)" id="extractTodExcel">다운로드</a>
					</td>
				</tr>
			</tbody>
		</table>
		<img src="/images/dataLoading.jpg" class="excelDataLoading" />
		</article>
	</section>
	<script src="${contextRoot }/js/common/hashmap.js"         type="text/javascript" ></script>
	<script src="${contextRoot }/js/common/common-all.js"      type="text/javascript" ></script>
	<script src="${contextRoot }/js/common/common.js"          type="text/javascript" ></script>
 	<script src="${contextRoot }/js/common/html2canvas.js" type="text/javascript" ></script>
	<script type="text/javascript">

	//엑셀다운로드..
	$(document).on('click', '#extractTodExcel', function() {
		
		var regionCd = $('#downloadRegionCd').val();
		var regionNm = $('#downloadRegionCd option:selected').text();
		var strtIntNo = $('#strtIntNo').val();
		var endIntNo = $('#endIntNo').val();
		
		if(strtIntNo == null || strtIntNo == '')
		{
			alert('제어기번호를 선택해주세요.');
			return;
		}
		
		//캡처할 제어기 위치의 좌표를 가저온다..
		var options = 'left=0,top=0,width=700,height=500';
		window.open('goStaticMap.do?regionCd='+regionCd+'&regionNm='+regionNm+'&strtIntNo='+strtIntNo+'&endIntNo='+endIntNo,'staticMap',options);
		
	});
	
	function takeIntPic(idx,regionCd,regionNm,intNo) {
        
		// 이미지 지도에서 마커가 표시될 위치입니다 
        var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

        // 이미지 지도에 표시할 마커입니다
        // 이미지 지도에 표시할 마커는 Object 형태입니다
        var marker = {
            position: markerPosition
        };

        var staticMapContainer  = document.getElementById('staticMap'), // 이미지 지도를 표시할 div  
            staticMapOption = { 
                center: new kakao.maps.LatLng(33.450701, 126.570667), // 이미지 지도의 중심좌표
                level: 3, // 이미지 지도의 확대 레벨
                marker: marker // 이미지 지도에 표시할 마커 
            };    

        // 이미지 지도를 생성합니다
        var staticMap = new kakao.maps.StaticMap(staticMapContainer, staticMapOption);
        
		html2canvas(parent.$('#map')[0], {
			//flashcanvas: "/js/common/flashcanvas.min.js",
			//overflow: auto,
			//useCORS: true, // 다른사이트의리소스가있을때활성화(그러나...Access-Control-Allow-Origin 필요)
			//allowTaint: true,
			//profile: true,
			//logging: true,
			//imageTimeout:0
			//async: true,
			//foreignObjectRendering: true,
			//removeContainer: true
			//letterRendering: 1
			//background: '#000000'
		}).then(function(canvas) {
			elements.each(function() {
				//canvas.replaceWidth(this.svg);
				//var mapImg = canvas.toDataURL();
				//console.log(mapImg);
				parent.$('.addSigBottom').append(canvas);
				parent.$('.addSigBottom canvas').css('position','absolute').css('left',0).css('top','100px').css('z-index',9999);
				
				/* $.ajax({
			        type : 'post',
			        url  : 'saveIntMap.do',
			        data : 'mapImg='+mapImg+
			               '&idx='+idx+
			        	   '&regionCd='+regionCd+
			        	   '&intNo='+intNo,
			        success : function(data) {
			        	console.log('--------------------캡처파일 생성--------------------');
			        },
			        complete: function() {

			        },
			        error : function(error) {
			        	
			        }
			    }); */
			});
		});
		
	}

	function svgToCanvas (targetElem) {
		var nodesToRecover = [];
		var nodesToRemove = [];

		console.log(targetElem);

		var svgElem = $(targetElem).find('svg');
		console.log('svgLength : ' + svgElem.length);

		svgElem.each(function(index, node) {
			var canvas, xml;
			
			// canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element.
		    $.each($(this).find('[style*=em]'), function(index, el) {
		      $(this).css('font-size', getStyle(el, 'font-size'));
		    });

		    canvas = document.createElement("canvas");
		    canvas.className = "screenShotTempCanvas";
		    //convert SVG into a XML string
		    xml = (new XMLSerializer()).serializeToString(this);

		    // Removing the name space as IE throws an error
		    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

		    //draw the SVG onto a canvas
		    canvg(canvas, xml);
		    $(canvas).insertAfter(this);
		    //hide the SVG element
		    this.className = "tempHide";
		    $(this).hide();
		    
		    /* var parentNode = node.parentNode;
		    var svg = parentNode.innerHTML;

		    var canvas = document.createElement('canvas');

		    canvg(canvas, svg);

		    nodesToRecover.push({
		        parent: parentNode,
		        child: node
		    });
		    parentNode.removeChild(node);

		    nodesToRemove.push({
		        parent: parentNode,
		        child: canvas
		    });

		    parentNode.appendChild(canvas);
		    console.log(canvas); */
		});
		//$(targetElem).find('.screenShotTempCanvas').remove();
		//$(targetElem).find('.tempHide').show().removeClass('tempHide');
	
	}
	
	
	function makeExcel(regionCd,regionNm,intNo) {
		console.log('---------------------make execlFile!---------------------');
    	$.ajax({
	        type : 'post',
	        url  : 'writeSiginfoExcel.do',
	        data : 'regionCd='+regionCd+
	               '&regionNm='+regionNm+
	               '&intNo='+intNo,
	        beforeSend: function() {
	            //$('.excelDataLoading').show();
	        },
	        complete: function() {
	            //$('.excelDataLoading').hide();
	        },
	        success : function(data) {
	            //alert("파일을 다운로드하였습니다.");
	        },
	        error : function(error) {
	        	//$('.excelDataLoading').hide();
	            //alert("파일 다운로드에 실패하였습니다.");
	        }
    	});
	}
	
	</script>
</body>
</html>