Your IP : 104.23.197.122
var MAX_VIDEO_WIDTH = 1024;
var TOP_METADATA_HEIGHT_PCT = 14;
var MIN_METADATA_HEIGHT_PCT = 15;
var FANCY_SCROLLBAR = false;
var MEDIA_INFO_ALPHA = 1.0;
var MEDIA_INFO_BORDER_PX = 2;
var VIDEO_PLAYER_MENU_HEIGHT = 20;
var SHOW_VIDEO_MENU = true;
var PLAYING_MEDIA_CLASS = "playing";
var HOVER_MEDIA_CLASS = "hovered";
var PLAYER_READY_CLASS = "ready";
var PLAYER_CANVAS_CLASS = "jp-player";
var PLAYER_MENU_CLASS = "jp-gui";
var PLAYER_CLOSER_CLASS = "jp-close-btn";
var PLAYER_MOBILE_PRESSPLAY_CLASS = "jp-mobile-pressplay-btn";
var MEDIA_NAV_CLASS = "slidenav";
var MEDIA_NAV_SELECTOR = ".metadata ."+MEDIA_NAV_CLASS;
var BASE_URL = $(location).attr('protocol')+"//"+$(location).attr('host');
var LIQUID_WIDTH_PCT = 100;
var INTER_MEDIA_SPACING = 10;
var LOADING_MEDIA_CLASS = "loading";
var HASH_PREFIX = "#!/";
var RIGHT_WHITESPACE_WIDTH_PCT = 8;
var SLIDE_TRANSITION_SPEED = 500;
var VIDEO_PLAYER_CONTAINER_PREFIX = "jp_container_";
var VIDEO_PLAYER_PREFIX = "jp_player_";
var jScrollbar = null;
var aligningMedia = false;
var showingMedia = false;
var currentMediaId = null;
var currentMediaTimer = null;
function initPlayers()
{
$('#page #work .media').each(function(index) {
var player = $(this);
player.find('.preview').append('<a class="play-btn"></a>');
});
$('.media .preview').click(function() {
window.location.hash = HASH_PREFIX+$(this).parent().attr('id');
});
}
/**
* Main entry function when media is clicked
*/
function showMedia(media)
{
media.find('.lazy').trigger("appear");
alignMedia(media);
setTimeout(function() {
showMediaInfo(media);
}, 200);
setTimeout(function() {
playMedia(media);
}, 0);
}
function alignMedia(media)
{
aligningMedia = true;
showingMedia = false;
$('body').scrollTo(
media,
500,
{
axis: 'y',
offset: getMediaOffset()*-1,
easing: 'easeOutExpo',
onAfter: function() {
//after this timeout, we're done aligning (slow systems take longer, this is a trial and error value)
setTimeout(function() {
aligningMedia = false;
}, 3000);
}
}
);
}
function showMediaInfo(media)
{
var mediaInfoTop = $('#media-info-top');
var mediaInfoBottom = $('#media-info-bottom');
var mediaPanelTop = media.find(".metadata-top");
var mediaPanelBottom = media.find(".metadata-bottom");
var alphaFill = $("<div class=\"alpha-fill\"></div>").fadeTo(0, MEDIA_INFO_ALPHA);
if (mediaPanelTop) {
mediaInfoTop.empty().append(alphaFill.clone()).append(mediaPanelTop.clone());
}
if (mediaPanelBottom) {
mediaInfoBottom.empty().append(alphaFill.clone()).append(mediaPanelBottom.clone());
}
var mediaOffset = getMediaOffset();
var mediaInfoTopHeight = mediaOffset-INTER_MEDIA_SPACING;
mediaInfoTop.height(mediaInfoTopHeight);
var mediaInfoTopTop = media.position().top-mediaInfoTopHeight-INTER_MEDIA_SPACING;
mediaInfoTop.css("top", mediaInfoTopTop);
//including menu
var mediaHeight = media.height();
//only video
var videoHeight = $('.jp-video').height();
mediaHeight = videoHeight/*+VIDEO_PLAYER_MENU_HEIGHT*/;
var mediaInfoBottomFix = 1;
mediaInfoBottom.height($(window).height()-mediaInfoTop.height()-mediaHeight-INTER_MEDIA_SPACING+mediaInfoBottomFix);
mediaInfoBottom.css("top", mediaInfoTopTop + mediaInfoTopHeight + INTER_MEDIA_SPACING + mediaHeight + INTER_MEDIA_SPACING - mediaInfoBottomFix);
mediaInfoTop.fadeTo(0,0).css('visibility','visible').fadeTo(600, 1.0);
// Check if current media is the 'header', in that case don't show the footer !!
var currId = window.location.hash.substring(HASH_PREFIX.length);
if (currId && currId.length>0 && currId!='header') {
mediaInfoBottom.fadeTo(0,0).css('visibility','visible').fadeTo(600, 1.0);
}
showingMedia = media.attr('id');
}
function getMediaOffset()
{
return Math.ceil($(window).height()*(TOP_METADATA_HEIGHT_PCT/100.0));
}
function playMedia(media)
{
var preview = media.find(".preview");
var content = media.find(".content");
//has z-index below the preview, do prepare this first
if (content) {
var slideshow = $('#slideshow').clone().remove('.slide').css('display', 'block');
content.empty().append(slideshow);
var prevBtn = $('<a class="slideshow-btn slideshow-prev-btn" href="javascript: void(0);" />');
var nextBtn = $('<a class="slideshow-btn slideshow-next-btn" href="javascript: void(0);" />');
var slides = content.attr('media').split(",");
for(var i=0;i<slides.length; i++) {
var s = $.trim(slides[i]);
//note: jPlayer requires us to do this here (need it in the DOM before contruction)
var slide = $("<div class=\"slide\" />");
slideshow.append(slide);
var hasPrev = i>0;
var hasNext = i<slides.length-1;
if (hasPrev) {
slide.append(prevBtn.clone());
}
if (hasNext) {
slide.append(nextBtn.clone());
}
if (s.toLowerCase().indexOf(".jpg")<0 && s.toLowerCase().indexOf(".png")<0) {
var noMenuMediaHeight = media.height();
/*
if (SHOW_VIDEO_MENU) {
media.animate({
height: media.height()+VIDEO_PLAYER_MENU_HEIGHT
}, 200);
}
*/
var playerContainer = $('#jp_container_skel').clone().css('display', 'block');
var playerContainerId = VIDEO_PLAYER_CONTAINER_PREFIX+i;
playerContainer.attr("id", playerContainerId);
slide.append(playerContainer);
var player = playerContainer.find('.'+PLAYER_CANVAS_CLASS);
player.attr("id", VIDEO_PLAYER_PREFIX+i);
//we need this, because the counter variable proceeds and the ready function is lazily loaded
player.attr("media", BASE_URL+s);
player.attr("poster", preview.children('img')[0].src);
player.attr("hasNext", hasNext?1:0);
player.jPlayer({
//DEBUG
//errorAlerts: true,
//warningAlerts: true,
ready: function () {
var player = $(this);
var preview = player.closest('.content').siblings('.preview');
player.jPlayer("setMedia", {
m4v: player.attr('media')+".mp4",
webmv: player.attr('media')+".webm",
ogv: player.attr('media')+".ogv",
poster: player.attr('poster')
});
preview.children('img').hide();
var loading = $('<div class="'+LOADING_MEDIA_CLASS+'"></div>');
preview.append(loading);
preview.fadeIn(100);
player.bind($.jPlayer.event.play, function(e) {
//the preview has z-index above the player: just let it fade away
preview.fadeOut(500, function() {
//this helps the stopAll() really stop, even if we're still aligning according to the timeout
aligningMedia = false;
});
var media = $(this).closest('.media');
media.find('.'+PLAYER_MOBILE_PRESSPLAY_CLASS).fadeOut(100);
if (media && media.hasClass(HOVER_MEDIA_CLASS)) {
showMediaControls(media);
}
else {
hideMediaControls(media);
}
});
player.bind($.jPlayer.event.ended, function(e) {
var player = $(this);
if (player.attr('hasNext')==1) {
player.closest('.slide').children('.slideshow-next-btn').click();
}
else {
stopAllMedia();
}
});
if($.jPlayer.platform.tablet || $.jPlayer.platform.mobile) {
preview.fadeOut(0);
media.find('.'+PLAYER_MOBILE_PRESSPLAY_CLASS).fadeIn(300);
}
else {
player.jPlayer("play");
}
player.addClass(PLAYER_READY_CLASS);
},
cssSelectorAncestor: "#"+playerContainerId,
cssSelector: {
videoPlay: "",
stop: "",
mute: "",
unmute: "",
volumeMax: "",
duration: "",
fullScreen: "",
restoreScreen: "",
repeat: "",
repeatOff: ""
},
solution: "flash,html",
supplied: "m4v,webmv,ogv",
size: {
width: media.width(),
height: noMenuMediaHeight
},
preload: "auto",
swfPath: "/res-static/swf/jplayer",
//backgroundColor: "#000000",
backgroundColor: "#FFFFFF",
wmode: "opaque"
});
} //ends .video selector
else if (s.toLowerCase().indexOf(".jpg")<0 || s.toLowerCase().indexOf(".png")<0) {
//note: this preloads the image as well
var img = $('<img />').attr('src', BASE_URL+s);
slide.append(img);
preview.fadeOut(500);
preview.children().each(function(){
if (!$(this).is("img")) {
$(this).hide();
}
});
}
else {
//do something nasty to alert the dev he/she didn't implement this type ;-)
}
}
$(MEDIA_NAV_SELECTOR).empty();
//var pager = slides.length==1?null:MEDIA_NAV_SELECTOR;
var pager = MEDIA_NAV_SELECTOR;
slideshow.cycle({
fx: 'scrollHorz',
speed: SLIDE_TRANSITION_SPEED,
pager: pager,
timeout: 0,
slideExpr: '.slide',
prev: '.slideshow-prev-btn',
next: '.slideshow-next-btn',
fit: 1,
nowrap: 1,
onPrevNextEvent: cycleNextPrevSlide
});
media.addClass(PLAYING_MEDIA_CLASS);
}//end if (content)
}
function cycleNextPrevSlide(isNext, zeroBasedSlideIndex, slideElement)
{
var currentIndex = isNext ? zeroBasedSlideIndex-1 : zeroBasedSlideIndex+1;
var nextIndex = zeroBasedSlideIndex;
var currentPlayer = $("#"+VIDEO_PLAYER_PREFIX+currentIndex);
var nextPlayer = $("#"+VIDEO_PLAYER_PREFIX+nextIndex);
currentPlayer.jPlayer("pause");
if (nextPlayer.hasClass(PLAYER_READY_CLASS)) {
//shitty solution, but it works...
for (var i=0;i<10;i++) {
setTimeout(function() {
nextPlayer.jPlayer("play");
}, SLIDE_TRANSITION_SPEED+(100*i));
}
}
return true;
}
function showMediaControls(media)
{
media.find("."+PLAYER_CLOSER_CLASS).fadeIn(300);
media.find("."+PLAYER_MENU_CLASS).fadeIn(300);
media.find(".slideshow-btn").fadeIn(300);
}
function hideMediaControls(media)
{
media.find("."+PLAYER_CLOSER_CLASS).fadeOut(300);
media.find("."+PLAYER_MENU_CLASS).fadeOut(300);
media.find(".slideshow-btn").fadeOut(300);
}
function stopAllMedia()
{
if (showingMedia) {
var media = $('#'+showingMedia);
if (media.hasClass(PLAYING_MEDIA_CLASS)) {
var mediaInfoTop = $('#media-info-top');
var mediaInfoBottom = $('#media-info-bottom');
var preview = media.find(".preview");
var content = media.find(".content");
preview.find('.'+LOADING_MEDIA_CLASS).remove();
media.removeClass(PLAYING_MEDIA_CLASS);
if (mediaInfoTop) {
mediaInfoTop.fadeOut(200);
}
if (mediaInfoBottom) {
mediaInfoBottom.fadeOut(200);
}
//the preview has z-index above the player: just let it fade in
preview.children().each(function(){
$(this).show();
});
preview.fadeIn(500, function() {
content.empty();
});
currentMediaId = null;
window.location.hash = HASH_PREFIX;
sizePlayers();
}
}
showingMedia = false;
}
function sizePlayers()
{
var allScalers = $('.liquid-scaler');
if (allScalers.length>0) {
/*
if (showingMedia) {
stopAllMedia();
}
*/
var scaler = allScalers.first();
var newWidth = -1;
var newHeight = -1;
var windowWidth = $(window).width();
var menuWidth = $('#menu').width();
var availableSpace = windowWidth - menuWidth - (windowWidth*(RIGHT_WHITESPACE_WIDTH_PCT/100.0));
newWidth = Math.floor(availableSpace*(LIQUID_WIDTH_PCT/100.0));
if (newWidth>MAX_VIDEO_WIDTH) {
newWidth = MAX_VIDEO_WIDTH;
}
var aspect = -1;
if (scaler.hasClass('aspect-169')) {
aspect = 1.7777;
}
else if (scaler.hasClass('aspect-43')) {
aspect = 1.3333;
}
if (aspect<=0) {
alert("Something went wrong during player size calculation; this shouldn't happen.");
}
else {
newHeight = Math.floor(newWidth/aspect);
var metaHeight = 2 * ($(window).height()*(MIN_METADATA_HEIGHT_PCT/100.0));
if (newHeight+metaHeight > $(window).height()) {
newHeight = $(window).height()-metaHeight;
newWidth = Math.floor(newHeight*aspect);
}
// General resizes
$('#media-info-top').width(newWidth);
$('#media-info-bottom').width(newWidth);
$('#fixiheader').css('width', newWidth);
$('#fixiheader #submenu li a').css('font-size', Math.round(newWidth*0.016)+'px');
$('.splash .caption1').css('font-size', Math.round(newWidth*0.025)+'px');
$('.splash .caption2').css('font-size', Math.round(newWidth*0.020)+'px');
$('.media .title').css('font-size', Math.round(newWidth*0.036)+'px');
$('.media .subtitle').css('font-size', Math.round(newWidth*0.020)+'px');
$('.media .metadata-top .title-box .title').css('font-size', Math.round(newWidth*0.036)+'px');
$('.media .metadata-top .title-box .subtitle').css('font-size', Math.round(newWidth*0.015)+'px');
$('.media .metadata-top .caption').css('font-size', Math.round(newWidth*0.015)+'px');
$('.media .metadata-bottom .credits').css('font-size', Math.round(newWidth*0.015)+'px');
$('.media .metadata-bottom .credits .share-table img').css('width', Math.round(newWidth*0.030)+'px');
}
// Resize all liquid scalers, based on the first
if (newHeight>0 && newWidth>0) {
newWidth = Math.round(newWidth);
newHeight = Math.round(newHeight);
allScalers.each(function(index) {
var scaler = $(this);
scaler.width(newWidth);
scaler.height(newHeight);
/*
//scrollbars may have appeared...
var availableSpace = $(window).width()-$('#menu').width();
if (scaler.width()>availableSpace) {
scaler.width(availableSpace);
}
*/
});
//we set this for future reference, see showMediaInfo()
$('.jp-video').width(newWidth);
$('.jp-video').height(newHeight);
/* this means we've got whitespace left on the right side of the video (will always be the case for now; see RIGHT_WHITESPACE_WIDTH_PCT) */
if (newWidth<availableSpace) {
var menuSpacing = Math.floor((availableSpace-newWidth)/2.0);
$('#menu').css('left', menuSpacing+'px');
var pageLeft = ($('#menu').width()+(2*menuSpacing));
$('#page').css('margin-left', pageLeft+'px');
$('#fixiheader').css('left', pageLeft+'px');
$('.media-info').css('left', pageLeft+'px');
}
else {
$('#menu').css('left', '0px');
$('#page').css('margin-left', $('#menu').width()+'px');
$('#fixiheader').css('left', $('#menu').width()+'px');
$('.media-info').css('left', $('#menu').width()+'px');
}
if (jScrollbar) {
//jScrollbar.reinitialise();
}
}
}
}
function checkCurrentMedia()
{
var currId = window.location.hash.substring(HASH_PREFIX.length);
if (currId && currId.length>0 && currId!=currentMediaId) {
var currEl = $('#'+currId);
if (currEl.length) {
currentMediaId = currId;
showMedia(currEl);
}
}
}
function bootstrap()
{
$(document).ready(function() {
sizePlayers();
});
$('#page').height($(window).height());
$('#page').fadeTo(0,0).css('visibility','visible').fadeTo(400, 1.0);
$(window).resize(function() {
stopAllMedia();
sizePlayers();
});
if (PAGE=='work') {
$(window).scroll(function() {
if (!aligningMedia) {
stopAllMedia();
}
});
}
if (FANCY_SCROLLBAR) {
jScrollbar = $('#page').jScrollPane({
autoReinitialise: true,
mouseWheelSpeed: 75
});
}
//init gui
$("img.lazy").lazyload({
threshold : 1,
skip_invisible : false
});
//this will lazy load the images after a refresh with memorized scroll status
setTimeout(function() {
$("img.lazy").trigger("scroll");
}, 1000);
//first function is for mouseover, second for mouseout
$('.media').hover(
//mouse over content
function() {
$(this).addClass(HOVER_MEDIA_CLASS);
showMediaControls($(this));
},
//mouse out content
function() {
$(this).removeClass(HOVER_MEDIA_CLASS);
hideMediaControls($(this));
}
);
if (PAGE=='work') {
initPlayers();
/*
currentMediaTimer = setInterval(function() {
checkCurrentMedia();
}, 250);
*/
$(window).bind('hashchange', function () {
checkCurrentMedia();
});
//launch it manually once on page load
checkCurrentMedia();
}
}