var map;
var mainMarker;

//TODO: change this when pushing to dev, stage or live for:
// /consumer/TravelItemCoordinates.aspx?detail=

var itemCoordinatesURL = "/consumer/TravelItemCoordinates.aspx?detail=";



//Gets the querystring
function getQueryString(ji) {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == ji) {
return ft[1];
}
}
}

//this loads the map and pertinent markers -- it is called by the body onload event handler
function LoadMap() {
    if (GBrowserIsCompatible()) {

                 
                 map = new GMap2(document.getElementById("map_canvas"),{size:new GSize(400,360)});
                 map.setCenter(new GLatLng(41.494539, -82.832393), 8);
                                  
                 map.enableScrollWheelZoom();

                 map.setUIToDefault();

                
      
    }
}

function createMainMarker() {
    if (!$("#tab3").hasClass("active")) {
        $("#tab3").addClass("active");
        createMarker('', true, '');
    }
}

// Creates the Marker
// listingID: The ID of the listing to create the marker
// isMain: determine whether is the listing that we are reviewing in the details page.
// letter: if it's not the main item, determines which letter to show.
function createMarker(listingId,isMain, letter) {

map.clearOverlays();

    if(isMain)
        listingId = getQueryString("detail");

    var latitude = 0;
    var longitude = 0;
    var name = '';
    var address = '';
    var address2= '';
    var city= '';
    var state= '';
    var zipCode= '';
    var phone= '';

    //First we get the detail for the itinerary
    $.ajax({
        type: "GET",
        url: itemCoordinatesURL + listingId,
        dataType: "xml",

        success: function (xml) {

            $(xml).find('travelitem').each(function () {
                latitude = $(this).find('latitude').text();
                longitude = $(this).find('longitude').text();
                name = $(this).find('name').text();
                address = $(this).find('address').text();
                address2 = $(this).find('address2').text();
                city = $(this).find('city').text();
                state = $(this).find('state').text();
                zipCode = $(this).find('zipCode').text();
                phone = $(this).find('phone').text();

                var point = new GLatLng(latitude, longitude);
            
                var blueIcon = new GIcon(G_DEFAULT_ICON);

                if (isMain == true) {
                    blueIcon.image = "/images/maps/blue-dot.png";
                    blueIcon.iconSize = new GSize(32, 32);
                    map.setCenter(point, 8);
                }
                else {
                    blueIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
                    blueIcon.iconSize = new GSize(20, 34);
                    blueIcon.shadowSize = new GSize(37, 34);
                    blueIcon.iconAnchor = new GPoint(9, 34);
                    blueIcon.image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + letter + "|FD7567|000000";
                }

                // Set up our GMarkerOptions object
                markerOptions = { icon: blueIcon };

                if (isMain == true) {
                    markerOptions.zIndexProcess = function (m) {
                        return 10000000;
                    };
                }

                if (isMain) {
                    mainMarker = new GMarker(point, markerOptions);
                    GEvent.addListener(mainMarker, "click", function () {
                        mainMarker.openInfoWindowHtml(GetHtmlWindow(listingId, name, address, address2, city, state, zipCode, phone));
                    });

                }

                var marker = new GMarker(point, markerOptions);

                GEvent.addListener(marker, "click", function () {
                    marker.openInfoWindowHtml(GetHtmlWindow(listingId, name, address, address2, city, state, zipCode, phone));
                });



                map.addOverlay(marker);
                map.addOverlay(mainMarker);
            });

        },
        error: function (xhr, status, error) {

        }
    });
    
    

}

function GetHtmlWindow(listingId,name, address,address2,  city, state, zipCode, phone) {

    /*<ul class=”attraction-info”>
                <li>Attraction Name</li>
                <li>Address</li>
                <li>Phone number</li>
                <li><a href=”#”>More Info</a></li>
    </ul>*/

    var html = "<ul class='attraction-info'>";
    html += "<li><strong>" + name + "</strong></li>";
    if(address != '') html += "<li>" + address + "</li>";
    if(address2 != '') html += "<li>" + address + "</li>";
    if(city != '') html += "<li>" + city + ", " + state + " " + zipCode + "</li>";
    if(phone != '') html += "<li>" + phone + "</li>";
    html += "<li><a href='/searchdetails.aspx?detail=" + listingId +"' target='_self' >More Info</a></li>";
    html+="</ul>";
    
    return html;
}


function displayPopup(listingId)
{
    var latitude = 0;
    var longitude = 0;
    var name;
    var address;
    var address2;
    var city;
    var state;
    var zipCode;
    var phone;

    //First we get the detail for the itinerary
    $.ajax({
        type: "GET",
        url: itemCoordinatesURL + listingId,
        dataType: "xml",
        success: function(xml) {

        $(xml).find('travelitem').each(function(){
				 latitude = $(this).find('latitude').text();
				 longitude = $(this).find('longitude').text();	
                 name = $(this).find('name').text();	
                 address = $(this).find('address').text();	
                 address2 = $(this).find('address2').text();	
                 city = $(this).find('city').text();	
                 state = $(this).find('state').text();	
                 zipCode = $(this).find('zipCode').text();	
                 phone = $(this).find('phone').text();	
            
                 var point = new GLatLng(latitude, longitude);
                 var html = GetHtmlWindow(listingId,name, address,address2,  city, state, zipCode, phone);

                 map.setCenter(point, 8);
                 map.setZoom(8);
                 map.openInfoWindow(point, html);                
				});

        },
        error: function(xhr, status, error) {          
        
        }
    });
    
    
}

function ClearMapMarkers() {
    map.clearOverlays();
}