﻿/// <reference path="js\VeJavaScriptIntellisenseHelper.js" />
//var map = new VEMap();

var map; 

//Constants to define sizes of outages
var OUTAGE_VERYSMALL;
var OUTAGE_SMALL;
var OUTAGE_MEDIUM;

var OUTAGE_VERYSMALL_IMG;
var OUTAGE_SMALL_IMG;
var OUTAGE_MEDIUM_IMG;
var OUTAGE_LARGE_IMG;


//Zoom and boundary limits
var ZOOM_MIN;
var ZOOM_MAX;

//Initial map settings
var INIT_LAT;
var INIT_LON;
var INIT_ZOOM;

var markersArray = null;


function resetView() 
{
    map.SetCenterAndZoom(new VELatLong(INIT_LAT, INIT_LON), INIT_ZOOM);
}

function setLegendText() 
{
    var legendText;
    
    legendText = "<img src='" + OUTAGE_VERYSMALL_IMG + "'/>";
    legendText += "0 - " + OUTAGE_VERYSMALL + "&nbsp;";
    document.getElementById("legendVerySmall").innerHTML = legendText;
    
    
    legendText = "<img src='" + OUTAGE_SMALL_IMG + "'/>";
    legendText += (OUTAGE_VERYSMALL + 1) +  " - " + OUTAGE_SMALL + " ";
    document.getElementById("legendSmall").innerHTML = legendText;
    
    legendText = "<img src='" + OUTAGE_MEDIUM_IMG + "'/>";
    legendText += (OUTAGE_SMALL + 1) + " - " + OUTAGE_MEDIUM + " ";
    document.getElementById("legendMedium").innerHTML = legendText;
    
    legendText = "<img src='" + OUTAGE_LARGE_IMG + "'/>";
    legendText += (OUTAGE_MEDIUM + 1) + "+ ";
    document.getElementById("legendLarge").innerHTML = legendText;
 
}


function goToOutage(lat, lon) {
    map.SetCenterAndZoom(new VELatLong(lat, lon), ZOOM_MAX);
}


function toggleLayer() {
    if (document.aspnetForm.cbxToggleLayer.checked) {
        GetTiles();
    } else {
        map.DeleteTileLayer("layer");
    }
}   

//Prevent mouse zoom
function onMouseWheel(e) { return true; }

function onMouseOver(e) {
    if(e.elementID) {

        var shape = map.GetShapeByID(e.elementID);
        var id = shape.GetID();
        var diff = ZOOM_MAX - map.GetZoomLevel();
        
        var desc = "<strong>Outage location: </strong>" + markersArray[id].location;
        desc += "<br /><strong>Customers affected: </strong>" + markersArray[id].count;
        desc += "<br /><strong>Number of separate problems: </strong>" + markersArray[id].events;
        if(diff > 0) {
            desc += "<br /><br /><a href='javascript:zoomMap(" + diff + ",";
            desc += markersArray[id].lat + "," + markersArray[id].lon + ")'>Click to Zoom  ";
            desc += diff + " level" + (diff == 1 ? "" : "s") + "</a>";
        }
        
        desc += "<br /><br /><span style='font-size:9px;font-style: italic;'>Note: Outage marker placed at town center, ";
        desc += "not at exact coordinates of outage event.</span>";
        
        
        shape.SetDescription(desc);
       
    }
}

function zoomMap(levels, lat, lon) {
    map.SetCenterAndZoom(new VELatLong(lat, lon), map.GetZoomLevel() + levels);
}

function onEndZoom(e) {
    if(e.zoomLevel < ZOOM_MIN) {
        map.SetZoomLevel(ZOOM_MIN);
    }
    else if(e.zoomLevel > ZOOM_MAX) {
        map.SetZoomLevel(ZOOM_MAX);
    }
}

function placeMarker(lat, lon, count, events, location, info) 
{
    var marker = new VEShape(VEShapeType.Pushpin, new VELatLong(lat, lon));
    var filename, cssClass;
    
    marker.SetDescription(info);
    marker.SetTitle("Outage Information");
    
    if(count > 0 && count <= OUTAGE_VERYSMALL) {
        filename = OUTAGE_VERYSMALL_IMG;
        cssClass = 'pushpinVerySmall';
    } else if(count > OUTAGE_VERYSMALL && count <= OUTAGE_SMALL) {
        filename = OUTAGE_SMALL_IMG;
        cssClass = 'pushpinSmall';
    } else if(count > OUTAGE_SMALL && count <= OUTAGE_MEDIUM) {
        filename = OUTAGE_MEDIUM_IMG;
        cssClass = 'pushpinMedium';
    } else if(count > OUTAGE_MEDIUM) {
        filename = OUTAGE_LARGE_IMG;
        cssClass = 'pushpinLarge';   
    }
    
    if(isIE6()) {
        marker.SetCustomIcon("<div class='" + cssClass + "'></div>");
    } else {
        marker.SetCustomIcon(filename);
    }
    
    marker.SetZIndex(10001);
    map.AddShape(marker);
    
    var id = marker.GetID();

    markersArray[id] = {};
    markersArray[id].count = count;
    markersArray[id].lat = lat;
    markersArray[id].lon = lon;
    markersArray[id].events = events;
    markersArray[id].location = location;
    
}

