bqc.RouterDetail = Class.create({
initialize: function(container, options) {
this.container = container;
this.options = options;
this.segmentMaps = new Array();
this.member = null;
},
applyDistances: function() {
for (var i = 0; i < this.gdir.getNumRoutes(); i++) {
var route = this.gdir.getRoute(i);
for (var j = 0; j < route.getNumSteps(); j++) {
var suffix = i + '-' + j;
$('segment-distance-' + suffix).innerHTML = metersToCurrentUnit(this.segmentDistances[i][j]);
}
}
$('total-distance').innerHTML = metersToCurrentUnit(this.totalDistance);
},
switchDistanceUnitToKm: function() {
document.getElementById('vpkm').className = 'nolink itinaryText';
document.getElementById('vpkm').onclick = function() {}
document.getElementById('vpmiles').className = 'link itinaryTextLink';
document.getElementById('vpmiles').onclick = bqc.unitToggler.setToMiles;
},
switchDistanceUnitToMiles: function() {
document.getElementById('vpkm').className = 'link itinaryTextLink';
document.getElementById('vpkm').onclick = bqc.unitToggler.setToKM;
document.getElementById('vpmiles').className = 'nolink itinaryText';
document.getElementById('vpmiles').onclick = function() {}
},
openStreet: function(routeId, segmentId){
var routerTemp = this;
var suffix = routeId + "-" + segmentId;
var div = document.getElementById("mapSegmentDiv-" + suffix);
var mapLink = document.getElementById("mapLink-" + suffix);
var streetLink = document.getElementById("streetLink-" + suffix);
streetLink.className = "";
streetLink.onclick = "";
mapLink.className = "linkStreet";
mapLink.onclick = function(){routerTemp.switchToMap(routeId, segmentId);};
div.innerHTML = "";
var panorama = new GStreetviewPanorama(div);
var latlng = this.streetlatlng[routeId][segmentId];
panorama.setLocationAndPOV(latlng, null);
},
switchToMap: function(routeId, segmentId){
var routerTemp = this;
var suffix = routeId + "-" + segmentId;
var div = document.getElementById("mapSegmentDiv-" + suffix);
var mapLink = document.getElementById("mapLink-" + suffix);
var streetLink = document.getElementById("streetLink-" + suffix);
streetLink.className = "linkStreet";
streetLink.onclick = function(){routerTemp.openStreet(routeId, segmentId);};
mapLink.className = "";
mapLink.onclick = "";
div.innerHTML = "";
this.openSegment(routeId, segmentId);
},
incrementOpenSegmentHitLog: function(){
bqc.logger.log(null, null, bqc.params.p_mode, bqc.params.p_fromSite, "ACTION_ROUTING_SEGMENT", "");
},
openSegment: function(routeId, segmentId) {
var suffix = routeId + "-" + segmentId;
var container = document.getElementById("mapSegmentContainer-" + suffix);
var linkMapType = document.getElementById("layoutMapDiv-" + suffix);
var div = document.getElementById("mapSegmentDiv-" + suffix);
linkMapType.style.display = "block";
container.style.display = "block";
var segmentMap = new GMap2(div);
segmentMap.addControl(new MapTypeControl(routeId, segmentId));
segmentMap.addControl(new ZoombarControl(true, true));
segmentMap.addControl(new CompassControl(routeId, segmentId));
if (segmentId != 'start' && segmentId != 'end') {
var polyline = this.gdir.getPolyline();
var route = this.gdir.getRoute(routeId);
var startIndex = route.getStep(segmentId).getPolylineIndex();
var endIndex;
if (segmentId < route.getNumSteps() - 1) {
endIndex = route.getStep(segmentId + 1).getPolylineIndex();
} else if (routeId + 1 < this.gdir.getNumRoutes()) {
endIndex = this.gdir.getRoute(routeId + 1).getStep(0).getPolylineIndex();
} else {
endIndex = polyline.getVertexCount() - 1;
}
var points = new Array();
var bounds = new GLatLngBounds();
for (var i = startIndex; i <= endIndex; i++) {
points[points.length] = polyline.getVertex(i);
bounds.extend(points[points.length - 1]);
}
var segmentPolyline = new GPolyline(points);
var startMarker = bqc.createPoint(points[0].lat(), points[0].lng(), 'Itineraire_point_a.png');
var endMarker = bqc.createPoint(points[points.length - 1].lat(), points[points.length - 1].lng(), 'Itineraire_point_b.png');
var center = bounds.getCenter();
var zoom = segmentMap.getBoundsZoomLevel(bounds);
segmentMap.setCenter(center, zoom);
bounds = getIncreasedBounds(segmentMap, startMarker.getIcon().iconSize.width/2, startMarker.getIcon().iconSize.height, startMarker.getIcon().iconSize.width/2);
center = bounds.getCenter();
zoom = segmentMap.getBoundsZoomLevel(bounds);
segmentMap.setCenter(center, zoom);
segmentMap.addOverlay(segmentPolyline);
segmentMap.addOverlay(startMarker);
segmentMap.addOverlay(endMarker);
if(!this.segmentMaps[routeId]){
this.segmentMaps[routeId] = new Array();
}
this.segmentMaps[routeId][segmentId] = segmentMap;
}
var that = this;
document.getElementById("segmentActionTag-" + suffix).innerHTML = bqc.locale.itinary.details.closeSegment;
document.getElementById("segmentActionTag-" + suffix).onclick = function() {that.closeSegment(routeId, segmentId);};
document.getElementById("segmentTitle-" + suffix).onclick = function() {that.closeSegment(routeId, segmentId);};
this.incrementOpenSegmentHitLog();
},
closeSegment: function(routeId, segmentId) {
var suffix = routeId + "-" + segmentId;
var container = document.getElementById("mapSegmentContainer-" + suffix);
var linkMapType = document.getElementById("layoutMapDiv-" + suffix);
var div = document.getElementById("mapSegmentDiv-" + suffix);
linkMapType.style.display = "none";
container.style.display = "none";
div.innerHTML = "";
var that = this;
document.getElementById("segmentActionTag-" + suffix).innerHTML = bqc.locale.itinary.details.openSegment;
document.getElementById("segmentActionTag-" + suffix).onclick = function() { that.openSegment(routeId, segmentId); };
document.getElementById("segmentTitle-" + suffix).onclick = function() { that.openSegment(routeId, segmentId); };
},
initPano: function(i, j){
var client = new GStreetviewClient();
var routerTmp = this;
var polyline = this.gdir.getPolyline();
var route = this.gdir.getRoute(i);
var startIndex = route.getStep(j).getPolylineIndex();
var latlng = new GLatLng(polyline.getVertex(startIndex).lat(), polyline.getVertex(startIndex).lng());
client.getNearestPanorama(latlng, function(response){routerTmp.verifPano(response, i, j);});
},
verifPano: function(response, i, j){
var suffix = i + "-" + j;
var streetLink = document.getElementById("streetLink-" + suffix);
if(response.code == 200){
if(!this.streetlatlng){
this.streetlatlng = new Array();
}
if(!this.streetlatlng[i]){
this.streetlatlng[i] = new Array();
}
this.streetlatlng[i][j] = new GLatLng(response.Location.lat, response.Location.lng);
streetLink.className = "linkStreet";
streetLink.onclick = function(){bqc.routerDetail.openStreet(i, j);};
}else{
streetLink.className = "nolink";
streetLink.onclick = "";
}
},
cleared: function() {
bqc.unitToggler.removeMember(this.member);
this.container.innerHTML = '';
resizeMap();
},
setVisible: function(visible) {
var directions = $('hideableDirections');
if (directions != null) {
bqc.setVisible(directions, visible);
resizeMap();
}
},
hide: function(el) {
this.setVisible(false);
var that = this;
el.className = 'routeDetailExpand';
el.title = bqc.locale.resultList.open;
el.onclick = function() { that.show(this); };
},
show: function(el) {
this.setVisible(true);
var that = this;
el.className = 'routeDetailCollapse';
el.title = bqc.locale.resultList.close;
el.onclick = function() { that.hide(this); };
},
createResetButton: function(update) {
return html.leanTable({
props: {
className: 'directionHeaderInfoTitle'
},
style: {
display: (update == true) ? 'block': 'none',
marginLeft: '45px'
},
children: [
html.tr({
children: [
html.td({
style: {
width: '5px',
height: '24px',
background: 'url(images/itin_init_L.png) no-repeat'
}
}),
html.td({
props: {
innerHTML: bqc.locale.itinary.details.resetMsg
},
style: {
backgroundColor: '#fff4bb'
},
children: [
html.span({
props: {
id: 'itinResetButton',
className: 'link',
innerHTML: bqc.locale.itinary.details.resetLink,
onclick: function() {
bqc.router.resetRoute();
}
},
style: {
marginLeft: '5px'
}
})
]
}),
html.td({
style: {
width: '5px',
height: '24px',
background: 'url(images/itin_init_R.png) no-repeat'
}
})
]})
]}
);
},
route: function(gdir, fromTitle, toTitle, update) {
this.gdir = gdir;
this.totalDistance = gdir.getDistance().meters;
var detailTable;
var hideableTable;
this.container.innerHTML = '';
this.container.appendChild(html.div({
props: {
className: 'directionSectionSeparator'
}
}));
var dom = html.div({
props: {
className: 'directionHeader'
},
children: [
html.leanTable({
props: {
width: '100%'
},
children: [
html.tr({
children: [
html.td({
props: {
className: 'directionStepId',
width: '25%',
innerHTML: bqc.locale.itinary.details.title
}
}),
html.td({
props: {
width: '25%',
align: 'right'
},
children: [
html.span({
props: {
className: 'directionHeaderInfoTitle',
innerHTML: bqc.locale.itinary.details.estimatedDuration + bqc.locale.itinary.details.toPoint
}
}),
html.text(' '),
html.span({
props: {
className: 'directionHeaderInfoLabel',
innerHTML: gdir.getDuration().html
}
})
]
}),
html.td({
children: [
html.span({
style: {
paddingLeft: '30px'
},
children: [
html.text(' - ')
]
})
]
}),
html.td({
props: {
width: '25%',
align: 'left'
},
children: [
html.span({
props: {
className: 'directionHeaderInfoTitle',
innerHTML: bqc.locale.itinary.details.totalDistance + bqc.locale.itinary.details.toPoint + ' '
},
style: {
paddingLeft: '30px'
}
}),
html.span({
props: {
id: 'total-distance',
className: 'directionHeaderInfoLabel',
innerHTML: metersToCurrentUnit(this.totalDistance)
}
})
]
}),
html.td({
props: {
width: '25%'
},
children: [
html.div({
props: {
className: 'routeDetailCollapse',
title: bqc.locale.resultList.close,
onclick: function() {
bqc.routerDetail.hide(this);
}
}
})
]
})
]
})
]
}),
hideableDiv = html.div({
props: {
id: 'hideableDirections'
},
children: [
this.createResetButton(update),
html.leanTable({
children: [
html.tr({
children: [
html.td({
props: {
className: 'directionHeaderStartA'
}
}),
html.td({
children: [
html.span({
props: {
className: 'directionHeaderInfoTitle',
innerHTML: bqc.locale.itinary.details.start + bqc.locale.itinary.details.toPoint + ' '
},
style: {
paddingLeft: '30px'
}
}),
html.span({
props: {
className: 'directionHeaderInfoLabel',
innerHTML: fromTitle
}
})
]
}),
html.td({
props: {
className: 'directionHeaderEnd'
}
})
]
})
]
}),
html.div({
children: [
html.table({
noTBody: true,
props: {
width: '100%'
},
children: [
hideableTable = html.tbody({
children: [
html.tr({
children: [
html.td({
children: [
html.leanTable({
noTBody: true,
props: {
className: 'directionSteps',
width: '100%'
},
children: [
detailTable = html.tbody({})
]
})
]
})
]
})
]
})
]
})
]
})
]
})
]
});
var stepId = 0;
var mod = -1;
this.segmentDistances = new Array(gdir.getNumRoutes());
for (var i = 0; i < gdir.getNumRoutes(); i++) {
var route = gdir.getRoute(i);
this.segmentDistances[i] = new Array(route.getNumSteps());
for (var j = 0; j < route.getNumSteps(); j++) {
mod = (mod + 1) % 2;
var suffix = i + '-' + j;
var step = route.getStep(j);
this.segmentDistances[i][j] = step.getDistance().meters;
var stepDescription = step.getDescriptionHtml();
var imgSrc;
if (stepDescription.indexOf("left") > -1 || stepDescription.indexOf("gauche") > -1) {
imgSrc = 'images/Itineraire_fleche_Left.png';
} else if (stepDescription.indexOf('right') > -1 || stepDescription.indexOf('droite') > -1) {
imgSrc = 'images/Itineraire_fleche_Right.png';
} else {
imgSrc = 'images/Itineraire_fleche_Forward.png';
}
var openSegmentHandler = this.createOpenSegmentHandler(i, j);
detailTable.appendChild(html.tr({
children: [
html.td({
props: {
className: 'directionStep' + mod + 'Start'
}
}),
html.td({
props: {
width: 35,
className: 'directionStep' + mod + 'Middle'
},
children: [
html.span({
props: {
className: 'directionStepId'
},
children: [
html.text(++stepId + '.')
]
})
]
}),
html.td({
props: {
width: 25,
className: 'directionStep'+ mod +'Middle'
},
children: [
html.img({
props: {
src: imgSrc
}
})
]
}),
html.td({
props: {
className: 'directionStep' + mod + 'Middle'
},
children: [
html.span({
props: {
id: 'segmentTitle-' + suffix,
innerHTML: stepDescription,
onclick: openSegmentHandler
},
style: {
cursor: 'pointer'
}
})
]
}),
html.td({
props: {
width: 90,
className: 'directionStep' + mod + 'Middle'
},
children: [
html.div({
props: {
id: 'segment-distance-' + suffix,
innerHTML: metersToCurrentUnit(this.segmentDistances[i][j])
}
}),
html.div({
props: {
innerHTML: step.getDuration().html
}
})
]
}),
html.td({
props: {
width: 40,
className: 'directionStep'+ mod +'Middle'
},
children: [
html.span({
props: {
id: 'segmentActionTag-' + suffix,
innerHTML: bqc.locale.itinary.details.openSegment,
onclick: openSegmentHandler
},
style: {
cursor: 'pointer'
}
})
]
}),
html.td({
props: {
className: 'directionStep'+ mod +'End'
}
})
]
}));
detailTable.appendChild(html.tr({
children: [
html.td({}),
html.td({
props: {
colSpan: 2
}
}),
html.td({
children: [
html.div({
props: {
id: 'mapSegmentContainer-' + suffix
},
style: {
display: 'none'
},
children: [
html.leanTable({
props: {
className: 'box'
},
children: [
html.tr({
children: [
html.td({
props: {
className: 'boxItinaryTopCornerLeft'
},
children: [
html.img({
props: {
src: 'images/Box_TopCornerLeft.gif'
}
})
]
}),
html.td({
props: {
className: 'boxItinaryTopLeft'
}
}),
html.td({
props: {
className: 'boxItinaryTopMiddle'
},
style: {
width: '566px'
}
}),
html.td({
props: {
className: 'boxItinaryTopRight'
}
}),
html.td({
props: {
className: 'boxItinaryTopCornerRight'
},
children: [
html.img({
props: {
src: 'images/Box_TopCornerRight.gif'
}
})
]
})
]
}),
html.tr({
children: [
html.td({
props: {
className: 'boxItinaryLeftTop'
}
}),
html.td({
props: {
className: 'boxItinaryContent',
colSpan: 3,
rowSpan: 3
},
children: [
html.div({
props: {
id: 'mapSegmentDiv-' + suffix
},
style: {
width: '574px',
height: '300px',
padding: '0px',
margin: '0px'
}
})
]
}),
html.td({
props: {
className: 'boxItinaryRightTop'
}
})
]
}),
html.tr({
children: [
html.td({
props: {
className: 'boxItinaryLeftMiddle'
},
style: {
height: '292px'
},
children: [
html.text(' ')
]
}),
html.td({
props: {
className: 'boxItinaryRightMiddle'
},
children: [
html.text(' ')
]
})
]
}),
html.tr({
children: [
html.td({
className: 'boxItinaryLeftBottom'
}),
html.td({
props: {
className: 'boxItinaryRightBottom'
}
})
]
}),
html.tr({
children: [
html.td({
props: {
className: 'boxItinaryBottomCornerLeft'
},
children: [
html.img({
props: {
src: 'images/Box_BottomCornerLeft.gif'
}
})
]
}),
html.td({
props: {
className: 'boxItinaryBottomLeft'
}
}),
html.td({
props: {
className: 'boxItinaryBottomMiddle'
}
}),
html.td({
props: {
className: 'boxItinaryBottomRight'
}
}),
html.td({
props: {
className: 'boxItinaryBottomCornerRight'
},
children: [
html.img({
props: {
src: 'images/Box_BottomCornerRight.gif'
}
})
]
})
]
})
]
})
]
})
]
}),
html.td({
props: {
colSpan: 3,
vAlign: 'top'
},
children: [
html.div({
props: {
id: 'layoutMapDiv-' + suffix
},
style: {
display: 'none'
},
children: [
html.span({
props: {
id: 'mapLink-' + suffix,
innerHTML: bqc.locale.itinary.details.mapLink
}
}),
html.text(' | '),
html.span({
props: {
id: 'streetLink-' + suffix,
className: 'linkStreet',
innerHTML: bqc.locale.itinary.details.streetLink,
onclick: this.createOpenStreetHandler(i, j)
}
})
]
})
]
})
]
}));
this.initPano(i, j);
}
}
hideableTable.appendChild(
html.tr({
children: [
html.td({
children: [
html.leanTable({
props: {
width: '100%'
},
children: [
html.tr({
children: [
html.td({
props: {
className: 'directionHeaderStartB'
}
}),
html.td({
children: [
html.span({
props: {
className: 'directionHeaderInfoTitle',
innerHTML: bqc.locale.itinary.details.arrival + bqc.locale.itinary.details.toPoint
},
style: {
paddingLeft: '30px'
}
}),
html.text(' '),
html.span({
props: {
className: 'directionHeaderInfoLabel',
innerHTML: toTitle
}
})
]
}),
html.td({
style: {
textAlign: 'right'
}
}),
html.td({
props: {
className: 'directionHeaderStartLink'
}
}),
html.td({
props: {
className: 'directionHeaderFillLink',
vAlign: 'top'
},
style: {
width: '185px'
},
children: [
html.div({
style: {
paddingTop: '2px'
},
children: [
html.span({
props: {
className: 'link itinaryTextLink',
innerHTML: bqc.locale.itinary.details.reverseItinary,
onclick: function() {
bqc.router.reverse();
}
},
style: {
whiteSpace: 'nowrap'
}
})
]
})
]
}),
html.td({
props: {
className: 'directionHeaderMiddleLink'
}
}),
html.td({
props: {
className: 'directionHeaderFillLink'
},
style: {
textAlign: 'right',
width: '60px',
paddingTop: '2px',
verticalAlign: 'top'
},
children: [
html.span({
props: {
id: 'vpkm',
innerHTML: bqc.locale.itinary.details.km,
onclick: function() {
bqc.unitToggler.setToKM();
}
}
}),
html.text(' | '),
html.span({
props: {
id: 'vpmiles',
innerHTML: bqc.locale.itinary.details.miles,
onclick: function() {
bqc.unitToggler.setToMiles();
}
}
})
]
}),
html.td({
props: {
className: 'directionHeaderEndLink'
}
}),
html.td({
props: {
className: 'directionHeaderEnd'
}
})
]
})
]
})
]
})
]
})
);
dom.appendChild(html.div({
props: {
className: 'routingNotice',
innerHTML: bqc.locale.itinary.details.notice
}
}));
dom.appendChild(html.div({
props: {
className: 'routingNoticeBorder'
}
}));
this.container.appendChild(dom);
resizeMap();
var that = this;
bqc.unitToggler.addMember(this.member = {
id: 'routerDetail',
applyDistances: function() { that.applyDistances(); },
setToKM: function() { that.switchDistanceUnitToKm(); },
setToMiles: function() { that.switchDistanceUnitToMiles(); }
});
bqc.hideLoading();
},
createOpenSegmentHandler: function(i, j) {
return function() {
bqc.routerDetail.openSegment(i, j);
}
},
createOpenStreetHandler: function(i, j) {
return function() {
bqc.routerDetail.openStreet(i, j);
}
}
});