function scrollSections() {
	$('a.scrollitem').click(function () {
		$('a.scrollitem').removeClass('selected');
		$(this).addClass('selected');
		$('.toggle').css({'display':'none'});
		$('#wrapper').scrollTo($(this).attr('href'), 1200, function(){
			$('.toggle').css({'display':'block'});
		});
		return false;
	});
}  

function resizePanel() {
	// What happens if we resize the window...
	// Get dimensions
	width = $(window).width();
	height = $(window).height();
	mask_width = width * $('.item').length;
	// Resize the content
	$('#wrapper, .item').css({width: width, height: height});
	$('#mask').css({width: mask_width, height: height});
	// Keep the current section visible (and don't jump back)
	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}  

function toggleContent() {
	// When we click on a toggle button (the '+' and '-')
	$('.toggle_button').click(function () {
		// The content hides or show
		$('.container').toggle(300);
		// The buttons class is updated
		$('.toggle_button').toggleClass("active"); 
		return false;
	})
} 

$(document).ready(function () {

	// Easing style
	jQuery.easing.def = "easeInOutQuart";
	// Hiding the scrollbars (so they are visible if JS is disabled
	$('.container').css({'overflow': 'hidden'});
	// Calling Functions
	toggleContent();
	scrollSections();
	// Resize the containers on window resize
    $(window).resize(function() {
		resizePanel();
    }); 


});