var offsetX = [-30, 167, 505, -30, 232, 512, -30, 164, 503];
var offsetY = [-25, -25, -25, 145, 80, 155, 255, 328, 253];
var delta = 0;
function init()
{       
    $$("area").each(function(value)
        {
            var index = parseInt(value.id - 1);
            value.index = index;
            value.observe("mouseover", mouseover);
            
            var coords = $("ctl02_map").cumulativeOffset();
            
            $("ctl02_img" + (index + 1)).setStyle({ left: coords.left + offsetX[index] + "px", top: coords.top + offsetY[index] + "px" });
            new Effect.Fade("ctl02_img" + (index + 1));
            $("ctl02_img" + (index + 1)).observe("mouseout", hideActive);
            $("ctl02_img" + (index + 1)).setStyle({ width: $("ctl02_img" + (index + 1)).getWidth() + "px" });
        }
    );
    
    $(window).onresize = onResizeWindow;
    
    if (Prototype.Browser.Gecko)
        setTimeout("onResizeWindow(null)", 100);  
}
function mouseover(ev)
{
    new Effect.Appear("ctl02_img" + (this.index + 1), { duration: 0.5 });    
}

function hideActive()
{
    if (this.style.display != "none")
        Effect.Fade(this, { duration: 0.5 });
}
function onResizeWindow(ev)
{
    if (Prototype.Browser.Gecko)
        $("divIndexContainer").setStyle({ paddingTop: (document.viewport.getHeight() - $("divIndexContainer").getHeight()) / 2 - 35 + "px" });
    
    $$("area").each(function(value)
        {
            var index = parseInt(value.id - 1);
            var coords = $("ctl02_map").cumulativeOffset();
            $("ctl02_img" + (index + 1)).setStyle({ left: coords.left + offsetX[index] + "px", top: coords.top + offsetY[index] + "px" });
        }
    );
}