/************
***Global variable declaration***
************/
var dbody=document.getElementById("colLtHome");
//var tto1=document.Show.TT.style, st2, c2,ttx="";
var tdiv = document.createElement('div');
var img = img_high=new Image();//Icons for PN objects
var btn_val=1, mapdiv_left, mapdiv_top;
var nopt, i, j, k, l, objCount, count=0;//count=no. of times mouse is scrolled
var xy=[]; var lyrdsp=[];//xy= [1,1,1,5,7,5,6,4,2,3,1,1], xy1=[];
var dw, dh, sf, zf, xo, yo;
var cnv, ctx, cimg;
//var xmin=1000000, ymin=1000000,xmax=0,ymax=0;
var xmin,ymin,xmax,ymax;
//var divisor, lyr_num, lyr_info, line_num;
var sclm, lyrcnt, str_index;
var lyr_arr=[];//layer array containing checked layers
var temp_arr=[];
var lyr_num=[];//Layer Number
var lyr_nm=[];//Layer Name
var lyr_typ=[];//Layer Type (PG/PL/PN)
var lyr_img=[];//Layer Img Name
var lyr_no_ob=[];//No of objects
var lyr_col=[];//Layer Color
var lyr_txt_ht=[];//Layer base height
var lyr_txt_ht_min=[];//Layer text minima
var lyr_txt_ht_max=[];//Layer text maxima
var obj_data=[];
var obj_name=[];
var text_nm=[];
var temp_map_data, obj_count, query_data = [];
//var first_set, conv_first_set, x_coord;
var st_mousex, st_mousey, en_mousex, en_mousey, mousedown = false, wd, ht;
var checkbox, num_check;
cnv = document.getElementById("map");
//var cola=["#FFEEEE","#FFCCCC","#FF9999","#FF6666","#FF3333","#FF0000"];
/************
***Global variable declaration***
************/

/************
***Display area for***
***map, menu and other features***
************/
dbody.style.overflow="hidden";

tdiv.innerHTML="<span id=\"tt\"></span>";
dbody.appendChild(tdiv.children[0]);

//var tmesg=document.getElementById("tmesg");
var tt=document.getElementById("tt");
/************
***Display area for***
***map, menu and other features***
************/

var screenWidth, screenHeight, tx, ty;
screenWidth=screen.width; screenHeight=screen.height;

/************
***Function call on Window load***
************/

/************
***Mousewheel functions***
************/
//}

/*window.onscroll = function(){
	myFunction();
}*/
if(screenWidth <= 480) {
	$(window).one('scroll',function() {
		   // Stuff
		if($(window).scrollTop() >= sticky){
	    	showModal();
	    	//offScrollHandler();
	    	setTimeout(offScrollHandler, 2000);
		}
	});
}
else if(screenWidth >= 481 && screenWidth <= 800) {
	window.onload = function(){
		offScrollHandler();
	}
	$(window).one('scroll',function() {
		   // Stuff
		if($(window).scrollTop() >= sticky){
	    	showModal();
	    	//offScrollHandler();
	    	setTimeout(offScrollHandler, 2000);
		}
	});
}
else{
	/*$(window).scroll(function() {
	    if($(document).scrollTop() >= sticky)
	    	showModal();
	    	//offScrollHandler();
	    	setTimeout(offScrollHandler, 2000);
	});*/
	$(window).one('scroll',function() {
		   // Stuff
		if($(window).scrollTop() >= sticky){
	    	showModal();
	    	//offScrollHandler();
	    	setTimeout(offScrollHandler, 2000);
		}
	});
}

function offScrollHandler(){
	readMap();
	rszWindow();
	dispLayer();//call layer display function
	map_display();//call map display function
	cnv.addEventListener("mousemove", function(e){
		ftt(e);
	})//mousemove ends
	hideModal();
}
/************
***Function call on Window load***
************/

