// wait until document is fully scriptable
			$(document).ready(function() {
			
			// custom easing called "custom" 
			$.easing.custom = function (x, t, b, c, d) { 
				var s = .60158;  
				if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 
				return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 
			}
					
			
				// select #flowplanes and make it scrollable. use circular and navigator plugins
			var api = $("#flowpanes").scrollable({	
					
					
					size:1,
					speed: 800, 
					easing:'custom',
					clickable: false,
					
					 
					// when seek starts make items little transparent 
					onBeforeSeek: function() { 
						this.getItems().fadeTo(300, .6);         
					}, 
					 
					// when seek ends resume items to full transparency 
					onSeek: function() { 
						this.getItems().fadeTo(400, 3); 
					}
					
					
					}).circular().navigator({
			
					// select #flowtabs to be used as navigator
					navi: "#flowtabs",
			
					// select A tags inside the navigator to work as items (not direct children)
					naviItem: 'a',
			
					// assign "current" class name for the active A tag inside navigator
					activeClass: 'current',
					
					effect: 'fadeIn',
					
	
					// when seek starts make items little transparent 
					onBeforeSeek: function() { 
						this.getItems().fadeTo(370, 0.2);         
					}, 
					 
					// when seek ends resume items to full transparency 
					onSeek: function() { 
						this.getItems().fadeTo(350, 1); 
					},
					
					api: true
			
				});
				
						$("a.tab2").click(function() {api.move(1) 
					}); 
						$("a.tab3").click(function() {api.move(2)
					}); 
						$("a.tab4").click(function() {api.move(3)
					}); 
						$("a.tab5").click(function() {api.move(4)
					}); 
						$("a.tab6").click(function() {api.move(5)
					}); 
						$("a.tab7").click(function() {api.move(6)
					});  
						$("a.tab8").click(function() {api.move(7)
					}); 
 		
			});