Form.Validator.Callout = new Class({

	Extends: Form.Validator.Inline,
	
	options: {
		fixed: false
	},

	showAdvice: function(className, field) {
		var advice = this.getAdvice(className, field);
		if (advice) {
			field.store(this.getPropName(className), true);
			this.positionAdvice(advice, field);
			this.displayAdvice(advice);
		}
	},
	
	hideAdvice: function(className, field) {
		var advice = this.getAdvice(className, field);
		if (advice && field.retrieve(this.getPropName(className))) {
			/*field.store(this.getPropName(className), false);
			advice.setStyles({
				position: 'absolute',
				left: 0,
				top: 0
			});
			advice.hide();*/
			field.eliminate('advice-' + className);
			advice.destroy();
		}
	},
	
	makeAdvice: function(className, field, error, warn) {
  	var errorMsg = (warn) ? this.warningPrefix : this.errorPrefix;
  			errorMsg += (this.options.useTitles) ? field.title || error:error;
		var advice = this.getAdvice(className, field);
		if (advice) {
			advice.getElement('.validator-advice-message').set('html', errorMsg);
		} else {
			var container = new Element('div', {
				id: 'advice-' + className + '-' + this.getFieldId(field),
				'class': 'validator-advice-message',
				html: errorMsg
			});
		
			advice = new Element('div', {
				styles: {
					display: 'none',
					position: 'absolute',
					background: '#FFE28E',
					color: '#000000',
					fontFamily: 'Helvetica, Arial, sans-serif',
					fontSize: 13,
					padding: 10,
					width: 170,
					'border-radius': '4px',
					'-moz-border-radius': '4px',
					'-webkit-border-radius': '4px',
					'box-shadow': '0 0 6px #000000',
					'-moz-box-shadow': '0 0 6px #000000',
					'-webkit-box-shadow': '0 0 6px #000000',
					zIndex: 5000
				}
			});
			
			if (!Browser.Engine.trident) {
				advice.adopt(
					// Pointer
					new Element('div', {
						styles: {
							position: 'absolute',
							left: -11,
							top: 6,
							width: 11,
							height: 21,
							background: 'url(/i/callout-pointer.png) no-repeat 0 0'
						}
					})
				);
			}
			
			advice.adopt(container);
		}
		field.store('advice-' + className, advice);

		this.positionAdvice(advice, field);
		return advice;
	},
	
	getAdvice: function(className, field) {
		return field.retrieve('advice-' + className);
	},

	insertAdvice: function(advice, field) {
		//Check for error position prop
		var props = field.get('validatorProps');
		//Build advice
		/*if (!props.msgPos || !document.id(props.msgPos)) {
			document.id(advice).inject(document.body);
		} else {
			document.id(props.msgPos).grab(advice);
		}*/
		if (!Browser.Engine.trident && this.options.fixed) {
			advice.setStyle('position', 'fixed');
		}
		advice.inject(document.body, 'bottom');
	},

	validateField: function(field, force) {
		this.options.scrollToErrorsOnSubmit = false;
		return this.parent(field, force);
	},
	
	positionAdvice: function(advice, field) {
		var offset = 0;
		var props = field.get('validatorProps');
		if (props.adviceOffset) {
			offset = props.adviceOffset;
		}

		var bounds = $(field).getCoordinates();
		/*field = $(field);

		var parent = field.getParent();		
		var bounds = {
			left: parent.offsetLeft + field.offsetLeft,
			top: parent.offsetTop + field.offsetTop
		};
		bounds.right = bounds.left + field.offsetWidth;*/
		
		advice.setStyles({
			left: bounds.right,
			top: bounds.top - 7 + offset
		});
	},
	
	displayAdvice: function(advice) {
		if (advice.getStyle('display') != 'none') return;
		advice.setStyles({
			display: 'block',
			opacity: 0,
			marginLeft: -20
		}).set('morph', {
			transition: Fx.Transitions.Expo.easeOut
		}).morph({
			marginLeft: 0,
			opacity: 1
		});
	}

});