// Required Directories and Files
//		./img/fish_icon.png
//		./img/standard_icon_shadow.png
//		./img/yacht_icon.png
//		./img/sail_icon.png
// 		./img/yachfish_icon.png
//		pointdata/TCL_testXML6_latlng.xml


// Many thanks to the folks at Blackpool Community Church for providing their tutorial and helping us get this straightened out
//global array for copies of markers
var gmarkers = [];
var htmls = [];
var i = 0;
var side_bar_html = "";
var html = "";

//global map variable
var map;
//Standard icon for the charter service and vessels
var standardicon = new GIcon();
standardicon.image = "./img/standard_icon.png";
standardicon.shadow = "./img/standard_icon_shadow.png";
standardicon.iconSize = new GSize(15, 20);
standardicon.shadowSize = new GSize(20, 20);
standardicon.iconAnchor = new GPoint(7, 19);
standardicon.infoWindowAnchor = new GPoint(10, 2);

//Standard icon for the vessels
var vesselicon = new GIcon();
vesselicon.image = "./img/vessel_icon.png";
vesselicon.shadow = "./img/standard_icon_shadow.png";
vesselicon.iconSize = new GSize(15, 20);
vesselicon.shadowSize = new GSize(20, 20);
vesselicon.iconAnchor = new GPoint(7, 19);
vesselicon.infoWindowAnchor = new GPoint(10, 2);

//Standard icon for the charter service
var charterserviceicon = new GIcon();
charterserviceicon.image = "./img/chartercompany_icon.png";
charterserviceicon.shadow = "./img/standard_icon_shadow.png";
charterserviceicon.iconSize = new GSize(15, 20);
charterserviceicon.shadowSize = new GSize(20, 20);
charterserviceicon.iconAnchor = new GPoint(7, 19);
charterserviceicon.infoWindowAnchor = new GPoint(10, 2);

// create fish icon - vessel type
var fishicon_Vessel = new GIcon();
fishicon_Vessel.image = "./img/fish_icon.png";
fishicon_Vessel.shadow = "./img/standard_icon_shadow.png";
fishicon_Vessel.iconSize = new GSize(15, 20);
fishicon_Vessel.shadowSize = new GSize(20, 20);
fishicon_Vessel.iconAnchor = new GPoint(7, 19);
fishicon_Vessel.infoWindowAnchor = new GPoint(10, 2);

// create yatch fish icon - vessel type
var yachtfishicon_Vessel = new GIcon();
yachtfishicon_Vessel.image = "./img/yachtfish_icon.png";
yachtfishicon_Vessel.shadow = "./img/standard_icon_shadow.png";
yachtfishicon_Vessel.iconSize = new GSize(15, 20);
yachtfishicon_Vessel.shadowSize = new GSize(20, 20);
yachtfishicon_Vessel.iconAnchor = new GPoint(10, 20);
yachtfishicon_Vessel.infoWindowAnchor = new GPoint(10, 2);

// create yacht icon - vessel type
var yachticon_Vessel = new GIcon();
yachticon_Vessel.image = "./img/yacht_icon.png";
yachticon_Vessel.shadow = "./img/standard_icon_shadow.png";
yachticon_Vessel.iconSize = new GSize(15, 20);
yachticon_Vessel.shadowSize = new GSize(20, 20);
yachticon_Vessel.iconAnchor = new GPoint(8, 19);
yachticon_Vessel.infoWindowAnchor = new GPoint(10, 2);

// create sail icon - vessel type
var sailicon_Vessel = new GIcon();
sailicon_Vessel.image = "./img/sail_icon.png";
sailicon_Vessel.shadow = "./img/standard_icon_shadow.png";
sailicon_Vessel.iconSize = new GSize(15, 20);
sailicon_Vessel.shadowSize = new GSize(20, 20);
sailicon_Vessel.iconAnchor = new GPoint(9, 19);
sailicon_Vessel.infoWindowAnchor = new GPoint(10, 2);

// create Sightseeing icon - vessel type
var sightseeing_Vessel = new GIcon();
sightseeing_Vessel.image = "./img/sightseeing_icon.png";
sightseeing_Vessel.shadow = "./img/standard_icon_shadow.png";
sightseeing_Vessel.iconSize = new GSize(15, 20);
sightseeing_Vessel.shadowSize = new GSize(20, 20);
sightseeing_Vessel.iconAnchor = new GPoint(10, 20);
sightseeing_Vessel.infoWindowAnchor = new GPoint(10, 2);

