window.addEvent('domready', function() {

	
	var playBtn = $('playbtn');
	
	if(playBtn) {
	
	/* ----------Config Vars----------- */
	var slideTimer = 10000;  //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 itemNum = 0;  //initialize a variable to hold the current slide index
	var isPaused = false;
	var slideWidth = 718; // TODO : Get the width of the slides dynamically - this is just lame
	
	/* --------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', slideWidth + "px");
		}
	
	});
	var numItems = items.length;  //get number of slider items
	// Add click events
	
	
	
	$$('#controls li a').addEvent('click', function(event) 
	{
	    if(!isPaused);
	        $clear(theTimer);
	    
	    event = new Event(event).stop();
	    
	    var selectedItem = this;
	    
	    if(selectedItem.href) {
	    
	        var toIndex = selectedItem.href.match(/#([0-9])/)[1];

	        //get item to slide out
		    var curItem = items[itemNum];  
    		
    		// Zero based...
		    var newItem = items[toIndex-1];

		    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
		    });
    		
	        if(itemNum < (toIndex-1)) { // Move forward
    	        
		        //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': [slideWidth, 0]
		        });
        		
		        //no beginning values needed, since we always want to push the old item out to the left
		        item_out.start({
		        'left': parseInt('-' + slideWidth)
		        });
	        } 
	        else if(itemNum > (toIndex-1)) { // Move backward
    	        
		        //we will set a beginning value here too, but this time to make it come from left to right
		        item_in.start({
		        'left': [-slideWidth, 0]
		        });
        		
        		//alert(slideWidth * (itemNum - toIndex));
        		
		        //no beginning values needed
		        item_out.start({
		        'left': "" + slideWidth
		        });
	        }
    	    
	        itemNum = toIndex-1;
    	    
    	    if(!isPaused);
	            theTimer = slideForward.periodical(slideTimer);
	        
	        setCurrentLink();	    
	    }
	});
	
	//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, 
			     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': [slideWidth, 0]
		});
		
		//no beginning values needed, since we always want to push the old item out to the left
		item_out.start({
		'left': '-' + slideWidth
		});
		
		setCurrentLink();
		
	};
		
		
	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, 
			     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': [-slideWidth, 0]
		});
		
		//no beginning values needed
		item_out.start({
		'left': slideWidth
		});
		
		setCurrentLink();
		
	};
	//end slideBackward
	
	var setCurrentLink = function() {
	    
	   $$('#controls li a[href]').each(function( o, x )
       {
            $(o).getParent().removeClass('selected');
       });
       
       var itemNo = parseInt(itemNum) + 1;
       var o = $$('#controls li a[href$="' + itemNo + '"]')[0];
       $(o).getParent().addClass('selected');
	};	
		
	setCurrentLink();
	
	//Call the slider function periodically
	var theTimer = slideForward.periodical(slideTimer, this); 
	
	
	
	playBtn.addEvent('click', function(){
		if(isPaused == false){
			isPaused = true;
			$clear(theTimer);
			this.set('html', 'play');
			this.set('class', 'play');
		}
		else{
			isPaused = false;
			slideForward();
			theTimer = slideForward.periodical(slideTimer); 
			this.set('html', 'pause');
			this.set('class', 'pause');
		}
	 });
	 
	 }
});