thumbSize = {w:50, h:66};

var last_parent = null;

function show_image_popup(parent, image, suffix)
{
    if (typeof parent.popup != "undefined" && parent.popup != null)
    {
        parent.popup.innerHTML = "";
        document.body.removeChild(parent.popup);
        parent.popup = null;
        last_parent = null;
        return;
    }
    
    if (last_parent != null)
    {
        last_parent.popup.innerHTML = "";
        document.body.removeChild(last_parent.popup);
        last_parent.popup = null;
    }
    
    var p = document.createElement('div');
    p.track_info = track_info[image -1];

    var stuff = document.createElement('p');
    p.style.fontFamily='"Lucida Grande",Geneva,Arial,Verdana,sans-serif';
    p.style.fontSize='80%';
    stuff.appendChild(document.createTextNode("Note: Each image represents a single continuous on-screen appearance"));
	
    
    var img = document.createElement('img');
    img.src = image+suffix+'.jpg';
    img.onload = function()
    {
	    p.style.left = Math.max(0,(pos.x - p.offsetWidth*0.5 + parent.offsetWidth*0.5)) + "px";
	    if (!/MSIE/.test(navigator.userAgent))
	    {
            top = document.createElement('img');
            top.src = "../common/images/top.png";
            p.appendChild(top);
            top.style.position="absolute";
            top.style.top = "-29px";
            top.style.left = (p.offsetWidth/2 - top.offsetWidth/2) + 'px';
        }
    }
    
    var pos = getPageOffset(parent);
    p.style.position = 'absolute';
    p.style.top = (pos.y + parent.offsetHeight) + 'px';
    p.style.left = pos.x +'px';
    
    p.style.padding = '10px';
    p.style.border = '1px solid rgb(9, 11, 25)';
    p.style.backgroundColor = 'white';
    document.body.appendChild(p);
    
    p.appendChild(img);
    p.image = img;

    p.appendChild(stuff);
    
    parent.popup = p;
    last_parent = parent;
}

function init()
{
    var els = document.getElementsByTagName('li');
    
    for (var i in els)
    {
        if (els[i].className != "char_info") continue;
        
        els[i].onmouseover = function(){this.className = "char_info_hover";};
        els[i].onmouseout = function(){this.className = "char_info";};
    }
}