//Это УТФ суко!
Ext.ns('Ext.ux.ImgBox');
Ext.ux.ImgBox = Ext.extend(Ext.util.Observable, {
	matchHref: new RegExp('(.*)\?iid=(.*)&w=(.*)&h=(.*)', 'im'),
	boxTpl: new Ext.Template(
		'<div class="ux-imgbox-ctrl">',
			'<div class="ux-imgbox-info"></div>',
			'<span class="ux-imgbox-close"><img src="/images/closelabel.gif" /></span>',
		'</div>',
		'<div class="ux-imgbox-imgcnt">',
			'<img class="ux-imgbox-img" src="/images/blank.gif" />',
			'<div class="ux-imgbox-prev"><a href="#"><img src="/images/p.gif" /></a></div>',
			'<div class="ux-imgbox-next"><a href="#"><img src="/images/p.gif" /></a></div>',
		'</div>',
		'<div class="ux-imgbox-descr"></div>'
	),
	infoTpl: 'Изображение {id} из {total}',
	activeSelector: 'a.imgbox',
	width: 100,
	height: 100,
    constructor: function( config ) {
        config = config || {};
        this.addEvents(
            'beforeprev',
            'prev',
            'beforenext',
            'next',
            'beforeshow',
            'show',
            'load'
        );

        Ext.apply(this, config);
        Ext.ux.ImgBox.superclass.constructor.call(this, config);

        this.initMarkup();
        this.initEvents();
		this.activeImg = -1;
    },
	initMarkup: function imgBox(){
		var dh = Ext.DomHelper,
			el = dh.append(Ext.getBody(), {cls: 'ux-imgbox'}, true);
		el.setVisibilityMode(Ext.Element.DISPLAY);
		el.hide();
		if(typeof this.boxTpl == "string"){
			this.boxTpl = new Ext.Template(this.boxTpl);
		}
		this.boxTpl.append(el, {});
		if(typeof this.infoTpl == "string"){
			this.infoTpl = new Ext.Template(this.infoTpl);
		}
		this.el = {};
		this.el.cnt = el;
		this.el.info = el.select('.ux-imgbox-info').item(0);
		this.el.img = el.select('img.ux-imgbox-img').item(0);
		this.el.imgcnt = el.select('.ux-imgbox-imgcnt').item(0);
		this.el.descr = el.select('.ux-imgbox-descr').item(0);
		this.el.prev = el.select('.ux-imgbox-prev').item(0);
		this.el.next = el.select('.ux-imgbox-next').item(0);
		this.el.close = el.select('.ux-imgbox-close').item(0);
		this.preload = Ext.get(document.createElement('IMG'));
	},
	initEvents: function() {
		this.preload.on('load', this.ev_preload, this);
		if (this.el.close) {
			this.el.close.on('click', this.ev_close, this);
		}
		if (this.el.prev) {
			this.el.prev.on('click', this.ev_prev, this);
		}
		if (this.el.next) {
			this.el.next.on('click', this.ev_next, this);
		}
		Ext.select(this.activeSelector).on('click', this.ev_show, this);
	},
	ev_show: function(e, t){
		e.stopEvent();
		var el = e.getTarget(this.activeSelector, 10, true)
		this.galId = el.getAttribute('gal_id');
		this.gallery = this.galId ? Ext.select('a[gal_id='+this.galId+']') : new Ext.CompositeElementLite([el]);
		Ext.getBody().mask().on('click', this.ev_close, this, {single: true});
		this.el.cnt.show();
		this.el.cnt.center();
		this.el.cnt.repaint();
		this.setImg(this.gallery.indexOf(el));
	},
	ev_close: function(e, t){
		this.el.cnt.hide();
		Ext.getBody().unmask();
	},
	ev_prev: function(e, t){
		e.stopEvent();
		var el = e.getTarget('a', 10, true)
		el.blur();
		this.setImg(this.activeImg - 1);
	},
	ev_next: function(e, t){
		e.stopEvent();
		var el = e.getTarget('a', 10, true)
		el.blur();
		this.setImg(this.activeImg + 1);
	},
	ev_preload: function(){
		this.el.imgcnt.removeClass('loading');
		this.el.img.dom.src = this.preload.dom.src;
		this.el.img.show();
		this.el.imgcnt.setSize(this.preload.dom.width, this.preload.dom.height);
		this.el.img.setSize(this.preload.dom.width, this.preload.dom.height);
		this.el.cnt.center();
		this.el.cnt.repaint();
	},
	setImg: function(id){
		if (id >= 0 && id < this.gallery.getCount()) {
			this.activeImg = id;
			this.el.imgcnt.addClass('loading');
			this.el.img.hide();
			this.preload.dom.src = this.gallery.item(this.activeImg).getAttribute('href');
			this.updateNav();
		}
	},
	updateNav: function(){
		if (this.el.info && this.infoTpl) {
			this.infoTpl.overwrite(this.el.info, {id: this.activeImg+1, total: this.gallery.getCount()});
		}
		if (this.el.descr) {
			this.el.descr.dom.innerHTML = this.gallery.item(this.activeImg).getAttribute('title');
		}
		this.el.prev.setVisible(this.activeImg > 0);
		this.el.next.setVisible(this.activeImg+1 < this.gallery.getCount());
	}
});