/************************************** 放大镜组件 ***************************************/
Ext.ns('Ext.gzj');
Ext.gzj.Zoom = Ext.extend(Ext.util.Observable, {
	initX: 0,                           //放大镜x坐标的初始值
	initY: 0,                           //放大镜y坐标的初始值
	zoomWidth: 170,                     //放大镜的宽度
	zoomHeight: 170,                    //放大镜的高度
	//组件的构造方法
    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);
        Ext.gzj.Zoom.superclass.constructor.call(this, config);		
		this.picture = Ext.get(elId);      //获取图片对象       
		this.initMarkup();                 //初始化组件
		this.initEvents();                 //初始化事件
    },
	//方法：初始化组件
    initMarkup: function() {
		if(!this.picture || !this.zoompic)return;
		this.zoompic = Ext.get(this.zoompic);
		//获取放大的比例系数
		this.getBili();
		//创建图片的外包
		this.pictureWrap = this.picture.wrap();
		this.pictureWrap.setStyle({
			position: 'relative',
			width: this.picture.getWidth() + 'px',
			height: this.picture.getHeight() + 'px'
		});
		//创建放大镜
		this.zoom = this.pictureWrap.createChild({ tag: 'p' }, this.picture.first());
		this.zoom.setStyle({
			position: 'absolute',
			left: this.initX + 'px',
			top: this.initY  + 'px',
			width: this.zoomWidth + 'px',
			height: this.zoomHeight + 'px',
			border: '#fff solid 1px',
			background: '#999',
			opacity: 0.35
		});
		//设置放大图片的背景
		this.setPicBackground(this.initX, this.initY);
    },
	//方法：初始化事件
    initEvents: function() {
		if(!this.picture || !this.zoompic)return;

		if(!this.picbar)return;
		this.picbar = Ext.get(this.picbar);
		this.picbar.setDisplayed(false);

		this.pictureWrap.on('mousemove', function(ev){             //鼠标在图片上移动的事件
			this.picbar.setDisplayed(true);
			var x = ev.getPageX() - this.picture.getX() - this.zoomWidth/2;
			var y = ev.getPageY() - this.picture.getY() - this.zoomHeight/2;
			if(x < 0) x = 0;
			if(y < 0) y = 0;
			if(x > this.offsetx) x = this.offsetx;
			if(y > this.offsety) y = this.offsety;			
			//设置放大图片的背景
			this.setPicBackground(x, y);
			//设置放大镜的位置
			this.setZoom(x, y);
		}, this);
		this.pictureWrap.on('mouseleave', function(ev){            //鼠标离开图片的事件 
			this.picbar.setDisplayed(false);
		}, this);
    },
	//方法：获取放大的比例系数
	getBili: function() {
		var currentWidth = this.picture.dom.width;
		var currentHeight = this.picture.dom.height;
		//获取放大图片坐标的活动范围值
		this.picture.setWidth('auto');
		this.picture.setHeight('auto');
		var offsetx2 = this.picture.dom.width - this.zoompic.getWidth();
		var offsety2 = this.picture.dom.height - this.zoompic.getHeight();
		//获取放大镜坐标的活动范围值
		this.picture.setWidth(currentWidth + 'px');
		this.picture.setHeight(currentHeight + 'px');
		this.offsetx = currentWidth - this.zoomWidth;
		this.offsety = currentHeight - this.zoomHeight;		
		//计算坐标放大的比例系数
		this.xBili = offsetx2 / this.offsetx;
		this.yBili = offsety2 / this.offsety;
	},
	//方法：设置放大图片的背景
	setPicBackground: function(x, y) {
		var xx = x * this.xBili;
		var yy = y * this.yBili;
		this.background = 'url(' + this.picture.dom.src + ') -' + xx + 'px -' + yy + 'px no-repeat';
		this.zoompic.setStyle({
			background: this.background
		});
	},
	//方法：设置放大镜的位置
	setZoom: function(x, y) {
		this.zoom.setLeft(x);
		this.zoom.setTop(y);
	}
});