// JavaScript Document
var hexZoom = {
	Version			: "1.0.0.1",
	WindowID 		: null,
	BackID			: null,
	MainImageID		: null,
	ThumbsID		: null,
	ThumbsTempID	: "imgaezoomtempthumbs",
	ThumbsCtrlID	: "imagezoomctrl",
	ThumbNailPrefix	: "hexZoomThumb_",
	ThumbSrc		: null,
	HasThumbs		: false,
	ImageSrc		: null,
	ImageList		: new Array(),
	Created			: false,
	objScrollThumbs	: null,
	LoaderImg		: null,
	WindowOpen		: false,
	Gallery			: {},
	CloseBtnImage	: null,
	$Window			: function() {
		return(this.$(this.WindowID))
	},
	$Back			: function() {
		return(this.$(this.BackID))
	},
	$thumbs			: function() {
		return(this.$(this.ThumbsID))
	},
	$tempthumbs			: function() {
		return(this.$(this.ThumbsTempID))
	},
	$MainImage		: function() {
		return(this.$(this.MainImageID))
	},
	add				: function() {
		for (var i=0; i<arguments.length; i++) {
			this.ImageList.push(arguments[i])
		}
	},
	addGallery		: function(strGallery) {
		this.Gallery[strGallery] = {
			ImageList		: new Array(),
			ThumbSrc		: null,
			ImageSrc		: null,
			add				: function() {
				for (var i=0; i<arguments.length; i++) {
					this.ImageList.push(arguments[i])
				}
			}
		}
		if (arguments.length > 1) {
			for (var i=1; i<arguments.length; i++) {
				this.Gallery[strGallery].add(arguments[i])
			}
		}
	},
	clear			: function() {
		this.ImageList = new Array()
	},
	show			: function(strImageToShow,strGallery) {
		if (strGallery != null) {
			this.ImageList 	= this.Gallery[strGallery].ImageList
			if (this.Gallery[strGallery].ImageSrc != null) {
				this.ImageSrc	= this.Gallery[strGallery].ImageSrc
			}
			if (this.Gallery[strGallery].ThumbSrc != null) {
				this.ThumbSrc	= this.Gallery[strGallery].ThumbSrc
			}
			
			
		}
		var objTempClose = document.createElement("div")
		if (this.CloseBtnImage != null) {
			objTempClose.innerHTML = "<img src='" + this.CloseBtnImage + "'/>"
			objTempClose.className = "windowcloseimage"
		}else{
			objTempClose.innerHTML = "X"
			objTempClose.className = "windowclose"
			objTempClose.onmouseover = function () {this.className = "windowclosehvr"}
			objTempClose.onmouseout = function () {this.className = "windowclose"}
		}
		
		
		objTempClose.onclick = function() {hexZoom.hide(); return false}
		if (this.$Window().hasChildNodes) {
			//alert(this.$Window().childNodes[0].innerHTML)
		this.$Window().insertBefore(objTempClose,this.$Window().childNodes[0])
		}else{
			this.$Window().appendChild(objTempClose)
		}
		if (this.ImageList.length > 0) {
			this.WindowOpen					= true
			this.$Window().style.display 	= "block"
			this.$(this.ThumbsCtrlID).style.display="block"
			hexZoom.centreWindow();
			this.$Back().style.display 		= "block"
			this.$Back().style.width 		= this.winWidth() + "px"
			this.$Back().style.height 		= this.winHeight() + "px"
			this.$Back().childNodes[0].width = this.winWidth()
			this.$Back().childNodes[0].height = this.winHeight()
			
			
			if (this.ImageList.length > 1) {
				//if (!this.Created) {
					this.createThumbs();
					this.Created = true
					this.HasThumbs = true
				//}
			}else{
				this.$(this.ThumbsCtrlID).style.display="none"
			}
			
			this.showMainImage(strImageToShow)
			hexZoom.centreWindow();
		}
		if (hex.browser) {
			hex.browser.png.ApplyIEFilter()
		}
	},
	hide			: function() {
		this.$Window().style.display = "none"
		this.$Back().style.display = "none"
		this.WindowOpen = false
	},
	centreWindow	: function() {
		this.$Window().style.left		= ((this.winWidth()/2)-( this.$width(this.WindowID)/2))
		this.$Window().style.top		= ((this.winHeight()/2)-( this.$height(this.WindowID)/2))
		this.$Window().style.top		= 600 - this.$height(this.WindowID) + document.body.scrollTop
		
		this.$Window().style.left		= ((this.winWidth()/2)-( this.$width(this.WindowID)/2))
		//this.$Window().style.top		= ((this.winHeight()/2)-( this.$height(this.WindowID)/2))
		//this.$Window().style.top		= (600 - this.$height(this.WindowID)) + document.body.scrollTop
		//this.$Window().style.top		= 600 - this.$height(this.WindowID) +((document.documentElement) ?  document.documentElement.scrollTop : document.body.scrollTop)
		this.$Window().style.top		= (this.winVisHeight()/2) - ( this.$height(this.WindowID)/2) + ((document.documentElement) ?  document.documentElement.scrollTop : document.body.scrollTop)
		
		//this.$Window().style.top		= 200  + document.body.scrollTop
		//this.$Window().style.top		= "200px"
	},
	createThumbs	: function() {
		this.$thumbs().innerHTML = ""
		var intThumbCount = this.ImageList.length
		for (var i=0;i < intThumbCount; i++) {
			if (this.ImageList[i] != "") {
				var strTempID 		= this.ThumbNailPrefix + this.ImageList[i] + "_" + i
				
				var objImage 		= document.createElement("div")
				objImage.className 	= "image"
				objImage.style.height = "60px"
				objImage.style.width = "auto"
				objImage.id			= "thumb_" + i
				
				var objTempImage 	= document.createElement("img")
				objTempImage.src 	= this.ThumbSrc + this.ImageList[i]
				objTempImage.id 	= strTempID
				objTempImage.style.height = "56"
				objTempImage.style.width = "auto"
				
				var objTempLoaded	= document.createElement("div")
				objTempLoaded.id	= "hexThumbLoader_" + i
				objTempLoaded.className = "thumbloader"
		
				var objTempImgLoaded	= document.createElement("img")
				objTempImgLoaded.src	= this.LoaderImg
				objTempLoaded.appendChild(objTempImgLoaded)
				
				objImage.appendChild(objTempLoaded)
				
				this.$tempthumbs().appendChild(objTempImage)
				this.$thumbs().appendChild(objImage)
	
				this.$("hexThumbLoader_" + i).style.height = this.$(strTempID).scrollHeight
				
				this.$(strTempID).onmouseup = (function (vars) {return function () {hexZoom.showMainImage(vars);}})(this.ImageList[i])
				if (this.$(strTempID).readyState) {
				
					this.$(strTempID).onreadystatechange = (function (vars) {return function () {
							if (this.readyState.toString() == "loaded" || this.readyState.toString() == "complete") {
							hexZoom.$("thumb_" + vars).innerHTML = ""
							hexZoom.$("thumb_" + vars).appendChild(this)
							}
						}})(i)
					
					if (this.$(strTempID).readyState.toString() == "loaded" || this.$(strTempID).readyState.toString() == "complete") {
						this.$("thumb_" + i).innerHTML = ""
						this.$("thumb_" + i).appendChild(this.$(strTempID))
					}
					
				}else{
					this.$(strTempID).onload = (function (vars) {return function () {
						hexZoom.$("thumb_" + vars).innerHTML = ""
						hexZoom.$("thumb_" + vars).appendChild(this)						  
					}})(i)			
					if (this.$(strTempID).complete) {
						this.$("thumb_" + i).innerHTML = ""
						this.$("thumb_" + i).appendChild(this.$(strTempID))
					}
				
				}
			}
		}	
		
		if (this.$thumbs().scrollWidth < this.$thumbs().parentNode.clientWidth) {
			this.$("leftscroll").style.display = "none"
			this.$("rightscroll").style.display = "none"
			this.$thumbs().style.width = this.$thumbs().parentNode.clientWidth + "px"
		}else{
			this.$("leftscroll").onmouseover = function() {
				this.objScrollThumbs = setInterval("hexZoom.scrollThumbs(-2)",50)
			}
			this.$("leftscroll").onmouseout = function() {
				clearInterval(this.objScrollThumbs )
				this.objScrollThumbs = null
				
			}
			this.$("rightscroll").onmouseover = function() {
				this.objScrollThumbs = setInterval("hexZoom.scrollThumbs(3)",50)
				
			}
			this.$("rightscroll").onmouseout = function() {
				clearInterval(this.objScrollThumbs )
				this.objScrollThumbs = null
			}
		}
	},
	showMainImage 	: function(strImageToShow) {
		
		if (strImageToShow == null) {strImageToShow = this.ImageList[0]}
		
		this.$MainImage().innerHTML = ""

		var objTempImage 	= document.createElement("img")
		objTempImage.src 	= this.ImageSrc + strImageToShow
		objTempImage.id		= "hexZoomMainImage"
		var objTempLoaded	= document.createElement("div")
		objTempLoaded.id	= "hexZoomMainLoader"
		objTempLoaded.className = "loader"
		
		var objTempImgLoaded	= document.createElement("img")
		objTempImgLoaded.src	= this.LoaderImg
		objTempLoaded.appendChild(objTempImgLoaded)
		this.$MainImage().appendChild(objTempLoaded)
		this.$MainImage().appendChild(objTempImage)
		
		
		//this.$("hexZoomMainLoader").style.position = "absolute"
		this.$("hexZoomMainLoader").style.left = (this.$MainImage().scrollWidth/2) - 16
		this.$("hexZoomMainLoader").style.top = (this.$MainImage().scrollHeight/2) - 16
		if (this.$("hexZoomMainImage").readyState) {
			this.$("hexZoomMainImage").onreadystatechange = function () {
				if (this.readyState.toString() == "loaded" || this.readyState.toString() == "complete") {
					hexZoom.mainImageLoaded(true)
				}
			}
			if (this.$("hexZoomMainImage").readyState.toString() == "loaded" || this.$("hexZoomMainImage").readyState.toString() == "complete") {
				hexZoom.mainImageLoaded(true)
			}
		}else{
			this.$("hexZoomMainImage").onload = function () {
				hexZoom.mainImageLoaded()
			}
			if (this.$("hexZoomMainImage").complete) {
				hexZoom.mainImageLoaded()
			}
		}
		
		var objThumbs = this.$thumbs().getElementsByTagName("img")
		var intThumbCount = this.ImageList.length
		for (var i=0; i<intThumbCount;i++) {
			var strTempID 	= this.ThumbNailPrefix + this.ImageList[i] + "_" + i
			var objImage 	= this.$(strTempID)
			
			if (objImage != null) {
				objImage.className = ""
				if (strTempID == (this.ThumbNailPrefix + strImageToShow + "_" + i)) {
					objImage.className = "active"
					//objImage.scrollIntoView(false)
				}	
			}
			objImage = null
		}
		
	},
	mainImageLoaded : function(blnIE) {
		if (blnIE) {
			hexZoom.$MainImage().style.height = hexZoom.$("hexZoomMainImage").scrollHeight +  "px"
		}else{
			hexZoom.$MainImage().style.height = hexZoom.$("hexZoomMainImage").clientHeight +  "px"
		}
		if (!this.HasThumbs) {
				hexZoom.$MainImage().style.width = "auto"
				hexZoom.$MainImage().style.height = "auto"
		}
		hexZoom.$MainImage().removeChild(hexZoom.$("hexZoomMainLoader"))
		hexZoom.centreWindow();
	},
	scrollThumbs	: function(intDir) {
		this.$thumbs().scrollLeft += intDir
		if (intDir < 0) {
			this.$thumbs().scrollLeft += intDir
			//alert(this.$thumbs().scrollLeft)
		}else if(intDir > 0) {
			
		}else{
			this.objScrollThumbs = null
		}
	},
	$				: function(strID) {
		var objElement = document.getElementById(strID)
		return (objElement != null) ? objElement : null
	},
	winWidth		: function() {
		var blnIE = (window.innerWidth > 0) ? false : true
		var intWinWidth = (blnIE) ? document.documentElement.clientWidth : window.innerWidth
		var intBodyWidth = (blnIE) ? document.body.scrollWidth : document.body.scrollWidth
		return (intBodyWidth > intWinWidth) ? intBodyWidth : intWinWidth
	},
	winHeight		: function() {
		var blnIE = (window.innerHeight > 0) ? false : true
		var intWinHeight = (blnIE) ? document.documentElement.clientHeight : window.innerHeight
		var intBodyHeight = (blnIE) ? document.body.scrollHeight : document.body.scrollHeight
		return (intBodyHeight > intWinHeight) ? intBodyHeight : intWinHeight
	},
	winVisHeight	: function () {
		var blnIE = (window.innerHeight > 0) ? false : true
		var intWinHeight = (blnIE) ? document.documentElement.clientHeight : window.innerHeight
		return intWinHeight
	},
	$width 			: function(strID) {
		var objElement = this.$(strID)
		return (objElement != null) ? objElement.scrollWidth : 0
	},
	$height 		: function(strID) {
		var objElement = this.$(strID)
		return (objElement != null) ? objElement.scrollHeight : 0
	},
	Resize 		: function() {
		if (hexZoom.WindowOpen) {
			hexZoom.$Back().style.width 		= hexZoom.winWidth() + "px"
			hexZoom.$Back().style.height 		= hexZoom.winHeight() + "px"
			hexZoom.$Back().childNodes[0].width = hexZoom.winWidth()
			hexZoom.$Back().childNodes[0].height = hexZoom.winHeight()
			hexZoom.centreWindow()
		}
	}
}