/**
* Adds the main navigation control to the map
*/
function AddNavControl() {
    var el = document.createElement("div");
    el.id = navcontrolId;
    //el.style.background = "#235087";

	if(isMerchantPage == true) {
		el.style.height="48px"; // was 59px
		el.style.width="326px"; // was 240px
	} else {
		el.style.height="200px";
		el.style.width="66px";
		//$(el).setOpacity( 0.7 ); // this almost works except in IE imInfoBar is not visible
		//Moved background colour to navPanel and setOpacity on navPanel and imInfoBar separately after control added to map
    
		//el.style.opacity="0.7";  // does not work for IE without applying IE filter
		el.style.top = resources.NavControlTop;
		el.style.left="1px"; // because of border on interactive map
	}
	
	if(isMPMapExpanded == false) {
		var expandStyle = "block";
		var contractStyle = "none";
	} else {
		var expandStyle = "none";
		var contractStyle = "block";
	}
	
	if(isMerchantPage == false || isBranchSearch == true) {
		expandStyle = "none";
		contractStyle = "none";
	}

	if(isMerchantPage == true) {
		images = "/images/shared/map/grey/";
	    el.innerHTML="<div class='tl_imap'></div><div class='tr_imap'></div><div id='navPanel'><div id='navDir'><img id='North' src='/images/shared/map/grey/North.gif' alt='" + resourcePan + "' class='handicon' onmouseover='NavMouseOver(\"North\");' onmouseout='NavMouseOut(\"North\");' onmousedown='NavMouseDown(\"North\");' onmouseup='handleCompassClick(true);'/>" +
	    "<img id='East' src='/images/shared/map/grey/East.gif' alt='" + resourcePan + "' class='handicon' onmouseover='NavMouseOver(\"East\");' onmouseout='NavMouseOut(\"East\");' onmousedown='NavMouseDown(\"East\");' onmouseup='handleCompassClick(true);'/>" +
	    "<img id='West' src='/images/shared/map/grey/West.gif' alt='" + resourcePan + "' class='handicon' onmouseover='NavMouseOver(\"West\");' onmouseout='NavMouseOut(\"West\");' onmousedown='NavMouseDown(\"West\");' onmouseup='handleCompassClick(true);'/>" +
	    "<img id='South' src='/images/shared/map/grey/South.gif' alt='" + resourcePan + "' class='handicon' onmouseover='NavMouseOver(\"South\");' onmouseout='NavMouseOut(\"South\");' onmousedown='NavMouseDown(\"South\");' onmouseup='handleCompassClick(true);'/></div>" +
	    "<div id='zoomControl'><img id='ZoomIn' src='/images/shared/map/grey/ZoomIn.gif' alt='" + resourceZoomIn + "' class='handicon' onmouseover='NavMouseOver(\"ZoomIn\");' onmouseout='NavMouseOut(\"ZoomIn\");' onmousedown='NavMouseDown(\"ZoomIn\");' onmouseup='handleCompassClick(true);'/>" +
	    "<img id='ZoomOut-Min' src='/images/shared/map/grey/ZoomOut-Min.gif' alt='" + resourceZoomOut + "' class='handicon' onmouseover='NavMouseOver(\"ZoomOut-Min\");' onmouseout='NavMouseOut(\"ZoomOut-Min\");' onmousedown='NavMouseDown(\"ZoomOut-Min\");' onmouseup='handleCompassClick(true);'/></div>" +
	    "<div id='veMapStylesContainer'><div id='birdseye' class='veNavTextContainer lastVeNavText'><a id='a_birdseye' class='handicon veNavText' onmousedown='NavMouseDown(\"birdseye\");'>" + resourceBirdseye + "</a></div>" +
	    "<div id='aerial' class='veNavTextContainer'><a id='a_aerial' class='handicon veNavText' onmousedown='NavMouseDown(\"aerial\");'>" + resourceAerial + "</a></div>" +
	    "<div id='road' class='veNavTextContainer'><a id='a_road' class='handicon veNavText ypgNavSelected' onmousedown='NavMouseDown(\"road\");'>" + resourceRoad +"</a></div><div class='ypgClear'></div></div>" +
	    //"<div id='hybrid' class='veNavTextContainer'><a class='handicon veNavText' onmousedown='NavMouseDown(\"hybrid\");'>Hybrid</a></div>" +
	    //"<img id='Expand' src='/images/shared/map/Expand.gif' class='handicon' style='display:" + expandStyle + "' onmouseover='NavMouseOver(\"Expand\");' onmouseout='NavMouseOut(\"Expand\");' onmousedown='NavMouseDown(\"Expand\");'/></div>" +
	    "<img id='Contract' src='/images/shared/map/grey/Contract.gif' class='handicon' style='display:" + contractStyle + "' onmouseover='NavMouseOver(\"Contract\");' onmouseout='NavMouseOut(\"Contract\");' onmousedown='NavMouseDown(\"Contract\");'/></div></div>";
	} else {	
	    el.innerHTML="<div id='imInfoBar' class='imInfoBar'><div id='fab_summary0' class='imResultSummary'></div><div id='returnToListing'><a class='ypgSmMapContract' href='#' name='&amp;lid=show_listings&amp;lpos=imap' onclick='javascript:document.BusinessSearch.submit();return false;'>" + resourceListingView + "</a></div></div><div id='navPanel'><div id='navDir'><img id='North' src='/images/shared/map/North.gif' alt='" + resourcePan + "' class='handicon' onmouseover='NavMouseOver(\"North\");' onmouseout='NavMouseOut(\"North\");' onmousedown='NavMouseDown(\"North\");' onmouseup='handleCompassClick(true);'/>" +
	    "<img id='East' src='/images/shared/map/East.gif' alt='" + resourcePan + "' class='handicon' onmouseover='NavMouseOver(\"East\");' onmouseout='NavMouseOut(\"East\");' onmousedown='NavMouseDown(\"East\");' onmouseup='handleCompassClick(true);'/>" +
	    "<img id='West' src='/images/shared/map/West.gif' alt='" + resourcePan + "' class='handicon' onmouseover='NavMouseOver(\"West\");' onmouseout='NavMouseOut(\"West\");' onmousedown='NavMouseDown(\"West\");' onmouseup='handleCompassClick(true);'/>" +
	    "<img id='South' src='/images/shared/map/South.gif' alt='" + resourcePan + "' class='handicon' onmouseover='NavMouseOver(\"South\");' onmouseout='NavMouseOut(\"South\");' onmousedown='NavMouseDown(\"South\");' onmouseup='handleCompassClick(true);'/></div>" +
	    "<div id='zoomControl'><img id='ZoomIn' src='/images/shared/map/ZoomIn.gif' alt='" + resourceZoomIn + "' class='handicon navpng' onmouseover='NavMouseOver(\"ZoomIn\");' onmouseout='NavMouseOut(\"ZoomIn\");' onmousedown='NavMouseDown(\"ZoomIn\");' onmouseup='handleCompassClick(true);'/>" +
	    "<img id='ZoomOut-Min' src='/images/shared/map/ZoomOut-Min.gif' alt='" + resourceZoomOut + "' class='handicon navpng' onmouseover='NavMouseOver(\"ZoomOut-Min\");' onmouseout='NavMouseOut(\"ZoomOut-Min\");' onmousedown='NavMouseDown(\"ZoomOut-Min\");' onmouseup='handleCompassClick(true);'/></div>" +
	    "<div id='veMapStylesContainerIM'><div id='road' class='veNavTextContainer'><a id='a_road' class='handicon veNavText ypgNavSelected' onmousedown='NavMouseDown(\"road\");'>" + resourceRoad +"</a></div>" +
	    "<div id='aerial' class='veNavTextContainer'><a id='a_aerial' class='handicon veNavText' onmousedown='NavMouseDown(\"aerial\");'>" + resourceAerial + "</a></div>" +
	    //"<div id='hybrid' class='veNavTextContainer'><a class='handicon veNavText' onmousedown='NavMouseDown(\"hybrid\");'>Hybrid</a></div>" +
	    "<div id='birdseye' class='veNavTextContainer lastVeNavText'><a id='a_birdseye' class='handicon veNavText' onmousedown='NavMouseDown(\"birdseye\");'>" + resourceBirdseye + "</a></div>" +
	    "<div id='birdseyeDisabled' class='veNavTextContainer lastVeNavText' style='display:none;'><span class='veNavText'>" + resourceBirdseye + "</span></div></div>" +
	    "<img id='Expand' src='/images/shared/map/Expand.gif' class='handicon navpng' style='display:" + expandStyle + "' onmouseover='NavMouseOver(\"Expand\");' onmouseout='NavMouseOut(\"Expand\");' onmousedown='NavMouseDown(\"Expand\");'/></div>" +
	    "<img id='Contract' src='/images/shared/map/Contract.gif' class='handicon navpng' style='display:" + contractStyle + "' onmouseover='NavMouseOver(\"Contract\");' onmouseout='NavMouseOut(\"Contract\");' onmousedown='NavMouseDown(\"Contract\");'/></div>";
	}

    //mapManager.Map.AddControl(el);

    //$(imInfoBar).setOpacity( 0.7 );

	if(isMerchantPage == true) {
		el.style.position = 'relative';
		/* Could not use simple css with :hover on anchor tag to show border because IE6 seems to ignore rules with :hover ... guessing because map dashboard added to DOM via js causes bug???. */

		$(mapManager.MapElement).insert({before:el});

		$('a_road').observe('mouseover', respondToMouseOver);
		$('a_road').observe('mouseout', respondToMouseOut);
		$('a_aerial').observe('mouseover', respondToMouseOver);
		$('a_aerial').observe('mouseout', respondToMouseOut);
		$('a_birdseye').observe('mouseover', respondToMouseOver);
		$('a_birdseye').observe('mouseout', respondToMouseOut);
	} else {
		el.style.position = 'absolute';
		el.style.top ="0px";
		el.style.left="0px";
		el.style.zIndex = '201';
		mapManager.MapElement.appendChild( el );
		
		$('a_road').observe('mouseover', respondToMouseOver);
		$('a_road').observe('mouseout', respondToMouseOut);
		$('a_aerial').observe('mouseover', respondToMouseOver);
		$('a_aerial').observe('mouseout', respondToMouseOut);
		$('a_birdseye').observe('mouseover', respondToMouseOver);
		$('a_birdseye').observe('mouseout', respondToMouseOut);
	}
}

