var firstLoad = true;
var projectId = 0;
var cadran = "";
var scrollerTop = "";
var scrollerLeft = "";
function loadImageHPG(__id, __projectId, __thumbId)
{
	closeImage();
	projectId =  __projectId;
	thumbId = __thumbId;
	scrollerTop = getAbsoluteTop('scroll0Container');
	scrollerLeft = getAbsoluteLeft('scroll0Container');
	var thumbTop = getAbsoluteTop('thumb' + thumbId);
	var thumbLeft = getAbsoluteLeft('thumb' + thumbId);
	var thumbTopScRel = thumbTop - scrollerTop;
	var thumbLeftScRel = thumbLeft - scrollerLeft;
	var scrollerWidth = $('scroll0Container').getWidth();
	var scrollerHeight = $('scroll0Container').getHeight();
	//alert(thumbTopScRel +"x"+ scrollerHeight/2);
	var imageContainer = $('imageContainer');
	imageContainer.style.display = "block";
	if(thumbTopScRel < scrollerHeight/2-60 && thumbLeftScRel < scrollerWidth/2-60)
	{
		imageContainer.style.top = (scrollerTop*1 + scrollerHeight/4 - 50*1) + "px";
		imageContainer.style.left = (scrollerLeft*1 + scrollerWidth/4 - 50*1) + "px";
		cadran = "NW";
	}
	if(thumbTopScRel < scrollerHeight/2-60 && thumbLeftScRel > scrollerWidth/2-60)
	{
		imageContainer.style.top = (scrollerTop*1 + scrollerHeight/4 - 50*1) + "px";
		imageContainer.style.left = (scrollerLeft*1 + scrollerWidth - 572/2 - 50*1) + "px";
		cadran = "NE";
	}
	if(thumbTopScRel > scrollerHeight/2-60 && thumbLeftScRel < scrollerWidth/2-60)
	{
		imageContainer.style.top = (scrollerTop*1 + scrollerHeight - scrollerHeight/4 - 100*1) + "px";
		imageContainer.style.left = (scrollerLeft*1 + scrollerWidth/4 - 50*1) + "px";
		cadran = "SW";
	}
	if(thumbTopScRel > scrollerHeight/2-60 && thumbLeftScRel > scrollerWidth/2-60)
	{
		imageContainer.style.top = (scrollerTop*1 + scrollerHeight - scrollerHeight/4 - 100*1) + "px";
		imageContainer.style.left = (scrollerLeft*1 + scrollerWidth - 572/2 - 50*1) + "px";
		cadran = "SE";
	}
	spImgContH = $('imageContainer').getHeight();
	spImgVPos = (spImgContH - 32)/2;
	$('imageContainer').innerHTML = '<img id="spinner" src="../images/spinner.gif" style="margin-top:' + spImgVPos + 'px" />';
	new Ajax.Request('../jax/LoadHomePageImage.php', {postBody:'__id='+__id+'&proj='+__projectId, onSuccess:imageReturned});
	
}

var newImage="";
var myImage="";
function imageReturned(response)
{
	newImage = eval(response.responseText);
	myImage = new Image;
	myImage.onload = imageLoaded;
	myImage.src = newImage.path;
}
function imageLoaded(){
	
	imgTop = (575 - myImage.height) / 2 + getAbsoluteTop('scroll0Container')-93;
	imgLeft = (575 - myImage.width) / 2 + getAbsoluteLeft('scroll0Container') + 140;
	if(cadran == "NW"){
		imgTop = scrollerTop;
		imgLeft = scrollerLeft;
	}
	if(cadran == "NE"){
		imgTop = scrollerTop;
		imgLeft = scrollerLeft + $('scroll0Container').getWidth() - myImage.width-10;
	}
	if(cadran == "SW"){
		imgTop = scrollerTop + $('scroll0Container').getHeight() - myImage.height-2;
		imgLeft = scrollerLeft;
	}
	if(cadran == "SE"){
		imgTop = scrollerTop + $('scroll0Container').getHeight() - myImage.height-2;
		imgLeft = scrollerLeft + $('scroll0Container').getWidth() - myImage.width-10;
	}
	var morphContainer = new Effect.Morph('imageContainer', {
		style : "width:"+myImage.width+"px; height:"+myImage.height+"px; top:" + imgTop + "px; left:" + imgLeft + "px;",
		afterFinish:showImage
	});
	var morphSpinner = new Effect.Morph('spinner', {
		style : "margin-top:"+(myImage.height-32)/2+"px;"
	});
}
function showImage(){
	//alert(newImage.id);
 	//var newContent = "<a href='javascript:loadImageHPG(\"" + newImage.nextId + "\")'>";
	var newContent = "<a href='javascript:closeImage()'>";
	newContent += "<img src='" + newImage.path + "' style='border:0px;' />";
	newContent += "</a>";
	newContent += "<a class='home-project-close' href='javascript:closeImage()'>close preview</a>";
	newContent += "<a class='home-project-name' href='project.php?__id=" + projectId + "'>" + newImage.projectName + "</a>";
	$('imageContainer').innerHTML = newContent;
}

function closeImage(){
	var imageContainer = $('imageContainer');
	imageContainer.style.top = "0px";
	imageContainer.style.left = "0px";
	imageContainer.style.width = "100px";
	imageContainer.style.height = "100px";
	imageContainer.style.display = "none";
	/*
	alert(firstLoad);
	var scrollerTop = getAbsoluteTop('scroll0Container');
	var scrollerLeft = getAbsoluteLeft('scroll0Container');
	imageContainer.style.top = "0px";
	imageContainer.style.left = "0px";
	imageContainer.innerHTML = '<img id="spinner" src="../images/spinner.gif" style="margin-top:' + spImgVPos + 'px" />';
	firstLoad = true;
	*/
}

function getAbsoluteTop(objectId) 
{
	// Get an object top position from the upper left viewport corner
	// Tested with relative and nested objects
	o = document.getElementById(objectId);
	oTop = o.offsetTop;            // Get top position from the parent object
	while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element
		oParent = o.offsetParent;  // Get parent object reference
		oTop += oParent.offsetTop; // Add parent top position
		o = oParent;
	}
	// Return top position
	return oTop;
}
function getAbsoluteLeft(objectId) 
{
	// Get an object left position from the upper left viewport corner
	// Tested with relative and nested objects
	o = document.getElementById(objectId);
	oLeft = o.offsetLeft;            // Get left position from the parent object
	while(o.offsetParent!=null) {   // Parse the parent hierarchy up to the document element
		oParent = o.offsetParent;    // Get parent object reference
		oLeft += oParent.offsetLeft; // Add parent left position
		o = oParent;
	}
	// Return left postion
	return oLeft;
}