var preloadLoadingImage = new Image();
preloadLoadingImage.src = "/wca/js/resources/images/default/shared/large-loading.gif";

var thumbTemplate;
var listenerAdded = false;
Ext.onReady( function() {
	// set up template that will display image thumbnail
	thumbTemplate = new Ext.Template(
		'<div id="thumbnail">',
			'<div style="float:left;width:160px;height:120px;text-align:center;margin:0;padding:0">',
				'<img id="thumbnail-image" style="height:100%" src="{filename}" />',
			'</div>',
			'<div style="float: left; padding-left: 10px; width: 300px;">',
				'{description}',
			'</div>',
		'</div>'
	);
});

function movePanel( e )
{
	var xy = e.getXY();
	var doc = Ext.getDoc();
	var viewSize = doc.getViewSize();
	var scroll = doc.getScroll();
	var relY = xy[1] - scroll.top;
	var relX = xy[0] - scroll.left;
	if( ( relY + 140 ) > viewSize.height )
	{
		dh = -140;
	}
	else
	{
		dh = 20;
	}
	
	if( ( relX + 500 ) > viewSize.width )
	{
		dw = -470;
	}
	else
	{
		dw = -20;
	}
	var newPos = [
		xy[0] + dw,
		xy[1] + dh
	]
	var shadowPos = [
		xy[0] + dw + 6,
		xy[1] + dh + 6
	]
	Ext.fly( 'tooltip' ).setXY( newPos );
	Ext.fly( 'tooltip-shadow' ).setXY( shadowPos );
}

var display = false;
function displayThumbnail( name )
{
	if( !listenerAdded )
	{
		Ext.get( document.body ).on( 'mousemove', movePanel );
		listenerAdded = true;

		document.getElementById( 'tooltip' ).innerHTML = '<img id="thumbnail-image" style="width:32px;height:32px;" src="/wca/js/resources/images/default/shared/large-loading.gif" />Loading....';
	
		// make AJAX request for property information
		Ext.Ajax.request({
			url: '/wca/ajax/get-page-details.php',
			params: { name: name },
			success: doDisplay
		});
	}
}
var data;
var image = new Image();
image.onload = swapLoadingImage;

function doDisplay( response, options )
{
	data = Ext.decode( response.responseText );

	document.getElementById( 'tooltip' ).innerHTML = '';
	var thumbnail = Ext.get( 'thumbnail' )
	var test = Ext.get( 'tooltip' );
	var templateParams = { description: data.description, price: data.price };
	thumbTemplate.append( test, templateParams );

	if( image.src != data.filename )
	{
		image.src = data.filename;
	}
			
}

function swapLoadingImage()
{
	var imageEl = Ext.get( "thumbnail-image" );
	var imageDom = imageEl.dom;
	imageDom.src = image.src;
	imageDom.style.marginLeft = "0px"; 
	//imageDom.style.width = data.width + "px";
	imageDom.style.marginTop = "0px";
	//imageDom.style.height = data.height + "px";
}

function hideThumbnail( propref )
{
	Ext.get( document.body ).un( 'mousemove', movePanel );
	listenerAdded = false;
	Ext.fly( 'tooltip' ).setXY( [-1000,-1000] );
	Ext.fly( 'tooltip-shadow' ).setXY( [-1000,-1000] );
}