ImageZoomerClass = function(config) {
	this.id = 'imgZoom';
	this.title = 'Abbildung Zoom';
	this.closeText = 'Schliessen';
	this.closeButton = '/images/cross.png';
	this.dropShadow = true;
	this.grayOut = true;
	this.loadingMsg = 'Abbildung wird geladen. Bitte warten...';
	this.loadingImgUrl = '/images/wait.gif';
	
	Ext.apply(this, config);
};

Ext.override(ImageZoomerClass, {
	showEntityImg : function(eid, aid, id, w, h) {
		this.showImg('/shop/GetImage.jpg?eid=' + eid + '&aid=' + aid + '&id=' + id, w, h);
	},
	
	showImg : function(url, w, h) {
		//preload image
		this.img = new Image;
		this.img.src = url;
		
		//create image zoom division
		this.createDiv();
		//this.el.update('Preload...<br>');
		
		//init preload check task
		this.checkCount = 0;
		this.checkImageTask = new Ext.util.DelayedTask(this.checkImage, this, [w, h]);
		this.checkImageTask.delay(250);
	},
	
	checkImage : function(w, h) {
		if (!this.img.complete) {
			//this.el.insertHtml('beforeEnd', 'waiting for image to load...<br>');
			if (this.checkCount < 250 && this.el) {
				this.checkImageTask.delay(250);
				this.checkCount ++;
			}
		} else {
			this.displayImg(w, h);
		}
	},
	
	displayImg : function(rw, rh) {
		if (this.el && this.elContent) {
			var w = this.img.width;
			var h = this.img.height;
			
			if (rw > 0 && rh > 0) { w=rw; h=rh; }
			
			//alert(w + '/' + h);
			
			var v = Ext.getBody().getViewSize();
			var elW = w + 25;
			var elH = h + 25 + this.elTbar.getHeight();
			
			if (elW > v.width) { elW = v.width - 40; }
			if (elW < 400) { elW = 400; }
			if (elH > v.height) { elH = v.height - 40; }
			if (elH < 60) { elH = 60; }
			
			this.elContent.setVisibilityMode(Ext.Element.DISPLAY);
			this.elContent.hide();
			this.el.setSize(elW, elH);
			this.el.alignTo(Ext.getBody(), 'c-c');
			if (this.elShadow) { this.elShadow.setSize(elW, elH); this.elShadow.alignTo(this.el, 'tl-tl', [4, 4]); }
			this.elContent.setSize(this.el.getWidth(true), this.el.getHeight(true) - this.elTbar.getHeight());
			this.elContent.update('<img src=\"' + this.img.src + '\" width=' + w + ' height=' + h + '>');
			this.elContent.show();
		}
	},
	
	createDiv : function() {
		this.close();
		
		//gray out page
		if (this.grayOut) {
			var b = Ext.getBody();
			this.elGrayOut = Ext.DomHelper.insertFirst(b, {
				id: 'ajax_gray_out', 
				tag: 'div', 
				style: 'background-color:black;position:absolute;z-index:998;opacity:0.3;MozOpacity:0.3;filter=alpha(opacity=30);top:0px;left:0px;overflow:none;'
			}, true);
			var s = b.getViewSize();
			if (s.width > b.dom.scrollWidth) { this.elGrayOut.setWidth(s.width); } else { this.elGrayOut.setWidth(b.dom.scrollWidth); }
			if (s.height > b.dom.scrollHeight) { this.elGrayOut.setHeight(s.height); } else { this.elGrayOut.setHeight(b.dom.scrollHeight); }
		}
		
		//create shadow
		if (this.dropShadow) {
	  		this.elShadow = Ext.DomHelper.append(Ext.getBody(), {
	  			tag: 'div',
	  			style: 'position:absolute;background-color: #333333;opacity:0.3;MozOpacity:0.3;filter=alpha(opacity=30);display:none;z-index:998;',
	  			html: '<img src=\"/images/spacer.gif\" width=1 height=1>'
	  		}, true);
	   	}
		
		//create outer frame
		this.el = Ext.DomHelper.append(Ext.getBody(), {
			id: this.id + '_frame',
			tag: 'div',
			style: 'position:absolute;overflow:none;height:60px;width:450px;background-color:white;border:solid 1px black;display:none;z-index:999;'
		}, true);
		
		//create titlebar
		this.elTbar = Ext.DomHelper.append(this.el, {
			id: this.id + '_tbar',
			tag: 'div',
			style: 'height:22px;border-bottom:solid 1px black;background-color:#eeeeee;padding-left:5px;padding-top:2px;padding-right:5px;'
		}, true);
		
		//create title
		this.elTitle = Ext.DomHelper.append(this.elTbar, {
			id: this.id + '_title',
			tag: 'div',
			style: 'font-family:Arial,Helvetica;font-size:13px;font-weight:bold;float:left',
			html: this.title
		}, true);
		
		//create close button
		var sClose = '';
		if (this.closeButton) {
			sClose += '<img src=\"' + this.closeButton + '\" border=\"0\" align=\"absmiddle\" width=\"16\" height=\"16\">';
		}
		if (this.closeText) {
			sClose += '&nbsp;' + this.closeText;
		}
		
		this.elClose = Ext.DomHelper.append(this.elTbar, {
			id: this.id + '_close',
			tag: 'div',
			style: 'font-family:Arial,Helvetica;font-size:13px;float:right;cursor:pointer',
			html: sClose
		}, true);
		
		//create content panel with loading message
		var sMsg = '';
		if (this.loadingImgUrl) {
			sMsg += '<img src=\"' + this.loadingImgUrl + '\" align=\"absmiddle\" width=18 height=18>&nbsp;&nbsp;';
		}
		sMsg += this.loadingMsg;
		
		this.elContent = Ext.DomHelper.append(this.el, {
			id: this.id + '_content',
			tag: 'div',
			style: 'font-family:arial,helvetica;font-size:13px;font-weight:normal;text-align:center;padding:10px;overflow:auto;',
			html: sMsg
		}, true);

		//show and set position
		this.el.show();		
		this.el.alignTo(Ext.getBody(), 'c-c');
		this.elContent.setSize(this.el.getWidth(true), this.el.getHeight(true) - this.elTbar.getHeight());
		
		if (this.elShadow) {
			this.elShadow.setSize(this.el.getWidth(), this.el.getHeight());
			this.elShadow.show();
			this.elShadow.alignTo(this.el, 'tl-tl', [4, 4]);
		}
		
		
		//add events
		this.elClose.on('click', this.close, this);
	},
	
	close : function() {
		if (this.elShadow) {
			this.elShadow.remove();
			this.elShadow = null;
		}
		if (this.el) {
			this.el.remove();
			this.el = null;
		}
		if (this.elGrayOut) {
			this.elGrayOut.remove();
			this.elGrayOut = null;
		}
	}
});

var imgZoomer = new ImageZoomerClass;