// JScript File

var Map = new Object();

// -----------------  Map Initialization Routines  ------------------------------
Map.initialize = function(latCenter, longCenter, zoomLevel, useSatellite)
{
    this.routes = new Array();
    this.markers = new Array();
    this.areas = new Array();
    this.center = new GLatLng(latCenter, longCenter);
    this.zoomLevel = zoomLevel;
    this.linesVisible = true;
    this.plineColor = '#593e20';  // default to brown color for map

    this.googleMap = null;
    
    if (GBrowserIsCompatible())
    {
        this.googleMap = new GMap2(document.getElementById('map_element'));
        
        GEvent.addListener(this.googleMap, 'maptypechanged', function() { Map.setPLineColor(); });

        Map.reset();

        if (useSatellite)
            this.googleMap.setMapType(G_SATELLITE_MAP);
    }
};

Map.isCompatible = function()
{
    return GBrowserIsCompatible();
}

Map.reset = function()
{
    // center map
    this.googleMap.setCenter(this.center, this.zoomLevel);
    
    // show "map" type (as opposed to satellite imagery)
    this.googleMap.setMapType(G_NORMAL_MAP);
    
    // show route (in case hidden)
    if (!this.linesVisible)
        toggleLines();
};

Map.enableInteraction = function()
{
//    this.googleMap.addControl(new GSmallMapControl());
//    this.googleMap.addControl(new GMapTypeControl());
    this.googleMap.setUIToDefault();
};

Map.disableInteraction = function()
{
    this.googleMap.disableDragging();
    this.googleMap.disableDoubleClickZoom();
    this.googleMap.removeControl
};

// -------------  Polylines  ---------------------------------------
Map.addPolylineA = function(levelCount, encodedPoints)
{
    Map.addPolylineB(encodedPoints, Map.getZoomLevels(levelCount));
};

Map.addPolylineB = function(encodedPoints, encodedLevels)
{
    var polyline = new GPolyline.fromEncoded(
    {
        color: this.plineColor,
        weight: 7,
        points: encodedPoints,
        levels: encodedLevels,
        zoomFactor: 32,
        numLevels: 4,
        opacity: 0.75
    });
    
    this.routes[this.routes.length] = polyline;
};

Map.showPolylines = function()
{
    for (var i = 0; i < this.routes.length; i++)
        this.googleMap.addOverlay(this.routes[i]);
};

Map.hidePolylines = function()
{
    for (var i = 0; i < this.routes.length; i++)
        this.googleMap.removeOverlay(this.routes[i]);
};

Map.getZoomLevels = function(levelCount)
{
    var zoomLevel = 'B';
    var levels = new String();
    
    for(var i = 0; i < levelCount; i++)
        levels += zoomLevel;
    
    return levels;
};

Map.setPLineColor = function()
{
    var mapType = this.googleMap.getCurrentMapType();

    // determine what color to use based on map type
    switch (mapType)
    {
        case G_NORMAL_MAP:
            this.plineColor = '#593e20';  // use default brown color for maps
            break;
        case G_SATELLITE_MAP:
        case G_HYBRID_MAP:
            this.plineColor = '#e8e8e8';  // use light-gray color for satellite imagery
            break;
    }
    
    // loop through each PLine and set its color
    for (var i = 0; i < this.routes.length; i++)
    {
        // remove the overlay
        this.googleMap.removeOverlay(this.routes[i]);
    
        // change to the new color
        this.routes[i].color = this.plineColor;
        
        // redisplay the pline so new color takes affect
        this.googleMap.addOverlay(this.routes[i]);
    }
    
};

// -------------------  Polygons (Map)  -------------------------------------------
Map.addPolygonA = function (levelCount, encodedPoints)
{
     Map.addPolygonB(encodedPoints, Map.getZoomLevels(levelCount));
};

