/*
	Zoom Gallery
	Author Koutsoumpas John
	Copyright @ 2009 Keen Notion Co 

*/

Gallery = function() {
	
	this.imageZoomingWidth = 0;
	this.imageZoomingHeight = 0;
	this.zoomSpeed = 20;
	this.endPosX = 0;
	this.endPosY = 0;
	this.differenceX = 0;
	this.differenceY = 0;
	this.currentFilename = '';
	this.photos = new Array();
	this.galleryDiv = null;
	this.imagePanel = null;
	this.imagePopDiv = null;
	this.imagePopImg = null;
	this.elMagnifyTextDiv = null;
	this.elBody = null;
	this.loadingImage = null;
	this.imageTmp = null;
	this.currentDisplayedImageID = 0;
	this.refreshRate = 10;
	this.currentMouseoverPhotoID = 0;
	this.mousepoint = null;
	this.debug = true;
	
	this.initialize = function() {
		
		if(document.getElementById('ZoomGalleryDiv')) {
			this.galleryDiv = document.getElementById('ZoomGalleryDiv');
			
			// find imagepanel
			if(document.getElementById('imgPanel')) {
				this.imagePanel = document.getElementById('imgPanel');
			} else {
				throw new Error("Could not find the image panel");
			}
			
			// find magnifytextdiv
			if(document.getElementById('magnifyTextDiv')) {
				this.elMagnifyTextDiv = document.getElementById('magnifyTextDiv');
			} else {
				throw new Error("Could not find the elMagnifyTextDiv");
			}
			
			// attach event to imagepanel
			this.imagePanel.onclick = function() {
				gal.zoom(this);
			};
			
			this.imagePanel.onmouseout = function(e) {
				if(window.console && this.debug) {
					console.log("Img mouseout");
				}
				gal.imagePopDiv.currentImageID = -1;
				gal.imagePopDiv.hide();
			};
			
			// create image temp 
			this.imageTmp = new Image();
			
			// assign events to it
			this.imageTmp.onload = function () {
				  gal.startZooming();
			};
		
			this.imageTmp.onerror = function () {
				gal.loadingImage.style.display = 'none';
				//throw new Error("image load error");
			};
			
			// create imagepop
			if(!document.getElementById('imagepopdiv')) { 
				
				this.imagePopDiv = new Popdiv();
				
			} else {
				throw new Error("imagepop already exists");
			}
			
			// loading image
			if(document.getElementById('loadingimage')) {
				this.loadingImage = document.getElementById('loadingimage');
			} else {
				throw new Error("Could not find the loading image");
			}
			
			//find all images
			
			var anchorsList = this.galleryDiv.getElementsByTagName("a");
			
			for(var i = 0; i < anchorsList.length; i++) {
				if(window.console && this.debug) {
					console.log("Found anchor: " + anchorsList[i].src);
					console.log("anchor rel: " + anchorsList[i].getAttribute('rel'));
				}
				if(anchorsList[i].getAttribute('rel') == 'zoom'
				|| anchorsList[i].getAttribute('rel') == 'zoomPopup') {
					var filename = anchorsList[i].getAttribute('imageFilename');
					
					var photo = new Photo();
					photo.filename = filename;
					photo.elAnchor = anchorsList[i];
					photo.elImgthumb = anchorsList[i].getElementsByTagName('img')[0];
					photo.id = i;
					
					// add id to anchor
					if (anchorsList[i].getAttribute('rel') == 'zoomPopup') {
						photo.popup = true;
					}
					
					this.photos.push(photo);
					
					// add event on anchor
					anchorsList[i].id = i;
					anchorsList[i].onclick = function() {
						gal.changePhoto(this.id);
						//gal.zoom();
						return false;
					};
					
					anchorsList[i].onmouseover = function(e) {
						gal.simplezoom(this, e);
						if(window.console && this.debug) {
							console.log("Img mouseover");
						}
						return false;
					};
					
					anchorsList[i].onmousemove = function(e) {
						mousepoint = gal.getMousePos(e);
						
						gal.calculateAndSetPopPosition(mousepoint);
						
						if(window.console && this.debug) {
							console.log("Img mousemove");
							console.log(gal.imagePopDiv.getWidth());
						}
						return false;
					};
					
					anchorsList[i].onmouseout = function(e) {
						if(window.console && this.debug) {
							console.log("Img mouseout");
						}
						gal.imagePopDiv.currentImageID = -1;
						gal.imagePopDiv.hide();
					};
					
					
				}
			}
			
		} else {
			throw new Error('could not find zoom gallery div');
		}
	};
	
	this.calculateAndSetPopPosition = function(mousepoint) {
		windowDimensions = gal.getWindowDimensions();
		if(mousepoint.x + gal.imagePopDiv.getWidth() > windowDimensions.width - 25) {
			newPosX = mousepoint.x - gal.imagePopDiv.getWidth() - 5;
			
		} else {
			newPosX = mousepoint.x + 5;
		}
		
		if(newPosX < 0) {
			newPosX = 5;
			
		}
		
		if(mousepoint.y + gal.imagePopDiv.getHeight() > windowDimensions.height + 50) {
			newPosY = mousepoint.y - gal.imagePopDiv.getHeight() - 5;
			
		} else {
			newPosY = mousepoint.y + 5;
		}
		
		if(newPosY < 0) {
			newPosY = 5;
			
		}
		
		while(this.coordinatesOverlapCheck({x1: newPosX, x2: newPosX + gal.imagePopDiv.getWidth(), y1: newPosY, y2: newPosY + gal.imagePopDiv.getHeight()}, mousepoint)) {
			if(window.console && this.debug) {
				console.log("Overlapping");
			}
			newPosX -= 1;
			newPosY -= 1;
		} 
		
		gal.imagePopDiv.setPosX(newPosX);
		gal.imagePopDiv.setPosY(newPosY);
	
	}
	
	this.coordinatesOverlapCheck = function(coordinatesPrimary, coordinatesSecondary) {
		XOverlapps = false;
		YOverlapps = false;
		
		if(coordinatesSecondary.x >= coordinatesPrimary.x1 && coordinatesSecondary.x <= coordinatesPrimary.x2) {
			XOverlapps = true;
		}
		
		if(coordinatesSecondary.y >= coordinatesPrimary.y1 && coordinatesSecondary.y <= coordinatesPrimary.y2) {
			YOverlapps = true;
		}
		
		if(XOverlapps == true && YOverlapps == true) {
			return true;
		} else {
			return false;
		}
		
	}
	
	this.changePhoto = function(id) {
		this.imagePanel.src = '/photos/fixed250/' + this.photos[id].filename;
		// make thumbnail inactive
		this.photos[this.currentDisplayedImageID].elImgthumb.style.borderColor = '';
		 
		this.photos[id].elImgthumb.style.borderColor = 'orange';
		if(this.photos[id].popup) {
			this.elMagnifyTextDiv.style.display = 'block';
			this.imagePanel.className = 'imagePanelActive';
		} else {
			this.elMagnifyTextDiv.style.display = 'none';
			this.imagePanel.className = 'imagePanel';
		}
		this.currentDisplayedImageID = id;
	};
	
	this.findPos = function(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
				
			} while (obj = obj.offsetParent);
			return [curleft,curtop];
		}
	};
	
	this.startZooming = function() {
		// Get window dimensions
//		windowDimensions = this.getWindowDimensions();
//
//		this.imageZoomingWidth = this.imageTmp.width;
//		this.imageZoomingHeight = this.imageTmp.height;
//		
//		this.endPosX = ((windowDimensions[0] + windowDimensions[2]) - this.imageZoomingWidth) / 2;
//		this.endPosY = ((windowDimensions[1] + windowDimensions[3]) - this.imageZoomingHeight) / 2;
//		
//		if(window.console && this.debug) {
//			console.log("window width: " + windowDimensions[0]);
//			console.log("window height: " + windowDimensions[1]);
//			console.log("scroll width: " + windowDimensions[2]);
//			console.log("scroll height: " + windowDimensions[3]);
//			console.log("endposY " + this.endPosY);
//			console.log("endposX " + this.endPosX);
//		}
//		this.imagePopDiv.display();
//
//		pos = this.findPos(this.imagePanel);
//		
//		this.imagePopDiv.setPosX(pos[0]);
//		this.imagePopDiv.setPosY(pos[1]);
//		
//		this.differenceX = this.endPosX - this.imagePopDiv.posX;
//		this.differenceY = this.endPosY - this.imagePopDiv.posY;
//		//alert(this.endPosY);
//		this.imagePopDiv.setWidth(this.imagePanel.width);
//		this.imagePopDiv.setHeight(this.imagePanel.height);
		/*if(window.console && this.debug) {
			console.log("resizing: " + this.imagePopDiv.offsetWidth);
		}*/
		//point = window.center({width: this.imageTmp.width, height: this.imageTmp.height});
		
		if(window.console && this.debug) {
			console.log("Loaded image");
		}
		this.imagePopDiv.setImageSource('');
		this.imagePopDiv.display();
		this.imagePopDiv.setImageSource(this.imageTmp.src);
		this.imagePopDiv.currentImageID = this.currentMouseoverPhotoID;
		
		
		gal.calculateAndSetPopPosition(this.mousepoint);
		

		this.imagePopDiv.setOpacity(1);
		this.loadingImage.style.display = 'none';
	
	/*
		this.imagePopDiv.display();
		this.imagePopDiv.setImageSource(this.imageTmp.src);
		
		
		this.imagePopDiv.setWidth(this.imageTmp.width);
		this.imagePopDiv.setHeight(this.imageTmp.height);
		
		

		this.imagePopDiv.setOpacity(1);
		
		this.loadingImage.style.display = 'none';
		*/
	};
	
	this.getMousePos = function(e) {
		var posx = 0;
		var posy = 0;
		if (!e) var e = window.event;
		if (e.pageX || e.pageY) 	{
			posx = e.pageX;
			posy = e.pageY;
		}
		else if (e.clientX || e.clientY) 	{
			posx = e.clientX + document.body.scrollLeft
				+ document.documentElement.scrollLeft;
			posy = e.clientY + document.body.scrollTop
				+ document.documentElement.scrollTop;
		}
		// posx and posy contain the mouse position relative to the document
		// Do something with this information
		return {x: posx, y: posy};
	};

	
	this.zoom = function(elem) {
		
		
		if(this.photos[this.currentDisplayedImageID].popup) {
			this.loadingImage.style.display = 'block';
			this.imageTmp.src = '/photos/regular/' + this.photos[this.currentDisplayedImageID].filename;
		}
		
	};
	
	this.simplezoom = function(elem, e) {
		
		this.mousepoint = gal.getMousePos(e);
		
		gal.calculateAndSetPopPosition(this.mousepoint);
		gal.currentMouseoverPhotoID = elem.id;
		
		if(this.imagePopDiv.currentImageID != elem.id) {
			//this.loadingImage.style.display = 'block';
			this.imageTmp.src = '/photos/fixed250/' + this.photos[this.currentMouseoverPhotoID].filename;
		}
			
		
	};
	
	this.loadError = function() {
		
		if(window.console && this.debug) {
			console.log("error loading");
		}
	};
	
	this.getWindowDimensions = function() {
		if( typeof( window.innerWidth ) == 'number' ) {
		    //Non-IE
		    myWidth = window.innerWidth;
		    myHeight = window.innerHeight;
		  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		    //IE 6+ in 'standards compliant mode'
		    myWidth = document.documentElement.clientWidth;
		    myHeight = document.documentElement.clientHeight;
		  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		    //IE 4 compatible
		    myWidth = document.body.clientWidth;
		    myHeight = document.body.clientHeight;
		  }
		 myScrollX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
		 myScrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
		  return {width: myWidth, height: myHeight, x: myScrollX, y: myScrollY};
	};
	
	this.zoomin = function() {
		if(window.console && this.debug) {
			console.log("ZoomingWidth: " + this.imageZoomingWidth);
		}
		this.imagePopDiv.setWidth(this.imagePopDiv.width + (this.imageZoomingWidth / this.zoomSpeed));
		this.imagePopDiv.setHeight(this.imagePopDiv.height + (this.imageZoomingHeight / this.zoomSpeed));
	
		
		this.imagePopDiv.setOpacity(this.imagePopDiv.opac + (1 / this.zoomSpeed));
		
		windowDimensions = this.getWindowDimensions();
		
		//this.imagePopDiv.setPosX((this.imagePopDiv.posX + (this.differenceX / this.zoomSpeed)));
		//this.imagePopDiv.setPosY((this.imagePopDiv.posY + (this.differenceY / this.zoomSpeed)));
			
		if(this.imagePopDiv.width < this.imageZoomingWidth) {
			setTimeout("gal.zoomin()", this.refreshRate);
		}
	};
};

