// POI data object
function POI2(latitude, longitude, address, city, state, zip, marketValue, defaultAmount, beds, baths, squareFeet)
{
    this.Latitude = latitude;
    this.Longitude = longitude;
    this.Address = address;
    this.City = city;
    this.State = state;
    this.Zip = zip;
    this.MarketValue = marketValue;
    this.DefaultAmount = defaultAmount;
    this.Beds = beds;
    this.Baths = baths;
    this.SquareFeet = squareFeet;
}

//Constants
var VE_ZOOM_LEVEL = 16;
var VE_MAP_STYLE = "r";
var MAP_DIV = "myMap";
var TEMP_DIV = "pinDiv";
var PROPERTIES_CONTROL = "freePropDetailsBalloonCnr";
var BALLOON_IMAGE = "images/numberBalloon_map_";
var X_LEFT_BORDER = 450;
var Y_TOP_BORDER = 280;
var Y_MIDDLE_BORDER = 340;
var MIDDLE_VERTICAL_OFFSET = 90;


//Global vars
var gMap;
var gObjPOIs;

//Function to be used on the page load.
function OnPageLoad()
{
    //Keep a global copy of the POI's.
    gObjPOIs = poi2List;
    
    if(gObjPOIs.length == 0)
    {
        alert("Sorry. This address is currently not available.");
        return;
    }

    //Instantiate gMap and link it to the DIV tag "myMap".
    gMap = new VEMap(MAP_DIV); 

    //Add an event to be called after Map is first loaded.
    gMap.onLoadMap = GrabData; 
    
    //Load the map at the subject property(the first POI) with 2nd level zoom, on road view.
   try
    {
        gMap.LoadMap(new VELatLong(gObjPOIs[0].Latitude,gObjPOIs[0].Longitude),VE_ZOOM_LEVEL,VE_MAP_STYLE,false);
    }
    catch(er)//Makes sure that Firefox still continues on after a Msn.Drawing.Exception is thrown
    {
        //document.body.innerHTML = er;
        GrabData(event);
    }
    
    //Attach an onclick event
    gMap.AttachEvent("onclick",OnClick);
    
    //Attach an onchangeview event
    gMap.AttachEvent("onchangeview",OnChangeView);
}


//Eventhandler to catch the onClick event on the map.  
function OnClick(e)
{
   var zoomPoint;

   zoomPoint = gMap.GetCenter();
       
   gMap.SetCenter(zoomPoint);
}
        

//Event handler to onchangeview event
function OnChangeView(e)
{
    //remove all pushpin popups
    ClearDivs();
}
        
        
//EventHandling function when the map first loads
function GrabData(e)
{
    var zoomLevel = gMap.GetZoomLevel();
    var centerPoint = gMap.GetCenter();
    var poiArray = new Array;       //poiArray is an array of POI's needed in order to apply the gMap.SetMapView function which carries out the
                                    //the "BestFit" functionality on the group of properties.
    gMap.DeleteAllPushpins();
    
    for(var x = 0; x< gObjPOIs.length; x++)
    {
        var imageLink = BALLOON_IMAGE + (x+1) + ".gif";
        var location = new VELatLong(gObjPOIs[x].Latitude,gObjPOIs[x].Longitude);
        var title = x+1;
        var desc = gObjPOIs[x].Latitude +"|"+gObjPOIs[x].Longitude;
        var pin = new VEPushpin(x+1, location, imageLink, x.toString(), desc);
        
        poiArray.push(location);
        
        gMap.AddPushpin(pin);
    }
    
    if(typeof(autoZoomOff) != "undefined" && !autoZoomOff)
        gMap.SetMapView(poiArray);
                       
    gMap.HideDashboard();
}
	    
//Loops through all the popup divs and sets their display to 'none' so that they become invisible.
function ClearDivs()
{
    var balloon = document.getElementById(TEMP_DIV);

    if ( balloon.childNodes )
    {
        while ( balloon.childNodes.length > 0 )
        {
	        balloon.removeChild(balloon.childNodes[0]);
        }
    }
}    

//Here we set Pushpin OnMouseOver detail to false because we are doing a custom div.
VEPushpin.ShowDetailOnMouseOver = false;
	        
