/**************************** General Variables **************************/
var map, cgm, mapZoom = 10, cityLayerId = 6, opacity = 0.8;
var mapCenter = new GLatLng(33.686732, -117.803824);
var bikeMapService = Config.BikeMapWebServiceHost;
var url = Config.M2GISURL;
var numberOfCheckBoxes = 8;
/**************************** General Variables **************************/


/**************************** Tile Layer Variables **************************/
var BikewaysPavedClass1 = "http://mapserver.civicresource.com/octa/00100/OCTABike/_vemap/";
var BikewaysStripedClass2 = "http://mapserver.civicresource.com/octa/00010/OCTABike/_vemap/";
var BikewaysSignedClass3 = "http://mapserver.civicresource.com/octa/00001/OCTABike/_vemap/";
var BusRoutes = "http://mapserver.civicresource.com/octa/10000/OCTABike/_vemap/";
var SteepGrades = "http://mapserver.civicresource.com/octa/01000/OCTABike/_vemap/";
/**************************** Tile Layer Variables **************************/


/**************************** Icon Variables **************************/
var iconAccessPoint = new GIcon(G_DEFAULT_ICON);
iconAccessPoint.image = '/BikeMap/Images/icon_bike_path.gif';
iconAccessPoint.shadow = "http://www.google.com/mapfiles/shadow50.png";
iconAccessPoint.iconSize = new GSize(18, 27);
iconAccessPoint.shadowSize = new GSize(10, 15);
iconAccessPoint.iconAnchor = new GPoint(0, 0);
iconAccessPoint.infoWindowAnchor = new GPoint(10, 15);

var iconBikeShop = new GIcon(G_DEFAULT_ICON);
iconBikeShop.image = '/BikeMap/Images/icon_bike_shop.gif';
iconBikeShop.shadow = "http://www.google.com/mapfiles/shadow50.png";
iconBikeShop.iconSize = new GSize(18, 27);
iconBikeShop.shadowSize = new GSize(10, 15);
iconBikeShop.iconAnchor = new GPoint(0, 0);
iconBikeShop.infoWindowAnchor = new GPoint(10, 15);

var iconMetrolinkStation = new GIcon(G_DEFAULT_ICON);
iconMetrolinkStation.image = '/BikeMap/Images/icon_metrolink.gif';
iconMetrolinkStation.shadow = "http://www.google.com/mapfiles/shadow50.png";
iconMetrolinkStation.iconSize = new GSize(18, 27);
iconMetrolinkStation.shadowSize = new GSize(10, 15);
iconMetrolinkStation.iconAnchor = new GPoint(0, 0);
iconMetrolinkStation.infoWindowAnchor = new GPoint(10, 15);
/**************************** Icon Variables **************************/


/**************************** General Functions **************************/
$(document).ready(function() {
    mapInit();
    repos();
    $(window).resize(function() {
        repos();
    });
});

function repos() {
    var legendTop = $("#map_canvas").offset().top;
    var legendLeft = $("#map_canvas").width() - $("#layerControl").width() + 20;
    $("#layerControl").css("left", legendLeft + "px");
}

var layerControlVisible = true;

function toggleLayerControl() {
    if (layerControlVisible) {
        $("#layersPanel").hide();
        $("#layer-toggle").css("width", "210px");
        layerControlVisible = false;
        $("#arrow").attr("src", "/MeasureM2/Images/Map/sidebarArrowExpand.png");
    }
    else {
        $("#layersPanel").show();
        $("#layer-toggle").css("width", "");
        layerControlVisible = true;
        $("#arrow").attr("src", "/MeasureM2/Images/Map/sidebarArrow.png");
    }
}