Popdiv = function() {
	
	this.posY = 0;
	this.posX = 0;
	this.width = 0;
	this.height = 0;
	
	this.elDiv = document.createElement("div");
	this.elDiv.style.display = 'none';
	this.elDiv.id = 'imagepopdiv';
	
	this.popimg = new Popimg();
	this.elDiv.className = 'imagepopdiv';
	this.opac = 0;
	
	this.elDiv.style.left = '0px';
	this.elDiv.style.top = '0px';
	//this.elImgCloseButton = document.createElement("img");
	
	this.elInnerDiv = document.createElement("div");
	this.elInnerDiv.className = 'imagepopinnerdiv';
	this.elInnerDiv.id = 'imagepopInnerdiv';
	
	this.elDiv.style.padding = '20px';
	
	this.elDiv.appendChild(this.elInnerDiv);
	
	this.currentImageID = -1;
	
	// attach to body
	document.getElementsByTagName("body")[0].appendChild(this.elDiv);
	
	//this.elImgCloseButton.src = '/images/close-icon.png';
	//this.elImgCloseButton.style.position = 'absolute';
	
	//this.elImgCloseButton.style.right = '10px';
	//this.elImgCloseButton.style.top = '10px';
	
	//this.elInnerDiv.appendChild(this.elImgCloseButton);
	
	this.elInnerDiv.appendChild(this.popimg.img);
	
	
	//this.elImgCloseButton.onclick = function() {
		//gal.imagePopDiv.hide();
	//};
	
	this.setWidth = function(width) {
		//this.width = width;
		//this.elDiv.style.width = this.width + 'px';
		//this.popimg.setWidth(this.width);
	};
	
	this.getWidth = function() {
		return this.elDiv.offsetWidth;
	}
	
	this.getHeight = function() {
		return this.elDiv.offsetHeight;
	}
	this.setHeight = function(height) {
		this.height = height;
		this.elDiv.style.height = this.height + 'px';
		this.popimg.setHeight(this.height);
	};
	
	this.setPosX = function(posX) {
		this.posX = posX;
		this.elDiv.style.left = this.posX + 'px';
	};
	
	this.setPosY = function(posY) {
		this.posY = posY;
		this.elDiv.style.top = this.posY + 'px';
	};
	
	this.setOpacity = function(opacity) {
		this.opac = opacity;
		this.elDiv.opacity = this.opac;
		this.elDiv.style.opacity = this.opac;
		this.elDiv.style.MozOpacity = this.opac;
		this.elDiv.style.filter = "alpha(opacity=" + (this.opac * 100) + ")";
	};
	
	this.display = function() {
		this.elDiv.style.display = 'block';
		this.elDiv.style.position = 'absolute';
		//grayOut(this.elDiv, true, '', '');
	};
	
	this.hide = function() {
		this.elDiv.style.display = 'none';
		//grayOut(this.elDiv, false, '', '');
	};
	
	this.setImageSource = function(src) {
		this.popimg.setSource(src);
	};
	this.elDiv.onclick = function() {
		gal.imagePopDiv.hide();
	};
};