//Here we set a function that is called when there is a hover over one of the pushpins
VEPushpin.OnMouseOverCallback = function(x, y, title, details)
{
    var top;
    var left;
    var middle = false;
    var xOff = x;
    var yOff = y;

    var tlShow = "tl_arrow hide";
    var trShow = "tr_arrow hide";
    var blShow = "bl_arrow hide";
    var brShow = "br_arrow hide";
    var mlShow = "ml_arrow hide";
    var mrShow = "mr_arrow hide";

    var frame,content;
    var pinNumber = title;

    left = xOff < X_LEFT_BORDER ;

    if(yOff < Y_TOP_BORDER)
    {
        top = true;
    }
    else if(yOff < Y_MIDDLE_BORDER)
    {
        top = false;
        middle = true;
    }
    else
    {
        top = false;
    }

    if(middle && left)//ML
    {
            mlShow = "ml_arrow show";
    }
    else if(middle && !left)//MR
    {
            mrShow = "mr_arrow show";
    }
    else if(top && left)//TL
    {
         tlShow = "tl_arrow show";
    }
    else if(top && !left)//TR
    {
         trShow = "tr_arrow show";
    }
    else if(!top && left)//BL
    {
         blShow = "bl_arrow show'";  
    }
    else if(!top && !left)//BR
    {
         brShow = "br_arrow show"; 
    }

    content = getContentHtml(pinNumber);
    
    frame = getFrameHtml(content,mlShow,mrShow,tlShow,trShow,blShow,brShow);


    var newdiv = document.createElement("div");
    var divIdName = PROPERTIES_CONTROL;

    var balloon = document.getElementById(TEMP_DIV);

    			
    if ( balloon.childNodes )
    {
        while ( balloon.childNodes.length > 0 )
        {
            balloon.removeChild(balloon.childNodes[0]);
        }
    }

    newdiv.setAttribute('id', divIdName);
    newdiv.style.position = "absolute";
    newdiv.style.top = '1000px';
    newdiv.style.left = '1000px';
    newdiv.innerHTML = frame;

    newdiv.style.zIndex = 2000;

    balloon.appendChild(newdiv);

    if(middle && left)//ML
    {
        xOff = xOff + 20;
        yOff = yOff - MIDDLE_VERTICAL_OFFSET;
    }
    else if(middle && !left)//MR
    {
        xOff = xOff - newdiv.offsetWidth - 25;
        yOff = yOff - MIDDLE_VERTICAL_OFFSET;
    }
    else if(top && left)
    {
        xOff = xOff - 8;
        yOff = yOff + 10;
    }
    else if(top && !left)//TR
    {
     xOff = xOff - newdiv.offsetWidth;
     yOff = yOff + 10;
    }
    else if(!top && left)//BL
    {
     yOff = yOff - newdiv.offsetHeight - 15;
     xOff = xOff - 8;
    }
    else if(!top && !left)//BR
    {
     xOff = xOff - newdiv.offsetWidth;
     yOff = yOff - newdiv.offsetHeight - 15;
    }			        

    newdiv.style.top = (yOff) + 'px';
    newdiv.style.left = (xOff) + 'px';
    newdiv.style.display = "block";
}

//closes popup element	        
function closePropInfoBalloon(divName)
{
    loPropInfoDiv = document.getElementById(divName);
    loPropInfoDiv.style.visibility = "hidden";
    loPropInfoDiv.style.display = "none";
}

//gets popup element frame
function getFrameHtml(content,mlShow,mrShow,tlShow,trShow,blShow,brShow)
{
    var frameHtml;
    frameHtml = 
        "<table cellpadding='0' cellspacing='0' border='0' id='freePropDetailsBalloonTbl'>" +
        "<tr>" +
            "<td class='tl_crn'><img src='images/tl_crn.gif' width='5' height='5' alt=''></td>" +
            "<td class='midTopCell'><img src='images/spacer.gif' width='1' height='1' alt=''></td>" +
            "<td class='tr_crn'><img src='images/tr_crn.gif' width='5' height='5' alt=''></td>" +
        "</tr>" +
        "<tr>" +
            "<td class='midLeftCell'><img src='images/spacer.gif' width='1' height='1' alt=''></td>" +
            "<td class='contentCell'>" +
                    content + 
                "<img class='btn_x_cnr' onclick=closePropInfoBalloon('" + PROPERTIES_CONTROL + "'); src='images/button_x.gif' alt='' width='14' height='13'>" +
            "</td>" +
            "<td class='midRightCell'><img src='images/spacer.gif' width='1' height='1' alt=''></td>" +
        "</tr>" +
        "<tr>" +
            "<td class='bl_crn'><img src='images/bl_crn.gif' width='5' height='5' alt=''></td>" +
            "<td class='midBottomCell'><img src='images/spacer.gif' width='1' height='1' alt=''></td>" +
            "<td class='br_crn'><img src='images/br_crn.gif' width='5' height='5' alt=''></td>" +
        "</tr>" +
        "</table>" +
        "<img src='images/ml_arrow.gif' width='25' height='10' alt='' class='"+mlShow+"'>" +
        "<img src='images/mr_arrow.gif' width='25' height='10' alt='' class='"+mrShow+"'>" +
        "<img src='images/tl_arrow.gif' width='18' height='15' alt='' class='"+tlShow+"'>" +
        "<img src='images/tr_arrow.gif' width='18' height='15' alt='' class='"+trShow+"'>" +
        "<img src='images/bl_arrow.gif' width='18' height='15' alt='' class='"+blShow+"'>" +
        "<img src='images/br_arrow.gif' width='18' height='15' alt='' class='"+brShow+"'>" ;

    return frameHtml;
}

//gets popup element inner content
function getContentHtml(pinNumber)
{
    var content;
    
    content = "<strong>" + gObjPOIs[pinNumber].Address + "<br>" + gObjPOIs[pinNumber].City + ", " + 
        gObjPOIs[pinNumber].State + " " + gObjPOIs[pinNumber].Zip + "<br><br>Market&nbsp;Value:&nbsp;</strong>" +
        gObjPOIs[pinNumber].MarketValue + "<br><strong>Default&nbsp;Amount:&nbsp;</strong>" + gObjPOIs[pinNumber].DefaultAmount +
        "<br><strong>Beds/Baths:&nbsp;</strong>" + gObjPOIs[pinNumber].Beds + "/" + gObjPOIs[pinNumber].Baths + 
        "<br><strong>Sq.Ft.:&nbsp;</strong>" + gObjPOIs[pinNumber].SquareFeet;
    
    return content;
}