/*
Copyright 2012-2026 VeloViewer. All Rights Reserved
###V131###
*/
var cpref = 'sd',
    isOS = false,
    highlightFeature;
var a = [];
var p3dLoaded = false;
var ec = {};
var gc = {};
var popoverx, popovery, popoverg, gradDist, map3, segShown = false,
    stravaEmbedShown = false,
    streetviewStartShown = false,
    streetviewEndShown = false,
    googlemapjsloaded = false,
    curTab = 'details',
    startStreetView, endStreetView, startMap, endMap;
var isStarred = starred.indexOf(segmentId) > -1;
var rm = isRetinaDisplay() ? 2 : 1,
    isContour = getParameterByName('contour') == '1';

spinYVal = spinYVal3d = spinYVal > 0 || spinYVal < -90 ? -25 : spinYVal;
spinLightYVal = spinLightYVal3d = spinYVal - 5;

var formatDist1 = function(dataVal) {
    return d3.format(',.1f')(dataVal * lrgLenMult) + ' ' + lrgLenUnit
};
var formatDist2 = function(dataVal) {
    return d3.format(',.2f')(dataVal * lrgLenMult) + ' ' + lrgLenUnit
};
var formatElev = function(dataVal) {
    return d3.format(',.0f')(dataVal * smlLenMult) + ' ' + smlLenUnit;
};
var formatGrad = function(dataVal) {
    return d3.format('1f')(dataVal) + ' %';
};


var compareSegs = [],
    compareDetailLevel = 0.2,
    compareAlignY = false,
    compareSegmentHeight = 20,
    compareOpacity = 1,
    asyncCount = 0;

var lineStyle = {
    strokeOpacity: 1,
    strokeWidth: 3,
    pointRadius: 0.5,
    pointerEvents: "visiblePainted",
    strokeColor: '#FF032E'
};

segment.minLat = 10000000000;
segment.maxLat = -10000000000;
segment.minLng = 10000000000;
segment.maxLng = -10000000000;

d3.select('#elevRange').style('padding', '0px');

