var Slider = new Class({
	Implements: [Options, Events],
	options: {
		container: 'scrollHolder',
		itemClass: 'scrollItem', 
		direction: 'h', // h = horizontal, v = vertical
		nextButton: 'undefined',
		previousButton: 'undefined'
	},
	container: null, // container holding the scrollable items
	parentSize: 0, // size of the containing element
	isScrolling: false,
	/**
	 * constructor
	 */
	initialize: function(options){
		this.setOptions(options);
		
		// bind next button
		if (this.options.nextButton != 'undefined') {
			$(this.options.nextButton).addEvent(
				'click',
				function(event) {
					if(this.isScrolling == false){
						this.nextItem();
					}
				}.bind(this)
			);
		}
		// bind previous button
		if (this.options.previousButton != 'undefined') {
			$(this.options.previousButton).addEvent(
				'click',
				function(event) {
					if(this.isScrolling == false){
						this.previousItem();
					}
				}.bind(this)
			);
		}
		
		// container holding the items
		this.container = $(this.options.container);
		// get the size of the parent container, this is our visible element
		var parentContainer = this.container.getParent();
		this.parentSize = this.options.direction == 'h' ? parentContainer.getStyle('width').toInt() : parentContainer.getStyle('height').toInt();
	},
	
	/**
	 * Scroll into the next item
	 */
	nextItem: function() {
		// need the options in a local var to access them within the $each
		var obj = this;
		var options = this.options;
		var iOffset = (options.direction == 'h' ? this.container.getStyle('left').toInt() : this.container.getStyle('top').toInt()) * -1;
		var iNext = 0;
		var iTotal = 0;
		$$('.'+this.options.itemClass).each(
			function(item) {
				// total size: element size + padding
				if (options.direction == 'h') {
					iItemSize = item.getStyle('width').toInt() + item.getStyle('padding-left').toInt() + item.getStyle('padding-right').toInt();
				} else {
					iItemSize = item.getStyle('height').toInt() + item.getStyle('padding-top').toInt() + item.getStyle('padding-bottom').toInt()
				}
				iTotal += iItemSize;
				if (iNext == 0 && iTotal >= iOffset) {
					iNext = iItemSize; // get the size of the next element to be moved off the screen
				}
			}
		);

		var myFx = new Fx.Tween(this.container, {
			onStart: function(){ obj.isScrolling = true; },
			onComplete: function(){ obj.isScrolling = false; }
		});		
		
		// move the container
		if (iOffset < (iTotal - this.parentSize)) {
			if (this.options.direction == 'h') {
				//this.container.tween('left', (iOffset + iNext) * -1);
				myFx.start('left',(iOffset + iNext) * -1);
			} else {
				//this.container.tween('top', (iOffset + iNext) * -1);
				myFx.start('top', (iOffset + iNext) * -1);
			}
		}
	},
	
	/**
	 * Scroll to the previous item
	 */
	previousItem: function() {
		// need the options in a local var to access them within the $each
		var options = this.options;
		var iOffset = (options.direction == 'h' ? this.container.getStyle('left').toInt() : this.container.getStyle('top').toInt()) * -1;
		// top of 0px means we're (still) at the start 
		if (iOffset == 0) {
			return;
		}
		
		var iPrevious = 0;
		var iTotal = 0;
		
		$$('.'+this.options.itemClass).each(
			function(item) {
				// total size: element size + padding
				if (options.direction == 'h') {
					iItemSize = item.getStyle('width').toInt() + item.getStyle('padding-left').toInt() + item.getStyle('padding-right').toInt();
				} else {
					iItemSize = item.getStyle('height').toInt() + item.getStyle('padding-top').toInt() + item.getStyle('padding-bottom').toInt()
				}
				iTotal += iItemSize;
				if (iTotal <= iOffset) {
					iPrevious = iItemSize; // get the size of the next element to be moved off the screen
				}
			}
		);

		// move the container
		//console.log(iOffset);
		//console.log(iTotal - this.parentSize);
		
		var obj = this;
		var myFx = new Fx.Tween(this.container, {
			onStart: function(){ obj.isScrolling = true; },
			onComplete: function(){ obj.isScrolling = false; }
		});	
		
		
		if (iOffset > 0) {
			if (this.options.direction == 'h') {
				//this.container.tween('left', (iOffset - iPrevious) * -1 );
				myFx.start('left',(iOffset - iPrevious) * -1);
			} else {
				//this.container.tween('top', (iOffset - iPrevious) * -1);
				myFx.start('top',(iOffset - iPrevious) * -1);
			}
		}
	},
	
	/**
	 * reset the offset, to be called when "items" content changes
	 */
	reset: function() {
		if (this.options.direction == 'h') {
			this.container.setStyle('left', 0);
		} else {
			this.container.setStyle('top', 0);
		}
	}
});
Slider.implement(new Events); // Implements addEvent(type, fn), fireEvent(type, [args], delay) and removeEvent(type, fn)
Slider.implement(new Options);// Implements setOptions(defaults, options)