addLoadEvent( initImageLayer );
addLoadEvent( initKeyNav );
addLoadEvent( focusPage );
addLoadEvent( function() { new InfoLayer() } );



function initImageLayer()
{
	var imageLayer = document.getElementById( 'imageLayer' );
	
	// Show image
	if ( imageLayer.innerHTML.indexOf('jpg') == -1 ) {
		var imgLetter = window.location.href.match( /item-(\w)/ )[1];
		imageLayer.oncontextmenu = function() { return false };
		imageLayer.style.backgroundImage = 'url(data/' + siteId + '/' + itemId + '-' + imgLetter + '.jpg)';
	}

	// Show keyboard message
	if ( document.cookie.indexOf('keyboard=') == -1 ) {
		var msg = translate( 'Navigeer met de pijltjes op uw toetsenbord' );
		imageLayer.innerHTML += "<div id='msgKeyboard'>" + msg + "</div>";
	}
}



function InfoLayer()
{
	var infoLayer = document.getElementById( 'infoLayer' );
	var caption   = document.getElementById( 'caption' );	
	
	if ( infoLayer && caption ) {
		caption.innerHTML += ( caption.innerHTML != '' ? '&nbsp;|&nbsp;' : '' ) +
		                     "<span id='btnInfo'>Info...</span>";
							
		var layerStepCount  = 7;   // May be changed
		var layerOpacity    = 0;   // Do not change
		var layerStepSize   = Math.floor( 80 / layerStepCount );
		
		var infoStepCount   = 40;  // May be changed
		var infoOpacity     = 100; // Do not change
		var infoStepSize    = Math.floor( 100 / infoStepCount );		
		var maxLayerOpacity = layerStepCount * layerStepSize;
		
		var btnInfo = document.getElementById( 'btnInfo' );
		var timerToggle, timerBlink;
				
		hideInfo = function() {
			clearTimeout( timerToggle );
			timerToggle = null;
			setOpacity( infoLayer, layerOpacity );
			if ( layerOpacity > 0 ) {
				layerOpacity -= layerStepSize;
				timerToggle = setTimeout( "hideInfo()", 5 );
			}
		}
		
		showInfo = function() {
			if ( timerBlink != 'undefined' ) {
				setOpacity( btnInfo, 100 );				
				clearTimeout( timerBlink );
				timerBlink = null;
			}
			if ( timerToggle != 'undefined' ) {
				clearTimeout( timerToggle );
				timerToggle = null;
			}
			setOpacity( infoLayer, layerOpacity );
			if ( layerOpacity < maxLayerOpacity ) {
				layerOpacity += layerStepSize;
				timerToggle = setTimeout( "showInfo()", 5 );
			}
		}
		
		blinkInfo = function() {
			if ( infoOpacity <= 20 || infoOpacity >= 100 ) {
				infoStepSize *= -1;
			}
			infoOpacity += infoStepSize;
			setOpacity( btnInfo, infoOpacity );
			timerBlink = setTimeout( "blinkInfo()", 20 );
		}
		
		btnInfo.onmouseover = showInfo;
		btnInfo.onmouseout  = hideInfo;
		blinkInfo();
	}
}


		
function setOpacity( obj, opacity )
{
	if ( obj != 'undefined' ) {
		obj.style.opacity = opacity / 100;
		obj.style.filter  = "alpha( opacity:" + opacity + " )";
	}
}


function focusPage()
{
	var btnItemIdPrev = document.getElementById( 'btnItemIdPrev' );
	var btnItemIdNext = document.getElementById( 'btnItemIdNext' );
	
	if ( btnItemIdPrev ) {
		btnItemIdPrev.hideFocus = true; // For IE only, use CSS for Mozilla
	}
	
	if ( btnItemIdNext ) {
		btnItemIdNext.focus();
		btnItemIdNext.hideFocus = true; // For IE only, use CSS for Mozilla
	}
	else {
		document.body.focus(); // Does not work for Mozilla
	}
}



function keyUp()
{
	var btnItemIdPrev = document.getElementById( 'btnItemIdPrev' );
	btnItemIdPrev.className = 'mOver';
	self.location = btnItemIdPrev.href;
}



function keyDown()
{
	var btnItemIdNext = document.getElementById( 'btnItemIdNext' );
	btnItemIdNext.className = 'mOver';
	self.location = btnItemIdNext.href;
}



// For item-x only, will be overwritten for item-l
keyLeft = keyRight = function() {
	top.location.href = '/frame.php' + self.location.search;
}



function checkFrames()
{
	if ( self.location.href.indexOf('item-l.php') != -1 && top.location.href.indexOf('/frame.php') == -1 ) {
		top.location.href = '/frame.php' + self.location.search;
	}
	else if ( self.location.href.indexOf('item-x.php') != -1 && top.location.href.indexOf('/item-x.php') == -1 ) {
		top.location.href = self.location.href;
	}
}