https://www.orimoclinic.com/js/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 4.0
7 * @date August 04, 2010
8 * @update April 19, 2012
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		//アニメーションスピード Default = 1
29		velocity: 				0.5,
30		interval: 				3500, 
31		animation: 				'',
32		numbers: 				false,
33		navigation:			 	false,
34		dots: 					false,
35		thumbs: 				false,
36		//Loop処理パラメーター追加
37		once:                   false,
38		label:					false,
39		easing_default: 		'',
40		box_skitter: 			null,
41		time_interval: 			null,
42		images_links: 			null,
43		image_atual: 			null,
44		link_atual: 			null,
45		label_atual: 			null,
46		target_atual: 			'_self',
47		width_skitter: 			null,
48		height_skitter: 		null,
49		image_i: 				1,
50		is_animating:  			false,
51		is_hover_box_skitter: 	false,
52		random_ia: 				null,
53		show_randomly: 			false,
54		animateNumberOut: 		{backgroundColor:'#DCDCDC', color:'#fff',opacity:0.8},
55		animateNumberOver: 		{backgroundColor:'#C0C0C0', color:'#000',opacity:1},
56		animateNumberActive: 	{backgroundColor:'#696969', color:'#fff',opacity:1},
57		hideTools: 				false,
58		fullscreen: 			false,
59		xml: 					false,
60		width_label: 			null,
61		opacity_elements:		0.5, // Final opacity of elements in hideTools
62		interval_in_elements:	300, // Interval animation hover elements hideTools
63		interval_out_elements:	500, // Interval animation out elements hideTools
64		onLoad:					null,
65		imageSwitched:			null,
66		max_number_height: 		20,
67		//ナンバー=>バーに変更 表示位置 Default = 'left'
68		numbers_align:			'center',
69		preview:				false,
70		focus:					false,
71		foucs_active:			false,
72		focus_position:			'center',
73		controls:				false,
74		controls_position:		'center',
75		progressbar:			false,
76		progressbar_css:		{},
77		is_paused:				false,
78		is_blur:				false,
79		is_paused_time:			false,
80		timeStart:				0,
81		elapsedTime:			0,
82		stop_over:				false,
83		enable_navigation_keys:	false,
84		with_animations:		[],
85		mouseOverButton: 		function() { $(this).stop().animate({opacity:1}, 200); }, 
86		mouseOutButton: 		function() { $(this).stop().animate({opacity:0.5}, 200); }, 
87		auto_play: 				true, 
88		structure: 	 			  '<a href="#" class="prev_button">prev</a>'
89								+ '<a href="#" class="next_button">next</a>'
90								+ '<span class="info_slide"></span>'
91								+ '<div class="container_skitter">'
92									+ '<div class="image">'
93										+ '<a href=""><img class="image_main" /></a>'
94										+ '<div class="label_skitter"></div>'
95									+ '</div>'
96								+ '</div>'
97		
98	};
99	
100	$.skitter = function(obj, options, number) {
101		this.box_skitter = $(obj);
102		this.timer = null;
103		this.settings = $.extend({}, defaults, options || {});
104		this.number_skitter = number;
105		/* */
106		this.reached = false;
107		this.setup();
108	};
109	
110	// Shortcut
111	var $sk = $.skitter;
112	$sk.fn = $sk.prototype = {};
113	$sk.fn.extend = $.extend;
114	$sk.fn.extend({
115		
116		/**
117		 * Init
118		 */
119		setup: function() 
120		{
121			var self = this;
122
123			// Fullscreen
124			if (this.settings.fullscreen) {
125				var width = $(window).width();
126				var height = $(window).height();
127				this.box_skitter.width(width).height(height);
128				this.box_skitter.css({'position':'absolute', 'top':0, 'left':0, 'z-index':1000});
129				this.settings.stop_over = false;
130				$('body').css({'overflown':'hidden'});
131			}
132			
133			this.settings.width_skitter 	= parseFloat(this.box_skitter.css('width'));
134			this.settings.height_skitter 	= parseFloat(this.box_skitter.css('height'));
135			
136			if (!this.settings.width_skitter || !this.settings.height_skitter) {
137				console.warn('Width or height size is null! - Skitter Slideshow');
138				return false;

139			}
140			
141			// Structure html
142			this.box_skitter.append(this.settings.structure);
143			// Settings
144			this.settings.easing_default 	= this.getEasing(this.settings.easing);
145						
146			if (this.settings.velocity >= 2) this.settings.velocity = 1.3;
147			if (this.settings.velocity <= 0) this.settings.velocity = 1;
148			
149			this.box_skitter.find('.info_slide').hide();
150			this.box_skitter.find('.label_skitter').hide();
151			this.box_skitter.find('.prev_button').hide();
152			this.box_skitter.find('.next_button').hide();
153			this.box_skitter.find('.container_skitter').width(this.settings.width_skitter);
154			this.box_skitter.find('.container_skitter').height(this.settings.height_skitter);
155			
156			var width_label = this.settings.width_label ? this.settings.width_label : this.settings.width_skitter;
157			this.box_skitter.find('.label_skitter').width(width_label);
158			
159			var initial_select_class = ' image_number_select', u = 0;
160			this.settings.images_links = new Array();
161			
162			// Add image, link, animation type and label
163			var addImageLink = function (link, src, animation_type, label, target) {
164				self.settings.images_links.push([src, link, animation_type, label, target]);
165				if (self.settings.thumbs) {
166					var dimension_thumb = '';
167					if (self.settings.width_skitter > self.settings.height_skitter) {
168						dimension_thumb = 'height="100"';
169					} else {
170						dimension_thumb = 'width="100"';
171					}
172					self.box_skitter.find('.info_slide').append(
173						'<span class="image_number'+initial_select_class+'" rel="'+(u - 1)+'" id="image_n_'+u+'_'+self.number_skitter+'">'
174							+'<img src="'+src+'" '+dimension_thumb+' />'
175							+'</span> '
176					);
177				} else {
178					self.box_skitter.find('.info_slide').append(
179						//'<span class="image_number'+initial_select_class+'" rel="'+(u - 1)+'" id="image_n_'+u+'_'+self.number_skitter+'">'+u+'</span> '
180						'<span class="image_number'+initial_select_class+'" rel="'+(u - 1)+'" id="image_n_'+u+'_'+self.number_skitter+'">&nbsp;</span> '
181					);
182				}
183				initial_select_class = '';
184			};
185
186			// Load from XML
187			if (this.settings.xml) {
188				$.ajax({
189					type: 'GET',
190					url: this.settings.xml,
191					async: false,
192					dataType: 'xml',
193					success: function(xml) {
194						var ul = $('<ul></ul>');
195						$(xml).find('skitter slide').each(function(){
196							++u;
197							var link 			= ($(this).find('link').text()) ? $(this).find('link').text() : '#';
198							var src 			= $(this).find('image').text();
199							var animation_type 	= $(this).find('image').attr('type');
200							var label 			= $(this).find('label').text();
201							var target 			= ($(this).find('target').text()) ? $(this).find('target').text() : '_self';
202							addImageLink(link, src, animation_type, label, target);
203						});
204					}
205				});
206			}
207			// Load from json
208			else if (this.settings.json) {
209				
210			}
211			// Load from HTML
212			else {
213				this.box_skitter.find('ul li').each(function(){
214					++u;
215					var link 			= ($(this).find('a').length) ? $(this).find('a').attr('href') : '#';
216					var src 			= $(this).find('img').attr('src');
217					var animation_type 	= $(this).find('img').attr('class');
218					var label 			= $(this).find('.label_text').html();
219					var target 			= ($(this).find('a').length && $(this).find('a').attr('target')) ? $(this).find('a').attr('target') : '_self';
220					addImageLink(link, src, animation_type, label, target);
221				});
222			}
223			
224			// Thumbs
225			if (self.settings.thumbs && !self.settings.fullscreen) 
226			{
227				// New animation
228				self.settings.animateNumberOut = {opacity:0.3};
229				self.settings.animateNumberOver = {opacity:1};
230				self.settings.animateNumberActive = {opacity:0.5};
231				
232				self.box_skitter.find('.info_slide').addClass('info_slide_thumb');
233				var width_info_slide = (u + 1) * self.box_skitter.find('.info_slide_thumb .image_number').width();
234				self.box_skitter.find('.info_slide_thumb').width(width_info_slide);
235				self.box_skitter.css({height:self.box_skitter.height() + self.box_skitter.find('.info_slide').height()});
236				
237				self.box_skitter.append('<div class="container_thumbs"></div>');
238				var copy_info_slide = self.box_skitter.find('.info_slide').clone();
239				self.box_skitter.find('.info_slide').remove();
240				self.box_skitter.find('.container_thumbs')
241					.width(self.settings.width_skitter)
242					.append(copy_info_slide);
243				
244				// Scrolling with mouse movement
245				var width_image = 0, 
246					width_skitter = this.settings.width_skitter,
247					height_skitter = this.settings.height_skitter, 
248					w_info_slide_thumb = 0,
249					info_slide_thumb = self.box_skitter.find('.info_slide_thumb'),
250					x_value = 0,
251					y_value = self.box_skitter.offset().top;
252					
253				info_slide_thumb.find('.image_number').each(function(){
254					width_image += $(this).outerWidth();
255				});
256				
257				info_slide_thumb.width(width_image+'px');
258				w_info_slide_thumb = info_slide_thumb.width();
259				width_value = this.settings.width_skitter;
260				
261				width_value = width_skitter - 100;
262				
263				if (width_info_slide > self.settings.width_skitter) {
264					self.box_skitter.mousemove(function(e){
265						x_value = self.box_skitter.offset().left + 90;
266						

267						var x = e.pageX, y = e.pageY, new_x = 0;
268						
269						x = x - x_value;
270						y = y - y_value;
271						novo_width = w_info_slide_thumb - width_value;
272						new_x = -((novo_width * x) / width_value);
273						
274						if (new_x > 0) new_x = 0;
275						if (new_x < -(w_info_slide_thumb - width_skitter)) new_x = -(w_info_slide_thumb - width_skitter);
276						
277						if (y > height_skitter) {
278							info_slide_thumb.css({left: new_x});
279						}
280					});
281				}
282				
283				self.box_skitter.find('.scroll_thumbs').css({'left':10});
284				
285				if (width_info_slide < self.settings.width_skitter) {
286					self.box_skitter.find('.info_slide').width('auto');
287					self.box_skitter.find('.box_scroll_thumbs').hide();
288					var class_info = '.info_slide';
289					switch (self.settings.numbers_align) {
290						case 'center' : 
291							var _vleft = (self.settings.width_skitter - self.box_skitter.find(class_info).width()) / 2;
292							self.box_skitter.find(class_info).css({'left':_vleft});
293							break;
294						case 'right' : 
295							self.box_skitter.find(class_info).css({'left':'auto', 'right':'-5px'});
296							break;
297						case 'left' : 
298							self.box_skitter.find(class_info).css({'left':'0px'});
299							break;
300					}
301				}
302				
303			}
304			else 
305			{
306				var class_info = '.info_slide';
307				
308				if (self.settings.dots) {
309					self.box_skitter.find('.info_slide').addClass('info_slide_dots').removeClass('info_slide');
310					class_info = '.info_slide_dots';
311				}
312				
313				switch (self.settings.numbers_align) {
314					case 'center' : 
315						//バーの位置が真ん中になるよう微調整
316						if(this.settings.images_links.length == 2){
317							var _vleft = (self.settings.width_skitter - self.box_skitter.find(class_info).width()) / 2;
318						}else if(this.settings.images_links.length == 3){
319							var _vleft = (self.settings.width_skitter - self.box_skitter.find(class_info).width()) / 2;
320						}else if(this.settings.images_links.length == 4){
321							var _vleft = (self.settings.width_skitter - self.box_skitter.find(class_info).width()) / 2.5;
322						}else{
323							var _vleft = (self.settings.width_skitter - self.box_skitter.find(class_info).width()) / 2;
324						}
325						//ドットの場合は右側へ
326						if(self.settings.dots){
327							self.box_skitter.find(class_info).css({'left':'auto', 'right':'15px'});
328						}else{
329							self.box_skitter.find(class_info).css({'left':_vleft});
330						}
331						break;
332					case 'right' : 
333						self.box_skitter.find(class_info).css({'left':'auto', 'right':'15px'});
334						break;
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			
347			this.box_skitter.find('ul').hide();
348			
349			if (this.settings.show_randomly)
350			this.settings.images_links.sort(function(a,b) {return Math.random() - 0.5;});
351			
352			this.settings.image_atual 	= this.settings.images_links[0][0];
353			this.settings.link_atual 	= this.settings.images_links[0][1];
354			this.settings.label_atual 	= this.settings.images_links[0][3];
355			this.settings.target_atual 	= this.settings.images_links[0][4];
356			
357			if (this.settings.images_links.length > 1) 
358			{
359				this.box_skitter.find('.prev_button').click(function() {
360					if (self.settings.is_animating == false) {
361						self.settings.image_i -= 2;
362						if (self.settings.image_i == -2) {
363							self.settings.image_i = self.settings.images_links.length - 2;
364						} else if (self.settings.image_i == -1) {
365							self.settings.image_i = self.settings.images_links.length - 1;
366						}
367						self.jumpToImage(self.settings.image_i);
368					}
369					return false;
370				});
371				
372				this.box_skitter.find('.next_button').click(function() {
373					self.jumpToImage(self.settings.image_i);
374					return false;
375				});
376				self.box_skitter.find('.next_button, .prev_button').css({opacity:0.5});
377				self.box_skitter.find('.next_button, .prev_button').bind('mouseover', self.settings.mouseOverButton);
378				self.box_skitter.find('.next_button, .prev_button').bind('mouseleave', self.settings.mouseOutButton);
379				
380				this.box_skitter.find('.image_number').hover(function() {
381					if ($(this).attr('class') != 'image_number image_number_select') {
382						$(this).stop().animate(self.settings.animateNumberOver, 300);
383					}
384				}, function(){
385					if ($(this).attr('class') != 'image_number image_number_select') {
386						$(this).stop().animate(self.settings.animateNumberOut, 500);
387					}
388				});
389				
390				this.box_skitter.find('.image_number').click(function(){
391					if ($(this).attr('class') != 'image_number image_number_select') {
392					    var imageNumber = parseInt($(this).attr('rel'));
393						self.jumpToImage(imageNumber);
394					}
395					return false;

396				});
397				
398				this.box_skitter.find('.image_number').css(self.settings.animateNumberOut);
399				
400				//バーの長さを可変にする
401				/*
402				if(this.settings.numbers){
403					this.box_skitter.find('.info_slide').css({left:'0%'});
404					switch (this.settings.images_links.length){
405					  case 1:
406					    var max_width = 830;
407					    break;
408					  case 2:
409						var max_width = 785;
410					    break;
411					  case 3:
412						var max_width = 760;
413					    break;
414					  case 4:
415						var max_width = 733;
416						break;
417					}
418					var image_number_width = max_width / this.settings.images_links.length;
419					this.box_skitter.find('.image_number,.image_number_select').css({width:image_number_width});				
420				}
421				*/
422				
423				this.box_skitter.find('.image_number:eq(0)').css(self.settings.animateNumberActive);
424				
425				// Preview with dots
426				if (self.settings.preview && self.settings.dots) 
427				{
428					var preview = $('<div class="preview_slide"><ul></ul></div>');
429					
430					for (var i = 0; i < this.settings.images_links.length; i++) {
431						var li = $('<li></li>');
432						var img = $('<img />');
433						img.attr('src', this.settings.images_links[i][0]);
434						li.append(img);
435						preview.find('ul').append(li);
436					}
437					
438					var width_preview_ul = parseInt(this.settings.images_links.length * 100);
439					preview.find('ul').width(width_preview_ul);
440					$(class_info).append(preview);
441					
442					self.box_skitter.find(class_info).find('.image_number').mouseenter(function() {
443						var _left_info = parseFloat(self.box_skitter.find(class_info).offset().left);
444						var _left_image = parseFloat($(this).offset().left);
445						var _left_preview = (_left_image - _left_info) - 43;
446						var rel = parseInt($(this).attr('rel'));
447						var image_current_preview = self.box_skitter.find('.preview_slide_current img').attr('src');
448						var _left_ul = -(rel * 100);
449						
450						self.box_skitter.find('.preview_slide').find('ul').animate({left: _left_ul}, {duration:200, queue: false, easing: 'easeOutSine'});
451						self.box_skitter.find('.preview_slide').fadeTo(1,1).animate({left: _left_preview}, {duration:200, queue: false});
452					});
453					
454					self.box_skitter.find(class_info).mouseleave(function() {
455						$('.preview_slide').animate({opacity: 'hide'}, {duration: 200, queue: false});
456					});
457				}
458			}
459			// Focus
460			if (self.settings.focus) {
461				self.focusSkitter();
462			}
463			// Constrols
464			if (self.settings.controls) {
465				self.setControls();
466			}
467			// Progressbar
468			if (self.settings.progressbar && self.settings.auto_play) {
469				self.addProgressBar();
470			}
471			// hideTools
472			if (self.settings.hideTools) {
473				self.hideTools();
474			}
475			// Navigation keys
476			if (self.settings.enable_navigation_keys) {
477				self.enableNavigationKeys();
478			}
479			this.loadImages();
480		},
481		
482		/**
483		 * Load images
484		 */
485		loadImages: function () 
486		{
487			var self = this;
488			
489			//ローディングをなくす
490			//var loading = $('<div class="loading">Loading</div>');
491			//this.box_skitter.append(loading);
492			var total = this.settings.images_links.length;
493			
494			var u = 0;
495			$.each(this.settings.images_links, function(i)
496			{
497				var self_il = this;
498				var loading = $('<span class="image_loading"></span>');
499				loading.css({position:'absolute', top:'-9999em'});
500				self.box_skitter.append(loading);
501				var img = new Image();
502				
503				$(img).load(function () {
504					++u;
505					if (u == total) {
506						self.box_skitter.find('.loading').remove();
507						self.box_skitter.find('.image_loading').remove();
508						self.start();
509					}
510				}).error(function () {
511					self.box_skitter.find('.loading, .image_loading, .image_number, .next_button, .prev_button').remove();
512					self.box_skitter.html('<p style="color:white;background:black;">Error loading images. One or more images were not found.</p>');
513				}).attr('src', self_il[0]);
514			});
515		}, 
516		
517		/**
518		 * Start skitter
519		 */
520		start: function()
521		{
522			var self = this;
523			var init_pause = false;
524
525			if (this.settings.numbers || this.settings.thumbs) this.box_skitter.find('.info_slide').fadeIn(500);
526			if (this.settings.dots) this.box_skitter.find('.info_slide_dots').fadeIn(500);
527			if (this.settings.label) this.box_skitter.find('.label_skitter').show();
528			if (this.settings.navigation) {
529				this.box_skitter.find('.prev_button').fadeIn(500);
530				this.box_skitter.find('.next_button').fadeIn(500);
531			}
532			
533			if (self.settings.auto_play) {
534				self.startTime();
535			}
536
537			//Windowからフォーカスが離れても止まらないようにする
538			//self.windowFocusOut();
539			self.setLinkAtual();
540			
541			self.box_skitter.find('.image a img').attr({'src': self.settings.image_atual});
542			img_link = self.box_skitter.find('.image a');
543			img_link = self.resizeImage(img_link);
544			//Fade In Config
545			//img_link.find('img').fadeIn(500);
546			img_link.find('img').fadeIn(75);
547			
548			self.setValueBoxText();
549			self.showBoxText();
550			
551			if (self.settings.auto_play) {
552				self.stopOnMouseOver();
553			}
554
555			var mouseOverInit = function() {
556				if (self.settings.stop_over) {
557					init_pause = true;
558					self.settings.is_hover_box_skitter = true;
559					self.clearTimer(true);
560					self.pauseProgressBar();
561				}
562			};
563
564			self.box_skitter.mouseover(mouseOverInit);
565			self.box_skitter.find('.next_button').mouseover(mouseOverInit);
566			
567			if (self.settings.images_links.length > 1 && !init_pause) {
568				if (self.settings.auto_play) {
569					self.timer = setTimeout(function() { self.nextImage(); }, self.settings.interval);
570				}
571			} else {
572				self.box_skitter.find('.loading, .image_loading, .image_number, .next_button, .prev_button').remove();
573			}
574			
575			if ($.isFunction(self.settings.onLoad)) self.settings.onLoad(self);
576		},
577		
578		/**
579		 * Jump to image
580		 */
581		jumpToImage: function(imageNumber) 
582		{
583			if (this.settings.is_animating == false) {
584				this.settings.elapsedTime = 0;
585				this.box_skitter.find('.box_clone').stop();
586				this.clearTimer(true);
587				this.settings.image_i = Math.floor(imageNumber);
588				
589				this.box_skitter.find('.image a').attr({'href': this.settings.link_atual});
590				this.box_skitter.find('.image_main').attr({'src': this.settings.image_atual});
591				this.box_skitter.find('.box_clone').remove();
592				
593				this.nextImage();
594			}
595		},
596		
597		/**
598		 * Next image
599		 */
600		nextImage: function() 
601		{
602			var self = this;
603			
604			animations_functions = [
605				'cube', 
606				'cubeRandom', 
607				'block', 
608				'cubeStop', 
609				'cubeStopRandom', 
610				'cubeHide', 
611				'cubeSize', 
612				'horizontal', 
613				'showBars', 
614				'showBarsRandom', 
615				'tube',
616				'fade',
617				'fadeFour',
618				'paralell',
619				'blind',
620				'blindHeight',
621				'blindWidth',
622				'directionTop',
623				'directionBottom',
624				'directionRight',
625				'directionLeft',
626				'cubeSpread',
627				'glassCube',
628				'glassBlock',
629				'circles',
630				'circlesInside',
631				'circlesRotate',
632				'cubeShow',
633				'upBars', 
634				'downBars', 
635				'hideBars', 

636				'swapBars', 
637				'swapBarsBack', 
638				'swapBlocks',
639				'cut'
640			];
641						
642			if (self.settings.progressbar) self.hideProgressBar();
643			
644			animation_type = (this.settings.animation == '' && this.settings.images_links[this.settings.image_i][2]) ? 
645				this.settings.images_links[this.settings.image_i][2] : (this.settings.animation == '' ? 'default' : this.settings.animation);
646			
647			// RandomUnique
648			if (animation_type == 'randomSmart') 
649			{
650				if (!this.settings.random_ia) {
651					animations_functions.sort(function() {
652						return 0.5 - Math.random();
653					});
654					this.settings.random_ia = animations_functions;
655				}
656				animation_type = this.settings.random_ia[this.settings.image_i];
657			}
658			// Random
659			else if (animation_type == 'random') 
660			{
661				var random_id = parseInt(Math.random() * animations_functions.length);
662				animation_type = animations_functions[random_id];
663			}
664			// Specific animations
665			else if (self.settings.with_animations.length > 0)
666			{
667				var total_with_animations = self.settings.with_animations.length;
668				if (this.settings._i_animation == undefined) {
669					this.settings._i_animation = 0;
670				}
671				animation_type = self.settings.with_animations[this.settings._i_animation];
672				++this.settings._i_animation;
673				if (this.settings._i_animation >= total_with_animations) this.settings._i_animation = 0;
674			}
675			
676			switch (animation_type) 
677			{
678				case 'cube' : 
679					this.animationCube();
680					break;
681				case 'cubeRandom' : 
682					this.animationCube({random:true});
683					break;
684				case 'block' : 
685					this.animationBlock();
686					break;
687				case 'cubeStop' : 
688					this.animationCubeStop();
689					break;
690				case 'cubeStopRandom' : 
691					this.animationCubeStop({random:true});
692					break;
693				case 'cubeHide' : 
694					this.animationCubeHide();
695					break;
696				case 'cubeSize' : 
697					this.animationCubeSize();
698					break;
699				case 'horizontal' : 
700					this.animationHorizontal();
701					break;
702				case 'showBars' : 
703					this.animationShowBars();
704					break;
705				case 'showBarsRandom' : 
706					this.animationShowBars({random:true});
707					break;
708				case 'tube' : 
709					this.animationTube();
710					break;
711				case 'fade' : 
712					this.animationFade();
713					break;
714				case 'fadeFour' : 
715					this.animationFadeFour();
716					break;
717				case 'paralell' : 
718					this.animationParalell();
719					break;
720				case 'blind' : 
721					this.animationBlind();
722					break;
723				case 'blindHeight' : 
724					this.animationBlindDimension({height:true});
725					break;
726				case 'blindWidth' : 
727					this.animationBlindDimension({height:false, time_animate:400, delay:50});
728					break;
729				case 'directionTop' : 
730					this.animationDirection({direction:'top'});
731					break;
732				case 'directionBottom' : 
733					this.animationDirection({direction:'bottom'});
734					break;
735				case 'directionRight' : 
736					this.animationDirection({direction:'right', total:5});
737					break;
738				case 'directionLeft' : 
739					this.animationDirection({direction:'left', total:5});
740					break;
741				case 'cubeSpread' : 
742					this.animationCubeSpread();
743					break;
744				case 'cubeJelly' : 
745					this.animationCubeJelly();
746					break;
747				case 'glassCube' : 
748					this.animationGlassCube();
749					break;
750				case 'glassBlock' : 
751					this.animationGlassBlock();
752					break;
753				case 'circles' : 
754					this.animationCircles();
755					break;
756				case 'circlesInside' : 
757					this.animationCirclesInside();
758					break;
759				case 'circlesRotate' : 
760					this.animationCirclesRotate();
761					break;
762				case 'cubeShow' : 
763					this.animationCubeShow();
764					break;
765				case 'upBars' : 
766					this.animationDirectionBars({direction: 'top'});
767					break;
768				case 'downBars' : 
769					this.animationDirectionBars({direction: 'bottom'});
770					break;
771				case 'hideBars' : 
772					this.animationHideBars();
773					break;
774				case 'swapBars' : 
775					this.animationSwapBars();
776					break;
777				case 'swapBarsBack' : 
778					this.animationSwapBars({easing: 'easeOutBack'});
779					break;
780				case 'swapBlocks' : 
781					this.animationSwapBlocks();
782					break;
783				case 'cut' : 
784					this.animationCut();
785					break;
786				default : 
787					this.animationTube();
788					break;
789			}
790		},
791		
792		animationCube: function (options)
793		{
794			var self = this;
795			
796			var options = $.extend({}, {random: false}, options || {});
797			
798			this.settings.is_animating = true;
799			var easing = (this.settings.easing_default == '') ? 'easeOutExpo' : this.settings.easing_default;
800			var time_animate = 700 / this.settings.velocity;
801			
802			this.setActualLevel();
803			

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

948					delay_time = Math.ceil( 30 * self.getRandom(30) );
949				}
950				
951				if (options.random && i == (total - 1)) {
952					time_animate = 400 * 3;
953					delay_time = 30 * 30;
954				}
955
956				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
957				box_clone.delay(delay_time).animate({opacity:'hide', top:_btop+'px', left:_bleft+'px'}, time_animate, easing, callback);
958
959				col_t++;
960				if (col_t == division_h) {
961					col_t = 0;
962					col++;
963				}
964			}
965		},
966		
967		animationCubeHide: function(options)
968		{
969			var self = this;
970			
971			this.settings.is_animating = true;
972			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
973			var time_animate = 500 / this.settings.velocity;
974			var image_old = this.box_skitter.find('.image_main').attr('src');
975			
976			this.setActualLevel();
977			this.setLinkAtual();
978			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
979			
980			var division_w 	= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));

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

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

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

1229			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
1230			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1231			var height_box 	= this.settings.height_skitter;
1232			
1233			for (i = 0;i<total;i++) {
1234				var _btop = 0;
1235				var _vtop = height_box;
1236				var vleft = width_box * i;
1237			
1238				var box_clone = this.getBoxClone();
1239				
1240				box_clone.css({left:vleft,top: _vtop, height:height_box, width: width_box});
1241				box_clone.find('img').css({left:-(vleft)});
1242				
1243				this.addBoxClone(box_clone);
1244				
1245				var random = this.getRandom(total);
1246				var delay_time = 30 * random;
1247				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1248				box_clone.show().delay(delay_time).animate({top:_btop}, time_animate, easing, callback);
1249			}
1250		},
1251		
1252		animationFade: function(options){
1253			var self = this;
1254			
1255			this.settings.is_animating = true;
1256			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1257			var time_animate = 800 / this.settings.velocity;
1258			
1259			this.setActualLevel();
1260			
1261			var width_box 	= this.settings.width_skitter;
1262			var height_box 	= this.settings.height_skitter;
1263			var total 		= 2;
1264			
1265			for (i = 0;i<total;i++) {
1266				var _vtop = 0;
1267				var _vleft = 0;
1268			
1269				var box_clone = this.getBoxClone();
1270				box_clone.css({left:_vleft, top:_vtop, width:width_box, height:height_box});
1271				this.addBoxClone(box_clone);
1272
1273				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1274				box_clone.animate({opacity:'show', left:0, top:0}, time_animate, easing, callback);
1275			}
1276		},
1277		
1278		animationFadeFour: function(options){
1279			var self = this;
1280			
1281			this.settings.is_animating = true;
1282			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1283			var time_animate = 500 / this.settings.velocity;
1284			
1285			this.setActualLevel();
1286			
1287			var width_box 	= this.settings.width_skitter;
1288			var height_box 	= this.settings.height_skitter;
1289			var total 		= 4;
1290			
1291			for (i = 0;i<total;i++) {
1292				
1293				if (i == 0) {
1294					var _vtop = '-100px';
1295					var _vleft = '-100px';
1296				} else if (i == 1) {
1297					var _vtop = '-100px';
1298					var _vleft = '100px';
1299				} else if (i == 2) {
1300					var _vtop = '100px';
1301					var _vleft = '-100px';
1302				} else if (i == 3) {
1303					var _vtop = '100px';
1304					var _vleft = '100px';
1305				}
1306			
1307				var box_clone = this.getBoxClone();
1308				box_clone.css({left:_vleft, top:_vtop, width:width_box, height:height_box});
1309				this.addBoxClone(box_clone);
1310				
1311				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1312				box_clone.animate({opacity:'show', left:0, top:0}, time_animate, easing, callback);
1313			}
1314		},
1315		
1316		animationParalell: function(options){
1317			var self = this;
1318			
1319			this.settings.is_animating = true;
1320			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1321			var time_animate = 400 / this.settings.velocity;
1322			
1323			this.setActualLevel();
1324			
1325			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 16));
1326			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1327			var height_box 	= this.settings.height_skitter;
1328			
1329			for (i = 0; i < total; i++) {
1330				
1331				var _bleft = (width_box * (i));
1332				var _btop = 0;
1333				
1334				var box_clone = this.getBoxClone();
1335				
1336				box_clone.css({left:_bleft, top:_btop - this.settings.height_skitter, width:width_box, height:height_box});
1337				box_clone.find('img').css({left:-(width_box * i), top:0});
1338				
1339				this.addBoxClone(box_clone);
1340				
1341				var delay_time;
1342				if (i <= ((total / 2) - 1)) {
1343					delay_time = 1400 - (i * 200);
1344				}
1345				else if (i > ((total / 2) - 1)) {
1346					delay_time = ((i - (total / 2)) * 200);
1347				}
1348				delay_time = delay_time / 2.5;
1349				
1350				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1351				box_clone.delay(delay_time).animate({
1352					top:_btop+'px', left:_bleft+'px', opacity: 'show'
1353				}, time_animate, easing, callback);
1354			}
1355			
1356		},
1357		
1358		animationBlind: function(options){
1359			var self = this;
1360			
1361			var options = $.extend({}, {height: false}, options || {});
1362			
1363			this.settings.is_animating = true;
1364			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1365			var time_animate = 400 / this.settings.velocity;
1366			
1367			this.setActualLevel();
1368			

1369			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 16));
1370			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1371			var height_box 	= this.settings.height_skitter;
1372			
1373			for (i = 0; i < total; i++) {
1374				
1375				var _bleft = (width_box * (i));
1376				var _btop = 0;
1377				var box_clone = this.getBoxClone();
1378				
1379				box_clone.css({left:_bleft, top:_btop, width:width_box, height:height_box});
1380				box_clone.find('img').css({left:-(width_box * i), top:0});
1381				
1382				this.addBoxClone(box_clone);
1383				
1384				var delay_time;
1385				
1386				if (!options.height) {
1387					if (i <= ((total / 2) - 1)) {
1388						delay_time = 1400 - (i * 200);
1389					}
1390					else if (i > ((total / 2) - 1)) {
1391						delay_time = ((i - (total / 2)) * 200);
1392					}
1393					var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1394				} else {
1395					if (i <= ((total / 2) - 1)) {
1396						delay_time = 200 + (i * 200);
1397					}
1398					else if (i > ((total / 2) - 1)) {
1399						delay_time = (((total / 2) - i) * 200) + (total * 100);
1400					}
1401					var callback = (i == (total / 2)) ? function() { self.finishAnimation(); } : '';
1402				}
1403				
1404				delay_time = delay_time / 2.5;
1405				
1406				if (!options.height) {
1407					box_clone.delay(delay_time).animate({
1408						opacity:'show',top:_btop+'px', left:_bleft+'px', width:'show'
1409					}, time_animate, easing, callback);
1410				} else {
1411					time_animate = time_animate + (i * 2);
1412					var easing = 'easeOutQuad';
1413					box_clone.delay(delay_time).animate({
1414						opacity:'show',top:_btop+'px', left:_bleft+'px', height:'show'
1415					}, time_animate, easing, callback);
1416				}
1417			}
1418		},
1419		
1420		animationBlindDimension: function(options){
1421			var self = this;
1422			
1423			var options = $.extend({}, {height: true, time_animate: 500, delay: 100}, options || {});
1424			
1425			this.settings.is_animating = true;
1426			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1427			var time_animate = options.time_animate / this.settings.velocity;
1428			
1429			this.setActualLevel();
1430			
1431			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 16));
1432			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1433			var height_box 	= this.settings.height_skitter;
1434			
1435			for (i = 0; i < total; i++) {
1436				
1437				var _bleft = (width_box * (i));
1438				var _btop = 0;
1439				
1440				var box_clone = this.getBoxClone();
1441				
1442				box_clone.css({left:_bleft, top:_btop, width:width_box, height:height_box});
1443				box_clone.find('img').css({left:-(width_box * i), top:0});
1444				
1445				this.addBoxClone(box_clone);
1446				
1447				var delay_time = options.delay * i;
1448				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1449				
1450				if (!options.height) {
1451					box_clone.delay(delay_time).animate({
1452						opacity:'show',top:_btop+'px', left:_bleft+'px', width:'show'
1453					}, time_animate, easing, callback);
1454				} else {
1455					var easing = 'easeOutQuad';
1456					box_clone.delay(delay_time).animate({
1457						opacity:'show',top:_btop+'px', left:_bleft+'px', height:'show'
1458					}, time_animate, easing, callback);
1459				}
1460			}
1461			
1462		},
1463		
1464		animationDirection: function(options)
1465		{
1466			var self = this;
1467			
1468			var options = $.extend({}, {direction: 'top', delay_type: 'sequence', total: 7}, options || {});
1469			
1470			this.settings.is_animating = true;
1471			var easing = (this.settings.easing_default == '') ? 'easeInOutExpo' : this.settings.easing_default;
1472			var time_animate = 1200 / this.settings.velocity;
1473			
1474			var image_old = this.box_skitter.find('.image_main').attr('src');
1475			
1476			this.setActualLevel();
1477			
1478			this.setLinkAtual();
1479			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
1480			this.box_skitter.find('.image_main').hide();
1481			
1482			var total 		= options.total;
1483			
1484			for (i = 0; i < total; i++) {
1485				switch (options.direction) {
1486					default : case 'top' : 
1487						var width_box 		= Math.ceil(this.settings.width_skitter / total);
1488						var height_box 		= this.settings.height_skitter;
1489						var _itopc 			= 0;
1490						var _ileftc 		= (width_box * i);
1491						var _ftopc 			= -height_box;
1492						var _fleftc 		= _ileftc;
1493						var _itopn			= height_box;
1494						var _ileftn			= _ileftc;
1495						var _ftopn			= 0;
1496						var _fleftn			= _ileftc;
1497						var _vtop_image 	= 0;
1498						var _vleft_image 	= -_ileftc;
1499						break;
1500					case 'bottom' : 

1501						var width_box 		= Math.ceil(this.settings.width_skitter / total);
1502						var height_box 		= this.settings.height_skitter;
1503						var _itopc 			= 0;
1504						var _ileftc 		= (width_box * i);
1505						var _ftopc 			= height_box;
1506						var _fleftc 		= _ileftc;
1507						var _itopn			= -height_box;
1508						var _ileftn			= _ileftc;
1509						var _ftopn			= 0;
1510						var _fleftn			= _ileftc;
1511						var _vtop_image 	= 0;
1512						var _vleft_image 	= -_ileftc;
1513						break;
1514					case 'right' : 
1515						var width_box 		= this.settings.width_skitter;
1516						var height_box 		= Math.ceil(this.settings.height_skitter / total);
1517						var _itopc 			= (height_box * i);
1518						var _ileftc 		= 0;
1519						var _ftopc 			= _itopc;
1520						var _fleftc 		= width_box;
1521						var _itopn			= _itopc;
1522						var _ileftn			= -_fleftc;
1523						var _ftopn			= _itopc;
1524						var _fleftn			= 0;
1525						var _vtop_image 	= -_itopc;
1526						var _vleft_image 	= 0;
1527						break;
1528					case 'left' : 
1529						var width_box 		= this.settings.width_skitter;
1530						var height_box 		= Math.ceil(this.settings.height_skitter / total);
1531						var _itopc 			= (height_box * i);
1532						var _ileftc 		= 0;
1533						var _ftopc 			= _itopc;
1534						var _fleftc 		= -width_box;
1535						var _itopn			= _itopc;
1536						var _ileftn			= -_fleftc;
1537						var _ftopn			= _itopc;
1538						var _fleftn			= 0;
1539						var _vtop_image 	= -_itopc;
1540						var _vleft_image 	= 0;
1541						break;
1542				}
1543				
1544				switch (options.delay_type){
1545					case 'zebra' : default : var delay_time = (i % 2 == 0) ? 0 : 150; break;
1546					case 'random' : var delay_time = 30 * (Math.random() * 30); break;
1547					case 'sequence' : var delay_time = i * 100; break;
1548				}
1549				
1550				var box_clone = this.getBoxCloneImgOld(image_old);
1551				box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
1552				box_clone.css({top:_itopc, left:_ileftc, width:width_box, height:height_box});
1553				
1554				this.addBoxClone(box_clone);
1555				box_clone.show();
1556				box_clone.delay(delay_time).animate({ top:_ftopc, left:_fleftc }, time_animate, easing);
1557				
1558				// Next image
1559				var box_clone_next = this.getBoxClone();
1560				box_clone_next.find('img').css({left:_vleft_image, top:_vtop_image});
1561				
1562				box_clone_next.css({top:_itopn, left:_ileftn, width:width_box, height:height_box});
1563				
1564				this.addBoxClone(box_clone_next);
1565				box_clone_next.show();
1566				
1567				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';

1568				box_clone_next.delay(delay_time).animate({ top:_ftopn, left:_fleftn }, time_animate, easing, callback);
1569				
1570			}
1571		},
1572		
1573		animationCubeSpread: function(options){
1574			var self = this;
1575			
1576			this.settings.is_animating = true;
1577			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1578			var time_animate = 700 / this.settings.velocity;
1579			
1580			this.setActualLevel();
1581			
1582			var division_w 	= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
1583			var division_h 	= Math.ceil(this.settings.height_skitter / (this.settings.width_skitter / 8));
1584			var total		= division_w * division_h;
1585			
1586			var width_box 	= Math.ceil(this.settings.width_skitter / division_w);
1587			var height_box 	= Math.ceil(this.settings.height_skitter / division_h);
1588			
1589			var init_top 	= 0;
1590			var init_left 	= 0;
1591			
1592			var col_t 		= 0;
1593			var col 		= 0;
1594			var order 		= new Array;
1595			var spread 		= new Array;
1596			
1597			// Make order
1598			for (i = 0; i < total; i++) {
1599				init_top 			= (i % 2 == 0) ? init_top : -init_top;
1600				init_left 			= (i % 2 == 0) ? init_left : -init_left;
1601
1602				var _vtop 			= init_top + (height_box * col_t);
1603				var _vleft 			= (init_left + (width_box * col));
1604				
1605				order[i] = [_vtop, _vleft];
1606				
1607				col_t++;
1608				if (col_t == division_h) {
1609					col_t = 0;
1610					col++;
1611				}
1612			}
1613			
1614			// Reset col and col_t
1615			col_t = 0;
1616			col = 0;
1617			
1618			// Make array for spread
1619			for (i = 0; i < total; i++) {
1620				spread[i] = i;
1621			};
1622			
1623			// Shuffle array
1624			var spread = self.shuffleArray(spread);
1625			
1626			for (i = 0; i < total; i++) {
1627				init_top 			= (i % 2 == 0) ? init_top : -init_top;
1628				init_left 			= (i % 2 == 0) ? init_left : -init_left;
1629				var _vtop 			= init_top + (height_box * col_t);
1630				var _vleft 			= (init_left + (width_box * col));
1631				var _vtop_image 	= -(height_box * col_t);
1632				var _vleft_image 	= -(width_box * col);
1633				var _btop 			= _vtop;
1634				var _bleft 			= _vleft;
1635				_vtop 				= order[spread[i]][0];
1636				_vleft 				= order[spread[i]][1];
1637				var box_clone 		= this.getBoxClone();
1638				box_clone.css({left:_vleft+'px', top:_vtop+'px', width:width_box, height:height_box});
1639				box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
1640				
1641				this.addBoxClone(box_clone);
1642				
1643				var delay_time = 30 * (Math.random() * 30);
1644				if (i == (total-1)) delay_time = 30 * 30;
1645				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1646				box_clone.delay(delay_time).animate({opacity:'show',top:_btop+'px', left:_bleft+'px'}, time_animate, easing, callback);
1647				
1648				col_t++;
1649				if (col_t == division_h) {
1650					col_t = 0;
1651					col++;
1652				}
1653			}
1654		}, 
1655		
1656		animationGlassCube: function(options)
1657		{
1658			var self = this;
1659			
1660			this.settings.is_animating = true;
1661			var easing = (this.settings.easing_default == '') ? 'easeOutExpo' : this.settings.easing_default;
1662			var time_animate = 500 / this.settings.velocity;
1663			
1664			this.setActualLevel();
1665			
1666			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10)) * 2;
1667			var width_box 	= Math.ceil(this.settings.width_skitter / total) * 2;
1668			var height_box 	= (this.settings.height_skitter) / 2;
1669			var col			= 0;
1670			
1671			for (i = 0; i < total; i++) {
1672				mod = (i % 2) == 0 ? true : false;
1673				
1674				var _ileft = (width_box * (col));
1675				var _itop = (mod) ? -self.settings.height_skitter : self.settings.height_skitter;
1676				var _fleft = (width_box * (col));
1677				var _ftop = (mod) ? 0 : (height_box);
1678				var _bleft = -(width_box * col);
1679				var _btop = (mod) ? 0 : -(height_box);
1680				var delay_time = 120 * col;
1681				var box_clone = this.getBoxClone();
1682				box_clone.css({left: _ileft, top:_itop, width:width_box, height:height_box});
1683				
1684				box_clone
1685					.find('img')
1686					.css({left: _bleft + (width_box / 1.5), top: _btop})
1687					.delay(delay_time)
1688					.animate({left: _bleft, top: _btop}, (time_animate * 1.9), 'easeOutQuad');
1689				
1690				this.addBoxClone(box_clone);
1691				
1692				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1693				box_clone.show().delay(delay_time).animate({top:_ftop, left:_fleft}, time_animate, easing, callback);
1694				
1695				if ((i % 2) != 0) col++;
1696			}
1697		},
1698		
1699		animationGlassBlock: function(options){
1700			var self = this;
1701			
1702			this.settings.is_animating = true;
1703			var easing = (this.settings.easing_default == '') ? 'easeOutExpo' : this.settings.easing_default;
1704			var time_animate = 700 / this.settings.velocity;
1705			
1706			this.setActualLevel();
1707			

1708			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
1709			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1710			var height_box 	= (this.settings.height_skitter);
1711			
1712			for (i = 0; i < total; i++) {
1713				var _ileft = (width_box * (i));
1714				var _itop = 0;
1715				var _fleft = (width_box * (i));
1716				var _ftop = 0;
1717				var _bleft = -(width_box * (i));
1718				var _btop = 0;
1719				var delay_time = 100 * i;
1720				var box_clone = this.getBoxClone();
1721				box_clone.css({left: _ileft, top:_itop, width:width_box, height:height_box});
1722				
1723				box_clone
1724					.find('img')
1725					.css({left: _bleft + (width_box / 1.5), top: _btop})
1726					.delay(delay_time)
1727					.animate({left: _bleft, top: _btop}, (time_animate * 1.1), 'easeInOutQuad');
1728				
1729				this.addBoxClone(box_clone);
1730				
1731				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1732				box_clone.delay(delay_time).animate({top:_ftop, left:_fleft, opacity: 'show'}, time_animate, easing, callback);
1733				
1734			}
1735		},
1736		
1737		animationCircles: function(options){
1738			var self = this;
1739			
1740			this.settings.is_animating = true;
1741			var easing = (this.settings.easing_default == '') ? 'easeInQuad' : this.settings.easing_default;
1742			var time_animate = 500 / this.settings.velocity;
1743			
1744			this.setActualLevel();
1745			
1746			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
1747			var size_box	= 100;
1748			var radius		= Math.sqrt(Math.pow((this.settings.width_skitter), 2) + Math.pow((this.settings.height_skitter), 2));
1749			var radius		= Math.ceil(radius);
1750			
1751			for (i = 0; i < total; i++) {
1752				var _ileft = (self.settings.width_skitter / 2) - (size_box / 2);
1753				var _itop = (self.settings.height_skitter / 2) - (size_box / 2);
1754				
1755				var _fleft = _ileft; 
1756				var _ftop = _itop; 
1757				var box_clone = null;
1758
1759				// if ($.browser.mozilla) {
1760				// 	box_clone = this.getBoxClone();
1761				// 	box_clone.css({left: _ileft, top:_itop, width:size_box, height:size_box}).css3({
1762				// 		'border-radius': radius+'px'
1763				// 	});
1764				// 	box_clone.find('img').css({left: -_ileft, top: -_itop});
1765				// }
1766				// else {
1767					box_clone = this.getBoxCloneBackground({
1768						image: 		self.settings.image_atual,
1769						left: 		_ileft, 
1770						top: 		_itop, 
1771						width: 		size_box, 
1772						height: 	size_box,
1773						position: {
1774							top:  	-_itop, 
1775							left:  	-_ileft
1776						}
1777					}).css3({
1778						'border-radius': radius+'px'
1779					});
1780				// }
1781				
1782				// var box_clone = this.getBoxClone();
1783				// box_clone.css({left: _ileft, top:_itop, width:size_box, height:size_box}).css3({
1784				// 	'border-radius': radius+'px'
1785				// });
1786				// box_clone.find('img').css({left: -_ileft, top: -_itop});
1787				
1788				size_box += 100;
1789				
1790				this.addBoxClone(box_clone);
1791				
1792				var delay_time = 70 * i;
1793				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1794				box_clone.delay(delay_time).animate({top: _ftop, left: _fleft, opacity: 'show'}, time_animate, easing, callback);
1795				
1796			}
1797		},
1798		
1799		animationCirclesInside: function(options){
1800			var self = this;
1801			
1802			this.settings.is_animating = true;
1803			var easing = (this.settings.easing_default == '') ? 'easeInQuad' : this.settings.easing_default;
1804			var time_animate = 500 / this.settings.velocity;
1805			var image_old = this.box_skitter.find('.image_main').attr('src');
1806			
1807			this.setActualLevel();
1808			this.setLinkAtual();
1809			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
1810			
1811			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
1812			var radius		= Math.sqrt(Math.pow((this.settings.width_skitter), 2) + Math.pow((this.settings.height_skitter), 2));
1813			var radius		= Math.ceil(radius);
1814			var size_box	= radius;
1815			
1816			for (i = 0; i < total; i++) {
1817				var _ileft = (self.settings.width_skitter / 2) - (size_box / 2);
1818				var _itop = (self.settings.height_skitter / 2) - (size_box / 2);
1819				var _fleft = _ileft; 
1820				var _ftop = _itop; 
1821				var box_clone = null;
1822
1823				// if ($.browser.mozilla) {
1824				// 	box_clone = this.getBoxCloneImgOld(image_old);
1825				// 	box_clone.css({left: _ileft, top:_itop, width:size_box, height:size_box}).css3({
1826				// 		'border-radius': radius+'px'
1827				// 	});
1828				// 	box_clone.find('img').css({left: -_ileft, top: -_itop});
1829				// }
1830				// else {

1831					box_clone = this.getBoxCloneBackground({
1832						image: 		image_old,
1833						left: 		_ileft, 
1834						top: 		_itop, 
1835						width: 		size_box, 
1836						height: 	size_box,
1837						position: {
1838							top:  	-_itop, 
1839							left:  	-_ileft
1840						}
1841					}).css3({
1842						'border-radius': radius+'px'
1843					});
1844				// }
1845				
1846				// var box_clone = this.getBoxCloneImgOld(image_old);
1847				// box_clone.css({left: _ileft, top:_itop, width:size_box, height:size_box}).css3({
1848				// 	'border-radius': radius+'px'
1849				// });
1850				// box_clone.find('img').css({left: -_ileft, top: -_itop});
1851				
1852				size_box -= 100;
1853				
1854				this.addBoxClone(box_clone);
1855				box_clone.show();
1856				
1857				var delay_time = 70 * i;
1858				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1859				box_clone.delay(delay_time).animate({top: _ftop, left: _fleft, opacity: 'hide'}, time_animate, easing, callback);
1860			}
1861		},
1862
1863		animationCirclesRotate: function(options){
1864			var self = this;
1865			
1866			this.settings.is_animating = true;
1867			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1868			var time_animate = 500 / this.settings.velocity;
1869			
1870			var image_old = this.box_skitter.find('.image_main').attr('src');
1871			
1872			this.setActualLevel();
1873			
1874			this.setLinkAtual();
1875			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
1876			
1877			var total 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
1878			
1879			var radius		= Math.sqrt(Math.pow((this.settings.width_skitter), 2) + Math.pow((this.settings.height_skitter), 2));
1880			var radius		= Math.ceil(radius);
1881			var size_box	= radius;
1882			
1883			for (i = 0; i < total; i++) {
1884				var _ileft = (self.settings.width_skitter / 2) - (size_box / 2);
1885				var _itop = (self.settings.height_skitter / 2) - (size_box / 2);
1886				
1887				var _fleft = _ileft; 
1888				var _ftop = _itop; 
1889				var box_clone = null;
1890
1891				if ($.browser.mozilla) {
1892					box_clone = this.getBoxCloneImgOld(image_old);
1893					box_clone.css({left: _ileft, top:_itop, width:size_box, height:size_box}).css3({
1894						'border-radius': radius+'px'
1895					});
1896					box_clone.find('img').css({left: -_ileft, top: -_itop});
1897				} else {
1898					box_clone = this.getBoxCloneBackground({
1899						image: 		image_old,
1900						left: 		_ileft, 
1901						top: 		_itop, 
1902						width: 		size_box, 
1903						height: 	size_box,
1904						position: {
1905							top:  	-_itop, 
1906							left:  	-_ileft
1907						}
1908					}).css3({
1909						'border-radius': radius+'px'
1910					});
1911				}
1912				
1913				size_box -= 100;
1914				
1915				this.addBoxClone(box_clone);
1916				box_clone.show();
1917				
1918				var delay_time = 100 * i;
1919				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1920				var _rotate = (i % 2 == 0) ? '20deg' : '-20deg';
1921				box_clone.delay(delay_time).animate({top: _ftop, left: _fleft, opacity: 'hide', rotate: _rotate}, time_animate, easing, callback);
1922			}
1923		},
1924		
1925		animationCubeShow: function(options){
1926			var self = this;
1927			
1928			this.settings.is_animating = true;
1929			var easing = (this.settings.easing_default == '') ? 'easeOutQuad' : this.settings.easing_default;
1930			var time_animate = 400 / this.settings.velocity;
1931			
1932			this.setActualLevel();
1933			
1934			var division_w 		= Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 8));
1935			var division_h 		= Math.ceil(this.settings.height_skitter / (this.settings.height_skitter / 4));
1936			var total			= division_w * division_h;
1937			var width_box 		= Math.ceil(this.settings.width_skitter / division_w);
1938			var height_box 		= Math.ceil(this.settings.height_skitter / division_h);
1939			var last 			= false;
1940			var _btop 			= 0;
1941			var _bleft 			= 0;
1942			var line			= 0;
1943			var col				= 0;
1944			
1945			for (i = 0; i < total; i++) {
1946				_btop = height_box * line;
1947				_bleft = width_box * col;
1948				
1949				var delay_time = 30 * (i);
1950				var box_clone 		= this.getBoxClone();
1951				box_clone.css({left:_bleft, top:_btop, width:width_box, height:height_box}).hide();
1952				box_clone.find('img').css({left:-_bleft, top:-_btop});
1953				this.addBoxClone(box_clone);
1954				
1955				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1956				box_clone.delay(delay_time).animate({width:'show', height:'show'}, time_animate, easing, callback);
1957				
1958				line++;
1959				if (line == division_h) {
1960					line = 0;
1961					col++;
1962				}
1963			}
1964		},
1965		
1966		animationDirectionBars: function(options){
1967			var self = this;
1968			var options = $.extend({}, {direction: 'top'}, options || {});
1969			
1970			this.settings.is_animating = true;
1971			var easing = (this.settings.easing_default == '') ? 'easeInOutQuad' : this.settings.easing_default;
1972			var time_animate = 400 / this.settings.velocity;
1973			var image_old = this.box_skitter.find('.image_main').attr('src');
1974			
1975			this.setActualLevel();
1976			this.setLinkAtual();
1977			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
1978			
1979			var total		= 12;

1980			var width_box 	= Math.ceil(this.settings.width_skitter / total);
1981			var height_box 	= this.settings.height_skitter;
1982			var _ftop		= (options.direction == 'top') ? -height_box : height_box;
1983			
1984			for (i = 0; i < total; i++) {
1985				var _vtop 			= 0;
1986				var _vleft 			= (width_box * i);
1987				var _vtop_image 	= 0;
1988				var _vleft_image 	= -(width_box * i);
1989				var box_clone = this.getBoxCloneImgOld(image_old);
1990				box_clone.css({left:_vleft+'px', top:_vtop+'px', width:width_box, height:height_box});
1991				box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
1992				this.addBoxClone(box_clone);
1993				box_clone.show();
1994				var delay_time = 70 * i;
1995				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
1996				box_clone.delay(delay_time).animate({top:_ftop}, time_animate, easing, callback);
1997			}
1998		},
1999
2000		animationHideBars: function(options){
2001			var self = this;
2002			var options = $.extend({}, {random: false}, options || {});
2003			this.settings.is_animating = true;
2004			var easing = (this.settings.easing_default == '') ? 'easeOutCirc' : this.settings.easing_default;
2005			var time_animate = 700 / this.settings.velocity;
2006			var image_old = this.box_skitter.find('.image_main').attr('src');
2007			this.setActualLevel();
2008			this.setLinkAtual();
2009			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
2010			var division_w = Math.ceil(this.settings.width_skitter / (this.settings.width_skitter / 10));
2011			var total = division_w;
2012			var width_box = Math.ceil(this.settings.width_skitter / division_w);
2013			var height_box = this.settings.height_skitter;
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				var _fleft = '+='+width_box;
2021				var box_clone = this.getBoxCloneImgOld(image_old);
2022				box_clone.css({left:0, top:0, width:width_box, height:height_box});
2023				box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
2024
2025				var box_clone_main = this.getBoxCloneImgOld(image_old);
2026				box_clone_main.css({left:_vleft+'px', top:_vtop+'px', width:width_box, height:height_box});
2027				box_clone_main.html(box_clone);
2028
2029				this.addBoxClone(box_clone_main);
2030				box_clone.show();
2031				box_clone_main.show();
2032
2033				var delay_time = 50 * i;
2034				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
2035				
2036				box_clone.delay(delay_time).animate({left:_fleft}, time_animate, easing, callback);
2037			}
2038		},
2039
2040		animationSwapBars: function(options){
2041			var self = this;
2042			var options = $.extend({}, {direction: 'top', delay_type: 'sequence', total: 7, easing: 'easeOutCirc'}, options || {});
2043
2044			this.settings.is_animating = true;
2045			var easing = (this.settings.easing_default == '') ? options.easing : this.settings.easing_default;
2046			var time_animate = 500 / this.settings.velocity;
2047			var image_old = this.box_skitter.find('.image_main').attr('src');
2048			
2049			this.setActualLevel();
2050			
2051			this.setLinkAtual();
2052			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
2053			this.box_skitter.find('.image_main').hide();
2054			
2055			var total 		= options.total;
2056			
2057			for (i = 0; i < total; i++) {
2058				var width_box 		= Math.ceil(this.settings.width_skitter / total);
2059				var height_box 		= this.settings.height_skitter;
2060				var _itopc 			= 0;
2061				var _ileftc 		= (width_box * i);
2062				var _ftopc 			= -height_box;
2063				var _fleftc 		= _ileftc + width_box ;
2064				var _itopn			= height_box;
2065				var _ileftn			= _ileftc;
2066				var _ftopn			= 0;
2067				var _fleftn			= _ileftc;
2068				var _vtop_image 	= 0;
2069				var _vleft_image 	= -_ileftc;
2070				
2071				switch (options.delay_type) {
2072					case 'zebra' : default : var delay_time = (i % 2 == 0) ? 0 : 150; break;
2073					case 'random' : var delay_time = 30 * (Math.random() * 30); break;
2074					case 'sequence' : var delay_time = i * 100; break;
2075				}
2076
2077				// Old image
2078				var box_clone = this.getBoxCloneImgOld(image_old);
2079				box_clone.find('img').css({left:_vleft_image, top:0});
2080				box_clone.css({top:0, left:0, width:width_box, height:height_box});
2081
2082				// Next image
2083				var box_clone_next = this.getBoxClone();
2084				box_clone_next.find('img').css({left:_vleft_image, top:0});

2085				box_clone_next.css({top:0, left:-width_box, width:width_box, height:height_box});
2086				
2087				// Container box images
2088				var box_clone_container = this.getBoxClone();
2089				box_clone_container.html('').append(box_clone).append(box_clone_next);
2090				box_clone_container.css({top:0, left:_ileftc, width:width_box, height:height_box});
2091				
2092				// Add containuer
2093				this.addBoxClone(box_clone_container);
2094
2095				// Show boxes
2096				box_clone_container.show();
2097				box_clone.show();
2098				box_clone_next.show();
2099				
2100				// Callback
2101				var callback = (i == (total - 1)) ? function() { self.finishAnimation(); } : '';
2102
2103				// Animations
2104				box_clone.delay(delay_time).animate({ left: width_box }, time_animate, easing);
2105				box_clone_next.delay(delay_time).animate({ left:0 }, time_animate, easing, callback);
2106			}
2107		},
2108
2109		animationSwapBlocks: function(options){
2110			var self = this;
2111			
2112			var options = $.extend({}, {easing_old: 'easeInOutQuad', easing_new: 'easeOutQuad'}, options || {});
2113			
2114			this.settings.is_animating = true;
2115			var easing_old = (this.settings.easing_default == '') ? options.easing_old : this.settings.easing_default;
2116			var easing_new = (this.settings.easing_default == '') ? options.easing_new : this.settings.easing_default;
2117			var time_animate = 800 / this.settings.velocity;
2118			
2119			var image_old = this.box_skitter.find('.image_main').attr('src');
2120			
2121			this.setActualLevel();
2122			
2123			this.setLinkAtual();
2124			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
2125			this.box_skitter.find('.image_main').hide();
2126			
2127			var total 			= 2;
2128			var width_box 		= this.settings.width_skitter;
2129			var height_box 		= Math.ceil(this.settings.height_skitter / total);
2130
2131			// Old image
2132			var box_clone1 = this.getBoxCloneImgOld(image_old), box_clone2 = this.getBoxCloneImgOld(image_old);
2133			box_clone1.find('img').css({left:0, top:0});
2134			box_clone1.css({top:0, left:0, width:width_box, height:height_box});
2135
2136			box_clone2.find('img').css({left:0, top:-height_box});
2137			box_clone2.css({top:height_box, left:0, width:width_box, height:height_box});
2138
2139			// Next image
2140			var box_clone_next1 = this.getBoxClone(), box_clone_next2 = this.getBoxClone();
2141			box_clone_next1.find('img').css({left:0, top:height_box});
2142			box_clone_next1.css({top:0, left:0, width:width_box, height:height_box});
2143
2144			box_clone_next2.find('img').css({left:0, top: -(height_box * total) });
2145			box_clone_next2.css({top:height_box, left:0, width:width_box, height:height_box});
2146
2147			// Add boxes
2148			this.addBoxClone(box_clone_next1);
2149			this.addBoxClone(box_clone_next2);
2150			this.addBoxClone(box_clone1);
2151			this.addBoxClone(box_clone2);
2152
2153			// Show boxes
2154			box_clone1.show();
2155			box_clone2.show();
2156			box_clone_next1.show();
2157			box_clone_next2.show();
2158
2159			// Callback
2160			var callback = function() { self.finishAnimation(); };
2161
2162			// Animations
2163			box_clone1.find('img').animate({ top: height_box }, time_animate, easing_old, function() {
2164				box_clone1.remove();
2165			});
2166			box_clone2.find('img').animate({ top: -(height_box * total) }, time_animate, easing_old, function() {
2167				box_clone2.remove();
2168			});
2169			box_clone_next1.find('img').animate({ top: 0 }, time_animate, easing_new);
2170			box_clone_next2.find('img').animate({ top: -height_box }, time_animate, easing_new, callback);
2171		},
2172
2173		animationCut: function(options){
2174			var self = this;
2175			
2176			var options = $.extend({}, {easing_old: 'easeInOutExpo', easing_new: 'easeInOutExpo'}, options || {});
2177			
2178			this.settings.is_animating = true;
2179			var easing_old = (this.settings.easing_default == '') ? options.easing_old : this.settings.easing_default;
2180			var easing_new = (this.settings.easing_default == '') ? options.easing_new : this.settings.easing_default;
2181			var time_animate = 900 / this.settings.velocity;
2182			
2183			var image_old = this.box_skitter.find('.image_main').attr('src');
2184			
2185			this.setActualLevel();
2186			
2187			this.setLinkAtual();
2188			this.box_skitter.find('.image_main').attr({'src':this.settings.image_atual});
2189			this.box_skitter.find('.image_main').hide();
2190			
2191			var total 			= 2;
2192			var width_box 		= this.settings.width_skitter;

2193			var height_box 		= Math.ceil(this.settings.height_skitter / total);
2194
2195			// Old image
2196			var box_clone1 = this.getBoxCloneImgOld(image_old), box_clone2 = this.getBoxCloneImgOld(image_old);
2197			box_clone1.find('img').css({left:0, top:0});
2198			box_clone1.css({top:0, left:0, width:width_box, height:height_box});
2199
2200			box_clone2.find('img').css({left:0, top:-height_box});
2201			box_clone2.css({top:height_box, left:0, width:width_box, height:height_box});
2202
2203			// Next image
2204			var box_clone_next1 = this.getBoxClone(), box_clone_next2 = this.getBoxClone();
2205			//box_clone_next1.find('img').css({left:0, top:height_box});
2206			box_clone_next1.find('img').css({left:0, top:0});
2207			box_clone_next1.css({top:0, left:width_box, width:width_box, height:height_box});
2208
2209			//box_clone_next2.find('img').css({left:0, top: -(height_box * total) });
2210			box_clone_next2.find('img').css({left:0, top: -height_box });
2211			box_clone_next2.css({top:height_box, left:-width_box, width:width_box, height:height_box});
2212
2213			// Add boxes
2214			this.addBoxClone(box_clone_next1);
2215			this.addBoxClone(box_clone_next2);
2216			this.addBoxClone(box_clone1);
2217			this.addBoxClone(box_clone2);
2218
2219			// Show boxes
2220			box_clone1.show();
2221			box_clone2.show();
2222			box_clone_next1.show();
2223			box_clone_next2.show();
2224
2225			// Callback
2226			var callback = function() { self.finishAnimation(); };
2227
2228			// Animations
2229			box_clone1.animate({ left: -width_box }, time_animate, easing_old, function() {
2230				box_clone1.remove();
2231			});
2232			box_clone2.animate({ left: width_box }, time_animate, easing_old, function() {
2233				box_clone2.remove();
2234			});
2235			box_clone_next1.animate({ left: 0 }, time_animate, easing_new);
2236			box_clone_next2.animate({ left: 0 }, time_animate, easing_new, callback);
2237		},
2238		
2239		// End animations ----------------------
2240		
2241		// Finish animation
2242		finishAnimation: function (options){
2243			var self = this;
2244			this.box_skitter.find('.image_main').show();
2245			this.showBoxText();
2246			this.settings.is_animating = false;
2247			this.box_skitter.find('.image_main').attr({'src': this.settings.image_atual});
2248            if (this.settings.link_atual != '#') {
2249			    this.box_skitter.find('.image a').attr({'href': this.settings.link_atual});
2250            } else {
2251			    this.box_skitter.find('.image a').removeAttr('href');
2252            }
2253			
2254			/* if (!this.settings.is_hover_box_skitter && !this.settings.is_paused && !this.settings.is_blur) { */
2255			if (!this.settings.is_hover_box_skitter && !this.settings.is_paused && !this.settings.is_blur  && !this.reached) {
2256				this.timer = setTimeout(function() { self.completeMove(); }, this.settings.interval);
2257			}
2258			self.startTime();
2259		},
2260
2261		// Complete move
2262		completeMove: function (){
2263			this.clearTimer(true);
2264			this.box_skitter.find('.box_clone').remove();
2265			/* */
2266			//繰り返しをパラメーターにより制御
2267			//if (!this.settings.is_paused && !this.settings.is_blur) this.nextImage();
2268			if(this.reached == false){
2269				if (!this.settings.is_paused && !this.settings.is_blur) this.nextImage();
2270			}
2271		},
2272
2273		// Actual config for animation
2274		setActualLevel: function() {
2275			if ($.isFunction(this.settings.imageSwitched)) this.settings.imageSwitched(this.settings.image_i, this);
2276			this.setImageLink();
2277			this.addClassNumber();
2278			this.hideBoxText();
2279			this.increasingImage();
2280		},
2281
2282		// Set image and link
2283		setImageLink: function(){
2284			var name_image = this.settings.images_links[this.settings.image_i][0];
2285			var link_image = this.settings.images_links[this.settings.image_i][1];
2286			var label_image = this.settings.images_links[this.settings.image_i][3];
2287			var target_link = this.settings.images_links[this.settings.image_i][4];
2288			
2289			this.settings.image_atual = name_image;
2290			this.settings.link_atual = link_image;
2291			this.settings.label_atual = label_image;
2292			this.settings.target_atual = target_link;
2293		},
2294
2295		// Add class for number
2296		addClassNumber: function (){
2297			var self = this;
2298			this.box_skitter.find('.image_number_select').animate(self.settings.animateNumberOut, 500).removeClass('image_number_select');
2299			$('#image_n_'+(this.settings.image_i+1)+'_'+self.number_skitter).animate(self.settings.animateNumberActive, 700).addClass('image_number_select');
2300		},
2301
2302		// Increment image_i
2303		increasingImage: function(){
2304			this.settings.image_i++;
2305			if (this.settings.image_i == this.settings.images_links.length) {
2306				this.settings.image_i = 0;
2307				/* */
2308				if (this.settings.once){
2309					this.reached = true;
2310				}
2311			}
2312		},
2313		
2314		// Get box clone
2315		getBoxClone: function(){
2316			if (this.settings.link_atual != '#') {
2317				var img_clone = $('<a href="'+this.settings.link_atual+'"><img src="'+this.settings.image_atual+'" /></a>');
2318			} else {
2319				var img_clone = $('<img src="'+this.settings.image_atual+'" />');
2320			}
2321			
2322			img_clone = this.resizeImage(img_clone);

2323			var box_clone = $('<div class="box_clone"></div>');
2324			box_clone.append(img_clone);
2325			return box_clone;
2326		},
2327		
2328		// Get box clone
2329		getBoxCloneImgOld: function(image_old){
2330			if (this.settings.link_atual != '#') {
2331				var img_clone = $('<a href="'+this.settings.link_atual+'"><img src="'+image_old+'" /></a>');
2332			} else {
2333				var img_clone = $('<img src="'+image_old+'" />');
2334			}
2335			
2336			img_clone = this.resizeImage(img_clone);
2337			var box_clone = $('<div class="box_clone"></div>');
2338			box_clone.append(img_clone);
2339			return box_clone;
2340		},
2341		
2342		// Redimensiona imagem
2343		resizeImage: function(img_clone){
2344			if (this.settings.fullscreen) {
2345				img_clone.find('img').height(this.settings.height_skitter);
2346			}
2347			return img_clone;
2348		}, 
2349
2350		// Add box clone in box_skitter
2351		addBoxClone: function(box_clone){
2352			this.box_skitter.find('.container_skitter').append(box_clone);
2353		},
2354		
2355		// Get accepts easing 
2356		getEasing: function(easing){
2357			var easing_accepts = [
2358				'easeInQuad', 		'easeOutQuad', 		'easeInOutQuad', 
2359				'easeInCubic', 		'easeOutCubic', 	'easeInOutCubic', 
2360				'easeInQuart', 		'easeOutQuart', 	'easeInOutQuart', 
2361				'easeInQuint', 		'easeOutQuint', 	'easeInOutQuint', 
2362				'easeInSine', 		'easeOutSine', 		'easeInOutSine', 
2363				'easeInExpo',		'easeOutExpo', 		'easeInOutExpo', 
2364				'easeInCirc', 		'easeOutCirc', 		'easeInOutCirc', 
2365				'easeInElastic', 	'easeOutElastic', 	'easeInOutElastic', 
2366				'easeInBack', 		'easeOutBack', 		'easeInOutBack', 
2367				'easeInBounce', 	'easeOutBounce', 	'easeInOutBounce', 
2368			];
2369			
2370			if (jQuery.inArray(easing, easing_accepts) > 0) {
2371				return easing;
2372			} else {
2373				return '';
2374			}
2375		},
2376		
2377		// Get random number
2378		getRandom: function (i){
2379			return Math.floor(Math.random() * i);
2380		},
2381
2382		// Set value for text
2383		setValueBoxText: function (){
2384			this.box_skitter.find('.label_skitter').html(this.settings.label_atual);
2385		},
2386		
2387		// Show box text
2388		showBoxText: function (){
2389			var self = this;
2390			if (this.settings.label_atual != undefined && this.settings.label_atual != '' && self.settings.label) {
2391				self.box_skitter.find('.label_skitter').slideDown(400);
2392			}
2393		},
2394		
2395		// Hide box text
2396		hideBoxText: function (){
2397			var self = this;
2398			this.box_skitter.find('.label_skitter').slideUp(200, function() {
2399				self.setValueBoxText();
2400			});
2401		},
2402		
2403		// Stop time to get over box_skitter
2404		stopOnMouseOver: function (){
2405			var self = this;
2406			var opacity_elements = self.settings.opacity_elements;
2407			var interval_in_elements = self.settings.interval_in_elements;
2408			var interval_out_elements = self.settings.interval_out_elements;
2409			
2410			self.box_skitter.hover(function() {
2411				if (self.settings.stop_over) self.settings.is_hover_box_skitter = true;
2412				
2413				if (!self.settings.is_paused_time) {
2414					self.pauseTime();
2415				}
2416				
2417				if (self.settings.hideTools) {
2418					if (self.settings.numbers) {
2419						self.box_skitter
2420							.find('.info_slide')
2421							.show()
2422							.css({opacity:0})
2423							.animate({opacity: opacity_elements}, interval_in_elements);
2424					}
2425					
2426					if (self.settings.navigation) {
2427						self.box_skitter
2428							.find('.prev_button')
2429							.show()
2430							.css({opacity:0})
2431							.animate({opacity: opacity_elements}, interval_in_elements);
2432							
2433						self.box_skitter
2434							.find('.next_button')
2435							.show().css({opacity:0})
2436							.animate({opacity: opacity_elements}, interval_in_elements);
2437					}
2438
2439					if (self.settings.focus && !self.settings.foucs_active) {
2440						self.box_skitter
2441							.find('.focus_button')
2442							.stop()
2443							.show().css({opacity:0})
2444							.animate({opacity:opacity_elements}, 200);
2445					}
2446					
2447					if (self.settings.controls) {
2448						self.box_skitter
2449						.find('.play_pause_button')
2450						.stop()
2451						.show().css({opacity:0})
2452						.animate({opacity:opacity_elements}, 200);
2453					}
2454				}
2455				
2456				self.clearTimer(true);
2457				
2458				if (self.settings.focus && !self.settings.foucs_active && !self.settings.hideTools) {
2459					self.box_skitter
2460						.find('.focus_button')
2461						.stop()
2462						.animate({opacity:1}, 200);
2463				}
2464				
2465				if (self.settings.controls && !self.settings.hideTools) {
2466					self.box_skitter
2467						.find('.play_pause_button')
2468						.stop()
2469						.animate({opacity:1}, 200);
2470				}
2471				
2472			}, function() {
2473				if (self.settings.stop_over) self.settings.is_hover_box_skitter = false;

2474				
2475				if (self.settings.elapsedTime == 0 && !self.settings.is_animating && !self.settings.is_paused) {
2476					self.startTime();
2477				} else if (!self.settings.is_paused) {
2478					self.resumeTime();
2479				}
2480				
2481				if (self.settings.hideTools) {
2482					if (self.settings.numbers) {
2483						self.box_skitter
2484							.find('.info_slide')
2485							.queue("fx", [])
2486							.show()
2487							.css({opacity: opacity_elements})
2488							.animate({opacity:0}, interval_out_elements);
2489					}
2490					
2491					if (self.settings.navigation) {
2492						self.box_skitter
2493							.find('.prev_button')
2494							.queue("fx", [])
2495							.show()
2496							.css({opacity: opacity_elements})
2497							.animate({opacity:0}, interval_out_elements);
2498							
2499						self.box_skitter
2500							.find('.next_button')
2501							.queue("fx", [])
2502							.show()
2503							.css({opacity: opacity_elements})
2504							.animate({opacity:0}, interval_out_elements);
2505					}
2506
2507
2508					if (self.settings.focus && !self.settings.foucs_active) {
2509						self.box_skitter
2510							.find('.focus_button')
2511							.stop()
2512							.css({opacity: opacity_elements})
2513							.animate({opacity:0}

2513, 200);
2514					}
2515
2516					if (self.settings.controls) {
2517						self.box_skitter
2518							.find('.play_pause_button')
2519							.stop()
2520							.css({opacity: opacity_elements})
2521							.animate({opacity:0}, 200);
2522					}
2523				}
2524				
2525				self.clearTimer(true);
2526				
2527				if (!self.settings.is_animating && self.settings.images_links.length > 1) {
2528					self.timer = setTimeout(function() { self.completeMove(); }, self.settings.interval - self.settings.elapsedTime);
2529					self.box_skitter.find('.image_main').attr({'src': self.settings.image_atual});
2530                    if ( self.settings.link_atual != '#') {
2531					    self.box_skitter.find('.image a').attr({'href': self.settings.link_atual});
2532                    } else {
2533					    self.box_skitter.find('.image a').removeAttr('href');
2534                    }
2535				}
2536				
2537				if (self.settings.focus && !self.settings.foucs_active && !self.settings.hideTools) {
2538					self.box_skitter
2539						.find('.focus_button')
2540						.stop()
2541						.animate({opacity:0.3}, 200);
2542				}
2543				
2544				if (self.settings.controls && !self.settings.hideTools) {
2545					self.box_skitter
2546						.find('.play_pause_button')
2547						.stop()
2548						.animate({opacity:0.3}, 200);
2549				}
2550				
2551			});
2552		}, 
2553		
2554		// Stop timer
2555		clearTimer: function (force) {
2556			var self = this;
2557			clearInterval(self.timer);
2558		},
2559		
2560		// Set link atual
2561		setLinkAtual: function() {
2562			if (this.settings.link_atual != '#') {
2563				this.box_skitter.find('.image a').attr({'href': this.settings.link_atual, 'target': this.settings.target_atual});
2564			} else {
2565				this.box_skitter.find('.image a').removeAttr('href');
2566			}
2567		},
2568		
2569		// Hide tools
2570		hideTools: function() {
2571			this.box_skitter.find('.info_slide').hide();
2572			this.box_skitter.find('.prev_button').hide();
2573			this.box_skitter.find('.next_button').hide();
2574			this.box_skitter.find('.label_skitter').hide();
2575			this.box_skitter.find('.focus_button').hide();
2576			this.box_skitter.find('.play_pause_button').hide();
2577		}, 
2578				
2579		// Focus Skitter
2580		focusSkitter: function() {
2581			var self = this;
2582			
2583			var focus_button = $('<a href="#" class="focus_button">focus</a>');
2584			self.box_skitter.append(focus_button);
2585			
2586			var _left = (self.settings.width_skitter - focus_button.width()) / 2;
2587			var _space = 0;
2588			
2589			if (self.settings.controls) _left -= 25;
2590			if (self.settings.controls_position == self.settings.focus_position) _space = focus_button.width() + 5;
2591			
2592			var cssPosition = {left: _left};
2593			
2594			switch (self.settings.focus_position) {
2595				case 'leftTop' 		: cssPosition = {left: 5 + _space, top: 30}; break;
2596				case 'rightTop' 	: cssPosition = {right: 5 + _space, top: 30}; break;
2597				case 'leftBottom' 	: cssPosition = {left: 5 + _space, bottom: 5, top: 'auto'}; break;
2598				case 'rightBottom' 	: cssPosition = {right: 5 + _space, bottom: 5, top: 'auto'}; break;
2599			}
2600			
2601			focus_button
2602				.css(cssPosition)
2603				.animate({opacity:0.3}, self.settings.interval_in_elements);
2604			
2605			$(document).keypress(function(e) {
2606				var code = (e.keyCode ? e.keyCode : e.which);
2607				if (code == 27) $('#overlay_skitter').trigger('click');
2608			});
2609			
2610			self.box_skitter.find('.focus_button').click(function() {
2611				self.settings.foucs_active = true;
2612				
2613				$(this).stop().animate({opacity:0}

2613, self.settings.interval_out_elements);
2614				
2615				var div = $('<div id="overlay_skitter"></div>')
2616					.height( $(document).height() )
2617					.hide()
2618					.fadeTo(self.settings.interval_in_elements, 0.98);
2619					
2620				var _top = $('.box_skitter').offset().top;
2621				var _left = $('.box_skitter').offset().left;
2622				var _topFinal = (($(window).height() - $('.box_skitter').height()) / 2) + $(document).scrollTop();
2623				var _leftFinal = ($(window).width() - $('.box_skitter').width()) / 2;
2624				
2625				self.box_skitter.before('<div id="mark_position"></div>');
2626				$('body').prepend(div);
2627				$('body').prepend(self.box_skitter);
2628				self.box_skitter
2629					.css({'top':_top, 'left':_left, 'position':'absolute', 'z-index':9999})
2630					.animate({'top':_topFinal, 'left':_leftFinal}, 2000, 'easeOutExpo');
2631				
2632				$('#mark_position')	
2633					.width($('.box_skitter').width())
2634					.height($('.box_skitter').height())
2635					.css({'background':'none'})
2636					.fadeTo(300,0.3);
2637				
2638				$('#overlay_skitter').click(function() {
2639					if ($(this).hasClass('finish_overlay_skitter')) return false;
2640					
2641					self.settings.foucs_active = false;
2642					$(this).addClass('finish_overlay_skitter');
2643					
2644					$('#mark_position').before($('.box_skitter'));
2645					
2646					if (!self.settings.hideTools) self.box_skitter.find('.focus_button').animate({opacity:0.3}, 200);
2647					
2648					self.box_skitter
2649						.stop()
2650						.animate({'top':_top, 'left':_left}, 300, 'easeOutExpo', function() {
2651							$(this).css({'position':'relative', 'top':0, 'left': 0});
2652							$('#mark_position').remove();
2653						});
2654					
2655					$('#overlay_skitter').fadeTo(self.settings.interval_out_elements, 0, function() {
2656						$(this).remove();
2657					});
2658					return false;
2659				});
2660				return false;
2661			});
2662		},
2663
2664		/**
2665		 * Controls: play and stop
2666		 */
2667		setControls: function() {
2668			var self = this;
2669			
2670			var play_pause_button = $('<a href="#" class="play_pause_button">pause</a>');
2671			self.box_skitter.append(play_pause_button);
2672			
2673			var _left = (self.settings.width_skitter - play_pause_button.width()) / 2;
2674			
2675			if (self.settings.focus) _left += 25;
2676			
2677			var cssPosition = {left: _left};
2678			
2679			switch (self.settings.controls_position)
2680			{
2681				case 'leftTop' 		: cssPosition = {left: 5, top: 30}; break;
2682				case 'rightTop' 	: cssPosition = {right: 5, top: 30}; break;
2683				case 'leftBottom' 	: cssPosition = {left: 5, bottom: 5, top: 'auto'}; break;
2684				case 'rightBottom' 	: cssPosition = {right: 5, bottom: 5, top: 'auto'}; break;
2685			}
2686			
2687			play_pause_button
2688				.css(cssPosition)
2689				.animate({opacity:0.3}, self.settings.interval_in_elements);
2690			
2691			play_pause_button.click(function() {
2692				if (!self.settings.is_paused) {
2693					$(this).html('play');
2694					$(this).fadeTo(100, 0.5).fadeTo(100, 1);
2695					
2696					$(this).addClass('play_button');
2697					self.pauseTime();
2698					self.settings.is_paused = true;
2699					self.clearTimer(true);
2700				}
2701				else {
2702					if (!self.settings.is_animating && !self.box_skitter.find('.progressbar').is(':visible')) {
2703						self.settings.elapsedTime = 0;
2704					} else {
2705						self.resumeTime();
2706					}
2707					
2708					if (!self.settings.progressbar) self.resumeTime();
2709					
2710					self.settings.is_paused = false;
2711					
2712					$(this).html('pause');
2713					$(this).fadeTo(100, 0.5).fadeTo(100, 1);
2714					$(this).removeClass('play_button');
2715					
2716					if (!self.settings.stop_over) { 
2717						self.clearTimer(true);
2718						if (!self.settings.is_animating && self.settings.images_links.length > 1) {
2719							self.timer = setTimeout(function() { self.completeMove(); }, self.settings.interval - self.settings.elapsedTime);
2720							self.box_skitter.find('.image_main').attr({'src': self.settings.image_atual});
2721                            if (self.settings.link_atual != '#') {
2722							    self.box_skitter.find('.image a').attr({'href': self.settings.link_atual});
2723                            } else {
2724							    self.box_skitter.find('.image a').removeAttr('href');
2725                            }
2726						}
2727					}
2728				}
2729				return false;
2730			});
2731		},
2732				
2733		/**
2734		 * Object size
2735		 */
2736		objectSize: function(obj) {
2737			var size = 0, key;
2738			for (key in obj) { if (obj.hasOwnProperty(key)) size++; }
2739			return size;
2740		},
2741		
2742		/**
2743		 * Add progress bar
2744		 */
2745		addProgressBar: function() {
2746			var self = this;
2747			
2748			var progressbar = $('<div class="progressbar"></div>');
2749			self.box_skitter.append(progressbar);
2750			
2751			if (self.objectSize(self.settings.progressbar_css) == 0)  {
2752				if (parseInt(progressbar.css('width')) > 0) {
2753					self.settings.progressbar_css.width = parseInt(progressbar.css('width'));
2754				} else {
2755					self.settings.progressbar_css = {width: self.settings.width_skitter, height:5};
2756				}
2757			}
2758			if (self.objectSize(self.settings.progressbar_css) > 0 && self.settings.progressbar_css.width == undefined) {
2759				self.settings.progressbar_css.width = self.settings.width_skitter;
2760			}
2761			
2762			progressbar.css(self.settings.progressbar_css).hide();
2763		},
2764		
2765		/**
2766		 * Start progress bar
2767		 */
2768		startProgressBar: function() {
2769			var self = this;
2770			if (self.settings.is_hover_box_skitter || self.settings.is_paused || self.settings.is_blur || !self.settings.progressbar) return false;

2771			self.box_skitter.find('.progressbar')
2772				.hide()
2773				.dequeue()
2774				.width(self.settings.progressbar_css.width)
2775				.animate({width:'show'}, self.settings.interval, 'linear');
2776		},
2777		
2778		/**
2779		 * Pause progress bar
2780		 */
2781		pauseProgressBar: function() {
2782			var self = this;
2783			if (!self.settings.is_animating) {
2784				self.box_skitter.find('.progressbar').stop();
2785			}
2786		},
2787		
2788		/**
2789		 * Resume progress bar
2790		 */
2791		resumeProgressBar: function() {
2792			var self = this;
2793			
2794			if (self.settings.is_hover_box_skitter || self.settings.is_paused || !self.settings.progressbar) return false;
2795			
2796			self.box_skitter.find('.progressbar').dequeue().animate({width: self.settings.progressbar_css.width}, (self.settings.interval - self.settings.elapsedTime), 'linear');
2797		},
2798		
2799		/**
2800		 * Hide progress bar
2801		 */
2802		hideProgressBar: function() {
2803			var self = this;
2804			
2805			if (!self.settings.progressbar) return false;
2806			
2807			self.box_skitter.find('.progressbar').stop().fadeOut(300, function() {
2808				$(this).width(self.settings.progressbar_css.width);
2809			});
2810		},
2811
2812		/**
2813		 * Start time
2814		 */
2815		startTime: function() {
2816			var self = this;
2817			
2818			self.settings.is_paused_time = false;
2819			
2820			var date = new Date();
2821			self.settings.elapsedTime = 0;
2822			self.settings.timeStart = date.getTime();
2823			
2824			// Start progress bar
2825			self.startProgressBar();
2826		}, 
2827		
2828		/**
2829		 * Pause time
2830		 */
2831		pauseTime: function() {
2832			var self = this;
2833			
2834			if (self.settings.is_paused_time) return false;
2835			self.settings.is_paused_time = true;
2836			
2837			var date = new Date();
2838			self.settings.elapsedTime += date.getTime() - self.settings.timeStart;
2839			
2840			// Pause progress bar
2841			self.pauseProgressBar();
2842		}, 
2843		
2844		/**
2845		 * Resume time
2846		 */
2847		resumeTime: function() {
2848			var self = this;
2849			
2850			self.settings.is_paused_time = false;
2851			
2852			var date = new Date();
2853			self.settings.timeStart = date.getTime();
2854			
2855			// Resume progress bar
2856			self.resumeProgressBar();
2857		}, 
2858
2859		/**
2860		 * Enable navigation keys
2861		 */
2862		enableNavigationKeys: function() {
2863			var self = this;
2864			$(window).keydown(function(e) {
2865				// Next
2866				if (e.keyCode == 39 || e.keyCode == 40) {
2867					self.box_skitter.find('.next_button').trigger('click');
2868				}
2869				// Prev
2870				else if (e.keyCode == 37 || e.keyCode == 38) {
2871					self.box_skitter.find('.prev_button').trigger('click');
2872				}
2873			});
2874		},
2875		
2876		/**
2877		 * Get box clone with background image
2878		 */
2879		getBoxCloneBackground: function(options) {
2880			var box_clone = $('<div class="box_clone"></div>');
2881
2882			box_clone.css({
2883				'left': 				options.left, 
2884				'top': 					options.top, 
2885				'width': 				options.width, 
2886				'height': 				options.height,
2887				'background-image': 	'url('+options.image+')', 
2888				'background-position': 	options.position.left+'px '+options.position.top+'px'
2889			});
2890
2891			return box_clone;
2892		}, 
2893
2894		/**
2895		 * Shuffle array
2896		 * @author Daniel Castro Machado <[email protected]>
2897		 */
2898		shuffleArray: function (arrayOrigem) {
2899			var self = this;
2900			var arrayDestino = new Array();
2901			var indice;
2902			while (arrayOrigem.length > 0) {
2903				indice = self.randomUnique(0, arrayOrigem.length - 1);
2904				arrayDestino[arrayDestino.length] = arrayOrigem[indice];
2905				arrayOrigem.splice(indice, 1);
2906			}
2907			return arrayDestino;
2908		}, 
2909		
2910		/**
2911		 * Gera numeros aleatorios inteiros entre um intervalo
2912		 * @author Daniel Castro Machado <[email protected]>
2913		 */
2914		randomUnique: function (valorIni, valorFim) {
2915			var numRandom;
2916			do numRandom = Math.random(); while (numRandom == 1); // Evita gerar o numero valorFim + 1
2917			return (numRandom * (valorFim - valorIni + 1) + valorIni) | 0;
2918		},
2919		
2920		/** 
2921		 * Stop on window focus out
2922		 * @author Dan Partac (http://thiagosf.net/projects/jquery/skitter/#comment-355473307)
2923		 */
2924		windowFocusOut: function () {
2925			var self = this;
2926			$(window).bind('blur', function(){
2927				self.settings.is_blur = true;
2928				self.pauseTime();
2929				self.clearTimer(true);
2930			});
2931			$(window).bind('focus', function(){
2932				if ( self.settings.images_links.length > 1 ) {
2933					self.settings.is_blur = false;	
2934					
2935					if  (self.settings.elapsedTime == 0) {
2936						self.startTime();
2937					} else {
2938						self.resumeTime();
2939					}
2940					
2941					if (self.settings.elapsedTime <= self.settings.interval) {
2942						self.clearTimer(true); // Fix bug IE: double next
2943						self.timer = setTimeout(function() { self.completeMove(); }, self.settings.interval - self.settings.elapsedTime);
2944						self.box_skitter.find('.image_main').attr({'src': self.settings.image_atual});
2945                        if (self.settings.link_atual != '#') {
2946						    self.box_skitter.find('.image a').attr({'href': self.settings.link_atual});
2947                        } else {
2948						    self.box_skitter.find('.image a').removeAttr('href');
2949                        }
2950					}
2951				}
2952			});
2953		}
2954		
2955	});
2956	
2957	/**
2958	 * Helper function for cross-browser CSS3 support, prepends all possible prefixes to all properties passed in
2959	 * @param {Object} props Ker/value pairs of CSS3 properties
2960	 */
2961	$.fn.css3 = function(props) {
2962		var css = {};
2963		var prefixes = ['moz', 'ms', 'o', 'webkit'];
2964		for(var prop in props) {
2965			// Add the vendor specific versions
2966			for(var i=0; i<prefixes.length; i++)
2967				css['-'+prefixes[i]+'-'+prop] = props[prop];
2968			// Add the actual version	
2969			css[prop] = props[prop];
2970		}
2971		this.css(css);
2972		return this;
2973	};
2974	
2975    // Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS
2976    // scale and rotation independently.