function mapInit() {
    map = new GMap2($("#map_canvas").get(0));
    map.removeMapType(G_SATELLITE_MAP);
    map.addMapType(G_PHYSICAL_MAP);
    map.setMapType(G_PHYSICAL_MAP);
    map.setCenter(mapCenter, mapZoom);

    var mapTypePos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10));
    map.addControl(new GMapTypeControl(), mapTypePos);
    var mapControlPos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 50));
    map.addControl(new GLargeMapControl(), mapControlPos);

    cgm = new CRGGoogleMap(map, { maxGeo: 200, minClusterSize: 0 });
    cgm.onLayersLoadStart = function() { $("#loading").show(); };
    cgm.onLayersLoadComplete = function() { $("#loading").hide(); };
    cgm.initialize();

    var bikewaysPavedClass1Tile = new TileLayer("BikewaysPavedClass1", BikewaysPavedClass1, { opacity: opacity, visible: true, zPriority: 0 });
    cgm.addLayer(bikewaysPavedClass1Tile);
    var BikewaysStripedClass2Tile = new TileLayer("BikewaysStripedClass2", BikewaysStripedClass2, { opacity: opacity, visible: true, zPriority: 0 });
    cgm.addLayer(BikewaysStripedClass2Tile);
    var BikewaysSignedClass3Tile = new TileLayer("BikewaysSignedClass3", BikewaysSignedClass3, { opacity: opacity, visible: true, zPriority: 0 });
    cgm.addLayer(BikewaysSignedClass3Tile);
    var busRoutesTile = new TileLayer("BusRoutes", BusRoutes, { opacity: opacity, visible: true, zPriority: 0 });
    cgm.addLayer(busRoutesTile);
    var steepGradesTile = new TileLayer("SteepGrades", SteepGrades, { opacity: opacity, visible: true, zPriority: 0 });
    cgm.addLayer(steepGradesTile);

    var accessPointsLayer = new MapLayer("AccessPoints", bikeMapService + "/WebServices/MapService.svc/GetBikePathAccessPointsOverlay", {}, { visible: true, center: false, filterMb: true, cluster: false, minZoom: 18 });
    accessPointsLayer.MarkerOptions = { icon: iconAccessPoint, clickable: false };
    accessPointsLayer.onMaxResults = function(total) {
        accessPointsLayer.removeAllOverlays(cgm);
        $("#popup").show();
        setTimeout("$('#popup').fadeOut()", 2000);
    }
    cgm.addLayer(accessPointsLayer);

    var bikeShopsLayer = new MapLayer("BikeShops", bikeMapService + "/WebServices/MapService.svc/GetBikeShopsOverlay", {}, { visible: true, center: false, filterMb: true, cluster: false, minZoom: 18 });
    bikeShopsLayer.MarkerOptions = { icon: iconBikeShop };
    bikeShopsLayer.onClick = markerClick;
    cgm.addLayer(bikeShopsLayer);

    var metrolinkStationsLayer = new MapLayer("MetrolinkStations", bikeMapService + "/WebServices/MapService.svc/GetMetrolinkStationsOverlay", {}, { visible: true, center: false, filterMb: true, cluster: false, minZoom: 18 });
    metrolinkStationsLayer.MarkerOptions = { icon: iconMetrolinkStation };
    metrolinkStationsLayer.onClick = markerClick;
    cgm.addLayer(metrolinkStationsLayer);
}

function markerClick(o, ll, oll) {
    $("#loading").show();
    var mo = this.findOverlay(o);
    var ml = this.findLayerByOverlay(o);
    markerClickOpenWindow(mo, ml);
}
function markerClickOpenWindow(mo, ml) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/BikeMap/WebServices/BikeWebService.asmx/GetInfoWindowHTML",
        data: "{'geoId':" + mo.Id + ", 'type':'" + ml.Name + "'}",
        dataType: "text",
        success: function(data) {
            markerClickCallback(mo.GOverlay, data);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("request:" + XMLHttpRequest + ", status: " + textStatus + ", error: " + errorThrown);
            $("#loading").hide();
        }
    });
}
function markerClickCallback(marker, data) {
    marker.openInfoWindow(data);
    $("#loading").hide();
}


function changeCity(ddl) {
    $("#loading").show();
    var index = ddl.selectedIndex;
    var city = ddl.options[index].text;
    if (city != "All") {
        findTask = new esri.arcgis.gmaps.FindTask(url);
        params = new esri.arcgis.gmaps.FindParameters();
        params.layerIds = [cityLayerId];
        params.searchFields = ["City"];
        params.searchText = city;
        findTask.execute(params, findCompleteCallback);
    }
    else {
        map.setCenter(mapCenter, mapZoom);
        $("#loading").hide();
    }
}

function findCompleteCallback(findResults) {
    var results = findResults.findResults;
    if (results.length > 0) {
        var bounds;
        for (var i = 0; i < results.length; i++) {
            var result = results[i];
            var feature = result.feature;
            var attributes = feature.attributes;
            var geometry = feature.geometry;
            for (var j = 0; j < geometry.length; j++) {
                var geom = geometry[j];
                var latlngbounds = geom.getBounds();
                if (bounds == undefined) {
                    bounds = latlngbounds;
                }
                bounds.extend(latlngbounds.getSouthWest());
                bounds.extend(latlngbounds.getNorthEast());
            }
        }
        var zoom = map.getBoundsZoomLevel(bounds);
        var center = bounds.getCenter();
        map.setCenter(center, zoom);
    }
    $("#loading").hide();
}


$(function() {
    $("#BikewaysStripedClass2CB").click(function() {
        toggleLayer(this, "BikewaysStripedClass2");
    });
    $("#BikewaysSignedClass3CB").click(function() {
        toggleLayer(this, "BikewaysSignedClass3");
    });
    $("#BikewaysPavedClass1CB").click(function() {
        toggleLayer(this, "BikewaysPavedClass1");
    });
    $("#SteepGradesCB").click(function() {
        toggleLayer(this, "SteepGrades");
    });
    $("#AccessPointsCB").click(function() {
        toggleLayer(this, "AccessPoints");
    });
    $("#BikeShopsCB").click(function() {
        toggleLayer(this, "BikeShops");
    });
    $("#MetrolinkStationsCB").click(function() {
        toggleLayer(this, "MetrolinkStations");
    });
    $("#BusRoutesCB").click(function() {
        toggleLayer(this, "BusRoutes");
    });
});

function toggleLayer(checkbox, name) {
    cgm.toggleLayer(name);
    if (checkbox.checked) {
        numberOfCheckBoxes++;
        $("#legend").show();
    }
    else {
        numberOfCheckBoxes--;
        if (numberOfCheckBoxes == 0) {
            $("#legend").hide();
        }
    }
}
/**************************** General Functions **************************/