function showForm(xxx) {
	//document.getElementById('direction-form-' + xxx).style.display = 'block';
	JobsArray[xxx]['MARKER'].openInfoWindowHtml(JobsArray[xxx]['HTML'].replace('none', 'block'));
}

function openMapWindow(xxx) {
	MapDetails.MapInfo.map.closeInfoWindow();
	JobsArray[xxx]['MARKER'].openInfoWindowHtml(JobsArray[xxx]['HTML']);
	MapDetails.MapInfo.map.setCenter(new GLatLng(JobsArray[xxx].LAT[0], JobsArray[xxx].LON[0]));
	document.getElementById('mapImage' + xxx).style.display =
		(MapDetails.collapsed) ?  'none' : 'block';
	MapDetails.lastMapWindow = xxx;
}

var MapDetails = {
	collapsed: true,
	lastMapWindow: -1,
	init: function() {
		// Get the necessary elements
		MapDetails.elShell = document.getElementById('map_inside');
		MapDetails.elOuterShell = document.getElementById('map_shell');
		MapDetails.elMap = document.getElementById('MapResults');
		MapDetails.elTopRight = document.getElementById('maptopright');
		MapDetails.elInnerShell = MapDetails.elMap.parentNode;
		
		MapDetails.elOuterShell.style.height
			= (MapDetails.elShell.offsetHeight).toString() + "px";
			
		MapDetails.elOuterShell.style.width
			= (MapDetails.elShell.offsetWidth).toString() + "px";
			
		MapDetails.elShell.style.position = "absolute";
		MapDetails.elShell.style.width = "100%";
		
		MapDetails.elInnerShell.style.padding = "0px";
	
		MapDetails.elChangeLink = document.getElementById('mapchangelink');
		
		// Get the original height and width of our map and the shell
		MapDetails.OrigHeight = MapDetails.elMap.offsetHeight;
		MapDetails.OrigWidth = MapDetails.elShell.offsetWidth;
	
		MapDetails.ExpandShellAnim = new YAHOO.util.Anim(MapDetails.elShell,
			{ left: { to: -425 }, width: { to: 712 } }, 1, YAHOO.util.Easing.easeOut);
			
		MapDetails.ExpandMapAnim = new YAHOO.util.Anim(MapDetails.elMap,
			{ height: { by: 200 } }, 1, YAHOO.util.Easing.easeOut);
			
		MapDetails.ExpandPadAnim = new YAHOO.util.Anim(MapDetails.elInnerShell,
			{ padding: { to: 0 } });
			
		MapDetails.ExpandOuterShellAnim = new YAHOO.util.Anim(MapDetails.elOuterShell,
			{ height: { by: 200 } }, 1, YAHOO.util.Easing.easeOut);
			
		MapDetails.CollapseShellAnim = new YAHOO.util.Anim(MapDetails.elShell,
			{ left: { to: 0 }, width: { to: MapDetails.OrigWidth } }, 1, YAHOO.util.Easing.easeOut);
			
		MapDetails.CollapseMapAnim = new YAHOO.util.Anim(MapDetails.elMap,
			{ height: { by: -200 } }, 1, YAHOO.util.Easing.easeOut);
			
		MapDetails.CollapsePadAnim = new YAHOO.util.Anim(MapDetails.elInnerShell,
			{ padding: { to: 0 } });
			
		MapDetails.CollapseOuterShellAnim = new YAHOO.util.Anim(MapDetails.elOuterShell,
			{ height: { by: -200 } }, 1, YAHOO.util.Easing.easeOut);
			
		MapDetails.Expand = function() {
			MapDetails.ExpandShellAnim.animate();
			MapDetails.ExpandMapAnim.animate();
			MapDetails.ExpandPadAnim.animate();
			MapDetails.ExpandOuterShellAnim.animate();
			MapDetails.elChangeLink.innerHTML = "View Smaller Map";
			MapDetails.elChangeLink.href = "javascript: MapDetails.Collapse();";
			
			MapDetails.collapsed = false;
			
			// Redisplay the map window to show the image
			if (MapDetails.lastMapWindow != -1) openMapWindow(MapDetails.lastMapWindow);
			
			// Show the addresses
			var aAddresses = YAHOO.util.Dom.getElementsByClassName('jmap_address', 'span', 'map_locations');
			var iAddress;
			
			for (iAddress in aAddresses) {
				aAddresses[iAddress].style.display = 'inline';
			}
			
			MapDetails.MapInfo.map.zoomIn();
			MapDetails.MapInfo.map.zoomIn();
			
			MapDetails.MapInfo.latlng = MapDetails.MapInfo.map.getCenter();
		};
		
		MapDetails.Collapse = function() {
			MapDetails.CollapseShellAnim.animate();
			MapDetails.CollapsePadAnim.animate();
			MapDetails.CollapseMapAnim.animate();
			MapDetails.CollapseOuterShellAnim.animate();
			MapDetails.elChangeLink.innerHTML = "View Larger Map";
			MapDetails.elChangeLink.href = "javascript: MapDetails.Expand();";
			
			MapDetails.collapsed = true;
			
			// Redisplay the map window to hide the image
			if (MapDetails.lastMapWindow != -1) openMapWindow(MapDetails.lastMapWindow);
			
			// Hide the addresses
			var aAddresses = YAHOO.util.Dom.getElementsByClassName('jmap_address', 'span', 'map_locations');
			var iAddress;
			
			for (iAddress in aAddresses) {
				aAddresses[iAddress].style.display = 'none';
			}
			
			MapDetails.MapInfo.map.zoomOut();
			MapDetails.MapInfo.map.zoomOut();
			
			MapDetails.MapInfo.map.removeControl(MapDetails.ctType);
			MapDetails.MapInfo.map.removeControl(MapDetails.ctLgMap);
			MapDetails.MapInfo.map.removeControl(MapDetails.ctTRB);
			
			MapDetails.MapInfo.latlng = MapDetails.MapInfo.map.getCenter();
		};
		
		MapDetails.ExpandMapAnim.onComplete.subscribe(function() {
			MapDetails.ctType = new GMapTypeControl();
			MapDetails.ctLgMap = new GLargeMapControl();
			MapDetails.ctTRB = new TopRightButtonControl(MapDetails.Collapse);
		
			MapDetails.MapInfo.map.addControl(MapDetails.ctType, new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(30, 7)));
			MapDetails.MapInfo.map.addControl(MapDetails.ctLgMap);
			MapDetails.MapInfo.map.addControl(MapDetails.ctTRB);
		});
		
		MapDetails.ExpandMapAnim.onTween.subscribe(MapDetails.refresh);
		MapDetails.CollapseMapAnim.onTween.subscribe(MapDetails.refresh);
		MapDetails.CollapseMapAnim.onComplete.subscribe(MapDetails.refresh);
		
		// Add click events to all the markers
		for (var iJob in JobsArray) {
			JobsArray[iJob]['MARKER'].Job = iJob;
			GEvent.addListener(JobsArray[iJob]['MARKER'], "click", function() {
				openMapWindow(this.Job);
			});
		}
	},
	
	refresh: function() {
		MapDetails.MapInfo.map.checkResize();
		MapDetails.MapInfo.map.setCenter(MapDetails.MapInfo.latlng);
	}
}

// Top right button control
function TopRightButtonControl(funcOnClick) {
	this.onClick = funcOnClick;
}
TopRightButtonControl.prototype = new GControl();

TopRightButtonControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  this.setButtonStyle_(container);
  GEvent.addDomListener(container, "click", this.onClick);

  map.getContainer().appendChild(container);
  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TopRightButtonControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(-2, -1));
}

// Sets the proper CSS for the given button element.
TopRightButtonControl.prototype.setButtonStyle_ = function(button) {
  button.style.display = "block";
  button.style.position = "absolute";
  button.style.backgroundColor = "white";
  button.style.borderBottom = "1px solid #f9dd99";
  button.style.borderLeft = "1px solid #f9dd99";
  button.style.backgroundImage = "url('http://imgsg.jobing.com/2007/map/tlarrow.PNG')";
  button.style.backgroundPosition = "center center";
  button.style.backgroundRepeat = "no-repeat";
  button.style.height = "25px";
  button.style.width = "25px";
  button.style.right = "0px";
  button.style.top = "0px";
  button.style.cursor = "pointer";
}