/**
 * 事件标准化函数
 */
function getEventObject(W3CEvent) {
	return W3CEvent || window.event;
}

/**
 * 兼容浏览器的鼠标x,y获得函数
 */
function getPointerPosition(e) {
	e = e || getEventObject(e);
	var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
	var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
 
	return { 'x':x,'y':y };
}

/**
 * 兼容浏览器设置透明值
 */
function setOpacity(elem,level) {
	if(elem.filters) {
		elem.style.filter = 'alpha(opacity=' + level * 100 + ')';
	} else {
		elem.style.opacity = level;
	}
}

/**
 * css设置函数,可以方便设置css值,并且兼容设置透明值
 */
function css(elem,prop) {
	for(var i in prop) {//alert(elem.style[i]);return ;
		if(i == 'opacity') {
			setOpacity(elem,prop[i]);
		} else {
			elem.style[i] = prop[i];
		}
	}
	return elem;
}

var magnifier = {
	m : null,
 
	init:function(magni){
		var m = this.m = magni || {
			cont : null,  //装载原始图像的div
			img : null,   //放大的图像
			mag : null,   //放大框
			scale : 3   //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决
		}
  
	    css(m.img,{
	    	'position' : 'absolute',
	    	'width' : (m.cont.clientWidth * m.scale) + 'px',    //原始图像的宽*比例值 
	    	'height' : parseInt(m.cont.clientHeight * m.scale+28) + 'px'    //原始图像的高*比例值
	    })
  
		css(m.mag,{
		    'display' : 'none',
		    'width' : m.cont.clientWidth + 'px',   //m.cont为原始图像,与原始图像等宽
		    'height' : m.cont.clientHeight + 'px',
		    'position' : 'absolute',
		    'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px',  //放大框的位置为原始图像的右方远10px
		    'top' : m.cont.offsetTop + 'px'
		})
  
		var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth;  //获取border的宽
 
	    css(m.cont.getElementsByTagName('div')[0],{   //m.cont.getElementsByTagName('div')[0]为浏览框
	    	'display' : 'none',        //开始设置为不可见
	    	'width' : m.cont.clientWidth / m.scale - borderWid  + 'px',   //原始图片的宽/比例值 - border的宽度
	    	'height' : m.cont.clientHeight / m.scale - borderWid -10+ 'px',  //原始图片的高/比例值 - border的宽度
	    	'opacity' : 0.6     //设置透明度
	    })

	    m.img.src = m.cont.getElementsByTagName('img')[0].src;   //让原始图像的src值给予放大图像
	    m.cont.style.cursor = 'crosshair';
 
	    m.cont.onmouseover = magnifier.start;
 	},
 
 	start:function(e){
 		if(document.all){
 			//只在IE下执行,主要避免IE6的select无法覆盖
 			magnifier.createIframe(magnifier.m.img);
 		}
  
 		this.onmousemove = magnifier.move;  //this指向m.cont
 		this.onmouseout = magnifier.end;
 	},
  
 	move:function(e){
 		var pos = getPointerPosition(e);  //事件标准化

 		this.getElementsByTagName('div')[0].style.display = '';
  
 		var w = (parseInt(window.screen.availWidth - 970))/2 + 128;
  
 		css(this.getElementsByTagName('div')[0],{
 			'top' : parseInt(182+Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight)) + 'px',
 			'left' : parseInt(w+Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth)) + 'px'   //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像
 		})
  
 		magnifier.m.mag.style.display = 'block';
 		$('#mag').css('border','1px solid #ccc');

 		css(magnifier.m.img,{
 			'display' : 'block',
 			'top' : -(parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale- 546) + 'px',
 			'left': -(parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale - 1090) + 'px'
 		})
 	},
 
 	end:function(e){
 		this.getElementsByTagName('div')[0].style.display = 'none';
 		magnifier.removeIframe(magnifier.m.img);  //销毁iframe
  
 		magnifier.m.mag.style.display = 'none';
 	},
 
 	createIframe:function(elem){
 		var layer = document.createElement('iframe');
 		layer.tabIndex = '-1';
 		layer.src = 'javascript:false;';
 		elem.parentNode.appendChild(layer);
  
 		layer.style.width = elem.offsetWidth + 'px';
 		layer.style.height = elem.offsetHeight + 'px';
 	},
 
 	removeIframe:function(elem){
 		var layers = elem.parentNode.getElementsByTagName('iframe');
 		while(layers.length >0){
 			layers[0].parentNode.removeChild(layers[0]);
 		}
 	}
}

window.onload = function(){
 magnifier.init({
       cont : document.getElementById('magnifier0'),
       img : document.getElementById('magnifierImg'),
       mag : document.getElementById('mag'),
       scale : 3
       });
}

var showDetailImg = function(id){	
	 magnifier.init({
       cont : document.getElementById('magnifier'+id),
       img : document.getElementById('magnifierImg'),
       mag : document.getElementById('mag'),
       scale : 3
       });
}