/*
 * jQuery Input - Compare
 * Made for: http://www.avondjevansinterklaas.nl/
 *
 * Copyright (c) 2011, Stephen Kil
 * http://www.skylinestudios.nl/compare/
 *
 * Date: Thu Aug 25 11:19:48 2011 +0200 
 */
(function($) {
	var $comparer = function(element, compare, options) {
		if($(element).attr('value') !== '') {
			var equal = ($(element).attr('value') === $(compare).attr('value'));
			$(element).toggleClass(options.classes.fail, !equal);
			$(compare).toggleClass(options.classes.fail, !equal);
			
			$(element).toggleClass(options.classes.success, equal);
			$(compare).toggleClass(options.classes.success, equal);
			
			if(!equal)
			{
				if(typeof($.fn.qtip) == 'function')
					$(element).qtip('show');
				$disableSubmit(element, true);
			}
			else
				$disableSubmit(element, false);
		}
	};
	
	var $disableSubmit = function(element, disable) {
		var $parent = $(element).parent();
		
		while($parent.get(0).tagName.toLowerCase() != 'form')
			$parent = $($parent).parent();
		
		$parent.find('input[type=submit]').attr('disabled', disable);
	}
	
	$.fn.compare = function(options) {
		return this.each(function (index, element) {
			var $id = $(element).attr('data-compare');
			var $elem = $('#' + $id);
			if($elem.length > 0) { 
				$(element).compareTo($elem, options);

				if(typeof($.fn.qtip) == 'function') {
					$(element).qtip({
						content: {
							text: true,
							attr: 'data-error-message'
						},
						position: {
							my: 'bottom center',
							at: 'top center'
						},
						show: {
							target: false,
							event: null
						},
						style: {
							classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
						},
						events: {
							show: function(event, $api) {
								setTimeout(function() { $api.hide() }, 3000);
							}
						}
					});
				}
			}
		});
	};
	
	$.fn.compareTo = function(target, options) {
		var $options = {
			'element': this,
			'target': target,
			'classes': {
				'fail': 'cmp-fail',
				'success': 'cmp-success'
			},
			onSuccess: function(element, value) {},
			onFail: function(element, values) {}
		};
		
		$.extend($options, options);
		
		$(target).blur(function() {
			if(!$($options.element).is(':focus'))
				$($options.element).blur();
		});
		
		return this.each(function(index, element){
			$(element).blur(function() {
				$comparer(element, target, $options);
			})
		});
	}
})(jQuery);