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', "602px");
		}

		//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);
	});

    //hide the previous button at the start
    prevBtn.setStyles({	'display': 'none' });

	//highlight initial slide's number box
	var initNum = numNav[itemNum];
	origColor = initNum.getStyle('color');

	initNum.setStyles({
		'background-color': '#0a56a8',
		'color': '#ffffff'
	});

	//--------- 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;
			}
		}

        if (itemNum == 0) {
            prevBtn.setStyles({	'display': 'none' });
            
        } else { 
            prevBtn.setStyles({	'display': 'block' });
        }
        

		//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': [602, 0]
		});

		//no beginning values needed, since we always want to push the old item out to the left
		item_out.start({
		'left': '-602'
		});

		num_in.start({
			'background-color': '#0a56a8' ,
			'color': '#ffffff'
		});

		num_out.start({
			'background-color': '#ffffff' ,
			'color': origColor
		});

	};
	//--------------- end slideMove ---------------------



	//call the slider function periodically
	//var theTimer = slideMove.periodical(slideTimer, this, 1);


	/* control buttons */
	nextBtn.addEvent('click', function(){
		if(isSliding == 0){
			/*if(isPaused == 0){
				$clear(theTimer);
				theTimer = slideMove.periodical(slideTimer, this, 1);
			}*/
			slideMove(1);
		}
	});

	prevBtn.addEvent('click', function(){
		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(){
		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 */


});