// JavaScript Document
$(document).ready(function(){
			//1. creat scroll effect
			//2. handle section of navigation
			//3. prev + next image buttons
			//4. support verticle and horizontal
					var horizontal = true;
					var $panels = $('#slider .panel');
					var $container = $('#slider .scrollContainer');
					var $scroll = $('#slider .scroll').css('overflow', 'hidden');
					
			
					$scroll
					.before('<img src="jquery/scroll_left.png" class="scrollButtons left"/>')
					.after('<img src="jquery/scroll_right.png" class="scrollButtons right"/>');
					
					if(horizontal){
						$panels.css({
									'float' : 'left',
									'position' : 'relative'
									});
						$container.css('width', $panels[0].offsetWidth * $panels.length);
						}
					
					
					$('#slider .navigation a').click(selectNav);
					
					function selectNav(){
						$(this)
						.parents('ul:first')
						.find('a')
						.removeClass('selected')
						.end() 
						.end()
						.addClass('selected');
						
						}
						
						var scrollOptions = {
							target: $scroll,
							items: $panels,
							navigation: '.navigation a',
							prev: 'img.left',
							next: 'img.right',
							axis: 'xy',
							duration: 1000,
							easing: 'swing',
							onAfter: trigger
							};
							
							function trigger(data){
								var el = $('#slider .navigation').find('a[href$="'+ data.id+ '"]').get(0);
								selectNav.call(el);
								}
								
								if(window.location.hash){
									trigger({id: window.location.hash.substr(1)});
									}else{
										$('#slider .navigation a:first').click();
										}
								
							$('#slider').serialScroll(scrollOptions);
							$.localScroll(scrollOptions);
								
				});