/*
cel = container element
pel = previous element
nel = next element
*/
var imageWidth = '100';
var imageHeight = '90';
var eImageWidth = '132'; //enlarged image width
var eImageHeight = '120'; //enlarged image height

var corrY = 0;//-190; //total height of top element
var corrX = 0;//-20;

var overlayid;
var mouseBlocked = false;
var mouseOverCD = false;
var justLeftPopup = false;
var queue = 0;
var overlayVisible = false;

function blockMouse() {
	//debug.value="mouse blocked";
	mouseBlocked = true;
}
function unblockMouse() {
	//debug.value=debug.value+"mouse unblocked";
	//alert("mouse unblocked");
	mouseBlocked = false;
	if(!mouseOverCD) {
		restore('bla');
	}
}

function enlarge(elid) {
	mouseOverCD = true;

	var cel = document.getElementById('cds');
	var cpuel = document.getElementById('popupcd');
	var cdel = document.getElementById(elid);

	cpuel.src = cdel.src;	

//	var	oel = document.getElementById('overlay');
	
	var scroll = document.getElementById('kolom1').scrollTop;

	var posx = findPosX(cdel);
	var posy = findPosY(cdel);
	var imageWidth = cdel.width;
	var imageHeight = cdel.height;
	var eImageWidth = Math.floor(imageWidth+(imageWidth/3)); //enlarged image width
	var eImageHeight = Math.floor(imageHeight+(imageHeight/3)); //enlarged image height
	//alert(eImageWidth);
	//alert(eImageHeight);

	for(var i = 0; i < cel.childNodes.length ; i++) {
		if(cel.childNodes[i].childNodes[0] != undefined) {
			if(cel.childNodes[i].childNodes[0].id == elid) {
				if(i < cel.childNodes.length-1){
					var nel = cel.childNodes[i+1].childNodes[0];
					//detect end of line	
					if(nel != undefined) {
						if(posy == findPosY(nel)) {
							//nel.style.marginLeft = imageWidth+'px';
						} else if(cel.childNodes[i-1] != undefined && cel.childNodes[i-1].childNodes[0] != undefined) {
							//var pel = cel.childNodes[i-1].childNodes[0];
							//pel.style.marginRight = imageWidth+'px';
							//alert("eol");
							posx = posx -20;
						}
					}
				}
			}
		}
	}				
	
	cpuel.style.position = "absolute";
	cpuel.style.top = posy-((eImageHeight-imageHeight)/2) +corrY - scroll +'px';
	cpuel.style.left = posx-((eImageWidth-imageWidth)/2) +corrX + 'px';
	if(!mouseBlocked){
		cpuel.style.width = eImageWidth+'px';
		cpuel.style.height = eImageHeight+'px';	
		cpuel.style.zIndex = 2;	
		cpuel.style.border = 'solid 2px black';	
	}

	//overlay disabled
//	cpuel.onclick = overlay;	
	
//	overlayid = elid;	
//	if(oel.style.display != 'block') {
//debug.value = mouseOverCD;
		if(!justLeftPopup && !mouseBlocked) {
			blockMouse();
			$('#popupcd').fadeIn(200, unblockMouse);
		}
		cpuel.style.display = "block";	
//	}


//	}
//debug.value = mouseOverCD;
}	

function closePopupCd() {
	//debug.value = mouseOverCD;
	if(!mouseOverCD && queue <= 1) {
		$('#popupcd').fadeOut(200);
		justLeftPopup = false;
	}
	queue = queue - 1;
}

function restore(elid) {
	mouseOverCD = false;

	//debug.value = mouseOverCD;
	
	if(mouseBlocked) return;
	justLeftPopup = true;
	if(!overlayVisible) {	
		queue = queue + 1;
		setTimeout("closePopupCd()", 200);
	}
}

function overlay() {
	var scroll = document.getElementById('kolom1').scrollTop;
	
	elid = overlayid;
	//restore(elid);
	
	overlayVisible = true;

	
	var	oel = document.getElementById('overlay');
	var	ocel = document.getElementById('overlaycontent');	
	
	oel.style.top = 20+scroll+"px";
	
	blockMouse();
	//queue = 1;
	mouseOverCD = false;
	justLeftPopup = true;
	queue = queue + 1;
	closePopupCd();
	
	$('#overlay').fadeIn(500, unblockMouse);
	
	ocel.innerHTML = "WAITING !!!"; 
	xmlOpen('POST', 'overlay.php', 'id='+elid, overlayResponseHandler);
}
function closeoverlay() {
	var	oel = document.getElementById('overlay');
	var cpuel = document.getElementById('popupcd');
	
	$('#overlay').fadeOut(500);
	$('#popupcd').fadeIn(500);
	//oel.style.display = 'none';	
	//cpuel.style.display = 'block';
	
	overlayVisible = false;
}

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;}


/**
* Open a connection to the specified URL, which is
* intended to respond with an XML message.
* 
* @param string method The connection method; either "GET" or "POST".
* @param string url    The URL to connect to.
* @param string toSend The data to send to the server; must be URL encoded.
* @param function responseHandler The function handling server response.
*/
function xmlOpen(method, url, toSend, responseHandler)
{
   if (window.XMLHttpRequest)
   {
       // browser has native support for XMLHttpRequest object
       req = new XMLHttpRequest();
   }
   else if (window.ActiveXObject)
   {
       // try XMLHTTP ActiveX (Internet Explorer) version
       req = new ActiveXObject("Microsoft.XMLHTTP");
   }
   
   if(req)
   {
       req.onreadystatechange = responseHandler;
       req.open(method, url, true);
       req.setRequestHeader("content-type","application/x-www-form-urlencoded");
       req.send(toSend);
   }
   else
   {
       alert('Your browser does not seem to support XMLHttpRequest.');
   }
}


/**
 * Handler for server's response to notes.xml request.
 * Notes are pulled from notes.xml and replace the
 * contents of the DIV with id 'notesSection'.
 */
function overlayResponseHandler()
{
    // Make sure the request is loaded (readyState = 4)
    if (req.readyState == 4)
    {
        // Make sure the status is "OK"
        if (req.status == 200)
        {
        	var	ocel = document.getElementById('overlaycontent');	
        	ocel.innerHTML = req.responseText;
        	
/*            var swappableSection = document.getElementById('notesSection');
            var notes = req.responseXML.getElementsByTagName('note');
            var str = '';
            for(i=0; i < notes.length; i++)
             {
                var noteNode = notes.item(i);
                if(noteNode != null && noteNode.hasChildNodes())
                {
                    str += noteNode.getAttribute('name') + ': ';
                    str += noteNode.firstChild.nodeValue + '<br />';
                }
            }
            swappableSection.innerHTML = str;
*/
        }
        else
        {
            alert("There was a problem retrieving the XML data:\n" +
                    req.statusText);
        }
    }
}