/* Turn property photo lists into a carousel */
window.addEvent('domready', function createPhotoCarousel() {
	var photoLists = $ES('#property_photos ul');
	var photoCarousel = $E('#property_photos .photos');
	var photoListWrapper = null;
	var currentListIndex = 0;
	var currentAnimation = null;
	var status = null;

	if(photoLists.length > 1) {
		// Position the photos groups absolutely
		photoListWrapper = new Element('div');
		photoCarousel.setStyles({
			overflow: 'hidden',
			position: 'relative',
			width: photoCarousel.offsetWidth
		});
		photoCarousel.adopt(photoListWrapper);
		var x = 0;
		photoLists.each(function(ul) {
			ul.setStyles({
				position: 'relative',
				display: 'inline-block'
			});
			x += photoCarousel.offsetWidth;
			photoListWrapper.adopt(ul);
		});
		photoListWrapper.setStyles({
			width: x,
			height: photoLists[0].offsetHeight,
			position: 'relative'
		});

		// Insert the buttons and status
		status = new Element('span', {'class': 'status'}).setText("");
		var updateStatus = function updateStatus() {
			var previousImageCount = 0;
			for (var i = 0; i < currentListIndex; i++ ) {
				previousImageCount += $ES('li', photoLists[i]).length;
			}
			var startImageIndex = previousImageCount + 1;
			var endImageIndex = startImageIndex + $ES('li', photoLists[currentListIndex]).length - 1;
			var totalImageCount = $ES('li', photoListWrapper).length;
			status.setText(startImageIndex + " - " + endImageIndex + " of " + totalImageCount + " images");
		};
		
		var previousButton = new Element('span', {
			'class': 'previous',
			events: {
				click: function previousButtonClicked() {
					if (currentListIndex > 0) {
						currentListIndex -= 1;
						if (currentAnimation) {
							currentAnimation.stop();
						}
						currentAnimation = new Fx.Style(photoListWrapper, 'left', {duration: 300});
						var left = 0;
						if (photoListWrapper.style.left != '') {
							left = photoListWrapper.style.left;
						}
						currentAnimation.start(parseInt(left), -photoLists[currentListIndex].offsetLeft);
						updateStatus();
					}
				}
			}
		});
		var previousImg = new Element('img', {
			'src': MEDIA_URL + 'img/previous_photo_button.png',
			'alt': 'Previous'});
		previousImg.injectInside(previousButton);

		var nextButton = new Element('span', {
			'class': 'next',
			events: {
				click: function nextButtonClicked() {
					if (currentListIndex < photoLists.length - 1) {
						currentListIndex += 1;
						if (currentAnimation) {
							currentAnimation.stop();
						}
						currentAnimation = new Fx.Style(photoListWrapper, 'left', {duration: 300});
						var left = 0;
						if (photoListWrapper.style.left != '') {
							left = photoListWrapper.style.left;
						}
						currentAnimation.start(parseInt(left), -photoLists[currentListIndex].offsetLeft);
						updateStatus();
					}
				}
			}
		});
		var nextImg = new Element('img', {
			'src': MEDIA_URL + 'img/next_photo_button.png',
			'alt': 'Next'});
		nextImg.injectInside(nextButton);
		
		var controls = new Element('div', {'class': 'controls'});
		controls.adopt(previousButton, nextButton, status);
		controls.injectAfter(photoCarousel);
		updateStatus();
	}
});