/************
***Read Map Coordinates & Data***
************/
function readMap(){
	 temp_map_data = map_data[0].split("~");
	 xmin=Number(temp_map_data[0]);//X-minimum
	 ymin=Number(temp_map_data[1]);//Y-minimum
	 xmax=Number(temp_map_data[2]);//X-maximum
	 ymax=Number(temp_map_data[3]);//Y-maximum
	 sclm=Number(temp_map_data[4]); //100000
	 lyrcnt=Number(temp_map_data[5]);//No of Layers

	 for(i=0; i<lyrcnt; i++) {
		 temp_map_data=map_data[i+1].split("~");
		 lyr_num[i]=Number(temp_map_data[0]);//Layer Number
		 lyr_nm[i]=temp_map_data[1];//Layer Name
		 lyr_typ[i]=temp_map_data[2];//Layer Type (PG/PL/PN/TX)
		 lyr_no_ob[i]=Number(temp_map_data[3]);//No of objects
		 lyr_col[i]="#"+temp_map_data[4];//Layer Color
		 lyr_txt_ht[i]=temp_map_data[5];
		 lyr_txt_ht_min[i]=temp_map_data[6];
		 lyr_txt_ht_max[i]=temp_map_data[7];
		 obj_data[i]=[];
		 xy[i]=[];
	 }

	 for(i=0,objCount=lyrcnt+1;i<lyrcnt; i++){
		 for(j=0;j<lyr_no_ob[i];j++) {
			 temp_map_data=map_data[objCount].replace(/z/g,"\\").split("~");
			 obj_count = temp_map_data[4];

			 objCount++;
			 xy[temp_map_data[0]-1][temp_map_data[1]-1]=[];

			 for(k=0;k<obj_count;k++) {
				 //alert("In");
				 xy[temp_map_data[0]-1][temp_map_data[1]-1][k]=[];
				 xy[temp_map_data[0]-1][temp_map_data[1]-1][k][0]=(temp_map_data[2].charCodeAt(8*k)-40)*512000+(temp_map_data[2].charCodeAt(8*k+1)-40)*6400+(temp_map_data[2].charCodeAt(8*k+2)-40)*80+(temp_map_data[2].charCodeAt(8*k+3)-40);
				 xy[temp_map_data[0]-1][temp_map_data[1]-1][k][1]=(temp_map_data[2].charCodeAt(8*k+4)-40)*512000+(temp_map_data[2].charCodeAt(8*k+5)-40)*6400+(temp_map_data[2].charCodeAt(8*k+6)-40)*80+(temp_map_data[2].charCodeAt(8*k+7)-40);
				 
				 if(lyr_typ[i]=="TX") xy[temp_map_data[0]-1][temp_map_data[1]-1][k][2] = temp_map_data[2].substr(13);
				 else xy[temp_map_data[0]-1][temp_map_data[1]-1][k][2]=temp_map_data[3];//layer name

				 xy[temp_map_data[0]-1][temp_map_data[1]-1][k][3]=temp_map_data[1];//obj id
				 //console.log(i + " : " + xy[temp_map_data[0]-1][temp_map_data[1]-1][k][3] +" : " + xy[temp_map_data[0]-1][temp_map_data[1]-1][k][2])
			 }
		 }
	 }
}
/************
***Read Map Coordinates & Data***
************/

/************
***Scale Factor calculation***
************/
function rszWindow(){
	//get origin x, y of map container div
	mapdiv_left = Math.round(document.getElementById("colLtHome").getBoundingClientRect().left);
	mapdiv_top = Math.round(document.getElementById("colLtHome").getBoundingClientRect().top);
	
	tx=15; 
	if(screenWidth <= 480) {
		ty=-160;
	 }
	 else if(screenWidth >= 481 && screenWidth <= 800) {
		 ty=-280;		 
	 }
	 else if(screenWidth >= 801 && screenWidth <= 1100) {
		 ty=-50;		 
	 }
	 else{
		 ty=-30;
	 }	
	
	cnv.parentNode.removeChild(cnv);
	var rt1=document.getElementById("div_map").getBoundingClientRect();
	dw=Math.round(rt1.width); dh=Math.round(rt1.height);
	
	cnv = document.createElement("canvas");//create canvas
	cnv.width = dw;
	cnv.height = dh;
	/*cnv.style.border = "1px black solid";*/
	cnv.style.position="absolute";
	cnv.id = "map";
	document.getElementById("div_map").appendChild(cnv);

	var sfx = (xmax-xmin)/dw;
	var sfy = (ymax-ymin)/dh;

	if(sfx>sfy){
		sf = sfx;
	}else {
		sf = sfy;
	}

	xo = (xmax+xmin-dw*sf)/2;
	yo = (ymax+ymin-dh*sf)/2;

	//map_display();
}
/************
***Scale Factor calculation***
************/

