/* Replaces an HTML select with a text field with livesearch functionality */
/**
TODO: 
	Make information link work better (tooltip on click maybe?)
	Better styling of dropdown list?
	Correct dropdown positioning after window resize
	Altered default text breaks with multiple elements on page
	Fix problem with <select> bleedthrough in IE
*/
jQuery.fn.autocomplete = function(options){	
	
	var methods = {
		// initialization
		init: function(element, options){
			// check for an empty option
			defaultOption = element.children('option[value=]');
			if (defaultOption.size() == 1) {
				element.defaultText = defaultOption.html();
				//defaultOption.remove();
			} else { // if none, insert one
				element.prepend($('<option>').attr('value', '').html(options.defaultText)).val('');
			}
			element = methods.append(element);
			var selectOptions = element.find('option[value!=]');
			// now watch text entry on the text field
			element.textField.bind('keyup', function(){
				if (element.textField.val() == '') {
					element.siblings('ul.preview').hide();
				} else if(element.textField.val().length >= options.threshold) {
					var matches = {};
					var count = 0;
					selectOptions.each(function(){
						if (this.innerHTML.toLowerCase().indexOf(element.textField.val().toLowerCase()) != -1) {
							matches[this.value] = this.innerHTML;
							count++;
						}
					});
					element = methods.showMatches(element, matches, count);
				}
			}).blur(methods.setDefault).focus(methods.checkDefault);
			methods.setDefault.call(element.textField);
			return element;
		},
		// appends new markup
		append: function(element) {
			element.textField = $('<input>').attr({
				type: 'text'
			}).css({
				width: element.outerWidth() - 25 + 'px'
			}).addClass('ui-autocomplete')//.val(element.find('option[value=]').html());
			element.help = $('<a>').addClass('ui-autocomplete help').attr('title', options.helpText).html($('<img>').attr('src', options.infoImage));
			element.help.tooltip();
			element.preview = $('<ul>').addClass('preview')//.append($('<li>').html('test'));
			element.hide().after(element.preview).after(element.help).after(element.textField);
			element = methods.position(element);
			return element;
		},
		// positions the preview element
		position: function(element) {
			var offset = element.textField.position();
			offsetTop = offset.top + element.textField.outerHeight();
			element.preview.css({
				top: offsetTop+'px',
				left: offset.left+'px',
				width: element.textField.outerWidth()+'px'
			});
			return element;
		},
		// displays matched options
		showMatches: function(element, matches, count) {
			element = methods.position(element);
			var list = element.siblings('ul.preview');
			// empty the list
			list.html('');
			if (count === 0) {
				list.append(methods.createListItem('No matches', false));
			} else if (count > options.maxResults) {
				list.append(methods.createListItem('Over '+options.maxResults+' matches', false));
			} else {
				jQuery.each(matches, function(index, text){
					list.append(methods.createListItem(text, true).click(function(){
						element.val(index);
						element.siblings('input.ui-autocomplete').val(text);
						list.hide();
					}).hover(function(){
						element.textField.unbind('blur');
					}, function(){
						element.textField.blur(function(){
							element.textField.val('').siblings('.preview').hide();
						});
					}));
				});
			}
			element.siblings('ul.preview').show();
			return element;
		},
		// generates an <li> containing the passed string
		createListItem: function(text, active) {
			var li = $('<li>').html(text);
			if (active) {
				li.addClass('active');
			}
			return li;
		},
		// drops the default text in the input
		setDefault: function() {
			e = $(this);
			select = e.siblings('select');
			if (select.find('option:selected').size() == 0) {
				e.val(select.find('option[value=]').html()).siblings('.preview').hide();
			} else {
				e.val(select.find('option:selected').html()).siblings('.preview').hide();
			}			
		},
		// clears the default text from the input
		checkDefault: function() {
			e = $(this);
			if (e.val() == e.siblings('select').find('option[value=]').html()) {
				e.val('');
			}			
		}
	};
	
	/**
	 * Default options.  Any of these can be overriden by passing a different value
	 * in a hash when instantiating this plugin.
	 */
	defaults = {
		// This text will be displayed by default if the select has no empty option
		defaultText: 'No selection',
		// This text will be shown when the help tooltip is activated
		helpText: 'As you type in this field, you will be shown options which you may choose.',
		// This is the maximum number of search results that will be shown. Larger sets will display "Too many results"
		maxResults: 50,
		// Minimum number of characters input before a search is performed. Prevents excessive result sets.
		threshold: 3
	};
	options = jQuery.extend(defaults, options);
	// browser check for PNG vs GIF
	if (jQuery.browser.msie && jQuery.browser.version.indexOf('6.') != -1) {
		options.infoImage = '/airtight/img/information.gif';
	} else {
		options.infoImage = '/airtight/img/information.png';
	}
	
	this.each(function(){
		methods.init($(this), options);
	});
	return this;
};

// massaged tooltip plugin
jQuery.fn.tooltip = function(){
	
	var element = this;
	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 10;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	this.hover(function(e){		
		this.t = this.title;
		this.title = "";
		var tooltip = $('<p>').addClass('ui-widget-content').attr('id', 'tooltip').html(this.t)
		if (this.rel) {
			tooltip.css('width', this.rel+'px');
		}									  
		$("body").append(tooltip);
		element.positionTip(e);
		$("#tooltip")
			// .css({
			// 	top: (e.pageY - xOffset) + "px",
			// 	left: (e.pageX + yOffset) + "px"
			// })
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    }).mousemove(function(e){
		element.positionTip(e);
		// $("#tooltip")
		// 	.css("top",(e.pageY - xOffset) + "px")
		// 	.css("left",(e.pageX + yOffset) + "px");
	});
	
	// Intelligent positioning for tips
	this.positionTip = function(e){
		var buffer = 25;
		var tip = $('#tooltip');
		var base = {
			x: e.pageX + xOffset,
			y: e.pageY - yOffset
		}
		var max = {
			x: base.x - window.scrollX + buffer + tip.outerWidth(),
			y: base.y - window.scrollY + buffer + tip.outerHeight()
		}
		var viewport = {
			x: $(window).width(),
			y: $(window).height()
		}
		var position = {
			x: (max.x > viewport.x) ? base.x - max.x + viewport.x : base.x,
			y: (max.y > viewport.y) ? base.y - max.y + viewport.y : base.y
			//y: base.y
		};
		tip.css({
			top: position.y+'px',
			left: position.x+'px'
		});
	}
	return this;
}