/**
* Show border for onhover effect
*/
function respondToMouseOver(event) {
	var element = event.element();
	element.addClassName('pseudoHover');
	event.stop();
}

/**
* Remove border for onhover effect
*/
function respondToMouseOut(event) {
	var element = event.element();
	element.removeClassName('pseudoHover');
	event.stop();
	//alert("Tag Name : " + element.tagName );
}

/**
* Update map style indicator to show which is current active map style
*/
function updateSelectedMapStyleIndicator(mapStyle) {

	if((mapStyle == "a_birdseye") && !mapManager.Map.IsBirdseyeAvailable()) return;
	
	if(isMerchantPage == true) {       
		var anchors = $$('#veMapStylesContainer a');
	} else {
		var anchors = $$('#veMapStylesContainerIM a');
	}
	
	if (anchors) {
		anchors.each(function(anchor) {
			if(!$(anchor).empty()) {
				anchor.removeClassName('ypgNavSelected');
			}
		})
	}
	$(mapStyle).addClassName('ypgNavSelected');
}

/**
* Adds the mini-map open/close icons to the map
*/
function AddMiniControl()
{
    var openImg = document.createElement("img");
    openImg.id = "OpenMini";
    openImg.src = images + "MapOverviewClosed.gif";
    openImg.style.left=mapManager.Map.GetWidth()-105+"px";
    openImg.style.position="absolute";
    openImg.style.top = resources.OpenMiniTop+"px";
    openImg.style.display="block";
    openImg.className="handicon";
    openImg.onclick = OpenMini;
    openImg.onmouseover = function()
        {
            document.getElementById('OpenMini').src = images + 'MapOverviewClosedRollover.gif';
        }
    openImg.onmouseout = function()
        {
            document.getElementById('OpenMini').src = images + 'MapOverviewClosed.gif';
        }
    mapManager.Map.AddControl(openImg);

    var closeImg = document.createElement("img");
    closeImg.id = "CloseMini";
    closeImg.src = images + "MapOverviewOpen.gif";
    closeImg.className = "handicon";
    closeImg.onmouseover = function()
    {
        document.getElementById('CloseMini').src = images + 'MapOverviewOpenRollover.gif';
    }
    closeImg.onmouseout = function()
    {
        document.getElementById('CloseMini').src = images + 'MapOverviewOpen.gif';
    }
    closeImg.style.left = mapManager.Map.GetWidth()-152+"px";
    closeImg.style.position = "absolute";
    closeImg.style.top = "149px";
    closeImg.style.display="none";
    closeImg.onclick = CloseMini;
    mapManager.Map.AddControl(closeImg);
    
    var closePanelImg = document.createElement("img");
    closePanelImg.id = "ClosePanel";
    closePanelImg.src = images + "PanelShow.gif";
    closePanelImg.className = "handicon";
    closePanelImg.onmouseover = function()
    {
        document.getElementById('ClosePanel').src = images + 'PanelShowRollover.gif';
    }
    closePanelImg.onmouseout = function()
    {
        document.getElementById('ClosePanel').src = images + 'PanelShow.gif';
    }
    if(images == "Images/")
    {
        closePanelImg.style.left=mapManager.Map.GetWidth()-161+"px";
    }
    else
    {
        closePanelImg.style.left=mapManager.Map.GetWidth()-181+"px";
    }
    
    closePanelImg.style.display="block";
    closePanelImg.position="absolute";
    document.getElementById('NearbySearch').className = 'NearbyPanelVisible';
    document.getElementById('PanelWhatsNearby').style.display = 'none';
    closePanelImg.onclick = FindNearbyPanelShowHide;
    mapManager.Map.AddControl(closePanelImg);
}


