jQuery(function( $ ){
	var target = $('#slider').get(0);//the scrolled div
	target.scrollLeft = target.scrollTop = 0;
	
	//scroll initially if there's a hash (#something) in the url 
	$.localScroll.hash({
		target: target, //could be a selector or a jQuery object too.
		axis:'xy',//the default is 'y'
		queue:true,
		duration:1500
	});
	var $last = $([]);//save the last link
	
	$.localScroll({
		target: target, //could be a selector or a jQuery object too.
		axis:'xy',//the default is 'y'
		queue:true,
		duration:1200,
		hash:false,
		onBefore:function( e, anchor, $target ){//'this' is the clicked link
			this.blur();//remove the awful outline
		}
	});
    $.scrollTo.defaults.axis = 'y';
    
// Now the text panel
    $('div#textpane').scrollTo(0);
    $.scrollTo( 0 );//reset the screen to (0,0)
    var $paneTarget = $('#textpane');	
    $('#homebutton').click(function(){
        $paneTarget.stop().scrollTo( '495px', 1000);});
    $('#boardbutton').click(function(){
        $paneTarget.stop().scrollTo( '990px', 1000);});
    $('#cardsbutton').click(function(){
        $paneTarget.stop().scrollTo( '1485px', 1000);});
    $('#iphonebutton').click(function(){
        $paneTarget.stop().scrollTo( '1980px', 1000);});
    $('#storebutton').click(function(){
        $paneTarget.stop().scrollTo( '2475px', 1000);});
    $('#communitybutton').click(function(){
        $paneTarget.stop().scrollTo( '2970px', 1000);});
	 
	$("ul.navigation").show();
	$('div#textpane').scrollTo( '495px', 2000 );
    
// Animate the buttons themselves	
			
	$("ul.navigation li:first").addClass("active").children().css({marginTop: "10px"});

	$("ul.navigation li").click(
		function(){
			$(this).addClass("active");
			$(this).children().animate({ marginTop: "10px"}, 100 );
			$(this).siblings().removeClass("active");
			$(this).siblings().children().animate({ marginTop: "10px"}, 100 );
            if($(this)=="home"){
							$(this).children().animate({ marginTop: "20px"}, 100 );

			}
		}
	);

	$("ul.navigation li a").hover(
		function(){
			if($(this).parent().hasClass("active")){
				
			}else{
				$(this).animate({ marginTop: "0px"}, 100 );
			}
		},
		function(){
			if($(this).parent().hasClass("active")){
			}else{
				$(this).animate({ marginTop: "10px"}, 100 );
			}
		}
	);
});