var firstDisplay;
var height;
var top;
var width;
var left;
var imageTop;
var imageLeft;
var imageWidth;
var imageHeight;

function hide(event, divId) {
	var element = document.getElementById(divId);
	var x = event.pageX;
	var y = event.pageY;
	if(firstDisplay) {
		firstDisplay = false;
		return false;
	} else {
		if(x>imageLeft && x<(imageLeft+imageWidth) && y>imageTop && y<(imageTop+imageHeight) 
			|| (x>left && x<(left+width) && y>top && y<(top+height))) {
			return false;
		} else {
			element.style.display = "none";
		}
	}
}

function show(event, divId, imageId) {
	var element = document.getElementById(divId);
	
	if(element.style.display != 'block') {
		var i = 0;
		elem = document.getElementById('comments'+i);
		while(elem != null) {
			elem.style.display = "none";
			i++;
			elem = document.getElementById('comments'+i);
		};
		
		var x = event.pageX;
		var y = event.pageY;
		//x -= 15;
		//y -= 15;
	
		element.style.left = x+"px";
		element.style.top = y+"px";
		element.style.display = "block";
		
		top = findPosY(element);
		left = findPosX(element);
		width = element.offsetWidth;
		height = element.offsetHeight;
		
		var image = document.getElementById(imageId);
		imageTop = findPosY(image);
		imageLeft = findPosX(image);
		imageWidth = image.offsetWidth;
		imageHeight = image.offsetHeight;
		
		firstDisplay = true;
	}
}

function findPosX(obj) {
	var curleft = 0;
	if(obj.offsetParent) {
		while(1) {
        	curleft += obj.offsetLeft;
        	if(!obj.offsetParent) {
          		break;
          	}
          	obj = obj.offsetParent;
        }
    } else if(obj.x) {
    	curleft += obj.x;
    }
    return curleft;
}

function findPosY(obj) {
	var curtop = 0;
	if(obj.offsetParent) {
		while(1) {
			curtop += obj.offsetTop;
			if(!obj.offsetParent) {
            	break;
            }
        	obj = obj.offsetParent;
        }
    } else if(obj.y) {
    	curtop += obj.y;
    }
    return curtop;
}

function loadImage(imageTable, imageRow, flickrImage, width, height, closeBarHeight, url) {
	var element = document.createElement("div");
	element.id = "blackout";
	var imageDiv = document.getElementById(imageTable);
	var imageRow = document.getElementById(imageRow);
	var img = document.getElementById(flickrImage);
	img.src = url;
	
	//width and height of the window
	if (typeof window.innerWidth != 'undefined') {
		var sizeX = window.innerWidth;
		var sizeY = window.innerHeight;
		var scrollX = window.pageXOffset;
		var scrollY = window.pageYOffset;
		element.style.opacity = ".8";	
	} else {
 		var sizeX = document.documentElement.clientWidth;
		var sizeY = document.body.offsetHeight;
		var scrollX = document.documentElement.scrollLeft;
		var scrollY = document.documentElement.scrollTop;
		scrollY = scrollY / 2;
		element.style.filter = "alpha(opacity=80)";
	}
	//set the main divs style
	element.style.backgroundColor = "#000000";
	element.style.width = (sizeX + scrollX) + "px";
	element.style.height = (sizeY + scrollY) + "px";
	element.style.position = "absolute";
	element.style.left = "0"; 
	element.style.top = "0";
	document.body.appendChild(element);
	
	imageDiv.style.display = "block";
	imageRow.style.width = width+"px";
	imageRow.style.height = height+"px";
	imageDiv.style.left = (((sizeX/2)-(width/2)) + scrollX) + "px";
	imageDiv.style.top = ((((sizeY/2)-(height/2)) + scrollY) - closeBarHeight) + "px";
}

function closeImage(imageId, flickrImage) {
	var imageDiv = document.getElementById(imageId);
	var img = document.getElementById(flickrImage);
	var element = document.getElementById("blackout");
	
	//for IE purposes
	element.width = '0px';
	element.height = '0px';
	
	document.body.removeChild(element);
	imageDiv.style.display = "none";
	img.src = "./images/spinner.gif";
}