Formula One hits Jersey Shore

Formula One hits Jersey Shore

by August 31, 2012

Thirteen time Grand Prix winner and Red Bull ambassador, David Coulthard has taken a promotional hot lap of the streets of New Jersey and the western part of New York in last year’s world championship winning Red Bull RB7 Formula One car.

A Grand Prix at the Port Imperial Circuit is set to be added to the F1 calendar in 2014; the 5.1km circuit taking in the Hudson River waterfront and long straights through residential areas.

Coulthard let the Formula One missile fly as stunned observers grabbed what is likely the first of many times they’ll see Grand Prix cars blast through their neighbourhood.

A highlight of the run, was a raucous dash through the famous Lincoln Tunnel, that lies under the Hudson River, connecting New Jersey with Manhattan. Pity it won’t be part of the track layout as the scream of the RB7’s 2.4-litre V8 bouncing off the tiled walls is sensational.

(function () {
/**
* Initializes a controller handles a gallery as well as its fullscreen version
*/
var MotoringGalleryController = function () {
var fullscreenActive = false;

var gallery = new MotoringGallery(
$(‘.motoring-gallery’),
‘smallGallery’,
true,
false,
{
onFullscreenClick: function () {
openFullscreen();
},
onShroudClick: function () {

},
onEscPress: function () {

}
});

var fullscreenGallery;

var openFullscreen = function () {
fullscreenGallery = new MotoringGallery(
$(‘.motoring-gallery-full’),
‘fullGallery’,
false,
true,
{
onFullscreenClick: function () {
closeFullscreen();
},
onShroudClick: function () {
closeFullscreen();
},
onEscPress: function () {
closeFullscreen();
}
},
gallery.GalleryPos);

$(‘.motoring-gallery-full’).show();

fullscreenGallery.Init();
};

var closeFullscreen = function () {
if (fullscreenGallery) {
fullscreenGallery.Destroy();
fullscreenGallery = null;
}

$(‘.motoring-gallery-full’).hide();
};

this.Init = function () {
$(‘body’).append($(‘.motoring-gallery-full’).detach()); // put at the end of document so that the shroud displays correctly

gallery.Init();
}

return this;
};

/**
* Initializes a gallery
* @param {object} $ctx the parent jquery object to use as a context for all selectors
* @param {string} ns the namespace to use for events and that
* @param {boolean} push should this gallery push its state into the url/history
* @param {object} events an object containing the following functions: onFullscreenClick, onShroudClick, onEscPress
*/
var MotoringGallery = function ($ctx, ns, push, bigImages, events, startPos) {
var self = this;

this.GalleryPos = startPos || 0;

var $wrapper = $(‘#gallery_caption’, $ctx),
$innerWrapper = $(‘ul’, $ctx),
$contentWrapper = $(‘#gallery_caption .content-wrapper’, $ctx),
$caption = $(‘#gallery_caption .caption’, $ctx),
$showLabel = $(‘#gallery_caption .show-label-js’, $ctx),
$hideLabel = $(‘#gallery_caption .hide-label-js’, $ctx),
$captionControls = $(‘#gallery_caption .controls’, $ctx),
$captionToggle = $(‘#gallery_caption .toggle-caption’, $ctx),
$counterCurrent = $(‘#gallery_counter_current’, $ctx),
$counterTotal = $(‘#gallery_counter_total’, $ctx),
$image = $(‘#gallery_image’, $ctx),
$next = $(‘.next’, $ctx),
$prev = $(‘.prev’, $ctx),
$loader = $(‘.loader-slide’, $ctx),
$fullscreenToggle = $(‘.toggle-fullscreen’, $ctx);

var eventNamespace = ns ? ‘.’ + ns : ”;

var galleryState = “galleryOpen”;
var galleryPreviousImage, galleryTitle;
var galleryCompleted = false;

var galleries = [{“Image”:”http://cdn.assets.cougar.bauer-media.net.au/imagegen/max/658/-/s3/digital-cougar-assets/Motoring/2014/01/15/7829/RBR-1.jpg”,”FullscreenImage”:”http://cdn.assets.cougar.bauer-media.net.au/imagegen/max/1422/-/s3/digital-cougar-assets/Motoring/2014/01/15/7829/RBR-1.jpg”,”ImageAltText”:”FORMULA ONE, NEW JERSEY, 2014, RED BULL, LINCOLN TUNNEL VIDEO, DAVID COULTHARD”,”ImageCaption”:”Does Lady Liberty approve of F1 burnouts?”,”OriginalImage”:”http://cdn.assets.cougar.bauer-media.net.au/s3/digital-cougar-assets/Motoring/2014/01/15/7829/RBR-1.jpg”,”UpdateDate”:”2014-07-16T11:41:56″,”AssetNo”:1,”PageTitle”:”Formula One hits Jersey Shore”,”UrlName”:””},{“Image”:”http://cdn.assets.cougar.bauer-media.net.au/imagegen/max/658/-/s3/digital-cougar-assets/Motoring/2014/01/15/7830/RBR-2.jpg”,”FullscreenImage”:”http://cdn.assets.cougar.bauer-media.net.au/imagegen/max/1422/-/s3/digital-cougar-assets/Motoring/2014/01/15/7830/RBR-2.jpg”,”ImageAltText”:”FORMULA ONE, NEW JERSEY, 2014, RED BULL, LINCOLN TUNNEL VIDEO, DAVID COULTHARD”,”ImageCaption”:”Red Bull F1 hits New York’s Lincoln Tunnel”,”OriginalImage”:”http://cdn.assets.cougar.bauer-media.net.au/s3/digital-cougar-assets/Motoring/2014/01/15/7830/RBR-2.jpg”,”UpdateDate”:”2014-07-08T20:07:59″,”AssetNo”:2,”PageTitle”:”Formula One hits Jersey Shore | Image 1 | MOTOR”,”UrlName”:”image-1″},{“Image”:”http://cdn.assets.cougar.bauer-media.net.au/imagegen/max/658/-/s3/digital-cougar-assets/Motoring/2014/01/15/7831/RBR-3.jpg”,”FullscreenImage”:”http://cdn.assets.cougar.bauer-media.net.au/imagegen/max/1422/-/s3/digital-cougar-assets/Motoring/2014/01/15/7831/RBR-3.jpg”,”ImageAltText”:”FORMULA ONE, NEW JERSEY, 2014, RED BULL, LINCOLN TUNNEL VIDEO, DAVID COULTHARD”,”ImageCaption”:”Scotsman David Coulthard at the wheel”,”OriginalImage”:”http://cdn.assets.cougar.bauer-media.net.au/s3/digital-cougar-assets/Motoring/2014/01/15/7831/RBR-3.jpg”,”UpdateDate”:”2014-07-08T20:08:02″,”AssetNo”:3,”PageTitle”:”Formula One hits Jersey Shore | Image 2 | MOTOR”,”UrlName”:”image-2″}];

// Set older browser mode
var hashOnly = (typeof history.pushState === “undefined”);

if (push) {
// Retrieve location on back/forward btn click
$(window).on(‘popstate’ + eventNamespace, function(event) {
if (history.state != null) {
self.GalleryPos = history.state.id;
_setGalleryImage();
_setGalleryNextPrevDisplay();
}
});

// Retrieve location on back/forward btn click (older browsers)
if (hashOnly) {
$(window).on(‘hashchange’ + eventNamespace, function() {
_getHashLocation();
});
}
}

/**
* PRIVATE HELPERS
*/

function _getHashLocation() {
if (!push) { return; }

// Check for hash in Url, if present show matching gallery image and adjust links
if (location.hash != “”) {
var hashImg = location.hash.replace(‘#’, ”);
var newGalleryPos = 0;

for (var i = 0; i 0) {
location.href = document.URL.substring(0, itemIndex) + ‘#’ + document.URL.substring(itemIndex);
}
}
}

function _preloadImages() {
if (self.GalleryPos < galleries.length – 1) {
var nextImg = new Image();
nextImg.src = bigImages ?
galleries[self.GalleryPos + 1].FullscreenImage :
galleries[self.GalleryPos + 1].Image;
}

if (self.GalleryPos != 0) {
var prevImg = new Image();
prevImg.src = bigImages ?
galleries[self.GalleryPos – 1].FullscreenImage :
galleries[self.GalleryPos – 1].Image;
}
}

// Set gallery prev/next button visibility
function _setGalleryNextPrevDisplay() {
if (self.GalleryPos = galleries.length – 1) {
$next.hide();
} else {
$next.show();
}
}

function _setHistory() {
if (!push) { return; }

var galItem = galleries[self.GalleryPos];

// Set new Url
if (hashOnly) {
// Older browsers use #imageName. Set a default hash value for first image to avoid skip to top of page
location.hash = (galItem.UrlName == “”) ? “image-0″ : galItem.UrlName;
} else {
// Use replaceState for modern browsers (so that the back button goes to the previous page, not the previous image)
history.replaceState({ id: self.GalleryPos }, galItem.NodeName, ‘http://www.motormag.com.au/news/1208/formula-one-hits-jersey-shore/’ + galItem.UrlName);
}
}

function _trackGalleryInteraction() {
if (galleries != null && galleries.length > 0) {
var galItem = galleries[self.GalleryPos];

if (window.dataLayer) {
window.dataLayer.push({
‘event’: galleryState,
‘eventInfo’: {
‘galleryName’: galleryTitle,
‘prevImage’: galleryPreviousImage,
‘currImage’: bigImages ?
galItem.FullscreenImage :
galItem.Image,
‘currImageNo’: self.GalleryPos + 1,
‘totalImages’: galleries.length
}
});
}
}
}

function _setGalleryState(currentState) {
galleryState = currentState;
_trackGalleryInteraction();
}

function _setGalleryImage() {
var galItem = galleries[self.GalleryPos];

// set image to nothing to fix the ‘no load event’ browser bug: https://code.google.com/p/chromium/issues/detail?id=7731
$image.attr(‘src’, ”);

// Set gallery image, counter, total, alt and caption
$image.attr(‘src’, bigImages ?
galItem.FullscreenImage :
galItem.Image).attr(‘alt’, galItem.ImageAltText);

document.title = galItem.PageTitle;

self.UpdateCaption(galItem.ImageCaption);

$counterCurrent.text(self.GalleryPos + 1);
$counterTotal.text(galleries.length);

if (self.GalleryPos >= galleries.length – 1 && !galleryCompleted) {
galleryCompleted = true;
_setGalleryState(“galleryComplete”);
}
_setGalleryState(“galleryImageChange”);
}

function _presizeImage(imgSrc) {
if (!bigImages) { return; }

var i = new Image;
i.src = imgSrc;

var iw = i.width;
var ih = i.height;

var sw = $(window).width();
var sh = $(window).height();

var w;
var h;

var m = .8; // margin modifier

// do sizes based on the bigger side
if (iw > ih) {
if (iw > sw) {
w = sw * m;
} else {
w = iw;
}

h = w * (ih / iw);
} else {
if (ih > sh) {
h = sh * m;
} else {
h = ih;
}

w = h * (iw / ih);
}

// correct when window is an odd shape i.e. letterboxed so the h doesnt fit
if (h > sh * m) {
var r = w / h;

h = sh * m;
w = h * r;
}

if (w > sw * m) {
var r = h / w;

w = sw * m;
h = w * r;
}

$image.css({
‘width’: w + ‘px’,
‘height’: h + ‘px’
});

$innerWrapper.css({
‘top’: ((sh – h) * .5) + ‘px’
});
}

function _resizeImage(visOnly) {
if ((visOnly &&
$image.is(“:visible”)) ||
!visOnly) {

_presizeImage($image.attr(‘src’));
}
}

function _startLoading() {
if (!$loader.length) { return; }

$image.hide();

_positionLoader();
$loader.show();
}

function _stopLoading() {
$loader.hide();
$image.show();
}

function _positionLoader() {
$innerWrapper.css({
‘top’: (($(window).height() – $loader.height()) * .5) + ‘px’
});
}

function _hideCaption() {
$contentWrapper.slideUp({
done: function () {
$contentWrapper.css({ ‘overflow-y’: ” });
}
});

$hideLabel.hide();
$showLabel.show();
}

function _showCaption() {
_resizeCaption();

$contentWrapper.slideDown({
done: function () {
$contentWrapper.css({ ‘overflow-y’: ‘auto’ });
}
});

$showLabel.hide();
$hideLabel.show();
}

function _hideCaptionControl() {
$captionToggle.hide();
}

function _showCaptionControl() {
$captionToggle.show();
}

function _resizeCaption(overflow) {
var hPad = $contentWrapper.outerHeight() – $contentWrapper.height();
var hCtr = $captionControls.outerHeight(true);
var hMax = $image.innerHeight();

$contentWrapper.css({ ‘max-height’: (hMax – (hPad + hCtr)) + ‘px’ });

if (overflow) {
$contentWrapper.css({ ‘overflow-y’: ‘auto’ });
}
}

/**
* PUBLIC FUNCTIONS
*/

/**
* Moves the current gallery image a given number of frames
* @param {number} dir the number of frames to move, can be negative
*/
this.GalleryMove = function (dir) {
// Check if gallery CAN be moved
if ((dir 0 && self.GalleryPos == galleries.length – 1)) return;
// save current image as previous before changing with a different one
galleryPreviousImage = bigImages ?
galleries[self.GalleryPos].FullscreenImage :
galleries[self.GalleryPos].Image;
self.GalleryPos += dir;

_setGalleryImage();
_setGalleryNextPrevDisplay();
_preloadImages();
_setHistory();
}

/**
* Changes the text of the gallery caption to the supplied value and
* hides/shows the toggle button depending on whether the caption exists or not
* @param {string} caption the caption text to replace the current caption with
*/
this.UpdateCaption = function (caption) {
$caption.text(caption);

if (caption) {
_resizeCaption(true);
_showCaptionControl();
} else {
$wrapper.removeClass(‘open’);
_hideCaption();
_hideCaptionControl();
}
}

/**
* Toggles the displaying of the caption
*/
this.ToggleCaption = function () {
var open = !$wrapper.hasClass(‘open’);

$wrapper.toggleClass(‘open’);

if (open) {
_showCaption();
} else {
_hideCaption();
}
}

this.Init = function () {
self.GalleryMove(0); // correcting for fullscreen gallery that hasnt pushed state

_startLoading();

// Bind gallery control to gallery next/prev buttons
function onNextPrevClick(event) {
_startLoading();

(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
self.GalleryMove(($(this).attr(‘class’) == ‘prev’) ? -1 : 1);
}

$next.on(‘click’ + eventNamespace, onNextPrevClick);
$prev.on(‘click’ + eventNamespace, onNextPrevClick);

// Initialise prev/nxt buttons and preload on first page load
if (galleries != null && galleries.length > 0) {
_preloadImages();

// initialize previous image history
galleryPreviousImage = “”;
galleryTitle = “Formula One hits Jersey Shore”;
_setGalleryState(“galleryOpen”);
}

$captionToggle.on(‘click’ + eventNamespace, function() {
self.ToggleCaption();
});

$fullscreenToggle.on(‘click’ + eventNamespace, function () {
events.onFullscreenClick();
});

$ctx.on(‘click’ + eventNamespace, function (e) {
if ($(e.target).is($ctx)) { // only close if the shroud is clicked
events.onShroudClick();
}
});

$image.on(‘load’ + eventNamespace, function () {
_resizeImage();
_stopLoading();
});

$(window).on(‘keyup’ + eventNamespace, function (e) {
if (e.which === 27) {
events.onEscPress();
}
});

$(window).on(‘resize’ + eventNamespace, function (e) {
_resizeImage(true);
});

if (push) {
// Check for # location (older browsers)
_getHashLocation();

// If pushState available, update current history item with galleryPos
if (!hashOnly) {
var galItem = galleries[self.GalleryPos];
history.replaceState({ id: self.GalleryPos }, galItem.NodeName, ‘http://www.motormag.com.au/news/1208/formula-one-hits-jersey-shore/’ + galItem.UrlName);
}
}
};

this.Destroy = function () {
$(window).off(eventNamespace);
$next.off(eventNamespace);
$prev.off(eventNamespace);
$captionToggle.off(eventNamespace);
$fullscreenToggle.off(eventNamespace);
$ctx.off(eventNamespace);
$image.off(eventNamespace);
};

return this;

};

var galleryController = new MotoringGalleryController();

galleryController.Init();
})();