//==========================================================================================================
//PC home Online 網路家庭的文字、圖片、資料、商標、標識、及網頁設計等皆受中華民國相關智慧財產權法令的保護。
//嚴禁任何未經事先同意的非法轉載和使用。若經查知，PC home Online 網路家庭將採取必要之法律行動
//==========================================================================================================

function ImgPreviewer(id, DataObj) {
	this.id = id;
	this.DataObj = DataObj;
	this.CodeSection = this.DataObj.CodeSection;
	this.IconWidth = this.DataObj.IconWidth;
	this.TotalWidth = this.DataObj.Width;
	this.TotalHeight = 8 + (this.IconWidth + 4) + 8;//block + MainSection + block
	this.Block = 3;
	this.MainWidth = this.TotalWidth - (27 + 10)*2; //TotalWidth - (ArrowWidth+block*2)*2
	this.MainWidth -= (this.MainWidth % (this.IconWidth + 4 + this.Block));
	this.PerPageAmt = this.MainWidth / (this.IconWidth + 4 + this.Block);
	this.MainWidth -= this.Block;
	this.TotalAmt = this.DataObj.IconInfo.length;
	this.PageAmt = Math.ceil(this.TotalAmt/this.PerPageAmt);
	this.FuncID = (this.DataObj.FuncID == undefined || this.DataObj.FuncID < 0 || this.DataObj.FuncID > (this.TotalAmt - 1)) ? 0 : this.DataObj.FuncID;//perpage first Icon
	this.Resizeable = (this.DataObj.Resizeable == undefined) ? true : (typeof(this.DataObj.Resizeable) != 'boolean') ? true : this.DataObj.Resizeable;
	this.KeyControlable = (this.DataObj.KeyControlable == undefined) ? true : (typeof(this.DataObj.KeyControlable) != 'boolean') ? true : this.DataObj.KeyControlable;
	this.CurrentPage = Math.ceil((this.FuncID + 1)/this.PerPageAmt);
	this.Distance = this.MainWidth + this.Block;
	this.FuncIcon = '';
	this.NextFuncIcon = '';
	this.StartID = 0;
	this.EndID = 0;
	this.ArrowMode = '';
	this.LoadList = [];
	this.getMain = '';
	this.getIconArray = [];
	this.getSliderList = '';
	this.getImgContainer = '';
	this.getImgSection = '';
	this.getImgSet = '';
	this.getImgIntro = '';
	this.OutFadeOut = [];
	this.BlockAction = false;
	this.IntervalID = '';
	this.TimerIntervalID = '';
	this.OpacityIntervalID = '';
	//method
	this.ArrowRollEffect = function(FuncID, Mode) {
		var IconPath = (Mode == 'Over') ? (FuncID.indexOf('Left') != -1) ? '/img/Map/ui/BtnSliderMLeftOver.png' : '/img/Map/ui/BtnSliderMRightOver.png' : (FuncID.indexOf('Left') != -1) ? '/img/Map/ui/BtnSliderMLeftOut.png' : '/img/Map/ui/BtnSliderMRightOut.png';
		if (CurrentStatus.BrowserPNGfix.indexOf(CurrentStatus.Browser) != -1) {
			$(FuncID).style.background = 'url(/img/transparent.gif)';
			$(FuncID).style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+IconPath+', sizingMethod=scale)';
		} else $(FuncID).style.background = 'url('+IconPath+') no-repeat';
	}
	this.ArrowClickAction = function(Mode) {
		//WinInfoB
		/*$('WinInfoB').PosX = -1000;
		$('WinInfoB').PosY = 0;
		$('WinInfoB').style.left = $('WinInfoB').PosX + 'px';
		$('WinInfoB').style.top = $('WinInfoB').PosY + 'px';
		
		this.IconFadePre('FadeIn');*/
		this.ClearWin();
		Element.hide(this.getImgSection);
		Element.hide(this.getImgContainer);
		//MapStatus.Map.clearOverlays();
		var PrevPage = this.CurrentPage;
		this.CurrentPage = (Mode == 'Left') ? (((this.CurrentPage - 1) <= 0) ? this.PageAmt : this.CurrentPage - 1) : (((this.CurrentPage + 1) > this.PageAmt) ? 1 : this.CurrentPage + 1);
		this.FuncID = this.PerPageAmt * (this.CurrentPage - 1);
		var FinalX = (this.Distance * (this.CurrentPage - 1)) * -1;
		this.StartID = (this.CurrentPage - 1) * this.PerPageAmt;
		this.EndID = this.StartID + this.PerPageAmt - 1;
		this.ArrowMode = Mode;
		//doMove
		this.doMove(FinalX, 0, 10);
	}
	this.GoSlide = function(FuncID) {
		this.FuncID = FuncID;
		this.CurrentPage = Math.ceil((this.FuncID + 1)/this.PerPageAmt);
		var FinalX = (this.Distance * (this.CurrentPage - 1)) * -1;
		this.StartID = (this.CurrentPage - 1) * this.PerPageAmt;
		this.EndID = this.StartID + this.PerPageAmt - 1;
		this.doMove(FinalX, 0, 10);
	}
	this.IconClickActionPre = function(FuncIcon) {
		if (this.BlockAction) return;
		var OldFuncIcon = this.FuncIcon;
		this.FuncIcon = FuncIcon;
		(OldFuncIcon != this.FuncIcon) ? this.IconClickAction(this.FuncIcon) : this.ClearWin();
	}
	this.IconClickAction = function(FuncIcon) {
		if ($('MsgSection')) $('MsgSection').innerHTML = this.FuncIcon.OrderID;
		//Map Marker Icon set
		MapStatus.IconClickAction(FuncIcon.Lat, FuncIcon.Lng);
		this.IconFadePre('FadeOut');
	}
	this.IconFadePre = function(Mode) {
		if (Mode == 'FadeIn') this.FuncIcon = null;
		clearInterval(this.OpacityIntervalID);
		this.StartID = (this.CurrentPage - 1) * this.PerPageAmt;
		this.EndID = this.StartID + this.PerPageAmt - 1;
		//for (var i=this.StartID; i<=this.EndID; i++) {
		for (var i=0; i<=this.getIconArray.length; i++) {
			if (!this.getIconArray[i]) continue;
			this.getIconArray[i].OpacityFlag = false;
			this.getIconArray[i].GoalO = (this.getIconArray[i] == this.FuncIcon || (this.OutFadeOut.indexOf(i) != -1)) ? 100 : (Mode == 'FadeOut') ? 30 : 100;
		}//end for
		var Speed = 5;
		var IDSet = 'ImgPreviewer' + this.id;
		this.OpacityIntervalID = setInterval(function() { OImgPreviewer[IDSet].IconFade(Speed); }, 15);
	}
	this.IconFade = function(speed) {
		var OpacityFlag = true;
		for (var i=this.StartID; i<=this.EndID; i++) {
			if (!this.getIconArray[i]) continue;
			if (!this.getIconArray[i].OpacityFlag) {
				var ObjO = this.getIconArray[i].Opacity;
				var c = this.getIconArray[i].GoalO - ObjO;
				var speedo = c/speed;
				var SignO = (speedo < 0) ? -1 : 1;
				speedo = Number(SignO * ((Math.abs(speedo) <= 1) ? 1 : Math.abs(speedo)));
			
				if (Math.abs(ObjO-this.getIconArray[i].GoalO) <= Math.abs(speedo)) { this.getIconArray[i].Opacity = this.getIconArray[i].GoalO; this.getIconArray[i].OpacityFlag = true; }
				else this.getIconArray[i].Opacity = ObjO + speedo;
				
				this.getIconArray[i].style.filter = 'alpha(opacity=' + this.getIconArray[i].Opacity + ')';
				this.getIconArray[i].style.MozOpacity = this.getIconArray[i].Opacity / 100;
				this.getIconArray[i].style.opacity = this.getIconArray[i].Opacity / 100;
			}//end if
			OpacityFlag &= this.getIconArray[i].OpacityFlag;
		}//end for
		if (OpacityFlag) clearInterval(this.OpacityIntervalID);
	}
	this.ClearWin = function() {
		//Map Marker Icon set
		MapStatus.MarkerIconReset();
		MapStatus.ClickSource = '';
		
		//WinInfoB
		$('WinInfoB').PosX = -1000;
		$('WinInfoB').PosY = 0;
		$('WinInfoB').style.left = $('WinInfoB').PosX + 'px';
		$('WinInfoB').style.top = $('WinInfoB').PosY + 'px';
		$('WinInfoB').isVisible = false;
		
		//BeeMarker
		if ($('BeeMarker')) Element.hide($('BeeMarker'));
		
		//this.OutFadeOut = [];
		//this.IconFadePre('FadeIn');
		OImgPreviewer.ImgPreviewerPicker.OutFadeOut = [];
		OImgPreviewer.ImgPreviewerPicker.IconFadePre('FadeIn');
	}
	this.ImgClickAction = function() {
		alert(this.FuncIcon.Link);
	}
	this.doMove = function(x, y, speed) {
		clearInterval(this.IntervalID);
		this.getSliderList.MoveFlagX = false;
		this.getSliderList.MoveFlagY = false;
		this.getSliderList.GoalX = x;
		this.getSliderList.GoalY = y;
		this.BlockAction = true;
		var IDSet = 'ImgPreviewer' + this.id;
		var DirectObj = this.getSliderList;
		this.IntervalID = setInterval(function() { OImgPreviewer[IDSet].realMove(speed, DirectObj); }, 15);
	}
	this.VaryAction = function(DataObj) {
		clearInterval(this.IntervalID);
		this.getImgContainer.VaryFlagW = false;
		this.getImgContainer.VaryFlagH = false;
		this.getImgContainer.MoveFlagX = false;
		this.getImgContainer.MoveFlagY = false;
		this.getImgContainer.OpacityFlag = false;
		this.getImgContainer.GoalX = (DataObj.GoalX != undefined) ? DataObj.GoalX : this.getImgContainer.GoalX;
		this.getImgContainer.GoalY = (DataObj.GoalY != undefined) ? DataObj.GoalY : this.getImgContainer.GoalY;
		this.getImgContainer.GoalW = (DataObj.GoalW != undefined) ? DataObj.GoalW : this.getImgContainer.GoalW;
		this.getImgContainer.GoalH = (DataObj.GoalH != undefined) ? DataObj.GoalH : this.getImgContainer.GoalH;
		this.getImgContainer.GoalO = (DataObj.GoalO != undefined) ? DataObj.GoalO : this.getImgContainer.GoalO;
		var IDSet = 'ImgPreviewer' + this.id;
		var DirectObj = this.getImgContainer;
		this.IntervalID = setInterval(function() { OImgPreviewer[IDSet].realMove(DataObj.Speed, DirectObj); }, 15);
	}
	this.realMove = function(speed, DirectObj) {
		//check x position
		if (!DirectObj.MoveFlagX) {
			var ObjX = DirectObj.PosX;
			var a = DirectObj.GoalX - ObjX;
			var speedx = a/speed;
			var SignX = (speedx < 0) ? -1 : 1;
			speedx = Number(SignX * ((Math.abs(speedx) <= 1) ? 1 : Math.abs(speedx)));
			
			if (Math.abs(ObjX-DirectObj.GoalX) <= Math.abs(speedx)) { DirectObj.PosX = DirectObj.GoalX; DirectObj.MoveFlagX = true;	}
			else DirectObj.PosX = ObjX + speedx;
		}//end if
		
		//check y position
		if (!DirectObj.MoveFlagY) {
			var ObjY = DirectObj.PosY;
			var b = DirectObj.GoalY - ObjY;
			var speedy = b/speed;
			var SignY = (speedy < 0) ? -1 : 1;
			speedy = Number(SignY * ((Math.abs(speedy) <= 1) ? 1 : Math.abs(speedy)));
			
			if (Math.abs(ObjY-DirectObj.GoalY) <= Math.abs(speedy)) { DirectObj.PosY = DirectObj.GoalY; DirectObj.MoveFlagY = true;	}
			else DirectObj.PosY = ObjY + speedy;
		}//end if
		
		if (DirectObj.Type == 'SliderList') {
			//End of SliderList
			DirectObj.style.left = DirectObj.PosX + 'px';
			DirectObj.style.top = DirectObj.PosY + 'px';
			
			if (DirectObj.MoveFlagX && DirectObj.MoveFlagY) {
				clearInterval(this.IntervalID);
				this.BlockAction = false;
				this.LoaderPre();
				if (this.NextFuncIcon) {
					this.NextFuncIcon = (this.NextFuncIcon.OrderID < this.StartID || this.NextFuncIcon.OrderID > this.EndID) ? (this.ArrowMode == 'Left') ? this.getIconArray[this.EndID] : this.getIconArray[this.StartID] : this.NextFuncIcon;
					this.IconClickActionPre(this.NextFuncIcon);
					this.NextFuncIcon = null;
				}//end if
			}//end if
			return;
		}//end if
		
		//check opacity
		if (!DirectObj.OpacityFlag) {
			var ObjO = DirectObj.Opacity;
			var c = DirectObj.GoalO - ObjO;
			var speedo = c/speed;
			var SignO = (speedo < 0) ? -1 : 1;
			speedo = Number(SignO * ((Math.abs(speedo) <= 1) ? 1 : Math.abs(speedo)));
			
			if (Math.abs(ObjO-DirectObj.GoalO) <= Math.abs(speedo)) { DirectObj.Opacity = DirectObj.GoalO; DirectObj.OpacityFlag = true; }
			else DirectObj.Opacity = ObjO + speedo;
		}//end if
		
		DirectObj.style.left = DirectObj.PosX + 'px';
		DirectObj.style.top = DirectObj.PosY + 'px';
		DirectObj.style.filter = 'alpha(opacity=' + DirectObj.Opacity + ')';
		DirectObj.style.MozOpacity = DirectObj.Opacity / 100;
		DirectObj.style.opacity = DirectObj.Opacity / 100;
		
		if (DirectObj.MoveFlagX && DirectObj.MoveFlagY && DirectObj.OpacityFlag) {
			//check width
			if (!DirectObj.VaryFlagW) {
				var ObjW = DirectObj.CurrentW;
				var d = DirectObj.GoalW - ObjW;
				var speedw = d/speed;
				var SignW = (speedw < 0) ? -1 : 1;
				speedw = Number(SignW * ((Math.abs(speedw) <= 1) ? 1 : Math.abs(speedw)));
				
				if (Math.abs(ObjW-DirectObj.GoalW) <= Math.abs(speedw)) { DirectObj.CurrentW = DirectObj.GoalW; DirectObj.VaryFlagW = true; }
				else DirectObj.CurrentW = ObjW + speedw;
				
				DirectObj.style.width = DirectObj.CurrentW + 'px';
				var ElementPosArray = getPosition($(this.CodeSection));
				var PosX = Math.floor(DirectObj.BaseX - (DirectObj.CurrentW + 4 * 2)/2);
				PosX = (PosX < ElementPosArray[0]) ? ElementPosArray[0] : (PosX + (DirectObj.CurrentW + 4 * 2) > ElementPosArray[0] + $(this.CodeSection).getWidth()) ? ElementPosArray[0] + $(this.CodeSection).getWidth() - (DirectObj.CurrentW + 4 * 2) : PosX;
				DirectObj.PosX = PosX;
				DirectObj.GoalX = PosX;
				DirectObj.style.left = PosX + 'px';
			} else {
				//check height
				var ObjH = DirectObj.CurrentH;
				var e = DirectObj.GoalH - ObjH;
				var speedh = e/speed;
				var SignH = (speedh < 0) ? -1 : 1;
				speedh = Number(SignH * ((Math.abs(speedh) <= 1) ? 1 : Math.abs(speedh)));
				
				if (Math.abs(ObjH-DirectObj.GoalH) <= Math.abs(speedh)) { DirectObj.CurrentH = DirectObj.GoalH; DirectObj.VaryFlagH = true; }
				else DirectObj.CurrentH = ObjH + speedh;
				
				DirectObj.style.height = DirectObj.CurrentH + 'px';
				var ElementPosArray = getPosition($(this.CodeSection));
				DirectObj.PosY = ElementPosArray[1] - (DirectObj.CurrentH + 4 * 2);
				DirectObj.GoalY = DirectObj.PosY;
				DirectObj.style.top = DirectObj.PosY + 'px';
				
				if (DirectObj.VaryFlagH) {
					clearInterval(this.IntervalID);
					this.getImgSet.src = (this.FuncIcon != null) ? this.FuncIcon.ImgPath : '/img/transparent.gif';
					this.getImgSet.style.width = DirectObj.GoalW + 'px';
					this.getImgSet.style.height = DirectObj.GoalH - 14 + 'px';
					this.getImgIntro.innerHTML = (this.FuncIcon != null) ? 'Title: ' + this.FuncIcon.Title : '';
					if (DirectObj.Opacity != 100) { Element.hide(DirectObj); this.FuncIcon = null; }
					else Element.show(this.getImgSection);
					this.getImgContainer.style.filter = null;
					this.getImgContainer.style.MozOpacity = null;
					this.getImgContainer.style.opacity = null;
				}//end if
			}//end if (check width)
		}//end if (O Flag)
	}
	this.LoaderPre = function() {
		clearTimeout(this.TimerIntervalID);
		this.LoadList = [];
		this.StartID = (this.CurrentPage - 1) * this.PerPageAmt;
		this.EndID = this.StartID + this.PerPageAmt - 1;
		/*if (MapType == 'Main') {
			CurrentStatus.OLatLng = {};
			for (var i=this.StartID; i<=this.EndID; i++) {
				if (this.getIconArray[i]) {
					if (!this.getIconArray[i].isIconReady) this.LoadList.push(this.getIconArray[i]);
					if (!CurrentStatus.OLatLng['LatLng#'+this.getIconArray[i].Lat+'#'+this.getIconArray[i].Lng]) CurrentStatus.OLatLng['LatLng#'+this.getIconArray[i].Lat+'#'+this.getIconArray[i].Lng] = [];
					CurrentStatus.OLatLng['LatLng#'+this.getIconArray[i].Lat+'#'+this.getIconArray[i].Lng].push(i);
				}//end if
			}//end for
			MapStatus.CreateMarker();
		}//end if*/
		for (var i=this.StartID; i<=this.EndID; i++) if (this.getIconArray[i] && !this.getIconArray[i].isIconReady) this.LoadList.push(this.getIconArray[i]);
		if (this.LoadList.length > 0) this.IconLoader();
	}
	this.IconLoader = function() {
		if (this.LoadList.length <= 0) { clearTimeout(this.TimerIntervalID); return; }
		var GetIcon = this.LoadList.shift();
		var Loader = new Image();
		Loader.onload = function() {
			var IDSet = 'ImgPreviewer' + this.ClassID;
			var IconID = this.id;
			setTimeout(function() { OImgPreviewer[IDSet].LoadComplete({IconID:IconID, Status:'Ok'}); }, 10);
		};
		Loader.onerror = function() {
			var IDSet = 'ImgPreviewer' + this.ClassID;
			var IconID = this.id;
			setTimeout(function() { OImgPreviewer[IDSet].LoadComplete({IconID:IconID, Status:'Error'}); }, 10);
		};
		Loader.id = GetIcon.OrderID;
		Loader.ClassID = this.id;
		Loader.src = GetIcon.IconPath;
	}
	this.LoadComplete = function(IconID, DataObj) {
		if (!DataObj) {
			if (!this.getIconArray[IconID.IconID]) return;
			this.getIconArray[IconID.IconID].isIconReady = true;
			if (IconID.Status == 'Error') this.getIconArray[IconID.IconID].IconPath = '/img/Map/NoImage90.gif';
			this.getIconArray[IconID.IconID].getIcon.src = this.getIconArray[IconID.IconID].IconPath;
			var IDSet = 'ImgPreviewer' + this.id;
			if (this.LoadList.length > 0) this.TimerIntervalID = setTimeout(function() { OImgPreviewer[IDSet].IconLoader(); }, 150);
		} else {
			this.getIconArray[IconID].isImgReady = true;
			this.getIconArray[IconID].ImgW = DataObj.ImgW;
			this.getIconArray[IconID].ImgH = DataObj.ImgH;
			if (this.FuncIcon == this.getIconArray[IconID]) this.IconClickAction(this.getIconArray[IconID]);
		}//end if
	}
	this.KeyDownEvent = function(KeyCode) {
		switch (KeyCode) {
			case 37:
				if (!this.FuncIcon) { this.ArrowClickAction('Left'); return; };
				if (MapStatus.ClickSource == 'Map') return;
				
				var OrderSet = this.FuncIcon.OrderID - 1;
				if (OrderSet < this.StartID) {
					if (OrderSet < 0) OrderSet = this.TotalAmt - 1;//last Icon
					this.NextFuncIcon = this.getIconArray[OrderSet];
					this.ArrowClickAction('Left');
				} else this.IconClickActionPre(this.getIconArray[OrderSet]);
				break;
			case 39:
				if (!this.FuncIcon) { this.ArrowClickAction('Right'); return; }
				if (MapStatus.ClickSource == 'Map') return;
				
				var OrderSet = this.FuncIcon.OrderID + 1;
				if (OrderSet > this.EndID) {
					if (OrderSet > this.TotalAmt - 1) OrderSet = 0;//first Icon
					this.NextFuncIcon = this.getIconArray[OrderSet];
					this.ArrowClickAction('Right');
				} else if (OrderSet > this.TotalAmt - 1) {
					this.NextFuncIcon = this.getIconArray[0];
					this.ArrowClickAction('Right');
				} else this.IconClickActionPre(this.getIconArray[OrderSet]);
				break;
			case 40:
				if (!this.FuncIcon) this.IconClickActionPre(this.getIconArray[this.StartID]);
				break;
			case 27:
				if (this.FuncIcon) this.ClearWin();
				break;
			default:
				if (!this.BlockAction) this.ClearWin();
		}//end switch
	}
	this.ResizeEvent = function(NewWidth) {
		//reset Icon opacity
		this.FuncIcon = null;
		for (var i=0; i<this.getIconArray.length; i++) {
			this.getIconArray[i].Opacity = 100;
			this.getIconArray[i].GoalO = 100;
			this.getIconArray[i].style.filter = null;
			this.getIconArray[i].style.MozOpacity = null;
			this.getIconArray[i].style.opacity = null;
		}//end for
		
		Element.hide(this.getImgSection);
		Element.hide(this.getImgContainer);
		this.LoadList = [];
		this.TotalWidth = NewWidth;
		this.MainWidth = this.TotalWidth - (27 + 10)*2; //TotalWidth - (ArrowWidth+block*2)*2
		this.MainWidth -= (this.MainWidth % (this.IconWidth + 4 + this.Block));
		this.PerPageAmt = this.MainWidth / (this.IconWidth + 4 + this.Block);
		this.MainWidth -= this.Block;
		this.PageAmt = Math.ceil(this.TotalAmt/this.PerPageAmt);
		this.CurrentPage = Math.ceil((this.FuncID + 1)/this.PerPageAmt);
		this.Distance = this.MainWidth + this.Block;
		this.ReOrgContent();
	}
	this.ReOrgContent = function(Mode) {
		$(this.CodeSection).style.width = this.TotalWidth + 'px';
		//ImgPreviewerMainSection
		this.getMain.style.width = this.MainWidth + 'px';
		this.getMain.style.left = Math.floor(this.TotalWidth/2 - this.MainWidth/2) + 'px';
		this.getMain.style.clip = 'rect(0px, ' + this.MainWidth + 'px, ' + (this.IconWidth+4) + 'px, 0px)';
		
		//ImgPreviewerList
		this.getSliderList.style.left = '0px';
		this.getSliderList.style.top = '0px';
		this.getSliderList.PosX = 0;
		this.getSliderList.PosY = 0;
		this.getSliderList.MoveFlagX = false;
		this.getSliderList.MoveFlagY = false;
		this.getSliderList.GoalX = 0;
		this.getSliderList.GoalY = 0;
		
		this.ClearWin();
		if (this.CurrentPage != 1) {
			var FinalX = (this.Distance * (this.CurrentPage - 1)) * -1;
			this.doMove(FinalX, 0, 10);
		} else this.LoaderPre();
	}
	this.SwitchContent = function(IconObj) {
		clearInterval(this.IntervalID);
		clearTimeout(this.TimerIntervalID);
		Element.hide(this.getImgSection);
		Element.hide(this.getImgContainer);
		this.ClearWin();
		CurrentStatus.OLatLng = {};
		this.DataObj.IconInfo = IconObj.IconInfo;
		this.TotalAmt = this.DataObj.IconInfo.length;
		this.PageAmt = Math.ceil(this.TotalAmt/this.PerPageAmt);
		this.FuncID = 0;
		this.FuncIcon = null;
		this.NextFuncIcon = null;
		this.CurrentPage = Math.ceil((this.FuncID + 1)/this.PerPageAmt);
		this.BlockAction = false;
		this.constructor();
	}
	this.constructor = ImgPreviewerConstructor;
	this.constructor();
}

