Blog = {
	onImageContainerClick: function(imageContainer) {
		var firstImage = imageContainer.getElement('img');
		var imageSize = firstImage.getSize();
		var innerContainer = imageContainer.getElement('.inner-container');
		
		var currentPos = parseInt(innerContainer.getStyle('left'));
		var newPos = (currentPos-imageSize.x);

		if (newPos <= -(innerContainer.getElements('img').length*imageSize.x)) {
			newPos = 0;
		}
		
		var transitionFx = new Fx.Morph(innerContainer, { duration: 650, transition: Fx.Transitions.Quint.easeInOut });
		transitionFx.start({
			'left': newPos+'px'
		});
	},
	
	processImage: function(args) {
		var element = args.element;
		var firstImage = args.firstImage;
		var imageContainer = new Element('div');
		imageContainer.inject(firstImage, 'after');
		var images = element.getElements('img');

		if (images.length > 1) {			
			var imageSize = firstImage.getSize();
			imageContainer.setStyles({
				'width': imageSize.x+'px',
				'height': imageSize.y+'px',
				'position': 'relative',
				'overflow': 'hidden',
				'cursor': 'pointer'
			});

			var innerContainer = new Element('div', {
				'class': 'inner-container'
			});
			innerContainer.setStyles({
				'position': 'absolute',
				'top': 0,
				'left': 0
			});

			innerContainer.inject(imageContainer);

			var containerWidth = 0;
			
			var pos = 0;
			
			for (var i=0; i<images.length; i++) {
				images[i].setStyles({
					'position': 'absolute',
					'left': pos+'px'
				});
				
				pos += imageSize.x;
				
				var imageParent = images[i].getParent();

				images[i].inject(innerContainer);
				images[i].set('alt', '');
				images[i].set('title', '');
				
				var children = imageParent.getChildren();
				var childCount = children.length;
				if (childCount == 0) imageParent.dispose();
			}
			
			innerContainer.setStyle('width', pos+'px');

			imageContainer.addEvent('click', this.onImageContainerClick.bind(this, imageContainer));
			imageContainer.addEvent('mouseover', function(event) {
				var tooltip = new Element('div', {
					'html': 'click for next image',
					'class': 'tooltip'
				});
				tooltip.inject($$('body')[0]);
				tooltip.setStyles({
					'position': 'absolute',
					'left': (event.page.x+15)+'px',
					'top': (event.page.y)+'px'
				});
				
				var moveHandler = function(event, tooltip) {
					tooltip.setStyles({
						'position': 'absolute',
						'left': (event.page.x+15)+'px',
						'top': (event.page.y)+'px'
					});
				}.bindWithEvent(this, tooltip);
				imageContainer.addEvent('mousemove', moveHandler);
				
				this.addEvent('mouseout', function(tooltip, moveHandler) {
					imageContainer.removeEvent('mousemove', moveHandler);
					tooltip.dispose();
				}.bind(this, tooltip, moveHandler));
			}.bindWithEvent(imageContainer));
		}
	},

	initialize: function() {
		$$('body')[0].getElements('.post').each(function(element) {
			var firstImage = element.getElement('img');
			
			if (typeof firstImage.naturalWidth == 'undefined' || firstImage.naturalWidth == 0) {
				firstImage.addEvent('load', this.processImage.bind(this, {element: element, firstImage: firstImage}));
			} else {
				this.processImage({element: element, firstImage: firstImage});
			}
			
		}.bind(this));		
	}
};

window.addEvent('domready', Blog.initialize.bind(Blog));