var tiger = new Image();
tiger.src = 'img/tigerpeek.gif';
tiger.style.position = 'fixed';
tiger.style.overflow = 'hidden';

var target_el = document.body;
target_el.appendChild(tiger);

var frame_time = 50;
var move_time = 1300;

// The following are normalised to img height
var pos = 0;
var move_target;

function SetImagePos(img, x, y)
{
    img.style.left = x + "px";
    var bot_relative = (y - img.height);
    img.style.bottom = bot_relative + "px";
}
SetImagePos(tiger, 150, 0);

function damping(tt)
{
    tt *= 2; // reduce range of t from 0..1 to 0..0.5
    
    if (tt < 1.0)
    {
        // first half gets accelerating quadratic
        // y = x^2
        return (tt * tt) / 2;
    }
    else
    {
        // second half gets deccelerating quadratic
        // y = -(x-2)^2 + 2
        tt -= 2.0;
        return (-(tt * tt) + 2) / 2;
    }
 
}


onfocus = function(event)
{
    move_target = 0;
    animateloop();
}

function clamp(val, low, high)
{
    if (val > high)
        return high;
    else if (val < low)
        return low;
    else
        return val;
}

function animateloop()
{
    var dir = move_target - pos;
    
    // Are we there yet?
    if (Math.abs(dir) > 0.0005)
    {
        var displacement = frame_time / move_time;
        dir = clamp(dir, -displacement, displacement);
        pos += dir;

        SetImagePos(tiger, 150, damping(pos) * tiger.height);
        window.setTimeout(animateloop, frame_time);
    }
}

onblur = function(event)
{
    move_target = 1;
    animateloop();
}