var slideShow = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		slideTimer: 7000,
		transitionTime: 1500,
		width: 500,
		height: 200,
		showControls:true,
		controlHtml: new Array('>', '>', '>', '>', '>', '>', '>', '>', '>', '>', '>', '>', '>', '>', '>', '>'),
		classShow:'showing'
	},
	
	itemNum:0,
	nextItem:null,  
	numItems:0,
	controls: new Array(),
		
	//initialization
	initialize: function(container, el, options) {

		//set options
		this.setOptions(options);
		
		this.container = $(container);
		
		var els = $$(el);
				
		els.each(function(e, index) {
			
			var size = e.getSize();
			
			//since the viewer obviously has javascript on, we can remove the \'first_item\' class
			if(index == 0){
				e.removeClass('first_item');
				e.setStyle('left', "0");
			}else{
				//e.setStyle('left', size.x);
				e.setStyle('opacity', "0");
			}
			
			this.setUpElement(e);
		
		},this);
		
		this.setUpContainer();
		
		this.els = els;
		this.numItems = this.els.length;
	
		// initialise slide controls, if they exist.
		if (this.options.showControls) {
			
			this.scCount = this.numItems;
			
			var controlers = new Element('div', {id:container+'_controls'});
			var ul = new Element('ul');
			for(var i = 0; i < this.scCount; i++) {
				var li = new Element('li');
				var a  = new Element('a', {href: 'javascript:void(0);',
											id: container+'_control_'+i,
											html:this.options.controlHtml[i],
											events:{'click':function() {
															this.slider.moveTo(this.i);
														}
													}
											});
				a.i = i;
				a.slider = this;
				
				this.controls[i] = a;
				
				a.inject(li);
				li.inject(ul);
			}
			
			ul.inject(controlers);
			
			controlers.inject(this.container, 'after');

			this.controls[0].addClass(this.options.classShow);
		
		} else {
			this.scCount = 0;
		}
		
	},
	
	setOptions: function(options) {
		for(var i in options) {
			this.options[i] = options[i];
		}
	},
	
	setUpContainer: function() {
		var styles = {
				left: 0,
				overflow: 'hidden',
				position: 'relative',
				top: 0,
				width: this.options.width + 'px',
				height: this.options.height
		};
		
		this.container.setStyles(styles);
		
	},
	
	setUpElement: function(el) {
		var styles = {
				position: 'absolute',
				top: 0,
				width: this.options.width+'px'
		};
		
		el.setStyles(styles);
	},
	
	slideIt: function(){ 
			
		//get item to slide out
		var curItem = this.els[this.itemNum];  
		
		//change index
		if(this.nextItem != null) {
			this.itemNum = this.nextItem;
			this.nextItem = null;
		} else {
			if(this.itemNum < (this.numItems - 1)){
				this.itemNum++; 
			}else{
				this.itemNum = 0;
			}
		}
		
		//now get item to slide in using new index
		var newItem = this.els[this.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: this.options.transitionTime, 
				 transition: Fx.Transitions.Quint.easeInOut, 
				 wait:false
		});
		
		var item_out = new Fx.Morph(curItem, {
				 duration: this.options.transitionTime, 
				 transition: Fx.Transitions.Quint.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': [this.options.width, 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': '-'+this.options.width,
		'opacity':[0]
		});
		
		if (this.options.showControls) {
			for(var i = 0; i< this.controls.length; i++) {
				if(i == this.itemNum) {
					this.controls[i].addClass(this.options.classShow);
				}else{
					this.controls[i].removeClass(this.options.classShow);
				}
			}
		}
		
	},
	
	stop: function() {
		clearInterval(this.slideId);
	},
	
	moveTo:function(id) {
		if(id != this.itemNum) {
			this.stop();
			this.nextItem = (id);
			this.slideIt();
			this.start();
		}
	}, 
	
	start: function() {
		this.slideId = this.slideIt.periodical(this.options.slideTimer, this); 
	}
	
});