Event.observe(window, 'load', function() {

	var imageRotators = document.getElementsByClassName('module-image-inner');
	for(var i = 0; i < imageRotators.length; i++) {
	
		if(imageRotators[i].getElementsByTagName('li').length > 1) {
			new ImageRotator(imageRotators[i], {
							left_button: '.module-image-navigation-left', 
							right_button: '.module-image-navigation-right',
							overlay: '.module-image-navigation',
							image_meta: '.module-image-navigation-meta'
			});
		}
	}
});

var ImageRotator = Class.create();
ImageRotator.prototype = {

	initialize: function(container) {
		
		this.IMAGE_WIDTH = 604;
		this.container = $(container);
	
		if(this.container) {
		
			this.outer_container = this.container.up();
							
			this.options = Object.extend({
				overlay: 'overlay',
				left_button: 'left-button',
				right_button: 'right-button',
				image_meta: 'image-meta'
			}, arguments[1] || {});
							
			this.options.overlay = $(this.outer_container).down(this.options.overlay);
			
			this.options.left_button = $(this.outer_container).down(this.options.left_button);
			this.options.right_button = $(this.outer_container).down(this.options.right_button);
			this.options.image_meta = $(this.outer_container).down(this.options.image_meta);
			
			$(this.options.overlay).hide();
			
			this.TOTAL_IMAGES = this.container.getElementsBySelector('img').length;
			this.CURRENT_IMAGE = 1;
	
			Event.observe(this.container, 'mouseover', this.showNavigation.bindAsEventListener(this));
			Event.observe(this.container, 'mouseout', this.hideNavigation.bindAsEventListener(this));
			Event.observe(this.options.overlay, 'mouseover', this.mouseoverOverlay.bindAsEventListener(this));
			Event.observe(this.options.overlay, 'mouseout', this.mouseoutOverlay.bindAsEventListener(this));
			Event.observe(this.options.left_button, 'click', this.moveLeft.bindAsEventListener(this));
			Event.observe(this.options.right_button, 'click', this.moveRight.bindAsEventListener(this));
			
			this.updateMeta();
							
			this.container.getElementsBySelector('img').each(function(obj) {
			
				Event.observe(obj, 'mouseover', this.mouseoverImage.bindAsEventListener(this));
				Event.observe(obj, 'mouseout', this.mouseoutImage.bindAsEventListener(this));
				
			}.bind(this));
		}
	},
	
	moveLeft: function(e) {

		Event.stop(e);
		
		if(this._getElementLeft(this.container) >= 0) return;

		new Effect.Move(this.container, {
							x: this.IMAGE_WIDTH,
							y: 0,
							transition: Effect.Transitions.sinoidal,
							duration: 1,
							queue: {
								position: 'end', 
								scope: 'rotator_scope', 
								limit: 1
							},
							afterFinish: this.decreaseMeta.bind(this)
		});
	},
	
	moveRight: function(e) {
	
		Event.stop(e);
		
		var totalWidth = 0;
		this.container.getElementsBySelector('img').each(function(e) {
			
			totalWidth += e.getWidth();
		});
				
		if((totalWidth*-1) >= (this._getElementLeft(this.container) - this.IMAGE_WIDTH)) return false;
		
		new Effect.Move(this.container, {
							x: this.IMAGE_WIDTH * -1,
							y: 0,
							transition: Effect.Transitions.sinoidal,
							duration: 1,
							queue: {
								position: 'end', 
								scope: 'rotator_scope', 
								limit: 1
							},
							afterFinish: this.increaseMeta.bind(this)
		});
		
	},
	
	updateMeta: function() {
		
		$(this.options.image_meta).update(this.CURRENT_IMAGE +" / "+ this.TOTAL_IMAGES);
	},
	
	increaseMeta: function() {
		
		this.CURRENT_IMAGE = this.CURRENT_IMAGE + 1;
		this.updateMeta();
	},
	
	decreaseMeta: function() {
		
		this.CURRENT_IMAGE = this.CURRENT_IMAGE - 1;
		this.updateMeta();
	},
	
	showNavigation: function(e) {
					
		if(this.navigation_opened || this.TOTAL_IMAGES < 1) return;
		
		new Effect.Appear(this.options.overlay, { 
					duration: 0.4,
					from: 0,
					to: 0.5,
					queue: { 
						position: 'end', 
						scope: 'navigation_scope',
						limit: 2
					},
					afterUpdate: this.mouseoverNav.bind(this)
		});
	},
	
	hideNavigation: function(e) {
	
		setTimeout(function() {
							
				if(!this.mouseover_overlay && !this.mouseover_image && $(this.options.overlay)) {
				
					new Effect.Fade(this.options.overlay, { 
							duration: 0.4,
							queue: { 
								position: 'end', 
								scope: 'navigation_scope',
								limit: 2
							},
							afterUpdate: this.mouseoutNav.bind(this)
					});
				}
			}.bind(this),
			50
		);
	},
	
	mouseoverNav: function(e) {
		
		this.navigation_opened = true;
	},
	
	mouseoutNav: function(e) {
		
		this.navigation_opened = false;
	},
	
	mouseoverImage: function(e) {
		
		this.mouseover_image = true;
	},
	
	mouseoutImage: function(e) {
		
		this.mouseover_image = false;
	},
	
	mouseoverOverlay: function(e) {
		
		this.mouseover_overlay = true;
	},
	
	mouseoutOverlay: function(e) {
		
		this.mouseover_overlay = false;
		this.hideNavigation();
	},
	
	_getElementLeft: function(element) {
	
		return parseInt(new String($(element).getStyle('left')).replace('px', ''));
	}	
}