http://jewishkiev.com.ua/plugins/jsnimageshow/themeslider/assets/js/skitter/jquery.skitter.js

1/**
2 * jQuery Skitter Slideshow
3 * @name jquery.skitter.js
4 * @description Slideshow
5 * @author Thiago Silva Ferreira - http://thiagosf.net
6 * @version 3.7
7 * @date August 04, 2010
8 * @update October 28, 2011
9 * @copyright (c) 2010 Thiago Silva Ferreira - http://thiagosf.net
10 * @license Dual licensed under the MIT or GPL Version 2 licenses
11 * @example http://thiagosf.net/projects/jquery/skitter/
12 */
13
14(function($) {
15	
16	var number_skitter = 0,
17		skitters = [];
18	
19	$.fn.skitter = function(options) {
20		return this.each(function() {
21			$(this).data('skitter_number', number_skitter);
22			skitters.push(new $sk(this, options, number_skitter));
23			++number_skitter;
24		});
25	};
26	
27	var defaults = {
28		velocity: 				1,
29		interval: 				2500, 
30		animation: 				'',
31		numbers: 				true,
32		navigation:			 	true,
33		label:					true,
34		easing_default: 		'',
35		box_skitter: 			null,
36		time_interval: 			null,
37		images_links: 			null,
38		image_atual: 			null,
39		link_atual: 			null,
40		label_atual: 			null,
41		target_atual: 			'_self',
42		width_skitter: 			null,
43		height_skitter: 		null,
44		image_i: 				1,
45		is_animating:  			false,
46		is_hover_box_skitter: 	false,
47		random_ia: 				null,
48		show_randomly: 			false,
49		thumbs: 				false,
50		animateNumberOut: 		{backgroundColor:'#333', color:'#fff'},
51		animateNumberOver: 		{backgroundColor:'#fff', color:'#000'},
52		animateNumberActive: 	{backgroundColor:'#cc3333', color:'#fff'},
53		hideTools: 				false,
54		fullscreen: 			false,
55		xml: 					false,
56		dots: 					false,
57		width_label: 			null,
58		opacity_elements:		0.75, // Final opacity of elements in hideTools
59		interval_in_elements:	300, // Interval animation hover elements hideTools
60		interval_out_elements:	500, // Interval animation out elements hideTools
61		onLoad:					null,
62		imageSwitched:			null,
63		max_number_height: 		20,
64		numbers_align:			'left',
65		preview:				false,
66		focus:					false,
67		foucs_active:			false,
68		focus_position:			'center',
69		controls:				false,
70		controls_position:		'center',
71		progressbar:			false,
72		progressbar_css:		{},
73		is_paused:				false,
74		is_blur:				false,
75		is_paused_time:			false,
76		timeStart:				0,
77		elapsedTime:			0,
78		stop_over:				true,
79		enable_navigation_keys:	false,
80		structure: 	 			  '<span class="prev_button">prev</span>'
81								+ '<span class="next_button">next</span>'
82								+ '<span class="info_slide"></span>'
83								+ '<div class="container_skitter">'
84									+ '<div class="image">'
85										+ '<a href=""><img class="image_main" /></a>'
86										+ '<div class="label_skitter"></div>'
87									+ '</div>'
88								+ '</div>',
89		navShowOnMouseOver : false,
90		controlShowOnMouseOver : false,
91		auto_play: true,
92		base_width: '',
93		base_height: ''		
94		
95	};
96	
97	$.skitter = function(obj, options, number) {
98		this.box_skitter = $(obj);
99		this.timer = null;
100		this.settings = $.extend({}, defaults, options || {});
101		this.number_skitter = number;
102		this.setup();
103	};
104	
105	// Shortcut
106	var $sk = $.skitter;
107	
108	$sk.fn = $sk.prototype = {};
109	
110	$sk.fn.extend = $.extend;
111	
112	$sk.fn.extend({
113		
114		/**
115		 * Init
116		 */
117		setup: function() 
118		{
119			var self = this;
120
121			// Fullscreen
122			if (this.settings.fullscreen) {
123				var width = $(window).width();
124				var height = $(window).height();
125				this.box_skitter.width(width).height(height);
126				this.box_skitter.css({'position':'absolute', 'top':0, 'left':0, 'z-index':1000});
127				this.settings.stop_over = false;
128				$('body').css({'overflown':'hidden'});
129			}
130			
131			this.settings.width_skitter 	= parseFloat(this.box_skitter.css('width'));
132			this.settings.height_skitter 	= parseFloat(this.box_skitter.css('height'));
133			
134			if (!this.settings.width_skitter || !this.settings.height_skitter) {
135				console.warn('Width or height size is null! - Skitter Slideshow');
136				return false;
137			}
138			
139			// Structure html
140			this.box_skitter.append(this.settings.structure);
141			
142			// Settings
143			this.settings.easing_default 	= this.getEasing(this.settings.easing);
144						
145			if (this.settings.velocity >= 2) this.settings.velocity = 1.3;
146			if (this.settings.velocity <= 0) this.settings.velocity = 1;
147			
148			if (!this.settings.numbers && !this.settings.thumbs && !this.settings.dots) this.box_skitter.find('.info_slide').hide();
149			if (!this.settings.label) this.box_skitter.find('.label_skitter').hide();
150			if (!this.settings.navigation || (this.settings.navigation && this.settings.navShowOnMouseOver)) {
151				this.box_skitter.find('.prev_button').hide();
152				this.box_skitter.find('.next_button').hide();
153			}
154			
155			this.box_skitter.find('.container_skitter').width(this.settings.width_skitter);
156			this.box_skitter.find('.container_skitter').height(this.settings.height_skitter);
157			
158			var width_label = this.settings.width_label ? this.settings.width_label : this.settings.width_skitter;
159			this.box_skitter.find('.label_skitter').width(width_label);
160			
161			var initial_select_class = ' image_number_select', u = 0;
162			this.settings.images_links = new Array();
163			
164			// Add image, link, animation type and label
165			var addImageLink = function (link, src, animation_type, label, target) {
166				self.settings.images_links.push([src, link, animation_type, label, target]);
167				if (self.settings.thumbs) {
168					var dimension_thumb = '';
169					if (self.settings.width_skitter > self.settings.height_skitter) {
170						dimension_thumb = 'height="100"';
171					} 
172					else {
173						dimension_thumb = 'width="100"';

174					}
175					self.box_skitter.find('.info_slide').append(
176						'<span class="image_number'+initial_select_class+'" rel="'+(u - 1)+'" id="image_n_'+u+'_'+self.number_skitter+'">'
177							+'<img src="'+src+'" '+dimension_thumb+' />'
178							+'</span> '
179					);
180				}
181				else {
182					self.box_skitter.find('.info_slide').append(
183						'<span class="image_number'+initial_select_class+'" rel="'+(u - 1)+'" id="image_n_'+u+'_'+self.number_skitter+'">'+u+'</span> '
184					);
185				}
186				initial_select_class = '';
187			};
188
189			// Load from XML
190			if (this.settings.xml) {
191				$.ajax({
192					type: 'GET',
193					url: this.settings.xml,
194					async: false,
195					dataType: 'xml',
196					success: function(xml) {
197						var ul = $('<ul></ul>');
198						$(xml).find('skitter slide').each(function(){
199							++u;
200							var link 			= ($(this).find('link').text()) ? $(this).find('link').text() : '#';
201							var src 			= $(this).find('image').text();
202							var animation_type 	= $(this).find('image').attr('type');
203							var label 			= $(this).find('label').text();
204							var target 			= ($(this).find('target').text()) ? $(this).find('target').text() : '_self';
205							addImageLink(link, src, animation_type, label, target);
206						});
207					}
208				});
209			}
210			// Load from json
211			else if (this.settings.json) {
212				
213			}
214			// Load from HTML
215			else {
216				this.box_skitter.find('ul li').each(function(){
217					++u;
218					var link 			= ($(this).find('a').length) ? $(this).find('a').attr('href') : '#';
219					var src 			= $(this).find('img').attr('src');
220					var animation_type 	= $(this).find('img').attr('class');
221					var label 			= $(this).find('.label_text').html();
222					var target 			= ($(this).find('a').length && $(this).find('a').attr('target')) ? $(this).find('a').attr('target') : '_self';
223					addImageLink(link, src, animation_type, label, target);
224				});
225			}
226			
227			// Thumbs
228			if (self.settings.thumbs) 
229			{
230				// New animation
231				self.settings.animateNumberOut = {opacity:0.2, width:'70px'};
232				self.settings.animateNumberOver = {opacity:0.5, width:'70px'};
233				self.settings.animateNumberActive = {opacity:1.0, width:'70px'};
234				
235				self.box_skitter.find('.info_slide').addClass('info_slide_thumb');
236				var width_info_slide = u * 55 + 75;
237				self.box_skitter.find('.info_slide_thumb').width(width_info_slide);
238				self.box_skitter.css({height:self.box_skitter.height() + self.box_skitter.find('.info_slide').height() + 5});
239				self.settings.label = false;
240				
241				self.box_skitter.append('<div class="container_thumbs"></div>');
242				var copy_info_slide = self.box_skitter.find('.info_slide').clone();
243				self.box_skitter.find('.info_slide').remove();
244				self.box_skitter.find('.container_thumbs')
245					.width(self.settings.width_skitter)
246					.height(50)
247					.append(copy_info_slide);
248				
249				// Scrolling with mouse movement
250				var width_image = 0, 
251					width_skitter = this.settings.width_skitter,
252					height_skitter = this.settings.height_skitter, 
253					w_info_slide_thumb = 0,
254					info_slide_thumb = self.box_skitter.find('.info_slide_thumb'),
255					x_value = 0,
256					y_value = self.box_skitter.offset().top;
257					
258				info_slide_thumb.find('.image_number').each(function(){
259					width_image += $(this).width() 
260								+ parseInt($(this).css('marginLeft')) 
261								+ parseInt($(this).css('marginRight')) 
262								+ parseInt($(this).css('paddingLeft')) 
263								+ parseInt($(this).css('paddingRight'));
264				});
265				
266				info_slide_thumb.width(width_image+'px');
267				w_info_slide_thumb = info_slide_thumb.width();
268				width_valor = this.settings.width_skitter;
269				
270				width_valor = width_skitter - 100;
271				
272				if (width_info_slide > self.settings.width_skitter) {
273					self.box_skitter.mousemove(function(e){
274						x_value = self.box_skitter.offset().left + 90;
275						
276						var x = e.pageX, y = e.pageY, new_x = 0;
277						
278						x = x - x_value;
279						y = y - y_value;
280						novo_width = w_info_slide_thumb - width_valor;
281						new_x = -((novo_width * x) / width_valor);
282						
283						if (new_x > 0) new_x = 0;
284						if (new_x < -(w_info_slide_thumb - width_skitter - 5)) new_x = -(w_info_slide_thumb - width_skitter - 5);
285						
286						if (y > height_skitter) {
287							info_slide_thumb.css({left: new_x});
288						}
289					});
290				}
291				
292				self.box_skitter.find('.scroll_thumbs').css({'left':10});
293				
294				if (width_info_slide < self.settings.width_skitter) {
295					self.box_skitter.find('.info_slide').width('auto');
296					self.box_skitter.find('.box_scroll_thumbs').hide();
297					
298					var class_info = '.info_slide';
299					switch (self.settings.numbers_align) {
300						case 'center' : 
301							var _vleft = (self.settings.width_skitter - self.box_skitter.find(class_info).width()) / 2;
302							self.box_skitter.find(class_info).css({'left':_vleft});
303							break;
304							
305						case 'right' : 
306							self.box_skitter.find(class_info).css({'left':'auto', 'right':'-5px'});
307							break;
308							
309						case 'left' : 
310							self.box_skitter.find(class_info).css({'left':'0px'});
311							break;
312					}
313				}
314				
315			}
316			else 
317			{
318				var class_info = '.info_slide';
319				
320				if (self.settings.dots) {
321					self.box_skitter.find('.info_slide').addClass('info_slide_dots').removeClass('info_slide');
322					class_info = '.info_slide_dots';
323				}
324				
325				switch (self.settings.numbers_align) {
326					case 'center' : 
327						var _vleft = (self.settings.width_skitter - self.box_skitter.find(class_info).width()) / 2;
328						self.box_skitter.find(class_info).css({'left':_vleft});
329						break;
330						
331					case 'right' : 
332						self.box_skitter.find(class_info).css({'left':'auto', 'right':'15px'});
333						break;
334						
335					case 'left' : 
336						self.box_skitter.find(class_info).css({'left':'15px'});
337						break;
338				}
339				
340				if (!self.settings.dots) {
341					if (self.box_skitter.find('.info_slide').height() > 20) {
342						self.box_skitter.find('.info_slide').hide();
343					}
344				}
345				
346				if (self.settings.dots) {
347					if (self.box_skitter.find('.info_slide_dots').height() > 20) {
348						self.box_skitter.find('.info_slide_dots').hide();
349					}
350				}				
351			}
352			
353			this.box_skitter.find('ul').hide();
354			
355			if (this.settings.show_randomly)
356			this.settings.images_links.sort(function(a,b) {return Math.random() - 0.5;});
357			
358			this.settings.image_atual 	= this.settings.images_links[0][0];
359			this.settings.link_atual 	= this.settings.images_links[0][1];
360			this.settings.label_atual 	= this.settings.images_links[0][3];
361			this.settings.target_atual 	= this.settings.images_links[0][4];
362			
363			if (this.settings.images_links.length > 1) 
364			{
365				this.box_skitter.find('.prev_button').click(function() {
366					if (self.settings.is_animating == false) {
367						
368						self.settings.image_i -= 2;
369						
370						if (self.settings.image_i == -2) {
371							self.settings.image_i = self.settings.images_links.length - 2;
372						} 
373						else if (self.settings.image_i == -1) {
374							self.settings.image_i = self.settings.images_links.length - 1;
375						}
376						
377						self.jumpToImage(self.settings.image_i);
378					}
379					return false;

380				});
381				
382				this.box_skitter.find('.next_button').click(function() {
383					self.jumpToImage(self.settings.image_i);
384					return false;
385				});
386				
387				//self.box_skitter.find('.next_button, .prev_button').bind('mouseover', self.mouseOverButton);
388				self.box_skitter.find('.next_button, .prev_button').bind('mouseleave', self.mouseOutButton);
389				
390				this.box_skitter.find('.image_number').hover(function() {
391					if ($(this).attr('class') != 'image_number image_number_select') {
392						$(this).stop().animate(self.settings.animateNumberOver, 300);
393					}
394				}, function(){
395					if ($(this).attr('class') != 'image_number image_number_select') {
396						$(this).stop().animate(self.settings.animateNumberOut, 500);
397					}
398				});
399				
400				this.box_skitter.find('.image_number').click(function(){
401					if ($(this).attr('class') != 'image_number image_number_select') {
402					    var imageNumber = parseInt($(this).attr('rel'));
403						self.jumpToImage(imageNumber);
404					}
405					return false;
406				});
407				
408				this.box_skitter.find('.image_number').css(self.settings.animateNumberOut);
409				this.box_skitter.find('.image_number:eq(0)').css(self.settings.animateNumberActive);
410				
411				// Preview
412				if (self.settings.preview && self.settings.dots) 
413				{
414					var preview = $('<div id="preview_slide"><ul></ul></div>');
415					
416					for (var i = 0; i < this.settings.images_links.length; i++) {
417						var li = $('<li></li>');
418						var img = $('<img />');
419						img.attr('src', this.settings.images_links[i][0]);
420						li.append(img);
421						preview.find('ul').append(li);
422					}
423					
424					var width_preview_ul = parseInt(this.settings.images_links.length * 100);
425					preview.find('ul').width(width_preview_ul);
426					$(class_info).append(preview);
427					
428					self.box_skitter.find(class_info).find('.image_number').mouseenter(function() {
429						var _left_info = parseFloat(self.box_skitter.find(class_info).offset().left);
430						var _left_image = parseFloat($(this).offset().left);
431						var _left_preview = (_left_image - _left_info) - 43;
432						
433						var rel = parseInt($(this).attr('rel'));
434						var image_current_preview = self.box_skitter.find('#preview_slide_current img').attr('src');
435						var _left_ul = -(rel * 100);
436						
437						self.box_skitter.find('#preview_slide').find('ul').animate({left: _left_ul}, {duration:200, queue: false, easing: 'easeOutSine'});
438						self.box_skitter.find('#preview_slide').fadeTo(1,1).animate({left: _left_preview}, {duration:200, queue: false});
439					});
440					
441					self.box_skitter.find(class_info).mouseleave(function() {
442						$('#preview_slide').animate({opacity: 'hide'}, {duration: 200, queue: false});
443					});
444				}
445			}
446			
447			// Focus
448			if (self.settings.focus) {
449				self.focusSkitter();
450			}
451			
452			// Constrols
453			if (self.settings.controls) {
454				self.setControls();
455			}
456			
457			// Progressbar
458			if (self.settings.progressbar) {
459				self.addProgressBar();
460			}
461
462			// hideTools
463			if (self.settings.hideTools) {
464				self.hideTools();
465			}
466
467			// Navigation keys
468			if (self.settings.enable_navigation_keys) {
469				self.enableNavigationKeys();
470			}
471			
472			this.loadImages();
473		},
474		
475		/**
476		 * Load images
477		 */
478		loadImages: function () 
479		{
480			var self = this;
481			
482			var loading = $('<div class="loading">Loading</div>');
483			this.box_skitter.append(loading);
484			var total = this.settings.images_links.length;
485			
486			var u = 0;
487			$.each(this.settings.images_links, function(i)
488			{
489				var self_il = this;
490				var loading = $('<span class="image_loading"></span>');
491				loading.css({position:'absolute', top:'-9999em'});
492				self.box_skitter.append(loading);
493				var img = new Image();
494				
495				$(img).load(function () {
496					++u;
497					if (u == total) {	
498				
499						self.box_skitter.find('.loading').remove();
500						self.box_skitter.find('.image_loading').remove();
501						self.start();
502					}
503				}).error(function () {
504					self.box_skitter.find('.loading, .image_loading, .image_number, .next_button, .prev_button').remove();
505					self.box_skitter.html('<p style="color:white;background:black;">Error loading images. One or more images were not found.</p>');
506				}).attr('src', self_il[0]);
507			});
508		}, 
509		
510		/**
511		 * Start skitter
512		 */
513		start: function()
514		{
515			var self = this;
516			
517			self.startTime();
518			self.windowFocusOut();
519			self.setLinkAtual();
520			
521			self.box_skitter.find('.image a img').attr({'src': self.settings.image_atual});	

522			self.setResizeImage(true);
523			img_link = self.box_skitter.find('.image a');
524			img_link = self.resizeImage(img_link);
525			img_link.find('img').fadeIn(1500);
526			
527			self.setValueBoxText();
528			self.showBoxText();
529			
530			self.stopOnMouseOver();
531			self.navOnMouseOver();
532			// Start slideshow
533			if (self.settings.images_links.length > 1) {
534				self.autoPlay();
535			} 
536			else {
537				self.box_skitter.find('.loading, .image_loading, .image_number, .next_button, .prev_button').remove();
538			}
539			
540			if ($.isFunction(self.settings.onLoad)) self.settings.onLoad();
541		},
542		
543		autoPlay: function() 
544		{
545			var self = this;
546			if (self.settings.auto_play)
547			{	
548				setTimeout(function() { self.jumpToImage(self.settings.image_i); }, self.settings.interval);
549			}
550			else
551			{
552				var play_pause_button = self.box_skitter.find('.play_pause_button');
553				play_pause_button.html('play');
554				play_pause_button.addClass('play_button');
555				self.settings.is_paused = true;
556			}	
557		},
558		/**
559		 * Jump to image
560		 */
561		jumpToImage: function(imageNumber) 
562		{
563			if (this.settings.is_animating == false) {
564			
565				this.settings.elapsedTime = 0;
566				this.box_skitter.find('.box_clone').stop();
567				this.clearTimer(true);
568				this.settings.image_i = Math.floor(imageNumber);
569				
570				this.box_skitter.find('.image a').attr({'href': this.settings.link_atual});
571				this.box_skitter.find('.image_main').attr({'src': this.settings.image_atual});
572				this.box_skitter.find('.box_clone').remove();
573			
574				this.nextImage();
575			}
576		},
577		
578		/**
579		 * Next image
580		 */
581		nextImage: function() 
582		{
583			var self = this;
584			this.setResizeImage(false);
585			animations_functions = [
586				'cube', 
587				'cubeRandom', 
588				'block', 
589				'cubeStop', 
590				'cubeStopRandom', 
591				'cubeHide', 
592				'cubeSize', 
593				'horizontal', 
594				'showBars', 
595				'showBarsRandom', 
596				'tube',
597				'fade',
598				'fadeFour',
599				'paralell',
600				'blind',
601				'blindHeight',
602				'blindWidth',
603				'directionTop',
604				'directionBottom',
605				'directionRight',
606				'directionLeft',
607				'cubeSpread',
608				'glassCube',
609				'glassBlock',
610				'circles',
611				'circlesInside',
612				'circlesRotate',
613				'cubeShow',
614				'upBars', 
615				'downBars' 
616			];
617			
618			if (self.settings.progressbar) self.hideProgressBar();
619			
620			animation_type = (this.settings.animation == '' && this.settings.images_links[this.settings.image_i][2]) ? 
621				this.settings.images_links[this.settings.image_i][2] : (this.settings.animation == '' ? 'default' : this.settings.animation);
622			
623			// RandomUnique
624			if (animation_type == 'randomSmart') 
625			{
626				if (!this.settings.random_ia) {
627					animations_functions.sort(function() {
628						return 0.5 - Math.random();
629					});
630					this.settings.random_ia = animations_functions;
631				}
632				animation_type = this.settings.random_ia[this.settings.image_i];
633			}
634			// Random
635			else if (animation_type == 'random') 
636			{
637				var random_id = parseInt(Math.random() * animations_functions.length);
638				animation_type = animations_functions[random_id];
639			}
640			
641			switch (animation_type) 
642			{
643				case 'cube' : 
644					this.animationCube();
645					break;
646				case 'cubeRandom' : 
647					this.animationCube({random:true});
648					break;
649				case 'block' : 
650					this.animationBlock();
651					break;
652				case 'cubeStop' : 
653					this.animationCubeStop();
654					break;
655				case 'cubeStopRandom' : 
656					this.animationCubeStop({random:true});
657					break;
658				case 'cubeHide' : 
659					this.animationCubeHide();
660					break;
661				case 'cubeSize' : 
662					this.animationCubeSize();
663					break;
664				case 'horizontal' : 
665					this.animationHorizontal();
666					break;
667				case 'showBars' : 
668					this.animationShowBars();
669					break;
670				case 'showBarsRandom' : 
671					this.animationShowBars({random:true});
672					break;
673				case 'tube' : 
674					this.animationTube();
675					break;
676				case 'fade' : 
677					this.animationFade();
678					break;
679				case 'fadeFour' : 
680					this.animationFadeFour();
681					break;
682				case 'paralell' : 
683					this.animationParalell();
684					break;
685				case 'blind' : 
686					this.animationBlind();
687					break;
688				case 'blindHeight' : 
689					this.animationBlindDimension({height:true});
690					break;
691				case 'blindWidth' : 
692					this.animationBlindDimension({height:false, time_animate:400, delay:50});
693					break;
694				case 'directionTop' : 
695					this.animationDirection({direction:'top'});
696					break;
697				case 'directionBottom' : 
698					this.animationDirection({direction:'bottom'});
699					break;
700				case 'directionRight' : 
701					this.animationDirection({direction:'right', total:5});
702					break;
703				case 'directionLeft' : 
704					this.animationDirection({direction:'left', total:5});
705					break;
706				case 'cubeSpread' : 
707					this.animationCubeSpread();
708					break;
709				case 'cubeJelly' : 
710					this.animationCubeJelly();
711					break;
712				case 'glassCube' : 
713					this.animationGlassCube();
714					break;
715				case 'glassBlock' : 
716					this.animationGlassBlock();
717					break;
718				case 'circles' : 
719					this.animationCircles();
720					break;
721				case 'circlesInside' : 
722					this.animationCirclesInside();
723					break;
724				case 'circlesRotate' : 
725					this.animationCirclesRotate();
726					break;
727				case 'cubeShow' : 
728					this.animationCubeShow();
729					break;
730				case 'upBars' : 
731					this.animationDirectionBars({direction: 'top'});
732					break;
733				case 'downBars' : 
734					this.animationDirectionBars({direction: 'bottom'});
735					break;
736				default : 
737					this.animationTube();
738					break;
739			}
740		},
741		
742		setResizeImage: function(resize) {
743
744			var self = this;
745			// Get actual size image_main
746			var container = this.box_skitter;
747			var currSrc = this.box_skitter.find('.image_main').attr('src');
748			//var currSrc = this.box_skitter.find('.image_main');
749			if (currSrc) 
750			{
751				var img = new Image();
752				img.onload = function() {
753						var baseWidth = this.width;
754						var scaleWidth = container.find('.container_skitter').width();
755							
756						var baseWidth = parseInt(baseWidth);
757						

758						var scale = scaleWidth / baseWidth;
759						
760						var img_clone = self.box_skitter.find('img');
761						
762						img_clone.height(parseInt(self.settings.base_height)*scale);
763						
764						if (resize == true)
765						{		
766							container.height(parseInt(self.settings.base_height)*scale);
767							container.find('.container_skitter').height(parseInt(self.settings.base_height)*scale);
768							self.settings.height_skitter = parseInt(self.settings.base_height)*scale;
769							self.settings.width_skitter = scaleWidth;
770						}
771						
772				
773				}
774				img.src = currSrc;
775			}
776		},
777		
778		animationCube: function (options)
779		{
780			var self = this;
781			
782			var options = $.extend({}, {random: false}, options || {});
783			
784			this.settings.is_animating = true;
785			var easing = (this.settings.easing_default == '') ? 'easeOutExpo' : this.settings.easing_default;
786			var time_animate = 700 / this.settings.velocity;
787			
788			this.setActualLevel();
789			
790			var division_w 	= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));

791			var division_h 	= Math.ceil(this.settings.height_skitter / (this.settings.height_skitter / 3));
792			var total		= division_w * division_h;
793			
794			var width_box 	= Math.ceil(this.settings.width_skitter / division_w);
795			var height_box 	= Math.ceil(this.settings.height_skitter / division_h);
796			
797			var init_top 	= this.settings.height_skitter + 200;
798			var init_left 	= this.settings.height_skitter + 200;
799			
800			var col_t = 0;
801			var col = 0;
802			
803			for (i = 0; i < total; i++) {
804				
805				init_top 			= (i % 2 == 0) ? init_top : -init_top;
806				init_left 			= (i % 2 == 0) ? init_left : -init_left;
807
808				var _vtop 			= init_top + (height_box * col_t) + (col_t * 150);
809				var _vleft 			= -self.settings.width_skitter;
810				//var _vleft 			= (init_left + (width_box * col)) + (col * 50);
811				
812				var _vtop_image 	= -(height_box * col_t);
813				
814				var _vleft_image 	= -(width_box * col);
815				var _btop 			= (height_box * col_t);
816				var _bleft 			= (width_box * col);
817				
818				var box_clone 		= this.getBoxClone();
819				box_clone.hide();
820				
821				var delay_time = 50 * (i);
822				
823				if (options.random) {
824					delay_time = 40 * (col);
825					box_clone.css({left:_vleft+'px', top:_vtop+'px', width:width_box, height:height_box});
826				} 
827				else {
828					time_animate = 500;
829					//box_clone.css({left:(this.settings.width_skitter / 2), top:this.settings.height_skitter + 50, width:width_box, height:height_box});
830					box_clone.css({left:(this.settings.width_skitter) + (width_box * i), top:this.settings.height_skitter + (height_box * i), width:width_box, height:height_box});
831				}
832				
833				//box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
834				//box_clone.find('img').css({left:_vleft_image+100, top:_vtop_image});
835				
836				this.addBoxClone(box_clone);
837				
838				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
839				box_clone.show().delay(delay_time).animate({top:_btop+'px', left:_bleft+'px'}, time_animate, easing, callback);
840				
841				if (options.random) {
842					box_clone.find('img').css({left:_vleft_image+100, top:_vtop_image+50});
843					box_clone.find('img').delay(delay_time+(time_animate/2)).animate({left:_vleft_image, top:_vtop_image}, 1000, 'easeOutBack');
844				}
845				else {
846					box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
847					box_clone.find('img').delay(delay_time+(time_animate/2)).fadeTo(100, 0.5).fadeTo(300, 1);
848				}
849				
850				col_t++;
851				if (col_t == division_h) {
852					col_t = 0;
853					col++;
854				}
855			}
856		},
857		
858		animationBlock: function(options)
859		{
860			var self = this;
861			
862			this.settings.is_animating = true;
863			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
864			var time_animate = 500 / this.settings.velocity;
865			
866			this.setActualLevel();
867			
868			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 15));
869			var width_box 	= Math.ceil(this.settings.width_skitter / total);
870			var height_box 	= (this.settings.height_skitter);
871			
872			for (i = 0; i < total; i++) {
873				
874				var _bleft = (width_box * (i));
875				var _btop = 0;
876				
877				var box_clone = this.getBoxClone();
878				box_clone.css({left: this.settings.width_skitter + 100, top:0, width:width_box, height:height_box});
879				box_clone.find('img').css({left:-(width_box * i)});
880				
881				this.addBoxClone(box_clone);
882				
883				var delay_time = 80 * (i);
884				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
885				//box_clone.delay(delay_time).animate({top:_btop, left:_bleft, opacity:'show'}, time_animate, easing, callback);
886				
887				box_clone.show().delay(delay_time).animate({top:_btop, left:_bleft}, time_animate, easing);
888				box_clone.find('img').hide().delay(delay_time+100).animate({opacity:'show'}, time_animate+300, easing, callback);
889			}
890			
891		},
892		
893		animationCubeStop: function(options)
894		{
895			var self = this;
896
897			var options = $.extend({}, {random: false}, options || {});
898
899			this.settings.is_animating = true;
900			var easing = (this.settings.easing_default == '') ? 'easeInQuad' : this.settings.easing_default;
901			var time_animate = 300 / this.settings.velocity;
902
903			var image_old = this.box_skitter.find('.image_main').attr('src');
904
905			this.setActualLevel();
906
907			this.setLinkAtual();
908			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
909
910			var division_w = Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
911			var division_h = Math.ceil(this.settings.height_skitter / (this.settings.width_skitter / 8));
912			var total = division_w * division_h;
913
914			var width_box = Math.ceil(this.settings.width_skitter / division_w);
915			var height_box = Math.ceil(this.settings.height_skitter / division_h);
916
917			var init_top = 0;
918			var init_left = 0;
919
920			var col_t = 0;
921			var col = 0;
922			var _ftop = this.settings.width_skitter / 16;
923
924			for (i = 0; i < total; i++) {
925				init_top = (i % 2 == 0) ? init_top : -init_top;
926				init_left = (i % 2 == 0) ? init_left : -init_left;
927
928				var _vtop = init_top + (height_box * col_t);
929				var _vleft = (init_left + (width_box * col));
930				var _vtop_image = -(height_box * col_t);
931
932				var _vleft_image = -(width_box * col);
933				var _btop = _vtop - _ftop;
934				var _bleft = _vleft - _ftop;
935
936				var box_clone = this.getBoxCloneImgOld(image_old);
937				box_clone.css({left:_vleft+'px', top:_vtop+'px', width:width_box, height:height_box});
938				box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
939
940				this.addBoxClone(box_clone);
941				box_clone.show();
942
943				var delay_time = 50 * i;
944
945				if (options.random) {
946					time_animate = 1000 / this.settings.velocity;
947					_btop = _vtop;
948					_bleft = _vleft;
949					delay_time = 30 * (Math.random() * 30);
950				}
951
952				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
953				box_clone.delay(delay_time).animate({opacity:'hide', top:_btop+'px', left:_bleft+'px'}, time_animate, easing, callback);
954
955				col_t++;
956				if (col_t == division_h) {
957					col_t = 0;
958					col++;
959				}
960			}
961		},
962		
963		animationCubeHide: function(options)
964		{
965			var self = this;
966			
967			this.settings.is_animating = true;
968			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
969			var time_animate = 500 / this.settings.velocity;
970			
971			var image_old = this.box_skitter.find('.image_main').attr('src');
972			
973			this.setActualLevel();
974			
975			this.setLinkAtual();
976			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
977			

978			var division_w 	= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
979			var division_h 	= Math.ceil(this.settings.height_skitter / (this.settings.height_skitter / 3));
980			var total		= division_w * division_h;
981			
982			var width_box 	= Math.ceil(this.settings.width_skitter / division_w);
983			var height_box 	= Math.ceil(this.settings.height_skitter / division_h);
984			
985			var init_top 	= 0;
986			var init_left 	= 0;
987			
988			var col_t 		= 0;
989			var col 		= 0;
990			
991			for (i = 0; i < total; i++) {
992				
993				init_top 			= (i % 2 == 0) ? init_top : -init_top;
994				init_left 			= (i % 2 == 0) ? init_left : -init_left;
995
996				var _vtop 			= init_top + (height_box * col_t);
997				var _vleft 			= (init_left + (width_box * col));
998				var _vtop_image 	= -(height_box * col_t);
999				
1000				var _vleft_image 	= -(width_box * col);
1001				var _btop 			= _vtop - 50;
1002				var _bleft 			= _vleft - 50;
1003				
1004				var box_clone = this.getBoxCloneImgOld(image_old);
1005				box_clone.css({left:_vleft+'px', top:_vtop+'px', width:width_box, height:height_box});
1006				box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
1007				
1008				this.addBoxClone(box_clone);
1009				box_clone.show();
1010				
1011				var delay_time = 50 * i;
1012				delay_time = (i == (total - 1)) ? (total * 50) : delay_time;
1013				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1014				
1015				box_clone.delay(delay_time).animate({opacity:'hide'}, time_animate, easing, callback);
1016				
1017				col_t++;
1018				if (col_t == division_h) {
1019					col_t = 0;
1020					col++;
1021				}
1022			}
1023			
1024		},
1025		
1026		animationCubeJelly: function(options)
1027		{
1028			var self = this;
1029			
1030			this.settings.is_animating = true;
1031			var easing = (this.settings.easing_default == '') ? 'easeInBack' : this.settings.easing_default;
1032			var time_animate = 300 / this.settings.velocity;
1033			
1034			var image_old = this.box_skitter.find('.image_main').attr('src');
1035			
1036			this.setActualLevel();
1037			
1038			this.setLinkAtual();
1039			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
1040			
1041			var division_w 	= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));

