Your IP : 104.23.243.168
var MAX_VIDEO_WIDTH = 1024;
var TOP_METADATA_HEIGHT_PCT = 12;
var MIN_METADATA_HEIGHT_PCT = 17;
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 PLAYER_READY_CLASS = "ready";
var MEDIA_CLOSER_ID = "media-close-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 .video').each(function(index) {
var player = $(this);
player.find('.preview').append('<a class="play-btn"></a>');
});
$('#page #work .image').each(function(index) {
var player = $(this);
//player.find('.preview').append('<a class="info-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)
{
alignMedia(media);
setTimeout(function() {
showMediaInfo(media);
}, 200);
setTimeout(function() {
playMedia(media);
}, 0);
}
function alignMedia(media)
{
aligningMedia = true;
showingMedia = false;
var finalMediaHeight = media.height();
if (SHOW_VIDEO_MENU) {
if (media.is('.video')) {
finalMediaHeight += VIDEO_PLAYER_MENU_HEIGHT;
}
}
//var mediaOffset = Math.floor(($(window).height()-finalMediaHeight)/2.0);
var mediaOffset = Math.ceil($(window).height()*(TOP_METADATA_HEIGHT_PCT/100.0));
$('body').scrollTo(
media,
500,
{
axis: 'y',
offset: -mediaOffset,
easing: 'easeOutExpo',
onAfter: function() {
//after 200ms, we're done aligning ;-)
setTimeout(function() {
aligningMedia = false;
}, 200);
}
}
);
}
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());
}
//$(MEDIA_NAV_SELECTOR).empty().append(" ");
var finalMediaHeight = media.height();
if (media.is('.image')) {
finalMediaHeight += 2*INTER_MEDIA_SPACING;
}
if (SHOW_VIDEO_MENU) {
if (media.is('.video')) {
finalMediaHeight += VIDEO_PLAYER_MENU_HEIGHT;
}
}
//var mediaOffset = Math.floor(($(window).height()-finalMediaHeight)/2.0);
var mediaOffset = Math.ceil($(window).height()*(TOP_METADATA_HEIGHT_PCT/100.0))-INTER_MEDIA_SPACING;
mediaInfoTop.height(mediaOffset);
mediaInfoBottom.css("top", (mediaInfoTop.height()+finalMediaHeight));
mediaInfoTop.fadeTo(0,0).css('visibility','visible').fadeTo(600, 1.0);
mediaInfoBottom.fadeTo(0,0).css('visibility','visible').fadeTo(600, 1.0);
showingMedia = true;
}
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);
if (i>0) {
slide.append(prevBtn.clone());
}
if (i<slides.length-1) {
slide.append(nextBtn.clone());
}
if (media.is('.video') && 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('.jp-player');
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.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.fadeIn(0);
var loading = $('<div class="'+LOADING_MEDIA_CLASS+'"></div>');
preview.append(loading);
player.bind($.jPlayer.event.play, function(e) {
//the preview has z-index above the player: just let it fade away
preview.fadeOut(500);
});
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",
//events
ended: function(event) {
stopAllMedia();
}
});
} //ends .video selector
else if (media.is('.image') || s.toLowerCase().indexOf(".jpg")<0 || s.toLowerCase().indexOf(".png")<0) {
//note: this preloads the image too
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;
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
});
/*
if (media.is('.video')) {
var noMenuMediaHeight = media.height();
if (SHOW_VIDEO_MENU) {
media.animate({
height: media.height()+VIDEO_PLAYER_MENU_HEIGHT
}, 200);
}
var jPlayer = $('#jplayer').clone().css('display', 'block');
content.empty().append(jPlayer);
jPlayer.find('#jquery_jplayer_1').jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: BASE_URL+content.attr('media')+".mp4",
webmv: BASE_URL+content.attr('media')+".webm",
ogv: BASE_URL+content.attr('media')+".ogv"
});
currentPlayer = $(this);
//currentPlayer.jPlayer("load");
//currentPlayer.jPlayer("mute");
//currentPlayer.jPlayer("pause", 1.0/25);
preview.children().each(function(){
if (!$(this).is("img")) {
$(this).hide();
}
});
var loading = $('<div class="'+LOADING_MEDIA_CLASS+'"></div>');
preview.append(loading);
currentPlayer.bind($.jPlayer.event.play, function(e) {
//the preview has z-index above the player: just let it fade away
preview.fadeOut(500);
});
$(this).jPlayer("play");
},
solution: "flash,html",
supplied: "m4v,webmv,ogv",
size: {
width: media.width(),
height: noMenuMediaHeight
},
preload: "auto",
swfPath: "/res-static/swf/jplayer",
backgroundColor: "#FFFFFF",
//events
ended: function(event) {
stopAllMedia();
}
});
}//video end
else if (media.is('.image')) {
var slideshow = $('#slideshow').clone().empty().css('display', 'block');
content.empty().append(slideshow);
var slides = content.attr('media').split(",");
for(var s in slides) {
s = $.trim(slides[s]);
var img = $("<img src=\""+(BASE_URL+s)+"\" />");
slideshow.append(img);
}
var pager = slides.length==1?"null":MEDIA_NAV_SELECTOR;
slideshow.cycle({
fx: 'fade',
timeout: 1000,
pager: pager
});
preview.children().each(function(){
if (!$(this).is("img")) {
$(this).hide();
}
});
//the preview has z-index above the player: just let it fade away
preview.fadeOut(750);
} //end image/video tester
*/
var mediaCloser = $("#"+MEDIA_CLOSER_ID).clone();
content.prepend(mediaCloser);
setTimeout(function() {
mediaCloser.fadeIn(300);
}, 500);
//first function is for mouseover, second for mouseout
content.hover(
function() {
$(this).find("#"+MEDIA_CLOSER_ID).fadeIn(300);
},
function() {
$(this).find("#"+MEDIA_CLOSER_ID).fadeOut(300);
}
);
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 stopAllMedia()
{
$('#page #work .media').each(function(index) {
var media = $(this);
stopMedia(media);
});
}
function stopMedia(media)
{
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);
}
if (media.is('.video')) {
var newHeight = media.height();
if (SHOW_VIDEO_MENU) {
newHeight -= VIDEO_PLAYER_MENU_HEIGHT;
}
media.animate({
height: newHeight
}, 200);
}
//the preview has z-index above the player: just let it fade in
preview.fadeIn(500, function() {
$(this).children().each(function(){
$(this).show();
});
content.empty();
});
currentMediaId = null;
window.location.hash = HASH_PREFIX;
}
}
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 * MIN_METADATA_HEIGHT;
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);
$('.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) {
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);
}
*/
});
/* this means we've got whitespace left on the right side of the video (will always be the case; 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() {
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();
$('#media-close-btn').attr('href', 'javascript: stopAllMedia();');
if (PAGE=='work') {
initPlayers();
currentMediaTimer = setInterval(function() {
checkCurrentMedia();
}, 250);
}
}