// when the DOM is ready...
$(document).ready(function () {

    var $panels = $('#slider #scrollContainer > div');
    var $container = $('#slider #scrollContainer');
    
    //$panels.css({'visibility' : 'hidden'});
    //$('#home').css({'visibility' : 'visible'});
 	$('#about').css({'visibility' : 'hidden'});
	$('#workflash').css({'visibility' : 'hidden'});
	$('#clientflash').css({'visibility' : 'hidden'});
	$('#contact').css({'visibility' : 'hidden'});
	$('#login').css({'visibility' : 'hidden'});
	
    // if false, we'll float all the panels left and fix the width 
    // of the container
    var horizontal = true;

    // float the panels left if we're going horizontal
    if (horizontal) {
        $panels.css({
            'float' : 'left',
            'position' : 'relative' // IE fix to ensure overflow is hidden
        });

        // calculate a new width for the container (so it holds all panels)
        $container.css('width', 7001);
    }

    // collect the scroll object, at the same time apply the hidden overflow
    // to remove the default scrollbars that will appear
    var $scroll = $('#slider #scroll').css('overflow', 'hidden');
  
});


//scrolling functions

function scrollToHome(){
	$('#home').css({'visibility' : 'visible'});
	$('#scroll').scrollTo('#home', 500, {onAfter:function(){
		$('#about').css({'visibility' : 'hidden'});
		$('#workflash').css({'visibility' : 'hidden'});
		$('#clientflash').css({'visibility' : 'hidden'});
		$('#contact').css({'visibility' : 'hidden'});
		$('#login').css({'visibility' : 'hidden'});
	}});
}

function scrollToAbout(){
	$('#about').css({'visibility' : 'visible'});
	$('#scroll').scrollTo('#about', 500, {onAfter:function(){
		$('#home').css({'visibility' : 'hidden'});
		$('#workflash').css({'visibility' : 'hidden'});
		$('#clientflash').css({'visibility' : 'hidden'});
		$('#contact').css({'visibility' : 'hidden'});
		$('#login').css({'visibility' : 'hidden'});
	}});
}

function scrollToWork(){
	$('#workflash').css({'visibility' : 'visible'});
	$('#scroll').scrollTo('#work', 500, {onAfter:function(){
		$('#home').css({'visibility' : 'hidden'});
		$('#about').css({'visibility' : 'hidden'});
		$('#clientflash').css({'visibility' : 'hidden'});
		$('#contact').css({'visibility' : 'hidden'});
		$('#login').css({'visibility' : 'hidden'});
	}});
}

function scrollToClients(){
	$('#clientflash').css({'visibility' : 'visible'});
	$('#scroll').scrollTo('#clients', 500, {onAfter:function(){
		$('#home').css({'visibility' : 'hidden'});
		$('#about').css({'visibility' : 'hidden'});
		$('#workflash').css({'visibility' : 'hidden'});
		$('#contact').css({'visibility' : 'hidden'});
		$('#login').css({'visibility' : 'hidden'});
	}});

}

function scrollToContact(){
	$('#contact').css({'visibility' : 'visible'});
	$('#scroll').scrollTo('#contact', 500, {onAfter:function(){
		$('#home').css({'visibility' : 'hidden'});
		$('#about').css({'visibility' : 'hidden'});
		$('#clientflash').css({'visibility' : 'hidden'});
		$('#workflash').css({'visibility' : 'hidden'});
		$('#login').css({'visibility' : 'hidden'});
	}});

}

function scrollToLogin(){
	$('#login').css({'visibility' : 'visible'});
	$('#scroll').scrollTo('#login', 500, {onAfter:function(){
		$('#home').css({'visibility' : 'hidden'});
		$('#about').css({'visibility' : 'hidden'});
		$('#clientflash').css({'visibility' : 'hidden'});
		$('#workflash').css({'visibility' : 'hidden'});
		$('#contact').css({'visibility' : 'hidden'});
	}});


}