//<![CDATA[

if (GBrowserIsCompatible()) {
    var gmarkers = [];
    var gicons = [];


    gicons["Daily"] = new GIcon(G_DEFAULT_ICON, "/googlemap/map-marker.png");
    gicons["Monthly"] = new GIcon(G_DEFAULT_ICON, "/googlemap/map-marker.png");
    gicons["All"] = new GIcon(G_DEFAULT_ICON, "/googlemap/map-marker.png");


    // A function to create the marker and set up the event window
    function createMarker(point, name, html, category,lotnumber) {
        var marker = new GMarker(point, gicons[category]);
        // === Store the category and name info as a marker properties ===
        marker.mycategory = category;
        marker.myname = name;
		marker.mylot = lotnumber;



        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);

            //var point = new GLatLng(lat,lng);
            //panoramaOptions = { latlng:point };
            //pano = new GStreetviewPanorama(document.getElementById("streetview"), panoramaOptions);
            //GEvent.addListener(pano);




        });
        gmarkers.push(marker);
        return marker;
    }

    // == shows all markers of a particular category, and ensures the checkbox is checked ==
    function show(category) {
        for (var i = 0; i < gmarkers.length; i++) {
            if (gmarkers[i].mycategory == category) {
                gmarkers[i].show();
            }
        }
        // == check the checkbox ==
        // document.getElementById("marker").checked = true;
    }

    // == hides all markers of a particular category, and ensures the checkbox is cleared ==
    function hide(category) {
        for (var i = 0; i < gmarkers.length; i++) {
            if (gmarkers[i].mycategory == category) {
                gmarkers[i].hide();
            }
        }
        // == clear the checkbox ==
        //document.getElementById(category+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        map.closeInfoWindow();
    }

    // == a checkbox has been clicked ==
    function boxclick(category) {

        if (category == "Daily") {
            show("Daily");
            hide("All");
            hide("Monthly");
			 hide("All");

        } else if (category == "All") {
            hide("Monthly");
            hide("Daily");
            show("All");


        } else if (category == "Monthly") {
            show("Monthly");
            hide("Daily");
            hide("All");
            hide("All");
            //  }else
            //hide(category);
        }
        // == rebuild the side bar
        makeSidebar();

    }

    function myclick(i) {

        GEvent.trigger(gmarkers[i], "click");

        /*			
        document.getElementById( "streetview" ).innerHTML= "";
        var myPano = null;
        myPano = new GStreetviewPanorama(document.getElementById("streetview"));
        var latlang = gmarkers[i].getLatLng();
        myPano.setLocationAndPOV(latlang);
        //GEvent.addListener(myPano); 
        */
    }


    // == rebuilds the sidebar to match the markers currently displayed ==
    function makeSidebar() {
        var html = "";
		
        for (var i = 0; i < gmarkers.length; i++) {
            if (!gmarkers[i].isHidden()) {
                html += '<a href="javascript:myclick(' + i + ')">Lot ' + gmarkers[i].mylot + ' - ' + gmarkers[i].myname + '</a><br>';
            }
        }
        document.getElementById("side_bar").innerHTML = html;
    }


    // create the map
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
 //   map.addControl(new GMapTypeControl());
     map.setCenter(new GLatLng(49.2728,-123.117149), 13);


    // Read the data
     GDownloadUrl("/googlemap/categories.xml", function(doc) {
         var xmlDoc = GXml.parse(doc);
         var markers = xmlDoc.documentElement.getElementsByTagName("marker");

         for (var i = 0; i < markers.length; i++) {
             // obtain the attribues of each marker
             var showPhoneIcon = "";
             var paybyphone = "";
             var imgStreetView = "";
             var hrml = "";
             var lot = "";
             var parkingtype = "";
             var lat = parseFloat(markers[i].getAttribute("lat"));
             var lng = parseFloat(markers[i].getAttribute("lng"));
             var point = new GLatLng(lat, lng);
             var detailURL = "";
             var address = markers[i].getAttribute("address");
             var cattype = markers[i].getAttribute("cattype");
             detailURL = markers[i].getAttribute("detailURL") + "?lang=" + lng + "&lat="+ lat;
             switch (cattype) {
                 case "0":
                     parkingtype = "Daily & Monthly";
                     break;
                 case "1":
                     parkingtype = "Daily";
                     break;
                 case "2":
                     parkingtype = "Monthly";
                     break;
                 case "3":
                     parkingtype = "Daily (After 6PM - Pay by phone only) & Monthly";
                     break;
                 case "4":
                     parkingtype = "Daily & Monthly-Tenant Only";
                     break;
                 case "5":
                     parkingtype = "Daily - City of Vancouver only";
                     break;
             }



             paybyphone = markers[i].getAttribute("PaybyPhone");
             if (paybyphone == "YES") {
                 //showPhoneIcon = "<img src=/images/map-phone-icon.gif> Pay by Phone";
                 showPhoneIcon = "<span class='phone-icon'>Pay by Phone</span>";
             }
             lot = markers[i].getAttribute("Lot");
             imgStreetView = "lot" + lot + "_main.jpg"; //markers[i].getAttribute("imgStreetView");

             var name = markers[i].getAttribute("name");
             html = "<table border='0' cellspacing='0' cellpadding='0'>";
             html += "<tr><td width='61%'><span class='lot-num'>Lot:" + lot + "</span><span class='address'>" + address + "</span><span class='parking-type'>" + parkingtype + "</span><a href=locations-and-rates/" + detailURL + " class='lot-details'>View Lot details</a>" + showPhoneIcon + "</td><td width='50%' style='text-align:center;'><a href='javascript:showStreetView(" + lat + "," + lng + ")' class='street-view'><img src=/images/streetviewimages/" + imgStreetView + " border='0' height='68' width='90'><br>Street View</a><br></td></tr></table>";
             //          html = "<b>"+address+"</b>"+showPhoneIcon+"<p><a href='javascript:showStreetView(" +lat +","+lng+ ")'><img src=/images/"+imgStreetView+" border=0>Street View</a>";
             var category = markers[i].getAttribute("category");
             // create the marker
             var marker = createMarker(point, name, html, category, lot);
             map.addOverlay(marker);
         }
         // == show or hide the categories initially ==
             hide("Daily");
			 hide("Monthly");
//         show("Monthly");
//         show("Daily");
//          show("All");
         // == create the initial sidebar ==
         makeSidebar();
     });
	 
	 
	 
}
else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
}
function showStreetView(lat, lang) {
    var point = new GLatLng(lat, lang);
    var myPano = null;
    myPano = new GStreetviewPanorama(document.getElementById("streetview"));
    myPano.setLocationAndPOV(point);
    GEvent.addListener(myPano);
    GEvent.addListener(myPano, "error", handleNoFlash);

    document.getElementById("map").style.display = 'none'
    document.getElementById("streetview").style.display = 'block';
    document.getElementById("toggle").innerHTML = "<a href='javascript:Toggle();'>Back to Map View</a>";
}


function handleNoFlash(code) {
    if (code == GStreetviewPanorama.ErrorValues.FLASH_UNAVAILABLE)
        alert('You need flash player to view the panorama.');

    document.getElementById("toggle").style.display = 'none';
}

function Toggle() {
    if (document.getElementById("streetview").style.display == 'none') {
        document.getElementById("streetview").style.display = 'block';
        document.getElementById("map").style.display = 'none'
        document.getElementById("toggle").innerHTML = "<a href='javascript:Toggle();'>Map View</a>";
    }
    else {
        document.getElementById("map").style.display = 'block';
        document.getElementById("streetview").style.display = 'none'
        document.getElementById("toggle").innerHTML = "";

    }
}


// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/   
// http://econym.googlepages.com/index.htm

//]]>