var geocoder, map, cX = 0, cY = 0, cH = 0, cW = 0;
function assignPosition() {
	cX = 0, cY = 0, cH = 0, cW = 0;
	if(self.pageYOffset) {
		cX = self.pageXOffset;
		cY = self.pageYOffset;
		cH = self.innerHeight;
		cW = self.innerWidth;
		}
	else if(document.documentElement && document.documentElement.scrollTop) {
		cX = document.documentElement.scrollLeft;
		cY = document.documentElement.scrollTop;
		cH = document.documentElement.offsetHeight;
		cW = document.documentElement.offsetWidth;
		}
	else if(document.body) {
		cX = document.body.scrollLeft;
		cY = document.body.scrollTop;
		cH = document.body.offsetHeight;
		cW = document.body.offsetWidth;
		}
	
	var objLayerDiv, objCloseDiv, objMapDiv;
	objLayerDiv = document.getElementById('layer');
	objCloseDiv = document.getElementById('closediv');
	objMapDiv = document.getElementById('map');
	try {
		objLayerDiv.style.height = cH + "px";
		objLayerDiv.style.width = cW + "px";
		objLayerDiv.style.left = cX + 'px';
		objLayerDiv.style.top = cY + 'px';
		objLayerDiv.style.zIndex = '2000';
		objCloseDiv.style.width = (cW - 100) + 'px';
		objCloseDiv.style.textAlign = "center";
		objCloseDiv.style.left = (cX+50) + 'px';
		objCloseDiv.style.top = (cY + 10) + 'px';
		objCloseDiv.style.zIndex = '2001';
		objMapDiv.style.left = (cX+50) + 'px';
		objMapDiv.style.top = (cY+50) + 'px';
		objMapDiv.style.width = (cW - 100) + 'px';
		objMapDiv.style.height = (cH - 100) + 'px';
		objMapDiv.style.zIndex = '2001';
		
	} catch (exx) {
	//
	}
	setTimeout('assignPosition();', 50);
}

function viewMap() {
  var objMapDiv, myOptions, layer, closeDiv, closeButton, mapDiv;
  	layer = document.createElement('div');
    layer.setAttribute('id', 'layer');
    layer.style.backgroundColor = 'black';
	layer.style.position = 'absolute';
	layer.style.filter = 'alpha(opacity=60)';
	layer.style.opacity = 0.6;
	layer.style.overflow = 'hidden';
	layer.setAttribute('background', 'none repeat scroll 0 0');
	document.getElementsByTagName('body')[0].appendChild(layer);
	
	//add close div inside layer
	closeDiv = document.createElement('div');
	closeDiv.setAttribute('id', 'closediv');
	closeDiv.style.position = 'absolute';
	
	//add close button here
	closeButton = document.createElement('input');
	closeButton.setAttribute('id', 'closeBtn');
	closeButton.setAttribute('type', 'button');
	closeButton.setAttribute('value', 'Close Map');
	closeButton.style.fontSize = '14px';
	closeButton.style.fontWeight = 'bold';
	closeButton.onclick = closeMap;
	
	closeDiv.appendChild(closeButton);
	document.getElementsByTagName('body')[0].appendChild(closeDiv);
	
	
	mapDiv = document.createElement('div');
	mapDiv.setAttribute('id', 'map');
	mapDiv.style.overflow = 'hidden';
	mapDiv.style.border = '1px solid black';
	mapDiv.style.position = 'absolute';
	mapDiv.style.backgroundColor = 'lightgrey';
	document.getElementsByTagName('body')[0].appendChild(mapDiv);
	
	objMapDiv = document.getElementById("map");
	  objMapDiv.style.display = 'block';
	  geocoder = new google.maps.Geocoder();
	  myOptions = {
	    zoom: 8,
	    mapTypeId: google.maps.MapTypeId.ROADMAP
	  };
	  map = new google.maps.Map(objMapDiv, myOptions);
	  geocoder.geocode( { 'address': address}, function(results, status) {
		    if (status == google.maps.GeocoderStatus.OK) {
		      map.setCenter(results[0].geometry.location);
		      var marker = new google.maps.Marker({
		          map: map,
		          position: results[0].geometry.location
		      });
		    } else {
		      alert("Geocode was not successful for the following reason: " + status);
		    }
		  });
	  
	  assignPosition();
}

function closeMap() {
	var mapDiv, layerDiv, closeDiv;
	mapDiv = document.getElementById("map");
	layerDiv = document.getElementById('layer');
	closeDiv = document.getElementById('closediv');
	document.body.removeChild(layerDiv);
	document.body.removeChild(closeDiv);
	document.body.removeChild(mapDiv);
}