https://www.mediainfocus.com/Portals/MediaInfocus/Skins/BD003-YellowGreen/slider/jquery.sliderPro.js?cdv=1718

1/*!
2*  - v1.1.0
3* Homepage: http://bqworks.com/slider-pro/
4* Author: bqworks
5* Author URL: http://bqworks.com/
6*/
7;(function( window, $ ) {
8
9	"use strict";
10
11	// Static methods for Slider Pro
12	$.SliderPro = {
13
14		// List of added modules
15		modules: [],
16
17		// Add a module by extending the core prototype
18		addModule: function( name, module ) {
19			this.modules.push( name );
20			$.extend( SliderPro.prototype, module );
21		}
22	};
23
24	// namespace
25	var NS = $.SliderPro.namespace = 'SliderPro';
26
27	var SliderPro = function( instance, options ) {
28
29		// Reference to the slider instance
30		this.instance = instance;
31
32		// Reference to the slider jQuery element
33		this.$slider = $( this.instance );
34
35		// Reference to the slides (sp-slides) jQuery element
36		this.$slides = null;
37
38		// Reference to the mask (sp-mask) jQuery element
39		this.$slidesMask = null;
40
41		// Reference to the slides (sp-slides-container) jQuery element
42		this.$slidesContainer = null;
43
44		// Array of SliderProSlide objects, ordered by their DOM index
45		this.slides = [];
46
47		// Array of SliderProSlide objects, ordered by their left/top position in the slider.
48		// This will be updated continuously if the slider is loopable.
49		this.slidesOrder = [];
50
51		// Holds the options passed to the slider when it was instantiated
52		this.options = options;
53
54		// Holds the final settings of the slider after merging the specified
55		// ones with the default ones.
56		this.settings = {};
57
58		// Another reference to the settings which will not be altered by breakpoints or by other means
59		this.originalSettings = {};
60
61		// Reference to the original 'gotoSlide' method
62		this.originalGotoSlide = null;
63
64		// The index of the currently selected slide (starts with 0)
65		this.selectedSlideIndex = 0;
66
67		// The index of the previously selected slide
68		this.previousSlideIndex = 0;
69
70		// Indicates the position of the slide considered to be in the middle.
71		// If there are 5 slides (0, 1, 2, 3, 4) the middle position will be 2.
72		// If there are 6 slides (0, 1, 2, 3, 4, 5) the middle position will be approximated to 2.
73		this.middleSlidePosition = 0;
74
75		// Indicates the type of supported transition (CSS3 2D, CSS3 3D or JavaScript)
76		this.supportedAnimation = null;
77
78		// Indicates the required vendor prefix for CSS (i.e., -webkit, -moz, etc.)
79		this.vendorPrefix = null;
80
81		// Indicates the name of the CSS transition's complete event (i.e., transitionend, webkitTransitionEnd, etc.)
82		this.transitionEvent = null;
83
84		// Indicates the 'left' or 'top' position
85		this.positionProperty = null;
86
87		// Indicates if the current browser is IE
88		this.isIE = null;
89
90		// The position of the slides container
91		this.slidesPosition = 0;
92
93		// The width of the individual slide
94		this.slideWidth = 0;
95
96		// The height of the individual slide
97		this.slideHeight = 0;
98
99		// The width or height, depending on the orientation, of the individual slide
100		this.slideSize = 0;
101
102		// Reference to the old slide width, used to check if the width has changed
103		this.previousSlideWidth = 0;
104
105		// Reference to the old slide height, used to check if the height has changed
106		this.previousSlideHeight = 0;
107		
108		// Reference to the old window width, used to check if the window width has changed
109		this.previousWindowWidth = 0;
110		
111		// Reference to the old window height, used to check if the window height has changed
112		this.previousWindowHeight = 0;
113
114		// The distance from the margin of the slider to the left/top of the selected slide.
115		// This is useful in calculating the position of the selected slide when there are 
116		// more visible slides.
117		this.visibleOffset = 0;
118
119		// Property used for deferring the resizing of the slider
120		this.allowResize = true;
121
122		// Unique ID to be used for event listening
123		this.uniqueId = new Date().valueOf();
124
125		// Stores size breakpoints
126		this.breakpoints = [];
127
128		// Indicates the current size breakpoint
129		this.currentBreakpoint = -1;
130
131		// An array of shuffled indexes, based on which the slides will be shuffled
132		this.shuffledIndexes = [];
133
134		// Initialize the slider
135		this._init();
136	};
137
138	SliderPro.prototype = {
139
140		// The starting place for the slider
141		_init: function() {
142			var that = this;
143
144			this.supportedAnimation = SliderProUtils.getSupportedAnimation();
145			this.vendorPrefix = SliderProUtils.getVendorPrefix();
146			this.transitionEvent = SliderProUtils.getTransitionEvent();
147			this.isIE = SliderProUtils.checkIE();
148
149			// Remove the 'sp-no-js' when the slider's JavaScript code starts running
150			this.$slider.removeClass( 'sp-no-js' );
151
152			// Add the 'ios' class if it's an iOS device
153			if ( window.navigator.userAgent.match( /(iPad|iPhone|iPod)/g ) ) {
154				this.$slider.addClass( 'ios' );
155			}
156
157			// Check if IE (older than 11) is used and add the version number as a class to the slider since
158			// older IE versions might need CSS tweaks.
159			var rmsie = /(msie) ([\w.]+)/,
160				ieVersion = rmsie.exec( window.navigator.userAgent.toLowerCase() );
161			
162			if ( this.isIE ) {
163				this.$slider.addClass( 'ie' );
164			}
165
166			if ( ieVersion !== null ) {
167				this.$slider.addClass( 'ie' + parseInt( ieVersion[2], 10 ) );
168			}
169
170			// Set up the slides containers
171			// slider-pro > sp-slides-container > sp-mask > sp-slides > sp-slide
172			this.$slidesContainer = $( '<div class="sp-slides-container"></div>' ).appendTo( this.$slider );
173			this.$slidesMask = $( '<div class="sp-mask"></div>' ).appendTo( this.$slidesContainer );
174			this.$slides = this.$slider.find( '.sp-slides' ).appendTo( this.$slidesMask );
175			this.$slider.find( '.sp-slide' ).appendTo( this.$slides );
176			
177			var modules = $.SliderPro.modules;
178
179			// Merge the modules' default settings with the core's default settings
180			if ( typeof modules !== 'undefined' ) {
181				for ( var i = 0; i < modules.length; i++ ) {
182					var defaults = modules[ i ].substring( 0, 1 ).toLowerCase() + modules[ i ].substring( 1 ) + 'Defaults';
183
184					if ( typeof this[ defaults ] !== 'undefined' ) {
185						$.extend( this.defaults, this[ defaults ] );
186					}
187				}
188			}
189
190			// Merge the specified setting with the default ones
191			this.settings = $.extend( {}, this.defaults, this.options );
192
193			// Initialize the modules
194			if ( typeof modules !== 'undefined' ) {
195				for ( var j = 0; j < modules.length; j++ ) {
196					if ( typeof this[ 'init' + modules[ j ] ] !== 'undefined' ) {
197						this[ 'init' + modules[ j ] ]();
198					}
199				}
200			}
201
202			// Keep a reference of the original settings and use it
203			// to restore the settings when the breakpoints are used.
204			this.originalSettings = $.extend( {}, this.settings );
205
206			// Get the reference to the 'gotoSlide' method
207			this.originalGotoSlide = this.gotoSlide;
208
209			// Parse the breakpoints object and store the values into an array,
210			// sorting them in ascending order based on the specified size.
211			if ( this.settings.breakpoints !== null ) {
212				for ( var sizes in this.settings.breakpoints ) {
213					this.breakpoints.push({ size: parseInt( sizes, 10 ), properties:this.settings.breakpoints[ sizes ] });
214				}
215
216				this.breakpoints = this.breakpoints.sort(function( a, b ) {
217					return a.size >= b.size ? 1: -1;
218				});
219			}
220
221			// Set which slide should be selected initially
222			this.selectedSlideIndex = this.settings.startSlide;
223
224			// Shuffle/randomize the slides
225			if ( this.settings.shuffle === true ) {
226				var slides = this.$slides.find( '.sp-slide' ),
227					shuffledSlides = [];
228
229				// Populate the 'shuffledIndexes' with index numbers
230				slides.each(function( index ) {
231					that.shuffledIndexes.push( index );
232				});
233
234				for ( var k = this.shuffledIndexes.length - 1; k > 0; k-- ) {
235					var l = Math.floor( Math.random() * ( k + 1 ) ),
236						temp = this.shuffledIndexes[ k ];
237
238					this.shuffledIndexes[ k ] = this.shuffledIndexes[ l ];
239					this.shuffledIndexes[ l ] = temp;
240				}
241
242				// Reposition the slides based on the order of the indexes in the
243				// 'shuffledIndexes' array
244				$.each( this.shuffledIndexes, function( index, element ) {
245					shuffledSlides.push( slides[ element ] );
246				});
247				
248				// Append the sorted slides to the slider
249				this.$slides.empty().append( shuffledSlides ) ;
250			}
251			
252			// Resize the slider when the browser window resizes.
253			// Also, deffer the resizing in order to not allow multiple
254			// resizes in a 200 milliseconds interval.
255			$( window ).on( 'resize.' + this.uniqueId + '.' + NS, function() {
256			
257				// Get the current width and height of the window
258				var newWindowWidth = $( window ).width(),
259					newWindowHeight = $( window ).height();
260				
261				// If the resize is not allowed yet or if the window size hasn't changed (this needs to be verified
262				// because in IE8 and lower the resize event is triggered whenever an element from the page changes
263				// its size) return early.
264				if ( that.allowResize === false ||
265					( that.previousWindowWidth === newWindowWidth && that.previousWindowHeight === newWindowHeight ) ) {
266					return;
267				}
268				
269				// Asign the new values for the window width and height
270				that.previousWindowWidth = newWindowWidth;
271				that.previousWindowHeight = newWindowHeight;
272			
273				that.allowResize = false;
274
275				setTimeout(function() {
276					that.resize();
277					that.allowResize = true;
278				}, 200 );
279			});
280
281			// Resize the slider when the 'update' method is called.
282			this.on( 'update.' + NS, function() {
283
284				// Reset the previous slide width
285				that.previousSlideWidth = 0;
286
287				// Some updates might require a resize
288				that.resize();
289			});
290
291			this.update();
292
293			// Fire the 'init' event
294			this.trigger({ type: 'init' });
295			if ( $.isFunction( this.settings.init ) ) {
296				this.settings.init.call( this, { type: 'init' });
297			}
298		},
299
300		// Update the slider by checking for setting changes and for slides
301		// that weren't initialized yet.
302		update: function() {
303			var that = this;
304
305			// Check the current slider orientation and reset CSS that might have been
306			// added for a different orientation, since the orientation can be changed
307			// at runtime.
308			if ( this.settings.orientation === 'horizontal' ) {
309				this.$slider.removeClass( 'sp-vertical' ).addClass( 'sp-horizontal' );
310				this.$slider.css({ 'height': '', 'max-height': '' });
311				this.$slides.find( '.sp-slide' ).css( 'top', '' );
312			} else if ( this.settings.orientation === 'vertical' ) {
313				this.$slider.removeClass( 'sp-horizontal' ).addClass( 'sp-vertical' );
314				this.$slides.find( '.sp-slide' ).css( 'left', '' );
315			}
316
317			// Set the position that will be used to arrange elements, like the slides,
318			// based on the orientation.
319			this.positionProperty = this.settings.orientation === 'horizontal' ? 'left' : 'top';
320
321			// Reset the 'gotoSlide' method
322			this.gotoSlide = this.originalGotoSlide;
323
324			// Loop through the array of SliderProSlide objects and if a stored slide is found
325			// which is not in the DOM anymore, destroy that slide.
326			for ( var i = this.slides.length - 1; i >= 0; i-- ) {
327				if ( this.$slider.find( '.sp-slide[data-index="' + i + '"]' ).length === 0 ) {
328					var slide = this.slides[ i ];
329
330					slide.destroy();
331					this.slides.splice( i, 1 );
332				}
333			}
334
335			this.slidesOrder.length = 0;
336
337			// Loop through the list of slides and initialize newly added slides if any,
338			// and reset the index of each slide.
339			this.$slider.find( '.sp-slide' ).each(function( index ) {
340				var $slide = $( this );
341
342				if ( typeof $slide.attr( 'data-init' ) === 'undefined' ) {
343					that._createSlide( index, $slide );
344				} else {
345					that.slides[ index ].setIndex( index );
346				}
347
348				that.slidesOrder.push( index );
349			});
350
351			// Calculate the position/index of the middle slide
352			this.middleSlidePosition = parseInt( ( that.slidesOrder.length - 1 ) / 2, 10 );
353
354			// Arrange the slides in a loop
355			if ( this.settings.loop === true ) {
356				this._updateSlidesOrder();
357			}
358
359			// Fire the 'update' event
360			this.trigger({ type: 'update' });
361			if ( $.isFunction( this.settings.update ) ) {
362				this.settings.update.call( this, { type: 'update' } );
363			}
364		},
365
366		// Create a SliderProSlide instance for the slide passed as a jQuery element
367		_createSlide: function( index, element ) {
368			var that = this,
369				slide = new SliderProSlide( $( element ), index, this.settings );
370
371			this.slides.splice( index, 0, slide );
372		},
373
374		// Arrange the slide elements in a loop inside the 'slidesOrder' array
375		_updateSlidesOrder: function() {
376			var	slicedItems,
377				i,
378
379				// Calculate the distance between the selected element and the middle position
380				distance = $.inArray( this.selectedSlideIndex, this.slidesOrder ) - this.middleSlidePosition;
381
382			// If the distance is negative it means that the selected slider is before the middle position, so
383			// slides from the end of the array will be added at the beginning, in order to shift the selected slide
384			// forward.
385			// 
386			// If the distance is positive, slides from the beginning of the array will be added at the end.
387			if ( distance < 0 ) {
388				slicedItems = this.slidesOrder.splice( distance, Math.abs( distance ) );
389
390				for ( i = slicedItems.length - 1; i >= 0; i-- ) {
391					this.slidesOrder.unshift( slicedItems[ i ] );
392				}
393			} else if ( distance > 0 ) {
394				slicedItems = this.slidesOrder.splice( 0, distance );
395
396				for ( i = 0; i <= slicedItems.length - 1; i++ ) {
397					this.slidesOrder.push( slicedItems[ i ] );
398				}
399			}
400		},
401
402		// Set the left/top position of the slides based on their position in the 'slidesOrder' array
403		_updateSlidesPosition: function() {
404			var selectedSlidePixelPosition = parseInt( this.$slides.find( '.sp-slide' ).eq( this.selectedSlideIndex ).css( this.positionProperty ), 10 );
405
406			for ( var slideIndex = 0; slideIndex < this.slidesOrder.length; slideIndex++ ) {
407				var slide = this.$slides.find( '.sp-slide' ).eq( this.slidesOrder[ slideIndex ] );
408				slide.css( this.positionProperty, selectedSlidePixelPosition + ( slideIndex - this.middleSlidePosition  ) * ( this.slideSize + this.settings.slideDistance ) );
409			}
410		},
411
412		// Set the left/top position of the slides based on their position in the 'slidesOrder' array,
413		// and also set the position of the slides container.
414		_resetSlidesPosition: function() {
415			for ( var slideIndex = 0; slideIndex < this.slidesOrder.length; slideIndex++ ) {
416				var slide = this.$slides.find( '.sp-slide' ).eq( this.slidesOrder[ slideIndex ] );
417				slide.css( this.positionProperty, slideIndex * ( this.slideSize + this.settings.slideDistance ) );
418			}
419
420			var newSlidesPosition = - parseInt( this.$slides.find( '.sp-slide' ).eq( this.selectedSlideIndex ).css( this.positionProperty ), 10 ) + this.visibleOffset;
421			this._moveTo( newSlidesPosition, true );
422		},
423
424		// Called when the slider needs to resize
425		resize: function() {
426			var that = this;
427
428			// Check if the current window width is bigger than the biggest breakpoint
429			// and if necessary reset the properties to the original settings.
430			// 
431			// If the window width is smaller than a certain breakpoint, apply the settings specified
432			// for that breakpoint but only after merging them with the original settings
433			// in order to make sure that only the specified settings for the breakpoint are applied
434			if ( this.settings.breakpoints !== null && this.breakpoints.length > 0 ) {
435				if ( $( window ).width() > this.breakpoints[ this.breakpoints.length - 1 ].size && this.currentBreakpoint !== -1 ) {
436					this.currentBreakpoint = -1;
437					this._setProperties( this.originalSettings, false );
438				} else {
439					for ( var i = 0, n = this.breakpoints.length; i < n; i++ ) {
440						if ( $( window ).width() <= this.breakpoints[ i ].size ) {
441							if ( this.currentBreakpoint !== this.breakpoints[ i ].size ) {
442								var eventObject = { type: 'breakpointReach', size: this.breakpoints[ i ].size, settings: this.breakpoints[ i ].properties };
443								this.trigger( eventObject );
444								if ( $.isFunction( this.settings.breakpointReach ) )
445									this.settings.breakpointReach.call( this, eventObject );
446
447								this.currentBreakpoint = this.breakpoints[ i ].size;
448								var settings = $.extend( {}, this.originalSettings, this.breakpoints[ i ].properties );
449								this._setProperties( settings, false );
450								
451								return;
452							}
453
454							break;
455						}
456					}
457				}
458			}
459
460			// Set the width of the main slider container based on whether or not the slider is responsive,
461			// full width or full size
462			if ( this.settings.responsive === true ) {
463				if ( ( this.settings.forceSize === 'fullWidth' || this.settings.forceSize === 'fullWindow' ) &&
464					( this.settings.visibleSize === 'auto' || this.settings.visibleSize !== 'auto' && this.settings.orientation === 'vertical' )
465				) {
466					this.$slider.css( 'margin', 0 );
467					this.$slider.css({ 'width': $( window ).width(), 'max-width': '', 'marginLeft': - this.$slider.offset().left });
468				} else {
469					this.$slider.css({ 'width': '100%', 'max-width': this.settings.width, 'marginLeft': '' });
470				}
471			} else {
472				this.$slider.css({ 'width': this.settings.width });
473			}
474
475			// Calculate the aspect ratio of the slider
476			if ( this.settings.aspectRatio === -1 ) {
477				this.settings.aspectRatio = this.settings.width / this.settings.height;
478			}
479			
480			// Initially set the slide width to the size of the slider.
481			// Later, this will be set to less if there are multiple visible slides.
482			this.slideWidth = this.$slider.width();
483
484			// Set the height to the same size as the browser window if the slider is set to be 'fullWindow',
485			// or calculate the height based on the width and the aspect ratio.
486			if ( this.settings.forceSize === 'fullWindow' ) {
487				this.slideHeight = $( window ).height();
488			} else {
489				this.slideHeight = isNaN( this.settings.aspectRatio ) ? this.settings.height : this.slideWidth / this.settings.aspectRatio;
490			}
491
492			// Resize the slider only if the size of the slider has changed
493			// If it hasn't, return.
494			if ( this.previousSlideWidth !== this.slideWidth ||
495				this.previousSlideHeight !== this.slideHeight ||
496				this.settings.visibleSize !== 'auto' ||
497				this.$slider.outerWidth() > this.$slider.parent().width() ||
498				this.$slider.width() !== this.$slidesMask.width()
499			) {
500				this.previousSlideWidth = this.slideWidth;
501				this.previousSlideHeight = this.slideHeight;
502			} else {
503				return;
504			}
505
506			// The slide width or slide height is needed for several calculation, so create a reference to it
507			// based on the current orientation.
508			this.slideSize = this.settings.orientation === 'horizontal' ? this.slideWidth : this.slideHeight;
509			
510			// Initially set the visible size of the slides and the offset of the selected slide as if there is only
511			// on visible slide.
512			// If there will be multiple visible slides (when 'visibleSize' is different than 'auto'), these will
513			// be updated accordingly.
514			this.visibleSlidesSize = this.slideSize;
515			this.visibleOffset = 0;
516

640				// Fire the 'gotoSlideComplete' event
641				that.trigger({ type: 'gotoSlideComplete', index: index, previousIndex: that.previousSlideIndex });
642				if ( $.isFunction( that.settings.gotoSlideComplete ) ) {
643					that.settings.gotoSlideComplete.call( that, { type: 'gotoSlideComplete', index: index, previousIndex: that.previousSlideIndex } );
644				}
645			});
646
647			// Fire the 'gotoSlide' event
648			this.trigger({ type: 'gotoSlide', index: index, previousIndex: this.previousSlideIndex });
649			if ( $.isFunction( this.settings.gotoSlide ) ) {
650				this.settings.gotoSlide.call( this, { type: 'gotoSlide', index: index, previousIndex: this.previousSlideIndex } );
651			}
652		},
653
654		// Open the next slide
655		nextSlide: function() {
656			var index = ( this.selectedSlideIndex >= this.getTotalSlides() - 1 ) ? 0 : ( this.selectedSlideIndex + 1 );
657			this.gotoSlide( index );
658		},
659
660		// Open the previous slide
661		previousSlide: function() {
662			var index = this.selectedSlideIndex <= 0 ? ( this.getTotalSlides() - 1 ) : ( this.selectedSlideIndex - 1 );
663			this.gotoSlide( index );
664		},
665
666		// Move the slides container to the specified position.
667		// The movement can be instant or animated.
668		_moveTo: function( position, instant, callback ) {
669			var that = this,
670				css = {};
671
672			if ( position === this.slidesPosition ) {
673				return;
674			}
675			
676			this.slidesPosition = position;
677			
678			if ( ( this.supportedAnimation === 'css-3d' || this.supportedAnimation === 'css-2d' ) && this.isIE === false ) {
679				var transition,
680					left = this.settings.orientation === 'horizontal' ? position : 0,
681					top = this.settings.orientation === 'horizontal' ? 0 : position;
682
683				if ( this.supportedAnimation === 'css-3d' ) {
684					css[ this.vendorPrefix + 'transform' ] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
685				} else {
686					css[ this.vendorPrefix + 'transform' ] = 'translate(' + left + 'px, ' + top + 'px)';
687				}
688
689				if ( typeof instant !== 'undefined' && instant === true ) {
690					transition = '';
691				} else {
692					this.$slides.addClass( 'sp-animated' );
693					transition = this.vendorPrefix + 'transform ' + this.settings.slideAnimationDuration / 1000 + 's';
694
695					this.$slides.on( this.transitionEvent, function( event ) {
696						if ( event.target !== event.currentTarget ) {
697							return;
698						}
699
700						that.$slides.off( that.transitionEvent );
701						that.$slides.removeClass( 'sp-animated' );
702						
703						if ( typeof callback === 'function' ) {
704							callback();
705						}
706					});
707				}
708
709				css[ this.vendorPrefix + 'transition' ] = transition;
710
711				this.$slides.css( css );
712			} else {
713				css[ 'margin-' + this.positionProperty ] = position;
714
715				if ( typeof instant !== 'undefined' && instant === true ) {
716					this.$slides.css( css );
717				} else {
718					this.$slides.addClass( 'sp-animated' );
719					this.$slides.animate( css, this.settings.slideAnimationDuration, function() {
720						that.$slides.removeClass( 'sp-animated' );
721
722						if ( typeof callback === 'function' ) {
723							callback();
724						}
725					});
726				}
727			}
728		},
729
730		// Stop the movement of the slides
731		_stopMovement: function() {
732			var css = {};
733
734			if ( ( this.supportedAnimation === 'css-3d' || this.supportedAnimation === 'css-2d' ) && this.isIE === false) {
735
736				// Get the current position of the slides by parsing the 'transform' property
737				var	matrixString = this.$slides.css( this.vendorPrefix + 'transform' ),
738					matrixType = matrixString.indexOf( 'matrix3d' ) !== -1 ? 'matrix3d' : 'matrix',
739					matrixArray = matrixString.replace( matrixType, '' ).match( /-?[0-9\.]+/g ),
740					left = matrixType === 'matrix3d' ? parseInt( matrixArray[ 12 ], 10 ) : parseInt( matrixArray[ 4 ], 10 ),
741					top = matrixType === 'matrix3d' ? parseInt( matrixArray[ 13 ], 10 ) : parseInt( matrixArray[ 5 ], 10 );
742					
743				// Set the transform property to the value that the transform had when the function was called
744				if ( this.supportedAnimation === 'css-3d' ) {
745					css[ this.vendorPrefix + 'transform' ] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
746				} else {
747					css[ this.vendorPrefix + 'transform' ] = 'translate(' + left + 'px, ' + top + 'px)';
748				}
749
750				css[ this.vendorPrefix + 'transition' ] = '';
751
752				this.$slides.css( css );
753				this.$slides.off( this.transitionEvent );
754				this.slidesPosition = this.settings.orientation === 'horizontal' ? left : top;
755			} else {
756				this.$slides.stop();
757				this.slidesPosition = parseInt( this.$slides.css( 'margin-' + this.positionProperty ), 10 );
758			}
759
760			this.$slides.removeClass( 'sp-animated' );
761		},
762
763		// Resize the height of the slider to the specified value
764		_resizeHeightTo: function( height ) {
765			var css = { 'height': height };
766
767			if ( this.supportedAnimation === 'css-3d' || this.supportedAnimation === 'css-2d' ) {
768				css[ this.vendorPrefix + 'transition' ] = 'height ' + this.settings.heightAnimationDuration / 1000 + 's';
769				this.$slidesMask.css( css );
770			} else {
771				this.$slidesMask.animate( css, this.settings.heightAnimationDuration );
772			}
773		},
774
775		// Destroy the slider instance
776		destroy: function() {
777			// Remove the stored reference to this instance
778			this.$slider.removeData( 'sliderPro' );
779			
780			// Clean the CSS
781			this.$slider.removeAttr( 'style' );
782			this.$slides.removeAttr( 'style' );
783
784			// Remove event listeners
785			this.off( 'update.' + NS );
786			$( window ).off( 'resize.' + this.uniqueId + '.' + NS );
787
788			// Destroy modules
789			var modules = $.SliderPro.modules;
790
791			if ( typeof modules !== 'undefined' ) {
792				for ( var i = 0; i < modules.length; i++ ) {
793					if ( typeof this[ 'destroy' + modules[ i ] ] !== 'undefined' ) {
794						this[ 'destroy' + modules[ i ] ]();
795					}
796				}
797			}
798
799			// Destroy all slides
800			$.each( this.slides, function( index, element ) {
801				element.destroy();
802			});
803
804			this.slides.length = 0;
805
806			// Move the slides to their initial position in the DOM and 
807			// remove the container elements created dynamically.
808			this.$slides.prependTo( this.$slider );
809			this.$slidesContainer.remove();
810		},
811
812		// Set properties on runtime
813		_setProperties: function( properties, store ) {
814			// Parse the properties passed as an object
815			for ( var prop in properties ) {
816				this.settings[ prop ] = properties[ prop ];
817
818				// Alter the original settings as well unless 'false' is passed to the 'store' parameter
819				if ( store !== false ) {
820					this.originalSettings[ prop ] = properties[ prop ];
821				}
822			}
823
824			this.update();
825		},
826
827		// Attach an event handler to the slider
828		on: function( type, callback ) {
829			return this.$slider.on( type, callback );
830		},
831
832		// Detach an event handler
833		off: function( type ) {
834			return this.$slider.off( type );
835		},
836
837		// Trigger an event on the slider
838		trigger: function( data ) {
839			return this.$slider.triggerHandler( data );
840		},
841
842		// Return the slide at the specified index
843		getSlideAt: function( index ) {
844			return this.slides[ index ];
845		},
846
847		// Return the index of the currently opened slide
848		getSelectedSlide: function() {
849			return this.selectedSlideIndex;
850		},
851
852		// Return the total amount of slides
853		getTotalSlides: function() {
854			return this.slides.length;
855		},
856
857		// The default options of the slider
858		defaults: {
859			// Width of the slide
860			width: 500,
861
862			// Height of the slide
863			height: 300,
864
865			// Indicates if the slider is responsive
866			responsive: true,
867
868			// The aspect ratio of the slider (width/height)
869			aspectRatio: -1,
870
871			// The scale mode for images (cover, contain, exact and none)
872			imageScaleMode: 'cover',
873
874			// Indicates if the image will be centered
875			centerImage: true,
876
877			// Indicates if height of the slider will be adjusted to the
878			// height of the selected slide
879			autoHeight: false,
880
881			// Indicates the initially selected slide
882			startSlide: 0,
883
884			// Indicates if the slides will be shuffled
885			shuffle: false,
886
887			// Indicates whether the slides will be arranged horizontally
888			// or vertically. Can be set to 'horizontal' or 'vertical'.
889			orientation: 'horizontal',
890
891			// Indicates if the size of the slider will be forced to 'fullWidth' or 'fullWindow'
892			forceSize: 'none',
893
894			// Indicates if the slider will be loopable
895			loop: true,
896
897			// The distance between slides
898			slideDistance: 10,
899
900			// The duration of the slide animation
901			slideAnimationDuration: 700,
902
903			// The duration of the height animation
904			heightAnimationDuration: 700,
905
906			// Sets the size of the visible area, allowing the increase of it in order
907			// to make more slides visible.
908			// By default, only the selected slide will be visible. 
909			visibleSize: 'auto',
910
911			// Breakpoints for allowing the slider's options to be changed
912			// based on the size of the window.
913			breakpoints: null,
914
915			// Called when the slider is initialized
916			init: function() {},
917
918			// Called when the slider is updates
919			update: function() {},
920
921			// Called when the slider is resized
922			sliderResize: function() {},
923
924			// Called when a new slide is selected
925			gotoSlide: function() {},
926
927			// Called when the navigation to the newly selected slide is complete
928			gotoSlideComplete: function() {},
929
930			// Called when a breakpoint is reached
931			breakpointReach: function() {}
932		}
933	};
934
935	var SliderProSlide = function( slide, index, settings ) {
936
937		// Reference to the slide jQuery element
938		this.$slide = slide;
939
940		// Reference to the main slide image
941		this.$mainImage = null;
942
943		// Reference to the container that will hold the main image
944		this.$imageContainer = null;
945
946		// Indicates whether the slide has a main image
947		this.hasMainImage = false;
948
949		// Indicates whether the main image is loaded
950		this.isMainImageLoaded = false;
951
952		// Indicates whether the main image is in the process of being loaded
953		this.isMainImageLoading = false;
954
955		// Indicates whether the slide has any image. There could be other images (i.e., in layers)
956		// besides the main slide image.
957		this.hasImages = false;
958
959		// Indicates if all the images in the slide are loaded
960		this.areImagesLoaded = false;
961
962		// The width and height of the slide
963		this.width = 0;
964		this.height = 0;
965
966		// Reference to the global settings of the slider
967		this.settings = settings;
968
969		// Set the index of the slide
970		this.setIndex( index );
971
972		// Initialize the slide
973		this._init();
974	};
975
976	SliderProSlide.prototype = {
977
978		// The starting point for the slide
979		_init: function() {
980			var that = this;
981
982			// Mark the slide as initialized
983			this.$slide.attr( 'data-init', true );
984
985			// Get the main slide image if there is one
986			this.$mainImage = this.$slide.find( '.sp-image' ).length !== 0 ? this.$slide.find( '.sp-image' ) : null;
987
988			// If there is a main slide image, create a container for it and add the image to this container.
989			// The container will allow the isolation of the image from the rest of the slide's content. This is
990			// helpful when you want to show some content below the image and not cover it.
991			if ( this.$mainImage !== null ) {
992				this.hasMainImage = true;
993
994				this.$imageContainer = $( '<div class="sp-image-container"></div>' ).prependTo( this.$slide );
995
996				if ( this.$mainImage.parent( 'a' ).length !== 0 ) {
997					this.$mainImage.parent( 'a' ).appendTo( this.$imageContainer );
998				} else {
999					this.$mainImage.appendTo( this.$imageContainer );
1000				}
1001			}
1002

1138					} else {
1139						this.$mainImage.css({ width: 'auto', height: '100%' });
1140					}
1141				} else if ( this.settings.imageScaleMode === 'exact' ) {
1142					this.$mainImage.css({ width: '100%', height: '100%' });
1143				}
1144
1145				if ( this.settings.centerImage === true ) {
1146					this.$mainImage.css({ 'marginLeft': ( this.$imageContainer.width() - this.$mainImage.width() ) * 0.5, 'marginTop': ( this.$imageContainer.height() - this.$mainImage.height() ) * 0.5 });
1147				}
1148			}
1149		},
1150
1151		// Destroy the slide
1152		destroy: function() {
1153			// Clean the slide element from attached styles and data
1154			this.$slide.removeAttr( 'style' );
1155			this.$slide.removeAttr( 'data-init' );
1156			this.$slide.removeAttr( 'data-index' );
1157			this.$slide.removeAttr( 'data-loaded' );
1158
1159			// If there is a main image, remove its container
1160			if ( this.hasMainImage === true ) {
1161				this.$slide.find( '.sp-image' )
1162					.removeAttr( 'style' )
1163					.appendTo( this.$slide );
1164
1165				this.$slide.find( '.sp-image-container' ).remove();
1166			}
1167		},
1168
1169		// Return the index of the slide
1170		getIndex: function() {
1171			return this.index;
1172		},
1173
1174		// Set the index of the slide
1175		setIndex: function( index ) {
1176			this.index = index;
1177			this.$slide.attr( 'data-index', this.index );
1178		},
1179
1180		// Attach an event handler to the slide
1181		on: function( type, callback ) {
1182			return this.$slide.on( type, callback );
1183		},
1184
1185		// Detach an event handler to the slide
1186		off: function( type ) {
1187			return this.$slide.off( type );
1188		},
1189
1190		// Trigger an event on the slide
1191		trigger: function( data ) {
1192			return this.$slide.triggerHandler( data );
1193		}
1194	};
1195
1196	window.SliderPro = SliderPro;
1197	window.SliderProSlide = SliderProSlide;
1198
1199	$.fn.sliderPro = function( options ) {
1200		var args = Array.prototype.slice.call( arguments, 1 );
1201
1202		return this.each(function() {
1203			// Instantiate the slider or alter it
1204			if ( typeof $( this ).data( 'sliderPro' ) === 'undefined' ) {
1205				var newInstance = new SliderPro( this, options );
1206
1207				// Store a reference to the instance created
1208				$( this ).data( 'sliderPro', newInstance );
1209			} else if ( typeof options !== 'undefined' ) {
1210				var	currentInstance = $( this ).data( 'sliderPro' );
1211
1212				// Check the type of argument passed
1213				if ( typeof currentInstance[ options ] === 'function' ) {
1214					currentInstance[ options ].apply( currentInstance, args );
1215				} else if ( typeof currentInstance.settings[ options ] !== 'undefined' ) {
1216					var obj = {};
1217					obj[ options ] = args[ 0 ];
1218					currentInstance._setProperties( obj );
1219				} else if ( typeof options === 'object' ) {
1220					currentInstance._setProperties( options );
1221				} else {
1222					$.error( options + ' does not exist in sliderPro.' );
1223				}
1224			}
1225		});
1226	};
1227
1228	// Contains useful utility functions
1229	var SliderProUtils = {
1230
1231		// Indicates what type of animations are supported in the current browser
1232		// Can be CSS 3D, CSS 2D or JavaScript
1233		supportedAnimation: null,
1234
1235		// Indicates the required vendor prefix for the current browser
1236		vendorPrefix: null,
1237
1238		// Indicates the name of the transition's complete event for the current browser
1239		transitionEvent: null,
1240
1241		// Indicates if the current browser is Internet Explorer (any version)
1242		isIE: null,
1243
1244		// Check whether CSS3 3D or 2D transforms are supported. If they aren't, use JavaScript animations
1245		getSupportedAnimation: function() {
1246			if ( this.supportedAnimation !== null ) {
1247				return this.supportedAnimation;
1248			}
1249
1250			var element = document.body || document.documentElement,
1251				elementStyle = element.style,
1252				isCSSTransitions = typeof elementStyle.transition !== 'undefined' ||
1253									typeof elementStyle.WebkitTransition !== 'undefined' ||
1254									typeof elementStyle.MozTransition !== 'undefined' ||
1255									typeof elementStyle.OTransition !== 'undefined';
1256
1257			if ( isCSSTransitions === true ) {
1258				var div = document.createElement( 'div' );
1259
1260				// Check if 3D transforms are supported
1261				if ( typeof div.style.WebkitPerspective !== 'undefined' || typeof div.style.perspective !== 'undefined' ) {
1262					this.supportedAnimation = 'css-3d';
1263				}
1264
1265				// Additional checks for Webkit
1266				if ( this.supportedAnimation === 'css-3d' && typeof div.styleWebkitPerspective !== 'undefined' ) {
1267					var style = document.createElement( 'style' );
1268					style.textContent = '@media (transform-3d),(-webkit-transform-3d){#test-3d{left:9px;position:absolute;height:5px;margin:0;padding:0;border:0;}}';
1269					document.getElementsByTagName( 'head' )[0].appendChild( style );
1270
1271					div.id = 'test-3d';
1272					document.body.appendChild( div );
1273
1274					if ( ! ( div.offsetLeft === 9 && div.offsetHeight === 5 ) ) {
1275						this.supportedAnimation = null;
1276					}
1277
1278					style.parentNode.removeChild( style );
1279					div.parentNode.removeChild( div );
1280				}
1281
1282				// If CSS 3D transforms are not supported, check if 2D transforms are supported
1283				if ( this.supportedAnimation === null && ( typeof div.style['-webkit-transform'] !== 'undefined' || typeof div.style.transform !== 'undefined' ) ) {
1284					this.supportedAnimation = 'css-2d';
1285				}
1286			} else {
1287				this.supportedAnimation = 'javascript';
1288			}
1289			
1290			return this.supportedAnimation;
1291		},
1292
1293		// Check what vendor prefix should be used in the current browser
1294		getVendorPrefix: function() {
1295			if ( this.vendorPrefix !== null ) {
1296				return this.vendorPrefix;
1297			}
1298
1299			var div = document.createElement( 'div' ),
1300				prefixes = [ 'Webkit', 'Moz', 'ms', 'O' ];
1301			
1302			if ( 'transform' in div.style ) {
1303				this.vendorPrefix = '';
1304				return this.vendorPrefix;
1305			}
1306			
1307			for ( var i = 0; i < prefixes.length; i++ ) {
1308				if ( ( prefixes[ i ] + 'Transform' ) in div.style ) {
1309					this.vendorPrefix = '-' + prefixes[ i ].toLowerCase() + '-';
1310					break;
1311				}
1312			}
1313			
1314			return this.vendorPrefix;
1315		},
1316
1317		// Check the name of the transition's complete event in the current browser
1318		getTransitionEvent: function() {
1319			if ( this.transitionEvent !== null ) {
1320				return this.transitionEvent;
1321			}
1322
1323			var div = document.createElement( 'div' ),
1324				transitions = {
1325					'transition': 'transitionend',
1326					'WebkitTransition': 'webkitTransitionEnd',
1327					'MozTransition': 'transitionend',
1328					'OTransition': 'oTransitionEnd'
1329				};
1330
1331			for ( var transition in transitions ) {
1332				if ( transition in div.style ) {
1333					this.transitionEvent = transitions[ transition ];
1334					break;
1335				}
1336			}
1337
1338			return this.transitionEvent;
1339		},
1340
1341		// If a single image is passed, check if it's loaded.
1342		// If a different element is passed, check if there are images
1343		// inside it, and check if these images are loaded.
1344		checkImagesComplete: function( target, callback ) {
1345			var that = this,
1346
1347				// Check the initial status of the image(s)
1348				status = this.checkImagesStatus( target );
1349
1350			// If there are loading images, wait for them to load.
1351			// If the images are loaded, call the callback function directly.
1352			if ( status === 'loading' ) {
1353				var checkImages = setInterval(function() {
1354					status = that.checkImagesStatus( target );
1355
1356					if ( status === 'complete' ) {
1357						clearInterval( checkImages );
1358
1359						if ( typeof callback === 'function' ) {
1360							callback();
1361						}
1362					}
1363				}, 100 );
1364			} else if ( typeof callback === 'function' ) {
1365				callback();
1366			}
1367
1368			return status;
1369		},
1370
1371		checkImagesStatus: function( target ) {
1372			var status = 'complete';
1373
1374			if ( target.is( 'img' ) && target[0].complete === false ) {
1375				status = 'loading';
1376			} else {
1377				target.find( 'img' ).each(function( index ) {
1378					var image = $( this )[0];
1379
1380					if ( image.complete === false ) {
1381						status = 'loading';
1382					}
1383				});
1384			}
1385
1386			return status;
1387		},
1388
1389		checkIE: function() {
1390			if ( this.isIE !== null ) {
1391				return this.isIE;
1392			}
1393
1394			var userAgent = window.navigator.userAgent,
1395				msie = userAgent.indexOf( 'MSIE' );
1396
1397			if ( userAgent.indexOf( 'MSIE' ) !== -1 || userAgent.match( /Trident.*rv\:11\./ ) ) {
1398				this.isIE = true;
1399			} else {
1400				this.isIE = false;
1401			}
1402
1403			return this.isIE;
1404		}
1405	};
1406
1407	window.SliderProUtils = SliderProUtils;
1408
1409})( window, jQuery );
1410
1411// Thumbnails module for Slider Pro.
1412// 
1413// Adds the possibility to create a thumbnail scroller, each thumbnail
1414// corresponding to a slide.
1415;(function( window, $ ) {
1416
1417	"use strict";
1418
1419	var NS = 'Thumbnails.' + $.SliderPro.namespace;
1420
1421	var Thumbnails = {
1422
1423		// Reference to the thumbnail scroller 
1424		$thumbnails: null,
1425
1426		// Reference to the container of the thumbnail scroller
1427		$thumbnailsContainer: null,
1428
1429		// List of Thumbnail objects
1430		thumbnails: null,
1431
1432		// Index of the selected thumbnail
1433		selectedThumbnailIndex: 0,
1434
1435		// Total size (width or height, depending on the orientation) of the thumbnails
1436		thumbnailsSize: 0,
1437
1438		// Size of the thumbnail's container
1439		thumbnailsContainerSize: 0,
1440
1441		// The position of the thumbnail scroller inside its container
1442		thumbnailsPosition: 0,
1443
1444		// Orientation of the thumbnails
1445		thumbnailsOrientation: null,
1446
1447		// Indicates the 'left' or 'top' position based on the orientation of the thumbnails
1448		thumbnailsPositionProperty: null,
1449
1450		// Indicates if there are thumbnails in the slider
1451		isThumbnailScroller: false,
1452
1453		initThumbnails: function() {
1454			var that = this;
1455
1456			this.thumbnails = [];
1457
1458			this.on( 'update.' + NS, $.proxy( this._thumbnailsOnUpdate, this ) );
1459			this.on( 'sliderResize.' + NS, $.proxy( this._thumbnailsOnResize, this ) );
1460			this.on( 'gotoSlide.' + NS, function( event ) {
1461				that._gotoThumbnail( event.index );
1462			});
1463		},
1464
1465		// Called when the slider is updated
1466		_thumbnailsOnUpdate: function() {
1467			var that = this;
1468
1469			if ( this.$slider.find( '.sp-thumbnail' ).length === 0 && this.thumbnails.length === 0 ) {
1470				this.isThumbnailScroller = false;
1471				return;
1472			}
1473
1474			this.isThumbnailScroller = true;
1475
1476			// Create the container of the thumbnail scroller, if it wasn't created yet
1477			if ( this.$thumbnailsContainer === null ) {
1478				this.$thumbnailsContainer = $( '<div class="sp-thumbnails-container"></div>' ).insertAfter( this.$slidesContainer );
1479			}
1480
1481			// If the thumbnails' main container doesn't exist, create it, and get a reference to it
1482			if ( this.$thumbnails === null ) {
1483				if ( this.$slider.find( '.sp-thumbnails' ).length !== 0 ) {
1484					this.$thumbnails = this.$slider.find( '.sp-thumbnails' ).appendTo( this.$thumbnailsContainer );
1485
1486					// Shuffle/randomize the thumbnails
1487					if ( this.settings.shuffle === true ) {
1488						var thumbnails = this.$thumbnails.find( '.sp-thumbnail' ),
1489							shuffledThumbnails = [];
1490
1491						// Reposition the thumbnails based on the order of the indexes in the
1492						// 'shuffledIndexes' array
1493						$.each( this.shuffledIndexes, function( index, element ) {
1494							var thumbnail = $( thumbnails[ element ] );
1495
1496							if ( thumbnail.parent( 'a' ).length !== 0 ) {
1497								thumbnail = thumbnail.parent( 'a' );
1498							}
1499
1500							shuffledThumbnails.push( thumbnail );
1501						});
1502						
1503						// Append the sorted thumbnails to the thumbnail scroller
1504						this.$thumbnails.empty().append( shuffledThumbnails ) ;
1505					}
1506				} else {
1507					this.$thumbnails = $( '<div class="sp-thumbnails"></div>' ).appendTo( this.$thumbnailsContainer );
1508				}
1509			}
1510
1511			// Check if there are thumbnails inside the slides and move them in the thumbnails container
1512			this.$slides.find( '.sp-thumbnail' ).each( function( index ) {
1513				var $thumbnail = $( this ),
1514					thumbnailIndex = $thumbnail.parents( '.sp-slide' ).index(),
1515					lastThumbnailIndex = that.$thumbnails.find( '.sp-thumbnail' ).length - 1;
1516
1517				// If the index of the slide that contains the thumbnail is greater than the total number
1518				// of thumbnails from the thumbnails container, position the thumbnail at the end.
1519				// Otherwise, add the thumbnails at the corresponding position.
1520				if ( thumbnailIndex > lastThumbnailIndex ) {
1521					$thumbnail.appendTo( that.$thumbnails );
1522				} else {
1523					$thumbnail.insertBefore( that.$thumbnails.find( '.sp-thumbnail' ).eq( thumbnailIndex ) );
1524				}
1525			});
1526
1527			// Loop through the Thumbnail objects and if a corresponding element is not found in the DOM,
1528			// it means that the thumbnail might have been removed. In this case, destroy that Thumbnail instance.
1529			for ( var i = this.thumbnails.length - 1; i >= 0; i-- ) {
1530				if ( this.$thumbnails.find( '.sp-thumbnail[data-index="' + i + '"]' ).length === 0 ) {
1531					var thumbnail = this.thumbnails[ i ];
1532
1533					thumbnail.destroy();
1534					this.thumbnails.splice( i, 1 );
1535				}
1536			}
1537
1538			// Loop through the thumbnails and if there is any uninitialized thumbnail,
1539			// initialize it, else update the thumbnail's index.
1540			this.$thumbnails.find( '.sp-thumbnail' ).each(function( index ) {
1541				var $thumbnail = $( this );
1542
1543				if ( typeof $thumbnail.attr( 'data-init' ) === 'undefined' ) {
1544					that._createThumbnail( $thumbnail, index );
1545				} else {
1546					that.thumbnails[ index ].setIndex( index );
1547				}
1548			});
1549
1550			// Remove the previous class that corresponds to the position of the thumbnail scroller
1551			this.$thumbnailsContainer.removeClass( 'sp-top-thumbnails sp-bottom-thumbnails sp-left-thumbnails sp-right-thumbnails' );
1552
1553			// Check the position of the thumbnail scroller and assign it the appropriate class and styling
1554			if ( this.settings.thumbnailsPosition === 'top' ) {
1555				this.$thumbnailsContainer.addClass( 'sp-top-thumbnails' );
1556				this.thumbnailsOrientation = 'horizontal';
1557			} else if ( this.settings.thumbnailsPosition === 'bottom' ) {
1558				this.$thumbnailsContainer.addClass( 'sp-bottom-thumbnails' );
1559				this.thumbnailsOrientation = 'horizontal';
1560			} else if ( this.settings.thumbnailsPosition === 'left' ) {
1561				this.$thumbnailsContainer.addClass( 'sp-left-thumbnails' );
1562				this.thumbnailsOrientation = 'vertical';
1563			} else if ( this.settings.thumbnailsPosition === 'right' ) {
1564				this.$thumbnailsContainer.addClass( 'sp-right-thumbnails' );
1565				this.thumbnailsOrientation = 'vertical';
1566			}
1567
1568			// Check if the pointer needs to be created
1569			if ( this.settings.thumbnailPointer === true ) {
1570				this.$thumbnailsContainer.addClass( 'sp-has-pointer' );
1571			} else {
1572				this.$thumbnailsContainer.removeClass( 'sp-has-pointer' );
1573			}
1574
1575			// Mark the thumbnail that corresponds to the selected slide
1576			this.selectedThumbnailIndex = this.selectedSlideIndex;
1577			this.$thumbnails.find( '.sp-thumbnail-container' ).eq( this.selectedThumbnailIndex ).addClass( 'sp-selected-thumbnail' );
1578			
1579			// Calculate the total size of the thumbnails
1580			this.thumbnailsSize = 0;
1581
1582			$.each( this.thumbnails, function( index, thumbnail ) {
1583				thumbnail.setSize( that.settings.thumbnailWidth, that.settings.thumbnailHeight );
1584				that.thumbnailsSize += that.thumbnailsOrientation === 'horizontal' ? thumbnail.getSize().width : thumbnail.getSize().height;
1585			});
1586
1587			// Set the size of the thumbnails
1588			if ( this.thumbnailsOrientation === 'horizontal' ) {
1589				this.$thumbnails.css({ 'width': this.thumbnailsSize, 'height': this.settings.thumbnailHeight });
1590				this.$thumbnailsContainer.css( 'height', '' );
1591				this.thumbnailsPositionProperty = 'left';
1592			} else {
1593				this.$thumbnails.css({ 'width': this.settings.thumbnailWidth, 'height': this.thumbnailsSize });
1594				this.$thumbnailsContainer.css( 'width', '' );
1595				this.thumbnailsPositionProperty = 'top';
1596			}
1597
1598			// Fire the 'thumbnailsUpdate' event
1599			this.trigger({ type: 'thumbnailsUpdate' });
1600			if ( $.isFunction( this.settings.thumbnailsUpdate ) ) {
1601				this.settings.thumbnailsUpdate.call( this, { type: 'thumbnailsUpdate' } );
1602			}
1603		},
1604
1605		// Create an individual thumbnail
1606		_createThumbnail: function( element, index ) {
1607			var that = this,
1608				thumbnail = new Thumbnail( element, this.$thumbnails, index );
1609
1610			// When the thumbnail is clicked, navigate to the corresponding slide
1611			thumbnail.on( 'thumbnailClick.' + NS, function( event ) {
1612				that.gotoSlide( event.index );
1613			});
1614
1615			// Add the thumbnail at the specified index
1616			this.thumbnails.splice( index, 0, thumbnail );
1617		},
1618
1619		// Called when the slider is resized.
1620		// Resets the size and position of the thumbnail scroller container.
1621		_thumbnailsOnResize: function() {
1622			if ( this.isThumbnailScroller === false ) {
1623				return;
1624			}
1625
1626			var that = this,
1627				newThumbnailsPosition;
1628
1629			if ( this.thumbnailsOrientation === 'horizontal' ) {
1630				this.thumbnailsContainerSize = Math.min( this.$slidesMask.width(), this.thumbnailsSize );
1631				this.$thumbnailsContainer.css( 'width', this.thumbnailsContainerSize );
1632
1633				// Reduce the slide mask's height, to make room for the thumbnails
1634				if ( this.settings.forceSize === 'fullWindow' ) {
1635					this.$slidesMask.css( 'height', this.$slidesMask.height() - this.$thumbnailsContainer.outerHeight( true ) );
1636
1637					// Resize the slide
1638					this.slideHeight = this.$slidesMask.height();
1639						
1640					$.each( this.slides, function( index, element ) {
1641						element.setSize( that.slideWidth, that.slideHeight );
1642					});
1643				}
1644			} else if ( this.thumbnailsOrientation === 'vertical' ) {
1645
1646				// Check if the width of the slide mask plus the width of the thumbnail scroller is greater than
1647				// the width of the slider's container and if that's the case, reduce the slides container width
1648				// in order to make the entire slider fit inside the slider's container.
1649				if ( this.$slidesMask.width() + this.$thumbnailsContainer.outerWidth( true ) > this.$slider.parent().width() ) {
1650					// Reduce the slider's width, to make room for the thumbnails
1651					if ( this.settings.forceSize === 'fullWidth' || this.settings.forceSize === 'fullWindow' ) {
1652						this.$slider.css( 'max-width', $( window ).width() - this.$thumbnailsContainer.outerWidth( true ) );
1653					} else {
1654						this.$slider.css( 'max-width', this.$slider.parent().width() - this.$thumbnailsContainer.outerWidth( true ) );
1655					}
1656					
1657					this.$slidesMask.css( 'width', this.$slider.width() );
1658
1659					// If the slides are horizontally oriented, update the visible size and the offset
1660					// of the selected slide, since the slider's size was reduced to make room for the thumbnails.
1661					// 
1662					// If the slides are vertically oriented, update the width and height (to maintain the aspect ratio)
1663					// of the slides.
1664					if ( this.settings.orientation === 'horizontal' ) {
1665						this.visibleOffset = Math.round( ( this.$slider.width() - this.slideSize ) / 2 );
1666						this.visibleSlidesSize = this.$slidesMask.width();
1667					} else if ( this.settings.orientation === 'vertical' ) {
1668						this.slideWidth = this.$slider.width();
1669
1670						$.each( this.slides, function( index, element ) {
1671							element.setSize( that.slideWidth, that.slideHeight );
1672						});
1673					}
1674
1675					// Re-arrange the slides
1676					this._resetSlidesPosition();
1677				}
1678
1679				this.thumbnailsContainerSize = Math.min( this.$slidesMask.height(), this.thumbnailsSize );
1680				this.$thumbnailsContainer.css( 'height', this.thumbnailsContainerSize );
1681			}
1682
1683			// If the total size of the thumbnails is smaller than the thumbnail scroller' container (which has
1684			// the same size as the slides container), it means that all the thumbnails will be visible, so set
1685			// the position of the thumbnail scroller to 0.
1686			// 
1687			// If that's not the case, the thumbnail scroller will be positioned based on which thumbnail is selected.
1688			if ( this.thumbnailsSize <= this.thumbnailsContainerSize || this.$thumbnails.find( '.sp-selected-thumbnail' ).length === 0 ) {
1689				newThumbnailsPosition = 0;
1690			} else {
1691				newThumbnailsPosition = Math.max( - this.thumbnails[ this.selectedThumbnailIndex ].getPosition()[ this.thumbnailsPositionProperty ], this.thumbnailsContainerSize - this.thumbnailsSize );
1692			}
1693
1694			// Add a padding to the slider, based on the thumbnail scroller's orientation, to make room
1695			// for the thumbnails.
1696			if ( this.settings.thumbnailsPosition === 'top' ) {
1697				this.$slider.css({ 'paddingTop': this.$thumbnailsContainer.outerHeight( true ), 'paddingLeft': '', 'paddingRight': '' });
1698			} else if ( this.settings.thumbnailsPosition === 'bottom' ) {
1699				this.$slider.css({ 'paddingTop': '', 'paddingLeft': '', 'paddingRight': '' });
1700			} else if ( this.settings.thumbnailsPosition === 'left' ) {
1701				this.$slider.css({ 'paddingTop': '', 'paddingLeft': this.$thumbnailsContainer.outerWidth( true ), 'paddingRight': '' });
1702			} else if ( this.settings.thumbnailsPosition === 'right' ) {
1703				this.$slider.css({ 'paddingTop': '', 'paddingLeft': '', 'paddingRight': this.$thumbnailsContainer.outerWidth( true ) });
1704			}
1705
1706			this._moveThumbnailsTo( newThumbnailsPosition, true );
1707		},
1708
1709		// Selects the thumbnail at the indicated index and moves the thumbnail scroller
1710		// accordingly.
1711		_gotoThumbnail: function( index ) {
1712			if ( this.isThumbnailScroller === false || typeof this.thumbnails[ index ] === 'undefined' ) {
1713				return;
1714			}
1715
1716			var previousIndex = this.selectedThumbnailIndex,
1717				newThumbnailsPosition = this.thumbnailsPosition;
1718
1719			this.selectedThumbnailIndex = index;
1720
1721			// Set the 'selected' class to the appropriate thumbnail
1722			this.$thumbnails.find( '.sp-selected-thumbnail' ).removeClass( 'sp-selected-thumbnail' );
1723			this.$thumbnails.find( '.sp-thumbnail-container' ).eq( this.selectedThumbnailIndex ).addClass( 'sp-selected-thumbnail' );
1724
1725			// Calculate the new position that the thumbnail scroller needs to go to.
1726			// 
1727			// If the selected thumbnail has a higher index than the previous one, make sure that the thumbnail
1728			// that comes after the selected thumbnail will be visible, if the selected thumbnail is not the
1729			// last thumbnail in the list.
1730			// 
1731			// If the selected thumbnail has a lower index than the previous one, make sure that the thumbnail
1732			// that's before the selected thumbnail will be visible, if the selected thumbnail is not the
1733			// first thumbnail in the list.
1734			if ( this.selectedThumbnailIndex >= previousIndex ) {
1735				var nextThumbnailIndex = this.selectedThumbnailIndex === this.thumbnails.length - 1 ? this.selectedThumbnailIndex : this.selectedThumbnailIndex + 1,
1736					nextThumbnail = this.thumbnails[ nextThumbnailIndex ],
1737					nextThumbnailPosition = this.thumbnailsOrientation === 'horizontal' ? nextThumbnail.getPosition().right : nextThumbnail.getPosition().bottom,
1738					thumbnailsRightPosition = - this.thumbnailsPosition + this.thumbnailsContainerSize;
1739
1740				if ( nextThumbnailPosition > thumbnailsRightPosition ) {
1741					newThumbnailsPosition = this.thumbnailsPosition - ( nextThumbnailPosition - thumbnailsRightPosition );
1742				}
1743			} else if ( this.selectedThumbnailIndex < previousIndex ) {
1744				var previousThumbnailIndex = this.selectedThumbnailIndex === 0 ? this.selectedThumbnailIndex : this.selectedThumbnailIndex - 1,
1745					previousThumbnail = this.thumbnails[ previousThumbnailIndex ],
1746					previousThumbnailPosition = this.thumbnailsOrientation === 'horizontal' ? previousThumbnail.getPosition().left : previousThumbnail.getPosition().top;
1747
1748				if ( previousThumbnailPosition < - this.thumbnailsPosition ) {
1749					newThumbnailsPosition = - previousThumbnailPosition;
1750				}
1751			}
1752
1753			// Move the thumbnail scroller to the calculated position
1754			this._moveThumbnailsTo( newThumbnailsPosition );
1755
1756			// Fire the 'gotoThumbnail' event
1757			this.trigger({ type: 'gotoThumbnail' });
1758			if ( $.isFunction( this.settings.gotoThumbnail ) ) {
1759				this.settings.gotoThumbnail.call( this, { type: 'gotoThumbnail' });
1760			}
1761		},
1762
1763		// Move the thumbnail scroller to the indicated position
1764		_moveThumbnailsTo: function( position, instant, callback ) {
1765			var that = this,
1766				css = {};
1767
1768			// Return if the position hasn't changed
1769			if ( position === this.thumbnailsPosition ) {
1770				return;
1771			}
1772
1773			this.thumbnailsPosition = position;
1774
1775			// Use CSS transitions if they are supported. If not, use JavaScript animation
1776			if ( this.supportedAnimation === 'css-3d' || this.supportedAnimation === 'css-2d' ) {
1777				var transition,
1778					left = this.thumbnailsOrientation === 'horizontal' ? position : 0,
1779					top = this.thumbnailsOrientation === 'horizontal' ? 0 : position;
1780
1781				if ( this.supportedAnimation === 'css-3d' ) {
1782					css[ this.vendorPrefix + 'transform' ] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
1783				} else {
1784					css[ this.vendorPrefix + 'transform' ] = 'translate(' + left + 'px, ' + top + 'px)';
1785				}
1786
1787				if ( typeof instant !== 'undefined' && instant === true ) {
1788					transition = '';
1789				} else {
1790					this.$thumbnails.addClass( 'sp-animated' );
1791					transition = this.vendorPrefix + 'transform ' + 700 / 1000 + 's';
1792
1793					this.$thumbnails.on( this.transitionEvent, function( event ) {
1794						if ( event.target !== event.currentTarget ) {
1795							return;
1796						}
1797
1798						that.$thumbnails.off( that.transitionEvent );
1799						that.$thumbnails.removeClass( 'sp-animated' );
1800
1801						if ( typeof callback === 'function' ) {
1802							callback();
1803						}
1804
1805						// Fire the 'thumbnailsMoveComplete' event
1806						that.trigger({ type: 'thumbnailsMoveComplete' });
1807						if ( $.isFunction( that.settings.thumbnailsMoveComplete ) ) {
1808							that.settings.thumbnailsMoveComplete.call( that, { type: 'thumbnailsMoveComplete' });
1809						}
1810					});
1811				}
1812
1813				css[ this.vendorPrefix + 'transition' ] = transition;
1814
1815				this.$thumbnails.css( css );
1816			} else {
1817				css[ 'margin-' + this.thumbnailsPositionProperty ] = position;
1818
1819				if ( typeof instant !== 'undefined' && instant === true ) {
1820					this.$thumbnails.css( css );
1821				} else {
1822					this.$thumbnails
1823						.addClass( 'sp-animated' )
1824						.animate( css, 700, function() {
1825							that.$thumbnails.removeClass( 'sp-animated' );
1826
1827							if ( typeof callback === 'function' ) {
1828								callback();
1829							}
1830
1831							// Fire the 'thumbnailsMoveComplete' event
1832							that.trigger({ type: 'thumbnailsMoveComplete' });
1833							if ( $.isFunction( that.settings.thumbnailsMoveComplete ) ) {
1834								that.settings.thumbnailsMoveComplete.call( that, { type: 'thumbnailsMoveComplete' });
1835							}
1836						});
1837				}
1838			}
1839		},
1840
1841		// Stop the movement of the thumbnail scroller
1842		_stopThumbnailsMovement: function() {
1843			var css = {};
1844
1845			if ( this.supportedAnimation === 'css-3d' || this.supportedAnimation === 'css-2d' ) {
1846				var	matrixString = this.$thumbnails.css( this.vendorPrefix + 'transform' ),
1847					matrixType = matrixString.indexOf( 'matrix3d' ) !== -1 ? 'matrix3d' : 'matrix',
1848					matrixArray = matrixString.replace( matrixType, '' ).match( /-?[0-9\.]+/g ),
1849					left = matrixType === 'matrix3d' ? parseInt( matrixArray[ 12 ], 10 ) : parseInt( matrixArray[ 4 ], 10 ),
1850					top = matrixType === 'matrix3d' ? parseInt( matrixArray[ 13 ], 10 ) : parseInt( matrixArray[ 5 ], 10 );
1851
1852				if ( this.supportedAnimation === 'css-3d' ) {
1853					css[ this.vendorPrefix + 'transform' ] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
1854				} else {
1855					css[ this.vendorPrefix + 'transform' ] = 'translate(' + left + 'px, ' + top + 'px)';
1856				}
1857
1858				css[ this.vendorPrefix + 'transition' ] = '';
1859
1860				this.$thumbnails.css( css );
1861				this.$thumbnails.off( this.transitionEvent );
1862				this.thumbnailsPosition = this.thumbnailsOrientation === 'horizontal' ? parseInt( matrixArray[ 4 ] , 10 ) : parseInt( matrixArray[ 5 ] , 10 );
1863			} else {
1864				this.$thumbnails.stop();
1865				this.thumbnailsPosition = parseInt( this.$thumbnails.css( 'margin-' + this.thumbnailsPositionProperty ), 10 );
1866			}
1867
1868			this.$thumbnails.removeClass( 'sp-animated' );
1869		},
1870
1871		// Destroy the module
1872		destroyThumbnails: function() {
1873			var that = this;
1874
1875			// Remove event listeners
1876			this.off( 'update.' + NS );
1877
1878			if ( this.isThumbnailScroller === false ) {
1879				return;
1880			}
1881			
1882			this.off( 'sliderResize.' + NS );
1883			this.off( 'gotoSlide.' + NS );
1884			$( window ).off( 'resize.' + this.uniqueId + '.' + NS );
1885
1886			// Destroy the individual thumbnails
1887			this.$thumbnails.find( '.sp-thumbnail' ).each( function() {
1888				var $thumbnail = $( this ),
1889					index = parseInt( $thumbnail.attr( 'data-index' ), 10 ),
1890					thumbnail = that.thumbnails[ index ];
1891
1892				thumbnail.off( 'thumbnailClick.' + NS );
1893				thumbnail.destroy();
1894			});
1895
1896			this.thumbnails.length = 0;
1897
1898			// Add the thumbnail scroller directly in the slider and
1899			// remove the thumbnail scroller container
1900			this.$thumbnails.appendTo( this.$slider );
1901			this.$thumbnailsContainer.remove();
1902			
1903			// Remove any created padding
1904			this.$slider.css({ 'paddingTop': '', 'paddingLeft': '', 'paddingRight': '' });
1905		},
1906
1907		thumbnailsDefaults: {
1908
1909			// Sets the width of the thumbnail
1910			thumbnailWidth: 100,
1911
1912			// Sets the height of the thumbnail
1913			thumbnailHeight: 80,
1914
1915			// Sets the position of the thumbnail scroller (top, bottom, right, left)
1916			thumbnailsPosition: 'bottom',
1917
1918			// Indicates if a pointer will be displayed for the selected thumbnail
1919			thumbnailPointer: false,
1920
1921			// Called when the thumbnails are updated
1922			thumbnailsUpdate: function() {},
1923
1924			// Called when a new thumbnail is selected
1925			gotoThumbnail: function() {},
1926
1927			// Called when the thumbnail scroller has moved
1928			thumbnailsMoveComplete: function() {}
1929		}
1930	};
1931
1932	var Thumbnail = function( thumbnail, thumbnails, index ) {
1933
1934		// Reference to the thumbnail jQuery element
1935		this.$thumbnail = thumbnail;
1936
1937		// Reference to the thumbnail scroller
1938		this.$thumbnails = thumbnails;
1939
1940		// Reference to the thumbnail's container, which will be 
1941		// created dynamically.
1942		this.$thumbnailContainer = null;
1943
1944		// The width and height of the thumbnail
1945		this.width = 0;
1946		this.height = 0;
1947
1948		// Indicates whether the thumbnail's image is loaded
1949		this.isImageLoaded = false;
1950
1951		// Set the index of the slide
1952		this.setIndex( index );
1953
1954		// Initialize the thumbnail
1955		this._init();
1956	};
1957
1958	Thumbnail.prototype = {
1959
1960		_init: function() {
1961			var that = this;
1962
1963			// Mark the thumbnail as initialized
1964			this.$thumbnail.attr( 'data-init', true );
1965
1966			// Create a container for the thumbnail and add the original thumbnail to this container.
1967			// Having a container will help crop the thumbnail image if it's too large.
1968			this.$thumbnailContainer = $( '<div class="sp-thumbnail-container"></div>' ).appendTo( this.$thumbnails );
1969
1970			if ( this.$thumbnail.parent( 'a' ).length !== 0 ) {
1971				this.$thumbnail.parent( 'a' ).appendTo( this.$thumbnailContainer );
1972			} else {
1973				this.$thumbnail.appendTo( this.$thumbnailContainer );
1974			}
1975
1976			// When the thumbnail container is clicked, fire an event
1977			this.$thumbnailContainer.on( 'click.' + NS, function() {
1978				that.trigger({ type: 'thumbnailClick.' + NS, index: that.index });
1979			});
1980		},
1981
1982		// Set the width and height of the thumbnail
1983		setSize: function( width, height ) {
1984			this.width = width;
1985			this.height = height;
1986
1987			// Apply the width and height to the thumbnail's container
1988			this.$thumbnailContainer.css({ 'width': this.width, 'height': this.height });
1989
1990			// If there is an image, resize it to fit the thumbnail container
1991			if ( this.$thumbnail.is( 'img' ) && typeof this.$thumbnail.attr( 'data-src' ) === 'undefined' ) {
1992				this.resizeImage();
1993			}
1994		},
1995
1996		// Return the width and height of the thumbnail
1997		getSize: function() {
1998			return {
1999				width: this.$thumbnailContainer.outerWidth( true ),
2000				height: this.$thumbnailContainer.outerHeight( true )
2001			};
2002		},
2003
2004		// Return the top, bottom, left and right position of the thumbnail
2005		getPosition: function() {
2006			return {
2007				left: this.$thumbnailContainer.position().left + parseInt( this.$thumbnailContainer.css( 'marginLeft' ) , 10 ),
2008				right: this.$thumbnailContainer.position().left + parseInt( this.$thumbnailContainer.css( 'marginLeft' ) , 10 ) + this.$thumbnailContainer.outerWidth(),
2009				top: this.$thumbnailContainer.position().top + parseInt( this.$thumbnailContainer.css( 'marginTop' ) , 10 ),
2010				bottom: this.$thumbnailContainer.position().top + parseInt( this.$thumbnailContainer.css( 'marginTop' ) , 10 ) + this.$thumbnailContainer.outerHeight()
2011			};
2012		},
2013
2014		// Set the index of the thumbnail
2015		setIndex: function( index ) {
2016			this.index = index;
2017			this.$thumbnail.attr( 'data-index', this.index );
2018		},
2019
2020		// Resize the thumbnail's image
2021		resizeImage: function() {
2022			var that = this;
2023
2024			// If the image is not loaded yet, load it
2025			if ( this.isImageLoaded === false ) {
2026				SliderProUtils.checkImagesComplete( this.$thumbnailContainer , function() {
2027					that.isImageLoaded = true;
2028					that.resizeImage();
2029				});
2030
2031				return;
2032			}
2033
2034			// Get the reference to the thumbnail image again because it was replaced by
2035			// another img element during the loading process
2036			this.$thumbnail = this.$thumbnailContainer.find( '.sp-thumbnail' );
2037
2038			// Calculate whether the image should stretch horizontally or vertically
2039			var imageWidth = this.$thumbnail.width(),
2040				imageHeight = this.$thumbnail.height();
2041
2042			if ( imageWidth / imageHeight <= this.width / this.height ) {
2043				this.$thumbnail.css({ width: '100%', height: 'auto' });
2044			} else {
2045				this.$thumbnail.css({ width: 'auto', height: '100%' });
2046			}
2047
2048			this.$thumbnail.css({ 'marginLeft': ( this.$thumbnailContainer.width() - this.$thumbnail.width() ) * 0.5, 'marginTop': ( this.$thumbnailContainer.height() - this.$thumbnail.height() ) * 0.5 });
2049		},
2050
2051		// Destroy the thumbnail
2052		destroy: function() {
2053			this.$thumbnailContainer.off( 'click.' + NS );
2054
2055			// Remove added attributes
2056			this.$thumbnail.removeAttr( 'data-init' );
2057			this.$thumbnail.removeAttr( 'data-index' );
2058
2059			// Remove the thumbnail's container and add the thumbnail
2060			// back to the thumbnail scroller container
2061			if ( this.$thumbnail.parent( 'a' ).length !== 0 ) {
2062				this.$thumbnail.parent( 'a' ).insertBefore( this.$thumbnailContainer );
2063			} else {
2064				this.$thumbnail.insertBefore( this.$thumbnailContainer );
2065			}
2066			
2067			this.$thumbnailContainer.remove();
2068		},
2069
2070		// Attach an event handler to the slide
2071		on: function( type, callback ) {
2072			return this.$thumbnailContainer.on( type, callback );
2073		},
2074
2075		// Detach an event handler to the slide
2076		off: function( type ) {
2077			return this.$thumbnailContainer.off( type );
2078		},
2079
2080		// Trigger an event on the slide
2081		trigger: function( data ) {
2082			return this.$thumbnailContainer.triggerHandler( data );
2083		}
2084	};
2085
2086	$.SliderPro.addModule( 'Thumbnails', Thumbnails );
2087
2088})( window, jQuery );
2089
2090// ConditionalImages module for Slider Pro.
2091// 
2092// Adds the possibility to specify multiple sources for each image and
2093// load the image that's the most appropriate for the size of the slider.
2094// For example, instead of loading a large image even if the slider will be small
2095// you can specify a smaller image that will be loaded instead.
2096;(function( window, $ ) {
2097
2098	"use strict";
2099
2100	var NS = 'ConditionalImages.' + $.SliderPro.namespace;
2101
2102	var ConditionalImages = {
2103
2104		// Reference to the previous size
2105		previousImageSize: null,
2106
2107		// Reference to the current size
2108		currentImageSize: null,
2109
2110		// Indicates if the current display supports high PPI
2111		isRetinaScreen: false,
2112
2113		initConditionalImages: function() {
2114			this.currentImageSize = this.previousImageSize = 'default';
2115			this.isRetinaScreen = ( typeof this._isRetina !== 'undefined' ) && ( this._isRetina() === true );
2116
2117			this.on( 'update.' + NS, $.proxy( this._conditionalImagesOnUpdate, this ) );
2118			this.on( 'sliderResize.' + NS, $.proxy( this._conditionalImagesOnResize, this ) );
2119		},
2120
2121		// Loop through all the existing images and specify the original path of the image
2122		// inside the 'data-default' attribute.
2123		_conditionalImagesOnUpdate: function() {
2124			$.each( this.slides, function( index, element ) {
2125				var $slide = element.$slide;
2126
2127				$slide.find( 'img:not([ data-default ])' ).each(function() {
2128					var $image = $( this );
2129
2130					if ( typeof $image.attr( 'data-src' ) !== 'undefined' ) {
2131						$image.attr( 'data-default', $image.attr( 'data-src' ) );
2132					} else {
2133						$image.attr( 'data-default', $image.attr( 'src' ) );
2134					}
2135				});
2136			});
2137		},
2138
2139		// When the window resizes, identify the applyable image size based on the current size of the slider
2140		// and apply it to all images that have a version of the image specified for this size.
2141		_conditionalImagesOnResize: function() {
2142			if ( this.slideWidth <= this.settings.smallSize ) {
2143				this.currentImageSize = 'small';
2144			} else if ( this.slideWidth <= this.settings.mediumSize ) {
2145				this.currentImageSize = 'medium';
2146			} else if ( this.slideWidth <= this.settings.largeSize ) {
2147				this.currentImageSize = 'large';
2148			} else {
2149				this.currentImageSize = 'default';
2150			}
2151
2152			if ( this.previousImageSize !== this.currentImageSize ) {
2153				var that = this;
2154
2155				$.each( this.slides, function( index, element ) {
2156					var $slide = element.$slide;
2157
2158					$slide.find( 'img' ).each(function() {
2159						var $image = $( this ),
2160							imageSource = '';
2161
2162						// Check if the current display supports high PPI and if a retina version of the current size was specified
2163						if ( that.isRetinaScreen === true && typeof $image.attr( 'data-retina' + that.currentImageSize ) !== 'undefined' ) {
2164							imageSource = $image.attr( 'data-retina' + that.currentImageSize );
2165
2166							// If the retina image was not loaded yet, replace the default image source with the one
2167							// that corresponds to the current slider size
2168							if ( typeof $image.attr( 'data-retina' ) !== 'undefined' && $image.attr( 'data-retina' ) !== imageSource ) {
2169								$image.attr( 'data-retina', imageSource );
2170							}
2171						} else if ( ( that.isRetinaScreen === false || that.isRetinaScreen === true && typeof $image.attr( 'data-retina' ) === 'undefined' ) && typeof $image.attr( 'data-' + that.currentImageSize ) !== 'undefined' ) {
2172							imageSource = $image.attr( 'data-' + that.currentImageSize );
2173
2174							// If the image is set to lazy load, replace the image source with the one
2175							// that corresponds to the current slider size
2176							if ( typeof $image.attr( 'data-src' ) !== 'undefined' && $image.attr( 'data-src' ) !== imageSource ) {
2177								$image.attr( 'data-src', imageSource );
2178							}
2179						}
2180
2181						// If a new image was found
2182						if ( imageSource !== '' ) {
2183
2184							// The existence of the 'data-src' attribute indicates that the image
2185							// will be lazy loaded, so don't load the new image yet
2186							if ( typeof $image.attr( 'data-src' ) === 'undefined' && $image.attr( 'src' ) !== imageSource  ) {
2187								that._loadConditionalImage( $image, imageSource, function( newImage ) {
2188									if ( newImage.hasClass( 'sp-image' ) ) {
2189										element.$mainImage = newImage;
2190										element.resizeMainImage( true );
2191									}
2192								});
2193							}
2194						}
2195					});
2196				});
2197
2198				this.previousImageSize = this.currentImageSize;
2199			}
2200		},
2201
2202		// Replace the target image with a new image
2203		_loadConditionalImage: function( image, source, callback ) {
2204
2205			// Create a new image element
2206			var newImage = $( new Image() );
2207
2208			// Copy the class(es) and inline style
2209			newImage.attr( 'class', image.attr( 'class' ) );
2210			newImage.attr( 'style', image.attr( 'style' ) );
2211
2212			// Copy the data attributes
2213			$.each( image.data(), function( name, value ) {
2214				newImage.attr( 'data-' + name, value );
2215			});
2216
2217			// Copy the width and height attributes if they exist
2218			if ( typeof image.attr( 'width' ) !== 'undefined') {
2219				newImage.attr( 'width', image.attr( 'width' ) );
2220			}
2221
2222			if ( typeof image.attr( 'height' ) !== 'undefined') {
2223				newImage.attr( 'height', image.attr( 'height' ) );
2224			}
2225
2226			if ( typeof image.attr( 'alt' ) !== 'undefined' ) {
2227				newImage.attr( 'alt', image.attr( 'alt' ) );
2228			}
2229
2230			if ( typeof image.attr( 'title' ) !== 'undefined' ) {
2231				newImage.attr( 'title', image.attr( 'title' ) );
2232			}
2233
2234			newImage.attr( 'src', source );
2235
2236			// Add the new image in the same container and remove the older image
2237			newImage.insertAfter( image );
2238			image.remove();
2239			image = null;
2240				
2241			if ( typeof callback === 'function' ) {
2242				callback( newImage );
2243			}
2244		},
2245
2246		// Destroy the module
2247		destroyConditionalImages: function() {
2248			this.off( 'update.' + NS );
2249			this.off( 'sliderResize.' + NS );
2250		},
2251
2252		conditionalImagesDefaults: {
2253
2254			// If the slider size is below this size, the small version of the images will be used
2255			smallSize: 480,
2256
2257			// If the slider size is below this size, the small version of the images will be used
2258			mediumSize: 768,
2259
2260			// If the slider size is below this size, the small version of the images will be used
2261			largeSize: 1024
2262		}
2263	};
2264
2265	$.SliderPro.addModule( 'ConditionalImages', ConditionalImages );
2266
2267})( window, jQuery );
2268
2269// Retina module for Slider Pro.
2270// 
2271// Adds the possibility to load a different image when the slider is
2272// viewed on a retina screen.
2273;(function( window, $ ) {
2274
2275	"use strict";
2276	
2277	var NS = 'Retina.' + $.SliderPro.namespace;
2278
2279	var Retina = {
2280
2281		initRetina: function() {
2282			var that = this;
2283
2284			// Return if it's not a retina screen
2285			if ( this._isRetina() === false ) {
2286				return;
2287			}
2288			
2289			this.on( 'update.' + NS, $.proxy( this._checkRetinaImages, this ) );
2290
2291			if ( this.$slider.find( '.sp-thumbnail' ).length !== 0 ) {
2292				this.on( 'update.Thumbnails.' + NS, $.proxy( this._checkRetinaThumbnailImages, this ) );
2293			}
2294		},
2295
2296		// Checks if the current display supports high PPI
2297		_isRetina: function() {
2298			if ( window.devicePixelRatio >= 2 ) {
2299				return true;
2300			}
2301
2302			if ( window.matchMedia && ( window.matchMedia( "(-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx)" ).matches ) ) {
2303				return true;
2304			}
2305
2306			return false;
2307		},
2308
2309		// Loop through the slides and replace the images with their retina version
2310		_checkRetinaImages: function() {
2311			var that = this;
2312
2313			$.each( this.slides, function( index, element ) {
2314				var $slide = element.$slide;
2315
2316				if ( typeof $slide.attr( 'data-retina-loaded' ) === 'undefined' ) {
2317					$slide.attr( 'data-retina-loaded', true );
2318
2319					$slide.find( 'img[data-retina]' ).each(function() {
2320						var $image = $( this );
2321
2322						if ( typeof $image.attr( 'data-src' ) !== 'undefined' ) {
2323							$image.attr( 'data-src', $image.attr( 'data-retina' ) );
2324						} else {
2325							that._loadRetinaImage( $image, function( newImage ) {
2326								if ( newImage.hasClass( 'sp-image' ) ) {
2327									element.$mainImage = newImage;
2328									element.resizeMainImage( true );
2329								}
2330							});
2331						}
2332					});
2333				}
2334			});
2335		},
2336
2337		// Loop through the thumbnails and replace the images with their retina version
2338		_checkRetinaThumbnailImages: function() {
2339			var that = this;
2340
2341			$.each( this.thumbnails, function( index, element ) {
2342				var $thumbnail = element.$thumbnailContainer;
2343
2344				if ( typeof $thumbnail.attr( 'data-retina-loaded' ) === 'undefined' ) {
2345					$thumbnail.attr( 'data-retina-loaded', true );
2346
2347					$thumbnail.find( 'img[data-retina]' ).each(function() {
2348						var $image = $( this );
2349
2350						if ( typeof $image.attr( 'data-src' ) !== 'undefined' ) {
2351							$image.attr( 'data-src', $image.attr( 'data-retina' ) );
2352						} else {
2353							that._loadRetinaImage( $image, function( newImage ) {
2354								if ( newImage.hasClass( 'sp-thumbnail' ) ) {
2355									element.resizeImage();
2356								}
2357							});
2358						}
2359					});
2360				}
2361			});
2362		},
2363
2364		// Load the retina image
2365		_loadRetinaImage: function( image, callback ) {
2366			var retinaFound = false,
2367				newImagePath = '';
2368
2369			// Check if there is a retina image specified
2370			if ( typeof image.attr( 'data-retina' ) !== 'undefined' ) {
2371				retinaFound = true;
2372
2373				newImagePath = image.attr( 'data-retina' );
2374			}
2375
2376			// Check if there is a lazy loaded, non-retina, image specified
2377			if ( typeof image.attr( 'data-src' ) !== 'undefined' ) {
2378				if ( retinaFound === false ) {
2379					newImagePath = image.attr( 'data-src') ;
2380				}
2381
2382				image.removeAttr('data-src');
2383			}
2384
2385			// Return if there isn't a retina or lazy loaded image
2386			if ( newImagePath === '' ) {
2387				return;
2388			}
2389
2390			// Create a new image element
2391			var newImage = $( new Image() );
2392
2393			// Copy the class(es) and inline style
2394			newImage.attr( 'class', image.attr('class') );
2395			newImage.attr( 'style', image.attr('style') );
2396
2397			// Copy the data attributes
2398			$.each( image.data(), function( name, value ) {
2399				newImage.attr( 'data-' + name, value );
2400			});
2401
2402			// Copy the width and height attributes if they exist
2403			if ( typeof image.attr( 'width' ) !== 'undefined' ) {
2404				newImage.attr( 'width', image.attr( 'width' ) );
2405			}
2406
2407			if ( typeof image.attr( 'height' ) !== 'undefined' ) {
2408				newImage.attr( 'height', image.attr( 'height' ) );
2409			}
2410
2411			if ( typeof image.attr( 'alt' ) !== 'undefined' ) {
2412				newImage.attr( 'alt', image.attr( 'alt' ) );
2413			}
2414
2415			if ( typeof image.attr( 'title' ) !== 'undefined' ) {
2416				newImage.attr( 'title', image.attr( 'title' ) );
2417			}
2418
2419			// Add the new image in the same container and remove the older image
2420			newImage.insertAfter( image );
2421			image.remove();
2422			image = null;
2423
2424			// Assign the source of the image
2425			newImage.attr( 'src', newImagePath );
2426
2427			if ( typeof callback === 'function' ) {
2428				callback( newImage );
2429			}
2430		},
2431
2432		// Destroy the module
2433		destroyRetina: function() {
2434			this.off( 'update.' + NS );
2435			this.off( 'update.Thumbnails.' + NS );
2436		}
2437	};
2438
2439	$.SliderPro.addModule( 'Retina', Retina );
2440	
2441})( window, jQuery );
2442
2443// Lazy Loading module for Slider Pro.
2444// 
2445// Adds the possibility to delay the loading of the images until the slides/thumbnails
2446// that contain them become visible. This technique improves the initial loading
2447// performance.
2448;(function( window, $ ) {
2449
2450	"use strict";
2451
2452	var NS = 'LazyLoading.' + $.SliderPro.namespace;
2453
2454	var LazyLoading = {
2455
2456		allowLazyLoadingCheck: true,
2457
2458		initLazyLoading: function() {
2459			var that = this;
2460
2461			// The 'resize' event is fired after every update, so it's possible to use it for checking
2462			// if the update made new slides become visible
2463			// 
2464			// Also, resizing the slider might make new slides or thumbnails visible
2465			this.on( 'sliderResize.' + NS, $.proxy( this._lazyLoadingOnResize, this ) );
2466
2467			// Check visible images when a new slide is selected
2468			this.on( 'gotoSlide.' + NS, $.proxy( this._checkAndLoadVisibleImages, this ) );
2469
2470			// Check visible thumbnail images when the thumbnails are updated because new thumbnail
2471			// might have been added or the settings might have been changed so that more thumbnail
2472			// images become visible
2473			// 
2474			// Also, check visible thumbnail images after the thumbnails have moved because new thumbnails might
2475			// have become visible
2476			this.on( 'thumbnailsUpdate.' + NS + ' ' + 'thumbnailsMoveComplete.' + NS, $.proxy( this._checkAndLoadVisibleThumbnailImages, this ) );
2477		},
2478
2479		_lazyLoadingOnResize: function() {
2480			var that = this;
2481
2482			if ( this.allowLazyLoadingCheck === false ) {
2483				return;
2484			}
2485
2486			this.allowLazyLoadingCheck = false;
2487			
2488			this._checkAndLoadVisibleImages();
2489
2490			if ( this.$slider.find( '.sp-thumbnail' ).length !== 0 ) {
2491				this._checkAndLoadVisibleThumbnailImages();
2492			}
2493
2494			// Use a timer to deffer the loading of images in order to prevent too many
2495			// checking attempts
2496			setTimeout(function() {
2497				that.allowLazyLoadingCheck = true;
2498			}, 500 );
2499		},
2500
2501		// Check visible slides and load their images
2502		_checkAndLoadVisibleImages: function() {
2503			if ( this.$slider.find( '.sp-slide:not([ data-loaded ])' ).length === 0 ) {
2504				return;
2505			}
2506
2507			var that = this,
2508
2509				// Use either the middle position or the index of the selected slide as a reference, depending on
2510				// whether the slider is loopable
2511				referencePosition = this.settings.loop === true ? this.middleSlidePosition : this.selectedSlideIndex,
2512
2513				// Calculate how many slides are visible at the sides of the selected slide
2514				visibleOnSides = Math.ceil( ( this.visibleSlidesSize - this.slideSize ) / 2 / this.slideSize ),
2515
2516				// Calculate the indexes of the first and last slide that will be checked
2517				from = referencePosition - visibleOnSides - 1 > 0 ? referencePosition - visibleOnSides - 1 : 0,
2518				to = referencePosition + visibleOnSides + 1 < this.getTotalSlides() - 1 ? referencePosition + visibleOnSides + 1 : this.getTotalSlides() - 1,
2519				
2520				// Get all the slides that need to be checked
2521				slidesToCheck = this.slidesOrder.slice( from, to + 1 );
2522
2523			// Loop through the selected slides and if the slide is not marked as having
2524			// been loaded yet, loop through its images and load them.
2525			$.each( slidesToCheck, function( index, element ) {
2526				var slide = that.slides[ element ],
2527					$slide = slide.$slide;
2528
2529				if ( typeof $slide.attr( 'data-loaded' ) === 'undefined' ) {
2530					$slide.attr( 'data-loaded', true );
2531
2532					$slide.find( 'img[ data-src ]' ).each(function() {
2533						var image = $( this );
2534						that._loadImage( image, function( newImage ) {
2535							if ( newImage.hasClass( 'sp-image' ) ) {
2536								slide.$mainImage = newImage;
2537								slide.resizeMainImage( true );
2538							}
2539						});
2540					});
2541				}
2542			});
2543		},
2544
2545		// Check visible thumbnails and load their images
2546		_checkAndLoadVisibleThumbnailImages: function() {
2547			if ( this.$slider.find( '.sp-thumbnail-container:not([ data-loaded ])' ).length === 0 ) {
2548				return;
2549			}
2550
2551			var that = this,
2552				thumbnailSize = this.thumbnailsSize / this.thumbnails.length,
2553
2554				// Calculate the indexes of the first and last thumbnail that will be checked
2555				from = Math.floor( Math.abs( this.thumbnailsPosition / thumbnailSize ) ),
2556				to = Math.floor( ( - this.thumbnailsPosition + this.thumbnailsContainerSize ) / thumbnailSize ),
2557
2558				// Get all the thumbnails that need to be checked
2559				thumbnailsToCheck = this.thumbnails.slice( from, to + 1 );
2560
2561			// Loop through the selected thumbnails and if the thumbnail is not marked as having
2562			// been loaded yet, load its image.
2563			$.each( thumbnailsToCheck, function( index, element ) {
2564				var $thumbnailContainer = element.$thumbnailContainer;
2565
2566				if ( typeof $thumbnailContainer.attr( 'data-loaded' ) === 'undefined' ) {
2567					$thumbnailContainer.attr( 'data-loaded', true );
2568
2569					$thumbnailContainer.find( 'img[ data-src ]' ).each(function() {
2570						var image = $( this );
2571
2572						that._loadImage( image, function() {
2573							element.resizeImage();
2574						});
2575					});
2576				}
2577			});
2578		},
2579
2580		// Load an image
2581		_loadImage: function( image, callback ) {
2582			// Create a new image element
2583			var newImage = $( new Image() );
2584
2585			// Copy the class(es) and inline style
2586			newImage.attr( 'class', image.attr( 'class' ) );
2587			newImage.attr( 'style', image.attr( 'style' ) );
2588
2589			// Copy the data attributes
2590			$.each( image.data(), function( name, value ) {
2591				newImage.attr( 'data-' + name, value );
2592			});
2593
2594			// Copy the width and height attributes if they exist
2595			if ( typeof image.attr( 'width' ) !== 'undefined') {
2596				newImage.attr( 'width', image.attr( 'width' ) );
2597			}
2598
2599			if ( typeof image.attr( 'height' ) !== 'undefined') {
2600				newImage.attr( 'height', image.attr( 'height' ) );
2601			}
2602
2603			if ( typeof image.attr( 'alt' ) !== 'undefined' ) {
2604				newImage.attr( 'alt', image.attr( 'alt' ) );
2605			}
2606
2607			if ( typeof image.attr( 'title' ) !== 'undefined' ) {
2608				newImage.attr( 'title', image.attr( 'title' ) );
2609			}
2610
2611			// Assign the source of the image
2612			newImage.attr( 'src', image.attr( 'data-src' ) );
2613			newImage.removeAttr( 'data-src' );
2614
2615			// Add the new image in the same container and remove the older image
2616			newImage.insertAfter( image );
2617			image.remove();
2618			image = null;
2619			
2620			if ( typeof callback === 'function' ) {
2621				callback( newImage );
2622			}
2623		},
2624
2625		// Destroy the module
2626		destroyLazyLoading: function() {
2627			this.off( 'update.' + NS );
2628			this.off( 'gotoSlide.' + NS );
2629			this.off( 'sliderResize.' + NS );
2630			this.off( 'thumbnailsUpdate.' + NS );
2631			this.off( 'thumbnailsMoveComplete.' + NS );
2632		}
2633	};
2634
2635	$.SliderPro.addModule( 'LazyLoading', LazyLoading );
2636
2637})( window, jQuery );
2638
2639// Layers module for Slider Pro.
2640// 
2641// Adds support for animated and static layers. The layers can contain any content,
2642// from simple text for video elements.
2643;(function( window, $ ) {
2644
2645	"use strict";
2646
2647	var NS = 'Layers.' +  $.SliderPro.namespace;
2648
2649	var Layers = {
2650
2651		// Reference to the original 'gotoSlide' method
2652		layersGotoSlideReference: null,
2653
2654		// Reference to the timer that will delay the overriding
2655		// of the 'gotoSlide' method
2656		waitForLayersTimer: null,
2657
2658		initLayers: function() {
2659			this.on( 'update.' + NS, $.proxy( this._layersOnUpdate, this ) );
2660			this.on( 'sliderResize.' + NS, $.proxy( this._layersOnResize, this ) );
2661			this.on( 'gotoSlide.' + NS, $.proxy( this._layersOnGotoSlide, this ) );
2662		},
2663
2664		// Loop through the slides and initialize all layers
2665		_layersOnUpdate: function( event ) {
2666			var that = this;
2667
2668			$.each( this.slides, function( index, element ) {
2669				var $slide = element.$slide;
2670
2671				// Initialize the layers
2672				this.$slide.find( '.sp-layer:not([ data-init ])' ).each(function() {
2673					var layer = new Layer( $( this ) );
2674
2675					// Add the 'layers' array to the slide objects (instance of SliderProSlide)
2676					if ( typeof element.layers === 'undefined' ) {
2677						element.layers = [];
2678					}
2679
2680					element.layers.push( layer );
2681
2682					if ( $( this ).hasClass( 'sp-static' ) === false ) {
2683
2684						// Add the 'animatedLayers' array to the slide objects (instance of SliderProSlide)
2685						if ( typeof element.animatedLayers === 'undefined' ) {
2686							element.animatedLayers = [];
2687						}
2688
2689						element.animatedLayers.push( layer );
2690					}
2691				});
2692			});
2693
2694			// If the 'waitForLayers' option is enabled, the slider will not move to another slide
2695			// until all the layers from the previous slide will be hidden. To achieve this,
2696			// replace the current 'gotoSlide' function with another function that will include the 
2697			// required functionality.
2698			// 
2699			// Since the 'gotoSlide' method might be overridden by other modules as well, delay this
2700			// override to make sure it's the last override.
2701			if ( this.settings.waitForLayers === true ) {
2702				clearTimeout( this.waitForLayersTimer );
2703
2704				this.waitForLayersTimer = setTimeout(function() {
2705					that.layersGotoSlideReference = that.gotoSlide;
2706					that.gotoSlide = that._layersGotoSlide;
2707				}, 1 );
2708			}
2709		},
2710
2711		// When the slider resizes, try to scale down the layers proportionally. The automatic scaling
2712		// will make use of an option, 'autoScaleReference', by comparing the current width of the slider
2713		// with the reference width. So, if the reference width is 1000 pixels and the current width is
2714		// 500 pixels, it means that the layers will be scaled down to 50% of their size.
2715		_layersOnResize: function() {
2716			var that = this,
2717				autoScaleReference,
2718				useAutoScale = this.settings.autoScaleLayers,
2719				scaleRatio;
2720
2721			if ( this.settings.autoScaleLayers === false ) {
2722				// Show the layers for the initial slide
2723				this.showLayers( this.selectedSlideIndex );
2724				
2725				return;
2726			}
2727
2728			// If there isn't a reference for how the layers should scale down automatically, use the 'width'
2729			// option as a reference, unless the width was set to a percentage. If there isn't a set reference and
2730			// the width was set to a percentage, auto scaling will not be used because it's not possible to
2731			// calculate how much should the layers scale.
2732			if ( this.settings.autoScaleReference === -1 ) {
2733				if ( typeof this.settings.width === 'string' && this.settings.width.indexOf( '%' ) !== -1 ) {
2734					useAutoScale = false;
2735				} else {
2736					autoScaleReference = parseInt( this.settings.width, 10 );
2737				}
2738			} else {
2739				autoScaleReference = this.settings.autoScaleReference;
2740			}
2741
2742			if ( useAutoScale === true && this.slideWidth < autoScaleReference ) {
2743				scaleRatio = that.slideWidth / autoScaleReference;
2744			} else {
2745				scaleRatio = 1;
2746			}
2747
2748			$.each( this.slides, function( index, slide ) {
2749				if ( typeof slide.layers !== 'undefined' ) {
2750					$.each( slide.layers, function( index, layer ) {
2751						layer.scale( scaleRatio );
2752					});
2753				}
2754			});
2755
2756			// Show the layers for the initial slide
2757			this.showLayers( this.selectedSlideIndex );
2758		},
2759
2760		// Replace the 'gotoSlide' method with this one, which makes it possible to 
2761		// change the slide only after the layers from the previous slide are hidden.
2762		_layersGotoSlide: function( index ) {
2763			var that = this,
2764				animatedLayers = this.slides[ this.selectedSlideIndex ].animatedLayers;
2765
2766			// If the slider is dragged, don't wait for the layer to hide
2767			if ( this.$slider.hasClass( 'sp-swiping' ) || typeof animatedLayers === 'undefined' || animatedLayers.length === 0  ) {
2768				this.layersGotoSlideReference( index );
2769			} else {
2770				this.on( 'hideLayersComplete.' + NS, function() {
2771					that.off( 'hideLayersComplete.' + NS );
2772					that.layersGotoSlideReference( index );
2773				});
2774
2775				this.hideLayers( this.selectedSlideIndex );
2776			}
2777		},
2778
2779		// When a new slide is selected, hide the layers from the previous slide
2780		// and show the layers from the current slide.
2781		_layersOnGotoSlide: function( event ) {
2782			if ( this.previousSlideIndex !== this.selectedSlideIndex ) {
2783				this.hideLayers( this.previousSlideIndex );
2784			}
2785
2786			this.showLayers( this.selectedSlideIndex );
2787		},
2788
2789		// Show the animated layers from the slide at the specified index,
2790		// and fire an event when all the layers from the slide become visible.
2791		showLayers: function( index ) {
2792			var that = this,
2793				animatedLayers = this.slides[ index ].animatedLayers,
2794				layerCounter = 0;
2795
2796			if ( typeof animatedLayers === 'undefined' ) {
2797				return;
2798			}
2799
2800			$.each( animatedLayers, function( index, element ) {
2801
2802				// If the layer is already visible, increment the counter directly, else wait 
2803				// for the layer's showing animation to complete.
2804				if ( element.isVisible() === true ) {
2805					layerCounter++;
2806
2807					if ( layerCounter === animatedLayers.length ) {
2808						that.trigger({ type: 'showLayersComplete', index: index });
2809						if ( $.isFunction( that.settings.showLayersComplete ) ) {
2810							that.settings.showLayersComplete.call( that, { type: 'showLayersComplete', index: index });
2811						}
2812					}
2813				} else {
2814					element.show(function() {
2815						layerCounter++;
2816
2817						if ( layerCounter === animatedLayers.length ) {
2818							that.trigger({ type: 'showLayersComplete', index: index });
2819							if ( $.isFunction( that.settings.showLayersComplete ) ) {
2820								that.settings.showLayersComplete.call( that, { type: 'showLayersComplete', index: index });
2821							}
2822						}
2823					});
2824				}
2825			});
2826		},
2827
2828		// Hide the animated layers from the slide at the specified index,
2829		// and fire an event when all the layers from the slide become invisible.
2830		hideLayers: function( index ) {
2831			var that = this,
2832				animatedLayers = this.slides[ index ].animatedLayers,
2833				layerCounter = 0;
2834
2835			if ( typeof animatedLayers === 'undefined' ) {
2836				return;
2837			}
2838
2839			$.each( animatedLayers, function( index, element ) {
2840
2841				// If the layer is already invisible, increment the counter directly, else wait 
2842				// for the layer's hiding animation to complete.
2843				if ( element.isVisible() === false ) {
2844					layerCounter++;
2845
2846					if ( layerCounter === animatedLayers.length ) {
2847						that.trigger({ type: 'hideLayersComplete', index: index });
2848						if ( $.isFunction( that.settings.hideLayersComplete ) ) {
2849							that.settings.hideLayersComplete.call( that, { type: 'hideLayersComplete', index: index });
2850						}
2851					}
2852				} else {
2853					element.hide(function() {
2854						layerCounter++;
2855
2856						if ( layerCounter === animatedLayers.length ) {
2857							that.trigger({ type: 'hideLayersComplete', index: index });
2858							if ( $.isFunction( that.settings.hideLayersComplete ) ) {
2859								that.settings.hideLayersComplete.call( that, { type: 'hideLayersComplete', index: index });
2860							}
2861						}
2862					});
2863				}
2864			});
2865		},
2866
2867		// Destroy the module
2868		destroyLayers: function() {
2869			this.off( 'update.' + NS );
2870			this.off( 'resize.' + NS );
2871			this.off( 'gotoSlide.' + NS );
2872			this.off( 'hideLayersComplete.' + NS );
2873		},
2874
2875		layersDefaults: {
2876
2877			// Indicates whether the slider will wait for the layers to disappear before
2878			// going to a new slide
2879			waitForLayers: false,
2880
2881			// Indicates whether the layers will be scaled automatically
2882			autoScaleLayers: true,
2883
2884			// Sets a reference width which will be compared to the current slider width
2885			// in order to determine how much the layers need to scale down. By default,
2886			// the reference width will be equal to the slide width. However, if the slide width
2887			// is set to a percentage value, then it's necessary to set a specific value for 'autoScaleReference'.
2888			autoScaleReference: -1,
2889
2890			// Called when all animated layers become visible
2891			showLayersComplete: function() {},
2892
2893			// Called when all animated layers become invisible
2894			hideLayersComplete: function() {}
2895		}
2896	};
2897
2898	// Override the slide's 'destroy' method in order to destroy the 
2899	// layers that where added to the slide as well.
2900	var slideDestroy = window.SliderProSlide.prototype.destroy;
2901
2902	window.SliderProSlide.prototype.destroy = function() {
2903		if ( typeof this.layers !== 'undefined' ) {
2904			$.each( this.layers, function( index, element ) {
2905				element.destroy();
2906			});
2907
2908			this.layers.length = 0;
2909		}
2910
2911		if ( typeof this.animatedLayers !== 'undefined' ) {
2912			this.animatedLayers.length = 0;
2913		}
2914
2915		slideDestroy.apply( this );
2916	};
2917
2918	var Layer = function( layer ) {
2919
2920		// Reference to the layer jQuery element
2921		this.$layer = layer;
2922
2923		// Indicates whether a layer is currently visible or hidden
2924		this.visible = false;
2925
2926		// Indicates whether the layer was styled
2927		this.styled = false;
2928
2929		// Holds the data attributes added to the layer
2930		this.data = null;
2931
2932		// Indicates the layer's reference point (topLeft, bottomLeft, topRight or bottomRight)
2933		this.position = null;
2934		
2935		// Indicates which CSS property (left or right) will be used for positioning the layer 
2936		this.horizontalProperty = null;
2937		
2938		// Indicates which CSS property (top or bottom) will be used for positioning the layer 
2939		this.verticalProperty = null;
2940
2941		// Indicates the value of the horizontal position
2942		this.horizontalPosition = null;
2943		
2944		// Indicates the value of the vertical position
2945		this.verticalPosition = null;
2946
2947		// Indicates how much the layers needs to be scaled
2948		this.scaleRatio = 1;
2949
2950		// Indicates the type of supported transition (CSS3 2D, CSS3 3D or JavaScript)
2951		this.supportedAnimation = SliderProUtils.getSupportedAnimation();
2952
2953		// Indicates the required vendor prefix for CSS (i.e., -webkit, -moz, etc.)
2954		this.vendorPrefix = SliderProUtils.getVendorPrefix();
2955
2956		// Indicates the name of the CSS transition's complete event (i.e., transitionend, webkitTransitionEnd, etc.)
2957		this.transitionEvent = SliderProUtils.getTransitionEvent();
2958
2959		// Reference to the timer that will be used to hide the layers automatically after a given time interval
2960		this.stayTimer = null;
2961
2962		this._init();
2963	};
2964
2965	Layer.prototype = {
2966
2967		// Initialize the layers
2968		_init: function() {
2969			this.$layer.attr( 'data-init', true );
2970
2971			if ( this.$layer.hasClass( 'sp-static' ) ) {
2972				this._setStyle();
2973			} else {
2974				this.$layer.css({ 'visibility': 'hidden', 'display': 'none' });
2975			}
2976		},
2977
2978		// Set the size and position of the layer
2979		_setStyle: function() {
2980			this.styled = true;
2981
2982			this.$layer.css( 'display', '' );
2983
2984			// Get the data attributes specified in HTML
2985			this.data = this.$layer.data();
2986			
2987			if ( typeof this.data.width !== 'undefined' ) {
2988				this.$layer.css( 'width', this.data.width );
2989			}
2990
2991			if ( typeof this.data.height !== 'undefined' ) {
2992				this.$layer.css( 'height', this.data.height );
2993			}
2994
2995			if ( typeof this.data.depth !== 'undefined' ) {
2996				this.$layer.css( 'z-index', this.data.depth );
2997			}
2998
2999			this.position = this.data.position ? ( this.data.position ).toLowerCase() : 'topleft';
3000
3001			if ( this.position.indexOf( 'right' ) !== -1 ) {
3002				this.horizontalProperty = 'right';
3003			} else if ( this.position.indexOf( 'left' ) !== -1 ) {
3004				this.horizontalProperty = 'left';
3005			} else {
3006				this.horizontalProperty = 'center';
3007			}
3008
3009			if ( this.position.indexOf( 'bottom' ) !== -1 ) {
3010				this.verticalProperty = 'bottom';
3011			} else if ( this.position.indexOf( 'top' ) !== -1 ) {
3012				this.verticalProperty = 'top';
3013			} else {
3014				this.verticalProperty = 'center';
3015			}
3016
3017			this._setPosition();
3018
3019			this.scale( this.scaleRatio );
3020		},
3021
3022		// Set the position of the layer
3023		_setPosition: function() {
3024			var inlineStyle = this.$layer.attr( 'style' );
3025
3026			this.horizontalPosition = typeof this.data.horizontal !== 'undefined' ? this.data.horizontal : 0;
3027			this.verticalPosition = typeof this.data.vertical !== 'undefined' ? this.data.vertical : 0;
3028
3029			// Set the horizontal position of the layer based on the data set
3030			if ( this.horizontalProperty === 'center' ) {
3031				
3032				// prevent content wrapping while setting the width
3033				if ( typeof inlineStyle === 'undefined' || ( typeof inlineStyle !== 'undefined' && inlineStyle.indexOf( 'width' ) === -1 ) ) {
3034					this.$layer.css( 'white-space', 'nowrap' );
3035					this.$layer.css( 'width', this.$layer.outerWidth( true ) );
3036				}
3037
3038				this.$layer.css({ 'marginLeft': 'auto', 'marginRight': 'auto', 'left': this.horizontalPosition, 'right': 0 });
3039			} else {
3040				this.$layer.css( this.horizontalProperty, this.horizontalPosition );
3041			}
3042
3043			// Set the vertical position of the layer based on the data set
3044			if ( this.verticalProperty === 'center' ) {
3045
3046				// prevent content wrapping while setting the height
3047				if ( typeof inlineStyle === 'undefined' || ( typeof inlineStyle !== 'undefined' && inlineStyle.indexOf( 'height' ) === -1 ) ) {
3048					this.$layer.css( 'white-space', 'nowrap' );
3049					this.$layer.css( 'height', this.$layer.outerHeight( true ) );
3050				}
3051
3052				this.$layer.css({ 'marginTop': 'auto', 'marginBottom': 'auto', 'top': this.verticalPosition, 'bottom': 0 });
3053			} else {
3054				this.$layer.css( this.verticalProperty, this.verticalPosition );
3055			}
3056		},
3057
3058		// Scale the layer
3059		scale: function( ratio ) {
3060
3061			// Return if the layer is set to be unscalable
3062			if ( this.$layer.hasClass( 'sp-no-scale' ) ) {
3063				return;
3064			}
3065
3066			// Store the ratio (even if the layer is not ready to be scaled yet)
3067			this.scaleRatio = ratio;
3068
3069			// Return if the layer is not styled yet
3070			if ( this.styled === false ) {
3071				return;
3072			}
3073
3074			var horizontalProperty = this.horizontalProperty === 'center' ? 'left' : this.horizontalProperty,
3075				verticalProperty = this.verticalProperty === 'center' ? 'top' : this.verticalProperty,
3076				css = {};
3077
3078			// Apply the scaling
3079			css[ this.vendorPrefix + 'transform-origin' ] = this.horizontalProperty + ' ' + this.verticalProperty;
3080			css[ this.vendorPrefix + 'transform' ] = 'scale(' + this.scaleRatio + ')';
3081
3082			// If the position is not set to a percentage value, apply the scaling to the position
3083			if ( typeof this.horizontalPosition !== 'string' ) {
3084				css[ horizontalProperty ] = this.horizontalPosition * this.scaleRatio;
3085			}
3086
3087			// If the position is not set to a percentage value, apply the scaling to the position
3088			if ( typeof this.verticalPosition !== 'string' ) {
3089				css[ verticalProperty ] = this.verticalPosition * this.scaleRatio;
3090			}
3091
3092			// If the width or height is set to a percentage value, increase the percentage in order to
3093			// maintain the same layer to slide proportions. This is necessary because otherwise the scaling
3094			// transform would minimize the layers more than intended.
3095			if ( typeof this.data.width === 'string' && this.data.width.indexOf( '%' ) !== -1 ) {
3096				css.width = ( parseInt( this.data.width, 10 ) / this.scaleRatio ).toString() + '%';
3097			}
3098
3099			if ( typeof this.data.height === 'string' && this.data.height.indexOf( '%' ) !== -1 ) {
3100				css.height = ( parseInt( this.data.height, 10 ) / this.scaleRatio ).toString() + '%';
3101			}
3102
3103			this.$layer.css( css );
3104		},
3105
3106		// Show the layer
3107		show: function( callback ) {
3108			if ( this.visible === true ) {
3109				return;
3110			}
3111
3112			this.visible = true;
3113
3114			// First, style the layer if it's not already styled
3115			if ( this.styled === false ) {
3116				this._setStyle();
3117			}
3118
3119			var that = this,
3120				offset = typeof this.data.showOffset !== 'undefined' ? this.data.showOffset : 50,
3121				duration = typeof this.data.showDuration !== 'undefined' ? this.data.showDuration / 1000 : 0.4,
3122				delay = typeof this.data.showDelay !== 'undefined' ? this.data.showDelay : 10,
3123				stayDuration = typeof that.data.stayDuration !== 'undefined' ? parseInt( that.data.stayDuration, 10 ) : -1;
3124
3125			// Animate the layers with CSS3 or with JavaScript
3126			if ( this.supportedAnimation === 'javascript' ) {
3127				this.$layer
3128					.stop()
3129					.delay( delay )
3130					.css({ 'opacity': 0, 'visibility': 'visible' })
3131					.animate( { 'opacity': 1 }, duration * 1000, function() {
3132
3133						// Hide the layer after a given time interval
3134						if ( stayDuration !== -1 ) {
3135							that.stayTimer = setTimeout(function() {
3136								that.hide();
3137								that.stayTimer = null;
3138							}, stayDuration );
3139						}
3140
3141						if ( typeof callback !== 'undefined' ) {
3142							callback();
3143						}
3144					});
3145			} else {
3146				var start = { 'opacity': 0, 'visibility': 'visible' },
3147					target = { 'opacity': 1 },
3148					transformValues = '';
3149
3150				start[ this.vendorPrefix + 'transform' ] = 'scale(' + this.scaleRatio + ')';
3151				target[ this.vendorPrefix + 'transform' ] = 'scale(' + this.scaleRatio + ')';
3152				target[ this.vendorPrefix + 'transition' ] = 'opacity ' + duration + 's';
3153
3154				if ( typeof this.data.showTransition !== 'undefined' ) {
3155					if ( this.data.showTransition === 'left' ) {
3156						transformValues = offset + 'px, 0';
3157					} else if ( this.data.showTransition === 'right' ) {
3158						transformValues = '-' + offset + 'px, 0';
3159					} else if ( this.data.showTransition === 'up' ) {
3160						transformValues = '0, ' + offset + 'px';
3161					} else if ( this.data.showTransition === 'down') {
3162						transformValues = '0, -' + offset + 'px';
3163					}
3164
3165					start[ this.vendorPrefix + 'transform' ] += this.supportedAnimation === 'css-3d' ? ' translate3d(' + transformValues + ', 0)' : ' translate(' + transformValues + ')';
3166					target[ this.vendorPrefix + 'transform' ] += this.supportedAnimation === 'css-3d' ? ' translate3d(0, 0, 0)' : ' translate(0, 0)';
3167					target[ this.vendorPrefix + 'transition' ] += ', ' + this.vendorPrefix + 'transform ' + duration + 's';
3168				}
3169
3170				// Listen when the layer animation is complete
3171				this.$layer.on( this.transitionEvent, function( event ) {
3172					if ( event.target !== event.currentTarget ) {
3173						return;
3174					}
3175
3176					that.$layer
3177						.off( that.transitionEvent )
3178						.css( that.vendorPrefix + 'transition', '' );
3179
3180					// Hide the layer after a given time interval
3181					if ( stayDuration !== -1 ) {
3182						that.stayTimer = setTimeout(function() {
3183							that.hide();
3184							that.stayTimer = null;
3185						}, stayDuration );
3186					}
3187
3188					if ( typeof callback !== 'undefined' ) {
3189						callback();
3190					}
3191				});
3192
3193				this.$layer.css( start );
3194
3195				setTimeout( function() {
3196					that.$layer.css( target );
3197				}, delay );
3198			}
3199		},
3200
3201		// Hide the layer
3202		hide: function( callback ) {
3203			if ( this.visible === false ) {
3204				return;
3205			}
3206
3207			var that = this,
3208				offset = typeof this.data.hideOffset !== 'undefined' ? this.data.hideOffset : 50,
3209				duration = typeof this.data.hideDuration !== 'undefined' ? this.data.hideDuration / 1000 : 0.4,
3210				delay = typeof this.data.hideDelay !== 'undefined' ? this.data.hideDelay : 10;
3211
3212			this.visible = false;
3213
3214			// If the layer is hidden before it hides automatically, clear the timer
3215			if ( this.stayTimer !== null ) {
3216				clearTimeout( this.stayTimer );
3217			}
3218
3219			// Animate the layers with CSS3 or with JavaScript
3220			if ( this.supportedAnimation === 'javascript' ) {
3221				this.$layer
3222					.stop()
3223					.delay( delay )
3224					.animate({ 'opacity': 0 }, duration * 1000, function() {
3225						$( this ).css( 'visibility', 'hidden' );
3226
3227						if ( typeof callback !== 'undefined' ) {
3228							callback();
3229						}
3230					});
3231			} else {
3232				var transformValues = '',
3233					target = { 'opacity': 0 };
3234
3235				target[ this.vendorPrefix + 'transform' ] = 'scale(' + this.scaleRatio + ')';
3236				target[ this.vendorPrefix + 'transition' ] = 'opacity ' + duration + 's';
3237
3238				if ( typeof this.data.hideTransition !== 'undefined' ) {
3239					if ( this.data.hideTransition === 'left' ) {
3240						transformValues = '-' + offset + 'px, 0';
3241					} else if ( this.data.hideTransition === 'right' ) {
3242						transformValues = offset + 'px, 0';
3243					} else if ( this.data.hideTransition === 'up' ) {
3244						transformValues = '0, -' + offset + 'px';
3245					} else if ( this.data.hideTransition === 'down' ) {
3246						transformValues = '0, ' + offset + 'px';
3247					}
3248
3249					target[ this.vendorPrefix + 'transform' ] += this.supportedAnimation === 'css-3d' ? ' translate3d(' + transformValues + ', 0)' : ' translate(' + transformValues + ')';
3250					target[ this.vendorPrefix + 'transition' ] += ', ' + this.vendorPrefix + 'transform ' + duration + 's';
3251				}
3252
3253				// Listen when the layer animation is complete
3254				this.$layer.on( this.transitionEvent, function( event ) {
3255					if ( event.target !== event.currentTarget ) {
3256						return;
3257					}
3258
3259					that.$layer
3260						.off( that.transitionEvent )
3261						.css( that.vendorPrefix + 'transition', '' );
3262
3263					// Hide the layer after transition
3264					if ( that.visible === false ) {
3265						that.$layer.css( 'visibility', 'hidden' );
3266					}
3267
3268					if ( typeof callback !== 'undefined' ) {
3269						callback();
3270					}
3271				});
3272
3273				setTimeout( function() {
3274					that.$layer.css( target );
3275				}, delay );
3276			}
3277		},
3278
3279		isVisible: function() {
3280			if ( this.visible === false || this.$layer.is( ':hidden' ) ) {
3281				return false;
3282			}
3283
3284			return true;
3285		},
3286
3287		// Destroy the layer
3288		destroy: function() {
3289			this.$layer.removeAttr( 'style' );
3290			this.$layer.removeAttr( 'data-init' );
3291		}
3292	};
3293
3294	$.SliderPro.addModule( 'Layers', Layers );
3295	
3296})( window, jQuery );
3297
3298// Fade module for Slider Pro.
3299// 
3300// Adds the possibility to navigate through slides using a cross-fade effect.
3301;(function( window, $ ) {
3302
3303	"use strict";
3304
3305	var NS = 'Fade.' + $.SliderPro.namespace;
3306
3307	var Fade = {
3308
3309		// Reference to the original 'gotoSlide' method
3310		fadeGotoSlideReference: null,
3311
3312		initFade: function() {
3313			this.on( 'update.' + NS, $.proxy( this._fadeOnUpdate, this ) );
3314		},
3315
3316		// If fade is enabled, store a reference to the original 'gotoSlide' method
3317		// and then assign a new function to 'gotoSlide'.
3318		_fadeOnUpdate: function() {
3319			if ( this.settings.fade === true ) {
3320				this.fadeGotoSlideReference = this.gotoSlide;
3321				this.gotoSlide = this._fadeGotoSlide;
3322			}
3323		},
3324
3325		// Will replace the original 'gotoSlide' function by adding a cross-fade effect
3326		// between the previous and the next slide.
3327		_fadeGotoSlide: function( index ) {
3328			if ( index === this.selectedSlideIndex ) {
3329				return;
3330			}
3331			
3332			// If the slides are being swiped/dragged, don't use fade, but call the original method instead.
3333			// If not, which means that a new slide was selected through a button, arrows or direct call, then
3334			// use fade.
3335			if ( this.$slider.hasClass( 'sp-swiping' ) ) {
3336				this.fadeGotoSlideReference( index );
3337			} else {
3338				var that = this,
3339					$nextSlide,
3340					$previousSlide,
3341					newIndex = index;
3342
3343				// Loop through all the slides and overlap the the previous and next slide,
3344				// and hide the other slides.
3345				$.each( this.slides, function( index, element ) {
3346					var slideIndex = element.getIndex(),
3347						$slide = element.$slide;
3348
3349					if ( slideIndex === newIndex ) {
3350						$slide.css({ 'opacity': 0, 'left': 0, 'top': 0, 'z-index': 20 });
3351						$nextSlide = $slide;
3352					} else if ( slideIndex === that.selectedSlideIndex ) {
3353						$slide.css({ 'opacity': 1, 'left': 0, 'top': 0, 'z-index': 10 });
3354						$previousSlide = $slide;
3355					} else {
3356						$slide.css( 'visibility', 'hidden' );
3357					}
3358				});
3359
3360				// Set the new indexes for the previous and selected slides
3361				this.previousSlideIndex = this.selectedSlideIndex;
3362				this.selectedSlideIndex = index;
3363
3364				// Rearrange the slides if the slider is loopable
3365				if ( that.settings.loop === true ) {
3366					that._updateSlidesOrder();
3367				}
3368
3369				// Move the slides container so that the cross-fading slides (which now have the top and left
3370				// position set to 0) become visible and in the center of the slider.
3371				this._moveTo( this.visibleOffset, true );
3372
3373				// Fade out the previous slide, if indicated, in addition to fading in the next slide
3374				if ( this.settings.fadeOutPreviousSlide === true ) {
3375					this._fadeSlideTo( $previousSlide, 0 );
3376				}
3377
3378				// Fade in the selected slide
3379				this._fadeSlideTo( $nextSlide, 1, function() {
3380
3381					// After the animation is over, make all the slides visible again
3382					$.each( that.slides, function( index, element ) {
3383						var $slide = element.$slide;
3384						$slide.css({ 'visibility': '', 'opacity': '', 'z-index': '' });
3385					});
3386					
3387					// Reset the position of the slides and slides container
3388					that._resetSlidesPosition();
3389
3390					// Fire the 'gotoSlideComplete' event
3391					that.trigger({ type: 'gotoSlideComplete', index: index, previousIndex: that.previousSlideIndex });
3392					if ( $.isFunction( that.settings.gotoSlideComplete ) ) {
3393						that.settings.gotoSlideComplete.call( that, { type: 'gotoSlideComplete', index: index, previousIndex: that.previousSlideIndex } );
3394					}
3395				});
3396
3397				if ( this.settings.autoHeight === true ) {
3398					this._resizeHeight();
3399				}
3400
3401				// Fire the 'gotoSlide' event
3402				this.trigger({ type: 'gotoSlide', index: index, previousIndex: this.previousSlideIndex });
3403				if ( $.isFunction( this.settings.gotoSlide ) ) {
3404					this.settings.gotoSlide.call( this, { type: 'gotoSlide', index: index, previousIndex: this.previousSlideIndex });
3405				}
3406			}
3407		},
3408
3409		// Fade the target slide to the specified opacity (0 or 1)
3410		_fadeSlideTo: function( target, opacity, callback ) {
3411			var that = this;
3412
3413			// Use CSS transitions if they are supported. If not, use JavaScript animation.
3414			if ( this.supportedAnimation === 'css-3d' || this.supportedAnimation === 'css-2d' ) {
3415
3416				// There needs to be a delay between the moment the opacity is set
3417				// and the moment the transitions starts.
3418				setTimeout(function(){
3419					var css = { 'opacity': opacity };
3420					css[ that.vendorPrefix + 'transition' ] = 'opacity ' + that.settings.fadeDuration / 1000 + 's';
3421					target.css( css );
3422				}, 1 );
3423
3424				target.on( this.transitionEvent, function( event ) {
3425					if ( event.target !== event.currentTarget ) {
3426						return;
3427					}
3428					
3429					target.off( that.transitionEvent );
3430					target.css( that.vendorPrefix + 'transition', '' );
3431
3432					if ( typeof callback === 'function' ) {
3433						callback();
3434					}
3435				});
3436			} else {
3437				target.stop().animate({ 'opacity': opacity }, this.settings.fadeDuration, function() {
3438					if ( typeof callback === 'function' ) {
3439						callback();
3440					}
3441				});
3442			}
3443		},
3444
3445		// Destroy the module
3446		destroyFade: function() {
3447			this.off( 'update.' + NS );
3448