// $(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;
//         })
// 
//         $(this).mouseout(function(){
//             this.src = this._img.src;
//         })
//     })
// })


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

function hideSubNav(){

    if (shown_id){
        $('#' + shown_id).hide();
        shown_img.src = shown_img._img.src;
    }

}

function showSubNav(sub_nav, img_obj){
    
    if (sub_nav){
        shown_id = sub_nav;
        shown_img = img_obj;
        shown_img.src = shown_img._over.src;
        $('#' + 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);

        });

        $(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);
        });
        
    });
    
})