window.addEvent('domready', function() {
	
	/* ----------Config Vars----------- */
	var transitionTime = 1200; 					//transition time (1 second = 1000)
	var leftPane = $('left_pane');  					//Get array of elements for sliding
	var rightPane = $('right_pane');  				//Get array of elements for sliding
	var theParagraphs = $$('#left_pane p');  	//Get array of elements for sliding
	var parCounts = new Array(5,4);
	var pageHolder = $('content');
	var numHolder = $('page_nums');
	var markerTwo = $('page2');
	var markerThree = $('page3');
	/* -------- end config vars -------- */
	
	//initialize 
	leftPane.setStyles({
		//'opacity' : "0"
	});
	rightPane.setStyle('opacity', "0");
	pageHolder.setStyle('overflow', 'hidden');
	
	var numOne = new Element('div', {'html' : 1, 'id': 'pg1' });
	var numTwo = new Element('div', {'html' : 2, 'id': 'pg2' });
	var numThree = new Element('div', {'html' : 3, 'id': 'pg3' });
	numOne.addClass('active');
	
	numHolder.set('html', 'Page: ');
	numHolder.grab(numOne);
	numHolder.grab(numTwo);
	numHolder.grab(numThree);
	

	
	var myFx = new Fx.Scroll(pageHolder, {
	    
	});
	
	myFx.toTop();
	
	numOne.addEvents({
		'mouseenter': function() {
			this.setStyle('cursor', 'pointer');
		},
		
		'click': function() {
			myFx.toTop();
			this.addClass('active');
			numTwo.removeClass('active');
			numThree.removeClass('active');
		}
	});
	
	numTwo.addEvents({
		'mouseenter': function() {
			this.setStyle('cursor', 'pointer');
		},
		
		'click': function() {
			myFx.toElement(markerTwo);
			this.addClass('active');
			numOne.removeClass('active');
			numThree.removeClass('active');
		}
	});
	
	numThree.addEvents({
		'mouseenter': function() {
			this.setStyle('cursor', 'pointer');
		},
		
		'click': function() {
			myFx.toElement(markerThree);
			this.addClass('active');
			numOne.removeClass('active');
			numTwo.removeClass('active');
		}
	});
	
	//myItems.each(function(e, index){
	
	//fade in
	var showBox = function(el){ 
		
		//get item to slide out
		var curItem = el;	
		
		//set up our animation stylings for out and in motions (note:  Fx.Styles does NOT exist in moo 1.2, so we must use Fx.Morph or Fx.Tween)
		var fade_in = new Fx.Morph(el, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Cubic.easeOut, 
			     link: 'ignore'
		});
		
		//we will set a beginning value here
		//this is so that it gives the illusion of continuous motion from one direction, even after the first cycle of items
		fade_in.start({
		'opacity': 1
		});
		
	};
	//--------------- end slideMove ---------------------
	
	
	//fade in w/ staggered delays
	//showBox.delay(20, null, leftPane);
	showBox.delay(20,null, rightPane);
	//showBox.delay(1000,null, leftPic);
	
	

	
});