(function(){ 
	/**
	*
	*	作者	: 老可
	* 	日期	: 2015-05-26
	*	版本	: v1.2
	*	qq  	: 279662403 群 246502174
	* 	兼容性  : ie6+ 
	*/

	var eventutil,get,element; 
	eventutil = {
		addhandler: function(ele, type, handler) {
			if (ele.addeventlistener) {
				ele.addeventlistener(type, handler, false)
			} else if (ele.attachevent) {
				ele.attachevent("on" + type, handler)
			} else {
				ele["on" + type] = handler;
			}
		},
		removehandler: function(element, type, handler) {
			if (element.removeeventlistener) {
				element.removeeventlistener(type, handler, false);
			} else if (element.detachevent) {
				element.detachevent("on" + type, handler);
			} else {
				element["on" + type] = null;
			}
		},
		getevent: function(event) {
			return event ? event : window.event;
		},
		gettarget: function(event) {
			return event.target || event.srcelement;
		},
		preventdefault: function(event) {
			if (event.preventdefault) {
				event.preventdefault();
			} else {
				event.returnvalue = false;
			}
		},
		stoppropagation: function(event){
	        if (event.stoppropagation){
	            event.stoppropagation();
	        } else {
	            event.cancelbubble = true;
	        }
	    } 
	};

	get = {
		byid: function(id) {
			return typeof id === "string" ? document.getelementbyid(id) : id
		},
		byclass: function(sclass, oparent) {
			var aclass = [];
			var reclass = new regexp("(^| )" + sclass + "( |$)");
			var aelem = this.bytagname("*", oparent);
			for (var i = 0; i < aelem.length; i++) reclass.test(aelem[i].classname) && aclass.push(aelem[i]);
			return aclass
		},
		bytagname: function(elem, obj) {
			return (obj || document).getelementsbytagname(elem)
		}
	}; 
 	
 	element = {
 		hasclass:function(obj,name){
			return (' '+obj.classname+' ').indexof(' '+name+' ') > -1 ? true : false;
		},
		addclass : function(obj,name){
			if(this.hasclass(obj,name)) return;
			obj.classname += ' ' + name;
		},
		removeclass : function(obj,name){
			obj.classname = obj.classname.replace(new regexp('(^|\\s)' +name+ '(?:\\s|$)'),'$1').replace(/\s{1,}/g,' ');
		}
 	}

	function magnifierf(){ 
		this.init.apply(this,arguments);  
	}

	magnifierf.prototype = {
		init: function(id){
			var _is = this; 
			this.magwrap = get.byid(id);
			this.magmain = this.magwrap.children[0];
			this.mw = this.magmain.offsetwidth;
			this.mh = this.magmain.offsetheight;
			this.magimg = this.magmain.getelementsbytagname('img')[0];
			//this.mimgsrc = this.magimg.getattribute('src').slice(0,-4);
			this.mimgsrc =  this.magimg.getattribute('bigimg');
			this.specbox = get.byclass("spec-items",this.magwrap)[0];
			this.specul = this.specbox.getelementsbytagname('ul')[0];
			this.specitem = this.specbox.getelementsbytagname('li');

			_is.specfn();
			_is.seteventfn().dragevent();
			
		},
		setelefn: function(){   
			var _is = this,
				_html1 = "",
				ofrag = document.createdocumentfragment(),
				ofrag2 = document.createdocumentfragment(); 

			_is.omd = document.createelement('div');
			_is.omd.classname = "magnifierdrag"; 
			_is.omd.style.csstext = 'width:' + _is.mw/2 +'px;height:' + _is.mh/2 + 'px;';
			_is.omd.innerhtml = "&nbsp;";

			_is.omp =  document.createelement('div');
			_is.omp.classname = 'magnifierpop';
			_is.omp.style.csstext =  'width:' + _is.mw +'px;height:' + _is.mh + 'px;right:' + (-_is.mw-10) + 'px;';  
			
			_is.omi = document.createelement('div');
			_is.omi.classname ='magnifierimg';
			_is.omi.style.csstext = 'width:' + _is.mw*2 + 'px;height:' + _is.mh*2 + 'px;';

			_html1 = '<img style="width:100%;height:100%;" src="' + _is.mimgsrc + '">'
			_is.omi.innerhtml = _html1; 

			_is.omp.appendchild(_is.omi)

			ofrag.appendchild(_is.omd);
			ofrag2.appendchild(_is.omp);   

			_is.magmain.appendchild(ofrag);
			_is.magwrap.appendchild(ofrag2);  

		},
		removefn :function(){
			var _is = this;
				_is.magmain.removechild(_is.omd);
				_is.magwrap.removechild(_is.omp);  
		},
		setmousemovefn :function(event){
			var _is = this,
				 
				_winscrleft = document.documentelement.scrollleft || document.body.scrollleft,
				_winscrtop = document.documentelement.scrolltop || document.body.scrolltop;

				_x = event.clientx + _winscrleft -  
				(_is.magwrap.getboundingclientrect().left  + _winscrleft) - _is.omd.offsetwidth/2;

				_y = event.clienty  + _winscrtop - 
				(_is.magmain.getboundingclientrect().top  + _winscrtop) - _is.omd.offsetheight/2;
				
				_l = _is.magmain.offsetwidth - _is.omd.offsetwidth;
				_t = _is.magmain.offsetheight - _is.omd.offsetheight;
				
				_l2 = - (_is.omi.offsetwidth - _is.magmain.offsetwidth);
				_t2 = - (_is.omi.offsetheight - _is.magmain.offsetheight);

				if( _x < 0 )
		        {
		            _x = 0;  
		        }
		        else if( _x > _l )
		        {
		            _x = _l;
		        }
		         
		        if( _y < 0 )
		        {
		            _y = 0;  
		        }
		        else if( _y > _t )
		        {
		            _y = _t;
		        }
			 	
				 
				_is.omd.style.left = _x + "px";
				_is.omd.style.top  = _y + "px";
				 
				
				_bigx = _x / _l;
				_bigy = _y / _t;
					

				_is.omi.style.left = _bigx * _l2 + "px";
				_is.omi.style.top = _bigy * _t2 + "px";  
		},
		seteventfn: function(){
			var _is = this,
				_x = 0,
				_y = 0,
				_l = 0,
				_t = 0,
				_bigx = 0,
				_bigy = 0,
				_l2 = 0, 
				_t2 = 0;

			function handleevent(event){
				event = eventutil.getevent(event);   

				switch(event.type){
					case "mouseenter":  
						_is.setelefn(); 
					break;
					case "mousemove": 
						if (_is.omd) {
							_is.setmousemovefn(event);
						}
					break;
					case "mouseleave":   
						_is.removefn(); 
					break;
				} 
				
			}	
			return {
				dragevent: function() { 

					//eventutil.addhandler(_is.magmain, "mouseenter", handleevent);
					//eventutil.addhandler(_is.magmain, "mousemove", handleevent);
					//eventutil.addhandler(_is.magmain, "mouseleave", handleevent);  
				} 
			}
			
		},
		specfn: function(){
			var _is = this, _ospimg, _oisrc,
				olbtn = get.byclass("spe_leftbtn",_is.magwrap)[0],
				orbtn = get.byclass("spe_rightbtn",_is.magwrap)[0],
				oliw = this.specul.getelementsbytagname('li')[0].offsetwidth + 5,
				_len = _is.specitem.length,  
				n = 0,
				l = null, 
				r = null;  

			function tabfn(event){   
				var target = eventutil.gettarget(event),
					i = 0;  

				if (target.nodename != "ul") { 

					if (target.nodename == "img") {
						target = target.parentnode;
					}
					for (; i < _len; i++){
						_is.specitem[i].classname = '';
					}
					target.classname = 'on';

					_ospimg = target.getelementsbytagname('img')[0]; 
					_oisrc = _ospimg.getattribute('src'); 
					_oisrc_bigimg = _ospimg.getattribute('bigimg'); 
					
					_is.magimg.setattribute('src',_oisrc);
					_is.magimg.setattribute('jqimg',_oisrc_bigimg);
					//_is.mimgsrc =  _oisrc.slice(0,-4);
					//_is.mimgsrc =  _ospimg.getattribute('bigimg');
				}
				 
			}   
			eventutil.addhandler(_is.specul,"mouseover",tabfn);

			function movefn(event){
				var target = eventutil.gettarget(event);
				 
				if (target.classname.indexof("spe_rightbtn") > -1 ) {
					r = ++n; 
					if (r > _len - 5)
							element.removeclass(target,"on");

					if (r > _len - 4) { 

						n = _len - 4; 
						return false;
					}else{   

						_is.buttur(_is.specul, {left:-(r*oliw)}); 
						element.addclass(olbtn,"on");
					} 
				} 
				if (target.classname.indexof("spe_leftbtn") > -1 ) {
					l = --n; 
					if (l < 1)
						element.removeclass(target,"on");

					if (l < 0) {

						n = 0;  
						return false; 
					}else{ 

						_is.buttur(_is.specul, {left:-(l*oliw)});  
						element.addclass(orbtn,"on"); 
					}  
				} 
			}

			if(_len > 4 ){

				element.addclass(orbtn,"on");  
				eventutil.addhandler(_is.magwrap,"click",movefn);
			}
			 

				 			 
		},
		buttur: function(ele, obj) {

	        window.cleartimeout(ele.timer);

	        var _this = this,
	            end = null;

	        for (direc in obj) {

	            var direc1 = direc.tolowercase(),
	                stroffset = "offset" + direc1.substr(0, 1).touppercase() + direc1.substring(1).tolowercase(),
	                target = obj[direc],
	                nspeed = (target - ele[stroffset]) / 8; 
	                
	            nspeed = nspeed >= 0 ? math.ceil(nspeed) : math.floor(nspeed);
	            ele.style[direc1] = ele[stroffset] + nspeed + "px";
	            end += nspeed;

	        }

	        if (end)

	            if (typeof fncallback == "function") {
	                fncallback.call(ele);
	            } else {

	                ele.timer = window.settimeout(function() {
	                    _this.buttur(ele, obj)
	                }, 20);

	            }
	    }  

	} 
    
	window['magnifierf'] = function(id){
		return new magnifierf(id);
	}

})()