$(document).ready(function() {
		var clickedmenu;
		var activemenu = 1; //start on Home

		// main vertical scroll
		var vertical = $("#main").scrollable({
			speed: 500,
			vertical: true,
			circular: true

		}).navigator({
			navi: "#main_navi",
			naviItem: 'li a',
			history: true /* handles 'back' button events */
		});
		
		// horizontal scrollables - applies to the "Home" section, but can be extended to other sections
		//autoplay on home slides
		var horizontal1 = $("#sa_home").scrollable({ circular: true, speed: 800 }).autoscroll({ autoplay: true, interval: 4000 }); 
		
		/* fade in/out subnav */
		/* uses scrollable callback functions to hide/display top subnavigation*/
		/* this.getIndex points to which scrollable is being scrolled into (onSeek) or about to be scrolled away (onBeforeSeek)*/
		/* id="navi#" is related to an individual scrollable element*/
		/* example id="navi2" is related to the 2nd instance of a div with class="scrollable" (The "About" scrollable section) */
		
		vertical.data("scrollable").onSeek(function(){
			activemenu = this.getIndex() + 1;
			$("#navi" + activemenu).fadeIn('fast'); //fade in subnav that is related to clicked main nav 
		});
		
		
		vertical.data("scrollable").onBeforeSeek(function(){
			clickedmenu = this.getIndex() + 1;
			$("#navi" + clickedmenu).fadeOut('fast'); //fade out active subnav before vertical scrolling starts
		});
	});