// Plugin de Jquery, muestra una caja de texto cuando se pasa el mouse sobre algun link
// Hecho por Bernabe Garro
// Email/Facebook: bernabegh@gmail.com

(function($){
	$.fn.Bplugin = function(valores){
		var defaults = {
			texto: 		'',
			estilo: 	'default',
			fondo: 		'#ffffff',
			width: 		'50',
			evento:		'mouseover',
			sumarderecha: 0,
			sumartop: 0
		};
		
		var optionsx = $.extend(defaults, valores);
		
		return this.each(function(){
			$(this).bind(optionsx.evento, init);
		});
		
		function init(ev){

			var idtip=$(this).attr('id')+'box';
			var closex=$(this).attr('id')+'close';
			
			var tip='<div id="'+idtip+'" style="display:none; position: absolute; padding:0px; border:0px solid #666; opacity:0.1"><div style="position: absolute; right:5px; top:5px;" id="'+closex+'"><img src="estilos/'+optionsx.estilo+'/close.png" width="13" border="0"></div><table cellpadding="0" cellspacing="0" border="0"><tr><td width="1"><img src="estilos/'+optionsx.estilo+'/topLeft.png"></td><td background="estilos/'+optionsx.estilo+'/top.png"></td><td width="1"><img src="estilos/'+optionsx.estilo+'/topRight.png"></td></tr><tr><td background="estilos/'+optionsx.estilo+'/left.png"></td><td bgcolor="'+optionsx.fondo+'" valign="top" width='+optionsx.width+'>'+optionsx.texto+'</td><td background="estilos/'+optionsx.estilo+'/right.png"></td></tr><tr><td><img src="estilos/'+optionsx.estilo+'/btnLeft.png"></td><td background="estilos/'+optionsx.estilo+'/bottom.png"></td><td><img src="estilos/'+optionsx.estilo+'/btnRight.png"></td></tr></table></div>';
			

			ev.preventDefault();
			$("#"+idtip).remove();
			$("body").append(tip);
			
			//Margen X
			if(ev.pageX+$("#"+idtip).width()>$(document).width()){
				$("#"+idtip).css("left",ev.pageX-($("#"+idtip).width()+20));
			}
			else{
				$("#"+idtip).css("left",ev.pageX-($("#"+idtip).width()/4));
			}
			// validar ke no se salga del margen izkierdo, si se sale coloca el div a 10 pixeles del margen
			if(ev.pageX-$("#"+idtip).width()<=0){
				$("#"+idtip).css("left",10+optionsx.sumarderecha);
			}
			
			// Margen Y
			if(ev.pageY-$("#"+idtip).height()<0){ // cuando esta en bottom
				 $("#"+idtip).css("top",ev.pageY+3+optionsx.sumartop);
			}
			else{
				$("#"+idtip).css("top",ev.pageY-($("#"+idtip).height()+5)+optionsx.sumartop);	
			}
			
			// Validar navegador	
			if($.browser.msie){ // si es mierdaexplorer la animacion se ve orrible
				$("#"+idtip).show("slow")
			}
			else{ // probado con Firefox, Google Chrome, Opera y Safari, en todos funciona bien
				$("#"+idtip).animate({
					opacity: 0.99,
					left: '+=0',
					top: '-=5',
					height: 'swing'
				}, 200)
				
			}
			
			// Se cierra cuando pasa el mouse sobre la X
			$("#"+closex).mouseover(function(){$("#"+idtip).fadeOut(250);})
		};
		
	}
})(jQuery);

