var Dock = Class.create({
	initialize: function() {
		// These values can be customized
		this.containerId = 'footerMenu';
		this.targetImageClass = '#footerMenu .image';
		this.targetCaptionClass = '#footerMenu .caption';
		this.thumb = { width: 40, height: 30 };
		this.focus = { width: 67, height: 50 };
		this.eyeRadius = 180;
				
		this.container = $(this.containerId);
		this.divs = $$('#footerMenu .footerMenuItem');
		this.imgs = $$(this.targetImageClass);
		this.captions = $A($$(this.targetCaptionClass));
		
		this.imgs.each(function(obj, i) {
			obj.setStyle({
				width: this.thumb.width + 'px',
				height: this.thumb.height + 'px'
			});			
		}.bind(this));
		
		this.divs.each(function(obj, i) {
			obj.observe('mouseover', function(event) {
				//obj.setStyle({ paddingBottom: '5px' });				
				this.captions[i].setStyle({					
					//fontSize: '11px',
					color: '#8F6F4D'
				});
			}.bindAsEventListener(this));
			
			obj.observe('mouseout', function(event) {
				//obj.setStyle({ paddingBottom: '0px' });
				this.captions[i].setStyle({
					//fontSize: '9px',
					color: '#BD9C6D'
				});
			}.bindAsEventListener(this));
		}.bind(this));
		
		if (this.container) {
			Event.observe(this.container, 'mouse:leave', this.initialState.bindAsEventListener(this));
			Event.observe(this.container, 'mousemove', this.nextState.bindAsEventListener(this));
		}
	},
	
	initialState: function(event) {
		if (event.target == this.container || (event.target.descendantOf(this.container) && !event.memo.relatedTarget.descendantOf(this.container))) {
			this.imgs.each(function(obj, i) {
				new Effect.Morph(obj, {
					style: 'width: ' + this.thumb.width + 'px; height: ' + this.thumb.height + 'px;',
					duration: 0.15
				});
			}.bind(this));
		}
	},
	
	nextState: function(event) {
		this.imgs.each(function(obj, i) {
			var h = this.getDistance(event, obj);
			var objProperties = this.getDimensions(h);			
			obj.setStyle({
				width: objProperties.width + 'px',
				height: objProperties.height + 'px'
			});
		}.bind(this));
	},
	
	getDistance: function(event, obj) {
		// var objProperties = {
		// 	cumulativeOffset: obj.cumulativeOffset(),
		// 	width: obj.getWidth(),
		// 	height: obj.getHeight()
		// };
		// var curProperties = {
		// 	x: Event.pointerX(event),
		// 	y: Event.pointerY(event)
		// };
		// objProperties.center = {
		// 	x: (objProperties.cumulativeOffset.left + (objProperties.width / 2)),
		//	y: (objProperties.cumulativeOffset.top + (objProperties.height / 2))
		// };
		// return Math.round(Math.sqrt(Math.pow((curProperties.x - objProperties.center.x), 2) + Math.pow((curProperties.y - objProperties.center.y),2)));
        // return Math.abs(curProperties.x - objProperties.center.x);
        return Math.abs(Event.pointerX(event) - (obj.cumulativeOffset().left + (obj.getWidth() / 2)));
	},
	
	getDimensions: function(h) {
		if (h < this.eyeRadius) {
			var width = (((this.thumb.width - this.focus.width) / this.eyeRadius) * h) + this.focus.width;
			var height = (((this.thumb.height - this.focus.height) / this.eyeRadius) * h) + this.focus.height;
		} else {
			var width = this.thumb.width;
			var height = this.thumb.height;
		}
		return { width: width, height: height };
	},
	
	getPadding: function(h) {
		if (h < this.eyeRadius) {
			var padding = ((h / this.eyeRadius) * (0 - 10) + 10);
		} else {
			var padding = 0;
		}
		return padding;
	},
	
	getOpacity: function(h) {
		if (h < this.eyeRadius) {
			var opacity = (((0.8 - 1.0) / this.eyeRadius) * h) + 1.0;
		} else {
			var opacity = 0.5;
		}
		return opacity;
	}
});

Event.observe(document, 'dom:loaded', function() {	
	var dock = new Dock();
	
	/* Define custom Prototype event for Mouseleave */	
	(function() {
		// function respondToMouseOver(event) {
			// var target = event.element(), relatedTarget = event.relatedTarget;
			// if (relatedTarget && !relatedTarget.descendantOf(target))
				// target.fire('mouse:enter');
		// }
	
		function respondToMouseOut(event) {		
			var target = event.element(), relatedTarget = event.relatedTarget;
			if (relatedTarget && relatedTarget.descendantOf && !relatedTarget.descendantOf(target))
				target.fire('mouse:leave', { relatedTarget: relatedTarget });
		}
		
		if (dock.container) {		
			if (Prototype.Browser.IE) {
				// document.observe('mouseenter', function(event) {
					// event.element().fire('mouse:enter');
				// });
				dock.container.observe('mouseleave', function(event) {
				//document.observe('mouseleave', function(event) {
					event.element().fire('mouse:leave', { relatedTarget: event.relatedTarget });
				});				
			} else {
				//document.observe('mouseover', respondToMouseOver);
				dock.container.observe('mouseout',  respondToMouseOut);
//				document.observe('mouseout',  respondToMouseOut);
			}
		}
	})();
});