/**
* An ugly (and working!) tween class..
*
* @author Latchezar Tzvetkoff
*/
Tween = Class.create({
	/* properties */
	'maxLeft': null,
	'element': null,
	'container': null,
	'buttonLeft': null,
	'buttonRight': null,
	'scrollDelta': null,
	/* methods *//* constructor */
	'initialize': function(element, buttonLeft, buttonRight, scrollDelta, elementWidth, elementHeight, childTag) {
		element = $(element);
		if (!element) {
			return null;
		}

		this.element = element;

		this.element.select(childTag || 'li').each((function(elm) {
			this.maxLeft += elm.getDimensions().width;
		}).bind(this));

		if (!elementWidth) {
			elementWidth = this.element.getDimensions().width;
		}

		if (!elementHeight) {
			elementHeight = this.element.getDimensions().height;
		}

		this.element.style.width = this.maxLeft + 'px';
		this.maxLeft = this.maxLeft - elementWidth;

		this.container = Element.wrap(this.element, 'div', {'class': 'tween'});
		this.container.setStyle({
			'overflow': 'hidden',
			'width': (elementWidth - (parseInt(this.element.getStyle('paddingLeft')) + parseInt(this.element.getStyle('paddingRight'))) - 2) + 'px',
			//'height': elementHeight + 'px',
			'marginLeft': (parseInt(this.element.getStyle('marginLeft')) + parseInt(this.element.getStyle('paddingLeft'))) + 'px',
			'marginRight': (parseInt(this.element.getStyle('marginRight')) + parseInt(this.element.getStyle('paddingRight'))) + 'px',
			'marginTop': (parseInt(this.element.getStyle('marginTop')) + parseInt(this.element.getStyle('paddingTop'))) + 'px',
			'marginBottom': (parseInt(this.element.getStyle('marginBottom')) + parseInt(this.element.getStyle('paddingBottom'))) + 'px',
			'paddingLeft': 0,
			'paddingRight': 0,
			'paddingTop': 0,
			'paddingBottom': 0
		});

		this.element.setStyle({
			//'height': elementHeight + 'px',
			'margin': 0,
			'padding': 0
		});

		this.buttonLeft = Object.isElement(buttonLeft) ? buttonLeft : $(buttonLeft);
		if (this.buttonLeft) {
			this.buttonLeft.observe('click', (function() {
				this.scrollLeft();
			}).bind(this));
		}

		this.buttonRight = Object.isElement(buttonRight) ? buttonRight : $(buttonRight);
		if (this.buttonRight) {
			this.buttonRight.observe('click', (function() {
				this.scrollRight();
			}).bind(this));
		}

		this.scrollDelta = scrollDelta;
	},
	/* methods *//* scroll-to-left effect */
	'scrollLeft': function() {
		var left = parseInt(this.element.style.marginLeft || 0);
		if (left < 0) {
			new Effect.MoveHorizontal(this.element, {
				'x': +this.scrollDelta
			});
		}
	},
	/* methods *//* scroll-to-right effect */
	'scrollRight': function() {
		var left = Math.abs(parseInt(this.element.style.marginLeft || 0));
		if (left < this.maxLeft) {
			new Effect.MoveHorizontal(this.element, {
				'x': -this.scrollDelta
			});
		}
	}
});

/**
* A clone of script.aculo.us'es Effect.Move using margin-left for positioning
*
* A special note on margin-left positioning is that it doesn't show the overflow
* of the image container which gets shown when position is set to absolute/relative
* Useful for the exact situation of tweening UL with LI's inside
*
* @author Latchezar Tzvetkoff
*/
Effect.MoveHorizontal = Class.create(Effect.Base, {
	'initialize': function(element) {
		this.element = $(element);
		this.descriptor = this.element.inspect().replace(' id="', '#').replace(' class="', '.').replace(' ', '.').replace(/[\"<>]/g, '');
		if (!this.element || Effect.MoveHorizontal.running[this.descriptor]) {
			return;
		}

		var options = Object.extend({
			'x': 0,
			'duration': 0.66,
			'afterFinish': (function() {
				Effect.MoveHorizontal.running[this.descriptor] = null;
			}).bind(this)
		}, arguments[1] || {});

		Effect.MoveHorizontal.running[this.descriptor] = true;
		this.start(options);
	},
	'setup': function() {
		this.originalLeft = parseFloat(this.element.getStyle('marginLeft') || '0');
	},
	'update': function(position) {
		var x = Math.round(this.options.x * position + this.originalLeft);
		this.element.style.marginLeft = x + 'px';
	}
});

/* Effect.MoveHorizontal class properties (e.g. static properties) */
Object.extend(Effect.MoveHorizontal, {
	'running': []
});

/* initialize tween on load (it won't bother if no element with [id='tween']) */
Event.observe(window, 'load', function() {
	window.myTween = new Tween('tween', 'tween_lft', 'tween_rgt', 235, null, 205);
});