function showPopupImage(id, width, height, img) {
	var closeTag = "<p class='close' onClick='closePopup(this.parentNode);'>X</p>";
	var imgTag = "<p><img src='" + img + "'></p>";
	element = document.getElementById(id);
	if (element.style.visibility == 'visible') return;
	var x = document.body.clientWidth/2 + document.body.scrollLeft - width/2;
	//var y = document.body.clientHeight/2 + document.body.scrollTop - height/2;
	element.style.left = x.toString() + 'px';
	//element.style.top = y.toString() + 'px';
	element.style.top = '60px';
	element.style.width = width + 'px';
	element.style.height = height + 'px';
	element.style.visibility = 'visible';

	//document.body.className = 'op30';
	document.getElementById('outer').className = 'op20';
	element.className = element.className + ' op100';

	element.originalHTML = element.innerHTML;
	element.innerHTML = closeTag + imgTag + element.innerHTML;
}

function closePopup(popup) {
	popup.style.visibility="hidden";
	popup.innerHTML = popup.originalHTML;
	document.getElementById('outer').className = '';
}

var _startX = 0; 
var _startY = 0; 
var _offsetX = 0; 
var _offsetY = 0; 
var _dragElement; 
var _oldZIndex = 0; 

InitDragDrop(); 

function InitDragDrop() { 
  document.onmousedown = OnMouseDown; 
  document.onmouseup = OnMouseUp; 
}

function OnMouseDown(e)
{
    // IE is retarded and doesn't pass the event object
    if (e == null) 
        e = window.event; 
    
    // IE uses srcElement, others use target
    var target = e.target != null ? e.target : e.srcElement;
    

    // for IE, left click == 1
    // for Firefox, left click == 0
    if ((e.button == 1 && window.event != null || 
        e.button == 0) && 
        target.className.indexOf('drag') >= 0)
    {
        target.style.cursor = 'move';
        // grab the mouse position
        _startX = e.clientX;
        _startY = e.clientY;
        
        // grab the clicked element's position
        _offsetX = ExtractNumber(target.style.left);
        _offsetY = ExtractNumber(target.style.top);
        
        // bring the clicked element to the front while it is being dragged
        _oldZIndex = target.style.zIndex;
        target.style.zIndex = 10000;
        
        // we need to access the element in OnMouseMove
        _dragElement = target;

        // tell our code to start moving the element with the mouse
        document.onmousemove = OnMouseMove;
        
        // cancel out any text selections
        document.body.focus();

        // prevent text selection in IE
        document.onselectstart = function () { return false; };
        
        // prevent text selection (except IE)
        return false;
    }
}

function OnMouseMove(e)
{
    if (e == null) 
        var e = window.event; 

    // this is the actual &quot;drag code&quot;
    _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
    _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
    
}

function OnMouseUp(e)
{
    if (_dragElement != null)
    {
        _dragElement.style.zIndex = _oldZIndex;

        // we're done with these events until the next OnMouseDown
        document.onmousemove = null;
        document.onselectstart = null;

        _dragElement.style.cursor = 'default';
        // this is how we know we're not dragging      
        _dragElement = null;
    }

}

function ExtractNumber(value)
{
    var n = parseInt(value);
	
    return n == null || isNaN(n) ? 0 : n;
}

// this is simply a shortcut for the eyes and fingers
function $(id)
{
	return document.getElementById(id);
}