var wms_end_point = "https://www.epusara.jawi.gov.my/geoserver/epLayerOverall/wms";
		var wms_layer_group = "epLayerOverall";
		var wms_plot_layer = "epOverall:epOverall_plots";        
        
		/**
		 * popup 
		 */

		var container = document.getElementById( 'popup' );
		var content = document.getElementById( 'popup-content' );
		var closer = document.getElementById( 'popup-closer' );

		/**
		 * Create an overlay to anchor the popup to the map.
		 */
		var infoOverlay = new ol.Overlay( /** @type {olx.OverlayOptions} */ ( {
			element: container,
			autoPan: true,
			autoPanAnimation: {
				duration: 250
			},
			positioning: 'center-center',
			offset: [ 0, -30 ]
		} ) );


		/**
		 * Add a click handler to hide the popup.
		 * @return {boolean} Don't follow the href.
		 */
		closer.onclick = function () {
			infoOverlay.setPosition( undefined );
			closer.blur();
			return false;
		};

		/**
		 * main map			 
		 */

		// set the format
		var format = 'image/png8';

		// set the bounds
		// bound format: minX,minY(lower right corner),maxX,maxY(upper left corner)
		//var bounds = [ 103.921538, 1.500027, 103.925185, 1.505565 ];
        var bounds = [100.695021725811,2.22507893214682,102.695021725811,4.22507893214682];
        
		/**
		 * construct zoom to extent control
		 */
		var zoomToExtentControl = new ol.control.ZoomToExtent( {
			extent: bounds,
			label: 'E',
			tipLabel: 'zoom to maximum extent'
		} );

		/**
		 * construct the mouse position control
		 */
		var mousePositionControl = new ol.control.MousePosition( {
			className: 'custom-mouse-position',
			target: document.getElementById( 'location' ),
			coordinateFormat: ol.coordinate.createStringXY( 5 ),
			undefinedHTML: ' '
		} );

		/**
		 * print control
		 */
		var printControl = function ( opt_options ) {

			var options = opt_options || {};

			var button = document.createElement( 'button' );
			button.title = "print current extent";
			button.innerHTML = 'P';

			button.addEventListener( 'click', printSimpleMap, false );
			//button.addEventListener('touchstart', printSimpleMap, false);

			var element = document.createElement( 'div' );
			element.className = 'print-control-btn ol-unselectable ol-control';
			element.appendChild( button );

			ol.control.Control.call( this, {
				element: element,
				target: options.target
			} );
		};

		ol.inherits( printControl, ol.control.Control );

		/**
		 * refresh view control
		 */
		var refreshViewControl = function ( opt_options ) {

			var options = opt_options || {};

			var button = document.createElement( 'button' );
			button.title = "refresh map extent";
			button.innerHTML = 'R';

			button.addEventListener( 'click', function () {
				groupedLayers.getSource().updateParams( {
					"time": Date.now()
				} );
			}, false );

			var element = document.createElement( 'div' );
			element.className = 'refresh-view-control-btn ol-unselectable ol-control';
			element.appendChild( button );

			ol.control.Control.call( this, {
				element: element,
				target: options.target
			} );
		};

		ol.inherits( refreshViewControl, ol.control.Control );

		/**
		 * set the projection
		 */
		var projection = new ol.proj.Projection( {
			code: 'EPSG:4326',
			units: 'degrees',
			axisOrientation: 'neu',
			global: true
		} );

		/**
		 * construct the grouped layers
		 */
		var groupedLayers = new ol.layer.Tile( {
			extent: bounds,
			source: new ol.source.TileWMS( ( {
				url: wms_end_point,
				params: {
					'FORMAT': format,
					'VERSION': '1.1.1',
					tiled: true,
					"LAYERS": wms_layer_group,
					"exceptions": 'application/vnd.ogc.se_inimage',
					//tilesOrigin: 103.922073364258 + "," + 1.50263369083405
					tilesOrigin: 103.923130 + "," + 1.503002
				},
				attributions: [ '<span style="font-size: 20px;">© <a href="https://www.epusara.com/" target="_blank">epusara.com</a></span>' ]
			} ) )
		} );

		/**
		 * construct the plot layer
		 */
		var plotLayer = new ol.layer.Tile( {
			extent: bounds,
			renderBuffer: 10,
			source: new ol.source.TileWMS( ( {
				url: wms_end_point,
				params: {
					'FORMAT': format,
					'VERSION': '1.1.1',
					tiled: true,
					"LAYERS": wms_plot_layer,
					"exceptions": 'application/vnd.ogc.se_inimage',
					//tilesOrigin: 103.922073364258 + "," + 1.50263369083405
					tilesOrigin: 103.923130 + "," + 1.503002
				}
			} ) )
		} );

		/**
		 * marker style function 
		 */
		var markerStyleFunction = function ( feature, resolution ) {

			var x = 0.000002; // horizontal displacement
			var y = 0.0000038; // vertical displacement
			var rotation = 2.7; // rotation...normally in radiant

			// get the feature coordinate
			var featureCoor = feature.getGeometry().getCoordinates();

			// construct the polygon
			var pt1 = [ featureCoor[ 0 ] + x, featureCoor[ 1 ] + y ];
			var pt2 = [ featureCoor[ 0 ] + x, featureCoor[ 1 ] - y ];
			var pt3 = [ featureCoor[ 0 ] - x, featureCoor[ 1 ] - y ];
			var pt4 = [ featureCoor[ 0 ] - x, featureCoor[ 1 ] + y ];
			var ring = [ pt1, pt2, pt3, pt4, pt1 ];
			var polygon = new ol.geom.Polygon( [ ring ] );

			// rotate the polygon
			polygon.rotate( rotation, featureCoor );

			// create the polygon style
			var polygonStyle = new ol.style.Style( {

				fill: new ol.style.Fill( {
					color: 'rgba(192,122,192,0.5)'
				} ),
				stroke: new ol.style.Stroke( {
					color: 'rgba(255, 204, 0, 0.2)',
					width: 2
				} ),
				geometry: polygon

			} );

			// create the icon style
			var iconStyle = new ol.style.Style( {
				image: new ol.style.Icon( {
					anchor: [ 0.5, 30 ], //x,y
					anchorXUnits: 'fraction',
					anchorYUnits: 'pixels',
					src: 'placeholder.png'
				} )
			} );

			// construct the styles array
			var stylesArray = [ polygonStyle, iconStyle ];

			// return the styles array
			return stylesArray;

		}

		// create the marker overlay or layer
		var markerOverlay = new ol.layer.Vector( {
			source: new ol.source.Vector(),
			style: markerStyleFunction
		} );

		// set the layers to be displayed on the map
		var layers = [
			groupedLayers,
			markerOverlay
		];

		/**
		 * construct the map
		 */

		var map = new ol.Map( {
			layers: layers,
			target: 'map',
			overlays: [ infoOverlay ],
			interactions: ol.interaction.defaults( {
				doubleClickZoom: false
			} ),
			view: new ol.View( {
				projection: projection
					//rotation: -1.61792022 // map rotation
			} ),
			//hitTolerance: 100,
			controls: ol.control.defaults( {
				attribution: true
			} ).extend( [ mousePositionControl, zoomToExtentControl, new printControl(), new refreshViewControl() ] )
		} );

		/**
		 * on zoom or on change resolution 
		 */
		map.getView().on( 'change:resolution', function ( evt ) {

			// update scale
			updateScale( evt );

		} );

		/**
		 * update scale information
		 */
		function updateScale( evt ) {

			// display different scale information
			var resolution = evt.target.get( 'resolution' );
			var units = map.getView().getProjection().getUnits();

			//console.log('map resolution changed');

			var dpi = 25.4 / 0.28;
			var mpu = ol.proj.Units.METERS_PER_UNIT[ units ];
			var scale = resolution * mpu * 39.37 * dpi;

			if ( scale >= 9500 && scale <= 950000 ) {
				scale = Math.round( scale / 1000 ) + "K";
			} else if ( scale >= 950000 ) {
				scale = Math.round( scale / 1000000 ) + "M";
			} else {
				scale = Math.round( scale );
			}

			document.getElementById( 'scale' ).innerHTML = "Scale = 1 : " + scale;

		}

		var hitTolerance = 10; // this config is for mobile

		/**
		 * on map click
		 */

		map.on( 'singleclick', function ( evt ) {

			// get feature info
			getFeatureInfo( evt.coordinate, false );

		} );


		//------------------------------------------------------------
		// get feature info
		//------------------------------------------------------------
		function getFeatureInfo( coordinate , requirecenter) {

			// close the modal window
			closer.click();

			document.getElementById( 'serverResponse' ).innerHTML = "retrieving data...";

			/**
			 * get feature info
			 */
			var view = map.getView();
			var viewResolution = view.getResolution();
			var source = plotLayer.getSource();

			var url = source.getGetFeatureInfoUrl(
				coordinate, viewResolution, view.getProjection(), {
					'info_format': 'application/json',
					'layers': wms_plot_layer,
					'propertyName': 'id,plot_no,nama_jenazah,tarikh_mati,nota,plot_location,image_1,image_2,image_3'
				} );

			 console.log('response: '+url);
			$.ajax( {

				url: url,
				dataType: 'text',

			} ).then( function ( response ) {

				 console.log('response: '+response);

				if ( response !== "undefined" && response != "" ) {

					var resObj = $.parseJSON( response );

					// make sure features is not empty
					if ( resObj[ "features" ].length > 0 ) {

						document.getElementById( 'serverResponse' ).innerHTML = "yes..feature found !";

						/**
						 * get the geometry
						 */
						var geometryObj = resObj[ "features" ][ 0 ][ "geometry" ];

						// get the feature coordinate
						var featureCoordinate = geometryObj[ "coordinates" ];

						//console.log( featureCoordinate );

						// marker will be used later - DONT REMOVE THIS							
						// create new marker geom from point
						createMarkerFromCoor( featureCoordinate );

						/**
						 * get the data
						 */
						var featureObj = resObj[ "features" ][ 0 ][ "properties" ];

						var imageLocation1, imageLocation2, imageLocation3, tnImageLocation1, tnImageLocation2, tnImageLocation3;
						if ( featureObj.image_1 != "" && featureObj.image_1 != null ) {
							imageLocation1 = "" + featureObj.image_1;
							tnImageLocation1 = "" + featureObj.image_1;
						} else {
							tnImageLocation1 = "image-placeholder-80.png";
						}

						if ( featureObj.image_2 != "" && featureObj.image_2 != null ) {
							imageLocation2 =  "" + featureObj.image_2;
							tnImageLocation2 = "" + featureObj.image_2;
						} else {
							tnImageLocation2 = "image-placeholder-80.png";
						}

						if ( featureObj.image_3 != "" && featureObj.image_3 != null ) {
							imageLocation3 = "" + featureObj.image_3;
							tnImageLocation3 = "" + featureObj.image_3;
						} else {
							tnImageLocation3 = "image-placeholder-80.png";
						}

						// reformat date
						var tarikh_mati = moment( featureObj.tarikh_mati, "YYYY-MM-DD" ).add(1, 'days').format( 'DD/MM/YYYY' );
						
						var popupContent = "";

						//popupContent = 'Nombor Lot: <b>' + featureObj.plot_no + '</b><br/>Nama Si Mati: <b>' + featureObj.nama_jenazah + '</b><br/>Tarikh Mati: <b>' + tarikh_mati + '</b><br/><br/>';
                        
                        //update nombor lot lama
                        popupContent = 'Nombor Lot: <b>' + featureObj.plot_no + '</b>' + '<br> Nombor Lot Lama: <b>' + featureObj.plot_no_other + '</b><br/>Nama Si Mati: <b>' + featureObj.nama_jenazah + '</b><br/>Tarikh Mati: <b>' + tarikh_mati + '</b><br/><br/>';

						if ( imageLocation1 != "" && typeof imageLocation1 != "undefined" ) {
							popupContent += '<a href="' + imageLocation1 + '" rel="lytebox[plot]"><img height="80" width="80" src="' + tnImageLocation1 + '" /></a>';
						}

						if ( imageLocation2 != "" && typeof imageLocation2 != "undefined" ) {						
							popupContent += '&nbsp;<a href="' + imageLocation2 + '" rel="lytebox[plot]"><img height="80" width="80" src="' + tnImageLocation2 + '" /></a>';				
						}

						if ( imageLocation3 != "" && typeof imageLocation3 != "undefined" ) {			
							popupContent += '&nbsp;<a href="' + imageLocation3 + '" rel="lytebox[plot]"><img height="80" width="80" src="' + tnImageLocation3 + '" /></a>';
						}			

						popupContent += '<br/><br/>';
						
						content.innerHTML = popupContent;							
						
						infoOverlay.setPosition( featureCoordinate );

						document.getElementById( 'serverResponse' ).innerHTML = '';

						if(requirecenter) {
						view.setCenter(featureCoordinate);
						}
						
						
						myLytebox.updateLyteboxItems();

					} else {

						// update the user
						document.getElementById( 'serverResponse' ).innerHTML = "no feature found !";

						// close the modal window
						closer.click();

					}

				}

			} );

		}

		/**
		 * create marker from coordinate
		 */
		function createMarkerFromCoor( featureCoordinate ) {

			// create new point feature
			var markerFeature = new ol.Feature(
				new ol.geom.Point( featureCoordinate )
			);

			// remove marker
			markerOverlay.getSource().clear();

			// add marker
			markerOverlay.getSource().addFeature( markerFeature );

		}

		// set the view to fit the map
		map.getView().fit( bounds, map.getSize() );

		/**
		 * on search button click
		 */
		$( '#searchBtn' ).click( function ( evt ) {
			searchSimple( true );
		} );

		/**
		 * on search name in DB  button click
		 */
		$( '#searchNameInDB' ).click( function ( evt ) {
			searchSimple( false );
		} );


		/**
		 * check is more than one parameters entered
		 */
		function isMoreThanOneParamsEntered( plot_no, nama_jenazah, tarikh_mati, no_kp ) {

			var moreThanOneCounter = 0;

			if ( plot_no != "" ) {
				moreThanOneCounter++;
			}

			if ( nama_jenazah != "" ) {
				moreThanOneCounter++;
			}

			if ( tarikh_mati != "" ) {
				moreThanOneCounter++;
			}

			if ( no_kp != "" ) {
				moreThanOneCounter++;
			}

			if ( moreThanOneCounter > 1 ) {
				return true;
			} else {
				return false;
			}

		}

		/**
		 * check is no parameter entered
		 */
		function isNoParamEntered( plot_no, nama_jenazah, tarikh_mati, no_kp ) {

			//console.log(plot_no +'/'+nama_jenazah+'/'+tarikh_mati+'/'+no_kp);

			if ( ( plot_no == "" ) && ( nama_jenazah == "" ) && ( tarikh_mati == "" ) && ( no_kp == "" ) ) {
				return true;
			} else {
				return false;
			}

		}

		/**
		 * check is parameter conformed to requirement
		 */
		function isParamComformed( plot_no, nama_jenazah, tarikh_mati, no_kp ) {

			if ( plot_no != "" ) {

				if ( plot_no.length < 3 ) {
					var result = "<span class='warning'>Nombor Lot mesti lebih dari 2 angka !!!</span>";
					$( '#search-result' ).html( result );
					return false;
				}

			} else if ( nama_jenazah != "" ) {

				if ( nama_jenazah.length < 3 ) {
					var result = "<span class='warning'>Nama Si Mati mesti lebih dari 2 aksara !!!</span>";
					$( '#search-result' ).html( result );
					return false;
				}

			} else if ( tarikh_mati != "" ) {

				console.log( tarikh_mati );

				if ( tarikh_mati.length > 10 ) {
					var result = "<span class='warning'>Tarikh mati mesti tidak lebih dari 10 aksara !!!</span>";
					$( '#search-result' ).html( result );
					return false;
				}

			} else if ( no_kp != "" ) {

				if ( no_kp.length < 6 ) {
					var result = "<span class='warning'>Nombor Kad Pengenalan mesti lebih dari 5 angka !!!</span>";
					$( '#search-result' ).html( result );
					return false;
				}

			}

			return true;

		}

		/**
		 * search simple
		 */
		function searchSimple( isSearchSimple ) {

			var searchNameInDB = false;
			if ( isSearchSimple === false ) {
				searchNameInDB = true;
			}

			console.log('searchNameInDB: ' + searchNameInDB);
			
			// get params
			var plot_no = $( '#plot_no' ).val();
			var nama_jenazah = $( '#nama_jenazah' ).val();
			var tarikh_mati = $( '#tarikh_mati' ).val();
			var no_kp = $( '#no_kp' ).val();

			// make sure at least one search param has been entered
			if ( isNoParamEntered( plot_no, nama_jenazah, tarikh_mati, no_kp ) ) {

				var result = "<span class='warning'>You have not entered any search parameter!!!</span>";

				$( '#search-result' ).html( result );

				return false;

			}

			// make sure only one search parameter is active
			if ( isMoreThanOneParamsEntered( plot_no, nama_jenazah, tarikh_mati, no_kp ) ) {

				var result = "<span class='warning'>Only ONE search parameter is allowed !!!</span>";

				$( '#search-result' ).html( result );

				return false;

			}

			// make sure parameters conformed to requirement
			if ( !isParamComformed( plot_no, nama_jenazah, tarikh_mati, no_kp ) ) {
				return false;
			}

			var url = "feature-search.php?action=searchFeature&plot_no=" + plot_no + "&nama_jenazah=" + nama_jenazah + "&tarikh_mati=" + tarikh_mati + "&no_kp=" + no_kp + "&searchNameInDB=" + searchNameInDB;

			$.ajax( {

				url: url,
				dataType: 'text',
				beforeSend: function () {
					$( '#search-result' ).html( '' );
					$( '#loading' ).show();
				},
				complete: function () {
					$( '#loading' ).hide();
				}

			} ).then( function ( response ) {

				console.log(response);

				var resp = $.parseJSON( response );

				if ( resp[ 'result' ] == 'success' ) {

					var data = resp[ 'data' ];

					var resultDiv = '	<div class="table-responsive">\
						<table class="table">\
							<thead>\
								<tr>\
									<th class="col-xs-1 col-sm-1 col-md-1">No Lot</th>\
									<th class="hidden-xs col-sm-1 col-md-1">Zone</th>\
									<th class="col-xs-1 col-sm-2 col-md-4">Nama Si Mati</th>\
									<th class="hidden-xs col-sm-1 col-md-2" style="text-align:center;">Tarikh Mati</th>\
									<th class="hidden-xs col-sm-1 col-md-1" style="text-align:center;">Action</th>\
								</tr>\
							</thead>\
							<tbody>\
';
					for ( var i = 0; i < data.length; i++ ) {

						//	  var coor = [data[i].x, data[i].y];
						//console.log('coor: '+coor);
						//var plot_location = ol.proj.fromLonLat([data[i].x,data[i].y],'EPSG:4326');
						//	  var plot_location = data[i].x + "," +data[i].y;

						var pointWKT = data[ i ].plot_location;

						var zone = '';
						if ( data[ i ].plot_zone != '' ) {
							zone = '( Zon ' + data[ i ].plot_zone + ' )';
						}

						console.log( 'nama_jenazah: ' + data[ i ].nama_jenazah );

						// escape quote 
						var nama_jenazah = "";
						if ( data[ i ].nama_jenazah != null ) {
							nama_jenazah = ( data[ i ].nama_jenazah ).replace( /'/g, "\\'" );
						}

						console.log( 'searchNameInDB: ' + searchNameInDB );

                        console.log( "tarikh mati from data: " + data[ i ].tarikh_mati );
                        
                        //var tarikh_mati = moment(data[ i ].tarikh_mati, "YYYY-MM-DD").format('DD/MM/YYYY');
                        var tarikh_mati = data[ i ].tarikh_mati;

                        console.log( "tarikh mati after momentjs: " + tarikh_mati );
                        
						if ( !searchNameInDB ) {
							
							if ( pointWKT !== null) {
								
								resultDiv += '					<tr>\
										<td class="col-xs-1" style="text-align:center;">' + data[ i ].plot_no + '<br/><i class="glyphicon glyphicon-map-marker visible-xs" title="Kenal Pasti Plot" style="font-size: 20px; cursor:pointer;" onClick="locateFeature(\'' + data[ i ].id + '\',\'' + data[ i ].plot_no + '\',\'' + nama_jenazah + '\',\'' + tarikh_mati + '\',\'' + data[ i ].image_1 + '\',\'' + data[ i ].image_2 + '\',\'' + data[ i ].image_3 + '\',\'' + pointWKT + '\');"></i></td>\
										<td class="hidden-xs">' + data[ i ].plot_zone + '</td>\
										<td class="col-xs-1" style="word-wrap: break-word;"><a href="plot.php?plot_id='+data[ i ].id+'">' + data[ i ].nama_jenazah + '</a><span class="visible-xs-block hidden-sm hidden-md hidden-lg">' + tarikh_mati + '</span><span class="visible-xs-block hidden-sm hidden-md hidden-lg" style="font-weight: normal;">' + zone + '</span>\
										</td>\
										<td class="hidden-xs" style="text-align:center;">' + tarikh_mati + '</td>\
										<td class="hidden-xs" style="text-align:center;"><i class="glyphicon glyphicon-map-marker" title="Kenal Pasti Plot" style="font-size: 20px; cursor:pointer;" onClick="locateFeature(\'' + data[ i ].id + '\',\'' + data[ i ].plot_no + '\',\'' + nama_jenazah + '\',\'' + tarikh_mati + '\',\'' + data[ i ].image_1 + '\',\'' + data[ i ].image_2 + '\',\'' + data[ i ].image_3 + '\',\'' + pointWKT + '\');"></i>\
										</td>\
									</tr>\
									';								
								
							} else {

								resultDiv += '					<tr>\
										<td class="col-xs-1" style="text-align:center;">' + data[ i ].plot_no + '<br/></td>\
										<td class="hidden-xs">' + data[ i ].plot_zone + '</td>\
										<td class="col-xs-1" style="word-wrap: break-word;"><a href="plot.php?plot_id='+data[ i ].id+'">' + data[ i ].nama_jenazah + '</a><span class="visible-xs-block hidden-sm hidden-md hidden-lg">' + tarikh_mati + '</span><span class="visible-xs-block hidden-sm hidden-md hidden-lg" style="font-weight: normal;">' + zone + '</span>\
										</td>\
										<td class="hidden-xs" style="text-align:center;">' + tarikh_mati + '</td>\
										<td class="hidden-xs" style="text-align:center;">\
										</td>\
									</tr>\
									';								
								
							}
							

						} else {

							resultDiv += '					<tr>\
									<td class="col-xs-1" style="text-align:center;">' + data[ i ].plot_no + '<br/><i class="glyphicon glyphicon-map-marker visible-xs" title="Kenal Pasti Plot" style="font-size: 20px; cursor:pointer;"></i></td>\
									<td class="hidden-xs">' + data[ i ].plot_zone + '</td>\
									<td class="col-xs-1" style="word-wrap: break-word;">' + data[ i ].nama_jenazah + '<span class="visible-xs-block hidden-sm hidden-md hidden-lg">' + tarikh_mati + '</span><span class="visible-xs-block hidden-sm hidden-md hidden-lg" style="font-weight: normal;">' + zone + '</span>\
									</td>\
									<td class="hidden-xs" style="text-align:center;">' + tarikh_mati + '</td>\
									<td class="hidden-xs" style="text-align:center;"><i class="glyphicon glyphicon-map-marker" title="Kenal Pasti Plot" style="font-size: 20px; cursor:pointer;" onClick="locateFeature(\'' + data[ i ].id + '\',\'' + data[ i ].plot_no + '\',\'' + nama_jenazah + '\',\'' + tarikh_mati + '\',\'' + data[ i ].image_1 + '\',\'' + data[ i ].image_2 + '\',\'' + data[ i ].image_3 + '\',\'' + pointWKT + '\');"></i>\
									</td>\
								</tr>\
';


						}



					} // close for

					resultDiv += '						\
							</tbody>\
						</table>\
					</div>\
';

					//alert(rs);
					//$('#search-result').html('plot no: '+data[0].plot_no);
					$( '#search-result' ).html( resultDiv );

				} else {

					var resultDiv = "<span class='warning'>Sorry, no result found.</span>";
					$( '#search-result' ).html( resultDiv );

				}
			} );

		}

		//------------------------------------------------------------
		// locatePlot
		//------------------------------------------------------------
		function locatePlot(latitude, longitude ) {	
			  $('html, body').animate({
                    scrollTop: $(document).height()
            }, 1000);
			console.log( 'location x: ' + latitude + ', location y: ' +longitude  );
			closer.click();
			var plot_location = latitude + "," +longitude;
			console.log( 'plot_location: ' + plot_location  );
			var plot_location = ol.proj.fromLonLat([plot_location],'EPSG:4326');
			console.log( 'plot_location: ' + plot_location  );
			
			var pointWKT = plot_location;
			var feature = new ol.format.WKT().readFeature( pointWKT );
			var plot_location = feature.getGeometry().getCoordinates();
					createMarkerFromCoor( plot_location );

			console.log( 'transform location: ' + plot_location );
			infoOverlay.setPosition( plot_location );

			myLytebox.updateLyteboxItems();

			// zoom 
			map.setView( new ol.View( {
				projection: 'EPSG:4326',
				center: plot_location,
				zoom: 20
			} ) );

			// re-register on change resolution event
			map.getView().on( 'change:resolution', function ( evt ) {
				updateScale( evt );
			} );
		}
		
		
		//------------------------------------------------------------
		// getToCoordinate
		//------------------------------------------------------------
		var getToCoordinate = function (lon,lat){
	  		$('html, body').animate({
                    scrollTop: $(document).height()
            }, 1000);
			console.log( 'location x: ' + lon + ', location y: ' +lat  );
			closer.click();
		
 
			var coordinate = [lon,lat];
			var location = ol.proj.fromLonLat(coordinate,'EPSG:4326');			
			var view = map.getView();
			view.setZoom(22);
			
			
    		$('#map').promise().done(function() {
    			getFeatureInfo(coordinate, true);	
    		});							
			
		}


		//------------------------------------------------------------
		// locate feature
		//------------------------------------------------------------
			
		function locateFeature( id, plot_no, nama_jenazah, tarikh_mati, image_1, image_2, image_3, pointWKT ) {	
            
            // scroll to bottom
            $('html, body').animate({
                    scrollTop: $(document).height()
            }, 1000);
			
			console.log( 'location: ' + pointWKT + ', image_1: ' + image_1 );

			closer.click();

			/*
			  var format = new ol.format.WKT();
			  var feature = format.readFeatures(location,{
				dataProjection: 'EPSG:4326',
				featureProjection: 'EPSG:4326'
				});
			*/

			//var location = ol.proj.fromLonLat([location],'EPSG:4326');
			
			if ( pointWKT == "null" ) {				
				return false;
			}
			
			//var pointWKT = data[ilocation;
			var feature = new ol.format.WKT().readFeature( pointWKT );
			var plot_location = feature.getGeometry().getCoordinates();

			// create marker
			createMarkerFromCoor( plot_location );

			console.log( 'transform location: ' + plot_location );

			var imageLocation1, imageLocation2, imageLocation3, tnImageLocation1, tnImageLocation2, tnImageLocation3;

			if ( image_1 != "" && image_1 != 'null' ) {
				imageLocation1 = "../filebank/photos/" + id + "/image_1/tn500_" + image_1;
				tnImageLocation1 = "../filebank/photos/" + id + "/image_1/tn80_" + image_1;
			} else {
				imageLocation1 = "";
				tnImageLocation1 = "image-placeholder-80.png";
			}

			if ( image_2 != "" && image_2 != 'null' ) {
				imageLocation2 = "../filebank/photos/" + id + "/image_2/tn500_" + image_2;
				tnImageLocation2 = "../filebank/photos/" + id + "/image_2/tn80_" + image_2;
			} else {
				imageLocation2 = "";
				tnImageLocation2 = "image-placeholder-80.png";
			}

			if ( image_3 != "" && image_3 != 'null' ) {
				imageLocation3 = "../filebank/photos/" + id + "/image_3/tn500_" + image_3;
				tnImageLocation3 = "../filebank/photos/" + id + "/image_3/tn80_" + image_3;
			} else {
				imageLocation3 = "";
				tnImageLocation3 = "image-placeholder-80.png";
			}

			var popupContent = "";
			
			popupContent = 'Nombor Lot: <b>' + plot_no + '</b><br/>Nama Si Mati: <b>' + nama_jenazah + '</b><br/>Tarikh Mati: <b>' + tarikh_mati + '</b><br/><br/>';
			
			if ( imageLocation1 != "" && typeof imageLocation1 != "undefined" ) {
				popupContent += '123<a href="' + imageLocation1 + '" rel="lytebox[plot]"><img height="80" width="80" src="' + tnImageLocation1 + '" /></a>';
			}
			
			if ( imageLocation2 != "" && typeof imageLocation2 != "undefined" ) {						
				popupContent += '&nbsp;123<a href="' + imageLocation2 + '" rel="lytebox[plot]"><img height="80" width="80" src="' + tnImageLocation2 + '" /></a>';				
			}
			
			if ( imageLocation3 != "" && typeof imageLocation3 != "undefined" ) {			
				popupContent += '&nbsp;123<a href="' + imageLocation3 + '" rel="lytebox[plot]"><img height="80" width="80" src="' + tnImageLocation3 + '" /></a>';
			}	
			
			popupContent += '<br><br><button onclick="location.href=\'plot.php?plot_id=' + id + '\';" style="padding: 0 30px;">Edit</button> &nbsp; <button onclick="window.open(\'plot.php?plot_id=' + id + '\');" style="">Edit in new window</button>';			
							
			content.innerHTML = popupContent;				
			
//			content.innerHTML = 'Nombor Lot 2: <b><span id="selectedPlotNo">' + plot_no + '</span></b><br/>Nama Si Mati: <b><span id="selectedNamaJenazah">' + nama_jenazah + '</span></b><br/>Tarikh Mati: <b><span id="selectedTarikhMati">' + tarikh_mati + '</span></b>';
//
//			content.innerHTML += '<br/><br/><a href="' + imageLocation1 + '" rel="lytebox[plot]"><img height="80" width="80" src="' + tnImageLocation1 + '" /></a>\
//			&nbsp;<a href="' + imageLocation2 + '" rel="lytebox[plot]"><img height="80" width="80" src="' + tnImageLocation2 + '" /></a>\
//			&nbsp;<a href="' + imageLocation3 + '" rel="lytebox[plot]"><img height="80" width="80" src="' + tnImageLocation3 + '" /></a>\
//			<br><br><button onclick="location.href=\'plot.php?plot_id=' + id + '\';" style="padding: 0 30px;">Edit</button>';

			infoOverlay.setPosition( plot_location );

			myLytebox.updateLyteboxItems();

			// zoom 
			map.setView( new ol.View( {
				projection: 'EPSG:4326',
				center: plot_location,
				zoom: 20
			} ) );

			// re-register on change resolution event
			map.getView().on( 'change:resolution', function ( evt ) {
				updateScale( evt );
			} );
		}

		/**
		 * resize map 
		 */
		var mapSizeHasChanged = false;
		$( "#resizeMapBtn" ).click( function ( event ) {

			//console.log($('#map').height());

			var minHeight = '400px';
			var maxHeight = '800px';
			var newHeight;

			if ( $( '#map' ).height() <= '400' ) {
				newHeight = maxHeight;
			} else {
				newHeight = minHeight;
			}

			$( '#map' ).animate( {
				height: newHeight
			}, 500 );

			$( '#map' ).promise().done( function () {
				map.updateSize();
				mapSizeHasChanged = true;
			} );

		} );

		/**
		 * print simple map 
		 */

		$( "#printSimpleMapBtn" ).click( function ( event ) {
			printSimpleMap();
		} );

		function printSimpleMap() {

			//$("div.print-control-btn.ol-unselectable").hide();

			if ( mapSizeHasChanged ) {
				alert( "Map size has changed. You cannot do simple print anymore. Please refresh page." );
				return false;
			}

			var selectedPlotNo = $( "#selectedPlotNo" ).html();
			var selectedNamaJenazah = $( "#selectedNamaJenazah" ).html();
			var selectedTarikhMati = $( "#selectedTarikhMati" ).html();

			// close the popup
			closer.click();

			// get date
			var d = Date( Date.now() );

			// Converting the number of millisecond in date string 
			a = d.toString()

			// set up the header and footer 
			var headerString = '<div style="border-color: #CCC;border-width: 1px;border-style: solid;"><span style="text-align: center;"><h4>Tanah Perkuburan Islam Raudhatul Baqi\' Cyberjaya</h4></span></div>';

			var footerString = "";

			if ( typeof ( selectedPlotNo ) != "undefined" ) {
				//footerString = '<div style="border-color: #CCC;border-width: 1px;border-style: solid;"><span style="text-align: center;"><h4>No paket: '+selectedPlotNo+' &nbsp; Nama Si Mati: '+selectedNamaJenazah+' &nbsp; Tarikh Mati: '+selectedTarikhMati+'</h4></span></div>';

				footerString = '<table style="border-collapse: collapse; width: 100%;"><tr style="border: 1px solid #CCC;"><td width="30%" style="border: 1px solid #CCC;">No Lot</td><td>' + selectedPlotNo + '</td></tr><tr style="border: 1px solid #CCC;"><td style="border: 1px solid #CCC;">Nama Si Mati</td><td> ' + selectedNamaJenazah + '</td></tr><tr style="border: 1px solid #CCC;"><td style="border: 1px solid #CCC;">Tarikh mati</td><td>' + selectedTarikhMati + '</td></tr></table>';

			}

			footerString += '<br/><div style="text-align:center;">Generated from Sistem E-Pusara on ' + a + '</a>';

			// print the map
			$( "#map" ).printThis( {
				debug: false,
				importCSS: false,
				loadCSS: [ "https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" ],
				canvas: true,
				removeScripts: true,
				header: headerString,
				footer: footerString,
				afterPrint: function () {
					//$("div.print-control-btn.ol-unselectable").toggle();
				}
			} );

		}

		/**
		 * show my location button event click
		 */

		$( '#showMyLocationBtn' ).click( function ( evt ) {
			showMyLocation();
		} );

		/**
		 * show my location
		 */
		function showMyLocation() {

			var featureCoordinate = map.getView().getCenter();
			var view = map.getView();

			// marker will be used later - DONT REMOVE THIS							
			// create new marker geom from point
			var markerFeature = new ol.Feature(
				new ol.geom.Point( featureCoordinate )
			);

			// construct the marker style
			var iconStyle = new ol.style.Style( {
				image: new ol.style.Icon( {
					anchor: [ 0.5, 30 ], //x,y
					anchorXUnits: 'fraction',
					anchorYUnits: 'pixels',
					src: 'placeholder.png'
				} )
			} );

			// set the marker feature style
			markerFeature.setStyle( iconStyle );

			// remove marker
			markerOverlay.getSource().clear();

			// add marker
			markerOverlay.getSource().addFeature( markerFeature );

			/**
			 * enable geolocation tracking
			 */

			var geolocation = new ol.Geolocation( {
				tracking: true,
				trackingOptions: {
					enableHighAccuracy: true
				},
				projection: view.getProjection(),
				trackingOptions: {
					enableHighAccuracy: true,
					maximumAge: 2000
				}
			} );

			geolocation.on( 'change', function () {
				var coordinates = geolocation.getPosition();
				document.getElementById( 'serverResponse' ).innerHTML = coordinates;
				markerFeature.setGeometry( coordinates ? new ol.geom.Point( coordinates ) : null );
				//view.setCenter( coordinates );
				//view.setZoom(18); 

			} );

		}