function handleRequest(req) {
    var lat, lon, count, events, location, info;
    var total_custout, total_events, last_updated;
    var xml = req.responseXML;
    
    var root = xml.getElementsByTagName("outages")[0];

    var outages = root.getElementsByTagName("o");
    
    total_custout = root.getAttribute("sum_n");
    total_events = root.getAttribute("sum_e");
    last_updated = root.getAttribute("upd");
    
    for(var i = 0; i < outages.length; i++) {
        lat   = parseFloat(outages[i].getAttribute("lat"));
        lon   = parseFloat(outages[i].getAttribute("lon"));
        count = parseInt(outages[i].getAttribute("n"), 10);
        events = parseInt(outages[i].getAttribute("e"), 10);
        location = outages[i].getAttribute("l");
        
        if(count > 0) {
            info = "<strong>Customers Affected:</strong> " + count;
            info += "<div id='info_zoom'>test</div>";
            
            placeMarker(lat, lon, count, events, location, info);
        }
    }
}

function placeMarkers()
{
    sendRequest("data/outages.xml", handleRequest);
}





function btnZoomIn_Click()
{
    // Type the following commented code to experience
    // JavaScript Intellisense:
    
    map.ZoomIn();   //NOTE: this line of code will not show intellisense without the workaround explained at the beginning of this file.
}

function pageLoad()
{
    markersArray = [];
    
    OUTAGE_VERYSMALL = 50;
    OUTAGE_SMALL = 150;
    OUTAGE_MEDIUM = 500;
    
    OUTAGE_VERYSMALL_IMG    = "img/outage_verysmall.png";
    OUTAGE_SMALL_IMG        = "img/outage_small.png";
    OUTAGE_MEDIUM_IMG       = "img/outage_medium.png";
    OUTAGE_LARGE_IMG        = "img/outage_large.png";
    
    ZOOM_MIN = 8;
    ZOOM_MAX = 11;
    
    INIT_LAT = 43.894361;
    INIT_LON = -72.529492;
    INIT_ZOOM = 8;
    
    
    setLegendText();
    
    map = new VEMap("outageMap");
    
    map.SetDashboardSize(VEDashboardSize.Normal);
    
    map.EnableShapeDisplayThreshold(false);
    
    var o = new VEMapOptions();
    o.EnableBirdseye = false;
    
    map.LoadMap(new VELatLong(INIT_LAT, INIT_LON), INIT_ZOOM, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 0, o);
	
	
    //Map events
    map.AttachEvent("onendzoom", onEndZoom);
    map.AttachEvent("onmouseover", onMouseOver);
    map.AttachEvent("onmousewheel", onMouseWheel);
  
    
    //Hide 2D/3D icons
    document.getElementById("MSVE_navAction_View3DMapMode").style.visibility = "hidden";
    document.getElementById("MSVE_navAction_View3DMapMode").style.display = "none";
    document.getElementById("MSVE_navAction_FlatlandMapMode").style.visibility = "hidden";
    document.getElementById("MSVE_navAction_FlatlandMapMode").style.display = "none";
    
    	
    GetTiles();
    placeMarkers();   
}

function GetTiles()
{
    var bounds = [new VELatLongRectangle(new VELatLong(45,-73.5),new VELatLong(42.5,-71.2))];

    var tileSourceSpec = new VETileSourceSpecification("layer", "http://www.cvps.com/CustomerService/outages/MapCruncher/CVPSDistrictLayer/%4.png");
    tileSourceSpec.NumServers = 1;
    tileSourceSpec.Bounds = bounds;
    tileSourceSpec.MinZoomLevel = ZOOM_MIN;
    tileSourceSpec.MaxZoomLevel = ZOOM_MAX;
    tileSourceSpec.Opacity = 1;
    tileSourceSpec.ZIndex = 100;

    map.AddTileLayer(tileSourceSpec, true);


}