// http://portfolio.sethorian.net Javascript file. Feel free to copy whatever you desire. I don't care about being credited,
// just be a nice lad and don't copy my entire site design. ;) 

// This function creates a popup DIV that holds a maximized version of the image on which the user has clicked. As input it
// requires the location of the image-to-be-enlarged and an event. (Required by W3C regulation and thus Firefox; mouse-events
// are an event and require an event argument, as if Javascript were a true programming language. I don't mind the 
// professionalization, but could those guys please begin with, oh I dunno, introducing proper primitive usage? Strings? 
// Booleans? Integers? It sure beats variables.)
function createDiv(img, evt){
	// The new div is only created if it doesn't already exist.
	if(document.getElementById('popupDiv') == null){
		// Create variables
		var image = new Image;
		var width;
		var height;
		var xPos;
		var yPos;
		
		// Assign the various variables. In this case, the image is given its filename, width and height is
		// retrieved from image object.
		image.src = img;
		width = image.width;
		height = image.height;
		
		// xPos and yPos retrieve their respective locations using the mouseevent.
		var e = (window.event) ? window.event : evt; // oddball construction for W3C wankers/FireFox fanboys
		xPos = e.clientX;
		yPos = e.clientY;
		
		// Create the new DIV which will hold the large image.
		// Immediately assign an ID to this new DIV so it can be easily accessed lateron.
		var newDiv = document.createElement('div');
		newDiv.id = 'popupDiv';
		
		// Set the width and height of the new div
		newDiv.style.width = width + 'px';
		newDiv.style.height = height + 'px';
		
		// Old code;
			// Make the new div absolute (so it floats above the other divs and can be given an absolute location)
			//newDiv.style.position = "absolute";
			//newDiv.style.top = checkDimension(yPos, height, false) + 'px';
			//newDiv.style.left = checkDimension(xPos, width, true) + 'px';
		// New code;
		// The popup receives an absolute positioning so that it always floats above the other divs and can be given an
		// absolute location. This way, the large image popups will always appear in the upper left corner of the user's
		// screen. Additionally, the amount of distance scrolled by the user is taken into account. This way, no matter
		// how much the user has scrolled, the popup image will always appear in the top left corner of his screen, not
		// in the absolute top left corner of the website.
		newDiv.style.position = "absolute";
		newDiv.style.top = 5 + document.documentElement.scrollTop + 'px';
		newDiv.style.left = '5px';
		
		// Add the HTML code to the DIV; in this case; add the picture over which the user hovered.
		// Additionally, the div is given a pointer cursor, an onclick function to remove the popup image and a title, 
		// instructing the user to click to close the image.
		newDiv.innerHTML = "<img src='" + image.src + "' id='popupImg' style='cursor: pointer; border: 1px solid #000000;' onclick='removeDiv()' title='Click to close popup image' />";
		
		// Now append the newly created DIV with its HTML code to the website
		document.body.appendChild(newDiv);
	}
	// Optionally an else statement can be placed here in which the newDiv gets a new location based on the location of the mouse.
}

// Removes the earlier created div element popupDiv.
function removeDiv(){
	var newDiv = document.getElementById('popupDiv');
	newDiv.parentNode.removeChild(newDiv);
}

// Deprecated function; was used when images were still placed at the location where the user clicked. (And thus verification was necessary
// to prevent the image from landing outside the viewport (HTML viewing bit of your browser)
	// This function checks if one of the two dimensions of an image (width or height) goes outside the screen. If it does, then a new
	// position value is calculated that doesn't go outside the screen. This function differentiates between width and height, thus it
	// requires a boolean argument of isWidth to be passed along to indicate if the value to be checked is a width or a height value.
	function checkDimension(position, size, isWidth){
		var offset = position+size;
		var screenSize;
		
		// Check if we're doing a width check or a height check. screenSize variable is set by width or height.
		if(isWidth){
			// Set the screenSize variable to that of the width of the viewport (HTML area of the browser screen)
			if(window.innerWidth != null){
				screenSize = window.innerWidth;
			}else if(document.documentElement.clientWidth != null){
				screenSize = document.documentElement.clientWidth;
			}else if(document.body.clientWidth != null){
				screenSize = document.body.clientWidth;
			}
		}else{
			// Set the screenSize variable to that of the height of the viewport (HTML area of the browser screen)
			if(window.innerHeight != null){
				screenSize = window.innerHeight;
			}else if(document.documentElement.clientHeight != null){
				screenSize = document.documentElement.clientHeight;
			}else if(document.body.clientHeight != null){
				screenSize = document.body.clientHeight;
			}
			
			// The distance the user has scrolled down is retrieved (assuming there is such a value) and added
			// to the screenSize variable.
			if(document.documentElement.scrollTop != null){
				screenSize = screenSize + document.documentElement.scrollTop;
			}else if(window.pageYOffset != null){
				screenSize = screenSize + window.pageYOffset;
			}
		}
		
		// Check if position + size is larger than the width/length
		if(offset > screenSize){
			// The amount of pixels the picture is over the viewport is calculated. Then a new position is calculated
			// that doesn't go over the screen by taking the original position value and detracting the oversized amount
			// of pixels. Then another 25 pixels are detracted just to be safe. (And to ensure the picture doesn't directly
			// border the edge of the screen.) The new position is then returned.
			var oversize = (offset-screenSize);
			var newPosition = (position-oversize);
			newPosition = newPosition - 25;
			return newPosition;
		}else{
			// The picture wasn't over the screen, so return the original position variable as it's a-OK.
			return position;
		}
	}