/*
* developed by Balazs Suhajda @ Valtech.dk
*/

var kum = kum || {};
kum.gallery = (function() {
	//	config
	var itemSelector = '.gallery-list-item';

	var $items,
		$clone;
	var init = function() {
		$items = $(itemSelector);
		if ($items.length < 1) return;
		$items.mouseover(function() {
			//	remove last clone
			if ($('body >' + itemSelector).length > 0) $('body >' + itemSelector).remove();
			var $el = $(this);
			//	get element position
			var itemPos = $el.offset();

			
			//	create clone
			$clone = $el.clone();
			$('body').append($clone);
			//	position clone and make interactive
			$clone
				.css({
					position: 'absolute',
					top: itemPos.top,
					left: itemPos.left
				})
				.hover(function() {
					$(this).show();
				}, function() {
					$(this).unbind().remove();
				});
			//	fade in frame
			if ('\v' == 'v')
				$clone
					.find('.item-content')
					.show()
			else $clone
					.find('.item-content')
					.fadeTo(0, 0)
					.show()
					.fadeTo(300, 1);
			//	in case hover hangs out of viewport, change class to diplay text left of img
			if ($(window).width() < itemPos.left + $clone.find('.item-content').width())
				$clone.find('.item-content').addClass('item-content-left');
		});
	}

	return {
		init: init
	};
})();

$(window).load(kum.gallery.init);