﻿// JScript File
//<![CDATA[
var mapX;
var mapY;
var mapPoint;

var map = new Object();
var markerMgr
var markerIndex = 0;
var markers = new Array();
var markerNodes = new Array();
var zoomLevel = 15;
var zoomThreshold = 13;
var currentZoom
var mapPoint
var sqftlabel
var xml
var overLay
var contentNodes
var baseIcon = new GIcon();
var host = imageServer + "corporate/usercontrols";
var West_Bounding_Coordinate = -124.211606;
var East_Bounding_Coordinate = -67.158958;
var North_Bounding_Coordinate = 49.384359;
var South_Bounding_Coordinate = 25.837377;
baseIcon.iconSize = new GSize(19,19);
baseIcon.shadowSize = new GSize(24,19);
baseIcon.iconAnchor = new GPoint(19,19);
baseIcon.infoWindowAnchor = new GPoint(19,0);
var greenIcon = new GIcon(baseIcon,host + "/images/green_dot.png",null,host + "/images/shadow_angles.png");
var orangeIcon = new GIcon(baseIcon,host + "/images/orange_dot.png",null,host + "/images/shadow_angles.png");
var blueIcon = new GIcon(baseIcon,host + "/images/blu_dot.png",null,host + "/images/shadow_angles.png");
var redIcon = new GIcon(baseIcon,host + "/images/red_dot.png",null,host + "/images/shadow_angles.png");

// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
function Rectangle(bounds,content,opt_weight,opt_color,opt_bgColor) {
    this.bounds_ = bounds;
    this.weight_ = opt_weight || 2;
    this.color_ = opt_color || "#888888";
    this.backgroundColor_ = opt_bgColor || "#ffffff";
    this.content_ = content;
}
Rectangle.prototype = new GOverlay();

// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {
    // Create the DIV representing our rectangle
    var div = document.createElement("div");
    //div.style.border = this.weight_ + "px solid " + this.color_;
    div.style.position = "absolute";
    div.style.backgroundColor = this.backgroundColor_;
    div.style.padding = "0px";
    div.innerHTML = this.content_;

    // Our rectangle is flat against the map, so we add our selves to the
    // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
    // below the marker shadows)
    map.getPane(G_MAP_FLOAT_PANE).appendChild(div);

    this.map_ = map;
    this.div_ = div;
}

// Remove the main DIV from the map pane
Rectangle.prototype.remove = function() {
    this.div_.parentNode.removeChild(this.div_);
}

// Copy our data to a new Rectangle
Rectangle.prototype.copy = function() {
    return new Rectangle(this.bounds_,this.content_,this.weight_,this.color_,
                       this.backgroundColor_,this.opacity_);
}

// Redraw the rectangle based on the current projection and zoom level
Rectangle.prototype.redraw = function(force) {
    // We only need to redraw if the coordinate system has changed
    if(!force) return;

    // Calculate the DIV coordinates of two opposite corners of our bounds to
    // get the size and position of our rectangle
    var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    // Now position our DIV based on the DIV coordinates of our bounds
    this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
    //this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
    this.div_.style.height = "auto";
    this.div_.style.left = (Math.min(c2.x,c1.x) - this.weight_) + "px";
    this.div_.style.top = (Math.min(c2.y,c1.y) - this.weight_) + "px";
}

function loadMap(dataSource,market_Id,divId) {
    if(GBrowserIsCompatible()) {
        setTimeout(function() {
            map = new Object();
            $.get(dataSource,{ marketid: market_Id },function(data) {
                if($.browser.safari) {
                    setTimeout(function() {
                        loadData(data,divId);
                    },5);
                }
                else {
                    loadData(data,divId);
                }
            });
        },3);
    }
}

