/**
* @fileoverview Compare Tool Redesign (view).
* @name View
* Requires Prototype version 1.6.0 or greater.
*/
/**
* Compare Tool Redesign View class.
* @author Ed Jenkins
*/
var View = Class.create();
/**
* Compare Tool Redesign View prototype.
* @scope View.prototype
*/
View.prototype =
{
/**
* Constructor.
* @constructor
* @throws exception if Prototype 1.6.0 or greater is not loaded.
*/
initialize: function()
{
// Make sure Prototype is included.
var exception = "Prototype version 1.6.0 or greater is required.";
if (typeof Prototype == "undefined")
{
throw(exception);
}
// Make sure it is version 1.6.0 or greater.
var ver = Prototype.Version.split(".");
var major = ver[0];
var minor = ver[1];
if (major < 1 || minor < 6)
{
throw(exception);
}
if (window["console"] == undefined)
{
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
window.console = {};
for (var i = 0; i < names.length; ++i){
window.console[names[i]] = function() {};
}
}
document.observe('dom:loaded', function() {
//popup resize
ATC.cs.research.ctr.view.popwinResize();
//pre initialize page
ATC.cs.research.ctr.controller.saveCarDataSessionCookieStatePrePageInitialization();
ATC.cs.research.ctr.zip.loadZip();
// nav change handler
$('details-wrapper').select(".compare-navigation").each(function(el) {
el.observe("change", function(event){
window.location = event.element().value;
this.selectedIndex = 0;
});
});
//// var stateCookie = getCookie("ct_toggleStates"),
//// toggler,
//// _states;
//// $('expand-all-link').update("Collapse all Categories");
//// $$('expand-all-link').invoke('show');
////
//// if (stateCookie != null)
//// {
//// var _states = stateCookie.split(",");
//// if (_states.join("").indexOf("0") == -1)
//// $('expand-all-link').update("Collapse all Categories");
//// var togglers = $$('#details-wrapper div.content');
//// var y = togglers.length;
//// for (var i = 0; i < y; i++)
//// {
//// if (_states[i] == "1")
//// {
//// $(togglers[i].id.substring(0, togglers[i].id.lastIndexOf("-")) + "-header").getElementsBySelector("div.box")[0].setStyle({backgroundImage:'url(/img/research/compare/bg-th.toggler-on.gif)'});
//// (Prototype.Browser.IE) ? togglers[i].show() : togglers[i].blindDown();
//// }
//// }
//// togglers = null;
// }
// Tabs
var tabs = new Control.Tabs
(
$('tabs'),
{
setClassOnContainer: true
}
);
// Ad Tags
var adManager;
adManager = new AdManager();
/*
$("tabDetails").observe('click', function(event)
{
ATC.utils.BIUtils.getBIEvent("e10ah");
ATC.cs.research.ctr.controller.setActiveTab(1);
return false;
});
$("tabDifferences").observe('click', function(event)
{
ATC.utils.BIUtils.getBIEvent("e10at");
ATC.cs.research.ctr.controller.setActiveTab(2);
return false;
});
*/
// var toggleBars = $$('#details-wrapper div.toggler');
// toggleBars.each(function(element) {
// element.observe('click', function() {
// var nextDiv = $(element.id.replace(/(.*)-[a-zA-Z0-9]+$/i, "$1-content"));
// if (nextDiv == null)
// {
// return;
// }
// var state = "0";
// if (nextDiv.style.display != "none")
// {
// this.down('div.box').setStyle({backgroundImage:'url(/img/research/compare/bg-th.toggler-off.gif)'});
// (Prototype.Browser.IE) ? nextDiv.hide() : nextDiv.blindUp();
// state = "0";
// }
// else
// {
// var biContentId = nextDiv.id;
// var biContentType = {
// "costs-content" : "e10aj",
// "photos-content" : "e10ak",
// "colors-content" : "e10al",
// "interior-content" : "e10am",
// "exterior-content" : "e10an",
// "performance-content" : "e10ao",
// "safety-content" : "e10ap",
// "specifications-content" : "e10aq",
// "truck-features-content" : "e10ar",
// "maintenance-content" : "e10as"
//
// }
// var biContentEvent = biContentType[biContentId];
// if (biContentEvent != "") {
// ATC.utils.BIUtils.getBIEvent(biContentEvent);
// }
//
// this.down('div.box').setStyle({backgroundImage:'url(/img/research/compare/bg-th.toggler-on.gif)'});
// (Prototype.Browser.IE) ? nextDiv.show() : nextDiv.blindDown();
// state = "1";
// }
//
// var _states = (getCookie("ct_toggleStates") != null)
// ? getCookie("ct_toggleStates").split(",")
// : new Array("0", "0", "0", "0", "0", "0", "0", "0", "0", "0");
// var togglers = $$('#details-wrapper div.content');
// var y = togglers.length;
// for (var i = 0; i < y; i++)
// {
// if (togglers[i].id == nextDiv.id)
// {
// _states[i] = state;
// break;
// }
// }
// setCookie("ct_toggleStates", _states.join(","));
// return false;
// });
// })
// toggleBars = null;
//
// $('expand-all-link').observe('click', function() {
// ATC.utils.BIUtils.getBIEvent("e10ai");
// if (this.innerHTML == "Expand all Categories")
// {
// this.update("Collapse all Categories")
// $$('div.content').invoke('show');
// $$('div.toggler div.box').invoke('setStyle', {backgroundImage:'url(/img/research/compare/bg-th.toggler-on.gif)'})
// $$('div.toggler div.box a').invoke('update', 'Hide');
// setCookie("ct_toggleStates", "1,1,1,1,1,1,1,1,1,1", null, "/", null);
// }
// else
// {
// this.update("Expand all Categories");
// $$('div.content').invoke('hide');
// $$('div.toggler div.box').invoke('setStyle', {backgroundImage:'url(/img/research/compare/bg-th.toggler-off.gif)'})
// $$('div.toggler div.box a').invoke('update', 'View');
// setCookie("ct_toggleStates", "0,0,0,0,0,0,0,0,0,0", null, "/", null);
// }
// return false;
// });
$('overview').observe('prototip:shown', function(event) {
var el = event.element();
if (el.id != 'price-tip' && el.id != 'trim-level-tip'){
ATC.utils.BIUtils.getBIEvent('e10ad');
}
});
$('photos-content').observe('prototip:shown', function() {
ATC.utils.BIUtils.getBIEvent('e10ae');
});
$('clear-new-comparison').observe('click', function() {
var controller = ATC.cs.research.ctr.controller;
var model = ATC.cs.research.ctr.model;
var count = model.getCarCount();
var newCompare = false;
if (count != 0)
{
newCompare = confirm("You are about to remove all of your selected vehicles from the Compare Tool."); // use dialog.js
}
if (newCompare) {
ATC.utils.BIUtils.getBIEvent("e10ac");
controller.removeAllCars();
controller.updateCars();
}
});
/**
* Zip code box (upper left - button clicks)
*/
var zipCodeUpdateBox = $('zip-code-container');
zipCodeUpdateBox.observe('click', function(event) {
var el = event.element();
var elId = el.id;
// change
if (elId == 'open-change-zip-modal') {
ATC.cs.research.ctr.view.showZipModalInline(true);
}
// update
if (elId == 'update-zip-button') {
ATC.cs.research.ctr.zip.zipValidator_CTR();
}
// cancel
if (elId == 'cancel-update-zip-button') {
ATC.cs.research.ctr.view.showZipModalInline(false);
return false;
}
});
/**
* Zip code box (upper left - form submit, enter key)
*/
$('zip-update-compare-list').observe('submit', function(event) {
var el = event.element();
var elId = el.id;
if (elId == 'zip-update-compare-list') {
ATC.cs.research.ctr.zip.zipValidator_CTR();
}
});
var printEmail = $('print-email');
if (printEmail) {
printEmail.observe('click', function(event) {
event.stop();
var el = event.element();
var elId = el.id;
// print link non OEM
if (elId == 'print-link') {
var printLink = ATC.cs.research.ctr.view.getPrintUrl(ATC.cs.research.ctr.controller.getStyleIds());
printLink += (printLink.indexOf('?') > 0) ? "&" : "?";
printLink += ATC.utils.BIUtils.getBIEvent("e6a");
var interstitialLink = "/research/compare/compare-print-interstitial.jsp?" + printLink;
new Popup({url: interstitialLink, width: 600, height: 600, location: 'yes', menubar: 'yes', status: 'yes', titlebar: 'yes', toolbar: 'yes'});
}
// email link non OEM
if (elId == 'email-link') {
// new Popup({url: ATC.cs.research.ctr.view.getPermalink('email') + "&origin_page=" + ((emailThisPageOP != null) ? emailThisPageOP : "" ) + "&" + ATC.utils.BIUtils.getBIEvent("e6"), width: 700, height: 500, scrollbars: 'yes'});
}
});
}
$('social-bookmarks').observe('click', function(event) {
// all links open in popup, so...
event.stop();
var el = event.element();
var elId = el.id;
var permalink = '';
if (elId == 'digg-link') {
permalink = ATC.cs.research.ctr.view.getPermalink('digg');
new Popup({url: permalink, width: 610, height: 490});
}
if (elId == 'reddit-link') {
permalink = ATC.cs.research.ctr.view.getPermalink('reddit');
new Popup({url: permalink, width: 630, height: 490});
}
if (elId == 'delicious-link') {
permalink = ATC.cs.research.ctr.view.getPermalink('delicious');
new Popup({url: permalink, width: 610, height: 490});
}
if (elId == 'perma-link') {
permalink = ATC.cs.research.ctr.view.getPermalink('perma');
new Popup({url: permalink, width: 610, height: 240});
}
});
$('page-header').observe('click', function(event) {
var el = event.element();
var elId = el.id;
if (elId == 'oem-banner-image' || elId == 'oem-banner-link' || elId == 'oem-logo-link' || elId == 'oem-logo-image') {
event.stop();
var link = ('A' == el.tagName ) ? el.href : el.up('a').href;
ATC.cs.research.ctr.view.openOEMWindow(link);
}
});
var view = ATC.cs.research.ctr.view;
view.enableNewComparisonButton();
view.initColumnEvents();
view.initTips();
view.resizeDetailsColumns();
// view.initColumnHovers();
});
},
initTips: function() {
new Tip('trim-level-tip', 'Trim is the level of options or features added to a model. For instance, in the example of a Honda Accord LX, Honda is the make, Accord is the model and LX is the trim level.', {
title: 'Trim Level'
});
new Tip('price-tip', 'Occasionally, the price for used cars reflects the original Manufacturer\'s Suggested Retail Price (MSRP). Where possible, the price for used cars is provided by NADAguides. The price for new cars represents the MSRP.', {
title: 'Price'
});
},
/**
* Add column events in during initialization
*/
initColumnEvents: function() {
var counter = 0;
for (var x = 1; x <= 4; x++) {
var car = ATC.cs.research.ctr.model.getCar(x);
if ((x == 1) && car == null) {
ATC.cs.research.ctr.view.showAddChangeColumn(x, true)
}
if (car) {
this.addEventsToOverview(x);
this.addEventsToCosts(x);
}
if (car == null) counter++;
if (counter == 1) {
this.addEventsToAddVehicle(x);
}
}
},
/**
* Add column hover windows in during initialization
*/
initColumnHovers: function() {
return;
for (var x = 1; x <= 4; x++) {
this.createMainPhotoHover(x);
this.createDetailPhotoHover(x);
}
},
/**
* Add events to column overview (top section)
*/
addEventsToOverview: function(column) {
var car = ATC.cs.research.ctr.model.getCar(column);
var adType = car.ctr.adType;
var isOEM = ATC.cs.research.ctr.model.isOEM();
var styleId = car.ctr.styleId;
var year = car.ctr.year;
var view = ATC.cs.research.ctr.view;
var zip = ATC.cs.research.ctr.model.getZIP();
// the element to observe
var overview = $('column-' + column);
overview.observe('click', function(event) {
// get the element that was clicked upon
var el = event.element();
var elId = el.id;
var elClass = el.className;
// year-make-model heading
if ((elClass == 'year') || (elClass == 'model')) {
if (isOEM) {
if (adType == 0) {
ATC.utils.BIUtils.getBIEvent("e16", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
} else {
ATC.utils.BIUtils.getBIEvent("e11a", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
}
} else {
if (column == 4) {
if (adType != 0) {
ATC.utils.BIUtils.getBIEvent("e29", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
}
}
}
}
// change car button
if (elId == 'change-' + column) {
view.removeEventsFromOverview(column);
view.removeEventsFromCosts(column);
view.enableOverlay(column, 'show');
view.showAddChangeColumn(column, false);
$('year-make-model-' + column).update('Change Vehicle');
}
// remove car button
if (elId == 'remove-' + column) {
ATC.utils.BIUtils.getBIEvent("e10af");
view.removeColumn(column);
ATC.cs.research.ctr.view.feedbackAddChange(column, "", "", "");
}
// read reviews
if (elId == 'read-reviews-' + column) {
if (isOEM) {
if (adType == 0) {
ATC.utils.BIUtils.getBIEvent("e19", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
} else {
ATC.utils.BIUtils.getBIEvent("e24", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
}
}
}
// write a review
if (elId == 'write-review-' + column) {
event.stop();
if (isOEM) {
if (adType == 0) {
ATC.utils.BIUtils.getBIEvent("e18", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
} else {
ATC.utils.BIUtils.getBIEvent("e13", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
}
} else {
if (adType == 0) {
ATC.utils.BIUtils.getBIEvent("e8", el);
}
}
return ATC.cs.research.ctr.view.openNewWindow(el.href);
}
// special offers
if (elId == 'offers-link-' + column) {
if (isOEM) {
if (adType == 0) {
ATC.utils.BIUtils.getBIEvent("e20", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
} else {
ATC.utils.BIUtils.getBIEvent("e25", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
}
}
}
// local listings (vehicles available)
if (elId == 'listings-link-' + column) {
if (isOEM) {
if (adType == 0) {
ATC.utils.BIUtils.getBIEvent("e21", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
} else {
ATC.utils.BIUtils.getBIEvent("e26", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
}
}
}
// build and price this car
if (elId == 'configure-link-' + column) {
if (isOEM) {
if (adType == 0) {
ATC.utils.BIUtils.getBIEvent("e22", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
} else {
ATC.utils.BIUtils.getBIEvent("e27", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
}
}
}
})
// OEM branding stripe handler
$('oem-' + column + '-a').observe('click', function(event) {
event.stop();
view.openOEMWindow(this.href);
});
// Trim change handler
$('trim-level-' + column).observe('change', function() {
ATC.utils.BIUtils.getBIEvent("e10ay");
ATC.cs.research.ctr.controller.getCars(null, null, null, this.value, column);
var car = ATC.cs.research.ctr.model.getCar(column);
var year = car.ctr.year;
var make = car.ctr.make;
var model = car.ctr.model;
ATC.cs.research.ctr.view.feedbackAddChange(column, year, make, model);
});
},
/**
* Add events to column costs
*/
addEventsToCosts: function(column) {
$('costs-detail-' + column).observe('click', function(event) {
var car = ATC.cs.research.ctr.model.getCar(column);
var adType = car.ctr.adType;
var isOEM = ATC.cs.research.ctr.model.isOEM();
var styleId = car.ctr.styleId;
var year = car.ctr.year;
var zip = ATC.cs.research.ctr.model.getZIP();
// get the element that was clicked upon
var el = event.element();
var elId = el.id;
// special offers
if (elId == 'costs-offers-link-' + column) {
if (isOEM) {
if (adType == 0) {
ATC.utils.BIUtils.getBIEvent("e23", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
} else {
ATC.utils.BIUtils.getBIEvent("e28", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
}
}
}
// highlighted specials
if (elId == 'costs-highlighted-offer-link-' + column) {
if (isOEM) {
if (adType == 0) {
ATC.utils.BIUtils.getBIEvent("e17", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
} else {
ATC.utils.BIUtils.getBIEvent("e12", el, "sid:" + styleId, "year:" + year, "zip:" + zip);
}
} else {
if (adType == 0) {
ATC.utils.BIUtils.getBIEvent("e9", el);
}
}
}
});
},
/**
* Add events to add vehicle button
*/
addEventsToAddVehicle: function(column) {
ATC.cs.research.ctr.view.showAddChangeColumn(column, true);
//Commented out since we are no longer using the Add button first
// $('column-' + column).observe('click', function(event) {
// var isOEM = ATC.cs.research.ctr.model.isOEM();
// var zip = ATC.cs.research.ctr.model.getZIP();
// // get the element that was clicked upon
// var el = event.element();
//
// if (el.name == 'add') {
// if (isOEM) {
// var bStyle = "";
// var biMake = "";
// for (var i = 1; i <= 3; ++i) {
// var car = ATC.cs.research.ctr.model.getCar(i);
// if ((car != null) && (car != undefined)) {
// if (biMake == "") {
// biMake = car.ctr.make;
// }
// if (bStyle == "") {
// bStyle = car.ctr.vehicleType;
// }
// }
// }
//
// ATC.utils.BIUtils.getBIEvent("e11", "bs:" + bStyle, "make:" + biMake, "zip:" + zip);
// } else {
// ATC.utils.BIUtils.getBIEvent("e10aa");
// }
// ATC.cs.research.ctr.view.showAddChangeColumn(column, true);
// }
// })
},
/**
* add events to zip modal window
*/
addEventsToZipModal: function() {
// ok
$('change-zip-button').observe('click', function() {
ATC.cs.research.ctr.zip.zipValidator();
});
// cancel
$('cancel-change-zip-button').observe('click', function() {
ATC.cs.research.ctr.view.showZipModal(false);
return false;
});
// submit the zip code form
$('compare-list').observe('submit', function() {
ATC.cs.research.ctr.zip.zipValidator();
});
},
/**
* Remove events from column overview
*/
removeEventsFromOverview: function(column) {
var oemStripe = $('oem-' + column + '-a');
var trimLevel = $('trim-level-' + column);
if (oemStripe) {
oemStripe.stopObserving('click');
}
if (trimLevel) {
trimLevel.stopObserving('change');
}
$('column-' + column).stopObserving('click');
},
/**
* Remove events from column costs
*/
removeEventsFromCosts: function(column) {
var overview = $('costs-detail-' + column);
overview.stopObserving('click');
},
removeEventsFromPhotoHovers: function(column) {
var mainPhoto = $('main-car-image-' + column);
if (mainPhoto) {
mainPhoto.stopObserving('mouseover');
mainPhoto.stopObserving('mouseout');
Tips.remove(mainPhoto);
}
for (var x = 0; x <= 8; x++) {
var detailPhoto = 'detCarImage-' + column + '-' + x;
var detailElement = $(detailPhoto);
if (detailElement) {
detailElement.stopObserving('mouseover');
detailElement.stopObserving('mouseout');
Tips.remove(detailElement);
}
}
},
/**
* Remove events from suggestion lists
*/
removeEventsFromSuggestionLists: function(column) {
var suggestionList = $('select-from-suggestion-' + column);
if (suggestionList) {
suggestionList.stopObserving('click');
}
},
/**
* Remove events from zip modal
*/
removeEventsFromZipModal: function() {
ATC.cs.research.ctr.view.enableMakes(null, 'enable');
$('change-zip-button').stopObserving('click');
$('cancel-change-zip-button').stopObserving('click');
$('compare-list').stopObserving('submit');
},
/**
* when the page is loaded from a popup in a popup, resize as appropriate
*/
popwinResize: function()
{
if (ATC.cs.research.ctr.url.getParameter("popwin") != null)
{
var w = 1020;
var h = screen.height - 30;
try
{
window.resizeTo(w, h);
}
catch(e)
{
}
}
},
/**
* Called on page initialization when there no cars in URL to show onLoad
* Instead, show initial state add model dialog (not the add button)
*/
showInitialStateAddModelDialog: function()
{
this.showAddChangeColumn(1, true);
},
/**
* called in event bindings and when OEM version is loaded with no zip and user click specials link.
* @param {bool} show.
*/
showZipModalInline: function(boolshowZipModal)
{
if (boolshowZipModal)
{
ATC.utils.BIUtils.getBIEvent("e10ab");
$('update-zip-code').show();
$('zip-code').hide();
$('invalid-zip-message').hide();
$('open-change-zip-modal-container').hide();
$('change-zip-label').setStyle({color:'black'});
}
else
{
ATC.utils.BIUtils.getBIEvent("e10z");
$('address').value = $('address-backup').value;
$('update-address').value = $('address-backup').value;
$('update-zip-code').hide();
$('zip-code').show();
$('open-change-zip-modal-container').show();
$('update-invalid-zip-message').hide();
$('update-zip-label').setStyle({color:'black'});
}
},
/**
* called in event bindings and when OEM version is loaded with no zip and user click specials link.
* @param {bool} show.
*/
showZipModal: function(boolshowZipModal)
{
if (boolshowZipModal)
{
ATC.cs.research.ctr.zip.promptUserForZip();
}
else
{
$('invalid-zip-message').hide();
$('change-zip-label').setStyle({color:'black'});
ATC.utils.BIUtils.getBIEvent("e10z");
//different cancel change zip behavior: if OEM simply close modal, if not OEM go "back" to previous page.
if (ATC.cs.research.ctr.model.isOEM())
{
$('address').value = $('address-backup').value;
Lightbox.hideBox();
}
else
{
setTimeout("history.go(-1)", 250);//history.go(-1);
}
}
},
/**
* Show the Column
* @param {object} car a car.
*/
showColumn: function(car)
{
//console.debug("view.showColumn - column=" + car.ctr.column + ", year=" + car.ctr.year + ", make=" + car.ctr.make + ", model=" + car.ctr.model);
var adType = car.ctr.adType;
var column = car.ctr.column;
var isOEM = ATC.cs.research.ctr.model.isOEM();
var isPopup = ATC.cs.research.ctr.url.getParameter("popwin");
var templateOverview = new Template(unescape($F("template-overview-model")));
var templateCosts = new Template(unescape($F("template-detail-costs")));
var templatePhotos = new Template(unescape($F("template-detail-photos")));
var templateInterior = new Template(unescape($F("template-detail-interior")));
var templateExterior = new Template(unescape($F("template-detail-exterior")));
var templatePerformance = new Template(unescape($F("template-detail-performance")));
var templateSafety = new Template(unescape($F("template-detail-safety")));
var templateSpecifications = new Template(unescape($F("template-detail-specifications")));
var templateTruckFeatures = new Template(unescape($F("template-detail-truck-features")));
var templateMaintenance = new Template(unescape($F("template-detail-maintenance")));
var targetOverview = $('column-' + column);
var targetCosts = $('costs-detail-' + column);
var targetPhotos = $('photos-detail-' + column);
var targetInterior = $('interior-detail-' + column);
var targetExterior = $('exterior-detail-' + column);
var targetPerformance = $('performance-detail-' + column);
var targetSafety = $('safety-detail-' + column);
var targetSpecifications = $('specifications-detail-' + column);
var targetTruckFeatures = $('truck-features-detail-' + column);
var targetMaintenance = $('maintenance-detail-' + column);
var theTargets = [targetOverview, targetCosts, targetPhotos, targetInterior, targetExterior, targetPerformance, targetSafety, targetSpecifications, targetTruckFeatures, targetMaintenance];
var theTemplates = [templateOverview, templateCosts, templatePhotos, templateInterior, templateExterior, templatePerformance, templateSafety, templateSpecifications, templateTruckFeatures, templateMaintenance];
// Loop through the templates, evaluating and replacing
var z = theTemplates.length;
for (var x = 0; x < z; x++)
{
var thisTemplate = theTemplates[x];
var thisTarget = theTargets[x];
if (thisTarget)
{
var evaluatedTemplate = thisTemplate.evaluate(car);
thisTarget.replace(evaluatedTemplate);
}
}
if (column == 4 && adType == 1)
{
var ele = 'change-' + column;
this.displayElement(ele, 'hide');
}
this.updateTrims(car);
this.addEventsToOverview(column);
this.addEventsToCosts(column);
// this.createMainPhotoHover(column);
// this.createDetailPhotoHover(column);
//Toggle conditionally shown elements based on page conditions not data
//OEM comparison
if (isOEM)
{
// hide the NADA valuation info when page is an OEM.
$("costs-nada-valuation-" + column).hide()
//if OEM version in a popup, then no links to MI
if (isPopup != null)
{
//YMM link at the top
var ymm = '' + car.ctr.year + ' ' + car.ctr.make + '
' + car.ctr.model + '';
$('year-make-model-' + column).update(ymm);
//main image link
var mainImage = $('main-car-image-' + column);
$('main-car-image-container-' + column).update(mainImage);
}
//do not display build & price this car link for user added model on OEM compare tool page
if (isOEM)//(!car.ctr.oemSponsored)
{
//template-overview-model
$('offers-' + column).update(' ');
// $('listings-link-' + column).update(' ');
$('configure-' + column).update(' ');
//template-detail-costs
$('costs-highlighted-offer-' + column).update(' ');
$('costs-offers-' + column).update(' ');
$('column-' + column).removeClassName('cell-header');
$('column-' + column).style.background = 'none';
$('column-' + column).style.borderTop = '1px solid #ccd3ec';
}
}
var makeColors = this.updateColors;
this.updateColorsYMMT(car, column);
makeColors(car, column, "exterior");
makeColors(car, column, "interior");
makeColors(car, column, "roof");
},
/**
* Rollup.
* Hides labels where no cars have data
* and shows labels where at least one car has data.
* @param data a map of fields to styles.
*/
rollup: function(data)
{
// Verify parameters.
if (data == null)
{
return;
}
for (key in data)
{
var k = key + "-0";
var v = data[key];
//window.alert("view.rollup - k=" + k + ", v=[" + v + "]");
//console.debug("view.rollupLabels - k=" + k + ", v=" + v);
var e = $(k);
if (e == null)
{
continue;
}
e.style.display = v;
// e.style.color = v;
}
},
/**
* Rollup Photos accordion.
* @param {number} photos the number of photos in the dataset.
*/
rollupPhotos: function(photos)
{
if(photos == null)
{
return;
}
var headerSize = 58;
var photoSize = 108;
var accordionHeight = (photoSize * photos) + headerSize;
var size = accordionHeight + "px";
var x = 0;
var y = 5;
for(x = 0; x < y; x++)
{
var id = "photos-inner-wrapper-" + x;
var e = $(id);
if(e == null)
{
continue;
}
e.style.height = size;
}
},
tipWaitType: "",
tipWaitTarget: "",
tipWaitTimer: "",
tipWaitIn: function(tipType, tipTarget) {
if (ATC.cs.research.ctr.view.tipWaitTarget != tipTarget) {
ATC.cs.research.ctr.view.tipWaitType = tipType;
ATC.cs.research.ctr.view.tipWaitTarget = tipTarget;
ATC.cs.research.ctr.view.tipWaitTimer = setTimeout("ATC.cs.research.ctr.view.tipWaitCheck('" + tipTarget + "')", 1000);
}
},
tipWaitCheck: function(tipTarget) {
if (ATC.cs.research.ctr.view.tipWaitTarget == tipTarget) {
ATC.utils.BIUtils.getBIEvent(ATC.cs.research.ctr.view.tipWaitType);
}
},
tipWaitOut: function() {
clearTimeout(ATC.cs.research.ctr.view.tipWaitTimer);
ATC.cs.research.ctr.view.tipWaitTarget = "";
},
createMainPhotoHover: function(column) {
return;
var el = $("main-car-image-" + column);
if (!el) return;
if (el.title == 'No Image Available') return;
var dataGrab = el.next('div');
if (!dataGrab) return;
var dataInfo = dataGrab.title;
if (!dataInfo) return;
var data = dataInfo.split(',');
//var column = data[0];
var ymm = data[1];
var trim = data[2];
var url = data[3];
var photo = data[4];
var tipTarget = el.id;
var tipTitle = '' + ymm + '
' + trim + '
';
var tipTemplate = '
';
if (!this.isPopup){
tipTemplate += "View More Photos and 360\xBA Spins
";
}
var tipClass = (column <= 2) ? "photoTip rightTip" : "photoTip leftTip";
var tipHookTarget = (column <= 2) ? 'rightMiddle' : 'leftMiddle';
var tipHookTip = (column <= 2) ? 'leftMiddle' : 'rightMiddle';
var tipOffsetX = (column <= 2) ? 10 : -10;
var tipOffsetY = -30;
// this.hoverWindow(tipTarget, tipTemplate, tipTitle, tipClass, tipHookTarget, tipHookTip, tipOffsetX, tipOffsetY);
},
createDetailPhotoHover: function(column) {
return;
for (var y = 0; y <= 8; y++) {
var el = $('detCarImage-' + column + '-' + y);
if (!el) continue;
if (el.title == 'No Image Available - ') continue;
var dataGrab = el.next('div');
if (!dataGrab) continue;
var dataInfo = dataGrab.title;
if (!dataInfo) continue;
var data = dataInfo.split(',');
var ymm = data[1];
var url = data[2];
var photo = data[3];
var photoId = data[4];
var viewName = data[5];
var photoType = 'Exterior';
if (photoId == 51 || photoId == 55 || photoId == 52) {
photoType = 'Interior';
}
var tipTarget = el.id;
var tipTitle = '' + photoType + '-' + viewName + '';
var tipTemplate = '';
if (!this.isPopup){
tipTemplate += "
View More Photos and 360\xBA Spins
";
}
var tipClass = (column <= 2) ? "photoTip rightTip" : "photoTip leftTip";
var tipHookTarget = (column <= 2) ? 'rightMiddle' : 'leftMiddle';
var tipHookTip = (column <= 2) ? 'leftMiddle' : 'rightMiddle';
var tipOffsetX = (column <= 2) ? 10 : -10;
var tipOffsetY = -30;
// this.hoverWindow(tipTarget, tipTemplate, tipTitle, tipClass, tipHookTarget, tipHookTip, tipOffsetX, tipOffsetY);
}
},
hoverWindow: function(tipTarget, tipTemplate, tipTitle, tipClass, tipHookTarget, tipHookTip, tipOffsetX, tipOffsetY) {
return;
new Tip(tipTarget, tipTemplate, {
title : tipTitle,
className: tipClass,
//radius: 0,
border: 0,
delay: 0.3,
//effect: 'appear',
//duration: 0.2,
closeButton: true,
hideAfter: .1,
hideOn: { element: 'closeButton', event: 'click' },
viewport: true,
hook: {target: tipHookTarget, tip: tipHookTip},
offset: {x:tipOffsetX, y:tipOffsetY},
showOn: 'mousemove'
});
},
/**
* Updates colors year, make, model
*/
updateColorsYMMT: function(car, column) {
// Verify parameters.
if (car == null)
{
return;
}
if (column == null)
{
return;
}
var car = car.ctr;
var domColumn = "colors-ymmt-" + column;
var domId = $(domColumn);
domId.update('');
var innerWrapper = new Element('div', { 'class': 'inner-wrapper' });
var spanYMM = new Element('span',
{
id: 'colors-ymm-' + column,
'class': 'ymm'
}).update(car.year + ' ' + car.make + ' ' + car.model);
var spanTrim = new Element('span',
{
id: 'colors-trim-' + column,
'class': 'trim'
}).update(car.style);
innerWrapper.insert(spanYMM);
innerWrapper.insert(spanTrim);
domId.insert(innerWrapper);
},
/**
* Updates interior, exterior and roof colors
* @param {object} car a car.
* @param {integer} column column index.
* @param {string} colorFor is either interior, exterior.or roof
*/
updateColors: function(car, column, type)
{
// Verify parameters.
if (car == null)
{
return;
}
if (column == null)
{
return;
}
if (type == null)
{
return;
}
var colorArray = car.ctr.colors[type];
var colorLength = colorArray.length;
var domColumn = "colors-" + type + "-" + column;
var domId = $(domColumn);
domId.update('');
var innerWrapper = new Element('div',
{
'class': 'inner-wrapper'
});
var x = 0;
for (x = 0; x < colorLength; x++)
{
var thisColor = colorArray[x];
var colorName = new Element('div').update(thisColor.name);
var colorSwatch = new Element('div', { 'class': 'swatch' });
var bgc = '#' + thisColor.value;
colorSwatch.style.backgroundColor = bgc;
innerWrapper.insert(colorName);
innerWrapper.insert(colorSwatch);
}
domId.insert(innerWrapper);
},
/**
* Updates the trim dropdown.
* @param {object} car a car.
*/
updateTrims: function(car)
{
// Get the listbox.
var column = car.ctr.column;
var lstTrims = $("trim-level-" + column);
// Remove old options.
var y = lstTrims.options.length;
var x = y - 1;
if (y > 0)
{
while (x >= 0)
{
var o = lstTrims.options[x];
lstTrims.removeChild(o);
x--;
}
}
// Add new options.
var trims = $A(car.ctr.trims);
var trimsLength = trims.length;
var defaultValue = car.ctr.styleId;
for (x = 0; x < trimsLength; x++)
{
var thisTrim = trims[x];
ATC.cs.research.ctr.view.addTrim(lstTrims, thisTrim.name, thisTrim.value, defaultValue);
}
},
/**
* Adds a trim.
* @param {object} list the listbox to add items to.
* @param {string} name the text to display in the dropdown list box.
* @param {string} value the option's value.
* @param {string} defaultValue the value to select.
*/
addTrim: function(list, name, value, defaultValue) {
if (list == null) {
return;
}
if (name == null) {
return;
}
if (value == null) {
return;
}
if (defaultValue == null) {
return;
}
if (typeof list != "object") {
return;
}
var o = new Element('option', {'value': value}).update(name);
if (value == defaultValue) {
o.setAttribute("selected", "selected");
}
list.appendChild(o);
},
/**
* Enable or disable trims dropdown
*/
enableTrims: function(column, enable) {
var trimSelect = 'trim-level-';
switch (enable) {
case 'enable':
for (var x = 1; x < 5; x++) {
var thisSelect = $(trimSelect + x);
if (thisSelect) thisSelect.enable();
}
break;
case 'disable':
for (var x = 1; x < 5; x++) {
if (x == column) continue;
var thisSelect = $(trimSelect + x);
if (thisSelect) thisSelect.disable();
}
break;
}
},
/**
* Enable or disable makes dropdown
*/
enableMakes: function(column, enable) {
var makeSelect = 'make-';
switch (enable) {
case 'enable':
for (var x = 1; x < 5; x++) {
var thisMake = $(makeSelect + x);
if (thisMake) thisMake.enable();
}
break;
case 'disable':
for (var x = 1; x < 5; x++) {
if (x == column) continue;
var thisMake = $(makeSelect + x);
if (thisMake) thisMake.disable();
}
var zip = ATC.cs.research.ctr.model.getZIP();
if (!zip) {
$('address').focus();
}
break;
}
},
/**
* Enable or disable translucent overlays during column change
*/
enableOverlay: function(column, show) {
var columnName = 'column-';
var isOEM = ATC.cs.research.ctr.model.isOEM();
if (isOEM) {
return;
}
switch (show) {
case 'show':
// disable makes and trims select box due to IE6
ATC.cs.research.ctr.view.enableMakes(column, 'disable');
ATC.cs.research.ctr.view.enableTrims(column, 'disable');
for (var x = 1; x < 5; x++) {
if (x == column) continue;
var overlayId = 'overlayDisabled_' + x;
var overlay = $(overlayId);
if (overlay) {
overlay.show()
} else {
var thisColumn = columnName + x;
var newElem = new Element('div', {id: overlayId});
newElem.setStyle({
backgroundColor: '#fff',
position: 'absolute'
});
$(thisColumn).down('div.inner-wrapper').appendChild(newElem);
$(newElem.id).clonePosition(thisColumn).setOpacity(".5");
}
}
break;
case 'hide':
for (var x = 1; x < 5; x++) {
var overlay = $('overlayDisabled_' + x);
if (overlay) {
overlay.hide()
}
}
ATC.cs.research.ctr.view.enableMakes(column, 'enable');
ATC.cs.research.ctr.view.enableTrims(column, 'enable');
break;
}
},
/**
* Display the Add button.
* @param {number} column where to display the Add button.
*/
showNextColumnAddButton: function(paramColumn)
{
if (paramColumn == null)
{
return;
}
if (typeof paramColumn != "number")
{
return;
}
var tempCar = ATC.cs.research.ctr.model.getCar(paramColumn);
if ((typeof tempCar != "undefined") && (tempCar != null))//a car is that column (probably an inline ad)
{
return;
}
var objData = {column: paramColumn};
// var columnTemplate = new Template(unescape($F("template-overview-add-another-model")));
var target = $('column-' + paramColumn);
// var evaluatedTemplate = columnTemplate.evaluate(objData);
// target.replace(evaluatedTemplate);
this.addEventsToAddVehicle(paramColumn);
},
/**
* Shows column for Adding or Changing a car
* @param {object} column column index
* @param {boolean} isAddMode toggles add button vs update/cancel buttons
*/
showAddChangeColumn: function(column, isAddMode)
{
var count = ATC.cs.research.ctr.model.getCarCount();
var isOEM = ATC.cs.research.ctr.model.isOEM();
var listName = (column == 1) ? "PREVIOUSLY_VIEWED" : "SIMILAR";
//TODO is this endlessly looping? or why the timeout?
this.changeColumn(column);
this.evaluateAddChangeColumnTemplate(column, isAddMode);
var makeDD = $('make-' + column);
var modelDD = $('model-' + column);
var yearDD = $('year-' + column);
this.addEventsToAddChangeColumnTemplate(column, makeDD, modelDD, yearDD);
this.addEventsToSuggestionLists(column);
this.updateSelects(column, isAddMode, modelDD);
if (isOEM)
{
$('suggestions-' + column).hide();
}
if (listName == "PREVIOUSLY_VIEWED")
{
if (isAddMode)
{
var suggestion_ele = $('select-from-suggestion-' + column);
suggestion_ele.update('');
}
else
{
//more than 1 vehicle in the CTR, the first column edit mode should be defaulted to Similar vehicle not Previously viewed as per Defect 17874
if (count > 1) {
var ele_hide = $('previously-viewed');
ATC.cs.research.ctr.view.displayElement(ele_hide, 'hide');
$('similar-' + column).writeAttribute("checked", "checked");
listName = "SIMILAR";
}
else
{
$('previously-viewed-' + column).writeAttribute("checked", "checked");
}
}
}
else {
var ele_hide = $('previously-viewed')
ATC.cs.research.ctr.view.displayElement(ele_hide, 'hide');
if (listName == "SIMILAR")
{
$('similar-' + column).writeAttribute("checked", "checked");
}
}
// do not get list for oem page
if (!isOEM) {
ATC.cs.research.ctr.controller.getSuggestionList(listName, column);
}
},
/**
* Change the column
*/
changeColumn: function(column)
{
ATC.cs.research.ctr.controller.changeColumn(column);
},
/**
* Update the select lists
* On ADD there is no car: so dropdowns are blank,
* on Change model they have Make Model Year
*/
updateSelects: function(column, isAddMode, modelDD)
{
if (isAddMode)
{
this.updateMakeSelect(column, "");
}
else
{
var car = ATC.cs.research.ctr.model.getCar(column);
var thisCar = car.ctr;
this.updateMakeSelect(column, thisCar.make);
this.updateModelSelect(thisCar.make, modelDD, thisCar.model);
this.updateYearSelect(thisCar.make, thisCar.model, thisCar.year, column);
}
},
/**
* Set's up the prototype template
* @param {object} paramColumn column index
* @param {boolean} isAddMode toggles add button vs update/cancel buttons
*/
evaluateAddChangeColumnTemplate: function(paramColumn, isAddMode)
{
var isOEM = ATC.cs.research.ctr.model.isOEM();
var count = ATC.cs.research.ctr.model.getCarCount();
// Hide buttons based if in Add or Change mode
var paramAddButtonClass = (isAddMode ? "" : "hide");
var paramUpdateButtonClass = (isAddMode ? "hide" : "" );
var objData = {
column : paramColumn,
addButtonClass : paramAddButtonClass,
updateButtonClass : paramUpdateButtonClass
};
var columnTemplate = (isOEM) ? new Template(unescape($F("template-overview-add-change-oem"))) : new Template(unescape($F("template-overview-add-change")));
if(count <= 1){
columnTemplate = new Template(unescape($F("template-overview-add-change-simple")));
}
// Replace the target column with the template data
var targetColumn = $('column-' + paramColumn);
var evaluatedTemplate = columnTemplate.evaluate(objData);
targetColumn.replace(evaluatedTemplate);
},
/**
* Add events to Make Model Year selects
* @param {object} column column index
*/
addEventsToAddChangeColumnTemplate: function(column, makeDD, modelDD, yearDD)
{
// make dropdown
var makeSelect = $('make-' + column);
makeSelect.observe('change', function() {
ATC.cs.research.ctr.view.makeChanged(column);
});
// model dropdown
var modelSelect = $('model-' + column);
modelSelect.observe('change', function() {
ATC.cs.research.ctr.view.modelChanged(column);
});
$('actions-' + column).observe('click', function(event) {
var el = event.element();
var elId = el.id;
// add button
if (elId == 'add-' + column) {
if (ATC.cs.research.ctr.model.isOEM()) {
ATC.utils.BIUtils.addQ("e14:"+column);
} else {
ATC.utils.BIUtils.addQ("e10m:"+column);
}
ATC.utils.BIUtils.addQ("e10a"); // needs to fire even if only 1 car
ATC.cs.research.ctr.view.removeEventsFromAddChangeColumnTemplate(column);
ATC.cs.research.ctr.controller.getCars(yearDD.value, makeDD.value, modelDD.value, null, column);
ATC.cs.research.ctr.view.feedbackAddChange(column, yearDD.value, makeDD.value, modelDD.value);
}
// update button
if (elId == 'update-' + column) {
ATC.cs.research.ctr.view.enableOverlay(column, 'hide');
if (ATC.cs.research.ctr.model.isOEM()) {
ATC.utils.BIUtils.addQ("e15:"+column);
} else {
ATC.utils.BIUtils.addQ("e10n:"+column);
}
ATC.utils.BIUtils.addQ("e10b");
ATC.cs.research.ctr.view.removeEventsFromSuggestionLists(column);
ATC.cs.research.ctr.view.removeEventsFromAddChangeColumnTemplate(column);
ATC.cs.research.ctr.controller.getCars(yearDD.value, makeDD.value, modelDD.value, null, column);
ATC.cs.research.ctr.view.feedbackAddChange(column, yearDD.value, makeDD.value, modelDD.value);
// Todo: Remove this when the car has BI data
// window.setTimeout(function() {
// var car = ATC.cs.research.ctr.model.getCar(column);
// ATC.utils.BIUtils.fireBIQ("svn1:" + car.ctr.styleId, "svy1:" + car.ctr.year);
// }, 6000);
}
if (elId == 'cancel-' + column) {
ATC.cs.research.ctr.view.enableOverlay(column, 'hide');
var md = ATC.cs.research.ctr.model;
ATC.utils.BIUtils.getBIEvent("e10f", md.getVN(1, 0), md.getVY(1, 0), md.getVN(2, 0), md.getVY(2, 0), md.getVN(3, 0), md.getVY(3, 0), md.getVN(4, 0), md.getVY(4, 0));
ATC.utils.BIUtils.getBIEvent("e10ag");
ATC.cs.research.ctr.view.removeEventsFromAddChangeColumnTemplate(column);
ATC.cs.research.ctr.controller.cancelChange(column);
}
});
},
removeEventsFromAddChangeColumnTemplate: function(column) {
$('actions-' + column).stopObserving('click');
$('make-' + column).stopObserving('change');
$('model-' + column).stopObserving('change');
},
// javascript:ATC.cs.research.ctr.view.callGetCars(null, null, null,'280657', 2,'e10e,e10u:2','2006')
callGetCars:function(styleId, column, biAddEvent, biYear, make, model)
{
ATC.cs.research.ctr.view.enableOverlay(column, 'hide');
if ((biAddEvent != null) && (biAddEvent != "")) {
ATC.utils.BIUtils.addQ(biAddEvent);
}
if (biYear != "") {
ATC.utils.BIUtils.fireBIQ("svn1:" + styleId, "svy1:" + biYear);
}
ATC.cs.research.ctr.controller.getCars(null, null, null, styleId, column);
ATC.cs.research.ctr.view.feedbackAddChange(column, biYear, make, model);
},
/**
* Add events to Sugession List selects
* @param {object} column column index
*/
addEventsToSuggestionLists: function(column)
{
$('select-from-suggestion-' + column).observe('click', function(event) {
// get the element that was clicked upon
var el = event.element();
var elId = el.id;
var controller = ATC.cs.research.ctr.controller;
if (elId == 'similar-' + column) {
ATC.utils.BIUtils.addQ("e10s");
controller.getSuggestionList("SIMILAR", column);
}
if (elId == 'others-considered-' + column) {
ATC.utils.BIUtils.addQ("e10v");
controller.getSuggestionList("OTHERS_CONSIDERED", column);
}
if (elId == 'previously-viewed-' + column) {
ATC.utils.BIUtils.addQ("e10p");
controller.getSuggestionList("PREVIOUSLY_VIEWED", column);
}
});
var compareTip = $('compare-tip-' + column);
new Tip(compareTip, 'Similar Vehicles
Similar vehicles are based on industry data. Each one is chosen to give you a snapshot of vehicles that may offer many of the same features as the one you selected.Cars Others Considered
Other people compared these cars against the car you are currently researching.
Previously Viewed
When you view vehicles, we\'ll place them here so it\'s easy for you to return to them.
', {
title: 'Compare'
});
},
/**
* Loads the suggestion list data returned from AJAX call
*/
loadSuggestionList: function(carData)
{
var emptyListMessages = {
"SIMILAR" : "There are currently no similar vehicles to view.",
"OTHERS_CONSIDERED" : "We don't currently have any vehicles others considered that match the one you're looking for.",
"PREVIOUSLY_VIEWED" : "When you view vehicles, we'll place them here so it's easy for you to return to them."
}
var biListType = {
"SIMILAR" : "e10d,e10r",
"OTHERS_CONSIDERED" : "e10e,e10u",
"PREVIOUSLY_VIEWED" : "e10c,e10o"
}
var carText = carData.responseText;
var carObject = carText.evalJSON();
var listName = carObject.listName;
var column = carObject.column;
var carArray = carObject.list;
var caLength = carArray.length;
var listDomIdPrefix = "suggestion-list-item-";
var targetDomId = "suggestion-list-" + column;
var hasCars = false;
var html = "";
ATC.cs.research.ctr.view.setSuggestionListLoading('hide', column);
var biAddEvent = "";
if (biListType[listName] != "") {
ATC.utils.BIUtils.fireBIQ("cnt:" + carArray.length);
biAddEvent = biListType[listName]+":"+column; // add column for # notation in properties file (ex. e10u:2)
}
for (var x = 0; x < caLength; x++) {
if (carArray != null) {
hasCars = true;
var thisCar = carArray[x];
html += "";
}
}
if (!hasCars)
{
html = "" + emptyListMessages[listName] + "
";
if (listName == "PREVIOUSLY_VIEWED" && ATC.cs.research.ctr.model.getCarCount() == 0)
$("suggestions-" + column).hide();
}
$(targetDomId).update(html);
for (var y = 0; y < caLength; y++) {
var listDomId = listDomIdPrefix + y;
var thisCar = carArray[y];
// ATC.cs.research.ctr.view.createSuggestionListHover(column, thisCar, listDomId);
}
},
/*
* Creates the hover list popup for the suggestion list
*/
createSuggestionListHover: function(column, car, tipTarget)
{
return;
var tipTemplate = '
';
var tipTitle = car.year + " " + car.make + " " + car.model;
var tipClass = (column <= 2) ? "photoTip rightTip" : "photoTip leftTip";
var tipHookTarget = (column <= 2) ? 'rightMiddle' : 'leftMiddle';
var tipHookTip = (column <= 2) ? 'leftMiddle' : 'rightMiddle';
var tipOffsetX = (column <= 2) ? 10 : -10;
var tipOffsetY = 0;
this.hoverWindow(tipTarget, tipTemplate, tipTitle, tipClass, tipHookTarget, tipHookTip, tipOffsetX, tipOffsetY);
},
/**
* Clears our the suggestion list
* @param {integer} column column index
*/
clearSuggestionList: function(column) {
$('suggestion-list-' + column).update("");
},
setSuggestionListLoading: function(indicator, column) {
var thisList = $('suggestion-list-' + column);
if (thisList == null)
{
return;
}
var indicatorElement = new Element('div');
var indicatorImage = new Element('img', {
src: '/img/shared/ajax-loader.gif',
width: '30',
height: '33'
})
indicatorElement.setStyle({textAlign: 'center'});
indicatorImage.setStyle({paddingTop: '2px'});
indicatorElement.insert(indicatorImage);
switch (indicator) {
case ('show'):
thisList.update('');
thisList.insert(indicatorElement);
break;
case ('hide'):
thisList.update('');
break;
}
},
/**
* Get the Primary Car's Make
*/
getPrimaryMake: function()
{
var primaryCar = this.getPrimaryCar();
return (primaryCar != null) ? primaryCar.ctr.make : null;
},
/**
* Get the Primary Car (the car in column 1)
*/
getPrimaryCar: function()
{
return ATC.cs.research.ctr.model.getCar(1);
},
/**
* Cancel changing the column
*/
cancelChangeColumn: function (column)
{
ATC.cs.research.ctr.controller.cancelChange(column);
},
/**
* Removes a column.
* @param column the column to remove.
*/
removeColumn: function(column)
{
ATC.cs.research.ctr.controller.removeColumn(column);
},
/**
* Removes a column.
* @param column the column to remove.
*/
removeColumnView: function(column)
{
//console.debug("view.removeColumnView - column=" + column);
ATC.cs.research.ctr.view.removeEventsFromPhotoHovers(column);
ATC.cs.research.ctr.view.removeEventsFromOverview(column);
ATC.cs.research.ctr.view.removeEventsFromCosts(column);
/*
var contentWrappers = ['overview-inner-wrapper-', 'costs-inner-wrapper-', 'photos-inner-wrapper-', 'interior-inner-wrapper-', 'exterior-inner-wrapper-', 'performance-inner-wrapper-', 'safety-inner-wrapper-', 'specifications-inner-wrapper-', 'truck-features-inner-wrapper-', 'maintenance-inner-wrapper-'];
var z = contentWrappers.length;
for(var x = 0; x < z; x++)
{
var wrapper = contentWrappers[x];
var id = wrapper + column
var element = $(id);
if(element)
{
element.update('');
}
}
*/
// var contentWrappers = ['overview-inner-wrapper-', 'costs-inner-wrapper-', 'photos-inner-wrapper-'];
var contentWrappers = ['overview-inner-wrapper-', 'costs-inner-wrapper-', 'photos-inner-wrapper-', 'interior-inner-wrapper-', 'exterior-inner-wrapper-', 'performance-inner-wrapper-', 'safety-inner-wrapper-', 'specifications-inner-wrapper-', 'truck-features-inner-wrapper-', 'maintenance-inner-wrapper-'];
var x = 0;
var y = contentWrappers.length;
for (x = 0; x < y; x++)
{
var wrapper = contentWrappers[x];
var id = wrapper + column
var element = $(id);
if (element)
{
element.update("");
}
}
ATC.cs.research.ctr.view.resizeDetailsColumns();
/* TODO: make this cool code work
so we can see the gray background images
for empty columns.
// templates
var templateInterior = new Template(unescape($F("template-detail-interior")));
var templateExterior = new Template(unescape($F("template-detail-exterior")));
var templatePerformance = new Template(unescape($F("template-detail-performance")));
var templateSafety = new Template(unescape($F("template-detail-safety")));
var templateSpecifications = new Template(unescape($F("template-detail-specifications")));
var templateTruckFeatures = new Template(unescape($F("template-detail-truck-features")));
var templateMaintenance = new Template(unescape($F("template-detail-maintenance")));
// targets
var targetInterior = $('interior-detail-' + column);
var targetExterior = $('exterior-detail-' + column);
var targetPerformance = $('performance-detail-' + column);
var targetSafety = $('safety-detail-' + column);
var targetSpecifications = $('specifications-detail-' + column);
var targetTruckFeatures = $('truck-features-detail-' + column);
var targetMaintenance = $('maintenance-detail-' + column);
// arrays
var theTargets = [targetInterior, targetExterior, targetPerformance, targetSafety, targetSpecifications, targetTruckFeatures, targetMaintenance];
var theTemplates = [templateInterior, templateExterior, templatePerformance, templateSafety, templateSpecifications, templateTruckFeatures, templateMaintenance];
// Loop through the templates, evaluating and replacing
var o = new Object();
x = 0;
y = theTemplates.length;
for(x=0; x maxHeight)
maxHeight = getHeight;
if (maxHeight > 0) {
detailElement.style.height = maxHeight + "px";
}
}
}
contentElement.setStyle({
display: ($(contentElement).style.visibility == 'hidden') ? 'none' : 'block',
visibility: 'visible'
});
}
},
/**
* Update Comparing Count
*/
updateComparingCounts: function()
{
var count = ATC.cs.research.ctr.model.getCarCount();
var newVehicleTextClass = "";
var start = (count == 0 ? 0 : 1);
var total = (count == 0 ? 0 : 4);
var counterId = $('comparing-model-count');
if (counterId)
{
counterId.update(start + ' - ' + count + ' of ' + total);
}
},
enableNewComparisonButton: function()
{
var newComparison = $('clear-new-comparison');
var count = ATC.cs.research.ctr.model.getCarCount();
var bool = (count == 0 ? false : true);
switch (bool) {
case true:
newComparison.className = 'atc-ui-button new-comparison';
//newComparison.enable();
break;
case false:
newComparison.className = 'atc-ui-button new-comparison inactive';
//newComparison.disable();
break;
case undefined:
break;
}
},
displayPrintAndEmail: function()
{
var printAndEmail = $('print-email');
var count = ATC.cs.research.ctr.model.getCarCount();
var bool = (count == 0 ? false : true);
switch (bool) {
case true:
printAndEmail.removeClassName('hidden');
break;
case false:
printAndEmail.addClassName('hidden');
break;
case undefined:
break;
}
},
updateMakeSelect: function(paramColumn, defaultMake)
{
var isOEM = ATC.cs.research.ctr.model.isOEM();
//get all makes
var makeDD = $('make-' + paramColumn);
var selectOne = new Element('option').update('Select One');
makeDD.update(selectOne);
var callback = function(makes)
{
var makeLength = makes.length;
for (var x = 0; x < makeLength; x++) {
var thisMake = makes[x];
var thisOption = new Element('option', {value: thisMake}).update(thisMake);
if (thisOption.value == defaultMake) {
thisOption.selected = true;
}
makeDD.insert(thisOption);
}
var zip = ATC.cs.research.ctr.model.getZIP();
if (zip == '' || zip == null) {
ATC.cs.research.ctr.view.enableMakes(null, 'disable');
}
}
if (isOEM)
{
var bodyStyles = ATC.cs.research.ctr.controller.getBodyStyles();
ModelSearchUtil.getNewMakesByBodyStyle(bodyStyles, callback);
}
else
{
ModelSearchUtil.getAllMakes(callback);
}
},
makeChanged: function(paramColumn) {
var make = $('make-' + paramColumn);
var modelDD = $('model-' + paramColumn);
this.resetMYB(paramColumn);
this.updateModelSelect(make.value, modelDD, "");
},
updateModelSelect: function(make, modelDD, defaultModel)
{
var isOEM = ATC.cs.research.ctr.model.isOEM();
var selectOne = new Element('option').update('Select One');
modelDD.update(selectOne);
if (make == null || make == '') {
modelDD.disable();
return;
}
//get all models for that make
var callback = function(models)
{
var modelLength = models.length;
for (var x = 0; x < modelLength; x++) {
var thisModel = models[x];
var thisOption = new Element('option', {value: thisModel}).update(thisModel);
if (thisOption.value == defaultModel) {
thisOption.selected = true;
}
modelDD.insert(thisOption);
}
modelDD.enable();
}
if (isOEM)
{
var bodyStyles = ATC.cs.research.ctr.controller.getBodyStyles();
ModelSearchUtil.getNewModelsByMakeAndBodyStyle(make, bodyStyles, callback);
}
else
{
ModelSearchUtil.getAllRetailModels(make, callback);
}
},
modelChanged: function(paramColumn)
{
var make = $F('make-' + paramColumn);
var model = $F('model-' + paramColumn);
if (model == "")
{//"Select One"
this.resetMYB(paramColumn);
}
else
{
this.updateYearSelect(make, model, "", paramColumn);
}
},
updateYearSelect: function(make, model, defaultYear, paramColumn)
{
var callback = function(years)
{
var isOEM = ATC.cs.research.ctr.model.isOEM();
if (isOEM)
$('static-year-' + paramColumn).update(years[0]);
var yearSelect = $('year-' + paramColumn);
yearSelect.update('');
var yearsLength = years.length;
for (var x = 0; x < yearsLength; x++) {
var thisYear = years[x];
var thisOption = new Element('option', {value: thisYear}).update(thisYear);
if (thisOption.value == defaultYear) {
thisOption.selected = true;
}
yearSelect.insert(thisOption);
}
yearSelect.enable();
//enable submit button
var updateButton = $('update-' + paramColumn);
// updateButton.enable();
var addButton = $('add-' + paramColumn);
var fakeButton = $('fake-add-' + paramColumn);
addButton.removeClassName('hidden');
fakeButton.addClassName('hidden');
// addButton.enable();
}
ModelSearchUtil.getRetailYearsByMakeModel(make, model, callback);
},
resetMYB: function(paramColumn)
{
var yearSelect = $('year-' + paramColumn);
var updateButton = $('update-' + paramColumn);
var addButton = $('add-' + paramColumn);
yearSelect.update('');
//disable the year and update button
yearSelect.disable();
// updateButton.disable();
addButton.removeClassName('show');
// addButton.disable();
},
collapseRow: function(featureClass, doCollapse)
{
(doCollapse == true) ? $$('div.' + featureClass).invoke('hide') : $$('div.' + featureClass).invoke('show');
},
getPrintUrl:function(styleArray) {
var printStyles = '';
var printUrl = '';
var printPrefix = '/ac-servlets/compare-print/print.pdf?';
var styleLength = styleArray.length;
for (var i = 0; i < styleLength; i++) {
if (i > 0) {
printStyles += '&'
}
printStyles += 'style' + (i + 1) + '=' + styleArray[i];
}
printUrl = printPrefix + printStyles;
return printUrl;
},
getPermalink:function(permalinkType) {
var cols = 4;
var model = ATC.cs.research.ctr.model;
var permalinkdata = new Array();
var permalinkdesc = new Array();
var linktitle = new Array();
var atcurl = 'http://' + window.location.host + '/research/compare/compare-cars';
for (var i = 1; i <= cols; ++i) {
var car = model.getCar(i);
if ((car == null) || (car == undefined) || (car.ctr.sponsoredVehicleClass != "hide" && !ATC.cs.research.ctr.model.isOEM() )) {
if (permalinkType == 'email') {
permalinkdata[i - 1] = null;
} else {
permalinkdata[i - 1] = '-';
}
permalinkdesc[i - 1] = null;
} else {
var enc_make = car.ctr.make;
var enc_model = car.ctr.model;
var intIndexOfMatch = enc_make.indexOf(" ");
while (intIndexOfMatch != -1) {
enc_make = enc_make.replace(/\s+/g, "-");
intIndexOfMatch = enc_make.indexOf(" ");
}
intIndexOfMatch = enc_model.indexOf(" ");
while (intIndexOfMatch != -1) {
enc_model = enc_model.replace(/\s+/g, "-");
intIndexOfMatch = enc_model.indexOf(" ");
}
switch (permalinkType) {
//reformulate SEO URL to work with mod rewrite
// /research/compare/compare-cars/styleID1-styleID2-styleID3-styleID4/zip/30342/oem/1/MazdaUSA/y-m-m/y-m-m/y-m-m/y-m-m
// if less than 4 vehicles: /research/compare/compare-cars/styleID1-styleID2--/zip/30342/oem/1/MazdaUSA/y-m-m/y-m-m
case 'email':
permalinkdata[i - 1] = '&v' + [i] + '=' + car.ctr.styleId + '&v' + [i] + '_ymm=' + car.ctr.year + '-' + enc_make + '-' + enc_model;
permalinkdesc = '';
linktitle = '';
break;
case 'digg':
permalinkdata[i - 1] = (i > 1 ? '-' : '/') + car.ctr.styleId;
permalinkdesc[i - 1] = '/' + car.ctr.year + '-' + enc_make + '-' + enc_model;
linktitle[i - 1] = ' ' + car.ctr.year + ' ' + car.ctr.make + ' ' + car.ctr.model + ',';
break;
case 'reddit':
permalinkdata[i - 1] = (i > 1 ? '-' : '/') + car.ctr.styleId;
permalinkdesc[i - 1] = '/' + car.ctr.year + '-' + enc_make + '-' + enc_model;
linktitle[i - 1] = ' ' + car.ctr.year + ' ' + car.ctr.make + ' ' + car.ctr.model + ',';
break;
case 'delicious':
permalinkdata[i - 1] = (i > 1 ? '-' : '/') + car.ctr.styleId;
permalinkdesc[i - 1] = '/' + car.ctr.year + '-' + enc_make + '-' + enc_model;
linktitle[i - 1] = ' ' + car.ctr.year + ' ' + car.ctr.make + ' ' + car.ctr.model + ',';
break;
case 'perma':
permalinkdata[i - 1] = (i > 1 ? '-' : '/') + car.ctr.styleId;
permalinkdesc[i - 1] = '/' + car.ctr.year + '-' + enc_make + '-' + enc_model;
linktitle[i - 1] = ' ' + car.ctr.year + ' ' + car.ctr.make + ' ' + car.ctr.model + ',';
break;
case undefined:
permalinkdata[i - 1] = (i > 1 ? '-' : '/') + car.ctr.styleId;
permalinkdesc[i - 1] = '/' + car.ctr.year + '-' + enc_make + '-' + enc_model;
linktitle = '';
break;
}
}
}
var zip = ATC.cs.research.ctr.model.getZIP();
if (zip == null) {
zip = "";
}
var baseUrl = '';
var oemParams = "";
switch (permalinkType) {
//reformulate SEO URL to work with mod rewrite
// /research/compare/compare-cars/styleID1-styleID2-styleID3-styleID4/zip/30342/oem/1/MazdaUSA/y-m-m/y-m-m/y-m-m/y-m-m
// if less than 4 vehicles: /research/compare/compare-cars/styleID1-styleID2--/zip/30342/oem/1/MazdaUSA/y-m-m/y-m-m
case 'email':
baseUrl = '/research/shared/email-a-friend.jsp?emailText=compare&email_type=email_friend';
zip = '&zip=' + zip;
//add email link parameters for OCID
if (ATC.cs.research.ctr.model.isOEM())
{
var OEMdetails = ATC.cs.research.ctr.model.getOEMdetails();
oemParams = "&ocid=" + OEMdetails.get('ocid') + "&oemName=" + OEMdetails.get('oemName');
}
lnx = '';
mis = '';
break;
case 'digg':
baseUrl = 'http://digg.com/remote-submit?phase=2&url=';
zip = '/zip/' + zip;
lnx = '&LNX=ATCSEODIGG';
mis = '&mis=RCARBDLNSN1086';
break;
case 'reddit':
baseUrl = 'http://reddit.com/submit?url=';
zip = '/zip/' + zip;
lnx = '&LNX=ATCSEOREDDIT';
mis = '&mis=RCARBDLNSN1088';
break;
case 'delicious':
baseUrl = 'http://del.icio.us/post?url=';
zip = '/zip/' + zip;
lnx = '&LNX=ATCSEODELICIO';
mis = '&mis=RCARBDLNSN1087';
break;
case 'perma':
baseUrl = '/shared/social-bookmark/permalink.jsp?url=';
zip = '/zip/' + zip;
lnx = '&LNX=ATCSEOPERMALK';
mis = '&mis=RCARBDLNSN1089';
break;
case undefined:
baseUrl = '';
zip = '/zip/' + zip;
lnx = '';
mis = '';
break;
}
if (permalinkType == "digg" || permalinkType == "reddit" || permalinkType == "delicious" || permalinkType == "perma") {
permalinkdata = permalinkdata.compact().join('');
permalinkdesc = permalinkdesc.compact().join('');
linktitle = linktitle.compact().join('');
linktitle = linktitle.slice(0, -1);
linktitle = '&title=AutoTrader.com - Compare These Cars:' + linktitle + '&bodytext=AutoTrader.com - Compare the following cars:' + linktitle + '.';
permalink = "/redirect/redirector_link.jsp?to_url=" + escape(baseUrl) + escape(atcurl + permalinkdata + zip + permalinkdesc + lnx) + escape(linktitle) + mis;
} else {
//&baseURL=
permalink = baseUrl + permalinkdata.compact().join('') + zip + oemParams + lnx;
}
//console.log("permalink"+decodeURIComponent(permalink));
return permalink;
},
displayElement:function(element, param) {
switch (param) {
case ('show'):
$(element).removeClassName('hidden');
break;
case ('hide'):
$(element).addClassName('hidden');
break;
}
},
/**
* Sets key differences loading indicator as on or off.
* Is the other function unused?
*/
setLoadingIndicator:function(element, value) {
switch (value) {
case 'show':
$(element).show();
break;
case 'hide' || undefined:
$(element).hide();
break;
}
},
/**
* Resets Key Differences.
*/
resetKeyDifferences: function()
{
// Remove old data.
var divWrapper = $("differences-wrapper");
var kids = divWrapper.immediateDescendants();
kids.each(function(e) {
e.remove();
});
// Create temp variables.
var car = null;
var x = 1;
var y = 5;
var z = 0;
var model = ATC.cs.research.ctr.model;
var isOEM = model.isOEM();
// Loop through all of the cars.
for (x = 1; x < y; x++)
{
// Get a car.
car = model.getCar(x);
// Skip empty columns.
if (car == null)
{
continue;
}
// If we are in the OEM view, then only get sponsored cars.
if (isOEM)
{
if (car.ctr.adType != 2)
{
continue;
}
}
// We got a car.
z++;
// box
var name = car.ctr.year + " " + car.ctr.make + " " + car.ctr.model + " " + car.ctr.style;
var spanBox = new Element('span').update(name);
var attBoxID = ["difference", x, "-box"].join('');
var divBox = new Element('div', {
id: attBoxID,
'class': 'box',
backgroundImage: 'url(/img/research/compare/bg-th.toggler-off.gif)'
});
divBox.insert(spanBox);
// header
var attHeaderID = ["difference", x, "-header"].join('');
var divHeader = new Element('div', {
id: attHeaderID,
'class': 'toggler',
column: x
});
divHeader.insert(divBox);
// loading indicator
var divInnerWrapper = new Element('div', {'class': 'inner-wrapper'});
var divLoading = new Element('div', {'class': 'loading'});
var imgLoading = new Element('img', {
'class': 'loading-img',
src: '/img/shared/ajax-loader.gif',
width: '108',
height: '33',
alt: 'Loading...',
title: 'Loading...'
});
var attLoadingIndicatorID = ['difference', x, '-loading-indicator'].join('');
var divLoadingIndicator = new Element('div', {
id: attLoadingIndicatorID
});
divLoadingIndicator.setStyle({display: 'none'});
divLoading.insert(imgLoading);
divInnerWrapper.insert(divLoading);
divLoadingIndicator.insert(divInnerWrapper);
// content
var attContentID = ["difference", x, "-content"].join("");
var divContent = new Element('div', {
id: attContentID,
'class': 'difference-content'
});
divContent.setStyle({display: 'none'});
// container
var attContainerID = ['difference', x, '-container'].join('');
var divContainer = new Element('div', {
id: attContainerID
});
divContainer.insert(divHeader);
divContainer.insert(divLoadingIndicator);
divContainer.insert(divContent);
// assembly
divWrapper.insert(divContainer);
// events
Event.observe(attHeaderID, 'click', ATC.cs.research.ctr.view.keyDifferencesEventHandler);
}
if (z == 0)
{
this.addNoKeyDifferences("Please select at least two vehicles to see Key Differences information.");
}
},
/**
* Event handler for key differences headers.
* @param {object} event the event that occurred.
*/
keyDifferencesEventHandler: function(event)
{
// Determine which column we're working with.
var element = event.target;
var strColumn = element.getAttribute("column");
while (strColumn == null)
{
element = element.parentNode;
strColumn = element.getAttribute("column");
}
var column = 0;
try
{
column = window.parseInt(strColumn);
}
catch(ex)
{
}
if ((column < 1) || (column > 4))
{
return;
}
// Get content element.
var arrContentID = ["difference", column, "-content"];
var attContentID = arrContentID.join("");
var divContent = $(attContentID);
if (divContent == null)
{
return;
}
// Get box element.
var arrBoxID = ["difference", column, "-box"];
var attBoxID = arrBoxID.join("");
var divBox = $(attBoxID);
if (divBox == null)
{
return;
}
// hide
if (divContent.style.display != "none")
{
divBox.setStyle({backgroundImage:'url(/img/research/compare/bg-th.toggler-off.gif)'});
if (Prototype.Browser.IE)
{
divContent.hide();
}
else
{
divContent.blindUp();
}
}
// show
else
{
// Update the toggle indicator.
divBox.setStyle({backgroundImage:'url(/img/research/compare/bg-th.toggler-on.gif)'});
// Get data if you don't have it.
var kids = divContent.immediateDescendants();
if (kids.length == 0)
{
var car = ATC.cs.research.ctr.model.getCar(column);
if (car.ctr.year < 1997)
{
var strMessage1997 = "Please note: Key differences information is only available for vehicles from 1997 to present year.";
var txtMessage1997 = document.createTextNode(strMessage1997);
var divMessage1997 = document.createElement("div");
divMessage1997.className = "differences-none box";
divMessage1997.appendChild(txtMessage1997);
divContent.appendChild(divMessage1997);
if (Prototype.Browser.IE)
{
divContent.show();
}
else
{
divContent.blindDown();
}
}
else
{
ATC.cs.research.ctr.controller.getKeyDifferences(column);
}
}
else
{
// Show the data.
if (Prototype.Browser.IE)
{
divContent.show();
}
else
{
divContent.blindDown();
}
}
// Do BI.
var biContentType = [ "e10au", "e10av", "e10aw", "e10awa" ];
var biContentEvent = biContentType[column-1];
ATC.utils.BIUtils.getBIEvent(biContentEvent);
}
},
/**
* Displays key differences data.
* @param {object} kd the key differences data to display
*/
displayKeyDifferences: function(kd)
{
// Exit if there are no results.
if (kd == null)
{
this.addNoKeyDifferences("There are no significant differences between these trims.");
return;
}
var column = kd.column;
var arrID = [ "difference", column, "-content" ];
var id = arrID.join("");
var divContent = $(id);
var divWrapper = document.createElement("div");
divWrapper.setAttribute("class", "inner-wrapper");
divContent.appendChild(divWrapper);
var differences = kd.differences;
var x = 0;
var y = differences.length;
for (x = 0; x < y; x++)
{
var difference = differences[x];
this.addKeyDifferencesContent(divWrapper, difference);
}
// Show the data.
if (Prototype.Browser.IE)
{
divContent.show();
}
else
{
divContent.blindDown();
}
},
/**
* Displays a message saying that there are no differences.
* Will be called when there is no difference data,
* usually because there are less than 2 cars being viewed.
* @param {string} reason the message to display
*/
addNoKeyDifferences: function(reason)
{
// Verify parameters.
if (reason == null)
{
return;
}
var divContainer = $("differences-wrapper");
var differencesNoneExists = divContainer.down('.differences-none');
if (differencesNoneExists) {
return;
}
var divNone = new Element('div', {
'class': 'differences-none box'
}).update(reason);
divContainer.appendChild(divNone);
},
/**
* Adds a loading indicator to Key Differences.
* @param {object} container the container to add to
* @param {number} column the column
*/
addKeyDifferencesLoadingIndicator: function(container, column)
{
// Verify parameters.
if (container == null)
{
return;
}
if (column == null)
{
return;
}
// wrapper
var divWrapper = document.createElement("div");
divWrapper.setAttribute("class", "inner-wrapper");
// loading
var divLoading = document.createElement("div");
divLoading.setAttribute("class", "loading");
// loading img
var imgLoading = document.createElement("img");
imgLoading.setAttribute("class", "loading-img");
imgLoading.setAttribute("src", "/img/research/configure/loading.gif");
imgLoading.setAttribute("width", "108");
imgLoading.setAttribute("height", "33");
imgLoading.setAttribute("alt", "Loading...");
imgLoading.setAttribute("title", "Loading...");
// assemble
divLoading.appendChild(imgLoading);
divWrapper.appendChild(divLoading);
container.appendChild(divWrapper);
},
/**
* Adds a content section to Key Differences.
* @param {object} container the container
* @param {object} diff a content array
*/
addKeyDifferencesContent: function(container, diff)
{
// Verify parameters.
if (container == null)
{
return;
}
if (diff == null)
{
return;
}
// Create temp variables.
var x = 0;
var y = 0;
// from.image
var imgFrom = new Element('img', {
src: diff.from.image.fileName,
width: diff.from.image.width,
height: diff.from.image.height,
'class': 'car',
alt: diff.from.image.caption,
title: diff.from.image.caption
});
// from.YearMakeModel
var strFromYearMakeModel = new String(diff.from.year) + " ";
strFromYearMakeModel += diff.from.make + " ";
strFromYearMakeModel += diff.from.model;
var spanFromYearMakeModel = new Element('span', {
'class': 'ymm'
}).update(strFromYearMakeModel);
// from.trim
var txtFromTrim = diff.from.trim;
var spanFromTrim = new Element('span', {
'class': 'trim'
}).update(txtFromTrim);
// from
var divFrom = new Element('div', {
'class': 'compared'
});
divFrom.appendChild(imgFrom);
divFrom.appendChild(spanFromYearMakeModel);
divFrom.appendChild(spanFromTrim);
// compared to
var divComparedTo = new Element('div', {
'class': 'compared-to'
}).update('Compared to');
// to.image
var imgTo = new Element('img', {
'class': 'car',
src: diff.to.image.fileName,
width: diff.to.image.width,
height: diff.to.image.height,
alt: diff.to.image.caption,
title: diff.to.image.caption
});
// to.YearMakeModel
var strToYearMakeModel = new String(diff.to.year) + ' ';
strToYearMakeModel += diff.to.make + " ";
strToYearMakeModel += diff.to.model;
var spanToYearMakeModel = new Element('span', {
'class': 'ymm'
}).update(strToYearMakeModel);
// to.trim
var strToTrim = diff.to.trim;
var spanToTrim = new Element('span', {
'class': 'trim'
}).update(strToTrim);
// to
var divTo = new Element('div', {
'class': 'compared'
});
divTo.appendChild(imgTo);
divTo.appendChild(spanToYearMakeModel);
divTo.appendChild(spanToTrim);
// from model trim
var strFromModelTrim = "";
strFromModelTrim += diff.from.model + " ";
strFromModelTrim += diff.from.trim;
// to model trim
var strToModelTrim = "";
strToModelTrim += diff.to.model + " ";
strToModelTrim += diff.to.trim;
// advantages h4
var strAdvantages = "";
strAdvantages += "Advantages of ";
strAdvantages += strFromModelTrim;
strAdvantages += " compared to ";
strAdvantages += strToModelTrim;
var h4Advantages = new Element('h4').update(strAdvantages);
// advantages ul
var ulAdvantages = new Element('ul');
var arrAdvantages = diff.advantages;
y = arrAdvantages.length;
for (x = 0; x < y; x++)
{
var s = arrAdvantages[x];
var li = new Element('li').update(s);
ulAdvantages.insert(li);
}
if (y == 0)
{
var s = "There are no significant differences between these trims.";
var li = new Element('li').update(s);
ulAdvantages.insert(li);
}
// disadvantages h4
var strDisadvantages = "";
strDisadvantages += "Disadvantages of ";
strDisadvantages += strFromModelTrim;
strDisadvantages += " compared to ";
strDisadvantages += strToModelTrim;
var h4Disadvantages = new Element('h4').update(strDisadvantages);
// disadvantages ul
var ulDisadvantages = new Element('ul');
var arrDisadvantages = diff.disadvantages;
y = arrDisadvantages.length;
for (x = 0; x < y; x++)
{
var s = arrDisadvantages[x];
var li = new Element('li').update(s);
ulDisadvantages.insert(li);
}
if (y == 0)
{
var s = "There are no significant differences between these trims.";
var li = new Element('li').update(s);
ulDisadvantages.insert(li);
}
// content
var divContent = new Element('div', {
'class': 'content clearfix'
});
divContent.insert(divFrom);
divContent.insert(divComparedTo);
divContent.insert(divTo);
// box
var divBox = new Element('div', {
'class': 'box'
});
divBox.appendChild(divContent);
divBox.appendChild(h4Advantages);
divBox.appendChild(ulAdvantages);
divBox.appendChild(h4Disadvantages);
divBox.appendChild(ulDisadvantages);
// cell difference
var divCellDifference = new Element('div', {
'class': 'cell difference'
});
divCellDifference.appendChild(divBox);
// container
container.appendChild(divCellDifference);
},
/**
* Opens a link in a new window.
* @param {string} url the url to open in a new window
*/
openNewWindow: function(url)
{
if (url == null)
{
return false;
}
// Window handle.
var win = null;
// Window name.
var name = "CTR";
// Set height and width.
var w = 630;
var h = 590;
// Center the window.
var t = (screen.height - h) / 2;
var l = (screen.width - w) / 2;
// Set parameters for popup.
var features = "";
features += "width=" + w;
features += ",height=" + h;
features += ",top=" + t;
features += ",left=" + l;
features += ",menubar=no,toolbar=no,location=no,directories=no,status=yes,resizable=yes,scrollbars=yes,channelmode=no";
// Open the window.
win = window.open(url, name, features);
if (win == null)
{
return false;
}
// Attempt to reset window size and location
// if we are reusing a window that is already open.
try
{
win.resizeTo(w, h);
}
catch(e)
{
}
try
{
win.moveTo(l, t);
}
catch(e)
{
}
// Bring the popup window to the foreground.
try
{
win.focus();
}
catch(e)
{
}
return false;
},
/**
* Opens a link in a new window.
* @param {string} url the url to open in a new window
*/
openOEMWindow: function(url)
{
if (url == null)
{
return false;
}
// Window handle.
var win = null;
// Window name.
var name = "OEM";
// Set height and width.
var w = screen.width * 0.75;
var h = screen.height * 0.75;
// Center the window.
var t = (screen.height - h) / 2;
var l = (screen.width - w) / 2;
// Set parameters for popup.
var features = "";
features += "width=" + w;
features += ",height=" + h;
features += ",top=" + t;
features += ",left=" + l;
features += ",menubar=no,toolbar=no,location=no,directories=no,status=yes,resizable=yes,scrollbars=yes,channelmode=no";
// Open the window.
win = window.open(url, name, features);
if (win == null)
{
return false;
}
// Attempt to reset window size and location
// if we are reusing a window that is already open.
try
{
win.resizeTo(w, h);
}
catch(e)
{
}
try
{
win.moveTo(l, t);
}
catch(e)
{
}
// Bring the popup window to the foreground.
try
{
win.focus();
}
catch(e)
{
}
return false;
},
/**
* Gets a URL that points to the Car Config Tool page.
* Adapted from StyleTransformer.java.
* @param car a car.
* @param zip a ZIP code
* @return a URL or "#" if any parameter is null.
*/
getCarConfigURL: function(car, zip)
{
// Verify parameters
if (car == null)
{
return "#";
}
if (zip == null)
{
return "#";
}
// base
var url = "/research/configure/optionselection.jsp";
// style_id
url += "?style_id=";
url += car.styleId;
// address
url += "&address=";
url += zip;
// Return result.
return url;
},
/**
* Gets a URL that points to a page that lists local listings.
* Adapted from StyleTransformer.java.
* @param car a car.
* @param zip a ZIP code
* @return a URL
* or "#" if car is null
* or a JavaScript function if zip is null.
*/
getLocalListingsURL: function(car, zip)
{
// Verify parameters
if (car == null)
{
return "#";
}
if (zip == null)
{
return "javascript:ATC.cs.research.ctr.view.showZipModal(true);";
}
var distance = 0; // this.getModelSearchUtilWrapper().findDistance(zip);
// base
var url = "/fyc/searchresults.jsp";
// start_year
url += "?start_year=";
url += car.year;
// end_year
url += "&end_year=";
url += car.year;
// model id
url += "&model_id=";
url += car.modelId;
// make1_desc
url += "&make1_desc=";
url += car.make;
// model1_desc
url += "&model1_desc=";
url += car.model;
// address
url += "&address=";
url += zip;
// distance
url += "&distance=";
url += distance;
// Return result.
return url;
},
/**
* Gets a URL that points to a page that lists special offers.
* Adapted from StyleTransformer.java.
* @param car a car.
* @param zip a ZIP code
* @return a URL
* or "#" if car is null
* or a JavaScript function if zip is null.
*/
getSpecialOffersURL: function(car, zip)
{
// Verify parameters
if (car == null)
{
return "#";
}
if (zip == null)
{
return "javascript:ATC.cs.research.ctr.view.showZipModal(true);";
}
var distance = 0; // this.getModelSearchUtilWrapper().findDistance(zip);
// base
var url = "/aws/results.jsp";
// awsp
url += "?awsp=";
url += "true";
// special_type
url += "&special_type=ALL";
// start_year
url += "&start_year=";
url += car.year;
// end_year
url += "&end_year=";
url += car.year;
// make
var make = (car.make == null) ? "" : car.make.toUpperCase();
url += "&make=";
url += make
// address
url += "&address=";
url += zip;
// distance
url += "&distance=";
url += distance;
// Return result.
return url;
},
showHide:function(type,hide,show)
{
switch (type) {
case('hide'):
$(hide).style.display = 'none';
$(show).style.display = 'block';
break;
case('show'):
$(hide).style.display = 'none';
$(show).style.display = 'block';
break;
}
},
/**
* Give feedback to the user when they add or change a car
* to let them know something is happening.
* @param column where to show it.
*/
feedbackAddChange: function(column, year, make, model)
{
var isOEM = ATC.cs.research.ctr.model.isOEM();
// Verify parameters.
if(column == null)
{
return;
}
if(year == null)
{
return;
}
if(make == null)
{
return;
}
if(model == null)
{
return;
}
var car =
{
"ctr":
{
"adType": 0,
"brandingStripeClass": "hide",
"changeButtonClass": "hide",
"column": column,
"hybridClass": "hidden",
"removeButtonClass": "hide",
"oem-height":"is-oem-height",
"year": year,
"make": make,
"model": model,
"sponsoredVehicleClass": "hide",
"images":
[
{
"caption": "Loading...",
"fileName": "/img/shared/ajax-loader.gif"
}
]
}
};
var overviewTemplate = new Template(unescape($F("template-overview-model-feedback")));
if(isOEM){
overviewTemplate = new Template(unescape($F("template-overview-model-feedback-oem")));
}
var overviewTarget = $('column-' + column);
var template = overviewTemplate.evaluate(car);
overviewTarget.replace(template);
overviewTarget.style.backgroundColor = "#000000";
overviewTarget.style.position = "absolute";
overviewTarget.style.opacity = ".5";
}
};
var Popup = Class.create();
Popup.prototype = {
initialize:function(options) {
this.options = {
url: '/',
resizable: '1',
width: 300,
height: 300,
location: 'no',
menubar: 'no',
status: 'no',
titlebar: 'no',
toolbar: 'no',
scrollbars: 'no'
}
Object.extend(this.options, options || {});
var t = (screen.height - this.options.height) / 2;
var l = (screen.width - this.options.width) / 2;
window.open(this.options.url, '', 'resizable=' + this.options.resizable + ',width=' + this.options.width + ',height=' + this.options.height + ",top=" + t + ",left=" + l + ",titlebar=" + this.options.titlebar + ",menubar=" + this.options.menubar + ",toolbar=" + this.options.toolbar + ",status=" + this.options.status + ",location=" + this.options.location + ",scrollbars=" + this.options.scrollbars);
}
}
// Create an instance.
ATC.cs.research.ctr.view = new View();