////////////////////////////////////////////////////////////
// Script to zoom the picture
// Supported Browsers: IE, Mozilla, Safari
// By wjn
////////////////////////////////////////////////////////////

function piczoom(){
	this.initialize.apply(this, arguments);
}

piczoom.prototype = {
	initialize: function(picarr){
		for(var i = 0; i < picarr.length; i++){
			switch(picarr[i][0]){
				case "id_obj": this.idobj = picarr[i][1]; break;
				case "obj_tag": this.tags = picarr[i][1]; break;
				case "img_load": this.imgload = picarr[i][1]; break;
				case "img_desp": this.imgdesp = picarr[i][1]; break;
				case "img_bpath": this.imgbpath = picarr[i][1]; break;
				case "img_offset": this.imgofs = parseInt(picarr[i][1]); break;
				case "img_size": this.imgsize = i; break;
				case "css_icon": this.cicon = picarr[i][1]; break;
				case "ele_div": this.elediv = i; break;
				case "ele_shadow": this.eleshadow = i; break;
				case "zoom_pos": this.zpos = i; break;
				case "zoom_appear": this.zapp = parseInt(picarr[i][1]); break;
				case "show_icon": this.showi = picarr[i][1]; break;
				case "icon_offset": this.iconofs = i; break;
			}
		}

		this.iconid = this.idobj + "icon";
		this.picarr = picarr;
		this.loadid = "loadimg";
		this.savepath = "bpath";
		this.eleop = 10;

		this.zposMth = "";
		if(!isNaN(this.zpos)) {
			if(picarr[this.zpos][2]) this.zposLeft = parseInt(picarr[this.zpos][2]);
			if(picarr[this.zpos][3]) this.zposTop = parseInt(picarr[this.zpos][3]);
		}
		if(isNaN(this.zposLeft)) this.zposLeft = 0;
		if(isNaN(this.zposTop)) this.zposTop = 0;

		this.idobj = this.getNodeById(this.idobj);
		if(!this.idobj) return;

		if(isNaN(this.elediv)) return;
		if(!isNaN(this.eleshadow)){
			for(s = 1; s < picarr[this.eleshadow].length; s++){
				switch(picarr[this.eleshadow][s][0]){
					case "opacity": this.shaop = parseInt(picarr[this.eleshadow][s][1]); break;
					case "color": this.shacolor = picarr[this.eleshadow][s][1]; break;
					case "x": this.shax = parseInt(picarr[this.eleshadow][s][1]); break;
					case "y": this.shay = parseInt(picarr[this.eleshadow][s][1]); break;
					case "z": this.shaz = parseInt(picarr[this.eleshadow][s][1]); break;
				}
			}
			
			if(isNaN(this.shaop) || (this.shaop < 0) || (this.shaop > 10)) this.shaop = 5;
			if(!this.shacolor) this.shacolor = "black";
			if(isNaN(this.shax)) this.shax = 5;
			if(isNaN(this.shay)) this.shay = 5;
			if(isNaN(this.shaz) || (this.shaz < 0)) this.shaz = 5;
		}

		if(!this.tags) this.tags = "img";
		this.tags = this.idobj.getElementsByTagName(this.tags);

		if(!isNaN(this.zpos)){
			switch(picarr[this.zpos][1]){
				case "id": 
					this.zposMth = this.getNodeById(picarr[this.zpos][2]);
				break;
				case "absolute":
					this.zposMth = "absolute";
				break;
				case "screen":
					if(this.zposLeft < 0) this.zpLC = true;
					if(this.zposTop < 0) this.zpTC = true;
					this.zposMth = "screen";
				break;
			}
		}

		if(isNaN(this.zapp)) this.zapp = 0;

		var obj = this;
		for(var i = 0; i < this.tags.length; i++){
			this.tags[i].onmouseover = function(){
				if(obj.showi) obj.createIcon(this);
				else obj.createBigImg(this);
			};
			this.tags[i].onmouseout = function(){
				if(obj.icondiv) obj.hideIcon(this);
				if(obj.imgdiv) obj.hideZoom(this);
				document.onmousemove = null;
			};
		}
		
		// check css opacity, assign this.eleop value
		for(d = 1; d < this.picarr[this.elediv].length; d++){
			if(this.picarr[this.elediv][d][0] == "className"){
				var initdiv = document.createElement("div");
				initdiv.style.display = "none";
				initdiv.className = this.picarr[this.elediv][d][1];
				document.body.appendChild(initdiv);
				this.getCssStyle(initdiv, 'opacity', 'this.eleop', "remove_body");
				break;
			}
		}
	},

	checkNav: function(ver){
		var nav = navigator.userAgent.indexOf(ver);
		if(nav == -1) return false;
		else return true;
	},

	getNodeById: function(id){
		var tags;
		var bodyhtml = document.body.innerHTML;
		var reg = new RegExp("<(\\w*)([^>]*) id=[\'\"]?" + id + "[\'\"]?([^>]*)>", "i");
		bodyhtml.replace(reg, function(){ tags = arguments[1]; });
		var getags = document.getElementsByTagName(tags);
		for(i = 0; i < getags.length; i++){
			if(getags[i].id == id) return getags[i];
		}
		return false;
	},

	nodeRecursion: function(tobj, tarnodes, nodepro){
		var provalue;
		if(!provalue) provalue = 0;

		try {
			tobj = eval("tobj." + tarnodes);
			provalue = this.nodeRecursion(tobj, tarnodes, nodepro);
		}
		catch (e){}
		var temp = eval("tobj." + nodepro);
		temp = parseInt(temp);
		if(!isNaN(temp)) provalue += temp;

		return provalue;
	},

	createIcon: function(imgorg){
		var tleft = imgorg.offsetLeft;
		var ttop = imgorg.offsetTop;
		if(this.checkNav("MSIE 6") || this.checkNav("MSIE 7")){
			tleft += this.nodeRecursion(imgorg, "parentNode", "offsetLeft");
			ttop += this.nodeRecursion(imgorg, "parentNode", "offsetTop");
		}
		
		var obj = this;
		var lofs = tofs = 0;
		if(!isNaN(this.iconofs)){
			if(this.picarr[this.iconofs].length > 1) lofs = parseInt(this.picarr[this.iconofs][1]);
			if(this.picarr[this.iconofs].length > 2) tofs = parseInt(this.picarr[this.iconofs][2]);
		}
		if(isNaN(lofs)) lofs = 0;
		if(isNaN(tofs)) tofs = 0;
		
		this.icondiv = document.getElementById(this.iconid);
		if(!this.icondiv){
			this.icondiv = document.createElement("div");
			this.icondiv.id = this.iconid;
			this.icondiv.className = this.cicon;
			document.body.appendChild(this.icondiv);
		}
		this.icondiv.style.position = "absolute";
		this.icondiv.style.left = tleft + lofs + "px";
		this.icondiv.style.top = ttop + tofs + "px";
		this.icondiv.style.display = "block";
		
		this.icondiv.onmouseover = function(){
			this.style.display = "block";
			obj.createBigImg(imgorg);
		};
		this.icondiv.onmouseout = function(){ obj.hideZoom(imgorg); };
	},

	createBigImg: function(imgorg){
		this.imgdiv = document.createElement("div");
		for(d = 1; d < this.picarr[this.elediv].length; d++){
			var dea = this.picarr[this.elediv][d];
			if(dea[0].indexOf("ele_") == -1) eval("this.imgdiv." + dea[0] + "='" + dea[1] + "';");
			else this.cycNodes(this.imgdiv, dea, imgorg);
		}
		
		this.imgdiv.style.display = "none";
		this.imgdiv.style.position = "absolute";
		this.chopt = null;

		if(!isNaN(this.eleshadow)){
			this.shadiv = document.createElement("div");
			this.shadiv.style.position = "absolute";
			this.shadiv.style.display = "none";

			this.shadiv.style.backgroundColor = this.shacolor;
			this.shadiv.style.zIndex = this.shaz;
			this.imgdiv.style.zIndex = this.shaz + 2;
			
			this.opacity(this.shadiv, 0);
			this.chsha = setTimeout(this.changeOpacity.bind(this, this.shadiv, 0, this.shaop, this.zapp * 2), this.zapp * 2);
		}

		if(this.zapp > 0){
			this.opacity(this.imgdiv, 0);
			this.chopt = setTimeout(this.changeOpacity.bind(this, this.imgdiv, 0, this.eleop, this.zapp), this.zapp);
		}
		
		document.body.appendChild(this.shadiv);
		document.body.appendChild(this.imgdiv);

		this.zoomPos();
	},

	cycNodes: function(parent_node, tag_child, imgorg){
		var appendme = true;
		var htmltag = tag_child[0].split("ele_")[1];
		var newtag = document.createElement(htmltag);

		if((htmltag == "img") && (tag_child[1] == "target")){
			var bigpath = imgorg.getAttribute(this.imgbpath);
			if(!bigpath) bigpath = imgorg.getAttribute(this.savepath);

			if(bigpath){
				imgorg.setAttribute(this.imgbpath, "");
				imgorg.setAttribute(this.savepath, bigpath);
				
				newtag.id = this.loadid;
				if(this.imgload) newtag.src = this.imgload;

				var obj = this;
				var newimg = new Image();
				newimg.src = bigpath;
				if(newimg.complete){
					this.imgProperty(newtag, newimg.width, newimg.height, bigpath);
				}
				else newimg.onload = function(){
					obj.imgProperty(newtag, this.width, this.height, this.src);
					if(obj.zposMth == "screen") obj.zoomPos();
					if(obj.shadiv) setTimeout(obj.shadowPro.bind(obj), 0);
				};
			}
		}
		else {
			for(var c = 1; c < tag_child.length; c++){
				if(tag_child[c][0].indexOf("ele_") == -1){
					if(tag_child[c][0] == "text"){
						var desp = "";
						if(tag_child[c][1] == "img_desp") desp = imgorg.getAttribute(this.imgdesp);
						else desp = tag_child[c][1];

						if(desp) newtag.innerHTML = desp;
						else appendme = false;
					}
					else {
						try { eval("newtag." + tag_child[c][0] + "='" + tag_child[c][1] + "'"); }
						catch (e){}
					}
				}
				else this.cycNodes(newtag, tag_child[c], imgorg);
			}
		}
		if(appendme) parent_node.appendChild(newtag);
	},

	getCssStyle: function(obj, type, thisvar, removefrom){
		var value;
		if(obj.currentStyle){
			// for(s in obj.currentStyle) document.getElementById('error').innerHTML += s + ' : ' + obj.currentStyle[s] + '<br>';
			if(type == "opacity") value = parseInt(obj.currentStyle['filter'].replace(/[^\d]/gi, "")) / 10;
			else var value = obj.currentStyle[type];
		}
		else if(window.getComputedStyle){
			type = type.toLowerCase();
			value = parseFloat(document.defaultView.getComputedStyle(obj, null)[type]) * 10;
		}

		if(thisvar) eval(thisvar + "=value;");

		if(removefrom){
			var removearr = removefrom.split("_");
			if(removearr[1] == "body") document.body.removeChild(obj);
		}
	},

	opacity: function(imgobj, percent){
		if(document.all) imgobj.style.filter = "Alpha(opacity=" + percent*10 + ")";
		else imgobj.style.opacity = percent / 10;
	},

	changeOpacity: function(imgobj, percent, max, freq){
		if(percent < max){
			this.opacity(imgobj, ++percent);
			this.chopt = setTimeout(this.changeOpacity.bind(this, imgobj, percent, max, freq), freq);
		}
		else this.opacity(imgobj, max);
	},

	imgProperty: function(imgobj, iwide, ihigh, isrc){
		var zimgwide = iwide, zimghigh = ihigh;
		if(!isNaN(this.imgsize)){
			zimgwide = parseInt(this.picarr[this.imgsize][1]);
			if(this.picarr[this.imgsize].length > 2) zimghigh = parseInt(this.picarr[this.imgsize][2]);
			if((isNaN(zimgwide) && isNaN(zimghigh)) || ((zimghigh < 0) && (zimgwide < 0))){
				zimgwide = iwide;
				zimghigh = ihigh;
			}
			else if(isNaN(zimghigh) || (zimghigh < 0)){
				zimghigh = ihigh * (zimgwide / iwide);
			}
			else if(isNaN(zimgwide) || (zimgwide < 0)){
				zimgwide = iwide * (zimghigh / ihigh);
			}
		}
		
		imgobj.src = isrc;
		imgobj.width = zimgwide;
		imgobj.height = zimghigh;

		setTimeout(this.modifyPicText.bind(this, zimgwide), 0);
	},

	zoomPos: function(){
		switch(typeof(this.zposMth)){
			case "object":
				this.shadiv = null;
				document.body.removeChild(this.imgdiv);
				this.zposMth.appendChild(this.imgdiv);
				this.imgdiv.style.display = "block";
			break;
			case "string":
				if(this.zposMth == "absolute"){
					this.imgdiv.style.left = this.zposLeft + "px";
					this.imgdiv.style.top = this.zposTop + "px";
					this.imgdiv.style.display = "block";
					if(this.shadiv){
						this.shadiv.style.left = this.zposLeft + this.shax + 'px';
						this.shadiv.style.top = this.zposTop + this.shay + 'px';
						this.shadowPro();
					}
					break;
				}
				else if(this.zposMth == "screen"){
					var ele = document.documentElement;
					var sl = ele.scrollLeft;
					var st = ele.scrollTop;

					if(this.checkNav("Safari")){
						sl = window.pageXOffset;
						st = window.pageYOffset;
					}

					this.imgdiv.style.display = "block";
					if(this.zpLC) this.zposLeft = (ele.clientWidth - this.imgdiv.offsetWidth) / 2;
					if(this.zpTC) this.zposTop = (ele.clientHeight - this.imgdiv.offsetHeight) / 2;

					this.imgdiv.style.left = sl + this.zposLeft + 'px';
					this.imgdiv.style.top = st + this.zposTop + 'px';

					if(this.shadiv){
						this.shadiv.style.left = sl + this.zposLeft + this.shax + 'px';
						this.shadiv.style.top = sl + this.zposTop + this.shay + 'px';
						this.shadowPro();
					}
					break;
				}
			default:
				var obj = this;
				document.onmousemove = function(e){
					var ele = document.documentElement;
					var sl = ele.scrollLeft;
					var st = ele.scrollTop;
					var ow = obj.imgdiv.offsetWidth;
					var oh = obj.imgdiv.offsetHeight;

					var ex = window.event ? event.clientX : ( e.pageX - ele.scrollLeft );
					var ey = window.event ? event.clientY : ( e.pageY - ele.scrollTop );

					if(obj.checkNav("Safari")){
						sl = window.pageXOffset;
						st = window.pageYOffset;
					}

					var imgleft = sl + ex + ((ex + ow + obj.imgofs) > ele.clientWidth ? ( - ow - obj.imgofs ) : obj.imgofs );
					var imgtop = st + ey + ((ey + oh + obj.imgofs) > ele.clientHeight ? ( - oh - obj.imgofs ) : obj.imgofs );

					if(((ey + st) > imgtop) && (ey < oh)){
						imgtop = st;
					}

					if(((ex + sl) > imgleft) && (ex < ow)){
						imgleft = sl;
					}
		
					obj.imgdiv.style.left = imgleft + 'px';
					obj.imgdiv.style.top = imgtop + 'px';

					if(obj.shadiv){
						obj.shadiv.style.left = imgleft + obj.shax + 'px';
						obj.shadiv.style.top = imgtop + obj.shay + 'px';
					}

					if(obj.imgdiv.style.display == "none") obj.imgdiv.style.display = "block";
					if(obj.shadiv.style.display == "none") obj.shadowPro();
				};
		}
	},

	shadowPro: function(){
		this.shadiv.style.width = this.imgdiv.offsetWidth + "px";
		this.shadiv.style.height = this.imgdiv.offsetHeight + "px";
		this.shadiv.style.display = "block";
	},

	hideIcon: function(){
		try { this.icondiv.style.display = "none"; }
		catch (e){}
		document.onmousemove = null;
	},

	hideZoom: function(imgorg){
		try {
			var bigpath = imgorg.getAttribute(this.savepath);
			if(bigpath) imgorg.setAttribute(this.imgbpath, bigpath);
		}
		catch (e){}

		try {
			if(this.shadiv){
				clearTimeout(this.chsha);
				document.body.removeChild(this.shadiv);
			}

			if(this.zapp) clearTimeout(this.chopt);
			if(typeof(this.zposMth) == "object") this.zposMth.removeChild(this.imgdiv);
			else document.body.removeChild(this.imgdiv);
		}
		catch (e){}
	},

	// Additional features (not for global)
	modifyPicText: function(wide){
		if(this.imgdiv.childNodes[1]) this.imgdiv.childNodes[1].style.width = wide - 16 + "px";
	}
};



var pict = [
	["id_obj", "goods"],
	["obj_tag", "img"],
	["img_load", "images/loading.gif"],
	["img_desp", "alt"],
	["img_bpath", "title"],
	["img_offset", "10px"],
	["img_size", "", "400"],
	["ele_div",
		["className", "picdiv"],
		["ele_img", "target"],
		["ele_div", ["className", "picdivtext"], ["text", "img_desp"]]
	],
	["ele_shadow", ["opacity", 5], ["color", "black"], ["x", 5], ["y", 5], ["z", 5]],
	["zoom_appear", "10"]
];

new piczoom(pict);