1042			var division_h 	= Math.ceil(this.settings.height_skitter / (this.settings.height_skitter / 3));
1043			var total		= division_w * division_h;
1044			
1045			var width_box 	= Math.ceil(this.settings.width_skitter / division_w);
1046			var height_box 	= Math.ceil(this.settings.height_skitter / division_h);
1047			
1048			var init_top 	= 0;
1049			var init_left 	= 0;
1050			
1051			var col_t 		= 0;
1052			var col 		= 0;
1053			var u			= -1;
1054			
1055			for (i = 0; i < total; i++) {
1056			
1057				if (col % 2 != 0) {
1058					if (col_t == 0) {
1059						u = u + division_h + 1;
1060					}
1061					u--;
1062				} 
1063				else {
1064					if (col > 0 && col_t == 0) {
1065						u = u + 2;
1066					}
1067					u++;
1068				}
1069			
1070				init_top 			= (i % 2 == 0) ? init_top : -init_top;
1071				init_left 			= (i % 2 == 0) ? init_left : -init_left;
1072
1073				var _vtop 			= init_top + (height_box * col_t);
1074				var _vleft 			= (init_left + (width_box * col));
1075				var _vtop_image 	= -(height_box * col_t);
1076				
1077				var _vleft_image 	= -(width_box * col);
1078				var _btop 			= _vtop - 50;
1079				var _bleft 			= _vleft - 50;
1080				
1081				var box_clone = this.getBoxCloneImgOld(image_old);
1082				box_clone.css({left:_vleft+'px', top:_vtop+'px', width:width_box, height:height_box});
1083				box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
1084				
1085				this.addBoxClone(box_clone);
1086				box_clone.show();
1087				
1088				var delay_time = (50 * i);
1089				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1090				
1091				box_clone.delay(delay_time).animate({width:'+=100px', height:'+=100px', top:'-=20px',  left: '-=20px', opacity:'hide'}, time_animate, easing, callback);
1092				col_t++;
1093				
1094				if (col_t == division_h) {
1095					col_t = 0;
1096					col++;
1097				}
1098				
1099			}
1100		},
1101		
1102		animationCubeSize: function(options)
1103		{
1104			var self = this;
1105			
1106			this.settings.is_animating = true;
1107			var easing = (this.settings.easing_default == '') ? 'easeInOutQuad' : this.settings.easing_default;
1108			var time_animate = 600 / this.settings.velocity;
1109			
1110			var image_old = this.box_skitter.find('.image_main').attr('src');
1111			
1112			this.setActualLevel();
1113			
1114			this.setLinkAtual();
1115			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
1116			
1117			var division_w 	= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));

