window.addEvent('domready', function() {
	
	/* ----------Config Vars----------- */
	var slideTimer = 5000;  //time between slides (1 second = 1000), a.k.a. the interval duration
	var transitionTime = 1000; //transition time (1 second = 1000)
	var heroImages = $('.heroImages');
	var items = $$('.heroImages');  //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;
	
	/* --------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', "0");
			element.setStyle('opacity', "0");
		}
	
	});
	
	var numItems = items.length;  //get number of slider items
	//end setup
	
	
	
	//Slider Stuff
	var slideForward = function(){ 
	
		//get item to slide out
		var curItem = items[itemNum];  
		
		//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, 
			     link:'ignore'
		});
		
		var item_out = new Fx.Morph(curItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeInOut, 
			     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': [880, 0],
		'opacity':[0,1]
		});
		
		//no beginning values needed, since we always want to push the old item out to the left
		item_out.start({
		//'left': '-880',
		'opacity':[0]
		});
		
	};
		
		
	var slideBackward = function(){ 
	
		//get item to slide out
		var curItem = items[itemNum];  
		
		//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, 
			     link:'ignore'
		});
		
		var item_out = new Fx.Morph(curItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeInOut, 
			     link:'ignore'
		});
		
		
		//we will set a beginning value here too, but this time to make it come from left to right
		item_in.start({
			'opacity':[0,1]
		});
		
		//no beginning values needed
		item_out.start({
			'opacity':[0]
		});
		
	};
	//end slideBackward
		
		
	//call the slider function periodically
	var theTimer = slideForward.periodical(slideTimer, this); 
	
	nextBtn.addEvent('click', function() {			  
		if(isPaused == 0){
			$clear(theTimer);
		}
		slideForward();
	});
	
	prevBtn.addEvent('click', function(){
		if(isPaused == 0){
			$clear(theTimer);
		}				     
		slideBackward();
	});
	
	playBtn.addEvent('click', function(){
		if(isPaused == 0){
			isPaused = 1;
			$clear(theTimer);
			document.getElementById('heroImagesPause').style.backgroundImage = 'url(/site_cms/assets/images_new/icons/play.png)';
			//this.set('html', '<div class="heroImagesPlay"></div>');
			//this.set()
		}
		else{
			isPaused = 0;
			slideForward();
			theTimer = slideForward.periodical(slideTimer); 
			document.getElementById('heroImagesPause').style.backgroundImage = 'url(/site_cms/assets/images_new/icons/pause.png)';
			//this.set('html', '<div class="heroImagesPause"></div>');
		}
	 });

	/* set up the arrow functionality */
	window.addEvent('keypress', function(e) {
		if( e.key.match(/^left$/) ) {
			slideBackward();
		}
		
		if( e.key.match(/^right$/) ) {
			slideForward();
		}
		
		if( e.key.match(/^space$/) ) {
			if(isPaused == 0){
				isPaused = 1;
				$clear(theTimer);
				this.set('html', '<div class="heroImagesPlay"></div>');
				this.set()
			}
			else{
				isPaused = 0;
				slideForward();
				theTimer = slideForward.periodical(slideTimer); 
				this.set('html', '<div class="heroImagesPause"></div>');
			}
		}
	});
	
	
});