/*
  *	@param 	timeout		Time until the layer hides when unfocused.
  *	@param 	ajaxTarget		Specifies the target of the ajax request. If none is specified, the action attribute of the wrapping form element is used.
  *	@param 	width			Set the width of the layer to X pixels. If not specified, the width of the input field is assumed.
  *
  */

var __AutoCompleteCurrent;
var __AutoCompleteData;


$.fn.extend({
	goComplete: function(options) {
		options = jQuery.extend({timeout: 2000, ajaxTarget: false, width: false}, options || {});
		var timeout;
		var inputFocused;
		var layerVisible = false;
		var initialName;			// Initial name of the input field which is restored before sumit. This is to avoid the browser-side autocomplete function. If anyone has a better idea on how to do this, tell me please.
		var form;
		var that = this;
		var selectedLi = -1;
	
		if(this.get(0).tagName == 'INPUT') {
			// Find the form element which contains the field.
			form = this.parent();
			while(form && form.get(0).tagName != 'FORM') {
				form = form.parent();
			}
			
			if(!options.ajaxTarget)
				options.ajaxTarget = form.attr('action');
			
			this.val('');
			
			// Create and reposition autocomplete container,
			jQuery('body').prepend('<div id="searchComplete" style=""></div>');
			layer = jQuery('#searchComplete');
			//padding = layer.css('padding').match(/([0-9]*)px ([0-9]*)px ([0-9]*)px ([0-9]*)px/);
			
			layer.css('top', (this.offset().top+this.outerHeight()+2)+'px');
			layer.css('left', (this.offset().left)+'px');
			
			if(!options.width)
				layer.css('width', (this.outerWidth()-2)+'px');
			else
				layer.css('width', options.width);
			
			layer.hide();
			
			initialName = this.attr('name');
			this.attr('name', initialName+"_"+parseInt(Math.random()*1000));
			
			// Create and bind event handlers for input field
			function keyup(e) {
				if(e.keyCode == 13)
					return;
				if(e.keyCode == 40 || e.keyCode == 38) {
					children = layer.children().children('li.supplier, li.product');
					
					if(selectedLi < 0)
						selectedLi = 0;
					else if(e.keyCode == 40 && selectedLi < (children.length-1))
						selectedLi += 1;
					else if(e.keyCode == 38 && selectedLi > 0)
						selectedLi -= 1;
					
					children.removeClass('selected');
					children.eq(selectedLi).addClass('selected');
					
					return;
				}
        
        
				if(jQuery(this).val().length > 2) {
          if (keyup.Current) window.clearTimeout(keyup.Current);
          __AutoCompleteData = jQuery(this).val();
          __AutoCompleteCurrent = function () {
            jQuery.post(options.ajaxTarget, {data: __AutoCompleteData, languageId: sys_language_uid}, function(data) {
                if(data) {
                  selectedLi = -1;
                  layer.html(data);
                  layer.children().children('li.supplier, li.product').mouseover(liMouseover);
                  layer.children().children('li.supplier,li.product').mouseout(liMouseout);
                  layer.children().children('li.supplier,li.product').click(liClick);
                  layer.children().children('li.department').click(departmentClick);
                  layer.children().children('li.division').click(divisionClick);
                  layer.children().children('li.submit').click(function() {
                    form.submit();
                  });
                  showLayer();
                }
                else
                  hideLayer();
                __AutoCompleteCurrent = null;
              }, 'html');
          }
					keyup.Current = window.setTimeout("__AutoCompleteCurrent()", 500);
				}
				else {
          __AutoCompleteCurrent = null;
					hideLayer();
        }
			};
			this.keyup(keyup);
			
      
			function focus() {
				inputFocused = true;
				clearTimeout(timeout);
			}
			this.focus(focus);
			
			function blur() {
				inputFocused = false;
				timeout = setTimeout(hideLayer, options.timeout);
			}
			this.blur(blur);
			
			function submit() {
				that.attr('name', initialName);
				if(selectedLi >= 0 && layerVisible) {
					jQuery('input#selectedId').val(layer.children().children('li.supplier, li.product').eq(selectedLi).attr('id'));
					that.val(layer.children().children('li.supplier, li.product').eq(selectedLi).children().eq(0).text());
				}
				hideLayer();
				return true;
			}
			form.submit(submit);
			
			
			// Create and bind event handlers for search layer.
			function mouseover() {
				clearTimeout(timeout);
			}
			layer.mouseover(mouseover);
			
			
			function liMouseover() {
				jQuery(this).siblings('li.supplier, li.product').removeClass('selected');
				jQuery(this).addClass('selected');
				selectedLi = layer.children().children('li.supplier, li.product').index(this);
			}
			
			function liMouseout() {
				jQuery(this).removeClass('selected');
				selectedLi = -1;
			}
			
			function liClick() {
				that.val(jQuery(this).children().eq(0).text());
				form.submit();
			}
			
			function departmentClick() {
				jQuery('input#departmentId').val(jQuery(this).attr('id').substr(3));
				form.submit();
			}
			
			function divisionClick() {
				jQuery('input#divisionId').val(jQuery(this).attr('id').substr(3));
				form.submit();
			}
			
			function mouseout() {
				if(!inputFocused)
					timeout = setTimeout(hideLayer, options.timeout);
			}
			layer.mouseout(mouseout);
			
			function showLayer() {
				if(!layerVisible && $(document.getElementsByName('tx_indexedsearch[sections]')[0]).children('option[selected]').val() == 0) {
					layer.show();
					layerVisible = true;
				}
			}
			
			function hideLayer() {
				if(layerVisible) {
					layer.hide();
					layerVisible = false;
				}
			}
		}
		return this;
	}
});

 $(window).load(function () {
	$('input.search').goComplete({ajaxTarget: 'typo3conf/ext/catalog/pi4/ajaxHandler.php', width: 321});

});