function setMap() {
    var includesZeroLatLng = false;
    segment.distanceArr2 = decompress1(segment.distanceArr, 1);
    segment.elevationArr2 = decompress1(segment.elevationArr, 1);
    segment.latLngArr2 = decompressN(segment.latLngArr, 5, 2);
    segment.latLngArr2 = segment.latLngArr2.slice(0, segment.latLngArr2.length / 2).map(function(d, i) {
        includesZeroLatLng = includesZeroLatLng || (segment.latLngArr2[i * 2] == 0 && segment.latLngArr2[i * 2 + 1] == 0);
        return {
            lat: segment.latLngArr2[i * 2],
            lng: segment.latLngArr2[i * 2 + 1]
        }
    });

    if (includesZeroLatLng) {
        for (var i = segment.latLngArr2.length - 1; i >= 0; i--) {
            if (segment.latLngArr2[i].lat == 0 && segment.latLngArr2[i].lng == 0) {
                segment.latLngArr2.splice(i, 1);
                segment.elevationArr2.splice(i, 1);
                segment.distanceArr2.splice(i, 1);
            }
        }
    }

    p3dLoaded = true;

    if (spinLightYVal < -90) {
        spinYVal = -25;
        spinLightYVal = -30;
    }

    if ((typeof(embed) === 'undefined' || !embed)) {
        //if (typeof(segment.vvom) === 'undefined' || segment.vvom == null) {
        drawCompare();
        //}

        d3.select('#VVOMValue').text(f2dp(segment.vvom));
        d3.selectAll('#VVOMValue, #VVOMLabel').attr('title', 'VVOM (VeloViewer Objective Measure) - a value to represent the difficulty of the parcours based on it\'s distance, gradients and altitude.');
    }

    if ((typeof(embed) === 'undefined' || !embed) && profileUrl2d == '' && parseFloat(d3.select('body').style('width')) > 979) {
        spinXVal3d = spinXVal;
        spinYVal3d = spinYVal;
        spinLightXVal3d = spinLightXVal;
        spinLightYVal3d = spinLightYVal;

        var zExt = d3.extent(segment.elevationArr2);
        if (zExt[0] == zExt[1]) {
            zExt[0]--;
            zExt[1]++;
        }
        is3d = false;
        spinXVal = 116;
        spinYVal = -16;
        spinLightXVal = 86;
        spinLightYVal = -21;
        zoom = zoom2d;
        elevMult = Math.min(5, segment.distance / (4 * (zExt[1] - zExt[0])));

        set3dSegment(10);
        displayImage();

        spinXVal = spinXVal3d;
        spinYVal = spinYVal3d;
        spinLightXVal = spinLightXVal3d;
        spinLightYVal = spinLightYVal3d;
        zoom = zoom3d;
    }

    is3d = true;
    set3dSegment(10);

    if ((segment.elevationGain == 0 || segment.elevationGain == null) && segment.elevationDiff > 0) {
        segment.elevationGain = d3.sum(d3.range(0, segment.xyz2.length - 1), function(d, i) { return Math.max(0, segment.xyz2[i + 1].z - segment.xyz2[i].z) });
        d3.select('#elevGain').text(fSmlDist(segment.elevationGain));
        $.ajax({
            url: '/api/saveSegmentExtra.php?id=' + segmentId + '&eg=' + Math.round(segment.elevationGain),
            async: true,
            success: function(result) {},
            error: function(result) {
                //alert('Oh dear, something has gone wrong :-(');
            }
        });
    }

    if (typeof(embed) === 'undefined' || !embed) {
        setUpCharts();
    }

    if ((typeof(embed) === 'undefined' || !embed) && profileUrl3d == '' && parseFloat(d3.select('body').style('width')) > 979) {
        displayImage();
    }

    if (d3.selectAll('#mapChartContainer3')[0].length == 1) {
        initMap('3', true, false);
        setLMapDistMarkers(map3, segment.distanceArr2, segment.latLngArr2);
    }

    if ($("h2:contains('Links for Segment')").length > 0) {
        d3.select($("h2:contains('Links for Segment')")[0].parentElement).select('ul').append('li')
            .append('a')
            .attr('download', (segment.altName == null ? segment.name : segment.altName).replace(/[|&;$%@"<>()+,]/g, "") + ' start end points.gpx')
            .attr('href', 'data:application/gpx+xml;base64,' + btoa(unescape(encodeURIComponent('<?xml version="1.0" encoding="UTF-8"?><!-- Save this file as a [something].gpx and then import into your GPS device --><gpx version="1.0"><name>Example gpx</name><wpt lat="' + segment.latLngArr2[0].lat + '" lon="' + segment.latLngArr2[0].lng + '"><ele>' + segment.elevationArr2[0] + '</ele><name>Segment "' + (segment.altName == null ? segment.name : segment.altName) + '" Start</name></wpt><wpt lat="' + segment.latLngArr2.last().lat + '" lon="' + segment.latLngArr2.last().lng + '"><ele>' + segment.elevationArr2[segment.elevationArr2.length - 1] + '</ele><name>Segment "' + segment.name + '" End</name></wpt></gpx>'))))
            .text('Download start/end waypoints');
    }

    d3.select('#imagesContainer #img3d')
        .attr('src', segment.profileUrl3d);
    d3.select('#imagesContainer #img2d')
        .attr('src', segment.profileUrl2d);
}

function setExtent() {
    var latExtent = d3.extent(segment.latLngArr2.map(function(d) {
        return d.lat
    }));
    var lngExtent = d3.extent(segment.latLngArr2.map(function(d) {
        return d.lng
    }));

    segment.minLat = latExtent[0];
    segment.maxLat = latExtent[1];
    segment.minLng = lngExtent[0];
    segment.maxLng = lngExtent[1];

    if (typeof(map3) !== 'undefined') {
        map3.fitBounds([
            [segment.minLat, segment.minLng],
            [segment.maxLat, segment.maxLng]
        ]);

        if (isContour) {
            lm_mapLineBGDef.weight = 1;
        }
        map3.addLayer(new L.Polyline(segment.latLngArr2.map(function(d) { return [d.lat, d.lng] }), lm_mapLineBGDef));
        if (!isContour) {
            setMapDetail('L', map3);
            L.marker([segment.latLngArr2[0].lat, segment.latLngArr2[0].lng], {
                icon: L.icon({
                    iconUrl: 'https://cf.veloviewer.com/img/live-start.svg',
                    iconSize: [20, 20], // size of the icon
                    iconAnchor: [0, 0]
                })
            }).addTo(map3);
            L.marker([segment.latLngArr2.last().lat, segment.latLngArr2.last().lng], {
                icon: L.icon({
                    iconUrl: 'https://cf.veloviewer.com/img/live-end.svg',
                    iconSize: [20, 20], // size of the icon
                    iconAnchor: [0, 0]
                })
            }).addTo(map3);
        }
        /*var lineString = new OpenLayers.Geometry.LineString(linePoints);
        //var lineString2 = new OpenLayers.Geometry.LineString([]);
        var bgmf = new OpenLayers.Feature.Vector(lineString, null, mapLineBGDef);
        var fgmf = new OpenLayers.Feature.Vector(lineString.clone(), null, mapLineFGDef);
        highlightFeature = new OpenLayers.Feature.Vector(lineString.clone(), null, mapLineBGSel);


        lineLayer3.addFeatures([bgmf, highlightFeature, fgmf]);

        setMapDetail('O', lineLayer3)

        var startPos = new OpenLayers.LonLat(segment.latLngArr2[0].lng, segment.latLngArr2[0].lat).transform((isOS ? toProjection : fromProjection), toProjection);
        var endPos = new OpenLayers.LonLat(segment.latLngArr2[segment.latLngArr2.length - 1].lng, segment.latLngArr2[segment.latLngArr2.length - 1].lat).transform((isOS ? toProjection : fromProjection), toProjection);

        var size = new OpenLayers.Size(21, 25);
        var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
        var startIcon = new OpenLayers.Icon(https + '://' + assetPrefix + '/img/marker-green.png', size, offset);
        var endIcon = new OpenLayers.Icon(https + '://' + assetPrefix + '/img/marker-finish.png', size, offset);

        markersLayer.addMarker(new OpenLayers.Marker(startPos, startIcon));
        markersLayer.addMarker(new OpenLayers.Marker(endPos, endIcon));*/
    }
}

function getSegmentDetails() {
    asyncCount++;
    $.ajax({
        url: '/api/getSegmentDetails.php?id=' + segmentId,
        async: true,
        tryCount: 0,
        retryLimit: 3,
        success: function(result) {
            try {
                var obj = result.parseJSON();

                if (typeof(obj.error) === "undefined" && typeof(obj['curl error']) === "undefined") {
                    asyncCount--;
                    if (asyncCount == 0) {
                        location.reload();
                    }
                } else {
                    d3.select('#myTabs').remove();
                    d3.select('.tab-content').attr('class', 'lead').html('This segment is either private, has been deleted, or has been edited (resulting in a new segment being created).  Try <a href="https://www.strava.com/segments/' + segmentId + '">opening the segment on Strava</a> to see if it has been replaced.');
                }
            } catch (err) {
                d3.select('#myTabs').remove();
                d3.select('.tab-content').attr('class', 'lead').html('This segment is either private, has been deleted, or has been edited (resulting in a new segment being created).  Try <a href="https://www.strava.com/segments/' + segmentId + '">opening the segment on Strava</a> to see if it has been replaced.');
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            handleAjaxError(xhr, textStatus, errorThrown, this, segmentDetailsLoaded);
        }
    });
}

function getSegmentStreams() {
    asyncCount++;
    $.ajax({
        url: '/api/getSegmentStreams.php?id=' + segmentId,
        async: true,
        tryCount: 0,
        retryLimit: 3,
        success: function(result) {
            try {
                var obj = result.parseJSON();

                if (typeof(obj.error) === "undefined") {
                    asyncCount--;
                    if (asyncCount == 0) {
                        if (obj['curl error'] == '404') {
                            alert('This segment has been deleted!')
                        } else {
                            location.reload();
                        }
                    }
                } else {
                    d3.select('#myTabs').remove();
                    d3.select('.tab-content').attr('class', 'lead').html('This segment is either private, has been deleted, or has been edited (resulting in a new segment being created).  Try <a href="https://www.strava.com/segments/' + segmentId + '">opening the segment on Strava</a> to see if it has been replaced.');
                }
            } catch (err) {
                d3.select('#myTabs').remove();
                d3.select('.tab-content').attr('class', 'lead').html('This segment is either private, has been deleted, or has been edited (resulting in a new segment being created).  Try <a href="https://www.strava.com/segments/' + segmentId + '">opening the segment on Strava</a> to see if it has been replaced.');
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            handleAjaxError(xhr, textStatus, errorThrown, this, segmentDetailsLoaded);
        }
    });
}

function setData() {
    d3.select('#prTitle').text(segment.athleteName + ' PR Stats');

    if (document.getElementById('rawElevationChart') != null) {
      d3.select(document.getElementById('rawElevationChart').parentElement).attr('id', 'mwsWrapper').html('');
      var nr = d3.select('#details').append('div').classed('row-fluid', true);
      nr.append('div').classed('span6', true).html('<h2>Raw Elevation</h2><div id="rawElevationChart"></div>');
      nr.append('div').classed('span6', true).html('<h2>Gradient Distances</h2><div id="gradientFreqChart"></div>');
    }

    if (typeof(embed) === 'undefined' || !embed) {
        pr = (typeof(cacheSeg) === 'undefined' ? [] : cacheSeg).filter(function(d) {
            return d.i == segmentId
        });
        if (pr.length > 0) {
            pr = pr[0];
            segment.prAvgHR = pr.ah;
            segment.prAvgWatts = pr.aw;
            segment.prDistance = pr.d;
            segment.prElapsedTime = pr.et;
            var pr2 = a.filter(function(d) {
                return d._i == pr.e
            });
            segment.prMovingTime = (pr2.length > 0 && pr2[0]._mt ? pr2[0]._mt : (typeof(pr._et) === 'undefined' ? pr.et : pr._et));
            segment.prRelativePower = pr.rp;
            segment.prVam = pr.v;
            segment.prWhen = pr.sd;
            segment.activityId = pr.ai;
            segment.activityName = pr.an;
            segment.rank = pr.r;
            segment.effortId = pr.e;
            segment.tries = pr.tr;
            segment.score = pr.s;
            segment.gear = pr.gn;
            segment.dv = pr.dv;
        }

        if (segment.climbCat > 0) {
            segment.gf = 2 + segment.grade / 10;

            if (segment.komElapsedTime != null) {
                segment.komVam = segment.elevationDiff * 3600 / segment.komElapsedTime;
                segment.komRelativePower = segment.komVam / (segment.gf * 100);
            }
            if (segment.qomElapsedTime != null) {
                segment.qomVam = segment.elevationDiff * 3600 / segment.qomElapsedTime;
                segment.qomRelativePower = segment.qomVam / (segment.gf * 100);
            }
        }

        var dl = d3.select('#segmentStatsDL');
        dl.append('dt').html('Type:');
        dl.append('dd').html(segment.type.split(/(?=[A-Z])/).join(' '));
        dl.append('dt').html('Climb category:');
        dl.append('dd').html(['n/a', '4th', '3rd', '2nd', '1st', 'HC'][segment.climbCat]);
        dl.append('dt').html('Distance:');
        dl.append('dd').html(fDist(segment.distance));
        dl.append('dt').attr('id', 'VVOMLabel').html('VVOM:');
        dl.append('dd').attr('id', 'VVOMValue').html(f2dp(segment.vvom));
        d3.selectAll('#VVOMValue, #VVOMLabel').attr('title', 'VVOM (VeloViewer Objective Measure) - a value to represent the difficulty of the parcours based on it\'s distance, gradients and altitude.');
        dl.append('dt').html('Average gradient:');
        dl.append('dd').html(fPercent1(segment.grade / 100));
        dl.append('dt').html('Maximum gradient:');
        dl.append('dd').html(fPercent1(segment.maxGrade / 100));
        dl.append('dt').html('Elevation gain:');
        dl.append('dd').attr('id', 'elevGain').html(fSmlDist(segment.elevationGain));
        dl.append('dt').html('Elevation change:');
        dl.append('dd').html(fSmlDist(segment.elevationDiff));
        dl.append('dt').html('Min elevation:');
        dl.append('dd').html(fSmlDist(segment.elevationLow));
        dl.append('dt').html('Max elevation:');
        dl.append('dd').html(fSmlDist(segment.elevationHigh));
        dl.append('dt').html('KOM athletes:');
        dl.append('dd').attr('id', 'komNumRiders').html(!s_s && !isPRO ? '<a title="This data is only visible to Strava Subscribers. Please click to view more information." href="' + s_sBlogLink + '" target="_blank">n/a</a>' : (segment.komAthleteCount == null ? 'n/a' : segment.komAthleteCount));
        dl.append('dt').html('KOM elapsed time:');
        dl.append('dd').attr('id', 'komElapsedTime').html(segment.komElapsedTime == null ? 'n/a' : segment.komElapsedTime.toDayHrMinSec2());
        dl.append('dt').html('KOM moving time:');
        dl.append('dd').attr('id', 'komMovingTime').html(segment.komMovingTime == null ? 'n/a' : segment.komMovingTime.toDayHrMinSec2());
        dl.append('dt').html('KOM speed:');
        dl.append('dd').attr('id', 'komSpeed').html(segment.komElapsedTime == null ? 'n/a' : fSpeed1(segment.distance / segment.komElapsedTime));
        dl.append('dt').html('KOM VAM:');
        dl.append('dd').attr('id', 'komVam').html(typeof(segment.komVam) === 'undefined' ? 'n/a' : fInt(segment.komVam) + ' m/h');
        dl.append('dt').html('KOM relative power:');
        dl.append('dd').attr('id', 'komRelativePower').html(typeof(segment.komRelativePower) === 'undefined' ? 'n/a' : f2dp(segment.komRelativePower) + ' W/kg');
        dl.append('dt').html('QOM athletes:');
        dl.append('dd').attr('id', 'qomNumRiders').html(!s_s && !isPRO ? '<a title="This data is only visible to Strava Subscribers. Please click to view more information." href="' + s_sBlogLink + '" target="_blank">n/a</a>' : (segment.qomAthleteCount == null ? 'n/a' : segment.qomAthleteCount));
        dl.append('dt').html('QOM elapsed time:');
        dl.append('dd').attr('id', 'qomElapsedTime').html(segment.qomElapsedTime == null ? 'n/a' : segment.qomElapsedTime.toDayHrMinSec2());
        dl.append('dt').html('QOM moving time:');
        dl.append('dd').attr('id', 'qomMovingTime').html(segment.qomMovingTime == null ? 'n/a' : segment.qomMovingTime.toDayHrMinSec2());
        dl.append('dt').html('QOM speed:');
        dl.append('dd').attr('id', 'qomSpeed').html(segment.qomElapsedTime == null ? 'n/a' : fSpeed1(segment.distance / segment.qomElapsedTime));
        dl.append('dt').html('QOM VAM:');
        dl.append('dd').attr('id', 'qomVam').html(typeof(segment.qomVam) === 'undefined' ? 'n/a' : fInt(segment.qomVam) + ' m/h');
        dl.append('dt').html('QOM relative power:');
        dl.append('dd').attr('id', 'qomRelativePower').html(typeof(segment.qomRelativePower) === 'undefined' ? 'n/a' : f2dp(segment.qomRelativePower) + ' W/kg');

        dl = d3.select('#prStatsDL');
        dl.append('dt').html('Position:');
        dl.append('dd').html(!s_s ? '<a title="This data is only visible to Strava Subscribers. Please click to view more information." href="' + s_sBlogLink + '" target="_blank">n/a</a>' : (typeof(segment.rank) === 'undefined' || segment.rank == 0 ? (typeof(segment.prElapsedTime) === 'undefined' ? 'n/a' : 'n/a, this could be because your activity is private/followers-only, or because the segment has been deleted.') : suf(segment.rank)));
        dl.append('dt').html('Elapsed time:');
        dl.append('dd').html(typeof(segment.prElapsedTime) === 'undefined' ? 'n/a, could be because your PR hasn\'t been synced (see #2 on the <a href="https://blog.veloviewer.com/faq" target="_blank">FAQ</a>).' : segment.prElapsedTime.toDayHrMinSec2());
        dl.append('dt').html('Moving time:');
        dl.append('dd').html(typeof(segment.prMovingTime) === 'undefined' ? 'n/a' : segment.prMovingTime.toDayHrMinSec2());
        var timeBehind = typeof(segment.prElapsedTime) === 'undefined' || typeof(gender == 'F' ? segment.qomElapsedTime : segment.komElapsedTime) === 'undefined' ? -10000 : segment.prElapsedTime - (gender == 'F' ? segment.qomElapsedTime : segment.komElapsedTime);
        dl.append('dt').html('Behind ' + (gender == 'F' ? 'Q' : 'K') + 'OM:');
        dl.append('dd').html(timeBehind == -10000 ? 'n/a' : timeBehind.toDayHrMinSec2() + ' (' + f1dp(100 * timeBehind / (gender == 'F' ? segment.qomElapsedTime : segment.komElapsedTime)) + '%)');
        dl.append('dt').html((gender == 'F' ? 'Q' : 'K') + 'OM score:');
        dl.append('dd').html(!s_s ? '<a title="This data is only visible to Strava Subscribers. Please click to view more information." href="' + s_sBlogLink + '" target="_blank">n/a</a>' : (!segment.score || segment.rank == -1 ? 'n/a' : f4dp(segment.score)));
        dl.append('dt').html('Speed:');
        dl.append('dd').html(typeof(segment.prElapsedTime) === 'undefined' ? 'n/a' : f1dp(speedMult * segment.distance / segment.prElapsedTime) + ' ' + speedUnit);
        dl.append('dt').html('VAM:');
        dl.append('dd').html(typeof(segment.prVam) === 'undefined' ? 'n/a' : fInt(segment.prVam) + ' m/h');
        dl.append('dt').html('Relative power:');
        dl.append('dd').html(typeof(segment.prRelativePower) === 'undefined' ? 'n/a' : f2dp(segment.prRelativePower) + ' W/Kg');
        dl.append('dt').html('Gear:');
        dl.append('dd').html(typeof(segment.gear) === 'undefined' || segment.gear == '' ? 'n/a' : segment.gear);
        dl.append('dt').html('Device/App:');
        dl.append('dd').html(typeof(segment.dv) === 'undefined' || segment.dv == '' ? 'n/a' : segment.dv);
        dl.append('dt').html('Activity:');
        dl.append('dd').html(typeof(segment.activityId) === 'undefined' ? 'n/a' : '<a target="_blank" href="/athletes/' + athleteId + '/activities/' + segment.activityId + '">' + segment.activityName + '</a>');
        dl.append('dt').html('When:');
        dl.append('dd').html(typeof(segment.prWhen) === 'undefined' ? 'n/a' : fDate(parseDateTime(segment.prWhen)));

        if (segment.komElapsedTime == null) {
            $.ajax({
                url: '/api/saveSegmentExtra.php?id=' + segmentId + '&kom=1',
                async: true,
                success: function(result) {
                    if (typeof(result.komElapsedTime) !== 'undefined') {
                        segment.komAthleteCount = result.komAthleteCount;
                        segment.komElapsedTime = result.komElapsedTime;
                        segment.komMovingTime = result.komMovingTime;
                        if (segment.climbCat > 0) {
                            if (segment.komElapsedTime != null) {
                                segment.komVam = segment.elevationDiff * 3600 / segment.komElapsedTime;
                                segment.komRelativePower = segment.komVam / (segment.gf * 100);
                            }
                        }
                        if (!s_s && !isPRO) d3.select('#komNumRiders').html(segment.komAthleteCount);
                        d3.select('#komElapsedTime').html(segment.komElapsedTime.toDayHrMinSec2());
                        d3.select('#komMovingTime').html(segment.komMovingTime.toDayHrMinSec2());
                        d3.select('#komSpeed').html(fSpeed1(segment.distance / segment.komElapsedTime));
                        d3.select('#komVam').html(typeof(segment.komVam) === 'undefined' ? 'n/a' : fInt(segment.komVam) + ' m/h');
                        d3.select('#komRelativePower').html(typeof(segment.komRelativePower) === 'undefined' ? 'n/a' : f2dp(segment.komRelativePower) + ' W/kg');
                    }
                },
                error: function(result) {
                    //alert('Oh dear, something has gone wrong :-(');
                }
            });
        }
        if (segment.qomElapsedTime == null) {
            $.ajax({
                url: '/api/saveSegmentExtra.php?id=' + segmentId + '&qom=1',
                async: true,
                success: function(result) {
                    if (typeof(result.qomElapsedTime) !== 'undefined') {
                        segment.qomAthleteCount = result.qomAthleteCount;
                        segment.qomElapsedTime = result.qomElapsedTime;
                        segment.qomMovingTime = result.qomMovingTime;
                        if (segment.climbCat > 0) {
                            if (segment.qomElapsedTime != null) {
                                segment.qomVam = segment.elevationDiff * 3600 / segment.qomElapsedTime;
                                segment.qomRelativePower = segment.qomVam / (segment.gf * 100);
                            }
                        }
                        if (!s_s && !isPRO) d3.select('#qomNumRiders').html(segment.qomAthleteCount);
                        d3.select('#qomElapsedTime').html(segment.qomElapsedTime.toDayHrMinSec2());
                        d3.select('#qomMovingTime').html(segment.qomMovingTime.toDayHrMinSec2());
                        d3.select('#qomSpeed').html(fSpeed1(segment.distance / segment.qomElapsedTime));
                        d3.select('#qomVam').html(typeof(segment.qomVam) === 'undefined' ? 'n/a' : fInt(segment.qomVam) + ' m/h');
                        d3.select('#qomRelativePower').html(typeof(segment.qomRelativePower) === 'undefined' ? 'n/a' : f2dp(segment.qomRelativePower) + ' W/kg');
                    }
                },
                error: function(result) {
                    //alert('Oh dear, something has gone wrong :-(');
                }
            });
        }

        if (btoa && segment.score) {
            d3.select('#segmentLinks ul').append('li').append('a')
                .attr({
                    target: "_blank",
                    href: "http://www.strava.com/segments/" + segmentId + "/compare/" + btoa(segment.effortId)
                })
                .text('RaceShape/Compare your PR (external)');
        }

        d3.select('#segmentLinks ul').append('li').append('a')
            .attr({
                target: "_blank",
                href: "http://www.strava.com/segments/" + segmentId
            })
            .text('View on Strava(external)');

        if (!locked) {
            d3.select('#segmentLinks ul').append('li').append('a')
                .attr({
                    class: 'updateSegmentDetails',
                    href: '#',
                    title: 'Update this segments details (elevation, VAM and relative power)'
                })
                .text('Update segment details')
                .on('click', function(e) {
                    $.ajax({
                        url: '/api/updateSegmentDetails.php?id=' + segmentId,
                        async: true,
                        tryCount: 0,
                        retryLimit: 3,
                        success: function(result) {
                            try {
                                var obj = result.parseJSON();

                                if (typeof(obj.error) === "undefined") {
                                    alert('Segment details have been updated. The page will now reload...');
                                    location.reload();
                                } else {
                                    alert('Ooop! There has been an error trying to get the segment details.')
                                }
                            } catch (err) {
                                alert('Ooop! There has been an error trying to get the segment details.')
                            }
                        },
                        error: function(xhr, textStatus, errorThrown) {
                            handleAjaxError(xhr, textStatus, errorThrown, this, segmentDetailsLoaded);
                        }
                    });
                    d3.event.preventDefault();
                    return false;
                });

        }

        d3.select('#segmentLinks ul').append('li').append('a')
            .attr({
                href: '#',
                title: 'Request placing to be re-checked.'
            })
            .text('Request placing re-check')
            .on('click', function(e) {
                $.ajax({
                    url: '/api/forceSegCheck.php?id=' + segmentId,
                    async: true,
                    tryCount: 0,
                    retryLimit: 3,
                    success: function(result) {
                        alert('Request accepted. Please head to your Update page and press the "Get new activities & segments" button to re-check the placing.');
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        handleAjaxError(xhr, textStatus, errorThrown, this, segmentDetailsLoaded);
                    }
                });
                d3.event.preventDefault();
                return false;
            });
    }
    setMap();
    window.setTimeout(setMWS, 1000);
}

function setUpCharts() {
    var l_elvArr = decompress1(segment.elevationArr, 1);
    ec.m = [50, 10, 0, 20];
    ec.h = 200;
    ec.svg = d3.select('#rawElevationChart')
        .style('margin-bottom', '10px')
        .append('svg')
        .style('height', ec.h + 'px')
        .style('width', '100%');
    ec.d = l_elvArr.map(function(d, i) {
        return {
            x: segment.distanceArr2[i],
            y: d
        };
    });
    ec.w = parseFloat(d3.select('#rawElevationChart').style('width'));
    ec.ih = ec.h - ec.m[1] - ec.m[3];
    ec.iw = ec.w - ec.m[0] - ec.m[2];
    ec.x = d3.scale.linear().domain([0, segment.distance]);
    ec.zExt = d3.extent(l_elvArr);
    if (ec.zExt[0] == ec.zExt[1]) {
        ec.zExt[0]--;
        ec.zExt[1]++;
    }
    ec.y = d3.scale.linear().domain(ec.zExt);
    ec.xa = d3.svg.axis().scale(ec.x).ticks(6).tickFormat(formatDist1);
    ec.ya = d3.svg.axis().scale(ec.y).ticks(6).tickFormat(formatElev).orient("left");
    ec.l = d3.svg.area()
        .x(function(e) {
            return ec.x(e.x);
        })
        .y(function(e) {
            return ec.y(e.y);
        });
    ec.a = d3.svg.area()
        .x(function(e) {
            return ec.x(e.x);
        })
        .y0(function(e) {
            return ec.y(e.y);
        })
        .y1(function(e) {
            return ec.ih;
        });
    ec.xag = ec.svg.append("g")
        .classed("x axis", true);
    ec.yag = ec.svg.append("g")
        .classed('y axis', true);
    ec.g = ec.svg.append('g');
    ec.pa = ec.g.append('path')
        .style('fill', '#FF032E')
        .style('fill-opacity', '0.67')
        .style('stroke-width', '0')
        .classed('elevPath', true);
    ec.pl = ec.g.append('path')
        .style('fill', 'none')
        .style('stroke', '#FF032E')
        .style('stroke-width', '1.75')
        .classed('elevPath', true);
    ec.g.on('mousemove', function() {
            popoverx = ec.x.invert(d3.mouse(this)[0]);
            var index = d3.bisectLeft(segment.distanceArr2, popoverx);
            popovery = l_elvArr[Math.min(l_elvArr.length - 1, index)];
            popoverg = (l_elvArr[Math.min(l_elvArr.length - 1, index)] - l_elvArr[Math.max(0, index - 1)]) / (segment.distanceArr2[Math.min(segment.distanceArr2.length - 1, index)] - segment.distanceArr2[Math.max(0, index - 1)]);
            ec.c
                .attr('cx', ec.x(popoverx))
                .attr('cy', ec.y(popovery))
                .transition()
                .duration(0.5)
                .style('opacity', 1);
            $('#rawElevCircle').popover({
                title: function() {
                    return 'Dist: ' + formatDist2(popoverx)
                },
                content: function() {
                    return 'Elev: ' + formatElev(popovery) + '<br/>Grade: ' + f1dp(100 * popoverg) + ' %';
                },
                container: 'body',
                html: true,
                placement: 'top',
                animation: false,
                trigger: 'manual'
            })
            $('#rawElevCircle').popover('show');
        })
        .on('mouseout', function() {
            $('#rawElevCircle').popover('hide');
            ec.c
                .transition()
                .duration(0.2)
                .style('opacity', 0);
        });

    ec.c = ec.g.append('circle')
        .attr('id', 'rawElevCircle')
        .style('opacity', 0)
        .attr('r', 5)
        .style('stroke-width', 1.75)
        .style('stroke', 'blue')
        .style('stroke-opacity', 0.9)
        .style('fill', 'blue')
        .style('fill-opacity', 0.66)
        .style('pointer-events', 'none');

    segment.xyz.forEach(function(d, i) {
        if (i == 0) {
            d.d1 = 0;
            d.z1 = 0;
            d.g = 0;
            return;
        }
        d.d1 = segment.xyz[i].d - segment.xyz[i - 1].d;
        d.z1 = segment.xyz[i].z - segment.xyz[i - 1].z;
        d.g = (d.d1 == 0 ? 0 : d.z1 / d.d1);
        d.i = i;
    });

    gc.m = [50, 10, 0, 20];
    gc.h = 200;
    gc.svg = d3.select('#gradientFreqChart')
        .style('margin-bottom', '10px')
        .append('svg')
        .style('height', gc.h + 'px')
        .style('width', '100%');
    gc.w = parseFloat(d3.select('#gradientFreqChart').style('width'));
    gc.ih = gc.h - gc.m[1] - gc.m[3];
    gc.iw = gc.w - gc.m[0] - gc.m[2];

    gc.d = d3.values(d3.nest()
        .key(function(d) {
            return Math.min(40, Math.max(-40, Math.round(100 * d.g)));
        })
        .rollup(function(d) {
            return {
                'd': d3.sum(d.map(function(e) {
                    return e.d1
                })),
                'g': Math.min(40, Math.max(-40, Math.round(100 * d[0].g)))
            };
        })
        .map(segment.xyz)).sort(function(a, b) {
        return a.g - b.g
    });

    gc.d.forEach(function(d, i) {
        d.t = d3.sum(gc.d.slice(i), function(e) {
            return e.d
        });
    });

    var ext = d3.extent(gc.d.map(function(d) {
        return d.g
    }));
    gc.x = d3.scale.ordinal()
        .domain(d3.range(ext[0], ext[1] + 1))
        .rangeRoundBands([0, 500], .1, .2);
    gc.y = d3.scale.linear().domain([0, d3.max(gc.d, function(d) {
        return d.d
    })]);
    gc.xa = d3.svg.axis().scale(gc.x).tickFormat(formatGrad).tickValues(gc.x.domain().filter(function(d) {
        return !(d % 5);
    }));
    gc.ya = d3.svg.axis().scale(gc.y).ticks(6).tickFormat(formatDist2).orient("left");

    gc.xag = gc.svg.append("g")
        .classed("x axis", true);
    gc.yag = gc.svg.append("g")
        .classed('y axis', true);
    gc.g = gc.svg.append('g');

    gc.r = gc.g.selectAll('rect')
        .data(gc.d)
        .enter().append('rect')
        .classed('gcRect', true)
        .style('fill', '#FF032E')
        .style('fill-opacity', '0.67');
    //.attr('data-toggle', 'popover')
    //.attr('data-placement', 'top')
    //.attr('data-content', function(d) {
    //  return formatElev(d.d)
    //})
    gc.r.append('title')
        .text(function(d) {
            return d.g + ' % for ' + formatElev(d.d) + '\n' + (d.t < 1000 ? fSmlDist(d.t) : fDist(d.t)) + ' at ' + d.g + ' % and steeper.';
        });

    //$('.gcRect').popover();

    drawCharts();

    var maxG = +(d3.max(segment.xyz, function(d) { return d.g }) * 100).toFixed(1);
    if (maxG.toFixed(1) != segment.maxGrade.toFixed(1)) {
        var url = '/api/setMaxGradient.php?id=' + segmentId + '&gradient=' + maxG.toFixed(1);
        $.ajax({
            url: url,
            async: true
        });

        d3.select('#max-grade').text(maxG);
    }

    /*window.setTimeout(function() {
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=128081464022935&version=v2.0";
            fjs.parentNode.insertBefore(js, fjs);
            js.onload = function() {
                if (typeof(FB) !== 'undefined') {
                    FB.Event.subscribe('comment.create', comment_callback);
                    FB.Event.subscribe('comment.remove', comment_callback);
                }
            }
        }(document, 'script', 'facebook-jssdk'));
    }, 1000);*/
}

function drawCharts() {
    ec.w = parseFloat(d3.select('#rawElevationChart').style('width'));

    ec.y.range([ec.ih, 0]);
    ec.yag.call(ec.ya);
    ec.m[0] = d3.selectAll('#rawElevationChart .y .tick')[0].pop().getBBox().width;
    ec.yag.attr("transform", "translate(" + ec.m[0] + "," + ec.m[1] + ")");

    ec.iw = ec.w - ec.m[0] - ec.m[2];
    ec.x.range([0, ec.iw]);
    ec.xag.call(ec.xa);
    ec.xag.attr("transform", "translate(" + ec.m[0] + "," + (ec.m[1] + ec.ih) + ")");

    ec.g.attr("transform", "translate(" + ec.m[0] + "," + ec.m[1] + ")");

    ec.pa.attr("d", ec.a(ec.d));
    ec.pl.attr("d", ec.l(ec.d));

    gc.w = parseFloat(d3.select('#gradientFreqChart').style('width'));

    gc.y.range([gc.ih, 0]);
    gc.yag.call(gc.ya);
    gc.m[0] = d3.selectAll('#gradientFreqChart .y .tick')[0].pop().getBBox().width;
    gc.yag.attr("transform", "translate(" + gc.m[0] + "," + gc.m[1] + ")");

    gc.iw = gc.w - gc.m[0] - gc.m[2];
    gc.x.rangeRoundBands([0, gc.iw], .1, .2);
    gc.xag.call(gc.xa);
    gc.xag.attr("transform", "translate(" + gc.m[0] + "," + (gc.m[1] + gc.ih) + ")");

    gc.g.attr("transform", "translate(" + gc.m[0] + "," + gc.m[1] + ")");

    gc.r.attr('y', function(d) {
            return gc.y(d.d)
        })
        .attr('height', function(d) {
            return gc.y(0) - gc.y(d.d)
        })
        .attr('x', function(d) {
            return gc.x(d.g)
        })
        .attr('width', gc.x.rangeBand());
}

function setCompareAddRemoveBtn(d) {
    if (compareSegs.map(function(e) {
            return e.i
        }).indexOf(d.i) == -1) {
        d3.select('#compareAddRemoveBtn').html('+');
    } else {
        d3.select('#compareAddRemoveBtn').html('-');
    }
}

function drawCompare() {
  if (typeof(compareSegmentList) === 'undefined') {
    window.setTimeout(drawCompare, 250);
    return;
  }
    var width = 1024; //parseFloat($('#profile3dsvgContainer').width());
    var rm = 2;

    var margin = {
        top: 150,
        right: 50,
        bottom: 150,
        left: 80
    };
    var imgWidth = width;
    var maxProfileHeight = 400;

    if (!segment.xy) {
        segment.i = segmentId;
        segment.n = segment.altName == null ? segment.name : segment.altName;
        segment.c = '';
    }

    compareSegs.forEach(function(d) {
        if (!d.elevationArr2) {
            d.distanceArr2 = decompress1(d.d, 1);
            d.elevationArr2 = decompress1(d.e, 1);
        }
    });

    var cData = d3.merge([
        [segment], compareSegs
    ]);

    margin.top += cData.length * compareSegmentHeight;

    cData.forEach(function(d) {
        if (!d.xy) {
            d.dist = d.distanceArr2.last();
            d.xy = d.distanceArr2.map(function(e, i) {
                return {
                    x: e,
                    y: d.elevationArr2[i]
                }
            });

            d.xy = filterData(d.xy, 15).map(function(e) {
                return {
                    x: e.x,
                    y: e.ySmooth,
                    z: 0
                }
            });

            if (!d.maxG) {
                if (typeof(d.maxGrade) !== 'undefined') {
                    d.maxG = d.maxGrade / 100;
                } else {
                    d.maxG = d3.max(d.xy, function(e, i) {
                        return i == 0 ? -10 : (e.y - d.xy[i - 1].y) / (e.x - d.xy[i - 1].x)
                    });
                }
            }

            var l_vvom = calculateVVOM(d.xy);
            if (!d.vvom || d.vvom == null || l_vvom != d.vvom) {
                d.vvom = l_vvom;
                $.ajax({
                    url: '/api/saveSegmentExtra.php?id=' + d.i + '&vvom=' + d.vvom.toFixed(5),
                    async: true,
                    success: function(result) {},
                    error: function(result) {}
                });
            }
        }

        if (compareDetailLevel >= detailCutOff) {
            d.xy2 = [clone(d.xy[0])];
            d.xy.forEach(function(e, i) {
                if (e.x >= d.xy2[d.xy2.length - 1].x + (detailSize / lrgLenMult) || i == d.xy.length - 1) {
                    d.xy2.push(clone(e));
                }
            });
        } else {
            d.xy2 = clone(simplify(d.xy, (d.dist / 20000) * compareDetailLevel / (2 * 0.03), false));
        }
        var emin = d3.min(d.xy2, function(e) {
            return e.y
        });
        if (compareAlignY) {
            d.xy2.forEach(function(e) {
                e.y -= emin;
            });
        }
        d.ee = d3.extent(d.xy2, function(e) {
            return e.y
        });
        d.xyg = d.xy2.slice(1).map(function(e, i) {
            return {
                x1: d.xy2[i].x,
                x2: d.xy2[i + 1].x,
                y1: d.xy2[i].y,
                y2: d.xy2[i + 1].y,
                g: (d.xy2[i + 1].y - d.xy2[i].y) / (d.xy2[i + 1].x - d.xy2[i].x)
            }
        })
    });

    var elevExt = d3.extent(d3.merge(cData.map(function(d) {
        return d.ee
    })));
    var segDist = d3.max(cData.map(function(d) {
        return d.dist
    }));

    var wh = (elevExt[1] - elevExt[0]) / segDist;

    elevExt[0] = elevExt[0] - (elevExt[1] - elevExt[0]) / 10;

    var height = (width - margin.left - margin.right) * wh * (elevMult + 1) * 4;
    height = Math.min(400, height);

    width = width - margin.left - margin.right;

    var svg = d3.select('#compareOuter svg g.scaleG');
    var od = d3.select('#compareOuter');

    if (document.getElementById('compareOuter') == null) {
        //load up climbs to compare

        od = d3.select('#compareTab').append('div').attr('id', 'compareOuter');

        var cf = od.append('div').classed('form-inline', true);

        var compareSegCountries = d3.values(d3.nest()
            .key(function(d) {
                return d.c;
            })
            .rollup(function(d) {
                return {
                    'd': d,
                    'c': d[0].c
                };
            })
            .map(compareSegmentList)).sort(function(a, b) {
            return a.c < b.c ? -1 : 1
        });

        cf.append('label').text('Add segment:').style('margin-right', '5px');
        cf.append('select').attr('id', 'compareSelect')
            .on('change', function() {
                var d = this.selectedOptions[0].__data__;
                setCompareAddRemoveBtn(d);
            })
            .selectAll('optgroup').data(compareSegCountries)
            .enter().append('optgroup').attr('label', function(d) {
                return d.c
            })
            .selectAll('option').data(function(d) {
                return d.d
                    /*.filter(function(e) {
                                        return e.i != segmentId
                                    })*/
                    .sort(function(a, b) {
                        return a.n < b.n ? -1 : 1
                    })
            })
            .enter()
            .append('option')
            .text(function(d) {
                return d.n
            });
        d3.select('#compareSelect').append('optgroup').attr('id', 'compareSelectCustom').attr('label', 'Custom');
        cf.append('button').attr('id', 'compareAddRemoveBtn')
            .style({
                'font-size': '1.2em',
                'font-weight': 'bold'
            }).classed('btn btn-primary btn-small', true).html('+').attr('title', 'alt+click to open selected segment innew tab')
            .on('click', function() {
                var d = document.getElementById('compareSelect').selectedOptions[0].__data__;

                if (d3.event.altKey) {
                    window.open('/segments/' + d.i, '_blank');
                    return;
                }
                var di = compareSegs.map(function(e) {
                    return e.i
                }).indexOf(d.i);
                if (di == -1) {
                    compareSegs.push(d);
                } else {
                    compareSegs = compareSegs.filter(function(e) {
                        return e.i != d.i;
                    });
                }
                drawCompare();
                setCompareAddRemoveBtn(d);
            });

        cf.append('label').text('or').style('margin', '0px 5px');

        cf.append('input').attr({
            'placeholder': 'segment number or URL',
            'type': 'text',
            'id': 'compareAddCustom'
        });
        cf.append('button').style({
                'font-size': '1.2em',
                'font-weight': 'bold'
            }).classed('btn btn-primary btn-small', true).text('+')
            .on('click', function() {
                var n = document.getElementById('compareAddCustom').value.match(/[0-9]+/g);
                if (n == null || n.length > 1) {
                    alert('Make sure you either enter the number for the segment or the URL of the segment details page (e.g. https://www.strava.com/segments/4969305)');
                    return;
                }
                var di = compareSegs.map(function(e) {
                    return e.i
                }).indexOf(+n[0]);

                if (di > -1 || +n[0] == segmentId) {
                    alert('Segment is already being compared.')
                    return;
                }

                document.getElementById('compareAddCustom').value = '';

                var di = compareSegmentList.map(function(e) {
                    return e.i
                }).indexOf(+n[0]);

                if (di > -1) {
                    compareSegs.push(compareSegmentList[di]);
                    drawCompare();
                    return;
                }

                $.ajax({
                    url: '/api/getSegmentCompare.php?i=' + n[0],
                    async: true,
                    success: function(result) {
                        if (typeof(result.error) === 'undefined') {
                            compareSegs.push(result);
                            compareSegmentList.push(result);
                            drawCompare();
                        } else {
                            alert(result.error ? result.error : 'Whoops, something has gone wrong :-(');
                        }
                    },
                    error: function(result) {
                        alert('Oh dear, something has gone wrong :-(');
                    }
                });
            });

        od.append('ol');

        // add dropdown of preloaded climbs
        // add textbox for segment url/number
        // add go button

        // add svg for result
        svg = od.append('svg').style('display', 'none');

        od.append('canvas')
            .attr('id', 'compareCanvas')
            .style('display', 'none');
        od.append('img')
            .attr('id', 'compareImg')
            .style({
                width: '100%'
            });

        //add slider for elevation stretch and simplify
        od.append('div').each(function() {
            var t = d3.select(this);
            t.classed('form-inline', true);
            t.append('label').style('margin-right', '10px').classed('checkbox', true).html('<input type="checkbox" id="compareAlignYCB" value="">Align start');
            t.select('#compareAlignYCB').on('change', function() {
                compareAlignY = document.getElementById('compareAlignYCB').checked;
                drawCompare();
            })
            t.append('label').attr('for', 'compareOpacity').text('Opacity ');
            t.append('input').attr({
                    id: 'compareOpacity',
                    type: 'range',
                    min: 0,
                    max: 1,
                    step: 0.01,
                    value: 3
                })
                .on('change', function(d) {
                    compareOpacity = parseFloat(this.value);
                    d3.selectAll('#compareOuter svg .segments polygon').attr('fill-opacity', compareOpacity);
                    compareImg();
                });
            t.append('label').attr('for', 'compareSimplify').style('margin-left', '10px').text('Simplify ');
            t.append('input').attr({
                    id: 'compareSimplify',
                    type: 'range',
                    min: 0,
                    max: 0.75,
                    step: 0.01,
                    value: 0.2
                })
                .on('change', function(d) {
                    compareDetailLevel = Math.max(0.015, parseFloat(this.value));
                    if (moveTimer == null) {
                        moveTimer = setTimeout(function() {
                            drawCompare();
                            moveTimer = null;
                        }, 250);
                    }
                });
        });

        var keyScaleDomain = colScale2.domain().filter(function(d) {
            return d < 1
        })

        svg.style({
                'background': '#fff',
                'font-size': '10px'
            })
            .attr(':xmlns:xlink', 'http://www.w3.org/1999/xlink');

        svg = svg.append('g').attr('transform', 'scale(' + rm + ')').classed('scaleG', true);

        svg.append('rect').classed('background', true)
            .attr({
                fill: '#fff',
                'stroke-width': '0',
                width: width + margin.left + margin.right,
                height: height + margin.top + margin.bottom
            });

        var key = svg.append('g').classed('p3dkey', true);

        key.append('defs')
            .append('linearGradient')
            .attr({
                id: "keyGrad",
                x1: "0%",
                y1: "0%",
                x2: "100%",
                y2: "0%"
            })
            .selectAll('stop')
            .data(colScale2.range().slice(0, keyScaleDomain.length))
            .enter()
            .append('stop')
            .attr('offset', function(d, i) {
                var perScale = d3.scale.linear().domain(d3.extent(keyScaleDomain)).range([5, 95]);
                return perScale(keyScaleDomain[i]) + '%';
            })
            .attr('style', function(d, i) {
                return 'stop-color:' + d + ';stop-opacity:1';
            });


        key.append('rect').attr({
            'height': '15',
            'width': '100',
            'fill': 'url(#keyGrad)',
            'stroke-width': '1',
            'stroke': '#000'
        });
        key.append('text')
            .attr("transform", "translate(-5,12)")
            .style('font-size', '1.2em')
            .attr({
                'text-anchor': 'end',
                'stroke-width': '0',
                'fill': '#000'
            }).text((keyScaleDomain[0] * 100) + ' %');
        key.append('text')
            .attr("transform", "translate(105,12)")
            .style('font-size', '1.2em')
            .attr({
                'text-anchor': 'start',
                'stroke-width': '0',
                'fill': '#000'
            }).text((keyScaleDomain[keyScaleDomain.length - 1] * 100) + ' %');

        var vvg = svg.append('g').classed('vvlogo', true)
            .append('g')
            .attr('transform', 'scale(1.5)')
            .append('g')
            .attr('transform', 'matrix(1.25,0,0,-1.25,0,29.999997)')
            .append('g')
            .attr('transform', 'matrix(1.760792,0,0,1.760792,-12.151382,-8.963022)');
        vvg.append('path')
            .attr('transform', 'translate(30.6738,8.6094)')
            .attr('d', 'm 0,0 c -1.061,0 -1.82,0.887 -1.82,1.933 l 0,0.03 c 0,1.045 0.696,1.916 1.788,1.916 1.061,0 1.837,-0.887 1.837,-1.946 l 0,-0.033 C 1.805,0.871 1.092,0 0,0 m -0.032,-2.549 c 2.125,0 3.798,1.218 4.451,2.891 L 4.421,0.35 3.555,1.871 C 3.131,2.629 2.985,2.885 2.657,3.469 2.001,4.633 1.047,6.309 1.047,6.309 0.714,6.38 0.363,6.412 0,6.412 c -2.739,0 -4.733,-2.043 -4.733,-4.479 l 0,-0.033 c 0,-2.437 1.979,-4.449 4.701,-4.449 m -7.471,0.207 2.992,0 0,12.158 -2.992,0 0,-12.158 z m -5.588,4.987 c 0.158,0.949 0.696,1.55 1.487,1.55 0.824,0 1.394,-0.601 1.504,-1.55 l -2.991,0 z m 1.757,-5.194 c 1.694,0 2.881,0.697 3.704,1.742 L -9.292,0.57 c -0.618,-0.601 -1.171,-0.871 -1.9,-0.871 -0.933,0 -1.615,0.477 -1.852,1.41 l 5.731,0 c 0.016,0.205 0.016,0.428 0.016,0.618 0,2.517 -1.362,4.685 -4.307,4.685 -2.532,0 -4.321,-1.978 -4.321,-4.479 l 0,-0.033 c 0,-2.643 1.9,-4.449 4.591,-4.449')
            .attr('style', 'fill:#000;stroke:none');
        vvg.append('path')
            .attr('transform', 'translate(6.9233,14.8223)')
            .attr('d', 'M 0,0 4.879,-8.619 9.742,0 6.852,0 4.879,-3.465 2.907,0 0,0 z')
            .attr('style', 'fill:#000;stroke:none');
        vvg.append('path')
            .attr('transform', 'translate(32.9336,14.8223)')
            .attr('d', 'M 0,0 4.879,-8.619 9.742,0 6.852,0 4.879,-3.465 2.907,0 0,0 z')
            .attr('style', 'fill:#FF032E;stroke:none');
        vvg.append('path')
            .attr('transform', 'translate(72.4004,6.2676)')
            .attr('d', 'm 0,0 3.008,0 0,2.676 c 0,1.963 0.887,2.865 2.453,2.865 l 0.254,0 0,3.167 C 4.291,8.77 3.498,8.01 3.008,6.838 l 0,1.726 L 0,8.564 0,0 z m -5.508,4.986 c 0.158,0.95 0.696,1.551 1.488,1.551 0.823,0 1.393,-0.601 1.504,-1.551 l -2.992,0 z m 1.756,-5.193 c 1.695,0 2.883,0.697 3.705,1.742 l -1.662,1.377 c -0.617,-0.601 -1.172,-0.871 -1.9,-0.871 -0.934,0 -1.614,0.477 -1.852,1.41 l 5.731,0 c 0.015,0.205 0.015,0.428 0.015,0.617 0,2.518 -1.361,4.686 -4.305,4.686 -2.533,0 -4.322,-1.979 -4.322,-4.48 l 0,-0.032 c 0,-2.643 1.899,-4.449 4.59,-4.449 m -13.896,0.143 2.564,0 1.426,4.464 1.392,-4.464 2.596,0 2.645,8.628 -2.897,0 -1.156,-4.337 -1.33,4.369 -2.469,0 -1.33,-4.337 -1.125,4.305 -2.928,0 2.612,-8.628 z m -7.122,5.05 c 0.159,0.95 0.698,1.551 1.489,1.551 0.824,0 1.392,-0.601 1.504,-1.551 l -2.993,0 z m 1.758,-5.193 c 1.694,0 2.881,0.697 3.705,1.742 l -1.662,1.377 c -0.619,-0.601 -1.172,-0.871 -1.9,-0.871 -0.934,0 -1.615,0.477 -1.852,1.41 l 5.731,0 c 0.015,0.205 0.015,0.428 0.015,0.617 0,2.518 -1.361,4.686 -4.306,4.686 -2.533,0 -4.323,-1.979 -4.323,-4.48 l 0,-0.032 c 0,-2.643 1.901,-4.449 4.592,-4.449 M -30.373,0 l 2.992,0 0,8.564 -2.992,0 0,-8.564 z')
            .attr('style', 'fill:#FF032E;stroke:none');
        vvg.append('path')
            .attr('transform', 'translate(43.5332,15.4336)')
            .attr('d', 'M 0,0 C 0.826,0 1.496,0.67 1.496,1.496 1.496,2.322 0.826,2.992 0,2.992 -0.827,2.992 -1.496,2.322 -1.496,1.496 -1.496,0.67 -0.827,0 0,0')
            .attr('style', 'fill:#FF032E;stroke:none');

        svg.append('g').classed('pbStrava', true).html('<defs><style>.cls-1{fill:#fc4c02;stroke-width:0px}.cls-2{fill:#000;stroke-width:0px}</style></defs><g><path class="cls-1" d="M81.34,22.94A14.15,14.15,0,0,1,77,22.3a9.54,9.54,0,0,1-3.44-1.91l2.7-3.21a8,8,0,0,0,2.59,1.36,9.31,9.31,0,0,0,2.7.41,2.13,2.13,0,0,0,1-.17,0.53,0.53,0,0,0,.3-0.47v0a0.63,0.63,0,0,0-.44-0.54,7.69,7.69,0,0,0-1.65-.45q-1.27-.26-2.43-0.61a8.35,8.35,0,0,1-2-.88,4.27,4.27,0,0,1-1.39-1.36,3.69,3.69,0,0,1-.52-2v0a4.78,4.78,0,0,1,.42-2,4.57,4.57,0,0,1,1.23-1.62,5.85,5.85,0,0,1,2-1.08,8.9,8.9,0,0,1,2.75-.39,12.87,12.87,0,0,1,3.85.52,9.18,9.18,0,0,1,3,1.55l-2.46,3.41a7.57,7.57,0,0,0-2.28-1.13,7.93,7.93,0,0,0-2.26-.36,1.56,1.56,0,0,0-.83.17,0.51,0.51,0,0,0-.27.45v0a0.62,0.62,0,0,0,.41.52,7,7,0,0,0,1.6.45,22.37,22.37,0,0,1,2.64.62,7.8,7.8,0,0,1,2,.94,4.16,4.16,0,0,1,1.32,1.37A3.81,3.81,0,0,1,88,17.78v0A4.69,4.69,0,0,1,87.54,20a4.57,4.57,0,0,1-1.34,1.61,6.35,6.35,0,0,1-2.09,1A9.87,9.87,0,0,1,81.34,22.94Z"/><path class="cls-1" d="M92.18,11.82H87.73V7.55h13.95v4.27H97.23V22.66H92.18V11.82Z"/><path class="cls-1" d="M102.39,7.55h7.38A10.1,10.1,0,0,1,113.1,8a5.54,5.54,0,0,1,2.1,1.26,4.61,4.61,0,0,1,1,1.55,5.48,5.48,0,0,1,.35,2v0a4.77,4.77,0,0,1-.8,2.8,5.5,5.5,0,0,1-2.18,1.81l3.52,5.14h-5.76l-2.85-4.32h-1.08v4.32h-5.05V7.55Zm7.23,7.19a2.32,2.32,0,0,0,1.42-.39,1.28,1.28,0,0,0,.52-1.08v0a1.23,1.23,0,0,0-.52-1.09,2.44,2.44,0,0,0-1.4-.36h-2.2v3h2.18Z"/><polygon class="cls-1" points="146.34 16.16 149.63 22.66 154.47 22.66 146.34 6.61 138.2 22.66 143.04 22.66 146.34 16.16"/><polygon class="cls-1" points="123.7 16.16 126.99 22.66 131.83 22.66 123.7 6.61 115.58 22.66 120.41 22.66 123.7 16.16"/><polygon class="cls-1" points="135.02 14.05 131.73 7.55 126.89 7.55 135.02 23.61 143.15 7.55 138.31 7.55 135.02 14.05"/><path class="cls-2" d="M7.55,22.8V16.5h2.51a2.25,2.25,0,0,1,1.56.53,1.85,1.85,0,0,1,.59,1.46,1.86,1.86,0,0,1-.58,1.44,2.23,2.23,0,0,1-1.57.53H8.61V22.8H7.55Zm1.06-3.32H10a1.14,1.14,0,0,0,.77-0.27,1,1,0,0,0,0-1.49A1.23,1.23,0,0,0,10,17.48H8.61v2Z"/><path class="cls-2" d="M17.11,22.75a2.74,2.74,0,0,1-1,.18,2.7,2.7,0,0,1-1-.19,2.5,2.5,0,0,1-1.48-1.62,4.75,4.75,0,0,1-.23-1.53,3.33,3.33,0,0,1,.8-2.38,2.55,2.55,0,0,1,1.92-.85,2.52,2.52,0,0,1,1.9.85,3.36,3.36,0,0,1,.8,2.39,4.75,4.75,0,0,1-.23,1.53,2.63,2.63,0,0,1-.61,1A2.53,2.53,0,0,1,17.11,22.75Zm-2.17-1.37a1.46,1.46,0,0,0,2.32,0,2.89,2.89,0,0,0,.45-1.78,2.64,2.64,0,0,0-.46-1.67,1.43,1.43,0,0,0-2.29,0,2.62,2.62,0,0,0-.46,1.67A2.88,2.88,0,0,0,14.94,21.38Z"/><path class="cls-2" d="M21.22,22.8L20,16.5H21.1L22,20.93h0l1.49-4.44h0.6l1.49,4.44h0l0.86-4.44h1.06l-1.21,6.3H25.17l-1.42-4.32h0L22.34,22.8H21.22Z"/><path class="cls-2" d="M29.24,22.8V16.5h3.92v1H30.3V19.1h2.61V20H30.3v1.77h2.86v1H29.24Z"/><path class="cls-2" d="M35.15,22.8V16.5h2.51a2.28,2.28,0,0,1,1.56.52,2.06,2.06,0,0,1,.21,2.63,1.9,1.9,0,0,1-1,.64l1.36,2.51H38.58l-1.28-2.42h-1.1V22.8H35.15Zm1.06-3.34h1.37a1,1,0,1,0,0-2H36.21v2Z"/><path class="cls-2" d="M41.56,22.8V16.5h3.92v1H42.63V19.1h2.61V20H42.63v1.77h2.86v1H41.56Z"/><path class="cls-2" d="M47.47,22.8V16.5h2.06a2.73,2.73,0,0,1,1,.19,2.67,2.67,0,0,1,.86.56,2.57,2.57,0,0,1,.62,1,4,4,0,0,1,.23,1.41,4.39,4.39,0,0,1-.23,1.5,2.31,2.31,0,0,1-.64,1,2.68,2.68,0,0,1-.88.51,3.17,3.17,0,0,1-1,.16h-2Zm1.06-1h0.93a1.58,1.58,0,0,0,1.23-.48,2.54,2.54,0,0,0,.44-1.7A2.53,2.53,0,0,0,50.68,18a1.44,1.44,0,0,0-1.17-.53h-1v4.34Z"/><path class="cls-2" d="M57,22.8V16.5h2.59a1.86,1.86,0,0,1,1.34.48,1.58,1.58,0,0,1,.5,1.19,1.32,1.32,0,0,1-.73,1.21v0a1.79,1.79,0,0,1,.68.54,1.46,1.46,0,0,1,.28.92q0,1.93-2.31,1.93H57ZM58,19.08h1.39a1.06,1.06,0,0,0,.69-0.2,0.72,0.72,0,0,0,.24-0.59,0.74,0.74,0,0,0-.25-0.6,1.06,1.06,0,0,0-.7-0.21H58v1.6Zm0,2.74h1.58A1.89,1.89,0,0,0,60,21.74a0.77,0.77,0,0,0,.32-0.15,0.8,0.8,0,0,0,.19-0.28,1.06,1.06,0,0,0,.08-0.44,0.74,0.74,0,0,0-.35-0.73A2.43,2.43,0,0,0,59.18,20H58v1.85Z"/><path class="cls-2" d="M64.57,22.8V20.14L62.51,16.5h1.13l1.44,2.68h0l1.45-2.68h1.13l-2.06,3.65V22.8h-1Z"/></g>');
    }

    od.select('svg').style("width", rm * (width + margin.left + margin.right) + 'px')
        .style("height", rm * (height + margin.top + margin.bottom) + 'px');
    od.select('canvas').attr({
        "width": rm * (width + margin.left + margin.right),
        "height": rm * (height + margin.top + margin.bottom)
    }).style({
        "width": '100%',
        "max-width": '1024px'
    });
    od.select('img').style({
        "width": '100%',
        "max-width": '1024px'
    });
    svg.select('rect.background')
        .attr({
            width: width + margin.left + margin.right,
            height: height + margin.top + margin.bottom
        });

    d3.select('#compareSelectCustom')
        .selectAll('option').data(compareSegs.filter(function(d) {
            return d.i != segmentId && (d.c == '' || d.c == null);
        }), function(d) {
            return d.i
        })
        .enter()
        .append('option')
        .text(function(d) {
            return d.n
        });
    /*d3.selectAll('#compareOuter option').each(function(d) {
        d3.select(this).attr('disabled', cData.map(function(e) {
            return e.i
        }).indexOf(d.i) > -1 ? 'disabled' : null);
    });*/

    d3.select('#compareOuter svg').style('display', null);

    svg.select('.p3dkey').attr('transform', function() {
        return 'translate(' + (100 + (width + margin.left + margin.right) / 2 - this.getBoundingClientRect().width / (2 * rm)) + ',' + (10 + height + margin.top + (margin.bottom / 2) - (this.getBoundingClientRect().height / (2 * rm))) + ')'
    });

    svg.select('.vvlogo').attr('transform', function() {
        return 'translate(' + (margin.bottom / 2) + ',' + (height + margin.top + (margin.bottom / 2) - (this.getBoundingClientRect().height / (2 * rm))) + ')'
    });

    svg.select('.pbStrava').attr('transform', function() {
        return 'translate(' + (width + margin.left + margin.right - margin.bottom / 2 - (this.getBoundingClientRect().width / rm)) + ',' + (4 + height + margin.top + (margin.bottom / 2) - (this.getBoundingClientRect().height / (2 * rm))) + ')'
    });

    var g = svg.selectAll('g.main').data([0]);
    g.enter().append("g")
        .classed('main', true);
    g.attr("transform", 'translate(' + margin.left + ',' + margin.top + ')');

    var x = d3.scale.linear()
        .range([0, width])
        .domain([0, segDist * lrgLenMult]);

    var y = d3.scale.linear()
        .range([height, 0])
        .domain([elevExt[0] * smlLenMult, elevExt[1] * smlLenMult]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(function(d) {
            var val = Math.round(d * Math.pow(10, 2)) / Math.pow(10, 2);
            return val + ' ' + lrgLenUnit;
        })
        .tickSize(8)
        .tickPadding(10);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(Math.min(6, Math.max(2, Math.round(height / 15))))
        .tickFormat(function(d) {
            return d + ' ' + smlLenUnit;
        })
        .tickSize(3)
        .tickPadding(10);

    var xAxisG = g.selectAll('g.x.axis').data([0]);
    xAxisG.enter()
        .append('g')
        .attr("class", "x axis");
    xAxisG.attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    xAxisG.selectAll('rect.tickRect').remove();

    var xTicks = xAxisG.selectAll('g')[0].map(function(d) {
        return d.__data__;
    });

    xTicks.sort(d3.ascending);

    xTicks.forEach(function(d, i) {
        if (i % 2 == 0) {
            xAxisG.append('rect')
                .classed('tickRect', true)
                .attr({
                    'x': x(d),
                    'y': 3,
                    'stroke-width': 0,
                    'fill': '#fff',
                    'width': (i < xTicks.length - 1 ? x(x.domain()[0] + (xTicks[i + 1] - xTicks[i])) : x(segDist - xTicks[i]) - 1),
                    'height': 2
                })
        }
    });

    var yAxisG = g.selectAll('g.y.axis').data([0]);
    yAxisG.enter()
        .append('g')
        .attr("class", "y axis");
    yAxisG.call(yAxis);

    svg.selectAll('.axis text')
        .attr({
            'stroke-width': 0,
            'fill': '#000'
        });

    var mainG = g.selectAll('g.segments').data([0]);
    mainG.enter()
        .append('g')
        .attr("class", "segments");

    //mainG.selectAll('path.area').remove();

    cData.sort(function(a, b) {
        if (a.xy2.last().x > b.xy2.last().x) {
            return b.xy2.last().y - a.xy2[d3.bisectLeft(a.xy2.map(function(d) {
                return d.x
            }), b.xy2.last().x)].y
        } else {
            return b.xy2[d3.bisectLeft(b.xy2.map(function(d) {
                return d.x
            }), a.xy2.last().x)].y - a.xy2.last().y
        }
    });
    var segs = mainG.selectAll('g.segment')
        .data(cData, function(d) {
            return d.i
        });

    segs.exit().remove();

    segs.enter().append('g').attr('class', function(d) {
        return 'segment compareSegment' + d.i
    });

    segs.order();

    var linesBG1 = segs.selectAll('line.bg1')
        .data(function(d) {
            return d.xyg
        }, function(d, i) {
            return i
        });

    linesBG1.exit().remove();

    linesBG1.enter().append('line').classed('bg1', true).attr({
        'stroke-width': '4px',
        'stroke': '#fff',
//        'stroke-opacity': 0.66
    });

    linesBG1.each(function(d, i) {
        d3.select(this)
            .attr({
                x1: x(d.x1 * lrgLenMult),
                x2: x(d.x2 * lrgLenMult),
                y1: y(d.y1 * smlLenMult) - 2,
                y2: y(d.y2 * smlLenMult) - 2,
                //'stroke-linecap': this.parentElement.__data__.xyg.length - 1 == i ? 'round' : null
            });
    });

    var linesBG = segs.selectAll('line.bg')
        .data(function(d) {
            return d.xyg
        }, function(d, i) {
            return i
        });

    linesBG.exit().remove();

    linesBG.enter().append('line').classed('bg', true).attr({
        'stroke-width': '2px',
        'stroke': '#000'
    });

    linesBG.each(function(d, i) {
        d3.select(this)
            .attr({
                x1: x(d.x1 * lrgLenMult),
                x2: x(d.x2 * lrgLenMult),
                y1: y(d.y1 * smlLenMult) - 1,
                y2: y(d.y2 * smlLenMult) - 1,
                //'stroke-linecap': this.parentElement.__data__.xyg.length - 1 == i ? 'round' : null
            });
    });

    var poly = segs.selectAll('polygon')
        .data(function(d) {
            return d.xyg
        }, function(d, i) {
            return i
        });

    poly.exit().remove();

    poly.enter().append('polygon').attr('stroke-width', '0px').attr('fill-opacity', compareOpacity);

    poly.attr('points', function(d) {
        return x(d.x1 * lrgLenMult) + ',' + y(elevExt[0] * smlLenMult) + ' ' + x(d.x1 * lrgLenMult) + ',' + y(d.y1 * smlLenMult) + ' ' + x(d.x2 * lrgLenMult) + ',' + y(d.y2 * smlLenMult) + ' ' + x(d.x2 * lrgLenMult) + ',' + y(elevExt[0] * smlLenMult)
    }).attr('fill', function(d) {
        var c = d3.hsl(colScale2(d.g));
        c.s = 0.8;
        c.l += (1 - c.l) / 4;
        return c.toString();
    }); //.attr('fill-opacity', 0.6);

    var lines = segs.selectAll('line.fg')
        .data(function(d) {
            return d.xyg
        }, function(d, i) {
            return i
        });

    lines.exit().remove();

    lines.enter().append('line').classed('fg', true).attr({
        'stroke-width': '2px' //,
        //'stroke-linecap': 'round'
    });

    lines.each(function(d) {
        d3.select(this)
            .attr({
                x1: x(d.x1 * lrgLenMult),
                x2: x(d.x2 * lrgLenMult),
                y1: y(d.y1 * smlLenMult),
                y2: y(d.y2 * smlLenMult),
                stroke: colScale2(d.g),
                //'stroke-linecap': this.parentElement.__data__.xyg.length - 1 == i ? 'round' : null
            });
    });

    var lineEnds = segs.selectAll('line.end').data(function(d) {
        return [d.xyg.last()]
    });
    lineEnds.enter().append('line').classed('end', true).attr({
        'stroke-width': '0.5px',
        'stroke': '#000'
    });
    lineEnds.each(function(d) {
        d3.select(this)
            .attr({
                x1: x(d.x2 * lrgLenMult),
                x2: x(d.x2 * lrgLenMult),
                y1: y(d.y2 * smlLenMult) - 2,
                y2: y(elevExt[0] * smlLenMult)
            });
    });

    d3.select('#compareOuter .x.axis .domain').attr('d', function() {
        return d3.select(this).attr('d').replace('M0', 'M-3')
    });

    d3.selectAll('#compareOuter .axis .domain').style('fill', 'rgb(68, 68, 68)');

    cData.sort(function(a, b) {
        return a.xy2.last().x - b.xy2.last().x
    });

    var rectHeight = 100;
    var rectOffset = 50;
    var segDescs = svg.selectAll('text.segmentDesc')
        .data(cData, function(d) {
            return d.i
        });

    segDescs.exit().remove();

    segDescs.enter().append('text')
        .attr({
            'style': 'font-size:16px',
            'stroke-width': 0,
            'fill': '#000'
        }).attr('class', function(d) {
            return 'segmentDesc compareSegmentDesc' + d.i
        }).each(function(d) {
            var t = d3.select(this);
            /*t.append('rect').classed('outer', true)
                .attr({
                    rx: 5,
                    ry: 5,
                    stroke: '#888',
                    'stroke-width': '1px',
                    fill: '#ccc'
                });*/

            t.append('tspan')
                .classed('number', true);

            t.append('tspan')
                .text(d.n + ' ');

            t.append('tspan')
                .attr({
                    'style': 'font-size:12px'
                }).text(d.c + ' ');
            t.append('tspan')
                .attr({
                    'style': 'font-size:12px'
                }).text(fDist(d.dist) + ' at ' + f1dp(100 * (d.xy2.last().y - d.xy2[0].y) / d.xy2.last().x) + ' % (max ' + Math.round(d.maxG * 100) + ' %) - ');
            t.append('tspan')
                .attr({
                    'style': 'font-size:12px'
                }).text(fSmlDist(d3.sum(d.xyg, function(e) {
                    return e.y1 < e.y2 ? e.y2 - e.y1 : 0
                })) + ' of ascent - VVOM: ' + f2dp(d.vvom));
        });

    segDescs.order();

    segDescs.each(function(d, i) {
        var t = d3.select(this)
            .attr({
                transform: 'translate(' + margin.left + ',' + (margin.bottom / 2 + i * compareSegmentHeight) + ')'
            })
        t.select('.number')
            .text((1 + i) + '. ');
    });

    var segLinesG = svg.selectAll('g.segLines').data([0]);
    segLinesG.enter().append('g').classed('segLines', true);

    var segLines = segLinesG.selectAll('line.segmentLine')
        .data(cData, function(d) {
            return d.i
        });

    segLines.exit().remove();

    segLines.enter().append('line').attr('class', function(d) {
            return 'segmentLine compareSegmentLine' + d.i
        })
        .attr({
            stroke: '#888',
            'stroke-width': 1
        });

    segLines.order();

    segLines.each(function(d, i) {
        d3.select(this).attr({
            x1: (margin.left + i * (width / cData.length) + (width / cData.length - 10) / 2),
            y1: (margin.bottom / 2 + cData.length * compareSegmentHeight + 15),
            x2: margin.left + x(d.xyg.last().x2 * lrgLenMult),
            y2: margin.top + y(d.xyg.last().y2 * smlLenMult) - 4
        })
    });
    var segLinesG = svg.selectAll('g.segLines').data([0]);
    segLinesG.enter().append('g').classed('segLines', true);

    var segLabels = svg.selectAll('text.segLabel')
        .data(cData, function(d) {
            return d.i
        });

    segLabels.exit().remove();

    segLabels.enter().append('text').attr('class', function(d) {
        return 'segLabel compareSegLabel' + d.i
    }).attr({
        'text-anchor': 'middle',
        'stroke-width': 0,
        'fill': '#000'
    });

    segLabels.order();

    segLabels.each(function(d, i) {
        d3.select(this).attr({
            x: (margin.left + i * (width / cData.length) + (width / cData.length - 10) / 2),
            y: (margin.bottom / 2 + cData.length * compareSegmentHeight + 13)
        }).text(i + 1);
    });

    d3.selectAll('#compareOuter .segments .segment').each(function(d,i){
      d3.select(this).selectAll('line.bg1').attr('stroke', vv_category20[i]);
      d3.select('.compareSegmentLine'+d.i).attr('stroke', vv_category20[i]);
      d3.select('.compareSegLabel'+d.i).attr('fill', vv_category20[i]);
      d3.select('.compareSegmentDesc'+d.i+' tspan').attr('fill', vv_category20[i]);
    });

    compareImg();
}

function compareImg() {
    var canvas = d3.select('#compareOuter canvas').node();
    ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    ctx.fill();

    canvg(canvas, d3.select('#compareOuter svg').style('display', null).node().outerHTML.trim(), {
        ignoreMouse: true,
        ignoreAnimation: true
    });
    d3.select('#compareOuter svg').style('display', 'none');

    var imgData = getImage('compareCanvas');
    d3.selectAll('#compareImg').attr('src', imgData);
}

function sizeChanged() {
    var height = parseFloat(d3.select('#profile3dsvgContainer').style('width')) * 0.67;
    if (typeof(embed) === 'undefined' || !embed) {
        d3.select('#mapDomObj3').style('height', (parseFloat(d3.select('#mapDomObj3').style('width')) * 0.67 + 30) + 'px');
        /*if (typeof(map3) !== 'undefined' && typeof(map3.controls.length) !== 'undefined') {
            map3.updateSize();
            map3.zoomToExtent(extent);
        }*/
    } else {
        if (d3.selectAll('#mapChartContainer3')[0].length == 0) {
            height = window.innerHeight - 27;
        } else {
            height = (window.innerHeight - 27) / 2;
            d3.select('#mapDomObj3').style('height', height + 'px');
            /*if (typeof(map3) !== 'undefined' && typeof(map3.controls.length) !== 'undefined') {
                map3.updateSize();
                map3.zoomToExtent(extent);
            }*/
        }
    }
    d3.selectAll('#profile3dsvgContainer, #profileTSsvg img').style('height', height + 'px');
    //d3.select('#mapDomObj').style('height', Math.max(400, d3.select('#bigProfileImage').node().height) + 'px');
    if (p3dLoaded && curTab == 'details') {
        if (d3.select('#profile3dsvg').style('display') != 'none') {
          set3dSegment(10);
        }
        if (typeof(embed) === 'undefined' || !embed) {
            drawCharts();
        }
    }
    if (curTab == 'breakdown') {
        drawBreakdown(d3.select('#breakdownTab'), segment.latLngArr2, segment.distanceArr2, bdsmel)
    }
    if (curTab == 'earth') {
        d3.select('.cesium-widget canvas').style('height', (window.innerHeight - document.getElementById('earthTab').getBoundingClientRect().top - 50) + 'px');
    }
    $('#svTab').height(Math.max(350, window.innerHeight - 184));
    //$('#compareTab').height(Math.max(350, window.innerHeight - 184));

    //set3dSegment(10, Math.max(1,Math.min(10,20 * segment.data.gfo.filter(function(d){return d.g==0})[0].v / segment.distance)));
}


function sizep3d() {
    $('#profile3dsvg').height($('#profile3dsvgContainer').height());
    $('#profile3dsvg').width($('#profile3dsvgContainer').width());
    if (typeof(embed) === 'undefined' || !embed) {
        document.getElementById('profile3dCanvas2').height = $('#profile3dsvgContainer').height();
        document.getElementById('profile3dCanvas2').width = $('#profile3dsvgContainer').width();
    }
}

var s_sNotice = (!s_s ? '<p style="' + (isFree ? 'margin-top:8px;' : '') + '"><b>Important note:</b> Segment placings and history are <a href="' + s_sBlogLink + '" target="_blank">only available to Strava Subscribers</a>. VeloViewer users can get a <a href="https://promo.strava.com/veloviewer/" target="_blank">60 day free Strava Premium trial here</a>.</p>' : '');
if (isFree) {
    d3.select('#tourInfo')
        .style('display', null)
        .classed('alert alert-info', true)
        .html('<h4>VeloViewer Tour Notes</h4>' + s_sNotice + '<p' + (s_s ? ' style="margin-top:8px;"' : '') + '>Everything you want to know about a segment including the famous VeloViewer interactive 3D elevation profile. Make sure you spin the profile round to really get a feel for the segment from every angle. Analyse your full history of attempts to see how you are progressing.</p><p><b>Go to your Update page at any time to <a href="/update">Upgrade to PRO</a> to view your entire Strava history and segments in VeloViewer (and to hide these notes).</b></p>');
} else {
    if (!s_s) {
        d3.select('#tourInfo')
            .style('display', null)
            .classed('alert alert-info', true)
            .html(s_sNotice);
        d3.select('#tourInfo p').style('margin-bottom', '0px');
    }
}

function localInit() {
    a = d3.merge(d3.values(teffs))
        .filter(function(d) {
            return d.si == segmentId
        });
    b = a.map(function(d) {
        for (var att in d) {
            d['_' + att] = d[att];
        }
        for (var att in tacts[d._ai]) {
            d[att] = tacts[d._ai][att];
        }
        d.stt = (typeof(d._mt) === 'undefined' ? 0 : Math.max(0, d._et - d._mt));
        d._mt = (typeof(d._mt) === 'undefined' ? d._et : d._mt);
    });
    a.sort(function(b, c) {
        return b._et - c._et
    });
    var gf = 2 + segment.grade / 10;
    a.forEach(function(d) {
        d._etd = d._et - a[0]._et;
        d._pbpr = (d._et * 100 / a[0]._et) - 100;
        d._as = d._d / d._et;
        d._pa = 1 / d._as;
        d._bet = segment.komElapsedTime;
        d._betd = d._et - segment.komElapsedTime;
        d._pbl = (d._et * 100 / segment.komElapsedTime) - 100;

        d._v = segment.elevationDiff * 3600 / d._et;
        d._rp = d._v / (gf * 100);
    });
    /*  a.forEach(function(d) {
        d.num = lc++;
        d.stt = (typeof(d._mt) === 'undefined' ? 0 : Math.max(0, d.et - d.mt));
        d.prl = d._et - d.et;
        d.pprl = 100 * d.prl / d.et;
        d._bl = d._et - d.bet;
        d._pbl = 100 * d.prl / d.bet;
        d.if = (starred.indexOf(d.si) > -1 ? 1 : 0);
      });*/

    d3.select('#historyTab').text('History (' + a.length + ')');

    d3.select('h1').append('a')
        .attr({
            'href': '#',
            'type': 'button',
            'title': 'Segment is ' + (isStarred ? '' : 'not ') + 'currently starred. Click to ' + (isStarred ? 'un' : '') + 'star.',
            'style': 'margin-left:5px;font-size:0.7em'
        })
        .on('click', function() {
            d3.event.preventDefault();
            $.ajax({
                url: '/api/setSegmentStarred.php?i=' + segmentId + '&v=' + (isStarred ? 0 : 1),
                async: true,
                success: function(result) {
                    if (typeof(result.success) !== 'undefined' && result.success) {
                        isStarred = !isStarred;
                        if (isStarred == 1) {
                            starred.push(segmentId);
                        } else {
                            var i = starred.indexOf(segmentId);
                            if (i > -1) {
                                starred.splice(i, 1);
                            }
                        }
                        d3.select('h1 a').attr('title', 'Segment is ' + (isStarred ? '' : 'not ') + 'currently starred. Click to ' + (isStarred ? 'un' : '') + 'star.');
                        d3.select('h1 a sup').html('&#' + (isStarred ? '9733' : '9734'));
                    } else {
                        alert('Failed to ' + (this.val == 1 ? '' : 'un') + 'star segment :-(');
                    }
                }
            });
            return false;

        })
        .append('sup')
        .html('&#' + (isStarred ? '9733' : '9734'));

    if (segment.distance > -1 && segment.elevationArr != '' && segment.elevationArr != null) {
        setData();
        setConfig();
        init();
    } else {
        d3.select('#myTabs').remove();
        d3.select('.tab-content').attr('class', 'lead').html('This segment is either private, has been deleted, or has been edited (resulting in a new segment being created).  Try <a href="https://www.strava.com/segments/' + segmentId + '">opening the segment on Strava</a> to see if it has been replaced.');
    }
}

function filtersFinishedFun() {
    initScrollingTable(d3.select('.tableWrapper.st'), function() {
        var availableHeight = parseInt(window.innerHeight) - this.getBoundingClientRect().top - 71 - pageYOffset;
        if (availableHeight > parseInt(d3.select(this).select('.st-body table').style('height'))) {
            return null;
        }
        return Math.max(280, availableHeight + 120) + 'px';
    });

    d3.selectAll('.st-head table').style('border-top-width', '0px');
    //d3.selectAll('.st td:nth-child(1), .st th:nth-child(1)').style('border-left-width', '0px');

    setScrollingTableSize();
}

var columns = [{
        id: 0,
        title: 'PR Pos',
        desc: 'PR position',
        lngDesc: 'PR position.',
        width: 'auto',
        class: 'ar',
        field: 'pr',
        type: 'num',
        display: 'int',
        hideZeros: 0,
        defOrder: 'asc'
    }, {
        id: 1,
        title: 'Elapsed<br/>Time',
        desc: 'Elapsed time',
        lngDesc: 'The elapsed time (including any stops).',
        width: 'auto',
        class: '',
        field: '_et',
        type: 'num',
        display: 'lTime',
        hideZeros: 0,
        defOrder: 'asc'
    }, {
        id: 2,
        title: 'Moving<br/>Time',
        desc: 'Moving time',
        lngDesc: 'The moving time.',
        width: 'auto',
        class: '',
        field: '_mt',
        type: 'num',
        display: 'lTime',
        hideZeros: 0,
        defOrder: 'asc'
    }, {
        id: 3,
        title: 'Behind<br/>Your PR',
        desc: 'Behind Your PR',
        lngDesc: 'The time behind your PR.',
        width: 'auto',
        class: '',
        field: '_etd',
        type: 'num',
        display: 'lTime',
        hideZeros: 0,
        defOrder: 'asc'
    }, {
        id: 4,
        title: 'Behind<br/>PR %',
        desc: '% behind PR',
        lngDesc: 'The percentage of time behind your PR.',
        width: 'auto',
        class: '',
        field: '_pbpr',
        type: 'num',
        display: '1dp',
        hideZeros: 1,
        defOrder: 'asc'
    }, {
        id: 12,
        title: 'Behind<br/>Leader',
        desc: 'Time behind leader',
        lngDesc: 'The amount of time you are behind the leader.',
        width: 'auto',
        class: '',
        field: '_betd',
        type: 'num',
        display: 'lTime',
        hideZeros: 1,
        defOrder: 'asc'
    }, {
        id: 13,
        title: 'Behind<br/>Leader %',
        desc: '% behind leader',
        lngDesc: 'The percentage of time you are behind the leader.',
        width: 'auto',
        class: '',
        field: '_pbl',
        type: 'num',
        display: '1dp',
        hideZeros: 1,
        defOrder: 'asc'
    }, {
        id: 20,
        title: 'When',
        desc: 'When',
        lngDesc: '',
        width: 'auto',
        class: '',
        field: 's',
        type: 'date',
        display: 'date',
        hideZeros: 0,
        defOrder: 'desc'
    }, {
        id: 34,
        title: 'Gear',
        desc: 'Gear',
        lngDesc: 'Gear (bike or shoes)',
        width: 'auto',
        class: 'ar',
        field: 'g',
        type: 'list',
        display: 'list',
        hideZeros: 0,
        defOrder: 'asc'
    }, {
        id: 108,
        title: 'Device/App',
        desc: 'Device/App',
        lngDesc: 'Device/App used to record the data',
        width: 'auto',
        class: '',
        field: 'dv',
        type: 'list',
        display: 'list',
        hideZeros: 0,
        defOrder: 'asc'
    }, {
        id: 35,
        title: 'Heart Rate',
        desc: 'Heart rate',
        lngDesc: 'Average heart rate',
        width: 'auto',
        class: 'ar',
        field: '_ah',
        type: 'num',
        display: 'int',
        hideZeros: 1,
        defOrder: 'desc'
    }, {
        id: 36,
        title: 'Power (W)',
        desc: 'Power (W)',
        lngDesc: 'Average power in Watts',
        width: 'auto',
        class: 'ar',
        field: '_aw',
        type: 'num',
        display: 'int',
        hideZeros: 1,
        defOrder: 'desc'
    }, {
        id: 38,
        title: 'Power<br/>Meter',
        desc: 'Power meter',
        lngDesc: 'Has power meter',
        width: 'auto',
        class: 'ar',
        field: 'hp',
        type: 'list',
        display: 'list',
        hideZeros: 0,
        defOrder: 'asc'
    }, {
        id: 39,
        title: 'Cadence (rpm)',
        desc: 'Cadence (rpm)',
        lngDesc: 'Average cadence in RPM',
        width: 'auto',
        class: 'ar',
        field: '_ac',
        type: 'num',
        display: 'int',
        hideZeros: 1,
        defOrder: 'desc'
    }, {
        id: 40,
        title: 'Dist<br/>' + lrgLenUnit,
        desc: 'Distance',
        lngDesc: 'The length of the effort.',
        width: 'auto',
        class: '',
        field: '_d',
        type: 'num',
        display: 'vlLen',
        hideZeros: 0,
        defOrder: 'desc'
    }, {
        id: 45,
        title: 'Activity',
        desc: 'Activity name',
        lngDesc: '',
        width: '150px',
        class: 'clipText',
        field: 'an',
        type: 'text',
        display: 'text',
        hideZeros: 0,
        defOrder: 'asc'
    }, {
        id: 53,
        title: 'Group<br/>Size',
        desc: 'Group size',
        lngDesc: 'How many athletes (including you) in the group for the activity',
        width: 'auto',
        class: 'ar',
        field: 'atc',
        type: 'num',
        display: 'int',
        hideZeros: 0,
        defOrder: 'asc'
    },
    { id: 54, title: 'Temp<br/>°' + tempUnit, desc: 'Temperature', lngDesc: 'Average temperature for activity.', width: 'auto', class: '', field: 'tm', type: 'num', display: 'int', hideZeros: 0, defOrder: 'asc' }
];

switch (segment.type) {
    case "VirtualRun":
    case "Run":
        columns.push({
            id: 15,
            title: 'Pace<br/>' + lrgPaceUnit,
            desc: 'Avg pace ' + lrgPaceUnit,
            lngDesc: '',
            width: 'auto',
            class: '',
            field: '_paLrg',
            type: 'lrgPace',
            display: 'sTime',
            hideZeros: 0,
            defOrder: 'asc'
        });
        break;
    case "Swim":
        columns.push({
            id: 15,
            title: 'Pace<br/>' + smlPaceUnit,
            desc: 'Avg pace ' + smlPaceUnit,
            lngDesc: '',
            width: 'auto',
            class: '',
            field: '_paSml',
            type: 'smlPace',
            display: 'sTime',
            hideZeros: 0,
            defOrder: 'asc'
        });
        break;
    default:
        columns.push({
            id: 15,
            title: 'Speed<br/>' + speedUnit,
            desc: 'Avg speed',
            lngDesc: '',
            width: 'auto',
            class: '',
            field: '_as',
            type: 'num',
            display: 'speed',
            hideZeros: 0,
            defOrder: 'desc'
        });
}

if (segment.climbCat > 0) {
    columns.push({
        id: 60,
        title: 'VAM',
        desc: 'VAM',
        lngDesc: '',
        width: 'auto',
        class: 'ar',
        field: '_v',
        type: 'num',
        display: 'int',
        hideZeros: 1,
        defOrder: 'desc'
    });
    columns.push({
        id: 61,
        title: 'RP',
        desc: 'Relative Power W/kg',
        lngDesc: '',
        width: 'auto',
        class: 'ar',
        field: '_rp',
        type: 'num',
        display: '2dp',
        hideZeros: 1,
        defOrder: 'desc'
    });
}
columns.sort(function(b, c) {
    return b.id - c.id
});

var confCookie = 'scnf';
var confType = 1;
rowCount = 10000;
//var defColOrder = "0,10,20,30,40".split(',');

function getConfigs() {
    c = [{
        "id": "1",
        "athleteId": "-1",
        "type": "1",
        "name": "All",
        "colOrder": columns.map(function(d) {
            return d.id
        }).join(),
        "dataOrder": "0:0",
        "editable": false,
        "temp": false,
        "filters": "1:-1000000|1000000"
    }];
    curConfig = getCookie(confCookie);
    if (typeof(curConfig) == 'undefined') {
        curConfig = 0;
    }
}

// In your JavaScript
/*var comment_callback = function(response) {
    $.ajax({
        url: '/api/setSegmentCommentCount.php?i=' + segmentId,
        success: function(result) {
            var obj = result.parseJSON();
            if (typeof(obj.comments) !== 'undefined') {
                d3.selectAll('.fb_comments_count').text(obj.comments);
            }
        }
    });
}*/

d3.selectAll('#myTabs li:nth-child(4)').classed('hidden-phone', true);

getConfigs();

var messageDiv = d3.select('.subhead').append('div');

function lm_onzoomend() {
    setLMapDistMarkers(map3, segment.distanceArr2, segment.latLngArr2);
}
function lm_onmoveend() {
    setLMapDistMarkers(map3, segment.distanceArr2, segment.latLngArr2);
}

//$(function() {
    window.onresize = sizeChanged;
    sizeChanged();

    var historyLoaded = false;

    $('a[data-toggle="tab"][href="#history"]').on('shown', function(e) {
        curTab = 'history';
        d3.selectAll('.floatingVVLogo').style('display', 'none');
        if (!s_s) {
            d3.selectAll('#history').html('<p style="font-size:1.2em;margin-bottom:10em"><b>Important note:</b> To conform with Strava\'s API terms and conditions, this tab is <a href="' + s_sBlogLink + '" target="_blank">only available to Strava Subscribers</a>. VeloViewer users can get a <a href="https://promo.strava.com/veloviewer/" target="_blank">60 day free Strava Premium trial here</a>.</p>');
            return;
        }

        setScrollingTableSize();
        if (isBeta && !segShown) {
            segShown = true;
            setTimeout(function() {
                $('#collapseFilter').collapse('hide');
                var colBtn = $('#filtersExpander')[0];
                setCollapseState(colBtn);
                d3.select(colBtn).classed('collapsed', true);
            }, 2000);
            if (+athleteId > 0) {
                d3.select('#history h2').html('Your Attempts &nbsp; <a style="font-size:0.6em" href="/athlete/' + athleteId + '/efforts?f=44:' + segmentId + '">View charts in efforts tab</a>');
            }
        }
        sizeChanged();
    });


    $('a[data-toggle="tab"][href="#leaderboard"]').on('shown', function(e) {
        curTab = 'leaderboard';
        d3.selectAll('.floatingVVLogo').style('display', 'none');
        if (!stravaEmbedShown) {
            d3.select('#stravaEmbed').attr('src', https + '://www.strava.com/segments/' + segmentId + '/embed');
        }
        stravaEmbedShown = true;
        sizeChanged();
    });

    $('a[data-toggle="tab"][href="#details"]').on('shown', function(e) {
        curTab = 'details';
        d3.selectAll('.floatingVVLogo').style('display', 'none');
        setDlWidth();
        sizeChanged();
    });

    d3.select('#myTabs')
        .append('li').html('<a href="#breakdownTab" data-toggle="tab">Breakdown</a>');

    d3.select('.tab-content')
        .append('div')
        .attr({
            class: 'tab-pane',
            id: 'breakdownTab'
        });

    $('a[data-toggle="tab"][href="#breakdownTab"]').on('shown', function(e) {
        curTab = 'breakdown';
        d3.selectAll('.floatingVVLogo').style('display', 'none');
        drawBreakdown(d3.select('#breakdownTab'), segment.latLngArr2, segment.distanceArr2, bdsmel)
    });

    setup3dmap();

    d3.select('#myTabs')
        .append('li').html('<a href="#earthTab" data-toggle="tab">Earth</a>');

    d3.select('.tab-content')
        .append('div')
        .style({
            margin: '-10px -10px -0px -10px',
            position: 'relative'
        })
        .attr({
            class: 'tab-pane',
            id: 'earthTab'
        })
        .append('div').attr('id', 'cesiumContainer');

    $('a[data-toggle="tab"][href="#earthTab"]').on('shown', function(e) {
        curTab = 'earth';
        d3.selectAll('.floatingVVLogo').style('display', 'none');

        drawCesiumPath(false);
    });

    d3.select('#myTabs')
        .append('li').html('<a href="#svTab" data-toggle="tab">Street View</a>');
    d3.select('.tab-content')
        .append('div')
        .attr({
            class: 'tab-pane',
            id: 'svTab'
        });
    $('a[data-toggle="tab"][href="#svTab"]').on('shown', function(e) {
        curTab = 'sv';
        $('#svTab').height(Math.max(350, window.innerHeight - 184));
        d3.selectAll('.floatingVVLogo').style('display', 'none');
        loadstreetview();
        setMapDetail('G', svMap);
        setSvExtent();
        if (!svPano.visible) {
            svPano.setVisible(true);
            isPanningSV = true;
            setSVPano(segment.latLngArr2Copy[0], segment.latLngArr2Copy[1], true);
            isPanningSV = false;
        }
    });

    d3.select('#myTabs')
        .append('li').html('<a href="#compareTab" data-toggle="tab">Compare</a>');
    d3.select('.tab-content')
        .append('div')
        .attr({
            class: 'tab-pane',
            id: 'compareTab'
        });
    $('a[data-toggle="tab"][href="#compareTab"]').on('shown', function(e) {
        curTab = 'compare';
        //$('#compareTab').height(Math.max(350, window.innerHeight - 184));
        d3.selectAll('.floatingVVLogo').style('display', 'none');
        drawCompare();
    });

    if (segment.distance == -1 || segment.distance == null) {
      if (typeof(embed) !== 'undefined' && embed) {
        window.location.replace('/segments/'+segmentId);
      } else {
        getSegmentDetails();
        getSegmentStreams();
      }
    } else {
        if (segment.elevationArr == null || segment.elevationArr == '') {
          if (typeof(embed) !== 'undefined' && embed) {
            window.location.replace('/segments/'+segmentId);
          } else {
            getSegmentStreams();
          }
        } else {
            if (+athleteId <= 0) {
                setData();
            }
        }
    }

    function leadingZero(num) {
        if (num.toString().length == 1) {
            return '0' + num.toString();
        }
        return num;
    }

    function secondsToTime(seconds) {
        var hours = Math.floor(seconds / (60 * 60));
        seconds -= hours * (60 * 60);
        var minutes = Math.floor(seconds / 60);
        seconds -= minutes * 60;

        return leadingZero((60 * hours) + minutes) + ':' + leadingZero(seconds);
    }

    if (typeof(embed) !== 'undefined' && embed && getParameterByName('style') == '2') {
        d3.select('body > p').style('font-weight', null);
    }
//});

var mws_apikey='PeShVmYq3t6w9z$B';
var mws_clientid='2323232444';
function setMWS() {
  if (embed) return;
  $('head').append('<link rel="stylesheet" type="text/css" href="https://mywindsock.com/api/widgets/css/veloviewer.css">');
  var mws = d3.select('#mwsWrapper').append('div').classed('well', true).append('div').attr({
    'class': 'mws-metric-group',
    'data-mws-source': 'strava_segment',
    'data-mws-id': segment.i
  });
  mws.append('h2').text('Weather Dynamics');
  mws.append('p').text('How the weather conditions compare.');
  mws.append('div').html('<div class="mws-modal-headwind mws-modal"><div class="mws-modal__inner"><button class="mws-modal__close"></button><div class="mws-modal__content"><h2>Headwind Percentage</h2><p>This is the total accumulated headwind of the activity, as a percentage.</p> <a class="mws-attr" href="https://mywindsock.com"></a></div></div></div><div class="mws-modal-wimpact mws-modal"><div class="mws-modal__inner"><button class="mws-modal__close"></button><div class="mws-modal__content"><h2>wImpact&trade; (Weather Impact&trade;)</h2><p>Imagine two riders are having a race. One has a weather free day, the other has the weather conditions of the current forecast. How much more or less energy does the rider with weather conditions require? This is wImpact&trade;</p> <a class="mws-attr" href="https://mywindsock.com"></a></div></div></div>');
  var mwstb = mws.append('table').classed('mws-table', true);
  mwstb.append('tr').html('<th class="title-col"></th><th>Weather Impact&trade; <span class="mws-help mws-modal__open" modal-content=".mws-modal-wimpact">?</span><br><div class="mws-wimpact-ident"></div></th><th>Headwind <span class="mws-help mws-modal__open" modal-content=".mws-modal-headwind">?</span><br><div class="mws-headwind-ident"></div></th>');
  mwstb.append('tr').html('<td>Current</td><td><div class="mws-metric" data-mws-branding="none" data-mws-icon="none" data-mws-help="none" data-mws-metric="wimpact"></div></td><td><div class="mws-metric"  data-mws-branding="none" data-mws-icon="none" data-mws-help="none" data-mws-metric="headwind"></div></td>');
  if (typeof(segment.komStartUnix) !== 'undefined') {
    mwstb.append('tr').html('<td>KOM</td><td><div class="mws-metric" data-mws-timestamp="'+segment.komStartUnix+'" data-mws-branding="none" data-mws-icon="none" data-mws-help="none" data-mws-metric="wimpact"></div></td><td><div class="mws-metric"  data-mws-timestamp="'+segment.komStartUnix+'" data-mws-branding="none" data-mws-icon="none" data-mws-help="none" data-mws-metric="headwind"></div></td>');
  }
  if (typeof(segment.qomStartUnix) !== 'undefined') {
    mwstb.append('tr').html('<td>QOM</td><td><div class="mws-metric" data-mws-timestamp="'+segment.qomStartUnix+'" data-mws-branding="none" data-mws-icon="none" data-mws-help="none" data-mws-metric="wimpact"></div></td><td><div class="mws-metric"  data-mws-timestamp="'+segment.qomStartUnix+'" data-mws-branding="none" data-mws-icon="none" data-mws-help="none" data-mws-metric="headwind"></div></td>');
  }
  if (typeof(segment.prWhen) !== 'undefined') {
    mwstb.append('tr').html('<td>PR</td><td><div class="mws-metric" data-mws-timestamp="'+(new Date(segment.prWhen).getTime()/1000)+'" data-mws-branding="none" data-mws-icon="none" data-mws-help="none" data-mws-metric="wimpact"></div></td><td><div class="mws-metric"  data-mws-timestamp="'+(new Date(segment.prWhen).getTime()/1000)+'" data-mws-branding="none" data-mws-icon="none" data-mws-help="none" data-mws-metric="headwind"></div></td>');
  }
  mws.append('div').classed('mws-attr', true);
  $('head').append('<script type="text/javascript" src="https://mywindsock.com/api/widgets/js/load.js" defer></script>');
}