function loadData(data,divId) {
    if(typeof (data) !== "undefined") {
        var position;
        var mapDiv = document.getElementById(divId);
        var mapSize = new GSize(650,330);
        position = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(3,15));
        map = new GMap2(mapDiv, { size:mapSize });
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl(),position);

        xml = data;

        if(xml.documentElement.hasChildNodes &&
            xml.documentElement.childNodes.length > 0 &&
            xml.documentElement.childNodes[0].hasChildNodes &&
            xml.documentElement.childNodes.length > 0) {
            var lat = xml.documentElement.getAttribute("lat");
            var lng = xml.documentElement.getAttribute("lng");
            if(lat.length > 0 && lng.length > 0) {
                mapPoint = new GLatLng(lat,lng);
                map.setCenter(mapPoint,zoomLevel);
            }

            sqftlabel = xml.documentElement.getAttribute("sqftlabel");
            if (sqftlabel.length > 0) sqftlabel += "&nbsp;";
            getMarkers(0);
            getMarkers(1);
            resizeMap();
            markerMgr = new GMarkerManager(map);

            loadMarkers(0, 0, zoomThreshold - 1);
            loadListeners();
            loadMarkers(1, zoomThreshold);
            loadListeners();
        }
        else {
            if(xml != null) {
                var lat = xml.documentElement.getAttribute("lat");
                var lng = xml.documentElement.getAttribute("lng");
                if(lat && lng) {
                    var point = new GLatLng(lat,lng);
                    map.setCenter(point,10);
                }
            }
            else {
                var sw = new GLatLng(South_Bounding_Coordinate,West_Bounding_Coordinate);
                var ne = new GLatLng(North_Bounding_Coordinate,East_Bounding_Coordinate);
                var USBounds = new GLatLngBounds(sw,ne);
                map.setCenter(USBounds.getCenter(),3);
            }
        }
    }
}

