// ==UserScript==
// @name        Image thumb
// @author      Jonas Sjoblom - Kani
// @description	Show a thumbnamil of the image-link you are hovering.
// @version		1.1

//create onDomReady Event
window.onDomReady = DomReady;

//Setup the event
function DomReady(fn)
{
	//W3C
	if(document.addEventListener)
	{
		document.addEventListener("DOMContentLoaded", fn, false);
	}
	//IE
	else
	{
		document.onreadystatechange = function(){readyState(fn)}
	}
}

//IE execute function
function readyState(fn)
{
	//dom is ready for interaction
	if(document.readyState == "interactive")
	{
		fn();
	}
}


//execute as soon as DOM is loaded
window.onDomReady(onReady);

//do on ready
function onReady()
{
	createBox();
	
	links = document.getElementsByTagName("a");
	
	for(var i = 0; i <= links.length; i++)
	{
		if(links[i] != 'undefined' && links[i] != 'null' && links[i] != null)
		{
			if(links[i].href.toLowerCase().match("jpg$") || links[i].href.toLowerCase().match("png$") || links[i].href.toLowerCase().match("gif$"))
			{
				links[i].onmouseover = "showThumb('" + links[i].href + "');";
				links[i].onmouseout = hideThumb;
			}
		}
	}
}

//Shows the tumb in bottom left corner.
function showThumb(linky)
{
	document.getElementById('thumbBoxDiv').style.display = '';
	document.getElementById('thumbImage').src = linky;
	var newImg = new Image();
	newImg.src = linky;
	var height = newImg.height;
	var width = newImg.width;
	document.getElementById('thumbDescription').innerHTML = width + " x " + height;
	document.onkeydown = showFull;
	document.onkeyup = setBoxStyle;
}

//Hides the thumb
function hideThumb()
{
	setBoxStyle();
	document.getElementById('thumbBoxDiv').style.display = 'none';
	document.getElementById('thumbImage').src = '';
	document.onkeydown = null;
	document.onkeyup = null;
}

//Sets the styles for thumbnail and box.
function setBoxStyle()
{
	document.getElementById('thumbBoxDiv').style = "padding: 8px 8px 0 8px; background-color: #000000; position: fixed; left: 10px; z-index: 7000; text-align: center;";
	document.getElementById('thumbBoxDiv').style.bottom = 10;
	document.getElementById('thumbBoxDiv').style.maxWidth = 300;
	document.getElementById('thumbBoxDiv').style.maxHeight = 300;
	document.getElementById('thumbDescription').style.color = '#FFFFFF';
	document.getElementById('thumbImage').style.maxWidth = 300;
	document.getElementById('thumbImage').style.maxHeight = 300;
	document.getElementById('thumbBoxDiv').style.top = '';
}

//Creates the box and the thumbnail image.
function createBox()
{
	var thumbBox = document.createElement('div');
	thumbBox.setAttribute('id', 'thumbBoxDiv');
	document.body.appendChild(thumbBox);
	var thumb = document.createElement('img');
	thumb.setAttribute('id', 'thumbImage');
	document.getElementById('thumbBoxDiv').appendChild(thumb);
	var thumbDesc = document.createElement('div');
	thumbDesc.setAttribute('id', 'thumbDescription');
	document.getElementById('thumbBoxDiv').appendChild(thumbDesc);
	setBoxStyle();
	hideThumb();
}

//Show image in original size by holding down CTRL.
function showFull()
{
   var KeyID = event.keyCode;
   
   switch(KeyID)
   {
      case 17:
      	document.getElementById('thumbImage').style.maxWidth = '';
		document.getElementById('thumbImage').style.maxHeight = '';
      	document.getElementById('thumbBoxDiv').style.maxWidth = '';
		document.getElementById('thumbBoxDiv').style.maxHeight = '';
		document.getElementById('thumbBoxDiv').style.marginTop = Math.round(-1*(document.getElementById('thumbBoxDiv').offsetHeight/2));
		document.getElementById('thumbBoxDiv').style.marginLeft = Math.round(-1*(document.getElementById('thumbBoxDiv').offsetWidth/2));
		document.getElementById('thumbBoxDiv').style.bottom = '';
		document.getElementById('thumbBoxDiv').style.left = '50%';
		document.getElementById('thumbBoxDiv').style.top = '50%';
      	break;
   }
}