var imageIndex = 0;

function simpleImagePreview(element, image) {

	Event.observe(element, 'mouseover', function() {
		$('hoverBox').down().setAttribute('src', image);
		position = this.down().positionedOffset();
		position[0]+=this.down().getWidth()+50;
		$('hoverBox').setStyle({position:'absolute', left: position[0]+'px', top: position[1]+'px'});
		$('hoverBox').show();
	});
	Event.observe(element, 'mouseout', function() {
		$('hoverBox').hide();
	});

}

function advancedImagePreview(element, image) {

	imageIndex++;
	var item = new Element('img', { src:image,
								id:'prev'+imageIndex,
								style:'display:none'} );

	$('hoverBox').insert(item);

	Event.observe(element, 'mouseover', function() {
		hoverBox = $('hoverBox');

		hoverBox.childElements().invoke('hide')

		position = this.down().positionedOffset();
		position[0]+=this.down().getWidth()+25;

		hoverBox.setStyle({position:'absolute', left: position[0]+'px', top: position[1]+'px'});
		item.show();
		//hoverBox.show();
		new Effect.Appear(hoverBox);

	});

	Event.observe(element, 'mouseout', function() {
		$('hoverBox').hide();
	});

}