function ImgPreviewerConstructor() {
	if (!$(this.CodeSection)) return;
	var ImgPreviewer = $(this.CodeSection);
	while (ImgPreviewer.childNodes.length > 0) ImgPreviewer.removeChild(ImgPreviewer.firstChild);
	ImgPreviewer.style.width = this.TotalWidth + 'px';
	ImgPreviewer.style.height = this.TotalHeight + 'px';
	
	//Transparent Back
	var ImgPreviewerTrans = document.createElement('div');
	ImgPreviewerTrans.className = 'ImgPreviewerTrans';
	ImgPreviewer.appendChild(ImgPreviewerTrans);
	
	//ImgPreviewerLeftArrow
	var LeftArrow = document.createElement('div');
	LeftArrow.id = this.id + '#IPLeftArrow';
	LeftArrow.className = 'ImgPreviewerLeftArrow';
	LeftArrow.ClassID = this.id;
	LeftArrow.style.top = Math.floor(this.TotalHeight/2 - 14) + 'px';
	if (CurrentStatus.BrowserPNGfix.indexOf(CurrentStatus.Browser) != -1) {
		LeftArrow.style.background = 'url(/img/transparent.gif)';
		LeftArrow.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/Map/ui/BtnSliderMLeftOut.png, sizingMethod=scale)';
	} else LeftArrow.style.background = 'url(/img/Map/ui/BtnSliderMLeftOut.png) no-repeat';
	LeftArrow.onmouseover = function() { OImgPreviewer['ImgPreviewer'+this.ClassID].ArrowRollEffect(this.id, 'Over'); };
	LeftArrow.onmouseout = function() { OImgPreviewer['ImgPreviewer'+this.ClassID].ArrowRollEffect(this.id, 'Out');	};
	LeftArrow.onclick = function() { OImgPreviewer['ImgPreviewer'+this.ClassID].ArrowClickAction('Left'); };
	ImgPreviewer.appendChild(LeftArrow);
	
	//ImgPreviewerRightArrow
	var RightArrow = document.createElement('div');
	RightArrow.id = this.id + '#IPRightArrow';
	RightArrow.className = 'ImgPreviewerRightArrow';
	RightArrow.ClassID = this.id;
	RightArrow.style.top = Math.floor(this.TotalHeight/2 - 14) + 'px';
	if (CurrentStatus.BrowserPNGfix.indexOf(CurrentStatus.Browser) != -1) {
		RightArrow.style.background = 'url(/img/transparent.gif)';
		RightArrow.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/Map/ui/BtnSliderMRightOut.png, sizingMethod=scale)';
	} else RightArrow.style.background = 'url(/img/Map/ui/BtnSliderMRightOut.png) no-repeat';
	RightArrow.onmouseover = function() { OImgPreviewer['ImgPreviewer'+this.ClassID].ArrowRollEffect(this.id, 'Over'); };
	RightArrow.onmouseout = function() { OImgPreviewer['ImgPreviewer'+this.ClassID].ArrowRollEffect(this.id, 'Out'); };
	RightArrow.onclick =  function() { OImgPreviewer['ImgPreviewer'+this.ClassID].ArrowClickAction('Right'); };
	ImgPreviewer.appendChild(RightArrow);
	
	//IPImgContainer
	var IPImgContainer = document.createElement('div');
	IPImgContainer.className = 'IPImgContainer';
	IPImgContainer.style.left = '0px';
	IPImgContainer.style.top = '198px';
	IPImgContainer.style.width = '180px';
	IPImgContainer.style.height = '254px';
	IPImgContainer.Type = 'ImgContainer';
	IPImgContainer.VaryFlagW = false;
	IPImgContainer.VaryFlagH = false;
	IPImgContainer.MoveFlagX = false;
	IPImgContainer.MoveFlagY = false;
	IPImgContainer.OpacityFlag = false;
	IPImgContainer.CurrentW = 180;
	IPImgContainer.CurrentH = 254;
	IPImgContainer.PosX = 0;
	IPImgContainer.PosY = 0;
	IPImgContainer.Opacity = 0;
	IPImgContainer.GoalX = 0;
	IPImgContainer.GoalY = 0;
	IPImgContainer.GoalW = 0;
	IPImgContainer.GoalH = 0;
	IPImgContainer.GoalO = 0;
	document.getElementsByTagName('body')[0].appendChild(IPImgContainer);
	this.getImgContainer = IPImgContainer;
	//IPImgContainer - IPBtnSection
	var IPBtnSection = document.createElement('div');
	IPBtnSection.className = 'IPBtnSection';
	IPImgContainer.appendChild(IPBtnSection);
	var IPBtnClose = document.createElement('div');
	IPBtnClose.className = 'IPBtnClose';
	IPBtnClose.ClassID = this.id;
	IPBtnClose.onmouseover = function() { this.style.backgroundPosition = '-11px 0px'; };
	IPBtnClose.onmouseout = function() { this.style.backgroundPosition = '0px 0px'; };
	IPBtnClose.onclick = function() { OImgPreviewer['ImgPreviewer'+this.ClassID].ClearWin(); };
	IPBtnSection.appendChild(IPBtnClose);
	//IPImgContainer - IPImgSection
	var IPImgSection = document.createElement('div');
	IPImgSection.className = 'IPImgSection';
	IPImgContainer.appendChild(IPImgSection);
	this.getImgSection = IPImgSection;
	//IPImgSet
	var IPImgSet = document.createElement('img');
	IPImgSet.src = '/img/transparent.gif';
	IPImgSet.ClassID = this.id;
	IPImgSet.onclick = function() { OImgPreviewer['ImgPreviewer'+this.ClassID].ImgClickAction(); };
	IPImgSection.appendChild(IPImgSet);
	this.getImgSet = IPImgSet;
	//IPImgIntroBack
	var IPImgIntroBack = document.createElement('div');
	IPImgIntroBack.className = 'IPImgIntroBack';
	IPImgSection.appendChild(IPImgIntroBack);
	//IPImgIntro
	var IPImgIntro = document.createElement('div');
	IPImgIntro.className = 'IPImgIntro';
	IPImgIntro.innerHTML = 'Photoed By mei';
	IPImgSection.appendChild(IPImgIntro);
	this.getImgIntro = IPImgIntro;
	Element.hide(IPImgContainer);
	
	//ImgPreviewerMainSection
	var ImgPreviewerMain = document.createElement('div');
	ImgPreviewerMain.className = 'ImgPreviewerMain';
	ImgPreviewerMain.style.width = this.MainWidth + 'px';
	ImgPreviewerMain.style.height = (this.IconWidth+4) + 'px';
	ImgPreviewerMain.style.left = Math.floor(this.TotalWidth/2 - this.MainWidth/2) + 'px';
	ImgPreviewerMain.style.clip = 'rect(0px, ' + this.MainWidth + 'px, ' + (this.IconWidth+4) + 'px, 0px)';
	ImgPreviewer.appendChild(ImgPreviewerMain);
	this.getMain = ImgPreviewerMain;
	
	//ImgPreviewerList
	this.getIconArray = [];
	var ImgPreviewerList = document.createElement('div');
	ImgPreviewerList.style.position = 'absolute';
	ImgPreviewerList.style.left = '0px';
	ImgPreviewerList.style.top = '0px';
	ImgPreviewerList.Type = 'SliderList';
	ImgPreviewerList.PosX = 0;
	ImgPreviewerList.PosY = 0;
	ImgPreviewerList.MoveFlagX = false;
	ImgPreviewerList.MoveFlagY = false;
	ImgPreviewerList.GoalX = 0;
	ImgPreviewerList.GoalY = 0;
	ImgPreviewerMain.appendChild(ImgPreviewerList);
	this.getSliderList = ImgPreviewerList;
	for (var i=0; i<this.TotalAmt; i++) {
		var Pattern = /DataSet\[(.*)\]/;
		var ImgPreviewerIcon = document.createElement('div');
		ImgPreviewerIcon.id = this.id + '#ImgPreviewerIcon#' + i;
		ImgPreviewerIcon.className = 'ImgPreviewerIconOut';
		ImgPreviewerIcon.style.left = ((this.IconWidth+4+this.Block) * i) + 'px';
		ImgPreviewerIcon.ClassID = this.id;
		ImgPreviewerIcon.OrderID = i;
		ImgPreviewerIcon.OpacityFlag = 100;
		ImgPreviewerIcon.Opacity = 100;
		ImgPreviewerIcon.GoalO = 100;
		ImgPreviewerIcon.isIconReady = false;
		ImgPreviewerIcon.isImgReady = false;
		ImgPreviewerIcon.ImgW = 0;
		ImgPreviewerIcon.ImgH = 0;
		ImgPreviewerIcon.IconPath = this.DataObj.IconInfo[i].Icon;
		ImgPreviewerIcon.ImgPath = this.DataObj.IconInfo[i].Img;
		ImgPreviewerIcon.Title = trim(this.DataObj.IconInfo[i].Title.replace(Pattern, "$1"));
		ImgPreviewerIcon.Link = this.DataObj.IconInfo[i].Link;
		ImgPreviewerIcon.onmouseover = function() {
			this.className = 'ImgPreviewerIconOver';
			if (this == OImgPreviewer['ImgPreviewer'+this.ClassID].FuncIcon) return;
			this.style.filter = 'alpha(opacity=100)';
			this.style.MozOpacity = 1;
			this.style.opacity = 1;
		};
		ImgPreviewerIcon.onmouseout = function() {
			this.className = 'ImgPreviewerIconOut';
			if (this == OImgPreviewer['ImgPreviewer'+this.ClassID].FuncIcon) return;
			this.style.filter = 'alpha(opacity=' + this.Opacity + ')';
			this.style.MozOpacity = this.Opacity/100;
			this.style.opacity = this.Opacity/100;
		};
		ImgPreviewerIcon.onclick = function() {
			MapStatus.ClickSource = '';
			OImgPreviewer['ImgPreviewer'+this.ClassID].OutFadeOut = [];
			OImgPreviewer['ImgPreviewer'+this.ClassID].IconClickActionPre(this);
		};
		//Compose LatLng Info
		if (this.DataObj.IconInfo[i].Lat && this.DataObj.IconInfo[i].Lng) {
			ImgPreviewerIcon.Lat = this.DataObj.IconInfo[i].Lat;
			ImgPreviewerIcon.Lng = this.DataObj.IconInfo[i].Lng;
			
			if (Math.abs(ImgPreviewerIcon.Lat) > 90) ImgPreviewerIcon.Lat %= 90;
			if (Math.abs(ImgPreviewerIcon.Lng) > 180) {
				ImgPreviewerIcon.Lng %= 360;
				//if (ImgPreviewerIcon.Lng > 180) ImgPreviewerIcon.Lng -= 360;
				if (Math.abs(ImgPreviewerIcon.Lng) > 180) (ImgPreviewerIcon.Lng > 0) ? ImgPreviewerIcon.Lng -= 360 : ImgPreviewerIcon.Lng += 360;
			}//end if
			
			if (!CurrentStatus.OLatLng['LatLng#'+ImgPreviewerIcon.Lat+'#'+ImgPreviewerIcon.Lng]) CurrentStatus.OLatLng['LatLng#'+ImgPreviewerIcon.Lat+'#'+ImgPreviewerIcon.Lng] = [];
			CurrentStatus.OLatLng['LatLng#'+ImgPreviewerIcon.Lat+'#'+ImgPreviewerIcon.Lng].push(i);
		}//end if
		ImgPreviewerList.appendChild(ImgPreviewerIcon);
		this.getIconArray.push(ImgPreviewerIcon);
		
		var IconElement = document.createElement('img');
		IconElement.src = '/img/transparent.gif';
		IconElement.style.width = this.IconWidth + 'px';
		IconElement.style.height = this.IconWidth + 'px';
		ImgPreviewerIcon.appendChild(IconElement);
		ImgPreviewerIcon.getIcon = IconElement;
	}//end for
	
	//Move2CurrentPage
	if (this.CurrentPage != 1) {
		var FinalX = (this.Distance * (this.CurrentPage - 1)) * -1;
		this.doMove(FinalX, 0, 10);
	} else 	this.LoaderPre();
	if (this.Resizeable && CurrentStatus.ImgPreviewerArray.indexOf(this.id) == -1) CurrentStatus.ImgPreviewerArray.push(this.id);
	if (this.KeyControlable && CurrentStatus.ImgPreviewerKeyControl.indexOf(this.id) == -1) CurrentStatus.ImgPreviewerKeyControl.push(this.id);
	
	MapStatus.CreateMarker();
	if (typeof(TagClass) != 'undefined') TagClass.getPicker.disabled = false;
}