/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Initializes sliding for s2 teaserboxes
	
	@package: tx_s2teaserbox
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
(function($) {
	window.addEvent('domready', function() {
		var currentIndex	= 0,
			images			= $$("div.s2-teaserbox-slider-item"),
			container		= $('s2-teaserbox-slider-wrap'),
			effect			= 'slide',
			timer			= ($('s2-teaserbox-slider-wrap').get('class').replace(/.*s2-teaserbox-slider-interval-([0-9]+).*/, "$1") > 0 ? $('s2-teaserbox-slider-wrap').get('class').replace(/.*s2-teaserbox-slider-interval-([0-9]+).*/, "$1") * 1000 : 5000),
			clickLock		= false,
			slideInterval	= null,
			controls		= $$("#s2_teaserbox_handles_items_number a");		
		
		var effects = {
			fade: function(image) {
				image.fade('hide');
				image.fade('in');
			},
			slide: function(image, mode) {
				var startX;
				switch (mode) {
					case 'backward':
						startX = container.getSize().x*-1;
						break;
					case 'forward':
					default:
						startX = container.getSize().x;
						break;
				}
				
				var slideComplete = function() {
					clickLock = false;
					this.removeEvent('complete', slideComplete);
					container.fireEvent('s2:rotator:effect:complete', arguments);
				}
				
				image.get('tween').addEvent('complete', slideComplete);
				
				image.setStyle('left', startX);
				image.tween('left', 0);
				
				container.fireEvent('s2:rotator:effect:start', arguments);
			}
		};
		
		var slide = function(mode) {
			var previousImage = images[currentIndex];
			
			switch (mode) {
				case 'forward':
					currentIndex++;
					if (currentIndex > images.length-1) currentIndex = 0;
					break;
				case 'backward':
					currentIndex--;
					if (currentIndex < 0) currentIndex = images.length-1;
					break;
				default:
					currentIndex = parseInt(mode, 10);
					break;
			}
			
			
			controls.removeClass('active');
			controls[currentIndex].addClass('active');
			//console.log(currentIndex);
			
			var currentImage	= images[currentIndex],
				highestZIndex	= 0;
				
			clickLock = true;
			
			var action = function() {
				if (effect in effects) effects[effect](currentImage, mode);
				else effects.fade(currentImage);
				images.each(function(image) {
					var zIndex = parseInt(image.getStyle('z-index'), 10);
					if (zIndex > highestZIndex) highestZIndex = zIndex;
				});
				
				currentImage.setStyle('z-index', highestZIndex+1);
			}
			action();
		}
	
		// Set InitStyles
		container.setStyles({
			overflow: 'hidden',
			position: 'relative'
			//width: images[0].getSize().x,
			//height: images[0].getSize().y
		});
		
		
		images.each(function(image, i) {
			image.setStyles({
				position: 'absolute',
				left: 0,
				top: 0,
				'z-index': images.length - i
			});
			
			image.set('tween', {duration: 700, transition: Fx.Transitions.Quart.easeInOut});
		});
		
		controls.addEvent('click', function(e) {
			e = new Event(e).stop();
			slide(this.get('rel'));
			controls.removeClass('active');
			this.addClass('active');
		});
		
		
		
		var setupSlideInterval = function() {
			if (slideInterval !== null) return;
			slideInterval = slide.periodical(timer, this, ['forward']);
		}
		
		var clearSlideInterval = function() {
			clearInterval(slideInterval);
			slideInterval = null;
		}
		
		setupSlideInterval();
		
		container.addEvents({
			's2:rotator:effect:start': clearSlideInterval,
			's2:rotator:effect:complete': setupSlideInterval,
			'mouseenter': clearSlideInterval,
			'mouseleave': setupSlideInterval
		});
	});
})(document.id);