window.addEvent('domready', function(){
	
	$$('.tx-s2slidegallery-gallery').each(function(gallery){
		
		var handlesOpacity = 1;
		var counterDelimiter = '/';
		var interval = gallery.getProperty('class').match(/tx-s2slidegallery-interval-(\d+)/)[1] || 5000;
		var classNames = {
				caption:	'tx-s2slidegallery-gallery-image-caption',
				text:		'text',
				counter:	'counter',
				link:		'link'
		}

		var mask = gallery.getParent();
		var caption = mask.getElement('.'+classNames.caption) || new Element('div', {
			'class': classNames.caption,
			'styles': {
				'width': mask.getSize().x,
				'position': 'relative'
			}
		}).inject(mask, 'top');
		
		var captionText = caption.getElement('.'+classNames.text) || new Element('span', {
			'class': classNames.text,
			'styles': {
				'position': 'absolute',
				'z-index': 9000
			}
		}).inject(caption);
		
		var captionCounter = caption.getElement('.'+classNames.counter) || new Element('span', {
			'class': classNames.counter,
			'styles': {
				'position': 'absolute',
				'z-index': 9000
			}
		}).inject(caption);
		
		var captionBackground = new Element('span', {
			'class': 'background',
			'styles': {
				'display': 'block',
				'position': 'absolute',
				'top': 0,
				'width': caption.getSize().x,
				'height': caption.getSize().y
			}
		}).inject(caption);
		
		var slideItems = gallery.getChildren('div.tx-s2slidegallery-gallery-image');
		
		var slide = new noobSlide({
			box: gallery,
			items: slideItems,
			size: gallery.getSize().x,
			autoPlay: gallery.hasClass('tx-s2slidegallery-autoplay'),
			interval: interval,
			onWalk: function(currentItem, currentHandle){
				var currentImage = currentItem.getElements('img');
				captionText.set('html', currentImage.getProperty('title'))
				captionCounter.set('html', (this.currentIndex+1)+counterDelimiter+slideItems.length)
				if (currentItem.getElement('a') && caption.getElement('.'+classNames.link)) {
					caption.getElement('.'+classNames.link).setProperty('href', currentItem.getElement('a').getProperty('href'))
				}
				if(mask.getElement('.thumbnail')){
					mask.getElements('.thumbnail').removeClass('thumbnail-active');
					mask.getElements('.thumbnail')[this.currentIndex].addClass('thumbnail-active');
				}
			}
		});
		
		var previous = new Element('div', {
			'class': 'tx-s2slidegallery-handle tx-s2slidegallery-handle-previous',
			'events': {
				'click': function(){
					slide.previous(true);
				}
			},
			'styles': {
				'position': 'absolute',
				'z-index': 9000,
				'left': 0
			}
		}).inject(mask, 'top');
		previous.setStyle('top', (mask.getSize().y/2)-(previous.getSize().y/2));
		
		var next = new Element('div', {
			'class': 'tx-s2slidegallery-handle tx-s2slidegallery-handle-next',
			'events': {
				'click': function(e){
					slide.next(true);
				}
			},
			'styles': {
				'position': 'absolute',
				'z-index': 9000,
				'right': 0
			}
		}).inject(mask, 'top');
		next.setStyle('top', (mask.getSize().y/2)-(next.getSize().y/2));
		
		var handles = [previous, next];
		
		function fadeHandles(mode){
			handles.each(function(handle){
				handle.fade(mode);
			});
		};
		fadeHandles('hide');
		
		mask.getElements('.thumbnail').each(function(thumbnail, i){
			thumbnail.addEvent('click', function(e){
				slide.autoPlay = false;
				slide.walk(i, true);
			});
		})
		
		mask.addEvents({
			'mouseenter': function(e){
				fadeHandles(handlesOpacity);
			},
			'mouseleave': function(e){
				fadeHandles('out');
			}
		});
		
	});
	
});