window.addEvent('domready', function() {
	var scroll = new Fx.Scroll('awesomesauce_slider', {
		wait: false,
		duration: 1000,
		transition: Fx.Transitions.Quad.easeOut
	});
	
	var scroll2 = new Fx.Scroll('subslide1', {
		wait: false,
		duration: 1500,
		transition: Fx.Transitions.Quad.easeInOut
	});
	
	var scroll3 = new Fx.Scroll('bigpage', {
		wait: false,
		duration: 1500,
		transition: Fx.Transitions.Quad.easeInOut
	});

	$$('a[href^="#main_"]').addEvent('click', function(e) {
		new Event(e).stop();
		scroll.toElement($E(this.getProperty('href')));
		
	});
	$$('a[href^="#sub_"]').addEvent('click', function(e) {
		new Event(e).stop();
		scroll2.toElement($E(this.getProperty('href')));
	});
	$$('a[href^="#big_"]').addEvent('click', function(e) {
		new Event(e).stop();
		scroll3.toElement($E(this.getProperty('href')));
	})
	
	var mySlide = new Slider($('slider'), $('knob'), {
		steps: 12, /* was 9 */
		offset:0, /* was 0 for no arrows -  -24 for arrows - peep your left and right arrows for the size */
		onChange: function(step){
			scroll.toElement($E('#alayer' + step));
		}
	}).set(-1); // was 2 - it means to slide into the 2nd image in the set

	$('knob').setOpacity(0.8);
	
	
});