// TODO: Расширить нужный элемент чел. образом
/**
 * Overlay class for popup windows
 */
Ext.Overlay = Ext.extend(Ext.Element,{

container:null,

constructor: function(){
	var el=document.createElement('div');
	// TODO: добавить вверху документа
	this.container=Ext.get(el);
	this.container.setStyle('background-color','#000000');
	this.container.setStyle('position','absolute');
	this.container.setOpacity('0.7');
	this.container.addClass('overlay');
	this.container.setWidth('100%');
	this.container.setHeight('0px');
	this.container.setStyle('top', '0px');
	this.container.setStyle('z-index','50');
	Ext.getBody().appendChild(el);
},


show: function() {
	if ( this.container ) {
		this.container.setHeight(Ext.getBody().getHeight());
	};
},

hide: function() {
	if ( this.container ) {
		this.container.setHeight('0px');
	}
}

});

/**
 * Class for popup windows. Using Overlay class.
 */
Ext.Popup = Ext.extend(Ext.Element,{

container:null,
Overlay:null,
_is_opened:false,

constructor: function(el){
	if (el) {
		this.container=Ext.get(el);
		this.container.on('click', this.close, this)
	}
},

open:function() {
	if (!this._is_opened) {
		if ( this.Overlay ) {this.Overlay.show()}
		this.container.setDisplayed('block');
		// TODO: сделать по человечески scroll
		var scroll_y = Ext.get(document).getScroll().top;
		var maxx = Ext.lib.Dom.getViewWidth() - this.container.getWidth(),
			maxy = Ext.lib.Dom.getViewHeight() - this.container.getHeight();
		this.container.moveTo(maxx/2.,maxy/2.+scroll_y,'t');
		this.container.setStyle('z-index','100');
		this.container.toggleClass('active');
		this.container.focus();
		this.Overlay.container.on('click', this.close, this)
		this._is_opened = true;
	}
},

close:function() {
	if (this._is_opened) {
		if ( this.Overlay ) {this.Overlay.hide()};
		this.container.toggleClass('active');
		this.container.setDisplayed('none');

		this._is_opened = false;
	}
},

toggle:function() {
	if ( this._is_opened ) {
		this.close()
	} else {
		this.open()
	}
}

});


Ext.onReady(function(){
	var Overlay = new Ext.Overlay();
	
	Ext.select('.popup-active').each(function(elem){
		elem.on('click', function(ev) {
			ev.preventDefault();
		
			var target = ev.getTarget();
			target=Ext.get(target);
			target.blur();

			var container = target.parent('div').select(".popup-block").elements[0];
				container = Ext.get(container);
	
			if (!target.popup) {
				target.popup = new Ext.Popup(container);
				target.popup.Overlay = Overlay;
			}
			target.popup.open();
		}, this)
	})
})