/* Author:
Ken Newman, adcSTUDIO LLC
*/
jQuery(document).ready(function($){
/*
* Switch for animations based on Feature Detection.
* Uses Modernizr.
* Modern Browsers get fancy new CSS-Transitions which are smoother and less intensive, and an improved History handling.
* Older Browsers get jQuery animations. Section changes are temporarily locked during transitions.
*/
if ( Modernizr.csstransitions ) {
// for Modern Browsers: Use CSS-Transitions.
if ( $( ".nav-" + window.location.hash.substring(1) +" .content-wrap" ).length > 0 ) {
$('body').attr( 'class', window.location.hash.substring(1) );
} else {
$('body').attr( 'class', 'Home' );
}
$(".clickNavigation").click(function(){
$('body').attr( 'class', $(this).attr('href').substring(1) );
});
var historyListener = function (historyHash) {
switch ( historyHash )
{
case 'Film':
case 'Games':
case 'Development':
case 'About':
case 'News':
case 'Contact':
$(".nav-" + historyHash +" .clickNavigation").click();
break;
default:
$("header .clickNavigation").click();
break;
}
document.title = "iNK Stories: " + historyHash;
};
unFocus.History.addEventListener('historyChange', historyListener);
} else {
// for older Browsers: Use jQuery fallbacks.
if ( $( ".nav-" + window.location.hash.substring(1) +" .content-wrap" ).length > 0 ) {
$( ".nav-" + window.location.hash.substring(1) +" .content-wrap" ).animate( {width: "581"}, 1000 ).addClass('activeNav');
$('body').attr( 'class', window.location.hash.substring(1) );
} else {
$( ".nav-Home .content-wrap" ).animate( {width: "581"}, 1000 ).addClass('activeNav');
$('body').attr( 'class', 'Home' );
}
$(".clickNavigation").click(function(event) {
var startHash = window.location.hash.substring(1);
event.preventDefault();
if ( ($('.activeNav').length > 0) && (false == $(".nav-" + $(this).attr('href').substring(1) +" .content-wrap" ).hasClass('activeNav')) ) {
$('.activeNav').animate( {width: "1"}, 1000 ).removeClass('activeNav');
$( ".nav-" + $(this).attr('href').substring(1) +" .content-wrap" ).animate( {width: "581"}, 1000, function(){
$(this).addClass('activeNav');
$('body').attr( 'class', $(this).parent().attr('class').substring(4) );
if ( startHash == unFocus.History.getCurrent() ) {
window.location.hash = $(this).parent().attr('class').substring(4);
} else {
historyListener( unFocus.History.getCurrent( ));
}
});
}
});
var historyListener= function(historyHash) {
if ( ($('.activeNav').length > 0) && (false == $(".nav-" + historyHash +" .content-wrap" ).hasClass('activeNav')) ) {
switch ( historyHash )
{
case 'Film':
case 'Games':
case 'Development':
case 'About':
case 'News':
case 'Contact':
$(".nav-" + historyHash +" .clickNavigation").click();
document.title = "iNK Stories: " + historyHash;
break;
default:
$("header .clickNavigation").click();
document.title = "iNK Stories";
break;
}
}
};
unFocus.History.addEventListener('historyChange', historyListener);
}
// End of Animation Switch.
/*
* Previous/Next handlers.
* Used in the Games and Development Sections.
* Dependant on the '.page-active' and '.paged' CSS classes in the markup.
*/
$(".btn-previous").click(function(event){
event.preventDefault();
if ( $(this).parent().siblings('.page-active').prev('.paged').length ) {
$(this).parent().siblings('.page-active').removeClass('page-active').prev('.paged').addClass('page-active');
} else {
$(this).parent().siblings('.page-active').removeClass('page-active').siblings('.paged').last().addClass('page-active');
}
});
$(".btn-next").click(function(event){
event.preventDefault();
if ( $(this).parent().siblings('.page-active').next('.paged').length ) {
$(this).parent().siblings('.page-active').removeClass('page-active').next('.paged').addClass('page-active');
} else {
$(this).parent().siblings('.page-active').removeClass('page-active').siblings('.paged').first().addClass('page-active');
}
});
// End Previous/Next handlers.
/*
* Footer Banner Controls.
* Section switch occurs via simple CSS selectors based on the body element's class (see style.css line 262 & 272).
* Intra-Section switch dependant on jQuery and the '.active-banner' CSS class.
* Finds the banner that has the same class name as the hovered img and assigns active-banner to it.
*/
$('.nav-Games .paged img').hover(
function() {
$( '#Games-banners .active-banner' ).removeClass('active-banner');
$( '#Games-banners .' + $(this).attr('class') + '' ).addClass('active-banner');
},
function() {}
);
$('.nav-Development .paged img').hover(
function() {
$( '#Development-banners .active-banner' ).removeClass('active-banner');
$( '#Development-banners .' + $(this).attr('class') + '' ).addClass('active-banner');
},
function() {}
);
// End Footer Banner Controls.
/*
* Complicated timeout scheme for Slide Show.
* TODO: explain what the heck is going on in here.
*/
var timeoutID;
var cycleNext = function() {
nextSlide = $('.active-slide').next('.slide');
$('.active-slide').removeClass('active-slide').fadeOut();
if ( nextSlide.length ) {
nextSlide.addClass('active-slide').fadeIn();
$('#slide-controller').attr('class', nextSlide.attr('id') );
} else {
$( "#slide-01" ).addClass('active-slide').fadeIn();
$('#slide-controller').attr('class', 'slide-01' );
}
}
var intervalID = window.setInterval(function() {cycleNext();}, 5000);
var delayCycleNext = function() {
window.clearInterval(intervalID);
window.clearTimeout(timeoutID);
timeoutID = window.setTimeout(function() {
intervalID = window.setInterval(function() {
cycleNext();
window.clearTimeout(timeoutID);
}, 5000);
}, 5000);
}
$('.slide').hide();
$('.active-slide').show();
$("#slide-controller a").click(function(event){
event.preventDefault();
if ( !$( '#' + $(this).attr('class') ).hasClass('active-slide') ) {
$('.active-slide').removeClass('active-slide').fadeOut();
$( '#' + $(this).attr('class') ).addClass('active-slide').fadeIn();
$('#slide-controller').attr('class', $(this).attr('class') );
}
delayCycleNext();
});
// End complicated timeout scheme.
$("a.image-lightbox").fancybox({'titlePosition':'inside'});
/*
* Start Fancybox iframe handlers.
* Dependant on a hidden div in the markup, for example:
* Creates the appropriate iframe code within the hidden div and calls fancybox on click.
*/
$("a.homefront-link").click(function(event) {
event.preventDefault();
$('#homefront-container').html('')
}).fancybox();
$("a.bloodtrail-link").click(function(event) {
event.preventDefault();
$('#bloodtrail-container').html('')
}).fancybox();
$("a.the-game-1979-link").click(function(event) {
event.preventDefault();
$('#the-game-1979-container').html('')
}).fancybox({'titlePosition':'inside'});
$("a.pulling-john-link").click(function(event) {
event.preventDefault();
$('#pulling-john-container').html('')
}).fancybox();
$("a.pindemonium-link").click(function(event) {
event.preventDefault();
$('#pindemonium-container').html('')
}).fancybox();
$("a.alan-wake-link").click(function(event) {
event.preventDefault();
$('#alan-wake-container').html('')
}).fancybox();
// End Lightbox iframe handlers.
});