Map.addPolygonB = function(encodedPoints, encodedLevels)
{
     var polygon = new GPolygon.fromEncoded(
     {
        polylines:
        [{
            color: '#000000',
            weight: 3,
            points: encodedPoints,
            levels: encodedLevels,
            zoomFactor: 16,
            numLevels: 4,
            opacity: 0.25
        }],
        fill: true,
        color: this.plineColor,
        opacity: 0.45,
        outline: true
     });
     
     this.areas[this.areas.length] = polygon;
};

Map.showPolygons = function()
{
    for (var i = 0; i < this.areas.length; i++)
        this.googleMap.addOverlay(this.areas[i]);
};

Map.hidePolygons = function()
{
    for (var i = 0; i < this.areas.length; i++)
        this.googleMap.removeOverlay(this.areas[i]);
};

// -----------------  Photos (Map)  --------------------------------------------------
Map.addPhotoMarker = function(latitude, longitude, photoId, pictureOrderId, fileName, caption)
{
    var point = new GLatLng(latitude, longitude);
    var marker = Map.createMarker0(point);
    
    GEvent.addListener(marker, 'click', function() { Map.showPhoto(point, photoId, pictureOrderId, fileName, caption); });
    
    this.markers[this.markers.length] = marker;
};

Map.addPhotos = function(latitude, longitude, photos)
{
    var point = new GLatLng(latitude, longitude);
    var marker = Map.createMarker0(point);
    
    GEvent.addListener(marker, 'click', function() { Map.showPhotos(point, photos); });
    
    this.markers[this.markers.length] = marker;
};

Map.showPhoto = function(point, photoId, pictureOrderId, fileName, caption)
{
    // record a view of photo
    recordData('type=mp&id=' + photoId);
    
    // show photo
    Map.showInfo(point, Map.createPhotoMarkerHtml(pictureOrderId, fileName, caption));
};

Map.showPhotos = function(point, photos)
{
    // record a view of the photos
    // ???
    
    // show photo
    Map.showInfo(point, Map.createHtmlForPhotos(photos));
};

Map.createHtmlForPhotos = function(photos)
{
    var photoTable = document.createElement('table');
    photoTable.border = '0';
    photoTable.cellSpacing = '0';
    photoTable.cellPadding = '2';
    photoTable.className = 'imagetable';
    
    var photoTableBody = document.createElement('tbody');
        
    var hasCaption = false;
    for (var i = 0; i < photos.length; i++)
    {
        var photo = photos[i];
    
        var imgElement = document.createElement('img');
        imgElement.src = 'process/image.asp?file=' + photo.filename + '&size=thumb';
        imgElement.style.border = '0px';

        var photoLink = document.createElement('a');
        photoLink.href = 'picture.asp?po=' + photo.pictureOrderId.toString();
        
        photoLink.appendChild(imgElement);

        var imageCell = document.createElement('td');
        imageCell.className = 'imagecell';
        imageCell.appendChild(photoLink);
        
        var captionCell = document.createElement('td');
        captionCell.className = 'captioncell';
        hasCaption = hasCaption || photo.caption != '';
        captionCell.innerHTML = photo.caption;
        
        var row = document.createElement('tr');
        row.appendChild(imageCell);
        row.appendChild(captionCell);
        photoTableBody.appendChild(row);
    }
    photoTable.appendChild(photoTableBody);
    
    var container = document.createElement('div');
    container.className = 'imagemarkerdiv';
    
    container.appendChild(photoTable);
    
    if (!hasCaption)
    {
        // default width for photo container, as specified in CSS file, is 300 px. This includes size for caption
        // if caption not included, resize container div to fit just the picture
        container.style.width = '200px';
    }
    
    return container;
};