/**
* Adds the mini-map open/close icons to the map
*/
function AddMyLocationControl()
{    
    var myLocImage = document.createElement("img");
    myLocImage.id = "MyLocationIcon";
    myLocImage.src = "Images/MyLocation.gif";
    myLocImage.style.left=mapManager.Map.GetLeft()- 210 +"px";
    myLocImage.style.position="absolute";
    myLocImage.style.top = resources.NavControlTop;
    myLocImage.style.display="none";
    myLocImage.className="myLocationClass";
    myLocImage.style.cursor = "pointer";
    
    mapManager.Map.AddControl(myLocImage);    
}


/**
* Fire's timer to fix nav controls on window resize
* timer necessary in order for resize to work
*/
function WindowResize()
{
    setTimeout("WindowResizeHelper()",100);
}

/**
* Resize nav control on window resize
*/
function WindowResizeHelper()
{
    var mapOffsetLeft = mapManager.Map.GetLeft();
    document.getElementById("navcontrol").style.left = mapOffsetLeft + "px";
}

/**
 * Show the VE mini map
 */
function OpenMini()
{
    mapManager.Map.ShowMiniMap(mapManager.Map.GetWidth()-154,0);
    document.getElementById('OpenMini').style.display="none";
    document.getElementById('CloseMini').style.display="block";
    if(images == "Images/")
    {
        document.getElementById('ClosePanel').style.left=mapManager.Map.GetLeft()+mapManager.Map.GetWidth()-209+"px";
    }
    else
    {
        document.getElementById('ClosePanel').style.left=mapManager.Map.GetLeft()+mapManager.Map.GetWidth()-229+"px";
    }
    document.getElementById('MSVE_minimap_resize').style.display="none";
}

