/*
* debouncedresize: special jQuery event that happens once after a window resize
*
* latest version and complete README available on Github:
* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
*
* Copyright 2011 @louis_remi
* Licensed under the MIT license.
*/
var $event = $.event,
$special,
resizeTimeout;
$special = $event.special.debouncedresize = {
setup: function() {
$( this ).on( "resize", $special.handler );
},
teardown: function() {
$( this ).off( "resize", $special.handler );
},
handler: function( event, execAsap ) {
// Save the context
var context = this,
args = arguments,
dispatch = function() {
// set correct event type
event.type = "debouncedresize";
$event.dispatch.apply( context, args );
};
if ( resizeTimeout ) {
clearTimeout( resizeTimeout );
}
execAsap ?
dispatch() :
resizeTimeout = setTimeout( dispatch, $special.threshold );
},
threshold: 250
};
// ======================= imagesLoaded Plugin ===============================
// https://github.com/desandro/imagesloaded
// $('#my-container').imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images
// callback function gets image collection as argument
// this is the container
// original: MIT license. Paul Irish. 2010.
// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
// blank image data-uri bypasses webkit log warning (thx doug jones)
var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
$.fn.imagesLoaded = function( callback ) {
var $this = this,
deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
hasNotify = $.isFunction(deferred.notify),
$images = $this.find('img').add( $this.filter('img') ),
loaded = [],
proper = [],
broken = [];
// Register deferred callbacks
if ($.isPlainObject(callback)) {
$.each(callback, function (key, value) {
if (key === 'callback') {
callback = value;
} else if (deferred) {
deferred[key](value);
}
});
}
function doneLoading() {
var $proper = $(proper),
$broken = $(broken);
if ( deferred ) {
if ( broken.length ) {
deferred.reject( $images, $proper, $broken );
} else {
deferred.resolve( $images );
}
}
if ( $.isFunction( callback ) ) {
callback.call( $this, $images, $proper, $broken );
}
}
function imgLoaded( img, isBroken ) {
// don't proceed if BLANK image, or image is already loaded
if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
return;
}
// store element in loaded images array
loaded.push( img );
// keep track of broken and properly loaded images
if ( isBroken ) {
broken.push( img );
} else {
proper.push( img );
}
// cache image and its state for future calls
$.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
// trigger deferred progress method if present
if ( hasNotify ) {
deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
}
// call doneLoading and clean listeners if all images are loaded
if ( $images.length === loaded.length ){
setTimeout( doneLoading );
$images.unbind( '.imagesLoaded' );
}
}
// if no images, trigger immediately
if ( !$images.length ) {
doneLoading();
} else {
$images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
// trigger imgLoaded
imgLoaded( event.target, event.type === 'error' );
}).each( function( i, el ) {
var src = el.src;
// find out if this image has been already checked for status
// if it was, and src has not changed, call imgLoaded on it
var cached = $.data( el, 'imagesLoaded' );
if ( cached && cached.src === src ) {
imgLoaded( el, cached.isBroken );
return;
}
// if complete is true and browser supports natural sizes, try
// to check for image status manually
if ( el.complete && el.naturalWidth !== undefined ) {
imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
return;
}
// cached images don't fire load sometimes, so we reset src, but only when
// dealing with IE, or image is complete (loaded) and failed manual check
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
if ( el.readyState || el.complete ) {
el.src = BLANK;
el.src = src;
}
});
}
return deferred ? deferred.promise( $this ) : $this;
};
var Gallery = (function() {
var $gallery = $( '#gr-gallery' ),
$itemsContainer = $gallery.children( 'div.gr-main' ).hide(),
$items = $itemsContainer.find( 'figure' ),
$window = $( window ),
winsize = getWindowSize(),
defaults = {
speed : 1000,
easing : 'ease-in-out',
margin : 400
},
// css transitions and 3d transforms support
support = { transitions : Modernizr.csstransitions, transforms3d : Modernizr.csstransforms3d },
transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
transformNames = {
'WebkitTransform' : '-webkit-transform',
'MozTransform' : '-moz-transform',
'OTransform' : '-o-transform',
'msTransform' : '-ms-transform',
'transform' : 'transform'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.cbpFWSlider',
transformName = transformNames[ Modernizr.prefixed( 'transform' ) ];
function init( settings ) {
Gallery.settings = $.extend( true, {}, defaults, settings );
// preload images
$itemsContainer.imagesLoaded( buildRoom );
}
function buildRoom() {
// create room with 4 walls
Gallery.room = new Room( $items );
// now show first wall (show elements of first wall)
Gallery.room.renderWall();
initEvents();
}
function Room( $items ) {
this.$el = $( '
' ).insertAfter( $itemsContainer );
// todo: check the real perspective value for widths > x
// the problem here is that if the wall's width (window width) is too large, and the perspective value is too small.
// We will see the background in a certain poitn of time when the wall is rotating (at least in firefox)
// we need to adjust the value of the perspective according to the value of the current window's width
if( winsize.width > 1300 ) {
this.$el.css( 'perspective', 1700 );
}
this.transitionSettings = transformName + ' ' + Gallery.settings.speed + 'ms ' + Gallery.settings.easing;
// element representing the wall
this.$mainWall = this.$el.find( 'div.gr-wall-main' ).css( 'transition', this.transitionSettings );
// 4 walls (or 1 if no support for 3dtransforms)
this.walls = [];
// current rendered wall
this.currentWall = 0; // 0,1,2,3
// current item being shown
this.currentItem = 0;
// total number of items
this.totalItems = $items.length;
// is walking
this.walking = false;
this.caption = -1;
this.create();
}
Room.prototype = {
create : function() {
// check on settings.layout
this.layout = typeof Gallery.settings.layout != 'undefined' && Gallery.settings.layout instanceof Array && support.transforms3d ? Gallery.settings.layout : this.getLayoutSettings();
var pos = 0, max = 0, prev = 0,
wallsCount = support.transforms3d ? 15 : 1;
for( var i = 0; i < wallsCount; ++i ) {
var nmb = this.layout[ i ];
max = nmb + prev;
prev += nmb;
var wall = new Wall( $items.slice( pos, max ).clone() );
pos = max;
this.walls.push( wall );
}
// add navigation
if( this.totalItems > 1 ) {
this.$navPrev = $( 'prev' ).on( 'click', $.proxy( this.navigate, this, 'prev' ) );
this.$navNext = $( 'next' ).on( 'click', $.proxy( this.navigate, this, 'next' ) );
this.$nav = $( '' ).append( this.$navPrev, this.$navNext ).appendTo( $gallery );
}
// add caption container
this.$caption = $( '