var SL_Slider = new Class({

	//implements
	Implements: [Options],	
	
	//variables setup
	numNav: new Array(),	//will store number nav elements (if used)
	isSliding: 0,				//flag for animation/click prevention
	direction: 1,				//flag for direction (forward/reverse)
	origColor: null,			//variable for holding original number's color (will probably revert to CSS for this)
	startFlag: false,			//'has started' flag

	//options
	options: {
	transitionTime: 1000, 	//Transition time (1 second = 1000)
	container: null,			//container element
	items:  null, 				//Array of elements for sliding
	itemNum: -1,				//Current item number
	numNavActive: false,	//Whether or not the number navigation will be used
	numNavHolder: null,	//Element that holds the number navigation
	prevBtn: null,				//Previous button element
	nextBtn: null				//Next button element
	},

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		
		//remove any scrollbar(s) on the container
		this.options.container.setStyle('overflow', "hidden"); 
		this.options.nextBtn.setStyle('opacity', 0);
		this.options.prevBtn.setStyle('opacity', 0);
		this.options.nextBtn.fade('in');
		
		//set up functionality for prev/nxt buttons				
		this.options.prevBtn.addEvents({
			'click': 	function() {
				this.prevSlide();
			}.bind(this),				
			'mouseenter' : function() {
				this.setStyle('cursor', 'pointer');
			}
			
		});
		this.options.nextBtn.addEvents({
			'click': 	function() {
				this.nextSlide();
			}.bind(this),				
			'mouseenter' : function() {
				this.setStyle('cursor', 'pointer');
			}
			
		});

		
		//setup items (a.k.a. slides) from list
		this.options.items.each(function(el, i){
			  //f.y.i.  el = the element, i = the index
			  
			  el.setStyle('position', "absolute");
			  
			  //get size of item and move that far beyond the container
			  var itemH = el.getSize().y;
			  var itemW = el.getSize().x;
			 //el.setStyle('top', (-1 * itemH));
			  el.setStyle('left', (-1 * itemW));
			  
			// -- Number nav setup
			if(this.options.numNavActive){
				
				//create numbered navigation boxes, and insert into the 'num_nav' ul)
				var numItem = new Element('li', {id: 'num'+i});
				var numLink = new Element('a', {
					'class': 'numbtn',
					'html': (i+1)
				});
				
				numItem.adopt(numLink);
				this.options.numNavHolder.adopt(numItem);
				this.numNav.push(numLink);
				
				numLink.set('morph', {duration: 100, transition: Fx.Transitions.linear, link: 'ignore'});
				
				numLink.addEvents({
					'click' : this.numPress.bindWithEvent(this, i),
					'mouseenter' : function() {
						this.setStyle('cursor', 'pointer');
					}
				});
				
				//set initial number to active state
				if(i == this.options.itemNum){
					var initNum = this.numNav[i];
					initNum.addClass('active');
				}
				
			}
			//end if num nav 'active'
		
		 }, this);
	
	},

	//startup method
	start: function() {
		this.slideIt();
		//this.slideIt(this.options.itemNum);
		//this.theTimer = this.slideIt.periodical(this.options.slideTimer, this, null);
		
	},


	slideIt: function(passedID) {
		
		var curItem = this.options.items[this.options.itemNum]; 
		
		if(this.options.numNavActive){
			var curNumItem =  this.numNav[this.options.itemNum];
		}
		
		//check for passedID presence
		if(passedID != null) {
			if(this.options.itemNum != passedID){
				if(this.options.itemNum > passedID) { 
					this.direction = 0; 
				} else { 
					this.direction = 1;
				}
				this.options.itemNum = passedID;
			}
		}
		else{
			this.changeIndex();	
		}
		
		//now get item to slide in using new index
		var newItem = this.options.items[this.options.itemNum];
		
		if(this.options.numNavActive){ 
			var newNumItem =  this.numNav[this.options.itemNum];
		}
		
		if(this.direction == 1){
			var curX = this.options.container.getSize().x;
			var newX = newItem.getSize().x;
		}
		else{
			var curX = (-1 * this.options.container.getSize().x);	
			var newX = (-1 * newItem.getSize().x);
		}		
		
		
		if((curItem != newItem)){
			
			if(this.direction == 0){
				if(this.options.nextBtn.getStyle('opacity') < 1) { 
					this.options.nextBtn.fade('in');
				}
			}
			else{
				if(this.options.prevBtn.getStyle('opacity') < 1) { 
					this.options.prevBtn.fade('in');
				}
			}
			
			if(this.options.itemNum == ((this.options.items.length) - 1)){
				this.options.nextBtn.fade('out');
			}
			
			if(this.options.itemNum == 0){
				this.options.prevBtn.fade('out');
			}
			
			this.startFlag = true;
			
			//set up our animation stylings
			var item_in = new Fx.Morph(newItem, {
			     duration: this.options.transitionTime, 
			     transition: 'cubic:inOut', 
			     link: 'ignore',
			     
			     onStart: this.toggleSlidingOn.create({
					bind: this
				}),
			     
			     onComplete: this.toggleSlidingOff.create({
					bind: this
				})
			     
			});
			
			//add active number's highlight
			if(this.options.numNavActive){
				newNumItem.addClass('active');
			}
			
			item_in.start({
				'left' : [newX, 0]
			});
			
			if(curItem){
				var item_out = new Fx.Morph(curItem, {
					     duration: this.options.transitionTime, 
					     transition: 'cubic:inOut', 
					     link: 'ignore'
				});
				
				item_out.start({
					'left' : [(curX)]
				});
				
				if(this.options.numNavActive){
					curNumItem.removeClass('active');
				}
				
			}
			//end if(curItem)
			
		}
	
	},
	
	//--------------------------------------------------------------------------------------------------------
	//supplementary functions  (mini-functions)
	//--------------------------------------------------------------------------------------------------------	
	changeIndex: function() {
		var numItems = this.options.items.length;  //get number of slider items
		
		//change index based on value of 'direction' parameter
		if(this.direction == 1){
			if(this.options.itemNum < (numItems - 1)){
				this.options.itemNum++; 
			}
			else{
				//this.options.itemNum = 0;
				
			}
		}
		else if(this.direction == 0){
			if(this.options.itemNum > 0){
				this.options.itemNum--; 
			}
			else{
				//this.options.itemNum = (numItems - 1);
			}
		}	
		
	},
	
	numPress: function (e, theIndex) {
		
		if((this.isSliding == 0) && (this.options.itemNum != theIndex)){
			
			this.slideIt(theIndex);
		}
	
	},
	
	prevSlide: function () {
		if(this.isSliding == 0){
			this.direction = 0;
			this.slideIt();
		}
	},
	
	nextSlide: function () {
		if(this.isSliding == 0){
			this.direction = 1;
			this.slideIt();
		}
	},
	
	toggleSlidingOn: function () {
		this.isSliding = 1;  //prevents extra clicks
	},
	
	toggleSlidingOff: function () {
		this.isSliding = 0;  //prevents extra clicks
	}
	
	//------------------------  end supp. functions -----------------------------------------//
	
	

});