var OverPanel = new Class({
    initialize: function(sensorEl){
    	 
		if(!sensorEl) return;
        this._sensorEl = sensorEl;
        this._el = $(sensorEl.get('rel'));
        if(!this._el) return;
        
        this._sensorEl.addEvent('mouseenter', this._onEnter.bind(this));
        this._sensorEl.addEvent('mouseleave', this._onLeave.bind(this));
        
        this._el.addEvent('mouseenter', this._onEnter.bind(this));
        this._el.addEvent('mouseleave', this._onLeave.bind(this));
        this._el.inject(document.body, 'top');
   	
   			options = {
 				relativeTo: this._sensorEl,        				
	 				position: 'bottomLeft'
 				}    		
        
        this._hideTimer = null;
       
    },
    _onEnter: function() {
    	$clear(this._hideTimer);
    	this._el.setStyle('display', 'block'); 
    	this._el.setPosition(this._sensorEl.getPosition());   
    	this._el.fade('show');
    },
    _onLeave: function() {    	
    	this._hideTimer = this._hide.delay(300, this);
    },
    _hide: function() {    	
    	this._el.fade('out');    	
    }
});

var FieldOff = new Class({
    initialize: function(el){
		if(!el) return;
        this._el = el;
        this._cbClick = this._onClick.bind(this);
        this._el.addEvent('focus', this._cbClick);	
    },
    _onClick: function() {    	
    	if(!this._el.hasClass('field_off')) return;
    	this._el.set('value','');
    	this._el.removeClass('field_off');	
    	this._el.removeEvent('focus', this._cbClick);	
    }
});

//** INIT **//
window.addEvent('domready', function() {
   var els = $$('.overpanel_sensor');
   els.each(function(item, index){
    	var overpanel = new OverPanel(item);
    });

   var els = $$('.field_off');
   	els.each(function(item, index){
    	var field = new FieldOff(item);
    });
});