var prev_x = 0;
var prev_y = 0;
var pos_x = 0;
var pos_y = 0;
var layer;

function getPageSize()
{
	var xScroll, yScroll;
	
	if( window.innerHeight && window.scrollMaxY )
	{	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	}
	else if (document.body.scrollHeight > document.body.offsetHeight)
	{ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	}
	else
	{ // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight)
	{	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight)
	{ // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	}
	else if (document.body)
	{ // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	}else{ 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

function getPageScroll()
{
	var yScroll;

	if( self.pageYOffset )
	{
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	} else if( window.pageYOffset ) {
		yScroll = window.pageYOffset;
	}

	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}


function ShowImage( ImageName , OpenURL , DetailURL )
{
	layer = document.getElementById( 'layer' );
	var image = document.getElementById( 'layer_image' );
	var detail_link = document.getElementById( 'show_detail' );
	var open_link = document.getElementById( 'open_url' );
	
	layer.style.display='none';
	if( DetailURL == ''  )
	{
		var link_layer = document.getElementById( 'link_layer' );
		link_layer.style.display='none';
	}
	else
	{
		open_link.href = OpenURL;
		detail_link.href = DetailURL;
	}
	
	image.onload = function()
	{
		var layer = document.getElementById( 'layer' );
		var arrayPageSize = getPageSize();
		var arrayPageScroll = getPageScroll();
			
		layer.style.display='block';

		pos_x = Number( ( ( arrayPageSize[ 2 ] - layer.offsetWidth ) / 2 ) + arrayPageScroll[ 0 ] );
		if( pos_x < 0 )
			pos_x = 0;
		layer.style.left = pos_x + 'px';
		
		pos_y = Number( ( ( arrayPageSize[ 3 ] - layer.offsetHeight ) / 2 ) + arrayPageScroll[ 1 ] );
		if( pos_y < 0)
			pos_y = 0;
		layer.style.top = pos_y + 'px';
	}
	image.src = ImageName;
}

function OnDragBegin()
{
  prev_x = event.x;
  prev_y = event.y;	
}

function OnDragImage()
{
	pos_x += event.x - prev_x;
	pos_y += event.y - prev_y;
	layer.style.left = pos_x + 'px';
	layer.style.top = pos_y + 'px';
  prev_x = event.x;
  prev_y = event.y;	
}

function HideImage()
{
	layer.style.display='none';
}