// create GuideService icon - vessel type
var guideservice_Vessel = new GIcon();
guideservice_Vessel.image = "./img/guide_icon.png";
guideservice_Vessel.shadow = "./img/standard_icon_shadow.png";
guideservice_Vessel.iconSize = new GSize(15, 20);
guideservice_Vessel.shadowSize = new GSize(20, 20);
guideservice_Vessel.iconAnchor = new GPoint(10, 20);
guideservice_Vessel.infoWindowAnchor = new GPoint(10, 2);

// create bareboat icon - vessel type
var bareboat_Vessel = new GIcon();
bareboat_Vessel.image = "./img/bareboat_icon.png";
bareboat_Vessel.shadow = "./img/standard_icon_shadow.png";
bareboat_Vessel.iconSize = new GSize(15, 20);
bareboat_Vessel.shadowSize = new GSize(20, 20);
bareboat_Vessel.iconAnchor = new GPoint(10, 20);
bareboat_Vessel.infoWindowAnchor = new GPoint(10, 2);

// create scuba_snorkel icon - vessel type
var scubasnorkel_Vessel = new GIcon();
scubasnorkel_Vessel.image = "./img/scuba_icon.png";
scubasnorkel_Vessel.shadow = "./img/standard_icon_shadow.png";
scubasnorkel_Vessel.iconSize = new GSize(15, 20);
scubasnorkel_Vessel.shadowSize = new GSize(20, 20);
scubasnorkel_Vessel.iconAnchor = new GPoint(10, 20);
scubasnorkel_Vessel.infoWindowAnchor = new GPoint(10, 2);

// create bareboat icon - charter service speciality
var bareboat_CharterCompany = new GIcon();
bareboat_CharterCompany.image = "./img/bareboat_company_icon.png";
bareboat_CharterCompany.shadow = "./img/standard_icon_shadow.png";
bareboat_CharterCompany.iconSize = new GSize(15, 20);
bareboat_CharterCompany.shadowSize = new GSize(20, 20);
bareboat_CharterCompany.iconAnchor = new GPoint(10, 20);
bareboat_CharterCompany.infoWindowAnchor = new GPoint(10, 2);

// create GuideService icon - charter service speciality
var guideservice_CharterCompany = new GIcon();
guideservice_CharterCompany.image = "./img/guide_company_icon.png";
guideservice_CharterCompany.shadow = "./img/standard_icon_shadow.gif";
guideservice_CharterCompany.iconSize = new GSize(15, 20);
guideservice_CharterCompany.shadowSize = new GSize(20, 20);
guideservice_CharterCompany.iconAnchor = new GPoint(10, 20);
guideservice_CharterCompany.infoWindowAnchor = new GPoint(10, 2);

// create sail icon - charter service speciality
var sailicon_CharterCompany = new GIcon();
sailicon_CharterCompany.image = "./img/sail_company_icon.png";
sailicon_CharterCompany.shadow = "./img/standard_icon_shadow.png";
sailicon_CharterCompany.iconSize = new GSize(15, 20);
sailicon_CharterCompany.shadowSize = new GSize(20, 20);
sailicon_CharterCompany.iconAnchor = new GPoint(9, 19);
sailicon_CharterCompany.infoWindowAnchor = new GPoint(10, 2);

// create fish icon - charter service speciality
var fishicon_CharterCompany = new GIcon();
fishicon_CharterCompany.image = "./img/fish_company_icon.png";
fishicon_CharterCompany.shadow = "./img/standard_icon_shadow.png";
fishicon_CharterCompany.iconSize = new GSize(15, 20);
fishicon_CharterCompany.shadowSize = new GSize(20, 20);
fishicon_CharterCompany.iconAnchor = new GPoint(7, 19);
fishicon_CharterCompany.infoWindowAnchor = new GPoint(10, 2);

