var produtos;
var categorias;
//function showPop(id, lista, title, img){
function showPop(i){
	$.mobile.loading( "show", {
		text: "Carregando...",
		textVisible: "Carregando..."
	});
	prod = produtos[i];
	title = prod.marca+" - "+prod.produto;
	lista = prod.lista;
	classificacao = prod.classificacao;
	if(classificacao.length>0){
		classif = classificacao.toLowerCase();
		if(classif.indexOf("chalav")!=-1){
			classificacao = "<br/><font size=1><b>Classifica&ccedil;&atilde;o:</b></font> <font size=1 color='blue'>"+classificacao+"</font>";
		}else{
			classificacao = "<br/><font size=1><b>Classifica&ccedil;&atilde;o:</b></font> <font size=1>"+classificacao+"</font>";
		}
	}
	descricao = prod.descricao;
	if(descricao.length>0){
		descricao = "<br/><font size=1 color='gray'><b>Nota:</b> "+descricao+"</font>";
	}
	brachaant = prod.brachaant;
	if(brachaant.length>0){
		brachaant = "<br/><font size=1><b>Brach&aacute; Anterior:</b></font> <font size=1 color='black'>"+brachaant+"</font>";
	}
	brachapos = prod.brachapos;
	if(brachapos.length>0){
		brachapos = "<br/><font size=1><b>Brach&aacute; Posterior:</b></font> <font size=1 color='black'>"+brachapos+"</font>";
	}
	id = prod.id;
	//alert(prod.marca);
	img = prod.imagem;
	id = id+lista;
	img = img.replace("/thumbs/","/reais/");
	img = img.replace("/dyn_images/peq","/dyn_images/gde");
	selo = "";
	if(prod.selo=="1"){
		selo = "<br/><font color='red' size=1>Produto com Selo de Supervis&atildeo BDK</font>";
	}
	closebtn = '<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>';
	header = '<a></a>';//<div data-role="header"><h2>' + title + '</h2></div>';
	img  = '<center><img src="' + img + '" alt="' + title + '" width="40%"></center>';
	img += '<table style="width:100%" class="ui-body-c"><tr><td style="font-size:80%; width:3em; margin: 3px 3px 3px 3px;" valign="top">&nbsp;<br/><img src="public/images/'+lista+'.png" />';
 	//html  = '<div id="ui-body-info" class="ui-body ui-body-c" style="font-size:.8em;">'; //style="font-size:.8em;"
	html = '</td><td style="font-size:.8em;" width="350"><p>'+prod.marca+"<br/><b>"+prod.produto+'</b><br/>';
	html += '<font size=1><i>'+prod.categoria+'</i></font>'+classificacao+selo+brachaant+brachapos+'</p></td></tr></table>';
	img += html;
	popup = '<div data-role="popup" id="popup-' + id + '" data-short="' + id +'" data-theme="none" data-overlay-theme="a" data-corners="false" data-tolerance="15" style="background-color: white !important;"></div>';
	// Create the popup.
	$( header )
		.appendTo( $( popup )
			.appendTo( $.mobile.activePage )
			.popup() )
		.toolbar()
		.before( closebtn )
		.after( img );
	// Wait with opening the popup until the popup image has been loaded in the DOM.
	// This ensures the popup gets the correct size and position
	$( ".photo", "#popup-" + id ).load(function() {
		// Open the popup
		$( "#popup-" + id ).popup( "open" );
		// Clear the fallback
		clearTimeout( fallback );
	});
	// Fallback in case the browser doesn't fire a load event
	var fallback = setTimeout(function() {
		$( "#popup-" + id ).popup( "open" );
		$.mobile.loading( "hide" );
	}, 1000);
	// Set a max-height to make large images shrink to fit the screen.
	$( document ).on( "popupbeforeposition", ".ui-popup", function() {
		var image = $( this ).children( "img" ),
			height = image.height(),
			width = image.width();
		// Set height and width attribute of the image
		$( this ).attr({ "height": height, "width": width });
		// 68px: 2 * 15px for top/bottom tolerance, 38px for the header.
		var maxHeight = $( window ).height() - 68 + "px";
		$( "img.photo", this ).css( "max-height", maxHeight );
	});
	// Remove the popup after it has been closed to manage DOM size
	$( document ).on( "popupafterclose", ".ui-popup", function() {
		$( this ).remove();
		$('#dataProducts').listview("refresh");
		$('#dataProducts').trigger("updatelayout");
	});
}
$(document).ready(function(){
	({
		getproducts : function(){
			$('#product').blur();
			$('#dataProducts').focus();
			product = $('#product').val();
			//list = $('input[name=kosherlist]:checked', '#frmFind').val();
			list = "";
			if( $('#check-bka').is(':checked') ){
				if(list!="") list += ",";
				list += "'bka'";
			}
			if( $('#check-bdk').is(':checked') ){
				if(list!="") list += ",";
				list += "'bdk'";
			}
			if( $('#check-lkb').is(':checked') ){
				if(list!="") list += ",";
				list += "'lkb'";
			}
			if( $('#check-mekor').is(':checked') ){
				if(list!="") list += ",";
				list += "'mekor'";
			}						if( $('#check-other').is(':checked') ){				if(list!="") list += ",";				list += "'other'";			}
			html = "";
			html2 = "";

			if( (product.length > 2) ){
				$('#dataProducts').html(html);
				$('#dataProducts').listview("refresh");
				$('#dataProducts').trigger("updatelayout");
				$('#dataCategories').html(html2);
				
				ga('send', 'pageview', "/search.php?produto="+product+"&lista="+list);
				
				$.ajax({
					type: 'POST',
					cache: false,
					url: 'ajax.php',
					dataType: "json",
					data: {'product':product, 'list':list, 'action':'findproduct'},
					beforeSend: function(){
						$.mobile.loading( "show", {
							text: "Pesquisando...",
							textVisible: "Pesquisando..."
						});
					},
					success: function(request){
						produtos = request.produtos;
						categorias = request.categorias;
						total = request.total;
						cat = "";
						var contCat = -1;
						if(total==0){
							html += "<li data-role='list-divider'>"+request.msg+"</li>";
							$("#divRodape").toolbar("option", "position", "fixed");
							$("#divRodape").toolbar("refresh");
							$("#divRodape").toolbar( "show" );
						}else{
							$.each(produtos, function ( i, val ){					
								prod = produtos[i];								//console.log(prod);								
								if(cat!=prod.categoria){
									contCat++;
									html += "<li data-role='list-divider' id='category"+contCat+"'>"+prod.categoria;
									html += "<span class='ui-li-count'>"+categorias[prod.categoria].qtde+"</span> </li>";
									cat = prod.categoria;
								}
								id = prod.id;
								lista = prod.lista;
								classificacao = prod.classificacao;
								if(classificacao.length>0){
									classif = classificacao.toLowerCase();
									if(classif.indexOf("chalav")!=-1){
										classificacao = "<br/><font size=1><b>Classifica&ccedil;&atilde;o:</b></font> <font size=1 color='blue'>"+classificacao+"</font>";
									}else{
										classificacao = "<br/><font size=1><b>Classifica&ccedil;&atilde;o:</b></font> <font size=1>"+classificacao+"</font>";
									}
								}
								descricao = prod.descricao;
								if(descricao.length>0){
									descricao = "<br/><font size=1 color='gray'><b>Nota:</b> "+descricao+"</font>";
								}
								selo = "";
								if(prod.selo=="1"){
									selo = "<br/><font color='red' size=1>Produto com Selo de Supervis&atildeo BDK</font>";
								}
								//title = prod.marca+" - "+prod.produto;
								//click = "showPop(\""+id+"\", \""+lista+"\", \""+title+"\", \""+prod.imagem+"\")";
								click = "showPop("+i+")";
								html += "<li data-icon='"+prod.lista+"'>"+
									"<a href='#' class='prod' onclick='"+click+"'><img src=\""+
									prod.imagem+"\" height='80'><table cellpadding='0' cellspacing='0' style='margin-top: -5px;'><tr>"+
									"<td style='white-space: normal !important;'><font size='1'>"+prod.marca+"";
								if(prod.fabricante != ""){
									html += " | "+ prod.fabricante + "";
								}
								html += " </font><br/><font size='2'><b>"+
									prod.produto+"</b></font>"+classificacao+selo+descricao+"</td></tr></table></a>"+
									"<input type='hidden' name='kid' id='kid' value='"+prod.id+"'></li>";
								/*html += "<li data-icon='"+prod.lista+"'>"+
									"<a href='#' class='prod' onclick='"+click+"'><img src='"+
									prod.imagem+"' height='80'><font size='1'>"+prod.marca+
									"</font><br/><font size='3'><b>"+
									prod.produto+"</b></font></a>"+
									"<input type='hidden' name='kid' id='kid' value='"+prod.id+"'></li>";*/
							});
							html2 += "<select name='selCat' id='selCat' class='select' data-mini='true'>";
							contCat2 = -1;
							$.each(categorias, function ( i, val ){
								contCat2++;
								cat = categorias[i];
								html2 += "<option value='"+contCat2+"'>"+cat.nome+" ("+cat.qtde+")</option>";
							});
							html2 += "</select>";
						}
						if(total>2){
							$("#divRodape").toolbar("option", "position", "none");
							$("#divRodape").toolbar("refresh");
							$( "#divRodape" ).toolbar( "hide" );
						}
						$('#dataProducts').html(html);
						$('#dataProducts').listview("refresh");
						$('#dataProducts').trigger("updatelayout");

						$("#dataCategories").html(html2);
						$('#dataCategories').controlgroup("refresh", true);
						$("#dataCategories").enhanceWithin().controlgroup("refresh");
						
						$('#selCat').on('change', function(){
							sel = $( "#selCat" ).val();
							$('html, body').animate({
								scrollTop: $("#category"+sel).offset().top-200
							}, 1000);
						});
					},
					error: function(erro){
						//$("#popupError").popup("open");
					},
					complete: function(){
						$.mobile.loading( "hide" );
					},
				});
			} else {
				//$("#popupLenght").popup("open");
			}
		},
		
		init : function(){
			var callgetproducts = this.getproducts;

			$(".ui-input-clear").on("click", function() {
				html = "";
				$('#dataProducts').html(html);
				$('#dataProducts').listview("refresh");
				$('#dataProducts').trigger("updatelayout");
				$("#dataCategories").html(html);
			});
			
			$('#frmFind').on('submit', function(){
				callgetproducts();
				return false;
			});
			
			$('#btnOK').on('click', function(){
				callgetproducts();
				return false;
			});
			
			$('#product').focus();
		}
	}).init();

});