$(function(){

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one"),
        $mainNav2 = $("#example-two");
    
    /*
        EXAMPLE ONE
    */
    $mainNav.append("<li id='magic-line'></li>");
    
    var $magicLine = $("#magic-line");
    
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $("#example-one li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });

});


		$(function(){
			$.fn.supersized.options = {  
				startwidth: 640,  
				startheight: 480,
				vertical_center: 1,
				slideshow: 1,
				navigation: 0,
				thumbnail_navigation: 0,
				transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
				pause_hover: 0,
				slide_counter: 0,
				slide_captions: 0,
				slide_interval: 10000,
				slides : [
					{image : 'slides/tower.jpg', title : 'City Clock Tower', url : 'JavaScript:void(0);'},
					{image : 'slides/fence.jpg', title : 'Canal Park Fence', url : 'JavaScript:void(0);'},  
					{image : 'slides/tracks.jpg', title : 'Old Train Tracks', url : 'JavaScript:void(0);'}
				]
			};
	        $('#supersized').supersized(); 
	    });
		
///////start box///////
$(document).ready(function(){
				//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
				//Vertical Sliding
				$('.boxgrid.slidedown').hover(function(){
					$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
				});
				//Horizontal Sliding
				$('.boxgrid.slideright').hover(function(){
					$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
				});
				//Diagnal Sliding
				$('.boxgrid.thecombo').hover(function(){
					$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
				});
				//Partial Sliding (Only show some of background)
				$('.boxgrid.peek').hover(function(){
					$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
				});
				//Full Caption Sliding (Hidden to Visible)
				$('.boxgrid.captionfull').hover(function(){
					$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
				});
				//Caption Sliding (Partially Hidden to Visible)
				$('.boxgrid.caption').hover(function(){
					$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
				});
			});

jQuery().ready(function(){
		// simple accordion
		jQuery('#list1a').accordion({
			autoheight: false
		});
		
	});
	
	//scroll
	
	$("document").ready(function() {			
				
				$('.area1-title').click(function(){
					$('html, body').animate({
						scrollTop: $(".area2").offset().top
					}, 2000);				   
				 });				
				
				$('.area2-title').click(function(){
					$('html, body').animate({
						scrollTop: $(".area3").offset().top
					}, 2000);				   
				 });
				
				$('.area3-title').click(function(){
					$('html, body').animate({
						scrollTop: $(".area4").offset().top
					}, 2000);				   
				 });
				 $('.area4-title').click(function(){
					$('html, body').animate({
						scrollTop: $(".area1").offset().top
					}, 2000);				   
				 });

});