var flag = true;
var num = 0;

function addtag() {
	num++;
	if(num > 20) {
		$('.taggearpic').css('color', '#000000');
		$('.taggearpic').css('background-color', '#EFEFEF');
		$('.taggearpic').css('cursor', 'default');
		$('.taggearpic').html("Se puede crear un máximo de 20 etiquetas por imagen");
		return;
	} else {
		flag = true;
		var IE = document.all?true:false;
		var tempX = 0;
		var tempY = 0;
		var posicion = $("img.foto").offset();
		var imgX = posicion.left;
		var imgY = posicion.top;
		$('img.foto').css('cursor', 'crosshair');
		$('.taggearpic').css('color', '#000000');
		$('.taggearpic').css('background-color', '#EFEFEF');
		$('.taggearpic').css('cursor', 'default');
		$('.taggearpic').html("HAZ CLICK EN LA IMAGEN PARA AGREGAR LA ETIQUETA");
		$('img.foto').click(function(e){
			if (flag == true) {
				if (IE) {
					tempX = e.pageX;
					tempY = e.pageY;
					if (tempX < 0) tempX = 0;
					if (tempY < 0) tempY = 0;
					$("body").append("<div id='tag"+num+"'><img src='template/img/icons/tag_number/numero"+num+".png' alt='' /></div>");
					$("body").append("<input type='hidden' name='tposX"+num+"' value='"+(tempX-imgX)+"' />");
					$("body").append("<input type='hidden' name='tposY"+num+"' value='"+(tempY-imgY)+"' />");
					$("#tag"+num+"").css('left', tempX - 18);
					$("#tag"+num+"").css('top', tempY - 23);
					$("#tag"+num+"").fadeIn(300);
					$('img.foto').css('cursor', 'default');
					$('.taggearpic').css('color', '#FFFFFF');
					$('.taggearpic').css('background-color', '#FF0066');
					$('.taggearpic').css('cursor', 'pointer');
					$('.taggearpic').html('<span onclick="addtag()">HAZ CLICK AQUI PARA AGREGAR OTRA ETIQUETA</span>');
					if(num == 1) {
						$("#tags").append('<h3>CATEGORIA <span class="asterisco">*</span><span style="margin-left:160px;"> MARCA <span class="asterisco">*</span></span></h3>');
						$("#tags").append('<span class="bajada_titulo">Escribe el tipo de prenda ( jeans, polera, etc.)<span style="margin-left:13px;">Cual es la marca o origen de tu prenda</span></span><br />');
						$("#tags").append('<div id="datoTag'+num+'">'+num+' <input id="categoria'+num+'" class="campo requerido" name="categoria'+num+'" type="text" maxlength="60" /> <input id="marca'+num+'" class="campo requerido" name="marca'+num+'" type="text" maxlength="60" /> <input id="borrar'+num+'" type="button" class="boton" value="BORRAR" onclick="borrar('+num+')" /></div>');
						$("#tags").append("<input type='hidden' name='tposX"+num+"' value='"+(tempX-imgX)+"' />");
						$("#tags").append("<input type='hidden' name='tposY"+num+"' value='"+(tempY-imgY)+"' />");
						$("#categoria"+num+"").autocomplete(categorias);
						$("#marca"+num+"").autocomplete(marcas);
					} else {
						$("#tags").append('<div id="datoTag'+num+'">'+num+' <input id="categoria'+num+'" class="campo requerido" name="categoria'+num+'" type="text" maxlength="60" /> <input id="marca'+num+'" class="campo requerido" name="marca'+num+'" type="text" maxlength="60" /> <input id="borrar'+num+'" type="button" class="boton" value="BORRAR" onclick="borrar('+num+')" /></div>');
						$("#tags").append("<input type='hidden' name='tposX"+num+"' value='"+(tempX-imgX)+"' />");
						$("#tags").append("<input type='hidden' name='tposY"+num+"' value='"+(tempY-imgY)+"' />");
						$("#categoria"+num+"").autocomplete(categorias);
						$("#marca"+num+"").autocomplete(marcas);
					}
					flag = false;
				}
				else {
					tempX = e.pageX;
					tempY = e.pageY;
					if (tempX < 0) tempX = 0;
					if (tempY < 0) tempY = 0;
					$("body").append("<div id='tag"+num+"'><img src='template/img/icons/tag_number/numero"+num+".png' alt='' /></div>");
					$("body").append("<input type='hidden' name='tposX"+num+"' value='"+(tempX-imgX)+"' />");
					$("body").append("<input type='hidden' name='tposY"+num+"' value='"+(tempY-imgY)+"' />");
					$("#tag"+num+"").css('left', tempX - 16);
					$("#tag"+num+"").css('top', tempY - 62);
					$("#tag"+num+"").fadeIn(300);
					$('img.foto').css('cursor', 'default');
					$('.taggearpic').css('color', '#FFFFFF');
					$('.taggearpic').css('background-color', '#FF0066');
					$('.taggearpic').css('cursor', 'pointer');
					$('.taggearpic').html('<span onclick="addtag()">HAZ CLICK AQUI PARA AGREGAR OTRA ETIQUETA</span>');
					if(num == 1) {
						$("#tags").append('<h3>CATEGORIA <span class="asterisco">*</span><span style="margin-left:160px;"> MARCA <span class="asterisco">*</span></span></h3>');
						$("#tags").append('<span class="bajada_titulo">Escribe el tipo de prenda ( jeans, polera, etc.)<span style="margin-left:13px;">Cual es la marca o origen de tu prenda</span></span><br />');
						$("#tags").append('<div id="datoTag'+num+'">'+num+' <input id="categoria'+num+'" class="campo requerido" name="categoria'+num+'" type="text" maxlength="60" /> <input id="marca'+num+'" class="campo requerido" name="marca'+num+'" type="text" maxlength="60" /> <input id="borrar'+num+'" type="button" class="boton" value="BORRAR" onclick="borrar('+num+')" /></div>');
						$("#tags").append("<input type='hidden' name='tposX"+num+"' value='"+(tempX-imgX)+"' />");
						$("#tags").append("<input type='hidden' name='tposY"+num+"' value='"+(tempY-imgY)+"' />");
						$("#categoria"+num+"").autocomplete(categorias);
						$("#marca"+num+"").autocomplete(marcas);
					} else {
						$("#tags").append('<div id="datoTag'+num+'">'+num+' <input id="categoria'+num+'" class="campo requerido" name="categoria'+num+'" type="text" maxlength="60" /> <input id="marca'+num+'" class="campo requerido" name="marca'+num+'" type="text" maxlength="60" /> <input id="borrar'+num+'" type="button" class="boton" value="BORRAR" onclick="borrar('+num+')" /></div>');
						$("#tags").append("<input type='hidden' name='tposX"+num+"' value='"+(tempX-imgX)+"' />");
						$("#tags").append("<input type='hidden' name='tposY"+num+"' value='"+(tempY-imgY)+"' />");
						$("#categoria"+num+"").autocomplete(categorias);
						$("#marca"+num+"").autocomplete(marcas);
					}
					flag = false;
				}
			}
		});
	}
}

function borrar(obj) {
	var nombreDiv = "#datoTag"+obj;
	var tag = "#tag"+obj;
	$(nombreDiv).remove();
	$(tag).remove();	
}