ProductView = function() {
	return {
		init: function() {
			this.loadingIcon = Ext.get('shop-loading-icon');
		},
		showLoadingIconIf: function() {
			if (!this.loadingIcon) return;
			if (this.loadingIcon.isVisible()) return;
			if (!this.showLoadingIconFn) this.showLoadingIconFn = this.showLoadingIcon.createDelegate(this);
			this.showLoadingIconTimeout = window.setTimeout(this.showLoadingIconFn, 500);
		},
		showLoadingIconIf: function() {
			if (!this.loadingIcon) return;
			if (this.loadingIcon.isVisible()) return;
			this.loadingIcon.show(true);
		},
		hideLoadingIcon: function() {
			if (!this.loadingIcon) return;
			if (!this.loadingIcon.isVisible()) return;
			window.clearTimeout(this.showLoadingIconTimeout);
			this.loadingIcon.hide(true);
		}
	}
}();
Ext.onReady(ProductView.init, ProductView);

ShopImgZoom = function() {
	return {
		init: function() {
			if (this.initiated) return;
			this.initiated = true;
			this.layer = Ext.get('main-ct').createChild({tag: 'div', cls: 'product-img-zoom-layer'});
			this.layer.createChild({tag: 'div', cls: 'product-img-zoom-close-tip product-img-zoom-close-tip-top', html: t('Click on the picture to close')});
			this.layer.createChild({tag: 'div', cls: 'product-img-zoom-close-tip product-img-zoom-close-tip-bottom', html: t('Click on the picture to close')});
			this.img = this.layer.createChild({tag: 'img'});
			this.waitMsgEl = this.layer.createChild({tag: 'div', cls: 'product-img-zoom-wait-msg', html: 'Please wait...'});
			this.doc = Ext.get(document.body);
		},
		activate: function(imgSrc) {
			this.init();
			ProductView.showLoadingIconIf();
			this.img.hide();
			this.waitMsgEl.show();
			this.layer.show(true);
			this.layerXY = this.layer.getXY();
			var vh = Ext.lib.Dom.getViewHeight();
			//var layerHeight = vh-this.layerXY[1] + this.layer.getBorderWidth('b');
			var layerHeight = Ext.get('main-ct').getHeight(); 
			this.layer.setHeight(layerHeight);
			//Ext.get('main-ct').setStyle('min-height', layerHeight+'px')
			this.layerW = this.layer.getWidth();
			this.layerH = this.layer.getHeight();
			ShopImgLoader.loadImg(imgSrc, this.onImgLoaded, this);
			this.afterActivate.defer(1, this);
		},
		onImgLoaded: function(src, w, h) {
			this.imgW = w;
			this.imgH = h;
			this.leastW = Math.min(this.imgW, this.layerW);
			this.leastH = Math.min(this.imgH, this.layerH);
			this.img.dom.src = src;
			this.waitMsgEl.hide(true);
			this.img.show(true);
			this.doc.on('mousemove', this.onMousemove, this);
			this.onMousemove(Ext.EventObject);
			var scrollEl = Ext.get(document.documentElement || document.body);
			scrollEl.scrollTo('top', 0, true);
			ProductView.hideLoadingIcon();
		},
		afterActivate: function() {
			Ext.get(document.body).on('click', this.deactivate, this);
		},
		deactivate: function() {
			ShopImgLoader.stopLoad();
			this.waitMsgEl.hide();
			ProductView.hideLoadingIcon();
			this.doc.un('mousemove', this.onMousemove, this);
			Ext.get(document.body).un('click', this.deactivate, this);
			this.layer.hide({callback: this.afterDeactivate, scope: this});
		},
		afterDeactivate: function() {
			//Ext.get('main-ct').setStyle('min-height', '')
			this.img.hide();
			this.layer.setDisplayed(false);
		},
		onMousemove: function(e) {
			var xy = e.getXY();
			if (!xy) return;
			var padding = 20;
			var x = Math.min(Math.max(xy[0] - this.layerXY[0], padding), this.layerW - padding);
			var y = Math.min(Math.max(xy[1] - this.layerXY[1], padding), this.layerH - padding);
			x = - (x-padding)/(this.layerW-2*padding) * (this.imgW-this.leastW) + (this.layerW - this.leastW)/2;
			y = - (y-padding)/(this.layerH-2*padding) * (this.imgH-this.layerH) + (this.layerH - this.leastH)/2;
			this.img.setStyle({
				left: Math.round(x)+'px',
				top: Math.round(y)+'px'
			});
		}
	}
}();
ShopImgLoader = function() {
	return {
		init: function() {
			if (this.initiated === true) return;
			this.initiated = true;
			this.ct = Ext.DomHelper.append(document.body, {tag: 'div', style: 'visibility: hidden; position: absolute;'}, true);
			this.checkLoadedFn = this.checkLoaded.createDelegate(this);
		},
		loadImg: function(src, callback, scope) {
			this.init();
			this.stopLoad();
			this.isLoading = true;
			this.src = src;
			this.callback = callback;
			this.scope = scope;
			this.img = this.ct.createChild({tag: 'img', src: src});
			this.checkLoaded();
		},
		checkLoaded: function() {
			if (this.img.dom.complete) {
				var w = this.img.dom.width;
				var h = this.img.dom.height;
				this.stopLoad();
				Ext.callback(this.callback, this.scope, [this.src, w, h]);
				return;
			}
			this.setTimeout();
		},
		setTimeout: function() {
			this.timeout = window.setTimeout(this.checkLoadedFn, 100);
		},
		stopLoad: function() {
			if (this.isLoading !== true) return;
			window.clearTimeout(this.timeout);
			this.img.remove();
			this.isLoading = false;
		}
	}
}();