1118			var division_h 	= Math.ceil(this.settings.height_skitter / (this.settings.height_skitter / 3));
1119			var total		= division_w * division_h;
1120			
1121			var width_box 	= Math.ceil(this.settings.width_skitter / division_w);
1122			var height_box 	= Math.ceil(this.settings.height_skitter / division_h);
1123			
1124			var init_top 	= 0;
1125			var init_left 	= 0;
1126			
1127			var col_t 		= 0;
1128			var col 		= 0;
1129			var _ftop		= Math.ceil(this.settings.width_skitter / 6);
1130			
1131			for (i = 0; i < total; i++) {
1132				
1133				init_top 			= (i % 2 == 0) ? init_top : -init_top;
1134				init_left 			= (i % 2 == 0) ? init_left : -init_left;
1135
1136				var _vtop 			= init_top + (height_box * col_t);
1137				var _vleft 			= (init_left + (width_box * col));
1138				var _vtop_image 	= -(height_box * col_t);
1139				
1140				var _vleft_image 	= -(width_box * col);
1141				var _btop 			= _vtop - _ftop;
1142				var _bleft 			= _vleft - _ftop;
1143				
1144				var box_clone = this.getBoxCloneImgOld(image_old);
1145				box_clone.css({left:_vleft, top:_vtop, width:width_box, height:height_box});
1146				box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
1147				
1148				this.addBoxClone(box_clone);
1149				box_clone.show();
1150				
1151				var delay_time = 50 * i;
1152				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1153				box_clone.delay(delay_time).animate({
1154					opacity:'hide',width:'hide',height:'hide',top:_vtop+(width_box*1.5),left:_vleft+(height_box*1.5)
1155				}, time_animate, easing, callback);
1156				
1157				col_t++;
1158				if (col_t == division_h) {
1159					col_t = 0;
1160					col++;
1161				}
1162			}
1163			
1164		},
1165		
1166		animationHorizontal: function(options)
1167		{
1168			var self = this;
1169			
1170			this.settings.is_animating = true;
1171			var easing = (this.settings.easing_default == '') ? 'easeOutExpo' : this.settings.easing_default;
1172			var time_animate = 700 / this.settings.velocity;
1173			
1174			this.setActualLevel();
1175			
1176			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 7));
1177			var width_box 	= (this.settings.width_skitter);
1178			var height_box 	= Math.ceil(this.settings.height_skitter / total);
1179			
1180			for (i = 0; i < total; i++) {
1181				var _bleft = (i % 2 == 0 ? '' : '') + width_box;
1182				var _btop = (i * height_box);
1183				
1184				var box_clone = this.getBoxClone();
1185				
1186				box_clone.css({left:_bleft+'px', top:_btop+'px', width:width_box, height:height_box});
1187				box_clone.find('img').css({left:0, top:-_btop});
1188				
1189				this.addBoxClone(box_clone);
1190				
1191				var delay_time = 90 * i;
1192				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1193				box_clone.delay(delay_time).animate({opacity:'show', top:_btop, left:0}, time_animate, easing, callback);
1194			}
1195		},
1196		
1197		animationShowBars: function(options)
1198		{
1199			var self = this;
1200			
1201			var options = $.extend({}, {random: false}, options || {});
1202			
1203			this.settings.is_animating = true;
1204			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1205			var time_animate = 400 / this.settings.velocity;
1206			
1207			this.setActualLevel();
1208			
1209			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
1210			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1211			var height_box 	= (this.settings.height_skitter);
1212			
1213			for (i = 0; i < total; i++) {
1214				
1215				var _bleft = (width_box * (i));
1216				var _btop = 0;
1217				
1218				var box_clone = this.getBoxClone();
1219				
1220				box_clone.css({left:_bleft, top:_btop - 50, width:width_box, height:height_box});
1221				box_clone.find('img').css({left:-(width_box * i), top:0});
1222				
1223				this.addBoxClone(box_clone);
1224				
1225				if (options.random) {
1226					var random = this.getRandom(total);
1227					var delay_time = 50 * random;
1228					delay_time = (i == (total - 1)) ? (50 * total) : delay_time;
1229				}
1230				else {
1231					var delay_time = 70 * (i);
1232					time_animate = time_animate - (i * 2);
1233				}
1234				
1235				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1236				box_clone.delay(delay_time).animate({
1237					opacity:'show', top:_btop+'px', left:_bleft+'px'
1238				}, time_animate, easing, callback);
1239			}
1240			
1241		},
1242		
1243		animationTube: function(options)
1244		{
1245			var self = this;
1246			
1247			this.settings.is_animating = true;
1248			var easing = (this.settings.easing_default == '') ? 'easeOutElastic' : this.settings.easing_default;
1249			var time_animate = 600 / this.settings.velocity;
1250			
1251			this.setActualLevel();
1252			

1253			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
1254			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1255			var height_box 	= this.settings.height_skitter;
1256			
1257			for (i = 0;i<total;i++) {
1258				var _btop = 0;
1259				var _vtop = height_box;
1260				var vleft = width_box * i;
1261			
1262				var box_clone = this.getBoxClone();
1263				
1264				box_clone.css({left:vleft,top: _vtop, height:height_box, width: width_box});
1265				box_clone.find('img').css({left:-(vleft)});
1266				
1267				this.addBoxClone(box_clone);
1268				
1269				var random = this.getRandom(total);
1270				var delay_time = 30 * random;
1271				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1272				box_clone.show().delay(delay_time).animate({top:_btop}, time_animate, easing, callback);
1273			}
1274		},
1275		
1276		animationFade: function(options)
1277		{
1278			var self = this;
1279			
1280			this.settings.is_animating = true;
1281			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1282			var time_animate = 800 / this.settings.velocity;
1283			
1284			this.setActualLevel();
1285			
1286			var width_box 	= this.settings.width_skitter;
1287			var height_box 	= this.settings.height_skitter;
1288			var total 		= 2;
1289			
1290			for (i = 0;i<total;i++) {
1291				var _vtop = 0;
1292				var _vleft = 0;
1293			
1294				var box_clone = this.getBoxClone();
1295				box_clone.css({left:_vleft, top:_vtop, width:width_box, height:height_box});
1296				this.addBoxClone(box_clone);
1297
1298				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1299				box_clone.animate({opacity:'show', left:0, top:0}, time_animate, easing, callback);
1300			}
1301		},
1302		
1303		animationFadeFour: function(options)
1304		{
1305			var self = this;
1306			
1307			this.settings.is_animating = true;
1308			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1309			var time_animate = 500 / this.settings.velocity;
1310			
1311			this.setActualLevel();
1312			
1313			var width_box 	= this.settings.width_skitter;
1314			var height_box 	= this.settings.height_skitter;
1315			var total 		= 4;
1316			
1317			for (i = 0;i<total;i++) {
1318				
1319				if (i == 0) {
1320					var _vtop = '-100px';
1321					var _vleft = '-100px';
1322				} else if (i == 1) {
1323					var _vtop = '-100px';
1324					var _vleft = '100px';
1325				} else if (i == 2) {
1326					var _vtop = '100px';
1327					var _vleft = '-100px';
1328				} else if (i == 3) {
1329					var _vtop = '100px';
1330					var _vleft = '100px';
1331				}
1332			
1333				var box_clone = this.getBoxClone();
1334				box_clone.css({left:_vleft, top:_vtop, width:width_box, height:height_box});
1335				this.addBoxClone(box_clone);
1336				
1337				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1338				box_clone.animate({opacity:'show', left:0, top:0}, time_animate, easing, callback);
1339			}
1340		},
1341		
1342		animationParalell: function(options)
1343		{
1344			var self = this;
1345			
1346			this.settings.is_animating = true;
1347			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1348			var time_animate = 400 / this.settings.velocity;
1349			
1350			this.setActualLevel();
1351			
1352			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 16));
1353			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1354			var height_box 	= this.settings.height_skitter;
1355			
1356			for (i = 0; i < total; i++) {
1357				
1358				var _bleft = (width_box * (i));
1359				var _btop = 0;
1360				
1361				var box_clone = this.getBoxClone();
1362				
1363				box_clone.css({left:_bleft, top:_btop - this.settings.height_skitter, width:width_box, height:height_box});
1364				box_clone.find('img').css({left:-(width_box * i), top:0});
1365				
1366				this.addBoxClone(box_clone);
1367				
1368				var delay_time;
1369				if (i <= ((total / 2) - 1)) {
1370					delay_time = 1400 - (i * 200);
1371				}
1372				else if (i > ((total / 2) - 1)) {
1373					delay_time = ((i - (total / 2)) * 200);
1374				}
1375				delay_time = delay_time / 2.5;
1376				
1377				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1378				box_clone.delay(delay_time).animate({
1379					top:_btop+'px', left:_bleft+'px', opacity: 'show'
1380				}, time_animate, easing, callback);
1381			}
1382			
1383		},
1384		
1385		animationBlind: function(options)
1386		{
1387			var self = this;
1388			
1389			var options = $.extend({}, {height: false}, options || {});
1390			
1391			this.settings.is_animating = true;
1392			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1393			var time_animate = 400 / this.settings.velocity;
1394			
1395			this.setActualLevel();
1396			

1397			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 16));
1398			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1399			var height_box 	= this.settings.height_skitter;
1400			
1401			for (i = 0; i < total; i++) {
1402				
1403				var _bleft = (width_box * (i));
1404				var _btop = 0;
1405				
1406				var box_clone = this.getBoxClone();
1407				
1408				box_clone.css({left:_bleft, top:_btop, width:width_box, height:height_box});
1409				box_clone.find('img').css({left:-(width_box * i), top:0});
1410				
1411				this.addBoxClone(box_clone);
1412				
1413				var delay_time;
1414				
1415				if (!options.height) {
1416					if (i <= ((total / 2) - 1)) {
1417						delay_time = 1400 - (i * 200);
1418					}
1419					else if (i > ((total / 2) - 1)) {
1420						delay_time = ((i - (total / 2)) * 200);
1421					}
1422					var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1423				}
1424				else {
1425					if (i <= ((total / 2) - 1)) {
1426						delay_time = 200 + (i * 200);
1427					}
1428					else if (i > ((total / 2) - 1)) {
1429						delay_time = (((total / 2) - i) * 200) + (total * 100);
1430					}
1431					var callback = (i == (total / 2)) ? function() { self.finishAnimation(); } : '';
1432				}
1433				
1434				delay_time = delay_time / 2.5;
1435				
1436				if (!options.height) {
1437					box_clone.delay(delay_time).animate({
1438						opacity:'show',top:_btop+'px', left:_bleft+'px', width:'show'
1439					}, time_animate, easing, callback);
1440				}
1441				else {
1442					time_animate = time_animate + (i * 2);
1443					var easing = 'easeOutQuad';
1444					box_clone.delay(delay_time).animate({
1445						opacity:'show',top:_btop+'px', left:_bleft+'px', height:'show'
1446					}, time_animate, easing, callback);
1447				}
1448			}
1449			
1450		},
1451		
1452		animationBlindDimension: function(options)
1453		{
1454			var self = this;
1455			
1456			var options = $.extend({}, {height: true, time_animate: 500, delay: 100}, options || {});
1457			
1458			this.settings.is_animating = true;
1459			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1460			var time_animate = options.time_animate / this.settings.velocity;
1461			
1462			this.setActualLevel();
1463			
1464			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 16));
1465			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1466			var height_box 	= this.settings.height_skitter;
1467			
1468			for (i = 0; i < total; i++) {
1469				
1470				var _bleft = (width_box * (i));
1471				var _btop = 0;
1472				
1473				var box_clone = this.getBoxClone();
1474				
1475				box_clone.css({left:_bleft, top:_btop, width:width_box, height:height_box});
1476				box_clone.find('img').css({left:-(width_box * i), top:0});
1477				
1478				this.addBoxClone(box_clone);
1479				
1480				var delay_time = options.delay * i;
1481				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1482				
1483				if (!options.height) {
1484					box_clone.delay(delay_time).animate({
1485						opacity:'show',top:_btop+'px', left:_bleft+'px', width:'show'
1486					}, time_animate, easing, callback);
1487				}
1488				else {
1489					var easing = 'easeOutQuad';
1490					box_clone.delay(delay_time).animate({
1491						opacity:'show',top:_btop+'px', left:_bleft+'px', height:'show'
1492					}, time_animate, easing, callback);
1493				}
1494			}
1495			
1496		},
1497		
1498		animationDirection: function(options)
1499		{
1500			var self = this;
1501			
1502			var options = $.extend({}, {direction: 'top', delay_type: 'sequence', total: 7}, options || {});
1503			
1504			this.settings.is_animating = true;
1505			var easing = (this.settings.easing_default == '') ? 'easeInOutExpo' : this.settings.easing_default;
1506			var time_animate = 1200 / this.settings.velocity;
1507			
1508			var image_old = this.box_skitter.find('.image_main').attr('src');
1509			
1510			this.setActualLevel();
1511			
1512			this.setLinkAtual();
1513			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
1514			this.box_skitter.find('.image_main').hide();
1515			
1516			var total 		= options.total;
1517			
1518			for (i = 0; i < total; i++) {
1519				
1520				switch (options.direction)
1521				{
1522					default : case 'top' : 
1523						
1524						var width_box 		= Math.ceil(this.settings.width_skitter / total);
1525						var height_box 		= this.settings.height_skitter;
1526						
1527						var _itopc 			= 0;
1528						var _ileftc 		= (width_box * i);
1529						var _ftopc 			= -height_box;
1530						var _fleftc 		= _ileftc;
1531						
1532						var _itopn			= height_box;
1533						var _ileftn			= _ileftc;
1534						var _ftopn			= 0;
1535						var _fleftn			= _ileftc;
1536						
1537						var _vtop_image 	= 0;
1538						var _vleft_image 	= -_ileftc;
1539						
1540						break;
1541						
1542					case 'bottom' : 
1543					

1544						var width_box 		= Math.ceil(this.settings.width_skitter / total);
1545						var height_box 		= this.settings.height_skitter;
1546						
1547						var _itopc 			= 0;
1548						var _ileftc 		= (width_box * i);
1549						var _ftopc 			= height_box;
1550						var _fleftc 		= _ileftc;
1551						
1552						var _itopn			= -height_box;
1553						var _ileftn			= _ileftc;
1554						var _ftopn			= 0;
1555						var _fleftn			= _ileftc;
1556						
1557						var _vtop_image 	= 0;
1558						var _vleft_image 	= -_ileftc;
1559						
1560						break;
1561						
1562					case 'right' : 
1563					
1564						var width_box 		= this.settings.width_skitter;
1565						var height_box 		= Math.ceil(this.settings.height_skitter / total);
1566						
1567						var _itopc 			= (height_box * i);
1568						var _ileftc 		= 0;
1569						var _ftopc 			= _itopc;
1570						var _fleftc 		= width_box;
1571						
1572						var _itopn			= _itopc;
1573						var _ileftn			= -_fleftc;
1574						var _ftopn			= _itopc;
1575						var _fleftn			= 0;
1576						
1577						var _vtop_image 	= -_itopc;
1578						var _vleft_image 	= 0;
1579						
1580						break;
1581						
1582					case 'left' : 
1583					
1584						var width_box 		= this.settings.width_skitter;
1585						var height_box 		= Math.ceil(this.settings.height_skitter / total);
1586						
1587						var _itopc 			= (height_box * i);
1588						var _ileftc 		= 0;
1589						var _ftopc 			= _itopc;
1590						var _fleftc 		= -width_box;
1591						
1592						var _itopn			= _itopc;
1593						var _ileftn			= -_fleftc;
1594						var _ftopn			= _itopc;
1595						var _fleftn			= 0;
1596						
1597						var _vtop_image 	= -_itopc;
1598						var _vleft_image 	= 0;
1599						
1600						break;
1601						
1602				}
1603				
1604				switch (options.delay_type) 
1605				{
1606					case 'zebra' : default : var delay_time = (i % 2 == 0) ? 0 : 150; break;
1607					case 'random' : var delay_time = 30 * (Math.random() * 30); break;
1608					case 'sequence' : var delay_time = i * 100; break;
1609				}
1610				
1611				var box_clone = this.getBoxCloneImgOld(image_old);
1612				box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
1613				
1614				box_clone.css({top:_itopc, left:_ileftc, width:width_box, height:height_box});
1615				
1616				this.addBoxClone(box_clone);
1617				box_clone.show();
1618				box_clone.delay(delay_time).animate({ top:_ftopc, left:_fleftc }, time_animate, easing);
1619				
1620				// Next image
1621				var box_clone_next = this.getBoxClone();
1622				box_clone_next.find('img').css({left:_vleft_image, top:_vtop_image});
1623				
1624				box_clone_next.css({top:_itopn, left:_ileftn, width:width_box, height:height_box});
1625				
1626				this.addBoxClone(box_clone_next);
1627				box_clone_next.show();
1628				
1629				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';

1630				box_clone_next.delay(delay_time).animate({ top:_ftopn, left:_fleftn }, time_animate, easing, callback);
1631				
1632			}
1633		},
1634		
1635		animationCubeSpread: function(options)
1636		{
1637			var self = this;
1638			
1639			this.settings.is_animating = true;
1640			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1641			var time_animate = 700 / this.settings.velocity;
1642			
1643			this.setActualLevel();
1644			
1645			var division_w 	= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
1646			var division_h 	= Math.ceil(this.settings.height_skitter / (this.settings.width_skitter / 8));
1647			var total		= division_w * division_h;
1648			
1649			var width_box 	= Math.ceil(this.settings.width_skitter / division_w);
1650			var height_box 	= Math.ceil(this.settings.height_skitter / division_h);
1651			
1652			var init_top 	= 0;
1653			var init_left 	= 0;
1654			
1655			var col_t 		= 0;
1656			var col 		= 0;
1657			var order 		= new Array;
1658			var spread 		= new Array;
1659			
1660			// Make order
1661			for (i = 0; i < total; i++) {
1662				init_top 			= (i % 2 == 0) ? init_top : -init_top;
1663				init_left 			= (i % 2 == 0) ? init_left : -init_left;
1664
1665				var _vtop 			= init_top + (height_box * col_t);
1666				var _vleft 			= (init_left + (width_box * col));
1667				
1668				order[i] = [_vtop, _vleft];
1669				
1670				col_t++;
1671				if (col_t == division_h) {
1672					col_t = 0;
1673					col++;
1674				}
1675			}
1676			
1677			// Reset col and col_t
1678			col_t = 0;
1679			col = 0;
1680			
1681			// Make array for spread
1682			for (i = 0; i < total; i++) {
1683				spread[i] = i;
1684			};
1685			
1686			// Shuffle array
1687			var spread = self.shuffleArray(spread);
1688			
1689			for (i = 0; i < total; i++) {
1690				init_top 			= (i % 2 == 0) ? init_top : -init_top;
1691				init_left 			= (i % 2 == 0) ? init_left : -init_left;
1692
1693				var _vtop 			= init_top + (height_box * col_t);
1694				var _vleft 			= (init_left + (width_box * col));
1695				var _vtop_image 	= -(height_box * col_t);
1696				
1697				var _vleft_image 	= -(width_box * col);
1698				var _btop 			= _vtop;
1699				var _bleft 			= _vleft;
1700				
1701				_vtop 				= order[spread[i]][0];
1702				_vleft 				= order[spread[i]][1];
1703				
1704				var box_clone 		= this.getBoxClone();
1705				
1706				box_clone.css({left:_vleft+'px', top:_vtop+'px', width:width_box, height:height_box});
1707				box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
1708				
1709				this.addBoxClone(box_clone);
1710				
1711				var delay_time = 30 * (Math.random() * 30);
1712				if (i == (total-1)) delay_time = 30 * 30;
1713				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1714				box_clone.delay(delay_time).animate({opacity:'show',top:_btop+'px', left:_bleft+'px'}, time_animate, easing, callback);
1715				
1716				col_t++;
1717				if (col_t == division_h) {
1718					col_t = 0;
1719					col++;
1720				}
1721			}
1722		}, 
1723		
1724		animationGlassCube: function(options)
1725		{
1726			var self = this;
1727			
1728			this.settings.is_animating = true;
1729			var easing = (this.settings.easing_default == '') ? 'easeOutExpo' : this.settings.easing_default;
1730			var time_animate = 500 / this.settings.velocity;
1731			
1732			this.setActualLevel();
1733			
1734			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10)) * 2;
1735			var width_box 	= Math.ceil(this.settings.width_skitter / total) * 2;
1736			var height_box 	= (this.settings.height_skitter) / 2;
1737			var col			= 0;
1738			
1739			for (i = 0; i < total; i++) {
1740				mod = (i % 2) == 0 ? true : false;
1741				
1742				var _ileft = (width_box * (col));
1743				var _itop = (mod) ? -self.settings.height_skitter : self.settings.height_skitter;
1744				
1745				var _fleft = (width_box * (col));
1746				var _ftop = (mod) ? 0 : (height_box);
1747				
1748				var _bleft = -(width_box * col);
1749				var _btop = (mod) ? 0 : -(height_box);
1750				
1751				var delay_time = 120 * col;
1752				
1753				var box_clone = this.getBoxClone();
1754				box_clone.css({left: _ileft, top:_itop, width:width_box, height:height_box});
1755				
1756				box_clone
1757					.find('img')
1758					.css({left: _bleft + (width_box / 1.5), top: _btop})
1759					.delay(delay_time)
1760					.animate({left: _bleft, top: _btop}, (time_animate * 1.9), 'easeOutQuad');
1761				
1762				this.addBoxClone(box_clone);
1763				
1764				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1765				box_clone.show().delay(delay_time).animate({top:_ftop, left:_fleft}, time_animate, easing, callback);
1766				
1767				if ((i % 2) != 0) col++;
1768			}
1769		},
1770		
1771		animationGlassBlock: function(options)
1772		{
1773			var self = this;
1774			
1775			this.settings.is_animating = true;
1776			var easing = (this.settings.easing_default == '') ? 'easeOutExpo' : this.settings.easing_default;
1777			var time_animate = 700 / this.settings.velocity;
1778			
1779			this.setActualLevel();
1780			

1781			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
1782			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1783			var height_box 	= (this.settings.height_skitter);
1784			
1785			for (i = 0; i < total; i++) {
1786				var _ileft = (width_box * (i));
1787				var _itop = 0;
1788				
1789				var _fleft = (width_box * (i));
1790				var _ftop = 0;
1791				
1792				var _bleft = -(width_box * (i));
1793				var _btop = 0;
1794				
1795				var delay_time = 100 * i;
1796				
1797				var box_clone = this.getBoxClone();
1798				box_clone.css({left: _ileft, top:_itop, width:width_box, height:height_box});
1799				
1800				box_clone
1801					.find('img')
1802					.css({left: _bleft + (width_box / 1.5), top: _btop})
1803					.delay(delay_time)
1804					.animate({left: _bleft, top: _btop}, (time_animate * 1.1), 'easeInOutQuad');
1805				
1806				this.addBoxClone(box_clone);
1807				
1808				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1809				box_clone.delay(delay_time).animate({top:_ftop, left:_fleft, opacity: 'show'}, time_animate, easing, callback);
1810				
1811			}
1812		},
1813		
1814		animationCircles: function(options)
1815		{
1816			var self = this;
1817			
1818			this.settings.is_animating = true;
1819			var easing = (this.settings.easing_default == '') ? 'easeInQuad' : this.settings.easing_default;
1820			var time_animate = 500 / this.settings.velocity;
1821			
1822			this.setActualLevel();
1823			
1824			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
1825			var size_box	= 100;
1826			
1827			var radius		= Math.sqrt(Math.pow((this.settings.width_skitter), 2) + Math.pow((this.settings.height_skitter), 2));
1828			var radius		= Math.ceil(radius);
1829			
1830			for (i = 0; i < total; i++) {
1831				var _ileft = (self.settings.width_skitter / 2) - (size_box / 2);
1832				var _itop = (self.settings.height_skitter / 2) - (size_box / 2);
1833				
1834				var _fleft = _ileft; 
1835				var _ftop = _itop; 
1836				
1837				var box_clone = this.getBoxClone();
1838				box_clone.css({left: _ileft, top:_itop, width:size_box, height:size_box}).css3({
1839					'border-radius': radius+'px'
1840				});
1841				box_clone.find('img').css({left: -_ileft, top: -_itop});
1842				
1843				size_box += 100;
1844				
1845				this.addBoxClone(box_clone);
1846				
1847				var delay_time = 70 * i;
1848				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1849				box_clone.delay(delay_time).animate({top: _ftop, left: _fleft, opacity: 'show'}, time_animate, easing, callback);
1850				
1851			}
1852		},
1853		
1854		animationCirclesInside: function(options)
1855		{
1856			var self = this;
1857			
1858			this.settings.is_animating = true;
1859			var easing = (this.settings.easing_default == '') ? 'easeInQuad' : this.settings.easing_default;
1860			var time_animate = 500 / this.settings.velocity;
1861			
1862			var image_old = this.box_skitter.find('.image_main').attr('src');
1863			
1864			this.setActualLevel();
1865			
1866			this.setLinkAtual();
1867			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
1868			
1869			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
1870			
1871			var radius		= Math.sqrt(Math.pow((this.settings.width_skitter), 2) + Math.pow((this.settings.height_skitter), 2));
1872			var radius		= Math.ceil(radius);
1873			var size_box	= radius;
1874			
1875			for (i = 0; i < total; i++) {
1876				var _ileft = (self.settings.width_skitter / 2) - (size_box / 2);
1877				var _itop = (self.settings.height_skitter / 2) - (size_box / 2);
1878				
1879				var _fleft = _ileft; 
1880				var _ftop = _itop; 
1881				
1882				var box_clone = this.getBoxCloneImgOld(image_old);
1883				box_clone.css({left: _ileft, top:_itop, width:size_box, height:size_box}).css3({
1884					'border-radius': radius+'px'
1885				});
1886				box_clone.find('img').css({left: -_ileft, top: -_itop});
1887				
1888				size_box -= 100;
1889				
1890				this.addBoxClone(box_clone);
1891				box_clone.show();
1892				
1893				var delay_time = 70 * i;
1894				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1895				box_clone.delay(delay_time).animate({top: _ftop, left: _fleft, opacity: 'hide'}, time_animate, easing, callback);
1896				
1897			}
1898		},
1899		
1900		animationCirclesRotate: function(options)
1901		{
1902			var self = this;
1903			
1904			this.settings.is_animating = true;
1905			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1906			var time_animate = 500 / this.settings.velocity;
1907			
1908			var image_old = this.box_skitter.find('.image_main').attr('src');
1909			
1910			this.setActualLevel();
1911			
1912			this.setLinkAtual();
1913			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
1914			

1915			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
1916			
1917			var radius		= Math.sqrt(Math.pow((this.settings.width_skitter), 2) + Math.pow((this.settings.height_skitter), 2));
1918			var radius		= Math.ceil(radius);
1919			var size_box	= radius;
1920			
1921			for (i = 0; i < total; i++) {
1922				var _ileft = (self.settings.width_skitter / 2) - (size_box / 2);
1923				var _itop = (self.settings.height_skitter / 2) - (size_box / 2);
1924				
1925				var _fleft = _ileft; 
1926				var _ftop = _itop; 
1927				
1928				var box_clone = this.getBoxCloneImgOld(image_old);
1929				box_clone.css({left: _ileft, top:_itop, width:size_box, height:size_box}).css3({
1930					'border-radius': radius+'px'
1931				});
1932				box_clone.find('img').css({left: -_ileft, top: -_itop});
1933				
1934				size_box -= 100;
1935				
1936				this.addBoxClone(box_clone);
1937				box_clone.show();
1938				
1939				var delay_time = 100 * i;
1940				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1941				var _rotate = (i % 2 == 0) ? '20deg' : '-20deg';
1942				box_clone.delay(delay_time).animate({top: _ftop, left: _fleft, opacity: 'hide', rotate: _rotate}, time_animate, easing, callback);
1943			}
1944		},
1945		
1946		animationCubeShow: function(options)
1947		{
1948			var self = this;
1949			
1950			this.settings.is_animating = true;
1951			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1952			var time_animate = 400 / this.settings.velocity;
1953			
1954			this.setActualLevel();
1955			
1956			var division_w 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
1957			var division_h 		= Math.ceil(this.settings.height_skitter / (this.settings.height_skitter / 4));
1958			var total			= division_w * division_h;
1959			
1960			var width_box 		= Math.ceil(this.settings.width_skitter / division_w);
1961			var height_box 		= Math.ceil(this.settings.height_skitter / division_h);
1962			
1963			var last 			= false;
1964			
1965			var _btop 			= 0;
1966			var _bleft 			= 0;
1967			var line			= 0;
1968			var col				= 0;
1969			
1970			for (i = 0; i < total; i++) {
1971				
1972				_btop = height_box * line;
1973				_bleft = width_box * col;
1974				
1975				var delay_time = 30 * (i);
1976				
1977				var box_clone 		= this.getBoxClone();
1978				box_clone.css({left:_bleft, top:_btop, width:width_box, height:height_box}).hide();
1979				box_clone.find('img').css({left:-_bleft, top:-_btop});
1980				this.addBoxClone(box_clone);
1981				
1982				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1983				box_clone.delay(delay_time).animate({width:'show', height:'show'}, time_animate, easing, callback);
1984				
1985				line++;
1986				if (line == division_h) {
1987					line = 0;
1988					col++;
1989				}
1990			}
1991		},
1992		
1993		animationDirectionBars: function(options)
1994		{
1995			var self = this;
1996			
1997			var options = $.extend({}, {direction: 'top'}, options || {});
1998			
1999			this.settings.is_animating = true;
2000			var easing = (this.settings.easing_default == '') ? 'easeInOutQuad' : this.settings.easing_default;
2001			var time_animate = 400 / this.settings.velocity;
2002			
2003			var image_old = this.box_skitter.find('.image_main').attr('src');
2004			
2005			this.setActualLevel();
2006			
2007			this.setLinkAtual();
2008			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
2009			
2010			var total		= 12;
2011			var width_box 	= Math.ceil(this.settings.width_skitter / total);
2012			var height_box 	= this.settings.height_skitter;
2013			var _ftop		= (options.direction == 'top') ? -height_box : height_box;
2014			
2015			for (i = 0; i < total; i++) {
2016				var _vtop 			= 0;
2017				var _vleft 			= (width_box * i);
2018				var _vtop_image 	= 0;
2019				var _vleft_image 	= -(width_box * i) ;
2020				
2021				var box_clone = this.getBoxCloneImgOld(image_old);
2022				
2023				box_clone.css({left:_vleft+'px', top:_vtop+'px', width:width_box, height:height_box});
2024				box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
2025				
2026				this.addBoxClone(box_clone);
2027				box_clone.show();
2028				
2029				var delay_time = 70 * i;
2030				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
2031				
2032				box_clone.delay(delay_time).animate({top:_ftop}, time_animate, easing, callback);
2033			}
2034			
2035		},
2036		
2037		// End animations ----------------------
2038		