/**
 * Hide the VE mini map
 */
function CloseMini()
{
    mapManager.Map.HideMiniMap();
    document.getElementById('OpenMini').style.display="block";
    document.getElementById('CloseMini').style.display="none";
    if(images == "Images/")
    {
        document.getElementById('ClosePanel').style.left=mapManager.Map.GetLeft()+mapManager.Map.GetWidth()-161+"px";
    }
    else
    {
        document.getElementById('ClosePanel').style.left=mapManager.Map.GetLeft()+mapManager.Map.GetWidth()-181+"px";
    }
}

/**
* Redraw images on nav control on user mouse overs
*/
function NavMouseOver(imageName)
{
    if(imageName == "hide" && navHidden == true)
    {
        document.getElementById(imageName).src = images + "nav/showOn.gif";
    }
    else
    {
        document.getElementById(imageName).src = images + imageName + "-onEnter.gif";
    }
}

/**
* Redraw images on nav control on user mouse overs
*/
function NavMouseOut(imageName)
{
    if(imageName == "hide" && navHidden == true)
    {
        document.getElementById(imageName).src = images + "nav/showOff.gif";
    }
    else
    {
        document.getElementById(imageName).src = images + imageName + ".gif";
    }
    handleCompassClick(true);
}

/**
* Pan map based on direction selected by user
* Also manages buttons on nav control
* @param string imageName   The name of the image that was clicked
*/
function NavMouseDown(imageName, e)
{

	if (typeof e != 'undefined' && e != 'null') {
		if (!e) var e = window.event;
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
	}
	
    switch(imageName)
    {
        case "North":
            compass_x = 0;
            compass_y = -panSpeed;
            handleCompassClick(false);
            doPan();
            break;
        case "East":
            compass_x = panSpeed;
            compass_y = 0;    
            handleCompassClick(false);
            doPan();
            break;
        case "South":
            compass_x = 0;
            compass_y = panSpeed;     
            handleCompassClick(false);
            doPan();
            break;
        case "West":
            compass_x = -panSpeed;
            compass_y = 0;    
            handleCompassClick(false);
            doPan();
            break;
        case "ZoomIn":
            handleCompassClick(false);
            doZoomIn();
            break;
        case "ZoomOut-Min":
            handleCompassClick(false);
            doZoomOut();
            break; 
        case "road":
            mapManager.Map.SetMapStyle(VEMapStyle.Road);
			updateSelectedMapStyleIndicator('a_road');
			break;
        case "aerial":
            mapManager.Map.SetMapStyle(VEMapStyle.Hybrid); //Aerial
            updateSelectedMapStyleIndicator('a_aerial');
            break;
        case "hybrid":
            mapManager.Map.SetMapStyle(VEMapStyle.Hybrid);
            break;
        case "birdseye":
            mapManager.Map.SetMapStyle(VEMapStyle.BirdseyeHybrid);
            updateSelectedMapStyleIndicator('a_birdseye');
            break;
        case "Expand":
        	isMPMapExpanded = true;
            mapManager.MapResize();
            //$('Expand').style.display = "none";
            $('ypMerchtMapBottom').style.display = "none";
	        $('Contract').style.display = "block";
	        // makes navcontrol on top of mainMap.
	        $('navcontrol').style.position = "absolute";
	        $('navcontrol').style.zIndex = "6000";
	        $('MainMap').style.margin = "0px";
	        
            break;
        case "Contract":
        	isMPMapExpanded = false;
            mapManager.MapResize();
            //$('Expand').style.display = "block";
            $('ypMerchtMapBottom').style.display = "block";
	        $('Contract').style.display = "none";
            $('yp_DrivingDirections0').style.display = "none";
            mapManager.clearRoute();
            mapManager.ClearSearchRelatedShapes();
            YPSearchManager.AddLocationPinToMap();
            // this will reverted nav control to not on top of mainMap.
            $('navcontrol').style.position = "relative";
            $('MainMap').style.marginTop ="3px";
            $('MainMap').style.marginBottom ="3px";
           
            break;  
        case "hide":
            var control = document.getElementById("hide");
            if(navHidden == false)
            {
                control.src = images + "nav/showOff.gif";
                document.getElementById(navcontrolId).style.height="17px"; 
                document.getElementById('navPanel').style.display ="none";
                document.getElementById('hide').style.top = "0px";
                navHidden = true;
            }
            else
            {
                control.src = images + "nav/hideOff.gif";
                document.getElementById(navcontrolId).style.height="229px";
                document.getElementById('navPanel').style.display ="block";                
                document.getElementById('hide').style.top = "212px";
                navHidden = false;
            }
            break;
    }
}

/**
* Manage when to cancel map pans
*/
function handleCompassClick(mouseOut)
{
    if(mouseOut)
    {
        compass_click = false;
    }
    else
    {
        compass_click = true;
    }
}

/** 
* continue pan
*/
function doPan()
{
	if(compass_click)
	{
		mapManager.Map.Pan(compass_x,compass_y);
		setTimeout("doPan()",30);
	}
}

/**
* Continue zooming in
*/
function doZoomIn()
{
    if(compass_click)
	{
		mapManager.Map.ZoomIn();
		setTimeout("doZoomIn()",30);
	}
}

/**
* Continue zooming out
*/
function doZoomOut()
{
    if(compass_click)
	{
		mapManager.Map.ZoomOut();
		setTimeout("doZoomOut()",30);
	}
}

function ShowLoading()
{
    document.getElementById('PanelLoading').style.display="block";
    document.getElementById('LoadingImg').style.left = (mapManager.Map.GetLeft() + mapManager.Map.GetWidth()/2 - 125) + "px" ;
    document.getElementById('LoadingImg').style.top = (mapManager.Map.GetTop() + mapManager.Map.GetHeight()/2 - 125) + "px" ;
}
function HideLoading()
{
    document.getElementById('PanelLoading').style.display="none";
}