2977    // 2009-2010 Zachary Johnson www.zachstronaut.com
2978    // Updated 2010.11.06
2979    var rotateUnits = 'deg';
2980    
2981    $.fn.rotate = function (val) {
2982        var style = $(this).css('transform') || 'none';
2983        if (typeof val == 'undefined') {
2984            if (style) {
2985                var m = style.match(/rotate\(([^)]+)\)/);
2986                if (m && m[1]) {
2987                    return m[1];
2988                }
2989            }
2990            return 0;
2991        }
2992        var m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/);
2993        if (m) {
2994            if (m[3]) rotateUnits = m[3];
2995            $(this).css('transform',
2996                style.replace(/none|rotate\([^)]*\)/, '') + 'rotate(' + m[1] + rotateUnits + ')'
2997            );
2998        }
2999        return this;
3000    };
3001    
3002    // Note that scale is unitless.
3003    $.fn.scale = function (val, duration, options) {
3004        var style = $(this).css('transform');
3005        if (typeof val == 'undefined') {
3006            if (style) {
3007                var m = style.match(/scale\(([^)]+)\)/);
3008                if (m && m[1]) {
3009                    return m[1];
3010                }
3011            }
3012            return 1;
3013        }
3014        $(this).css('transform',
3015            style.replace(/none|scale\([^)]*\)/, '') + 'scale(' + val + ')'
3016        );
3017        return this;
3018    };
3019
3020    // fx.cur() must be monkey patched because otherwise it would always
3021    // return 0 for current rotate and scale values
3022    var curProxied = $.fx.prototype.cur;
3023    $.fx.prototype.cur = function () {
3024        if (this.prop == 'rotate') {
3025            return parseFloat($(this.elem).rotate());
3026        }
3027        else if (this.prop == 'scale') {
3028            return parseFloat($(this.elem).scale());
3029        }
3030        return curProxied.apply(this, arguments);
3031    };
3032    
3033    $.fx.step.rotate = function (fx) {
3034        $(fx.elem).rotate(fx.now + rotateUnits);
3035    };
3036    
3037    $.fx.step.scale = function (fx) {
3038        $(fx.elem).scale(fx.now);
3039    };
3040    
3041    var animateProxied = $.fn.animate;
3042    $.fn.animate = function (prop) {
3043        if (typeof prop['rotate'] != 'undefined') {
3044            var m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/);
3045            if (m && m[5]) {
3046                rotateUnits = m[5];
3047            }
3048            prop['rotate'] = m[1];
3049        }
3050        return animateProxied.apply(this, arguments);
3051    };
3052	
3053    // Monkey patch jQuery 1.3.1+ css() method to support CSS 'transform'
3054    // property uniformly across Safari/Chrome/Webkit, Firefox 3.5+, IE 9+, and Opera 11+.
3055    // 2009-2011 Zachary Johnson www.zachstronaut.com
3056    // Updated 2011.05.04 (May the fourth be with you!)
3057    function getTransformProperty(element) {
3058        var properties = ['transform', 'WebkitTransform', 'msTransform', 'MozTransform', 'OTransform'];
3059        var p;
3060        while (p = properties.shift()) {
3061            if (typeof element.style[p] != 'undefined') {
3062                return p;
3063            }
3064        }
3065        return 'transform';
3066    };
3067    
3068    var _propsObj = null;
3069    
3070    var proxied = $.fn.css;
3071    $.fn.css = function (arg, val) {
3072        if (_propsObj === null) {
3073            if (typeof $.cssProps != 'undefined') {
3074                _propsObj = $.cssProps;
3075            } else if (typeof $.props != 'undefined') {
3076                _propsObj = $.props;
3077            } else {
3078                _propsObj = {};
3079            }
3080        }
3081        if (typeof _propsObj['transform'] == 'undefined' && (arg == 'transform' || (typeof arg == 'object' && typeof arg['transform'] != 'undefined'))) {
3082            _propsObj['transform'] = getTransformProperty(this.get(0));
3083        }
3084        if (_propsObj['transform'] != 'transform') {
3085            // Call in form of css('transform' ...)
3086            if (arg == 'transform') {
3087                arg = _propsObj['transform'];
3088                if (typeof val == 'undefined' && jQuery.style) {
3089                    return jQuery.style(this.get(0), arg);
3090                }
3091             // Call in form of css({'transform': ...})
3092            } else if(typeof arg == 'object' && typeof arg['transform'] != 'undefined') {
3093                arg[_propsObj['transform']] = arg['transform'];
3094                delete arg['transform'];
3095            }
3096        }
3097        return proxied.apply(this, arguments);
3098    };
3099
3100})(jQuery);