// create scuba_snorkel icon - charter service speciality
var scubasnorkel_CharterCompany = new GIcon();
scubasnorkel_CharterCompany.image = "./img/scuba_company_icon.png";
scubasnorkel_CharterCompany.shadow = "./img/standard_icon_shadow.png";
scubasnorkel_CharterCompany.iconSize = new GSize(15, 20);
scubasnorkel_CharterCompany.shadowSize = new GSize(20, 20);
scubasnorkel_CharterCompany.iconAnchor = new GPoint(10, 20);
scubasnorkel_CharterCompany.infoWindowAnchor = new GPoint(10, 2);

// create Sightseeing icon -charter service speciality
var sightseeing_CharterCompany = new GIcon();
sightseeing_CharterCompany.image = "./img/sightseeing_company_icon.png";
sightseeing_CharterCompany.shadow = "./img/standard_icon_shadow.png";
sightseeing_CharterCompany.iconSize = new GSize(15, 20);
sightseeing_CharterCompany.shadowSize = new GSize(20, 20);
sightseeing_CharterCompany.iconAnchor = new GPoint(10, 20);
sightseeing_CharterCompany.infoWindowAnchor = new GPoint(10, 2);

// create yacht icon - charter service speciality
var yachticon_CharterCompany = new GIcon();
yachticon_CharterCompany.image = "./img/yacht_company_icon.png";
yachticon_CharterCompany.shadow = "./img/standard_icon_shadow.png";
yachticon_CharterCompany.iconSize = new GSize(15, 20);
yachticon_CharterCompany.shadowSize = new GSize(20, 20);
yachticon_CharterCompany.iconAnchor = new GPoint(8, 19);
yachticon_CharterCompany.infoWindowAnchor = new GPoint(10, 2);

var icons = [];
icons[0] = standardicon;
icons[1] = vesselicon;
icons[2] = charterserviceicon;
icons[3] = fishicon_Vessel;
icons[4] = yachtfishicon_Vessel;
icons[5] = yachticon_Vessel;
icons[6] = sailicon_Vessel;
icons[7] = sightseeing_Vessel;
icons[8] = guideservice_Vessel;
icons[9] = bareboat_Vessel;
icons[10] = scubasnorkel_Vessel;
icons[11] = bareboat_CharterCompany;
icons[12] = guideservice_CharterCompany;
icons[13] = sailicon_CharterCompany;
icons[14] = fishicon_CharterCompany;
icons[15] = scubasnorkel_CharterCompany;
icons[16] = sightseeing_CharterCompany;
icons[17] = yachticon_CharterCompany;

var XMLFileName = [];
XMLFileName[0] = "CharterServiceVessel";
XMLFileName[1] = "Vessel";
XMLFileName[2] = "CharterService";
XMLFileName[3] = "Fishing_Vessel";
XMLFileName[4] = "YachtFish_Vessel";
XMLFileName[5] = "MotorYacht_Vessel";
XMLFileName[6] = "SailingYacht_Vessel";
XMLFileName[7] = "Sightseeing_Vessel";
XMLFileName[8] = "GuideService_Vessel";
XMLFileName[9] = "Bareboat_Vessel";
XMLFileName[10] = "ScubaSnorkel_Vessel";
XMLFileName[11] = "Bareboat_CharterCompany";
XMLFileName[12] = "GuideServices_CharterCompany";
XMLFileName[13] = "Sailboat_CharterCompany";
XMLFileName[14] = "Fishing_CharterCompany";
XMLFileName[15] = "ScubaSnorkel_CharterCompany";
XMLFileName[16] = "Sightseeing_CharterCompany";
XMLFileName[17] = "Yacht_CharterCompany";

//function displayGoogleMap1(FileId) {
//    setTimeout("displayGoogleMap('" + FileId + "')", 1000);
//    return false;
//}

