var SlideShow = Class.create();
Object.extend(SlideShow.prototype, {

	initialize: function(element)
	{
		this.element = $(element);
		this.scrollAreaClassName = 'slideshow-scroll';
		this.childClassName = 'slideshow-content';
		this.totalWidth = 0;
		
		this.step = 10;
		this.delay = .03;
		
		this.slideShowChild = null;
		this.build();
	},
	
	build: function()
	{
		this.scrollChild = this.element.down('.' + this.scrollAreaClassName);
		this.scrollChild.setStyle({overflow: 'hidden'});
		
		this.slideShowChild = this.element.down('.' + this.childClassName);
		$A(this.slideShowChild.childElements()).each(function(element) {
			this.totalWidth += element.getWidth();
		}, this);
		
		if(this.totalWidth > this.element.getWidth()) {
			this.slideShowChild.setStyle({width: this.totalWidth + 'px', paddingLeft: '20px', paddingRight: '20px'});
			this.element.insert(this.createButton(1));
			this.element.insert(this.createButton(-1));
		}
	},
	
	createButton: function(direction)
	{
		var button = new Element('div')
			.addClassName('slideshow-button')
			.insert(
				new Element('a')
					.writeAttribute({href: '#'})
					.insert(direction == 1 ? '&gt' : '&lt')
			).setStyle({
				position: 'absolute',
				top: 0
			});
			
		if(direction == 1) {
			button.setStyle({right: 0});
		} else {
			button.setStyle({left: 0});
		}
		
		button
			.observe('mouseover', this.startSlide.bind(this, direction))
			.observe('mouseout', this.stopSlide.bind(this))
			.observe('click', function(e){e.stop()});
		
		return button;
	},
	
	startSlide: function(direction)
	{
		this.pe = new PeriodicalExecuter(this.slide.bind(this, direction), this.delay);
	},
	
	stopSlide: function()
	{
		this.pe.stop();
	},
	
	slide: function(direction)
	{	
		this.scrollChild.scrollLeft += this.step * direction;
	}

});