var timeout_flag    = null;
var shown_id        = null;
var hide_interval   = 2000;

function hideSubNav(){
    if (shown_id){
        $('#' + shown_id).hide();
    }

}

function showSubNav(sub_nav){
    
    if (sub_nav){
        shown_id = sub_nav;
        $('#' + shown_id).css('padding-left', $('#' + shown_id).attr('offset')+'px');
        $('#' + shown_id).show();
    }

}

$(document).ready(function(){
    $("img.hover").each(function() {
        // preload images
        this.src.match(/^(.*)\.(\w+)$/);
        this._over     = new Image();
        this._over.src = RegExp.$1 + "_h." + RegExp.$2;;

        this._img      = new Image();
        this._img.src  = this.src;

        $(this).mouseover(function(){
            this.src = this._over.src;

            clearTimeout(timeout_flag);
            hideSubNav();
            showSubNav($(this).attr('subid'));

        });

        $(this).mouseout(function(){
            this.src = this._img.src;
            timeout_flag = setTimeout(hideSubNav,hide_interval);
        });
    });

    $("div.sub_navigation").each(function() {

        $(this).mouseover(function(){
            clearTimeout(timeout_flag);
        });

        $(this).mouseout(function(){
            timeout_flag = setTimeout(hideSubNav,hide_interval);
        });
        
    });
    
})