/************
***Display Layer***
************/
function dispLayer(){
	temp_arr = "<table style=\"width: 100%;\"><thead><tr><td colspan=\"2\" style=\"background: antiquewhite; text-align: center; font-weight: blue;\">Layers</td></tr></thead><tbody>"
	for(i=0; i<lyrcnt; i++){
		if(lyr_typ[i]!="TX"){
			if(lyr_num[i]==1 || lyr_num[i]==2 || lyr_num[i]==3){
				temp_arr += "<tr><td style=\"width: 90%;\"><input name=\"checkLyr\" type=\"checkbox\" id=\""+lyr_nm[i]+"\" value=\""+lyr_num[i]+"\" checked=\"checked\" disabled=\"disabled\">"+lyr_nm[i]+"</td>";//+"<td><img id=\"customIcon_"+lyr_typ[i]+"\" src=\"images/"+lyr_nm[i]+".png\" /></td>"+"</tr>";
			}//for default ON layers
			else{
				temp_arr += "<tr><td style=\"width: 90%;\"><input name=\"checkLyr\" type=\"checkbox\" onclick=\"cbval(this, this.value, 'dyn');\" id=\""+lyr_nm[i]+"\" value=\""+lyr_num[i]+"\">"+lyr_nm[i]+"</td>";//+"<td><img id=\"customIcon_"+lyr_typ[i]+"\" src=\"images/"+lyr_nm[i]+".png\" /></td>"+"</tr>";
			}//for other layers
		}
	}
	temp_arr += "</tbody></table>"
	document.getElementById("contLyr").innerHTML = temp_arr;
	//cbval("checkLyr",1,"def");
	cbval();
}

/************
***Display Layer***
************/

/************
***Map Display***
************/
function cbval(){
	var checkboxes = document.getElementsByName("checkLyr");
    // loop over them all
    for (var i=0; i<checkboxes.length; i++) {
        // And stick the checked ones onto an array...
        if (checkboxes[i].checked) {
        	lyrdsp.push(i);
        	map_display();
        }
    }
}

function map_display(){
	//get all the checkboxes checked by default
	/*checkbox=document.querySelectorAll('input[type=checkbox]:checked');//get all checked layers
	num_check=checkbox.length;*/

	ctx = cnv.getContext("2d");//create canvas context
	ctx.clearRect(0, 0, cnv.width, cnv.height);

	for(k=0;k<lyrcnt; k++){
		//alert(lyrdsp.length);
		/*for(l=0;l<lyrdsp.length;l++){
			if(lyrdsp[l]==lyr_num[k]){*/
				ctx.fillStyle = lyr_col[k];
				ctx.strokeStyle = "black";
				if(lyr_typ[k] == "TX"){
					ctx.font = lyr_txt_ht_max[k]+"px Arial";
					//console.log("font size: "+lyr_txt_ht_max[k]);
					/*if(Number(lyr_txt_ht[k]/sf)>lyr_txt_ht_max[k]){
						ctx.font = lyr_txt_ht_max[k]+"px Arial";
					}
					else if(Number(lyr_txt_ht[k]/sf)>=lyr_txt_ht_min[k] && Number(lyr_txt_ht[k]/sf)<=lyr_txt_ht_max[k]){
						ctx.font = Number(lyr_txt_ht[k]/sf)+"px Arial";

					}
					else continue;*/

					for(j=0;j<xy[k].length;j++){
						ctx.fillText(xy[k][j][0][2],(xy[k][j][0][0]-xo)/sf,(xy[k][j][0][1]-yo)/sf);
						ctx.beginPath();
						//ctx.arc((xy[k][j][0][0]-xo)/sf,(xy[k][j][0][1]-yo)/sf, 2, 0, 2 * Math.PI);
						ctx.fill();
					}
				}
				if(lyr_typ[k] == "PN"){
					for(j=0;j<xy[k].length;j++){
						for(i=0;i<xy[k][j].length;i++){
							//alert(lyr_nm[k]);
							img.src = document.getElementById(lyr_nm[k]).src;
							ctx.drawImage(img,(xy[k][j][i][0]-xo)/sf, (xy[k][j][i][1]-yo)/sf, 10, 10);
						}
					}
				}
				if(lyr_typ[k] == "PG"){
					ctx.beginPath();
					for(j=0;j<xy[k].length;j++){
						for(i=0;i<xy[k][j].length;i++){
							if(i==0) ctx.moveTo((xy[k][j][i][0]-xo)/sf,(xy[k][j][i][1]-yo)/sf);
							else ctx.lineTo((xy[k][j][i][0]-xo)/sf,(xy[k][j][i][1]-yo)/sf);
						}
						ctx.closePath();
					}
					ctx.fill();
					ctx.stroke();
				}
				if(lyr_typ[k] == "PL"){
					ctx.beginPath();
					for(j=0;j<xy[k].length;j++){
						for(i=0;i<xy[k][j].length-50;i++){
							if(i==0) ctx.moveTo((xy[k][j][i][0]-xo)/sf,(xy[k][j][i][1]-yo)/sf);
							else ctx.lineTo((xy[k][j][i][0]-xo)/sf,(xy[k][j][i][1]-yo)/sf);
						}
					}
					ctx.stroke();
				}
			/*}
		}*/
	}//for <lyrcnt> ends
	cimg=ctx.getImageData(0,0,dw,dh);//holds canvas data
}
/************
***Map Display***
************/

