function addEvent(element, event, callback)
{
    if('addEventListener' in element)
    {
        element.addEventListener(event, function (event) { if(!event) event = window.event; return callback(event); }, false);
    }
    else
    {
        element.attachEvent('on' + event, function (event) { if(!event) event = window.event; return callback(event); }, false);
    }
}

function setupScreenshots()
{
    function hasParentClassed(className, element)
    {
        var node = element;
        
        while(node)
        {
            if(node.className == className)
            {
                return true;
            }
            
            node = node.parentNode;
        }
        
        return false;
    }
    
    var lastBigged = null;
    
    var imgs = document.getElementsByTagName("IMG");
    for(var i = 0; i < imgs.length; i++)
    {
        var img = imgs[i];
        
        if(hasParentClassed("screenshots", img))
        {
            // we found the chosen one!
            img.style.cursor = "pointer";
            img.onclick = function (target) { return function () {
                // grow my child...GROW!!
                
                if(lastBigged != null)
                {
                    document.body.removeChild(lastBigged);
                    lastBigged = null;
                }
                
                // what are our current dimensions?
                var originalBounds = {
                    left: function (e) { return (e)?(((e.offsetLeft)?e.offsetLeft:0) + arguments.callee(e.offsetParent)):0; }(target),
                    top: function (e) { return (e)?(((e.offsetTop)?e.offsetTop:0) + arguments.callee(e.offsetParent)):0; }(target),
                    width: target.offsetWidth,
                    height: target.offsetHeight
                };
                
                // we know the target width/height is 320x480
                var  newBounds = {
                    left: originalBounds.left + (originalBounds.width / 2 - 320 / 2),
                    top: originalBounds.top + originalBounds.height - 480,
                    width: 320,
                    height: 480
                };
                
                var bigger = target.cloneNode(true);
                bigger.style.position = "absolute";
                bigger.style.visibility = "hidden";
                bigger.onclick = function () {
                    document.body.removeChild(bigger);
                    lastBigged = null;
                };
                
                document.body.appendChild(bigger, true);
                
                // animate it to there
                var startedOn = (new Date()).valueOf();
                
                lastBigged = bigger;
                
                setTimeout(function () {
                    if(lastBigged != bigger)
                    {
                        return;
                    }
                    
                    var now = (new Date()).valueOf();
                    
                    var t = (now - startedOn) / 250;
                    
                    if(t < 1)
                    {
                        bigger.style.left = (originalBounds.left + (newBounds.left - originalBounds.left) * t) + "px";
                        bigger.style.top = (originalBounds.top + (newBounds.top - originalBounds.top) * t) + "px";
                        bigger.style.width = (originalBounds.width + (newBounds.width - originalBounds.width) * t) + "px";
                        bigger.style.height = (originalBounds.height + (newBounds.height - originalBounds.height) * t) + "px";
                        bigger.style.visibility = "visible";
                        
                        setTimeout(arguments.callee, 33);
                    }
                    else
                    {
                        bigger.style.left = newBounds.left + "px";
                        bigger.style.top = newBounds.top + "px";
                        bigger.style.width = newBounds.width + "px";
                        bigger.style.height = newBounds.height + "px";
                        bigger.style.visibility = "visible";
                    }
                }, 33);
            }; }(img);
        }
    }
}

addEvent(window, "load", setupScreenshots);