window.addEvent('domready', function() {
	
	/* ----------Config Vars----------- */
	var slideTimer = 5000;  //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 numItems = items.length;  //get number of slider items
	var numNav = new Array();  //create an array to hold our dynamically created number navigation
	var playBtn = $('siSliderNavi');
	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', "550px");
		}
		
		//create numbered navigation boxes, and insert into the 'num_nav' ul)
		var numItem = new Element('span', {id: 'num'+index});
		var numLink = new Element('a', {
			'class': 'numbtn'
		});
        
	    var numImg = new Element('img', {
			'src': 'templates/images/slider/thumb/' +index+ '.jpg'
		});
		numLink.adopt(numImg);
		numItem.adopt(numLink);
		numNavHolder.adopt(numItem);
		numNav.push(numLink);
	});
	var numItemA = new Element('span', {id: 'num'});
	var numLinkA = new Element('a', {
	    'class': 'numbtn'
		});
	var numImgA = new Element('img', {
			'src': 'templates/images/slider/thumb/custom.jpg'
		});
	numLinkA.adopt(numImgA);
	numItemA.adopt(numLinkA);
	numNavHolder.adopt(numItemA);

	
	//highlight initial slide's number box
	var initNum = numNav[itemNum];
    /*
	origColor = initNum.getStyle('color');
	
	initNum.setStyles({
		'background-color': '#272727',
		'color': '#FF6600'
	});
    */
	//--------- 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': [550, 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': '-550',
		'opacity':[0] 
		});
		
		num_in.start({
            'opacity': '1'
		});
		num_out.start({
            'opacity': '0.3'
        });

	};
	//--------------- end slideMove ---------------------
		
	
	
	//call the slider function periodically
	var theTimer = slideMove.periodical(slideTimer, this, 1); 
	
	
	/* control buttons */

	playBtn.addEvent('click', function(){
		if(isSliding == 0){
			if(isPaused == 0){
				isPaused = 1;
				$clear(theTimer);
			    this.set('style', 'background: url(templates/images/slider_play_bg.gif) no-repeat top;');
			}
			else{
				isPaused = 0;
				slideMove(1);
				theTimer = slideMove.periodical(slideTimer, this, 1); 
			    this.set('style', 'background: url(templates/images/slider_pause_bg.gif) no-repeat top;');
			}
		}
	 });
	/*  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);*/
                        isPaused = 1;
                        playBtn.set('style', 'background: url(templates/images/slider_play_bg.gif) no-repeat top;');
					}
					slideMove(2, index);
					//alert("index: " + index);
				}
			},
			'mouseenter' : function() {
				this.setStyle('cursor', 'pointer');
			}
		});
	
	});
	/*  end num_nav buttons */

	
});