var Rotator = new Class({

	/* initialize needed methods
	 ======================================================================= */
	initialize: function() {
		var self = this;
		
		this.rotatorImages = $$('#rotator-images li');
		this.rotatorNav = $$('#rotator-nav li');
		
		this.rotatorImages.each(function(image, index){
			
			image.addEvents({
				mouseenter: function(){
					self.rotatorImages.getElement('em').setStyle('display', 'none');
					this.getElement('em').setStyle('display', 'block');
					
					self.rotatorImages.removeClass('active');
					this.addClass('active');
					
					self.rotatorImages.fade('hide');
					self.rotatorImages[index].fade('show');
				}
			});
			
			// image.getElement('span').set('styles', {
			// 	opacity: 0.7
			// });
			// 
			// if (image.hasClass('active')){
			// 	this.rotatorImages.removeClass('active');
			// 	image.addClass('active');
			// 	image.fade('show');
			// } else {
			// 	image.fade('hide');
			// }
		}, this);
		
		this.rotatorNav.each(function(nav, index){
			nav.addEvents({
				mouseenter: function(){
					self.rotatorNav.getElement('em').setStyle('display', 'none');
					this.getElement('em').setStyle('display', 'block');
					
					self.rotatorNav.removeClass('active');
					this.addClass('active');
					
					self.rotatorImages.fade('out');
					self.rotatorImages[index].fade('in');
				}
			});
		});
	},

	/* attach events and add the initially fired methods
	 ======================================================================= */
	start: function() {	
	}
});

window.addEvents({
	load: function(){
		new Rotator();
	}
})