window.addEvent('domready', function() {
	
	/* ----------Config Vars----------- */
	var slideTimer = 5000000;  //time between slides (1 second = 1000), a.k.a. the interval duration
	var transitionTime = 1250; //transition time (1 second = 1000)
	var items = $$('.slide_item');  //Get array of elements for sliding
	var prevBtn = $$('.prevbtn');
	var playBtn = $$('.playbtn');
	var nextBtn = $$('.nextbtn');
	var itemNum = 0;  //initialize a variable to hold the current slide index
	var isPaused = 0;
	var newNum = 0;

	/* --------end config vars-------- */
	
	//Setup positions
	items.each(function(element, index) {
		
		//since the viewer obviously has javascript on, we can remove the 'first_item' class
		if(index == 0){
			element.removeClass('first_item');
			element.setStyle('left', "0");
		}
		else{
			element.setStyle('left', "1000px");
		}
	
	});
	
	var numItems = items.length;  //get number of slider items
	//end setup
	
	
	
	//Slider Stuff
	var slideForward = function(newNum){ 
	
		//get item to slide out
		var curItem = items[itemNum];  
		
		if (newNum != itemNum) {			
			if (newNum > -1) {
				itemNum = newNum;
			} else {
				//change index
				if(itemNum < (numItems - 1)){
					itemNum++; 
				} else {
					itemNum = 0;
				}
			}
				
			//now get item to slide in using new index
			var newItem = items[itemNum];
			
			//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 item_in = new Fx.Morph(newItem, {
					 duration: transitionTime, 
					 transition: Fx.Transitions.Quad.easeInOut, 
					 wait:false
			});
			
			var item_out = new Fx.Morph(curItem, {
					 duration: transitionTime, 
					 transition: Fx.Transitions.Quad.easeInOut, 
					 wait:false
			});
			
			//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
			item_in.start({
			'left': [1000, 0]
			});
			
			//no beginning values needed, since we always want to push the old item out to the left
			item_out.start({
			'left': '-1000'
			});

		}
		
	};
		
		
	var slideBackward = function(newNum){ 
	
		//get item to slide out
		var curItem = items[itemNum];  

		if (newNum != itemNum) {			
			if (newNum > -1) {
				itemNum = newNum;
			} else {
				//change index for reverse movement
				if(itemNum > 0){
					itemNum--; 
				}
				else{
					itemNum = (numItems - 1);
				}
			}
				
			//now get item to slide in using new index
			var newItem = items[itemNum];
			
			
			var item_in = new Fx.Morph(newItem, {
					 duration: transitionTime, 
					 transition: Fx.Transitions.Quad.easeInOut, 
					 wait:false
			});
			
			var item_out = new Fx.Morph(curItem, {
					 duration: transitionTime, 
					 transition: Fx.Transitions.Quad.easeInOut, 
					 wait:false
			});
			
			
			//we will set a beginning value here too, but this time to make it come from left to right
			item_in.start({
			'left': [-1000, 0]
			});
			
			//no beginning values needed
			item_out.start({
			'left': '1000'
			});

		}
		
	};
	//end slideBackward
		
		
	//call the slider function periodically
	var theTimer = slideForward.periodical(slideTimer, this); 
	
	nextBtn.addEvent('click', function(){
		if(isPaused == 0){
			$clear(theTimer);
			theTimer = slideForward.periodical(slideTimer);
		}
		slideForward();
	});
	
	prevBtn.addEvent('click', function(){
		if(isPaused == 0){
			$clear(theTimer);
			theTimer = slideForward.periodical(slideTimer);
		}				     
		slideBackward();
	});
	
	playBtn.addEvent('click', function(){
		if(isPaused == 0){
			isPaused = 1;
			$clear(theTimer);
			this.set('html', 'play');
		}
		else{
			isPaused = 0;
			slideForward();
			theTimer = slideForward.periodical(slideTimer); 
			this.set('html', 'pause');
		}
	 });



	var ProjectFiles = $$('.ProjectFiles');
	ProjectFiles.addEvent('click', function(){ slideBackward(0); });

	var PopperWallets = $$('.PopperWallets');
	PopperWallets.addEvent('click', function(){ slideBackward(1); });

	var ClipFiles = $$('.ClipFiles');
	ClipFiles.addEvent('click', function(){ slideBackward(2); });

	var CutFlushFolders = $$('.CutFlushFolders');
	CutFlushFolders.addEvent('click', function(){ slideBackward(3); });

	var DisplayBooks = $$('.DisplayBooks');
	DisplayBooks.addEvent('click', function(){ slideForward(4); });

	var LeverArchFiles = $$('.LeverArchFiles');
	LeverArchFiles.addEvent('click', function(){ slideForward(5); });

	var PunchedPockets = $$('.PunchedPockets');
	PunchedPockets.addEvent('click', function(){ slideForward(6); });

	var RingBinders = $$('.RingBinders');
	RingBinders.addEvent('click', function(){ slideForward(7); });





	var PlasticCups = $$('.PlasticCups');
	PlasticCups.addEvent('click', function(){ slideBackward(0); });

	var RefuseSacks = $$('.RefuseSacks');
	RefuseSacks.addEvent('click', function(){ slideBackward(1); });




	var SaveEnergy = $$('.SaveEnergy');
	SaveEnergy.addEvent('click', function(){ slideBackward(0); });

	var SaveEnergy1 = $$('.SaveEnergy1');
	SaveEnergy1.addEvent('click', function(){ slideBackward(1); });

	var AwarenessAndEducation = $$('.AwarenessAndEducation');
	AwarenessAndEducation.addEvent('click', function(){ slideForward(2); });



	$('ProductScroller').style.visibility = 'visible';


	
});