function getMarkers(nodeIndex) {
    var markerLevelNodes
    var childNode

    if (nodeIndex == 1) { markerIndex = markers.length; }

    markerLevelNodes = xml.documentElement.childNodes[nodeIndex].getElementsByTagName("marker");

    for(i = 0;i < markerLevelNodes.length;i++) {
        var markerLevelNode = markerLevelNodes[i];
        var markerTitle
        var point;
        var communityIcon;
        var marker;

        if(markerLevelNode.childNodes.length == 1) {
            childNode = markerLevelNode.childNodes[0];
            point = new GLatLng(parseFloat(markerLevelNode.getAttribute("lat")),
                            parseFloat(markerLevelNode.getAttribute("lng")));
            markerTitle = childNode.getAttribute("title");
            communityIcon = getIconByStage(childNode);
            marker = new GMarker(point,{ icon: communityIcon,title: markerTitle });
            markers.push(marker);
            markerNodes.push(childNode);
        }
        else //we are dealing with a Master Community with Communities that have proximity lat/lng
        {
            //if there are childNodes then the Node is a communities Node
            point = new GLatLng(parseFloat(markerLevelNode.getAttribute("lat")),
                            parseFloat(markerLevelNode.getAttribute("lng")));

            markerTitle = getMarkerTitle(markerLevelNode.childNodes);
            communityIcon = getIconByStage(markerLevelNode);
            marker = new GMarker(point,{ icon: communityIcon,title: markerTitle });
            markers.push(marker);
            markerNodes.push(markerLevelNode);
        }
    }
}
function getMarkerTitle(childNodes) {
    var title = "";
    for(b = 0;b < childNodes.length;b++) {
        if(title.length > 0) {
            title += "\n";
        }
        title += childNodes[b].getAttribute("title");
    }
    return title;
}
function getIconByStage(node) {
    var stage = "";
    if(node.hasChildNodes && node.childNodes.length > 0) {
        stage = node.childNodes[0].getAttribute("statusImage");
        for(childIndex = 1;childIndex < node.length;childIndex++) {
            var currentStage = node.childNodes[childIndex].getAttribute("statusImage");
            if(currentStage != stage) {
                //communities are in different stages so default to greenIcon
                return greenIcon;
            }
        }
    }
    else {
        stage = node.getAttribute("statusImage");
    }
    //return the icon based upon the stage
    switch(stage) {
        case "actively selling":
            return greenIcon;
        case "close out":
            return redIcon;
        case "coming soon":
            return orangeIcon;
        case "grand opening":
            return blueIcon;
        default:
            return greenIcon;
    }
}
function loadListeners() {
    for(i = 0;i < markers.length;i++) {
        var marker = markers[i];
        var pointNodes = markerNodes[i];
        var point;
        if(pointNodes.childNodes.length > 1) {
            addMarkerEvents(marker,pointNodes);
        }
        else {
            addMarkerEvents(marker,pointNodes);
        }
    }
}
function addMarkerEvents(marker,pointNodes) {
    if(pointNodes.childNodes.length > 1) {
        GEvent.addListener(marker,"click",function() {
            contentNodes = pointNodes;
            var directions = "<div class='mapDirections'><table border='0' cellpadding='0' cellspacing='0' class='listTable'><tr><td class='contentDirections'>" + pointNodes.childNodes[0].getAttribute("directions") + "</td></tr>";
            var content = "<table border='0' cellpadding='0' cellspacing='0' class='listTable'><tr><td class='listHeader'>List of Communities</td></tr>";

            for(childNodeIndex = 0;childNodeIndex < pointNodes.childNodes.length;childNodeIndex++) {
                var childNode = pointNodes.childNodes[childNodeIndex];
                var title = childNode.getAttribute("title");
                var link = "<tr><td class='listBody'><a class='listBody' href='" + childNode.getAttribute("url") + "' onmouseover=\"showCommunityInfo(event," + childNodeIndex + ");\" onmouseout=\"hideCommunityInfo(event," + childNodeIndex + ");\">" + title + "</a></td></tr>";
                content += link;
            }
            content += "</table></div>";
            var infoTabs = [
                new GInfoWindowTab("Community",content),
                new GInfoWindowTab("Directions",directions)
            ];
            marker.openInfoWindowTabsHtml(infoTabs);
        });
    }
    else {
        GEvent.addListener(marker,"click",function() {
            contentNodes = pointNodes;
            var markerNode = pointNodes;
            var directions = "<div class='mapDirections'><table border='0' cellpadding='0' cellspacing='0' class='listTable'><tr><td class='contentDirections'>" + markerNode.getAttribute("directions") + "</td></tr>";
            var content = "<table border='0' cellpadding='0' cellspacing='0' class='contentTable'><tr><td class='contentHeader'><a class='contentBody' href='" + markerNode.getAttribute("url") + "'>" + markerNode.getAttribute("title") + "</a></td><td align='right' class='contentHeader'><img src='" + host + "/images/" + getStatusImage(markerNode.getAttribute("statusImage")) + "' style='padding-right: 4px;'/><img src='" + host + "/images/" + markerNode.getAttribute("typeImage") + "'/></td></tr><tr><td colspan='2' class='contentBody' style='padding: 5px'><table border='0' cellpadding='0' cellspacing='0'><tr><td><a class='contentBody' href='" + markerNode.getAttribute("url") + "'><img border='0' src='" + markerNode.getAttribute("imgLink") + "' WIDTH=120 HEIGHT=80 /></a></td><td style='padding-left: 5px;' valign='top'><table border='0' cellpadding='0' cellspacing='0'><tr><td><b>" + sqftlabel + "Square Foot:</b>&nbsp;" + markerNode.getAttribute("sqft") + "</td></tr><tr><td><b>Priced From:</b>&nbsp;" + markerNode.getAttribute("price") + "</td></tr><tr><td><b>Phone:</b>&nbsp;" + markerNode.getAttribute("phoneNumber") + "</td></tr><tr><td><b>City:</b>&nbsp;" + markerNode.getAttribute("city") + "</td></tr><tr><td><b>State:</b>&nbsp;" + markerNode.getAttribute("state") + "</td></tr></table></td></tr></table></td</tr></table></div>";
            var infoTabs = [
                new GInfoWindowTab("Community",content),
                new GInfoWindowTab("Directions",directions)
            ];
            marker.openInfoWindowTabsHtml(infoTabs);
        });
    }
}
function isWithinUSBounds(point) {
    var swPoint = new GLatLng(South_Bounding_Coordinate,West_Bounding_Coordinate);
    var nePoint = new GLatLng(North_Bounding_Coordinate,East_Bounding_Coordinate);
    var usBounds = new GLatLngBounds(sw,ne);
    return usBounds.contains(point);
}
function loadMarkers(nodeIndex, minZoom, maxZoom) {
    if (nodeIndex == 0) {
        if (maxZoom) {
            markerMgr.addMarkers(markers.slice(0, markerIndex), minZoom, maxZoom);
        }
        else {
            markerMgr.addMarkers(markers.slice(0, markerIndex), minZoom);
        }
    }
    else {
        if (maxZoom) {
            markerMgr.addMarkers(markers.slice(markerIndex), minZoom, maxZoom);
        }
        else {
            markerMgr.addMarkers(markers.slice(markerIndex), minZoom);
        }
    }
    markerMgr.refresh();
}
function resizeMap() {
    map.setZoom(zoomLevel);
    var bottom = 20;
    var left = 15;
    var right = 10;
    var top = 15;

    // Create new bounds object
    var bounds = map.getBounds(); //new GLatLngBounds();

    // Loop through the points, extending the bounds as necessary
    for (var i = 0; i < markers.length; i++) {
        bounds.extend(markers[i].getPoint());
    }

    var mapType = map.getCurrentMapType();
    var port = map.getSize();
    var virtualBounds = new GSize(port.width - left - right, port.height - top - bottom);

    // Get the bounds zoom level 
    zoomLevel = mapType.getBoundsZoomLevel(bounds, virtualBounds);
    map.setZoom(zoomLevel);

    var xOffs = (left - right) / 2;
    var yOffs = (top - bottom) / 2;
    var bPxCenter = map.fromLatLngToDivPixel(bounds.getCenter());
    var newCenter = map.fromDivPixelToLatLng(new GPoint(bPxCenter.x - xOffs, bPxCenter.y - yOffs));
    map.setCenter(newCenter);

    zoomThreshold = zoomLevel + 2;
}
function showCommunityInfo(evnt,idx) {
    var infoHeight = map.getInfoWindow().getContentContainers()[0].offsetHeight;
    var mapWidth = parseInt($(map.getContainer()).width());
    var mapCenterX = parseInt(mapWidth) / 2;
    var swX = 0;
    var swY = 0;
    var neX = 0;
    var neY = 0;

    neX = mapCenterX + 50;
    swX = mapCenterX - 250;

    neY = $(map.getContainer()).height() / 2;
    swY = $(map.getContainer()).height() + infoHeight;

    var swPoint = new GPoint(swX,swY);
    var swLatLng = map.fromContainerPixelToLatLng(swPoint);
    var nePoint = new GPoint(neX,neY);
    var neLatLng = map.fromContainerPixelToLatLng(nePoint);

    var rectBounds = new GLatLngBounds(swLatLng,neLatLng);
    var content
    var contentNode = contentNodes.childNodes[idx]
    content = "<table border='0' cellpadding='0' cellspacing='0' class='contentTable'><tr><td class='contentHeader'>" + contentNode.getAttribute("title") + "</td><td align='right' class='contentHeader'><img src='" + host + "/images/" + getStatusImage(contentNode.getAttribute("statusImage")) + "' style='padding-right: 4px;'/><img src='" + host + "/images/" + contentNode.getAttribute("typeImage") + "'/></td></tr><tr><td colspan='2' class='contentBody' style='padding: 5px;'><table border='0' cellpadding='0' cellspacing='0'><tr><td><img src='" + contentNode.getAttribute("imgLink") + "' WIDTH=120 HEIGHT=80 /></td><td style='padding-left: 5px;' valign='top'><table border='0' cellpadding='0' cellspacing='0'><tr><td><b>" + sqftlabel + "Square Foot:</b>&nbsp;" + contentNode.getAttribute("sqft") + "</td></tr><tr><td><b>Priced From:</b>&nbsp;" + contentNode.getAttribute("price") + "</td></tr><tr><td><b>Phone:</b>&nbsp;" + contentNode.getAttribute("phoneNumber") + "</td></tr><tr><td><b>City:</b>&nbsp;" + contentNode.getAttribute("city") + "</td></tr><tr><td><b>State:</b>&nbsp;" + contentNode.getAttribute("state") + "</td></tr></table></td></tr></table></td</tr></table>";
    overLay = new Rectangle(rectBounds,content);
    map.addOverlay(overLay);
}
function getStatusImage(status) {
    switch(status) {
        case "actively selling":
            return "activelySelling.gif";
        case "close out":
            return "closeOut.gif";
        case "coming soon":
            return "comingSoon.gif";
        case "grand opening":
            return "grandOpening.gif";
        default:
            return "activelySelling.gif";
    }
}
function hideCommunityInfo(evnt,idx) {
    var evt = (evnt) ? evnt : ((window.event) ? window.event : null);
    map.removeOverlay(overLay);
}
//]]>
