var ItemSlider = new Class({
	
	Implements: Options,
	
	moving: false,
	viewport: null,
	contents: null,
	
	options: {
			moveLeft: null,
			moveRight: null,
			moveUp: null,
			moveDown: null,
			direction: 'horizontal',
			distance: 0,
			duration: 500,
			transition: Fx.Transitions.Sine.easeOut,
			mousewheel: true,
			scrollTo: null,
			itemsPerRow: 1,
			itemsPerColumn: 1
		},

	initialize: function(viewport, contents, options){
        this.setOptions(options);
		this.viewport = ($type(viewport) == 'element' ? viewport : $(viewport));
		this.contents = ($type(contents) == 'element' ? contents : $(contents));
		
		this.viewport.setStyles({ position: 'relative', overflow: 'hidden' });
		this.contents.setStyles({ position: 'absolute', left: 0, top: 0 });
		
		this.contents.set('tween', {
			duration: this.options.duration,
			transition: this.options.transition,
			onComplete: function() {
				this.moving = false;
			}.bind(this)
		});
		
		// depending on direction
		if (this.options.direction == 'horizontal')
		{
			var width = 0;
			this.contents.getElements('*').each(function(elm) {
				width += (elm.getStyle('margin-left').toInt() + elm.getStyle('margin-right').toInt() + elm.getSize()['x']);
			});
			
			this.contents.setStyle('height', '100%');
			this.contents.setStyle('width', width / this.options.itemsPerColumn);
			
			if (this.options.distance == 0) {
				this.options.distance = this.viewport.getSize()['x'];
			}
			// when mousewheel enabled, bind to mousewheel event (custom mootools event) 
			if (this.options.mousewheel) {
				this.viewport.addEvent('mousewheel', function(event) {
					if (event.wheel < 0) {
						this.move_left();
					}
					if (event.wheel > 0) {
						this.move_right();
					}
					event.stop();
				}.bind(this));
			}
			
			// when initial object to scroll-to is set, center it
			if ($(this.options.scrollTo)) {
				var left   = this.viewport.getPosition()['x'] - $(this.options.scrollTo).getPosition()['x'];
				var center = $(this.options.scrollTo).getSize()['x'] / 2 - this.viewport.getSize()['x'] / 2;
				if (left - center < 0) this.contents.setStyle('left', left - center);
			}
		}
		else if (this.options.direction == 'vertical')
		{
			var height = 0;
			this.contents.getElements('*').each(function(elm) {
				height += (elm.getStyle('margin-top').toInt() + elm.getStyle('margin-bottom').toInt() + elm.getSize()['y']);
			});
			
			
			this.contents.setStyle('width', '100%');
			this.contents.setStyle('height', height / this.options.itemsPerRow);
			
			if (this.options.distance == 0) {
				this.options.distance = this.viewport.getSize()['y'];
			}
			
			// when mousewheel enabled, bind to mousewheel event (custom mootools event) 
			if (this.options.mousewheel) {
				this.viewport.addEvent('mousewheel', function(event) {
					if (event.wheel < 0) {
						this.move_up();
					}
					if (event.wheel > 0) {
						this.move_down();
					}
					event.stop();
				}.bind(this));
			}
			
			// when initial object to scroll-to is set, center it
			if ($(this.options.scrollTo)) {
				var top    = this.viewport.getPosition()['y'] - $(this.options.scrollTo).getPosition()['y'];
				var center = $(this.options.scrollTo).getSize()['y'] / 2 - this.viewport.getSize()['y'] / 2;
				if (top - center < 0) this.contents.setStyle('top', top - center);
			}
		}
		else if (this.options.direction == 'Diagonal')
		{
			alert('Diagonal scrollig not yet supported');
		}
		
		
		
		// if move left handler specified, add event
		if ($(this.options.moveLeft)) {
			$(this.options.moveLeft).addEvent('click', function(event) { this.move_left(); }.bind(this));
		}
		
		// if move right handler specified, add event
		if ($(this.options.moveRight)) {
			$(this.options.moveRight).addEvent('click', function(event) { this.move_right(); }.bind(this));
		}
		
		// if move left handler specified, add event
		if ($(this.options.moveUp)) {
			$(this.options.moveUp).addEvent('click', function(event) { this.move_up(); }.bind(this));
		}
		
		// if move right handler specified, add event
		if ($(this.options.moveDown)) {
			$(this.options.moveDown).addEvent('click', function(event) { this.move_down(); }.bind(this));
		}
    },
	
	move_left: function() {
		if (this.moving) return;
		if (this.contents.getStyle('left').toInt() <= -1 * this.contents.getStyle('width').toInt() + this.options.distance) return;
		
		this.moving = true;
		this.contents.tween('left', -1 * this.options.distance + this.contents.getStyle('left').toInt());
	},
	
	move_right: function() {
		if (this.moving) return;
		if (this.contents.getStyle('left').toInt() >= 0) return;
		
		this.moving = true;
		this.contents.tween('left', this.options.distance + this.contents.getStyle('left').toInt());
	},
	
	move_up: function() {
		if (this.moving) return;
		if (this.contents.getStyle('top').toInt() <= -1 * this.contents.getStyle('height').toInt() + this.options.distance) return;
		
		this.moving = true;
		this.contents.tween('top', -1 * this.options.distance + this.contents.getStyle('top').toInt());
	},
	
	move_down: function() {
		if (this.moving) return;
		if (this.contents.getStyle('top').toInt() >= 0) return;
		
		this.moving = true;
		this.contents.tween('top', this.options.distance + this.contents.getStyle('top').toInt());
	}
	
});