var Wave = new Class({

	initialize: function(slideDiv, delay) {
		this.slideDiv = slideDiv;
		this.delay = delay;	

		this.prepareChildren();
		this.slideChild.periodical(this.delay,this);
	},
	
	prepareChildren: function() {
		
		this.container = $(this.slideDiv);
		var coordinates = this.container.getCoordinates();
		this.children = this.container.getChildren();
		
		this.children.each(function(child) {
			child.set('styles',{
				'position': 'absolute',
				'width': coordinates.width,
				'height': '0px'
			});
		});
	},
	
	slideChild: function() {
		this.container = $(this.slideDiv);
	
		var currentChild = $$('.slideActive')[0];
		if(currentChild.getNext()) var nextChild = currentChild.getNext();
		else var nextChild = this.container.getFirst();
		
		currentChild.set('styles', {
			'z-index': 0
		});
		
		nextChild.set('opacity',0);
		nextChild.set('styles', {
			'overflow': 'visible',
			'z-index': '+1',
			'height': '281px'
		});
		
		new Fx.Tween(nextChild,{duration: 2000, onComplete: function() {
			currentChild.set('styles', {
				'overflow': 'hidden',
				'height': '0px'
			});
			nextChild.set('class','slideActive');
			currentChild.set('class','slideInactive');
		}}).start('opacity',1);
	
	}

});

/*

	JavaScript
	
	1 Create array with .waveSlide children
	2 Get .waveSlide position and size
	3 Make the children position Absolute and set position and size (dynamic positioning)
	4 Set the next element to opacity 0 and put it over the current element (z-index +1)
	5 Fade the next elements opacity to 1
	6 set slideInactive on the current element and slideActive on the next element (the second element now becomes the "current" element)
	7 repeat 4
	
	
	HTML
	
	<div class='waveSlide'>
	
		<div class='slideActive'> display: visible, current element
		
		</div>
		<div class='slideInactive'> display: hidden, next element
			
		</div>
		<div class='slideInactive'> display: hidden
		
		</div>
		<div class='slideInactive'> display: hidden
		
		</div>
	
	</div>


*/