navigation = {
    opened: null,

    show: function ( node ){
        var image = $('img', node);

        // премахваме timeout за скриване ако съществува такъв
        this.clearTimer( node );

        // този елемент е вече показан
        if ( this.opened == node ){
            return;
        }

        // скриваме вече визуализиран елемент от навигацията
        if ( this.opened ){
            this.hide( this.opened );
        }

        // подменяме картинката на главното меню
        var src = image.attr('_over');
        image.attr('src', src);

        // добавяме клас over
        $(node).addClass('over')

        this.opened = node;
    },

    hide: function ( node ){
        var image = $('img', node);

        // подменяме картинката на главното меню
        var src = image.attr('_orig');
        image.attr('src', src );

        // добавяме клас over
        $(node).removeClass('over')

        clearTimeout( node.timer );
        node.timer = null;

        this.opened = null;
    },

    clearTimer: function ( node ){
        if ( node.timer ){
            clearTimeout( node.timer );
            node.timer = null;
        }
    }
}

$(document).ready(function(){

    // проготвяме картинките от менюто
    $("#navigation li img").each(function(){
        var src = $(this).attr('src');

        $(this).attr('_orig', src);

        src.match(/(.*)(\.\w+)$/);
        src = RegExp.$1 + '_h' + RegExp.$2;
        $(this).attr('_over', src);

        // preload на _h картинките
        var image = new Image();
        image.src = src;
    })

    $("#navigation .menu > li").mouseover(function(){
        navigation.show( this );
    })

    $("#navigation .menu > li").mouseout(function(){
        var node = this;
        node.timer = setTimeout(function(){ navigation.hide( node ) }, 200);
    })
})