Popimg = function() {
	
	this.posy = 0;
	this.posx = 0;
	this.width = 0;
	this.height = 0;
	
	this.img = document.createElement("img");
	this.img.id = 'imagepopimg';
	this.img.className = 'imagepopimg';
	
	
	this.setWidth = function(width) {
		this.width = width;
		this.img.style.width = this.width + 'px';
	};
	
	this.setHeight = function(height) {
		this.height = height;
		this.img.style.height = this.height + 'px';
	};
	
	this.setPosX = function(posX) {
		this.posX = posX;
		this.img.style.Left = this.posX + 'px';
	};
	
	this.setPosY = function(posY) {
		this.posY = posY;
		this.img.style.Top = this.posY + 'px';
	};
	
	this.setSource = function(src) {
		this.img.src = src;
	};
	
};

Photo = function() {
	
	this.filename = '';
	this.id = 0;
	this.popup = false;
	this.width = 0;
	this.height = 0;
	this.elAnchor = null;
	this.elImgthumb = null;
	
};


function initZoomGallery() {
	/*if(window.console && this.debug) {
		console.log("body onload: starting gallery");
	}*/
	try {
		gal = new Gallery();
		gal.initialize();
	} catch(e) {
		if(window.console && this.debug) {
			console.error("Gallery Error: " + e.message);
		}
	}
};


if (window.addEventListener) {
	window.addEventListener("load",initZoomGallery,false);
} else if (window.attachEvent) {
	window.attachEvent("onload",initZoomGallery);
} else {
	window.onload = function() {initZoomGallery();};
}