Map.createPhotoMarkerHtml = function(pictureOrderId, fileName, caption)
{
    var photo = document.createElement('img');
    photo.src = 'process/image.asp?file=' + fileName + '&size=thumb';
    photo.style.border = '0px';

    var photoLink = document.createElement('a');
    photoLink.href = 'picture.asp?po=' + pictureOrderId.toString();
    
    photoLink.appendChild(photo);

    var photoTableBody = document.createElement('tbody');
    
    var row = document.createElement('tr');
    var cell = document.createElement('td');
    cell.className = 'imagecell';
    
    cell.appendChild(photoLink);
    row.appendChild(cell);
    photoTableBody.appendChild(row);
    
    var photoTable = document.createElement('table');
    photoTable.border = '0';
    photoTable.cellSpacing = '0';
    photoTable.cellPadding = '2';
    photoTable.className = 'imagetable';
    photoTable.appendChild(photoTableBody);
    
    var container = document.createElement('div');
    container.className = 'imagemarkerdiv';
    
    container.appendChild(photoTable);
    
    if (caption != '')
    {
        var photoCaption = document.createElement('p');
        photoCaption.className = 'footnote';
        photoCaption.innerHTML = caption;

        container.appendChild(photoCaption);
    }
    else
    {
        // default width for photo container, as specified in CSS file, is 300 px. This includes size for caption
        // if caption not included, resize container div to fit just the picture
        container.style.width = '200px';
    }
    
    return container;
};

// -----------------  Point of Interest Markers  ---------------------------------

Map.addPointMarker = function(latitude, longitude, name, id)
{
    var point = new GLatLng(latitude, longitude);
    var marker = Map.createMarker0(point);
    
    GEvent.addListener(marker, 'click', function() { Map.showPoint(point, name, id); });
    
    this.markers[this.markers.length] = marker;
};

Map.showPoint = function(point, name, id)
{
    // show point of interest on map
    Map.showInfo(point, Map.createPointMarkerHtml(name, id));
};

Map.createPointMarkerHtml = function(name, id)
{
    var para = document.createElement('p');
    para.innerHTML = name;
    
    var container = document.createElement('div');
    container.appendChild(para);
    container.style.maxWidth = '350px';
    
    if (id && id != 0)
    {
        var viewId = document.createElement('p');
        viewId.className = 'footnote';
        viewId.innerHTML = id;
        container.appendChild(viewId);
    }
    
    return container;
};

// -----------------  Utility Functions  -----------------------------------------

Map.showMarkers = function()
{
    for (var i = 0; i < this.markers.length; i++)
        this.googleMap.addOverlay(this.markers[i]);
};

Map.showInfo = function(point, html)
{
    this.googleMap.openInfoWindowHtml(point, html);
};

// BLUE marker
Map.createMarker0 = function(point)
{
    return this.createMarker(point, 'images/marker0.png');
};

// YELLOW marker
Map.createMarker1 = function(point)
{
    return this.createMarker(point, 'images/marker1.png');
};

// RED marker
Map.createMarker2 = function(point)
{
    return this.createMarker(point, 'images/marker2.png');
};

Map.createMarker = function(point, imageFile)
{
    var markerIcon = new GIcon(G_DEFAULT_ICON);
    markerIcon.image = imageFile;
    markerIcon.iconSize = new GSize(12,20);
    markerIcon.shadowSize = new GSize(22, 20);
    markerIcon.iconAnchor = new GPoint(6, 20);
    markerOptions = { icon:markerIcon };
    
    return new GMarker(point, markerOptions);
};

function toggleLines()
{
    var link = document.getElementById('toggleLink');
    if (Map.linesVisible)
    {
        link.innerHTML = 'Show Route';
        Map.hidePolylines();
        Map.hidePolygons();
    }
    else
    {
        link.innerHTML = 'Hide Route';
        Map.showPolylines();
        Map.showPolygons();
    }
    
    Map.linesVisible = !Map.linesVisible;
}

// --------------------  Picture Object  --------------------------

var Picture = function(photoId, pictureOrderId, fileName, caption)
{
    this.photoId = photoId;
    this.pictureOrderId = pictureOrderId;
    this.filename = fileName;
    this.caption = caption;
};