window.addEvent('domready', function() {
	
	/* ----------Config Vars----------- */
	var slideTimer = 5000;  //time between slides (1 second = 1000), a.k.a. the interval duration
	var transitionTime = 750; //transition time (1 second = 1000)
	var items = $$('.slide_item');  //Get array of elements for sliding
	var numItems = items.length;  //get number of slider items
	var numNav = new Array();  //create an array to hold our dynamically created number navigation
	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 isSliding = 0;
	var numNavHolder = $('num_nav');
	/* -------- end config vars -------- */
	
	
	
	//--------- setup stuff ---------//
	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', "476px");
		}
		
		//create numbered navigation boxes, and insert into the 'num_nav' ul)
		var numItem = new Element('li', {id: 'num'+index});
		var numLink = new Element('a', {
			'class': 'numbtn',
			'html': (index+1)
		});
		
		numItem.adopt(numLink);
		numNavHolder.adopt(numItem);
		numNav.push(numLink);
	});
	
	
	//highlight initial slide's number box
	var initNum = numNav[itemNum];
	origColor = initNum.getStyle('color');
	
	initNum.setStyles({
		'background-color': '#272727',
		'color': '#ffe400'
	});
	//--------- end setup stuff ---------//
	
	
	
	//---------------------------------------------------------------------------------------------------------
	//	function: slideMove
	//	description: moves the appropriate slides in/out of view
	//	parameters:
	//		int direction - specifies type of movement (0=back, 1=forward, 2=jump to frame
	//		int passedID (optional) - index value to jump to when direction = 2
	//---------------------------------------------------------------------------------------------------------
	var slideMove = function(direction, passedID){ 
		
		//get item to slide out
		var curItem = items[itemNum]; 
		var curNumItem =  numNav[itemNum];
		
		//change index based on value of 'direction' parameter
		if(direction == 1){
			if(itemNum < (numItems - 1)){
				itemNum++; 
			}
			else{
				itemNum = 0;
			}
		}
		else if(direction == 0){
			if(itemNum > 0){
				itemNum--; 
			}
			else{
				itemNum = (numItems - 1);
			}
		}
		else {
			if(itemNum != passedID){
				itemNum = passedID;
			}
		}
		
		//now get item to slide in using new index
		var newItem = items[itemNum];
		var newNumItem =  numNav[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.Cubic.easeOut, 
			     link: 'ignore',
			     
			     //click prevention functions
			     onStart: function(){
				    isSliding = 1;  //prevents extra clicks
			     },
			     
			     onComplete: function(){ 
					isSliding = 0;  //allow clicks again
				}
		});
		
		var item_out = new Fx.Morph(curItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Cubic.easeOut, 
			     link: 'ignore'
		});
		
		var num_in = new Fx.Morph(newNumItem, {
			     duration: 100, 
			     transition: Fx.Transitions.linear, 
			     link: 'ignore'
		});
		
		var num_out = new Fx.Morph(curNumItem, {
			     duration: 100, 
			     transition: Fx.Transitions.linear, 
			     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
		item_in.start({
		'left': [502, 0]
		});
		
		//no beginning values needed, since we always want to push the old item out to the left
		item_out.start({
		'left': '-502'
		});
		
		num_in.start({
			'background-color': '#272727' ,
			'color': '#ffe400'
		});
		
		num_out.start({
			'background-color': '#333333' ,
			'color': origColor
		});
		
	};
	//--------------- end slideMove ---------------------
		
	
	
	//call the slider function periodically
	var theTimer = slideMove.periodical(slideTimer, this, 1); 
	
	
	/* control buttons */
	if( nextBtn ){ nextBtn.addEvent('click', function(e){
		e.preventDefault();
		if(isSliding == 0){
			if(isPaused == 0){
				$clear(theTimer);
				theTimer = slideMove.periodical(slideTimer, this, 1);
			}
			slideMove(1);
		}
	});}
	
	if( prevBtn ){ prevBtn.addEvent('click', function(e){
		e.preventDefault();
		if(isSliding == 0){
			if(isPaused == 0){
				$clear(theTimer);
				
				// note: you could change the third parameter to 0 if you wanted to switch the direction here
				theTimer = slideMove.periodical(slideTimer, this, 1); 
			}				     
			slideMove(0);
		}
	}); }
	
	playBtn.addEvent('click', function(e){
		e.preventDefault();
		if(isSliding == 0){
			if(isPaused == 0){
				isPaused = 1;
				$clear(theTimer);
				this.getElement('a').set('html', 'play');
			}
			else{
				isPaused = 0;
				slideMove(1);
				theTimer = slideMove.periodical(slideTimer, this, 1); 
				this.getElement('a').set('html', 'pause');
			}
		}
	 });
	/*  end control buttons */
	
	
	/*  num_nav buttons */
	numNav.each(function(element, index) {
		var origColor = element.getStyle('color');
		
		element.addEvents({
			'click' : function(){
				if(isSliding == 0 && itemNum != index){
					if(isPaused == 0){
						$clear(theTimer);
						theTimer = slideMove.periodical(slideTimer, this, 1);
					}
					slideMove(2, index);
					//alert("index: " + index);
				}
			},
			'mouseenter' : function() {
				this.setStyle('cursor', 'pointer');
			}
		});
	
	});
	/*  end num_nav buttons */

	
});