$("document").ready(function() {
		
			$.extend($.tools.scrollable.conf, {
				circular: false,
				mousewheel: false,
				items: ".items",
				easing: "easeOutCubic",
				speed: 1000,
				disabledClass: "disabled"
			});
			
			
			$("#panes").scrollable();
			
			var api = $("#panes").data("scrollable");
			
			
			//Click event handler for home slide
			$("div#home").click(function() {
				api.move(1);
			});
			
			
			//Click event handler for Next/Back
			$("#panes a.next, #panes a.prev").click(function() {
				$("div.hotspot").fadeOut(200).css("z-index", 1);
				$("a.button-hs.active").removeClass("active");
				$("#panes h2.visible").fadeIn(200);
			});
			
			
			// Bind click event handler to hotspot button		
			$("a.button-hs").bind("click", hsOpen);
			
			// Click event handler for hotspots
			function hsOpen(event) {
				
				var $target = $(event.target);
				var $hotspot = $target.next();
					if( $target.is("a.button-hs.active") ) {
						$hotspot.css("z-index", 1);
						$hotspot.fadeToggle(200);
						$target.removeClass("active");
						$("#panes h2").fadeIn(200).addClass("visible");	
					} else {
						$("div.hotspot").fadeOut(200);
						$("a.button-hs.active").removeClass("active");
						$target.addClass("active");
						$hotspot.css("z-index", 3);
						$hotspot.fadeToggle(200);
						$("#panes h2.visible").fadeOut(200);
					}	
			};
			
			
			
			// jQuery does not have a toggle function for fading elements in and out. I wrote a custom jQuery function to toggle the "Fade Effect" on any element.
			jQuery.fn.fadeToggle = function(speed, easing, callback) {
				return this.animate( {opacity: 'toggle'}, speed, easing, callback );
			};
			
	
	
});