/*
Author: Mr. Henry
Date: 2010-09-08
Site: saq.eu
Fueled by jQuery
*/
/*
* DOM Ready
* Let's get busy
*/
$(function(){
// (more info: http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/)
UTIL.loadEvents();
});
/*
* Window resize
*/
$(window).resize(function(){
SAQ.common.tetris.init();
});
/*
* Onload events
* ()
*/
var WORK_LOADED = false;
function setWorkLoadedFalse()
{
WORK_LOADED = false;
}
var SAQ = {
common: {
init: function(){
// Remove no-js body class
//$('body').removeClass('no-js');
// When we have javascript (and clearly we have) we should be
// redirected to '/#...' unless we are already there
try {
var pattern = new RegExp('/contact')
if ((window.location.pathname != '/') && (!pattern.test(window.location.pathname))) {
window.location.href = "http://" + window.location.host + "/#" + window.location.pathname + window.location.search;
return;
}
} catch(e) { log(e); }
// Debugmode
if (querystring.get('debug')) { $('body').addClass('debug'); };
if (querystring.get('no_black_backgrounds')) { $('body').addClass('no-black-backgrounds'); };
// We want to put the scroll back to the top because otherwise
// the chance exist we're going to load a lot of pages with the infinite scroll
window.scrollTo(0,0);
// Detect iOS
// window.ipad = navigator.userAgent.match(/iPad/i) != null;
// if (window.ipad) {
// $('body').addClass('ipad');
// }
iOS.init();
}, // End SAQ.common.init
finalize: function(){
if (window.location.hash && (window.location.hash.length > 0)) {
SAQ.common.infiniteScroll.findProject();
}
},
tetris: {
init: function(){
this.templates = TEMPLATES.get(); // Located in /javascripts/templates.js
this.canvas = $('#tetris');
this.grid_cell_size = [50, 50];
this.grid_columns = Math.floor($('#wrapper').width() / this.grid_cell_size[0]);
this.columns = 2;
var wrapper_width = $('#wrapper').width();
if ($('body#index.about').length > 0) {
if (wrapper_width > 1500) {
this.columns = 3;
}
} else {
if (wrapper_width > 1800) {
this.columns = 3;
}
}
//log('columns: ' + this.columns + ', #wrapper.width: ' + $('#wrapper').width());
this.canvas.tetrisGrid({
columns : this.grid_columns,
cell_size : this.grid_cell_size
});
// Drop tetris blocks
this.drop($('article'));
$('article').show();
}, // End SAQ.common.tetris.init
drop: function(elements){
var canvas = this.canvas;
var templates = this.templates;
var columns = this.columns;
elements.each(function(idx){
var reg_match = $(this).attr('class').match(/template-[\d]*/);
if (reg_match != null) {
var template_type = reg_match[0].replace('template-','');
try {
canvas.tetrisDrop($(this), templates[template_type], (idx%columns)/(columns-1)); }
catch(e) { log(e); }
} else {
/* template class not found */
}
});
} // End SAQ.common.tetris.drop
}, // End SAQ.common.tetris
infiniteScroll: {
init: function(){
window.loading_content = false;
window.pages_loaded = 0;
// Scroll event
$(window).scroll(function(){
var offset = 200; // Offset from the bottom in px
if ($(document).scrollTop() + viewport.height() > ($('body').height() - offset)) {
// Load next page
SAQ.common.infiniteScroll.loadNextPage();
}
});
}, // End SAQ.common.infiniteScroll.init
loadNextPage: function(clbComplete){
if (window.loading_content == false) {
var url = $('.pagination .next_page').attr('href');
if (url != undefined) {
$.ajax({
url: url,
beforeSend: function(){
window.loading_content = true;
},
success: function(data){
// New articles
var articles = $(innerShiv(data, false)).filter('article');
articles.appendTo($('#wrapper'))
.show();
// Drop the new bastards
SAQ.common.tetris.drop(articles);
// Remove old pagination and append new one
$('.pagination').remove();
$(data).filter('.pagination').appendTo($('#wrapper')).hide();
// Ready to load new content
window.loading_content = false;
window.pages_loaded += 1;
},
complete: function(){
if ($.isFunction(clbComplete)) {
clbComplete();
}
}
});
}
}
}, // End SAQ.common.infiniteScroll.loadNextPage
findProject: function(){
var url = window.location.hash.replace("#/", "/");
if ($('.article h2 a[href="'+url+'"]').length > 0) {
log('found');
$('.article h2 a[href="'+url+'"]').first().closest('.article').click();
} else {
log('not in list');
SAQ.common.infiniteScroll.loadNextPage(SAQ.common.infiniteScroll.findProject);
}
} // End SAQ.common.infiniteScroll.findProject
}, // End SAQ.common.infiniteScroll
media: {
init: function(){
// Media navigation
$('.media-navigation li[class!=document]').click(function(event){
event.preventDefault();
SAQ.common.media.switch_media($(this).find('a').attr('href'));
});
// Video navigation
$('.video-navigation a').click(function(event){
event.preventDefault();
// Check if this video is playing
if ($(this).closest('li').hasClass('playing')) {
SAQ.common.media.toggle_video_playback();
} else {
if ($('#project-video').hasClass('active')) {
SAQ.common.media.set_video($(this).attr('href'));
} else {
$('.video-navigation li').removeClass('active');
$(this).closest('li').addClass('active');
SAQ.common.media.switch_media('#project-video');
}
}
});
$(document).scroll(function(){ SAQ.common.media.fullscreen_image(); });
$(window).resize(function(){ SAQ.common.media.fullscreen_image(); });
}, // End SAQ.common.media.init
switch_media: function(id){
var nav_items = $('.media-navigation li[class!=document]');
if (!$('.media-container .container').is(':animated')) {
// Set containers
switch(id){
case '#project-video':
// Video
this.set_video($('.video-navigation .active a').attr('href'));
break;
default:
// Images
$('.video-navigation .action').removeClass('pause').addClass('play');
$('.video-navigation li').removeClass('playing').removeClass('paused');
break;
}
// Switch containers
$('.media-container .container').fadeOut(300).css({ 'z-index': 3 }).removeClass('active');
$('.media-container').find(id).stop().fadeIn(300).css({ 'z-index': 4 }).addClass('active');
this.set_media_navigation_state();
}
}, // End SAQ.common.media.switch_media
set_media_navigation_state: function(){
var nav_items = $('.media-navigation li[class!=document]');
var active_container_id = $('.media-container .container.active').attr('id');
nav_items.find('a').animate({
color: '#CCC'
}, 300, function(){
nav_items.closest('li').removeClass('active');
});
nav_items.find('a').filter('[href=#' + active_container_id + ']').stop().animate({
color: '#000'
}, 300, function(){
$this.closest('li').addClass('active');
});
}, // End SAQ.common.media.set_media_navigation_state
set_video: function(url){
// Set video
if (window.ipad || window.iphone) {
$('video').attr('src', url).show();
} else {
var flashvars = {
video_url: url,
autoplay: "true"
};
var params = {
allowScriptAccess: "sameDomain",
loop: "false",
menu: "false",
allowFullScreen: "true",
wmode: "transparent",
bgcolor: "#000000"
};
var attributes = {};
swfobject.embedSWF('/flash/videoPlayer.swf', 'video-player', '100%', $('.media-container').height(), "10", "/flash/expressInstall.swf", flashvars, params, attributes);
}
this.set_video_navigation_state(url);
}, // End SAQ.common.media.set_video
set_video_navigation_state: function(url){
// Set active state thumbs
$('.video-navigation a').each(function(){
if ($(this).attr('href') == url) {
$(this).closest('li').addClass('active');
if ($(this).find('.action').hasClass('play')) {
$(this).find('.action').addClass('pause').removeClass('play');
$(this).closest('li').addClass('playing').removeClass('paused');
} else {
$(this).find('.action').addClass('play').removeClass('pause');
$(this).closest('li').addClass('paused').removeClass('playing');
}
} else {
$(this).closest('li').removeClass('active').removeClass('playing').removeClass('paused');
$(this).find('.action').removeClass('pause').addClass('play');
}
});
}, // End SAQ.common.set_video_navigation_state
toggle_video_playback: function(){
var video_thumb = $('.video-navigation li.active');
if (video_thumb.hasClass('playing')) {
video_thumb.removeClass('playing').addClass('paused');
} else {
video_thumb.addClass('playing').removeClass('paused');
}
if (video_thumb.find('.action').hasClass('play')) {
video_thumb.find('.action').addClass('pause').removeClass('play');
} else {
video_thumb.find('.action').removeClass('pause').addClass('play');
}
$('#video-player')[0].TOGGLE_VIDEO_PLAYBACK();
}, // End SAQ.common.media.toggle_video_playback
toggle_image_playback: function(){
SAQ.common.media.slideshow.cycle('toggle');
var sl = SAQ.common.media.slideshow[0];
if (sl.cyclePause){
$('.image-navigation .pause').removeClass('pause').addClass('play');
} else {
$('.image-navigation .play').removeClass('play').addClass('pause');
}
}, // End SAQ.common.media.toggle_image_playback
preload_images: function(container, pre, indi, post){
$.stacks.serial([
function(ctx, clb){
ctx.images = container.find('img[data-src]');
clb(ctx);
},
pre,
$.stacks.preload_images(container, 'data-src', indi),
post
])({});
},
fullscreen_image: function(image){
var fullscreen, new_image, fade=false;
if (image) {
fullscreen = $('');
new_image = image.clone();
$('body').append(fullscreen.append(new_image).hide());
fullscreen.click(function(){
fullscreen.fadeOut(300, function(){
SAQ.common.media.fullscreen_div = null;
SAQ.common.media.fullscreen_img = null;
SAQ.common.media.fullscreen_org = null;
fullscreen.remove();
});
});
fade = true;
SAQ.common.media.fullscreen_div = fullscreen;
SAQ.common.media.fullscreen_img = new_image;
SAQ.common.media.fullscreen_org = image;
} else {
fullscreen = SAQ.common.media.fullscreen_div;
new_image = SAQ.common.media.fullscreen_img;
image = SAQ.common.media.fullscreen_org;
}
if (!fullscreen) return undefined;
var image_height = image.height(),
image_width = image.width(),
image_ratio = image_width / image_height,
view_height = window.viewport.height(),
view_width = window.viewport.width(),
view_ratio = view_width / view_height;
if (image_ratio > view_ratio) {
// more landscape than viewport use width to fit
image_width = window.viewport.width() - 40;
image_height = image_width / image_ratio;
} else {
// more portrait than viewport use height to fit
image_height = window.viewport.height() - 40;
image_width = image_height * image_ratio;
}
fullscreen.css({
position: 'absolute',
top: 0,
left: 0,
height: $(document).height(),
width: $(document).width()
});
new_image.css({
position: 'absolute',
'margin': 0,
'max-height': 5000,
'max-width': 5000,
height: image_height,
width: image_width,
top: $(document).scrollTop() +
(window.viewport.height() / 2.0) -
(image_height / 2.0),
left: (window.viewport.width() / 2.0) -
(image_width / 2.0)
});
if (fade) fullscreen.fadeIn(300);
},
set_image_viewer: function(){
var image_urls = "";
container = $('#image-player');
images = container.find('img');
viewport_width = viewport.width();
viewport_height = viewport.height();
// Bundle all urls in string
images.each(function(idx){
var url = $(this).attr('data-src');
image_urls += url;
if (idx < (images.length - 1)) {
image_urls += ',';
}
});
var flashvars = {
images: image_urls
};
var params = {
allowScriptAccess: "sameDomain",
loop: "false",
menu: "false",
allowFullScreen: "true",
wmode: "transparent",
bgcolor: "#000000"
};
var attributes = {};
swfobject.embedSWF('/flash/imageviewer.swf', 'image-player', '100%', $('.media-container').height(), "9.0", "/flash/expressInstall.swf", flashvars, params, attributes);
}
} // End SAQ.common.media
},
work: {
init: function(){
},
ajax: {
renderDetail: function(){
var overlayer = $('#overslayer');
var header = $('#header');
var container = overlayer.find('article');
var title = overlayer.find('h1');
var content = overlayer.find('.content'); // Content sidebar on the left
var media_nav = container.find('.media-navigation');
var media_cont = container.find('.media-container');
var video_nav = container.find('.video-navigation');
// Get max container dimensions
var container_max_width = $(window).width() - 100; // 50px padding each side
var container_max_height = $(window).height() - header.innerHeight();
// Check if videos are present
// If so, grab the width
var video_nav_width = 0;
var video_nav_height = 0;
if (video_nav.length > 0) {
video_nav_width = video_nav.width();
}
if (video_nav.find('li').length > 3) {
video_nav_height = 128;
}
// Media container respects ratio 4/3
var media_cont_width, media_cont_height;
var media_cont_max_width = container_max_width - content.outerWidth(true) - video_nav_width; // 50 = padding on right side description
var media_cont_max_height = container_max_height - media_nav.outerHeight(true) - header.innerHeight() - video_nav_height;
if ((media_cont_max_height / 3) * 4 > media_cont_max_width) {
media_cont_width = media_cont_max_width;
} else {
media_cont_width = (media_cont_max_height / 3) * 4;
}
// Now we know the definitive width, we can calculate the definitive height
media_cont_height = (media_cont_width / 4) * 3;
media_cont.add(media_cont.find('.image')).css({
width: media_cont_width,
height: media_cont_height
});
// Set related elements to the media container dimensions
media_cont.closest('.media').css({
width: media_cont_width + video_nav_width
});
// For easy positioning the video thumbnails, move it inside the media container
if (video_nav.length > 0) {
video_nav.appendTo(media_cont);
}
// Set media navigation position
media_nav.css({
marginRight: video_nav_width
});
// Set container dimensions, adjusted to the media container
var container_width = content.outerWidth(true) + media_cont_width + video_nav_width; // 50 = padding on right side description
var container_height = media_nav.outerHeight(true) + media_cont_height + video_nav_height;
container.addClass('xhr')
.css({
width: container_width,
height: container_height,
marginTop: 0 - (container_height / 2) + (header.innerHeight() / 2),
marginLeft: 0 - (container_width / 2)
});
// Set content sidebar dimensions
var content_inner_height = container_height - title.outerHeight(true) - (parseInt(content.find('.description').css('paddingTop').replace('px',''), 10) * 2);
if (content.find('.files').length > 0) {
content_inner_height = content_inner_height - 70;
}
content.find('.inner').css({
height: content_inner_height
});
if (window.ipad || window.iphone) {
// Pre load images in media_cont
SAQ.common.media.preload_images(media_cont,
function(ctx, clb){ // *** BEFORE LOADING THE IMAGES ***
//Add loader to images container
media_cont.messenger('add', {
autoRemove: true,
autoRemoveDelay: (60 * 60 * 1000)
});
$('.image-navigation').hide();
ctx.images.closest('div.image').hide();
clb(ctx);
}, function(image, clb){ // *** FOR EACH LOADED IMAGE ***
var $image = $(image);
if ($image.width() > $image.height()){
// Landscape
$image.css({
width: '100%',
position: 'absolute',
top: '50%'
}).css({
marginTop: 0 - ($image.height() / 2)
});
} else {
// Portrait
$image.css({
height: media_cont_height,
maxHeight: media_cont_height
});
};
clb(image);
}, function(ctx, clb){ // *** AFTER LOADING THE IMAGES ***
media_cont.messenger('remove');
ctx.images.closest('div.image').show();
SAQ.common.media.slideshow = $(media_cont).find('#image-player');
SAQ.common.media.slideshow.cycle({
next: ctx.images.add('.image-navigation .next'),
prev: $('.image-navigation .prev')
});
SAQ.common.media.slideshow.cycle('pause');
$('.image-navigation .play').click(function(){
SAQ.common.media.toggle_image_playback();
});
$('.image-navigation .fullscreen').click(function(){
SAQ.common.media.slideshow.cycle('pause');
var top_image = undefined;
$('.media .media-container #project-images div.image').each(function(){
if (
(!top_image) ||
(parseInt($(this).css('z-index'), 10) > parseInt(top_image.css('z-index'), 10))
) top_image = $(this);
});
SAQ.common.media.fullscreen_image($('img', top_image));
});
media_cont.hover(function(){ $('.image-navigation').fadeIn(300); },
function(){ $('.image-navigation').fadeOut(300); });
clb(ctx);
});
} else { // No iPad
$(".image-navigation").hide();
SAQ.common.media.set_image_viewer();
}
// Special iPad stuff
if (window.ipad || window.iphone) {
// Overlay over document
overlayer.css({
height: $(document).height()
});
// Description full height, so no scrollbar is needed
content.find('.inner').css({
height: 'auto'
});
// Update container dimensions
var container_top;
var container_margin_top = 0;
container_height = content.outerHeight() + title.outerHeight(true);
if ($(document).scrollTop() < header.outerHeight()) {
container_margin_top = header.outerHeight() - $(document).scrollTop();
}
if (container_height > $(window).height()) {
container_top = $(document).scrollTop() + (parseInt(container.css('marginTop').replace('px',''), 10) * -1) + container_margin_top + 20; // 20px padding at the top
} else {
container_top = $(document).scrollTop() + (parseInt(container.css('marginTop').replace('px',''), 10) * -1) + (($(window).height() - container_height) / 2);
}
container.css({
height: container_height,
top: container_top
});
}
},
setCloseBtn: function(){
nav = $('#header nav');
$('li', nav).addClass('active');
$('ul', nav).append('');
$('.close', nav).append($('.media .back'));
},
removeCloseBtn: function(){
nav = $('#header nav');
$('.close', nav).remove();
$('.info', nav).removeClass('active');
}
},
index: function(){
// Tetris mode
if (querystring.get('tetris') != 'false') {
try { SAQ.common.tetris.init(); } catch(e) { log(e); }
}
// Activate the infinite scroll
try { SAQ.common.infiniteScroll.init(); } catch(e) { log(e); }
// Get project page on click
$('.article h2 a').live('click', function(event){
event.preventDefault();
if (WORK_LOADED) {
return;
} else {
WORK_LOADED = true;
// set timer
setTimeout("setWorkLoadedFalse();", 1000);
}
SAQ.clicked_block = $(this).closest('article');
var url = $(this).attr('href');
$.ajax({
url: url,
success: function(data){
// Analytics track
_gaq.push(['_trackPageview', url]);
// Set location hash
window.location.hash = url;
// Set page title
document.title = $(data).find('h1').html() + ' | ' + document.title
// Overlayer
try {
$.fn.overslayer.open({
closeOnClick: $('.back, #header h1'),
fadeSpeed: 100,
beforeOpenAsync: function(callback){
// Get viewport elements and set the clicked one as first
SAQ.elements_in_viewport = $('#wrapper article').inViewport().filter(function(idx){
return this.id != SAQ.clicked_block[0].id;
});
SAQ.elements_in_viewport.push(SAQ.clicked_block[0]);
// Fade viewport elements, callback = show overlayer
$.each(SAQ.elements_in_viewport, function(idx){
$(this).delay(idx * 200).fadeTo(300, 0.1, function(){
// On the last item
if (idx == (SAQ.elements_in_viewport.length - 1)) {
// Add data to overlayer
callback($(innerShiv(data, false)));
// Render detail
try {
SAQ.work.ajax.renderDetail();
} catch(e) {
log(e);
$('.single').css({
overflow: 'auto',
marginTop: '100px'
});
}
// custom scrollbar
try {
$('.description').css({
paddingRight: '10px'
});
$('.description .inner').jScrollPane({
verticalDragMaxHeight: 50
});
// Adjust height of scrollbar to create padding
$('.jspVerticalBar, .jspTrack').css({
height: $('.description').outerHeight() - 20
});
} catch(e) { log(e); }
}
});
});
},
onOpen: function(){
// Remove message
SAQ.clicked_block.messenger('remove');
// Set close button
if (window.ipad || window.iphone) {
$('.media .back').show();
} else {
SAQ.work.ajax.setCloseBtn();
}
},
afterOpen: function(){
SAQ.elements_in_viewport.fadeTo(0, 1);
if (!window.ipad && !window.iphone) {
SAQ.scrollTop = $(document).scrollTop();
$('body').css({
'height': window.viewport.height() - 1,
'overflow': 'hidden'
});
}
$('#tetris').css({
//'marginTop': 0 - SAQ.scrollTop
});
// Media initialize
SAQ.common.media.init();
},
beforeClose: function(){
// Reset location hash
window.location.hash = '';
// Reset page title
document.title = 'Work | SAQ';
// Reset scroll position
$('body').css({
'height': 'auto',
'overflow': 'visible'
});
$('#tetris').css({
'marginTop': 0
});
$(document).scrollTop(SAQ.scrollTop);
// Remove close button
SAQ.work.ajax.removeCloseBtn();
}
});
} catch(e) { log(e); }
},
error: function(XMLHttpRequest, textStatus, errorThrown){
SAQ.clicked_block.messenger('add', {
messengerContent: 'Currently not available',
autoRemove: true
});
}
});
});
// Alias all the elements click event to the link
$('.article').live('click', function(event){
// Prevent bubbling
if (window.recursive_click) {
window.recursive_click = false;
} else {
window.recursive_click = true;
$(this).find('h2 a').first().click();
}
});
}, // End SAQ.work.index
project: function(){
} // End SAQ.work.project
}, // End SAQ.work
about: {
init: function(){
var _this = this;
}, // End SAQ.about.init
index: function(){
var _this = this;
// Tetris mode
if (querystring.get('tetris') != 'false') {
try { SAQ.common.tetris.init(); } catch(e) { log(e); }
}
// Custom scroll
$('.article .body, .article .press-articles, .template-19 .intro ').jScrollPane({
verticalDragMaxHeight: 100
});
// Set video
$('.template-25').each(function(){
_this._media.setVideo($(this));
});
}, // End SAQ.about.index
_media: {
setVideo: function($this){
container = $('.media', $this);
container_id = 'video-' + String(Math.round(Math.random()*100000));
container.attr('id', container_id);
if (window.ipad || window.iphone)
{
var urleke = container.find('source').first().attr('src');
log("urleke " + urleke);
$('video', $this).attr('src', urleke).show();
} else {
var flashvars = {
video_url: container.find('source').first().attr('src'),
autoplay: "false"
};
var params = {
allowScriptAccess: "sameDomain",
loop: "false",
menu: "false",
allowFullScreen: "true",
wmode: "transparent",
bgcolor: "#000000"
};
var attributes = {};
swfobject.embedSWF('/flash/videoPlayer.swf', container_id, container.width(), container.height(), "10", "/flash/expressInstall.swf", flashvars, params, attributes);
}
}
}
} // End SAQ.about
};
/*
* iOS specific behaviours
*/
var iOS = {
init: function(){
// Detect ipad & iphone
window.ipad = navigator.userAgent.match(/iPad/i) != null;
window.iphone = navigator.userAgent.match(/iPhone/i) != null;
if (window.ipad) {
$('body').addClass('ipad');
}
if (window.iphone) {
$('body').addClass('iphone');
}
}
};