$(function() {
	var cache = {},lastXhr;
	$.widget( "custom.cmAutoSuggest", $.ui.autocomplete, {
		options: {
			delay: 500,
			appendTo: '#BuscaForm',
			minLength: 2,
			source: function( request, response ) {
				var term = $.trim(request.term);
				if ( term in cache ) {
					response( cache[ term ] );
					return;
				}
				
				lastXhr = $.ajax({					
					url: "/busca.json",
					data: request,
					dataType: 'json',
					type: 'GET',
					loader: {
						selector: '#LoaderAutoSuggest',
						wait: 250
					},
					success: function( data, status, xhr ) {
						cache[ term ] = data;
						if ( xhr === lastXhr ) {
							response( data );
						}
					}
				});
			},
			select: function(event, selected) {
				if(selected.item.link) {
					window.location = selected.item.link;
				} else if(typeof selected.item.handler == 'function') {
					selected.item.handler.call(this);
				}
			},
			noResultsHtml: '<span class="cGreen titleFont">Sua busca não retornou nenhum resultado em nosso banco de dados.</span><br>Entre em contato conosco através da <a href="/contato">Central de atendimento</a>'
		},
		_response: function( content ) {
			if ( !this.options.disabled && !$.isEmptyObject(content)) {
				this._suggest( content );
				this._trigger( "open" );
			} else if( $.isEmptyObject(content) ) {
				this._suggest( false );
				this._trigger( "open" );
			} else {
				this.close();
			}
			this.pending--;
			if ( !this.pending ) {
				this.element.removeClass( "ui-autocomplete-loading" );
			}
		},
		_renderMenu: function( ul, items ) {
			var self = this;
			
			if(!items) {
				self._renderNoResults(ul);
				return;
			}
			/*
			 * items é agora um objeto com os tipos de seus resultados
			 * sendo referenciados pelas chaves
			 * ex: 
			 * {
			 * 	ModeloProduto: [<obj Produto>],
			 * 	Produtos: [<obj Produto>, <obj Produto>, <obj Produto>, ...],
			 * 	Fabricante: [<obj Produto>, <obj Produto>, <obj Produto>, ...]
			 * }
			 */
			for(resultGroup in items) {
				// correndo pelas chaves de items
				switch(resultGroup) {
					case 'ProdutoPorModelo':
						ul.append( "<li class='ui-autocomplete-categoria produto-por-modelo'>Busca por código</li>" );
						self._renderProdutoPorModelo(ul, items[resultGroup]);
						break;
					// renderiza Produtos
					case 'Produtos':
						var categoriaAtual = {},
							c = 0,
							groupLimit = 3;
						
						$.each(items[resultGroup], function(index, produto) {
							if( produto.Categoria.caminho != categoriaAtual.caminho || c >= groupLimit ) {
								if(categoriaAtual && c == groupLimit) {
									categoriaAtual.value = $.trim(self.term);
									ul.append(
										$("<li class='ui-autocomplete-ver-mais'></li>").
											append(
												$('<a></a>').
													html('veja mais de <strong>'+categoriaAtual.caminho+'</strong>').
													attr('href', categoriaAtual.link).
													attr('title', categoriaAtual.caminho)
											)
											.data('item.autocomplete', categoriaAtual)
									);
								}
								
								if( produto.Categoria.caminho != categoriaAtual.caminho ) {
									ul.append( $("<li class='ui-autocomplete-categoria'>" + produto.Categoria.caminho + "</li>") );
									categoriaAtual = produto.Categoria;
									c=0;
								}
							}
							
							if(++c <= groupLimit) {
								self._renderProduto( ul, produto );
							}
						});
						break;
						
					// renderiza Fabricantes
					case 'Fabricantes':
						ul.append("<li class='ui-autocomplete-categoria fabricante'>Fabricantes</li>");
						$.each(items.Fabricantes, function(index, fabricante) {
							self._renderFabricante(ul, fabricante);
						});
						break;
					case 'Categorias':
						ul.append("<li class='ui-autocomplete-categoria categoria'>Categorias</li>");
						$.each(items.Categorias, function(index, categoria) {
							self._renderCategoria(ul, categoria);
						});
						break;
					default:
						var renderFn = false;
						ul.append(
							$("<li class='ui-autocomplete-categoria'></li>")
								.addClass(resultGroup.toLowerCase())
								.text(resultGroup)
						);
						if(typeof self[renderFn = '_render' + resultGroup] != 'function') {
							renderFn = '_renderItem';
						}
						$.each(items[resultGroup], function(index, item) {
							self[renderFn](ul, item);
						});
						break;
				}
			}
		},
		_renderNoResults: function(ul) {
			ul.append($('<div></div>').addClass('ui-autocomplete-noresults').html(this.options.noResultsHtml));
		},
		_renderProdutoPorModelo: function(ul, item) {
			item.value = this.term;
			item.link = item.link || '';
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( 
					$( "<a></a>" )
						.append( $('<span class="item-texto"></span>').html( item.nome ) )
						.attr('href', item.link)
						.append( $( '<span class="side-info"></span>' ).html( item.preco ) )
				)
				.appendTo( ul );
		},
		_renderItem: function( ul, item) {
			item.value = this.term;
			item.link = item.link || '';
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( $( "<a></a>" )
					.append( $('<span class="item-texto"></span>').html( item.nome ) )
					.attr('href', item.link)
				)
				.appendTo( ul );
		},
		_renderFabricante: function(ul, item){
			var trs = $.trim(this.term).split(' ');
			// termo em bold no resultado
			for(a in trs) {
				item.nome = item.nome.replace(new RegExp('([^\>]?)(' + trs[a] + '|' + trs[a].toRegexp() + ')([^\<]?)', ['i']), '$1<b>$2</b>$3');
			}
			item.value = this.term;
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( $( "<a></a>" )
					.attr('href', item.link)
					.append( $('<span class="item-texto"></span>').html( item.nome ) )
					.append( $("<span class=\"side-info\"><strong>" + item.qtde_produtos + "</strong> produtos</span>") )
				)
				.appendTo( ul );
		},
		_renderCategoria: function(ul, item){
			item.caminho = item.caminho.replace(new RegExp('([^\>]?)(' + item.nome + '|' + item.nome.toRegexp() + ')([^\<]?)', 'ig'), '$1<b>$2</b>$3');
			item.value = this.term;
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( $( "<a></a>" )
					.attr('href', item.link)
					.append( $('<span class="item-texto"></span>').html( item.caminho ) )
					.append( $("<span class=\"side-info\"><strong>" + item.qtde_produtos_disponiveis + "</strong> produtos disponíveis</span>") )
				)
				.appendTo( ul );
		},
		_renderProduto: function( ul, item) {
			var trs = $.trim(this.term).split(' ');
			// termo em bold no resultado
			for(a in trs) {
				item.nome = item.nome.replace(new RegExp('([^\>]?)(' + trs[a] + '|' + trs[a].toRegexp() + ')([^\<]?)', ['i']), '$1<b>$2</b>$3');
			}
			item.value = this.term;
			return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( $( "<a></a>" )
					.attr('href', item.link)
					.append( $( "<span class=\"item-texto\"></span>" ).html( item.nome ) )
					.append( $( "<span class=\"side-info\"></span>" ).html( item.preco ) )
				)
				.appendTo( ul );
		}
	});
	
	var placeHolder = $('#BuscaForm .busca-placeholder');
	
	$( "#BuscaInput" )
		.cmAutoSuggest()
		.bind('blur', function(){
			if( !$(this).val().length ) {
				$(this).addClass('placeholder');
			}
		})
		.bind('focus', function(){
			$(this).removeClass('placeholder');
		});
});