2039		// Finish animation
2040		finishAnimation: function (options) 
2041		{
2042			var self = this;
2043			this.box_skitter.find('.image_main').show();
2044			this.showBoxText();
2045			this.settings.is_animating = false;
2046			this.box_skitter.find('.image_main').attr({'src': this.settings.image_atual});
2047			this.box_skitter.find('.image a').attr({'href': this.settings.link_atual});
2048			if (!this.settings.is_hover_box_skitter && !this.settings.is_paused && !this.settings.is_blur) {
2049				this.timer = setTimeout(function() { self.completeMove(); }, this.settings.interval);
2050			}
2051			
2052			self.startTime();
2053		},
2054
2055		// Complete move
2056		completeMove: function () 
2057		{
2058			this.clearTimer(true);
2059			this.box_skitter.find('.box_clone').remove();
2060			if (!this.settings.is_paused && !this.settings.is_blur) this.nextImage();
2061		},
2062
2063		// Actual config for animation
2064		setActualLevel: function() {
2065			if ($.isFunction(this.settings.imageSwitched)) this.settings.imageSwitched(this.settings.image_i, this);
2066			this.setImageLink();
2067			this.addClassNumber();
2068			this.hideBoxText();
2069			this.increasingImage();
2070		},
2071
2072		// Set image and link
2073		setImageLink: function()
2074		{
2075			var name_image = this.settings.images_links[this.settings.image_i][0];
2076			var link_image = this.settings.images_links[this.settings.image_i][1];
2077			var label_image = this.settings.images_links[this.settings.image_i][3];
2078			var target_link = this.settings.images_links[this.settings.image_i][4];
2079			
2080			this.settings.image_atual = name_image;
2081			this.settings.link_atual = link_image;
2082			this.settings.label_atual = label_image;
2083			this.settings.target_atual = target_link;
2084		},
2085
2086		// Add class for number
2087		addClassNumber: function () 
2088		{
2089			var self = this;
2090			this.box_skitter.find('.image_number_select').animate(self.settings.animateNumberOut, 500).removeClass('image_number_select');
2091			$('#image_n_'+(this.settings.image_i+1)+'_'+self.number_skitter).animate(self.settings.animateNumberActive, 700).addClass('image_number_select');
2092		},
2093
2094		// Increment image_i
2095		increasingImage: function()
2096		{
2097			this.settings.image_i++;
2098			if (this.settings.image_i == this.settings.images_links.length) {
2099				this.settings.image_i = 0;
2100			}
2101		},
2102		
2103		// Get box clone
2104		getBoxClone: function()
2105		{
2106			if (this.settings.link_atual != '#') {
2107				var img_clone = $('<a href="'+this.settings.link_atual+'"><img src="'+this.settings.image_atual+'" /></a>');
2108			} 
2109			else {
2110				var img_clone = $('<img src="'+this.settings.image_atual+'" />');
2111			}
2112			
2113			img_clone = this.resizeImage(img_clone);
2114			var box_clone = $('<div class="box_clone"></div>');
2115			box_clone.append(img_clone);
2116			return box_clone;
2117		},
2118		
2119		// Get box clone
2120		getBoxCloneImgOld: function(image_old)
2121		{
2122			if (this.settings.link_atual != '#') {
2123				var img_clone = $('<a href="'+this.settings.link_atual+'"><img src="'+image_old+'" /></a>');
2124			} 
2125			else {
2126				var img_clone = $('<img src="'+image_old+'" />');
2127			}
2128			
2129			img_clone = this.resizeImage(img_clone);
2130			var box_clone = $('<div class="box_clone"></div>');
2131			box_clone.append(img_clone);
2132			return box_clone;
2133		},
2134			
2135		// Redimensiona imagem
2136		resizeImage: function(img_clone) 
2137		{			
2138			if (this.settings.fullscreen) {
2139				img_clone.find('img').height(this.settings.height_skitter);
2140			}
2141			img_clone.find('img').width(this.settings.width_skitter);
2142			return img_clone;
2143		}, 
2144
2145		// Add box clone in box_skitter
2146		addBoxClone: function(box_clone)
2147		{
2148			this.box_skitter.find('.container_skitter').append(box_clone);
2149		},
2150		
2151		// Get accepts easing 
2152		getEasing: function(easing)
2153		{
2154			var easing_accepts = [
2155				'easeInQuad', 		'easeOutQuad', 		'easeInOutQuad', 
2156				'easeInCubic', 		'easeOutCubic', 	'easeInOutCubic', 
2157				'easeInQuart', 		'easeOutQuart', 	'easeInOutQuart', 
2158				'easeInQuint', 		'easeOutQuint', 	'easeInOutQuint', 
2159				'easeInSine', 		'easeOutSine', 		'easeInOutSine', 
2160				'easeInExpo',		'easeOutExpo', 		'easeInOutExpo', 
2161				'easeInCirc', 		'easeOutCirc', 		'easeInOutCirc', 
2162				'easeInElastic', 	'easeOutElastic', 	'easeInOutElastic', 
2163				'easeInBack', 		'easeOutBack', 		'easeInOutBack', 
2164				'easeInBounce', 	'easeOutBounce', 	'easeInOutBounce', 
2165			];
2166			
2167			if (jsnThemeSliderjQuery.inArray(easing, easing_accepts) > 0) {
2168				return easing;
2169			}
2170			else {
2171				return '';
2172			}
2173		},
2174		
2175		// Get random number
2176		getRandom: function (i) 
2177		{
2178			return Math.floor(Math.random() * i);
2179		},
2180
2181		// Set value for text
2182		setValueBoxText: function () 
2183		{
2184			this.box_skitter.find('.label_skitter').html(this.settings.label_atual);
2185		},
2186		
2187		// Show box text
2188		showBoxText: function () 
2189		{
2190			var self = this;
2191			if (this.settings.label_atual != undefined && this.settings.label_atual != '' && self.settings.label) {
2192				self.box_skitter.find('.label_skitter').slideDown(400);
2193			}
2194		},
2195		
2196		// Hide box text
2197		hideBoxText: function () 
2198		{
2199			var self = this;
2200			this.box_skitter.find('.label_skitter').slideUp(200, function() {
2201				self.setValueBoxText();
2202			});
2203		},
2204		
2205		// Stop time to get over box_skitter
2206		stopOnMouseOver: function () 
2207		{
2208			var self = this;
2209			var opacity_elements = self.settings.opacity_elements;
2210			var interval_in_elements = self.settings.interval_in_elements;
2211			var interval_out_elements = self.settings.interval_out_elements;
2212			if ( self.settings.stop_over ) 
2213			{			
2214				self.box_skitter.hover(function() {
2215				
2216					if (self.settings.stop_over) self.settings.is_hover_box_skitter = true;
2217					
2218					if (!self.settings.is_paused_time) {
2219						self.pauseTime();
2220					}
2221					
2222					if (self.settings.hideTools) {
2223						if (self.settings.numbers) {
2224							self.box_skitter
2225								.find('.info_slide')
2226								.show()
2227								.css({opacity:0}

2227)
2228								.animate({opacity: opacity_elements}, interval_in_elements);
2229						}
2230						
2231						if (self.settings.navigation) {
2232							self.box_skitter
2233								.find('.prev_button')
2234								.show()
2235								.css({opacity:0})
2236								.animate({opacity: opacity_elements}, interval_in_elements);
2237								
2238							self.box_skitter
2239								.find('.next_button')
2240								.show().css({opacity:0})
2241								.animate({opacity: opacity_elements}, interval_in_elements);
2242						}
2243	
2244						if (self.settings.focus && !self.settings.foucs_active) {
2245							self.box_skitter
2246								.find('.focus_button')
2247								.stop()
2248								.show().css({opacity:0})
2249								.animate({opacity:opacity_elements}, 200);
2250						}
2251						
2252						if (self.settings.controls) {
2253							self.box_skitter
2254							.find('.play_pause_button')
2255							.stop()
2256							.show().css({opacity:0})
2257							.animate({opacity:opacity_elements}, 200);
2258						}
2259					}
2260					
2261					self.clearTimer(true);
2262					
2263					if (self.settings.focus && !self.settings.foucs_active && !self.settings.hideTools) {
2264						self.box_skitter
2265							.find('.focus_button')
2266							.stop()
2267							.animate({opacity:1}, 200);
2268					}
2269					
2270					if (self.settings.controls && !self.settings.hideTools) {
2271						self.box_skitter
2272							.find('.play_pause_button')
2273							.stop()
2274							.animate({opacity:1}, 500);
2275					}
2276				}, function() {
2277					if (self.settings.stop_over) self.settings.is_hover_box_skitter = false;
2278					
2279					if (self.settings.elapsedTime == 0 && !self.settings.is_animating && !self.settings.is_paused) {
2280						self.startTime();
2281					}
2282					else if (!self.settings.is_paused) {
2283						self.resumeTime();
2284					}
2285					
2286					if (self.settings.hideTools) {
2287						if (self.settings.numbers) {
2288							self.box_skitter
2289								.find('.info_slide')
2290								.queue("fx", [])
2291								.show()
2292								.css({opacity: opacity_elements})
2293								.animate({opacity:0}

2293, interval_out_elements);
2294						}
2295						
2296						if (self.settings.navigation) {
2297							self.box_skitter
2298								.find('.prev_button')
2299								.queue("fx", [])
2300								.show()
2301								.css({opacity: opacity_elements})
2302								.animate({opacity:0}, interval_out_elements);
2303								
2304							self.box_skitter
2305								.find('.next_button')
2306								.queue("fx", [])
2307								.show()
2308								.css({opacity: opacity_elements})
2309								.animate({opacity:0}, interval_out_elements);
2310						}
2311	
2312	
2313						if (self.settings.focus && !self.settings.foucs_active) {
2314							self.box_skitter
2315								.find('.focus_button')
2316								.stop()
2317								.css({opacity: opacity_elements})
2318								.animate({opacity:0}, 200);
2319						}
2320	
2321						if (self.settings.controls) {
2322							self.box_skitter
2323								.find('.play_pause_button')
2324								.stop()
2325								.css({opacity: opacity_elements})
2326								.animate({opacity:0}, 200);
2327						}
2328					}
2329					
2330					self.clearTimer(true);
2331					
2332					if (!self.settings.is_animating && self.settings.images_links.length > 1) {
2333						self.timer = setTimeout(function() { self.completeMove(); }, self.settings.interval - self.settings.elapsedTime);
2334						self.box_skitter.find('.image_main').attr({'src': self.settings.image_atual});
2335						self.box_skitter.find('.image a').attr({'href': self.settings.link_atual});
2336					}
2337					
2338					if (self.settings.focus && !self.settings.foucs_active && !self.settings.hideTools) {
2339						self.box_skitter
2340							.find('.focus_button')
2341							.stop()
2342							.animate({opacity:0.3}, 200);
2343					}
2344					
2345					if (self.settings.controls && !self.settings.hideTools) {
2346						self.box_skitter
2347							.find('.play_pause_button')
2348							.stop()
2349							.animate({opacity:0.3}, 200);
2350					}
2351					
2352				});
2353			}
2354		}, 
2355		
2356		// Stop timer
2357		clearTimer: function (force) {
2358			var self = this;
2359			clearInterval(self.timer);
2360		},
2361		
2362		// Set link atual
2363		setLinkAtual: function() {
2364			if (this.settings.link_atual != '#') {
2365				this.box_skitter.find('.image a').attr({'href': this.settings.link_atual, 'target': this.settings.target_atual});
2366			}
2367			else {
2368				this.box_skitter.find('.image a').removeAttr('href');
2369			}
2370		},
2371		
2372		// Hide tools
2373		hideTools: function() {
2374			this.box_skitter.find('.info_slide').hide();
2375			this.box_skitter.find('.prev_button').hide();
2376			this.box_skitter.find('.next_button').hide();
2377			this.box_skitter.find('.label_skitter').hide();
2378			this.box_skitter.find('.focus_button').hide();
2379			this.box_skitter.find('.play_pause_button').hide();
2380		}, 
2381		
2382		// Animation mouse over
2383		mouseOverButton: function() {
2384			$(this).stop().animate({opacity:0.5}, 200);
2385		}, 
2386		
2387		// Animation mouse out
2388		mouseOutButton: function() {
2389			$(this).stop().animate({opacity:1}, 200);
2390		}, 
2391		
2392		// Focus Skitter
2393		focusSkitter: function() {
2394			var self = this;
2395			
2396			var focus_button = $('<span class="focus_button">focus</span>');
2397			self.box_skitter.append(focus_button);
2398			
2399			var _left = (self.settings.width_skitter - focus_button.width()) / 2;
2400			var _space = 0;
2401			
2402			if (self.settings.controls) _left -= 25;
2403			if (self.settings.controls_position == self.settings.focus_position) _space = focus_button.width() + 5;
2404			
2405			var cssPosition = {left: _left};
2406			
2407			switch (self.settings.focus_position)
2408			{
2409				case 'leftTop' 		: cssPosition = {left: 5 + _space, top: 30}; break;
2410				case 'rightTop' 	: cssPosition = {right: 5 + _space, top: 30}; break;
2411				case 'leftBottom' 	: cssPosition = {left: 5 + _space, bottom: 5, top: 'auto'}; break;
2412				case 'rightBottom' 	: cssPosition = {right: 5 + _space, bottom: 5, top: 'auto'}; break;
2413			}
2414			
2415			focus_button
2416				.css(cssPosition)
2417				.animate({opacity:0.3}, self.settings.interval_in_elements);
2418			
2419			$(document).keypress(function(e) {
2420				var code = (e.keyCode ? e.keyCode : e.which);
2421				if (code == 27) $('#overlay_skitter').trigger('click');
2422			});
2423			
2424			self.box_skitter.find('.focus_button').click(function() {
2425				self.settings.foucs_active = true;
2426				
2427				$(this).stop().animate({opacity:0}

2427, self.settings.interval_out_elements);
2428				
2429				var div = $('<div id="overlay_skitter"></div>')
2430					.height( $(document).height() )
2431					.hide()
2432					.fadeTo(self.settings.interval_in_elements, 0.98);
2433					
2434				var _top = $('.box_skitter').offset().top;
2435				var _left = $('.box_skitter').offset().left;
2436				var _topFinal = (($(window).height() - $('.box_skitter').height()) / 2) + $(document).scrollTop();
2437				var _leftFinal = ($(window).width() - $('.box_skitter').width()) / 2;
2438				
2439				self.box_skitter.before('<div id="mark_position"></div>');
2440				$('body').prepend(div);
2441				$('body').prepend(self.box_skitter);
2442				self.box_skitter
2443					.css({'top':_top, 'left':_left, 'position':'absolute', 'z-index':9999})
2444					.animate({'top':_topFinal, 'left':_leftFinal}, 2000, 'easeOutExpo');
2445				
2446				$('#mark_position')	
2447					.width($('.box_skitter').width())
2448					.height($('.box_skitter').height())
2449					.css({'background':'none'})
2450					.fadeTo(300,0.3);
2451				
2452				$('#overlay_skitter').click(function() {
2453					if ($(this).hasClass('finish_overlay_skitter')) return false;
2454					
2455					self.settings.foucs_active = false;
2456					$(this).addClass('finish_overlay_skitter');
2457					
2458					$('#mark_position').before($('.box_skitter'));
2459					
2460					if (!self.settings.hideTools) self.box_skitter.find('.focus_button').animate({opacity:0.3}, 200);
2461					
2462					self.box_skitter
2463						.stop()
2464						.animate({'top':_top, 'left':_left}, 300, 'easeOutExpo', function() {
2465							$(this).css({'position':'relative', 'top':0, 'left': 0});
2466							$('#mark_position').remove();
2467						});
2468					
2469					$('#overlay_skitter').fadeTo(self.settings.interval_out_elements, 0, function() {
2470						$(this).remove();
2471					});
2472					
2473					return false;
2474				});
2475				
2476				return false;
2477			});
2478		},
2479		
2480
2481		/**
2482		 * Controls: play and stop
2483		 */
2484		setControls: function() {
2485			var self = this;
2486			
2487			var play_pause_button = $('<span class="play_pause_button">pause</span>');
2488			self.box_skitter.append(play_pause_button);
2489			
2490			var _left = (self.settings.width_skitter - play_pause_button.width()) / 2;
2491			
2492			if (self.settings.focus) _left += 25;
2493			
2494			var cssPosition = {left: _left};
2495			
2496			switch (self.settings.controls_position)
2497			{
2498				case 'leftTop' 		: cssPosition = {left: 5, top: 30}; break;
2499				case 'rightTop' 	: cssPosition = {right: 5, top: 30}; break;
2500				case 'leftBottom' 	: cssPosition = {left: 5, bottom: 5, top: 'auto'}; break;
2501				case 'rightBottom' 	: cssPosition = {right: 5, bottom: 5, top: 'auto'}; break;
2502			}
2503			if (!self.settings.controlShowOnMouseOver)
2504			{
2505				play_pause_button
2506					.css(cssPosition)
2507					.animate({opacity:0.3}, self.settings.interval_in_elements);
2508			}
2509			else
2510			{
2511				play_pause_button
2512				.css(cssPosition)
2513				.animate({opacity:0}

2513, self.settings.interval_in_elements);			
2514			}	
2515			play_pause_button.click(function() {
2516				if (!self.settings.is_paused) {
2517					$(this).html('play');
2518					$(this).fadeTo(100, 0.5).fadeTo(100, 1);
2519					
2520					$(this).addClass('play_button');
2521					self.pauseTime();
2522					self.settings.is_paused = true;
2523					self.clearTimer(true);
2524				}
2525				else {
2526					if (!self.settings.is_animating && !self.box_skitter.find('.progressbar').is(':visible')) {
2527						self.settings.elapsedTime = 0;
2528					}
2529					else {
2530						self.resumeTime();
2531					}
2532					
2533					if (!self.settings.progressbar) self.resumeTime();
2534					
2535					self.settings.is_paused = false;
2536					
2537					$(this).html('pause');
2538					$(this).fadeTo(100, 0.5).fadeTo(100, 1);
2539					$(this).removeClass('play_button');
2540					
2541					if (!self.settings.stop_over) { 
2542						self.clearTimer(true);
2543						if (!self.settings.is_animating && self.settings.images_links.length > 1) {
2544							self.timer = setTimeout(function() { self.completeMove(); }, self.settings.interval - self.settings.elapsedTime);
2545							self.box_skitter.find('.image_main').attr({'src': self.settings.image_atual});
2546							self.box_skitter.find('.image a').attr({'href': self.settings.link_atual});
2547						}
2548					}
2549				}
2550				
2551				return false;
2552			});
2553		},
2554				
2555		/**
2556		 * Object size
2557		 */
2558		objectSize: function(obj) {
2559			var size = 0, key;
2560			for (key in obj) { if (obj.hasOwnProperty(key)) size++; }
2561			return size;
2562		},
2563		
2564		/**
2565		 * Add progress bar
2566		 */
2567		addProgressBar: function() {
2568			var self = this;
2569			
2570			var progressbar = $('<div class="progressbar"></div>');
2571			self.box_skitter.append(progressbar);
2572			
2573			if (self.objectSize(self.settings.progressbar_css) == 0)  {
2574				if (parseInt(progressbar.css('width')) > 0) {
2575					self.settings.progressbar_css.width = parseInt(progressbar.css('width'));
2576				}
2577				else {
2578					self.settings.progressbar_css = {width: self.settings.width_skitter, height:5};
2579				}
2580			}
2581			if (self.objectSize(self.settings.progressbar_css) > 0 && self.settings.progressbar_css.width == undefined) {
2582				self.settings.progressbar_css.width = self.settings.width_skitter;
2583			}
2584			
2585			progressbar.css(self.settings.progressbar_css).hide();
2586		},
2587		
2588		/**
2589		 * Start progress bar
2590		 */
2591		startProgressBar: function() {
2592			var self = this;
2593			if (self.settings.is_hover_box_skitter || self.settings.is_paused || self.settings.is_blur || !self.settings.progressbar) return false;
2594			self.box_skitter.find('.progressbar')
2595				.hide()
2596				.dequeue()
2597				.width(self.settings.progressbar_css.width)
2598				.animate({width:'show'}, self.settings.interval, 'linear');
2599		},
2600		
2601		/**
2602		 * Pause progress bar
2603		 */
2604		pauseProgressBar: function() {
2605			var self = this;
2606			if (!self.settings.is_animating) {
2607				self.box_skitter.find('.progressbar').stop();
2608			}
2609		},
2610		
2611		/**
2612		 * Resume progress bar
2613		 */
2614		resumeProgressBar: function() {
2615			var self = this;
2616			
2617			if (self.settings.is_hover_box_skitter || self.settings.is_paused || !self.settings.progressbar) return false;
2618			
2619			self.box_skitter.find('.progressbar').dequeue().animate({width: self.settings.progressbar_css.width}, (self.settings.interval - self.settings.elapsedTime), 'linear');
2620		},
2621		
2622		/**
2623		 * Hide progress bar
2624		 */
2625		hideProgressBar: function() {
2626			var self = this;
2627			
2628			if (!self.settings.progressbar) return false;
2629			
2630			self.box_skitter.find('.progressbar').stop().fadeOut(300, function() {
2631				$(this).width(self.settings.progressbar_css.width);
2632			});
2633		},
2634
2635		/**
2636		 * Start time
2637		 */
2638		startTime: function() {
2639			var self = this;
2640			
2641			self.settings.is_paused_time = false;
2642			
2643			var date = new Date();
2644			self.settings.elapsedTime = 0;
2645			self.settings.timeStart = date.getTime();
2646			
2647			// Start progress bar
2648			self.startProgressBar();
2649		}, 
2650		
2651		/**
2652		 * Pause time
2653		 */
2654		pauseTime: function() {
2655			var self = this;
2656			
2657			if (self.settings.is_paused_time) return false;
2658			self.settings.is_paused_time = true;
2659			
2660			var date = new Date();
2661			self.settings.elapsedTime += date.getTime() - self.settings.timeStart;
2662			
2663			// Pause progress bar
2664			self.pauseProgressBar();
2665		}, 
2666		
2667		/**
2668		 * Resume time
2669		 */
2670		resumeTime: function() {
2671			var self = this;
2672			
2673			self.settings.is_paused_time = false;