var fsm = document.getElementById('fsm');
var inner = document.getElementById('inner');
var outer = document.getElementById('outer');
var is_ie = document.all && navigator.userAgent.indexOf("Opera") == -1;
var animate_timer = null;

inner._left = 65;
outer._opacity = 0.3;

if (is_ie) {
    fsm.src = '/img/transparent.gif';
    fsm.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/fsm.png', sizingMethod='image')";
    outer.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
}

function clamp(value, min, max) {
    return value < min ? min : (value > max ? max : value);
}

function animate(dir) {
    if (animate_timer != null)  {
        clearTimeout(animate_timer);
        animate_timer = null;
    }

    if (dir < 0) {
        inner._left = clamp(inner._left - 10, 0, 65);
        outer._opacity = clamp(outer._opacity + 0.1, 0.3, 1.0);
    } else {
        inner._left = clamp(inner._left + 10, 0, 65);
        outer._opacity = clamp(outer._opacity - 0.1, 0.3, 1.0);
    }
    inner.style.left = inner._left + 'px';
    if (is_ie)
        outer.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + (outer._opacity * 100) + ")";
    else
        outer.style.opacity = outer._opacity;

    if ((dir < 0 && inner._left == 0 && outer._opacity == 1.0) ||
        (dir > 0 && inner._left == 65 && outer._opacity == 0.3))
        return;
    animate_timer = setTimeout(function() { animate(dir); }, 0);
}

fsm.onmouseover = function() {
    if (animate_timer == null)
        animate(-1);
}
fsm.onmouseout = function() {
    if (animate_timer == null)
        animate(1);
}