/*******************************************************************************
Jenny Holzer Xenon Projection Website, application.js (09/29/2008)
(c) 2008 BuzaMoto. All rights reserved.
*******************************************************************************/
// ----------------------------------------------------------------------------
// GLOBALS
// ----------------------------------------------------------------------------
var infoBoxTimer = null,
INFOBOX_DURATION = 5000,
zoomImages = {},
zoomImageIds = [],
zoomImageIndex = 0,
video = null;
var zoomImageFrameTemplate = '\
\
\
\
\
![]() \
\
|
\
';
var zoomVideoFrameTemplate = new Template('\
\
');
var zoomImageFrameCreditTemplate = '\
\
\
\
\
![]() \
\
|
\
';
var zoomVideoFrameCreditTemplate = new Template('\
\
');
Position.getWindowSize = function(w) {
var width, height;
w = w ? w : window;
width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
return { width: width, height: height };
}
// ----------------------------------------------------------------------------
// UTILITIES
// ----------------------------------------------------------------------------
function setResize() {
var frame = $('zoomImageFrame');
if (frame)
frame.setStyle({height: Position.getWindowSize().height+'px'});
}
function createFrame() {
var zoomImageFrame = document.createElement('div');
zoomImageFrame.setAttribute('id', 'zoomImageFrame');
zoomImageFrame.setAttribute('style', 'display: none;');
zoomImageFrame.innerHTML = zoomImageFrameTemplate;
document.body.appendChild(zoomImageFrame);
$('zoomImageCityIndex').update(CITY_TITLE);
$('zoomImageCreditsLink').href = CREDIT_PATH;
$('zoomImageSitesLink').href = SITE_PATH;
$('zoomImageFrame').hide();
}
function createFrameCredit() {
var zoomImageFrame = document.createElement('div');
zoomImageFrame.setAttribute('id', 'zoomImageFrame');
zoomImageFrame.setAttribute('style', 'display: none;');
zoomImageFrame.innerHTML = zoomImageFrameCreditTemplate;
document.body.appendChild(zoomImageFrame);
$('zoomImageCityIndex').update(CITY_TITLE);
$('zoomImageCreditsLink').href = CREDIT_PATH;
$('zoomImageSitesLink').href = SITE_PATH;
$('zoomImageFrame').hide();
}
function displayZoomImage(img_ref) {
// lets load image
var img_obj = $(img_ref);
if (!zoomImages[img_obj.id]) {
zoomImages[img_obj.id] = new Image();
var img_name = "";
if (img_obj.src.match(/thumb/))
img_name = img_obj.src.substring(0, img_obj.src.length-10);
else
img_name = img_obj.src.substring(0, img_obj.src.length-4);
zoomImages[img_obj.id].src = img_name + '-large.jpg';
zoomImages[img_obj.id].onload = function() { $('zoomImageContainer').setStyle({width: zoomImages[img_obj.id].width+'px'}) };
}
// setup frame
var frame = $('zoomImageFrame');
if (!frame) {
if (PAGE_TYPE == 'sites')
createFrame();
else
createFrameCredit();
frame = $('zoomImageFrame');
}
frame.setStyle({height: Position.getWindowSize().height+'px'});
// load image
var imgContainer = $('zoomImageContainer');
if (!imgContainer) {
if (PAGE_TYPE == "sites")
frame.update(zoomImageFrameTemplate);
else
frame.update(zoomImageFrameCreditTemplate);
imgContainer = $('zoomImageContainer');
$('zoomImageCityIndex').update(CITY_TITLE);
$('zoomImageCreditsLink').href = CREDIT_PATH;
$('zoomImageSitesLink').href = SITE_PATH;
}
if (imgContainer.visible()) imgContainer.hide();
var img = $('zoomImage');
img.onclick = function() { nextZoomImage(); this.blur(); };
img.src = zoomImages[img_obj.id].src;
// show frame
zoomImageIndex = getIndexOf(img_ref);
if (zoomImageIndex >= 0) {
$('zoomImageContainer').setStyle({width: zoomImages[img_obj.id].width+'px'});
if (!frame.visible()) {
new Effect.Parallel([
new Effect.Appear(frame, { sync: true }),
new Effect.Opacity($('content'), { sync: true, to: 0.0 })
], {
duration: 0.25,
afterFinish: function() { loadZoomImage(zoomImages[img_obj.id], imgContainer); }
});
} else {
loadZoomImage(zoomImages[img_obj.id], imgContainer);
}
}
}
function getIndexOf(id) {
for (var i = 0, len = zoomImageIds.length; i < len; ++i) {
if (zoomImageIds[i].id == id) return i;
}
return -1;
}
function loadZoomImage(img, imgContainer) {
if (img.complete) {
new Effect.Appear(imgContainer, { duration: 0.5 });
} else {
window.setTimeout(function() { loadZoomImage(img, imgContainer); }, 500);
}
}
function closeZoomFrame() {
var imgContainer = $('zoomImageFrame');
if (video) video.pause();
new Effect.Parallel([
new Effect.Opacity($('content'), { sync: true, to: 1.0 }),
new Effect.Fade(imgContainer, { sync: true })
], {
duration: 0.25,
afterFinish: function() {
imgContainer.update();
}
});
}
function displayZoomVideo(videoSrc, videoID) {
zoomImageIndex = getIndexOf(videoID);
if (zoomImageIndex > -1) {
var frameWrapper = $('zoomImageFrame');
if (!frameWrapper) {
createFrame();
frameWrapper = $('zoomImageFrame');
}
if (PAGE_TYPE == 'sites') {
frameWrapper.update(zoomVideoFrameTemplate.evaluate({
videoID: videoID,
videoSrc: videoSrc
}));
} else {
frameWrapper.update(zoomVideoFrameCreditTemplate.evaluate({
videoID: videoID,
videoSrc: videoSrc
}));
}
$('zoomImageCityIndex').update(CITY_TITLE);
$('zoomImageCreditsLink').href = CREDIT_PATH;
new Effect.Parallel([
new Effect.Appear(frameWrapper, { sync: true }),
new Effect.Opacity($('content'), { sync: true, to: 0.0 })
], {
duration: 0.25,
afterFinish: function() {
window.setTimeout(function() {
video = VideoJS.setup(videoID, { flashPlayerVersion: 9, flashPlayer: 'flowplayer', autoPlay: true });
}, 50);
}
});
}
}
function nextZoomImage() {
var currentImageType = zoomImageIds[zoomImageIndex].type;
zoomImageIndex++;
if (zoomImageIndex >= zoomImageIds.length) zoomImageIndex = 0;
var imgContainer;
if (currentImageType == 'image') {
imgContainer = $('zoomImageContainer');
} else {
imgContainer = $('video-wrapper');
}
new Effect.Fade(imgContainer, {
duration: 0.25,
afterFinish: function() {
if (zoomImageIds[zoomImageIndex].type == 'image')
displayZoomImage(zoomImageIds[zoomImageIndex].id);
else {
$('zoomImageFrame').update();
displayZoomVideo(zoomImageIds[zoomImageIndex].src, zoomImageIds[zoomImageIndex].id);
}
}
});
}
function prevZoomImage() {
var currentImageType = zoomImageIds[zoomImageIndex].type;
zoomImageIndex--;
if (zoomImageIndex < 0) zoomImageIndex = zoomImageIds.length - 1;
var imgContainer;
if (currentImageType == 'image') {
imgContainer = $('zoomImageContainer');
} else {
imgContainer = $('video-wrapper');
}
new Effect.Fade(imgContainer, {
duration: 0.25,
afterFinish: function() {
if (zoomImageIds[zoomImageIndex].type == 'image')
displayZoomImage(zoomImageIds[zoomImageIndex].id);
else {
$('zoomImageFrame').update();
displayZoomVideo(zoomImageIds[zoomImageIndex].src, zoomImageIds[zoomImageIndex].id);
}
}
});
}
function showInfoBox(action) {
var infoBox = $('footer-popup');
if (action != 'show' && action != 'hide')
return;
else {
switch(action) {
case 'show':
if (infoBoxTimer) {
window.clearTimeout(infoBoxTimer);
infoBoxTimer = window.setTimeout(function() {showInfoBox('hide');}, INFOBOX_DURATION);
} else {
infoBoxTimer = window.setTimeout(function() {showInfoBox('hide');}, INFOBOX_DURATION);
if (!infoBox.visible()) {
new Effect.Parallel([
new Effect.Morph('footer-wrapper', {
style: {
background: '#efefef'
},
synch: true
}),
new Effect.BlindDown(infoBox, {synch: true})
], {
duration: 0.8
});
}
}
break;
case 'hide':
new Effect.Parallel([
new Effect.Morph('footer-wrapper', {
style: {
background: '#fff'
},
synch: true
}),
new Effect.BlindUp(infoBox, {synch: true})
], {
duration: 0.8,
afterFinish: function() { infoBoxTimer = null; }
});
break;
}
}
}
// ----------------------------------------------------------------------------
// ONLOAD
// ----------------------------------------------------------------------------
Event.observe(window, 'load', function() {
setResize();
var delay = 0;
$$(".autoload").each(function(module) {
window.setTimeout(function() {
new Effect.Appear(module, {duration: 0.5});
}, ++delay*50);
});
// collect zoomImages
$$(".zoomImage").each(function(img) {
zoomImageIds.push({ id: img.id, type: 'image' });
});
// collect zoom
$$(".zoomVideo").each(function(video) {
zoomImageIds.push({ id: "video-"+video.id.split("_").last(), type: 'video', src: video.getAttribute('alt') });
});
});
Event.observe(window, 'resize', function() { setResize(); });