/**************************************************
 * 用法：<img src="1.jpg" class="zoom" big="1.jpg">
 <script>zoom({width:300,height:300});</script> width,height是放大显示的区域

 **************************************************/

//定义所有的变量，方法
var zoom = function(o){
	var d = document,
	db=document.body,
	timgs=d.getelementsbytagname('img'),
	opt = {
		width:200,
		height:200,
		offset:20,
		float:'right',
		minwidth:100
	    },
   	div = d.createelement('div'),
   	divup = d.createelement('div'),
	//获取元素的定位,x,y
   	getxy = function(el){
	var r={t:0,l:0},
		ua = navigator.useragent.tolowercase(),
		add = function(t,l){r.l+=l,r.t+=t},
		p = el;
		if(el&&el!=db){
		//el.getboundingclientrect,获得元素的左，上，右和下分别相对浏览器视窗的位置
		if(el.getboundingclientrect){
		var b = el.getboundingclientrect();
		add(b.top + math.max(d.body.scrolltop,d.documentelement.scrolltop),
			b.left+math.max(d.body.scrollleft,d.documentelement.scrollleft));
		add(-d.documentelement.clienttop,-d.documentelement.clientleft);
			 }else{
				while(p){
					add(p.offsettop,p.offsetleft);
					p = p.offsetparent;
				}
				p = el.parentnode;
				while (p && p != db) {
					add(-p.scrolltop,-p.scrollleft);
					p = p.parentnode;
				}
			}
		}
   		return r;
   	},
	//重新设置div的宽高
   	extend = function(t,s){
	  	for(var p in s){
		t[p] = s[p];
		};
   	};
   
   	div.id='zoomdiv',divup.id = 'zoomup';
   	div.innerhtml = '<img id="bigimg" src="" />';
   	db.appendchild(div);
   	extend(opt,o);
   	function leave(obj,e){
		var e=e||event;
		/*alert(obj);
		alert(e.currenttarget);*/
		//火狐，opera专用，e.currenttarget是火狐，opera专用的属性
		if (e.currenttarget) {
			//relatedtarget对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
			//e.relatedtarget != obj，当移入子元素的时候，会出现相等
			if (e.relatedtarget != obj) {
				if (obj != e.relatedtarget.parentnode) {
					div.style.display = divup.style.display = 'none';
					db.onmousemove = null;
				}
			}
		} else {//ie专用
			if (e.toelement != obj) {
				if (obj != e.toelement.parentnode) {
					div.style.display = divup.style.display = 'none';
					db.onmousemove = null;
				}
			}
		}
   		};
		
   	for(var i=0,ci;ci=timgs[i++];){
    	if(ci.classname=='zoom'){
    		ci.onmouseover = function(e){
     			this.parentnode.appendchild(divup);
     			var bimg=d.getelementbyid('bigimg'),bwidth,bheight,sx,sy,
       			width = this.offsetwidth,
				height = this.offsetheight,
				top=getxy(this).t,
				left = getxy(this).l,
				twidth,tleft,swidth;
				//当鼠标移过的时候，开始载入大图
                bimg.src = this.getattribute('big');
					
				if(!bimg.complete){
					bimg.onload=showbimg;
				}else{
					showbimg();
					}
      			function showbimg(){
                    div.style.display = 'block';
                    bwidth = bimg.width,
					bheight = bimg.height,
       				sx = bwidth/width,sy = bheight/height;
                    tleft =opt.float=='right'?opt.offset+width+left:left-opt.offset-opt.width,			
                    swidth = window.innerwidth||(d.documentelement.clientwidth);
					//如果浏览器宽度不够，则自动适应显示div的宽度
                    if(tleft+opt.width+5>swidth){
                        twidth = swidth - 5 - tleft;
						//此句式比较特殊
                        twidth<opt.minwidth&&(tleft = left-opt.offset-opt.width,twidth=0);
                        };
					//设置div,divup的宽高和位置
                    extend(div.style,{
        				left:tleft +'px',
        				top:top+'px',
        				width:(twidth||opt.width)+'px',
       					height:opt.height+'px'
       					});
       				extend(divup.style,{
						width:(twidth||opt.width)/sx+'px',
						height:opt.height/sy+'px',
                       	display:'block'
      					});
       				db.onmousemove = function(e){
						var e = e || event,
						//显示非ie的鼠标位置，然后是ie的
						x=e.pagex||(e.clientx+(d.documentelement.scrollleft||db.scrollleft)),
						y=e.pagey||(e.clienty+(d.documentelement.scrolltop||db.scrolltop)),
						//x,y相对于原始图片的位置
						scrolly = y - divup.offsetheight/2 - top,
						scrollx = x - divup.offsetwidth/2 - left;
						//如果鼠标接近边界的时候，相对位置将不再随鼠标发生变化

						scrolly = y - divup.offsetheight/2 < top ? 0 : y + divup.offsetheight/2>height+top ? height - divup.offsetheight  : scrolly;
						scrollx = x - divup.offsetwidth/2 < left ? 0 : x + divup.offsetwidth/2>width+left ? width - divup.offsetwidth  : scrollx;
						div.scrolltop = scrolly*sy;
						div.scrollleft =  scrollx*sx;
						extend(divup.style,{top:scrolly+'px',left:scrollx+'px'});
       				}
      			};
     		};
		ci.parentnode.onmouseout =function(event){leave(this,event)};
    	}
 	 };    
}