/************
***Tooltip and highlight on mousemove***
************/
function ftt(e) {
	//console.log("In");
	ctx.putImageData(cimg,0,0);
	var x1=(e.clientX - mapdiv_left)*sf+xo,y1=(e.clientY - mapdiv_top)*sf+yo;var t1="",ofl=false;
	t1="";
	if(tt.innerHTML==""){
		tt.style.display = "none";
	}
	else tt.style.display = "block";

	//get all the checkboxes checked by default
	//checkbox=document.querySelectorAll('input[type=checkbox]:checked');//get all checked layers
	//num_check=checkbox.length;

	for(var i1=0;i1<lyrcnt;i1++){
		if(t1.length>0) break;
		i=lyrcnt-i1-1;
		/*for(l=0;l<lyrdsp.length;l++){
			if(lyrdsp[l]==lyr_num[i]){*/
				 if(lyr_typ[i]!="PG"){
					if(lyr_typ[i]!="PN")continue;
						for(j=0;j<lyr_no_ob[i];j++){
							if(Math.abs(x1-xy[i][j][0][0])<6*sf && Math.abs(y1-xy[i][j][0][1])<6*sf){
								t1+=(xy[i][j][0][2].split("^ ")[1].replace(/\\/g,"z")+"<br>");
								break;
							}
						}//point object
						continue;
				 }

				 for(j=0;j<lyr_no_ob[i];j++) {
					 ofl=false; var pxy=xy[i][j];
					 for(k=0,l=pxy.length-1;k<pxy.length;l=k++){
						 if((pxy[k][1]<y1&& pxy[l][1]>=y1)||(pxy[l][1]<y1&&pxy[k][1]>=y1)) {
							 if(pxy[k][0]+(y1-pxy[k][1])/(pxy[l][1]-pxy[k][1])*(pxy[l][0]-pxy[k][0])<x1)
								 ofl=!ofl;
						 }
					 }

					 if(ofl) {
						 ctx.beginPath();
						 ctx.strokeStyle="#C21200";
						 for(k=0;k<xy[i][j].length;k++){
							if(k==0) ctx.moveTo((xy[i][j][k][0]-xo)/sf,(xy[i][j][k][1]-yo)/sf);
							else ctx.lineTo((xy[i][j][k][0]-xo)/sf,(xy[i][j][k][1]-yo)/sf);
						 }
						 ctx.closePath();
						 ctx.stroke();
						 //tmesg.value = query_data.length;

						 t1+=(xy[i][j][0][2].split("^ ")[1].replace(/\\/g,"z")+"<br>");
						 break;
					 }
			   }////polygon object

			/*}
		}*/

	 }

	//tmesg.value=t1;
	 tt.innerHTML=t1;
	 tt.style.position= "absolute";
	 tt.style.top=(e.clientY+dh+ty)+"px";
	 tt.style.left=(e.clientX+tx)+"px";
	 tt.style.backgroundColor="#ffffdd";
	 tt.style.borderRadius="5px";
	 tt.style.padding="5px";
	 tt.style.border="1px grey solid";
	 tt.style.zIndex="1";
	 //alert("e.clientY " +e.clientY+ "e.clientX "+ e.clientX);
	 /*tto1.width=t1.length*8+"px";//tto1.text-align="center";
	 ttx=t1;*/
}
/************
***Tooltip and highlight on mousemove***
************/