function displayGoogleMap(FileId, objVType, objRegion, objMapType, objCSSpeciality) {

    //if fieldid = 4 then we have to take field id from the objMapType
    if (FileId == 4) {
        FileId = document.getElementById(objMapType).value;
    }
    else {
        document.getElementById(objMapType).value = FileId;
    }

    // for dropdown box of the vessel typ
    var vTypeId = document.getElementById(objVType).selectedIndex;

    // for dropdown box of the vessel typ
    var csSpecialityId = document.getElementById(objCSSpeciality).selectedIndex;

    if (FileId == 1) {
        document.getElementById("vesselType").style.display = '';
    }
    else {
        document.getElementById("vesselType").style.display = 'none';
    }

    if (FileId == 2) {
        document.getElementById("chartercompanySpeciality").style.display = '';
    }
    else {
        document.getElementById("chartercompanySpeciality").style.display = 'none';
    }
    
    //need the same validation for display the icon in vessel
    if (vTypeId != 0) {
        vTypeId = vTypeId + 2;
    }

    //need the same validation for display the icon in vessel
    if (csSpecialityId != 0) {
        csSpecialityId = csSpecialityId + 10;
    }
    
    // for display the map
    var region_array = document.getElementById(objRegion).value.split("~");
    var lat = parseFloat(region_array[0]);
    var lon = parseFloat(region_array[1]);
    var zoom = parseFloat(region_array[2]);

//    var lat = 32.0537;
//    var lon = -86.3509;
//    var zoom = 3;
//    //window.status = "Charter Markers Are Loading";
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.setMapType(G_HYBRID_MAP);
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(lat, lon), zoom);

        if ((vTypeId > 2) && (FileId == 1)) {
            FileId = vTypeId;
        }

        if ((csSpecialityId > 10) && (FileId == 2)) {
            FileId = csSpecialityId;
        }
        
        setMarkers(FileId);
    } //closes off if statement
    //window.status = "All Charter Markers Have Loaded!";
}

