var Slideshow = new Class({
	initialize: function (element) {
		var items, slideHeight = 0,
		btnForward = new Element('img', {'alt': 'Forward', 'class': 'forward'}),
		btnBackward = new Element('img', {'alt': 'Backward', 'class': 'backward'}),
		lastItemRight;

		this.element     = element;
		this.slide       = element.getElement('.slide');
		this.viewport    = element.getElement('.viewport');
		this.btnBackward = btnBackward;
		this.btnForward  = btnForward;

		// get the height of the heighest item so we can make the viewport match it
		items = element.getElements('.small-item')
		items.each(function (item) {
			var height = item.getSize().y;
			if (height > slideHeight) slideHeight = height;
		});

		lastItemRight = items[items.length-1].getCoordinates(this.slide).right + 9;
		this.slide.setStyle('width', lastItemRight);
		this.slide.set('tween', {'property': 'margin-left', 'duration': 500});

		this.viewport.setStyle('height', slideHeight);

		// create the forward and backward buttons
		btnForward.set('src', '/images/btn-slideshow-forward-inactive.png');
		btnBackward.set('src', '/images/btn-slideshow-backward-inactive.png');

		btnBackward.setStyle('display', 'none');

		// add events to the buttons
		$$(btnForward, btnBackward).addEvents({
			'click': (function (evt) {
				var btn = $(evt.target);
				if (btn.hasClass('forward')) {
					this.moveSlide('forward');
				} else if (btn.hasClass('backward')) {
					this.moveSlide('backward');
				} else {
					throw new Error('Button clicked does not have class="forward" or class="backward"');
				}
			}).bind(this),
			'mouseover': function () {
				var btn = $(this), oldSrc = btn.get('src');
				btn.set('src', oldSrc.replace('inactive', 'active'))
			},
			'mouseout': function () {
				var btn = $(this), oldSrc = btn.get('src'), newSrc;
				btn.set('src', oldSrc.replace('active', 'inactive'))
			}
		});

		element.adopt(btnBackward, btnForward);
	},

	moveSlide: function (direction) {
		var offset = this.slide.getStyle('margin-left').toInt(),
		    viewportWidth = this.viewport.getSize().x,
			 newOffset;

		if (direction !== 'forward' && direction !== 'backward') {
			throw new Error('Slideshow::moveSlide Illegal value for direction');

		} else if (direction == 'forward') {
			this.btnBackward.setStyle('display', '');

			newOffset = offset - viewportWidth - 9;

			if (newOffset*-1 + viewportWidth + 9 >= this.slide.getSize().x) {
				this.btnForward.setStyle('display', 'none');
			}

		} else if (direction == 'backward') {
			this.btnForward.setStyle('display', '');

			newOffset = offset + viewportWidth + 9;

			if (newOffset > 0) newOffset = 0;

			if (newOffset === 0) {
				this.btnBackward.setStyle('display', 'none');
			}
		}

		this.slide.get('tween').start(newOffset);
	}
});

window.addEvent('domready', function () {
	$$('.slideshow').each(function (el) {
		new Slideshow(el);
	})
})