window.addEvent('domready', function() {
	new suggestBox({
		input: "querytel",
		suggestColor:'#F0FBF3',
		suggestOpacity:.8
	});
});

var suggestBox = new Class({
	Implements: Options,
	options: {
		input : '',
		suggestColor:'',
		suggestOpacity:.8
	},	
	initialize: function(options){	
		this.setOptions(options);
		var input = $(this.options.input);
		$(input).addEvent('keyup', function(){this.createBox(input)}.bindWithEvent(this, input) );
		$(input).addEvent('blur', function(){this.closeBox(input)}.bindWithEvent(this, input) );
	},
	createBox: function(input){
		
		var suggestColor = this.options.suggestColor;
		var suggestOpacity = this.options.suggestOpacity;
		var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 3);
		if (!($("suggestBox"))){ 
		
			new Element('div', {transition: myTransition.easeOut,'styles': {'padding':input.getStyle("padding").toInt(),'width':input.getStyle("width").toInt(),'opacity': 0,'position':'absolute','top':input.getStyle("top").toInt(),'left':input.getStyle("left").toInt(),'z-index':99999999,'border':'1px solid', 'border-color':input.getStyle("border-color"),'border-top':'none'},'id': 'suggestBox'}).inject("center").morph({'opacity': suggestOpacity, 'background-color': suggestColor});	

		}
		
		new Request({url: "../functions/telefones.php", method: 'get',
			onSuccess:function(resp){	
					$("suggestBox").set("html",resp)
			},	
		}).send("qry="+input.get("value") );
		
		
	},
	closeBox: function(input){
		if ($("suggestBox")){
				
				var fx = new Fx.Morph('suggestBox', {duration: 800});
				$$("#suggestBox div").each(function(div){
					var fx2 = new Fx.Morph(div, {duration: 200});
					fx2.start({	'height':0,'opacity':0})
				})
					fx.start({	'height':0,'opacity':0}).chain(function(){$("suggestBox").destroy(this)});
			
			}
	}
	

});
suggestBox.implement(new Options, new Events);