function setMarkers(FileId) {
    var ovcontrol = new GOverviewMapControl(new GSize(125, 125));
    map.addControl(ovcontrol);

    var request = GXmlHttp.create();
    request.open("GET", "pointdata/" + XMLFileName[FileId] + ".xml", true);
    request.onreadystatechange = function() {
        //alert("Ready State is: " + request.readyState);
        if ((request.readyState == 4) && request.responseText != "") {
            //alert("made it into the IF statement");
            var xml = GXml.parse(request.responseText);
            //alert("parsed XML");
            var markers = xml.documentElement.getElementsByTagName("" + XMLFileName[FileId] + "");
            //alert("Retrieved Element from XML");
            for (var i = 0; i < markers.length; i++) {

                //debugger
                //alert("i is equal to " + i);
                var m = markers[i];

                var IsVesselOrCharterService = m.getAttribute("IsVesselOrCharterService");
                var CharterServiceId = m.getAttribute("CharterServiceId");
                var CharterServiceName = m.getAttribute("CharterServiceName");
                var CharterServiceUniqueIdentifier = m.getAttribute("CharterServiceUniqueIdentifier");
                var CharterServiceLatitude = m.getAttribute("CharterServiceLatitude");
                var CharterServiceLongitude = m.getAttribute("CharterServiceLongitude");
                var CharterServiceCity = m.getAttribute("CharterServiceCity");
                var CharterServiceState = m.getAttribute("CharterServiceState");
                var CharterServiceImage = m.getAttribute("CharterServiceImage");
                var CharterServicesSpecialityId = m.getAttribute("CharterServicesSpecialityId");
                var CharterServicesSpeciality = m.getAttribute("CharterServicesSpeciality");
                var VesselId = m.getAttribute("VesselId");
                var VesselName = m.getAttribute("VesselName");
                var VesselTypeId = m.getAttribute("VesselTypeId");
                var VesselType = m.getAttribute("VesselType");
                var VesselUniqueIdentifier = m.getAttribute("VesselUniqueIdentifier");
                var VesselAddressType = m.getAttribute("VesselAddressType");
                var VesselLatitude = m.getAttribute("VesselLatitude");
                var VesselLongitude = m.getAttribute("VesselLongitude");
                var VesselCity = m.getAttribute("VesselCity");
                var VesselState = m.getAttribute("VesselState");
                var VesselImage = m.getAttribute("VesselImage");

                //IsVesselOrCharterService = 1 then vessel
                //IsVesselOrCharterService = 2 then charter service

                var url;
                var point;
                var description;
                var marker;
                if (IsVesselOrCharterService == 1) {
                    //for vessel image                
                    if (VesselImage == "")
                        VesselImage = "./ProfileImages/Vessel/Small/NoPicture.gif";
                    else
                        VesselImage = "./ProfileImages/Vessel/Small/" + VesselImage + "";

                    //for vessel url
                    if (VesselUniqueIdentifier == "")
                        url = "./Vessel.aspx?id=" + VesselId;
                    else
                        url = "./Vessels/" + VesselUniqueIdentifier;

                    //for charter servie description
                    description = "";
                    if (VesselType != "")
                        description = description + "<b>Type:</b> " + VesselType + "<br />";
                    if (VesselCity != "")
                        description = description + "<b>City:</b> " + VesselCity + "<br />";
                    if (VesselState != "")
                        description = description + "<b>State:</b> " + VesselState + "<br />";

                    point = new GLatLng(VesselLatitude, VesselLongitude);
                    html = "<table><tr><td width='130' height='120'><img src='" + VesselImage + "' /></td><td valign='top'><table><tr><td><a style='color:#0000CC; font-weight:bold; font-size:18px;' href=" + url + ">" + VesselName + "</a></td></tr><tr><td><div style='color:#000000; font-size:12px;'>" + description + "</div></br><div style='font-weight:normal; font-size:10px; text-decoration:none; color:#999999;'></div></td></tr><tr><td style='color:#000000; font-size:10px'>&nbsp</td></tr></table></td></tr></table>";
                    //for set the icon as per vessel type
                    if (VesselTypeId == 0)
                        marker = createMarker(point, VesselName, html, i, FileId);
                    else {
                        VesselTypeId = parseInt(VesselTypeId) + 2;
                        marker = createMarker(point, VesselName, html, i, VesselTypeId);
                    }
                    map.addOverlay(marker);
                }
                else if (IsVesselOrCharterService == 2) {

                    //for charter service image
                    if (CharterServiceImage == "")
                        CharterServiceImage = "./ProfileImages/CharterService/Small/NoPicture.gif";
                    else
                        CharterServiceImage = "./ProfileImages/CharterService/Small/" + CharterServiceImage + "";

                    //for charter service url
                    if (CharterServiceUniqueIdentifier == "")
                        url = "./CharterCompany.aspx?id=" + CharterServiceId;
                    else
                        url = "./Charter-Companies/" + CharterServiceUniqueIdentifier;

                    //for charter servie description
                    description = "";
                    if (CharterServiceCity != "")
                        description = description + "<b>City:</b> " + CharterServiceCity + "<br />";
                    if (CharterServiceState != "")
                        description = description + "<b>State:</b> " + CharterServiceState + "<br />";

                    point = new GLatLng(CharterServiceLatitude, CharterServiceLongitude);
                    html = "<table><tr><td width='130' height='120'><img src='" + CharterServiceImage + "' /></td><td valign='top'><table><tr><td><a style='color:#0000CC; font-weight:bold; font-size:18px;' href=" + url + ">" + CharterServiceName + "</a></td></tr><tr><td><div style='color:#000000; font-size:12px;'>" + description + "</div></br><div style='font-weight:normal; font-size:10px; text-decoration:none; color:#999999;'></div></td></tr><tr><td style='color:#000000; font-size:10px'>&nbsp</td></tr></table></td></tr></table>";

                    //for set the icon as per vessel type
                    if (CharterServicesSpecialityId == 0)
                        marker = createMarker(point, CharterServiceName, html, i, FileId);
                    else {
                        CharterServicesSpecialityId = parseInt(CharterServicesSpecialityId) + 10;
                        marker = createMarker(point, CharterServiceName, html, i, CharterServicesSpecialityId);
                    }

                    map.addOverlay(marker);
                }

            }  //closes off for loop
        }
    }
    request.send(null);
}

// This function catches the click and opens the corresponding info window
function myclick(i) {
    //GEvent.trigger{gmarkers[i], "click");
    gmarkers[i].openInfoWindowHtml(htmls[i]);
}

//This function captures the input from the user and zooms in on a particular city
function codeandload(zoomcity) {
    var geocoder = new GClientGeocoder;
    var zoom = 12;
    geocoder.getLatLng(zoomcity, function(point) {
        if (point) {
            map.setCenter(point, zoom);
        }
    }); //closes off geocoder
}

function createMarker(point, label, html, i, ctype) {
    var marker = new GMarker(point, { title: label, icon: icons[ctype] });
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });
    gmarkers[i] = marker;
    htmls[i] = html;
    i++;
    return marker;
}
//end of createMarker Function