$(function () {
    /* position of the <li> that is currently shown */
    var current = 0;
    var loaded = 0;
    for (var i = 1; i < 5; ++i)
        $('<img />').load(function () {
            ++loaded;
            if (loaded == 4) {
                $('#bg1,#bg2,#bg3,#bg4').mouseover(function (e) {

                    var $this = $(this);
                    /* Wenn der Mauszeiger gerade auf den aktuellen Bereich ist dann mach nichts  -> return (Sprung aus der Funktion) */
                    if ($this.parent().index() == current)
                        return;

                    /* item is bg1 or bg2 or bg3 or bg4, depending where we are hovering */
                    var item = e.target.id;

                    /*
                    this is the sub menu overlay. Let's hide the current one
                    if we hover the first <li> or if we come from the last one,
                    then the overlay should move left -> right,
                    otherwise right->left
                    
                    */
                    /* Wenn (erstes oder letzes)  */
                    if ((item == 'bg1' || current == 3) || (item == 'bg2' && current == 2))
                        $('#menu .sub' + parseInt(current + 1)).stop().animate({ backgroundPosition: "(-266px 0)" }, 300, function () {
                            $(this).find('li').hide();
                        });
                    else
                        $('#menu .sub' + parseInt(current + 1)).stop().animate({ backgroundPosition: "(266px 0)" }, 300, function () {
                            $(this).find('li').hide();
                        });

                    if ((item == 'bg4' || current == 0) || (item == 'bg3' && current == 1)) {
                        /* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
                        $('#menu > li').animate({ backgroundPosition: "(-800px 0)" }, 0).removeClass('bg1 bg2 bg3 bg4').addClass(item);
                        
                    }
                    else {
                        /* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
                        $('#menu > li').animate({ backgroundPosition: "(800px 0)" }, 0).removeClass('bg1 bg2 bg3 bg4').addClass(item);
                        
                    }

                    /*
                    We want that if we go from the first one to the last one (without hovering the middle one),
                    or from the last one to the first one, the middle menu's overlay should also slide, either
                    from left to right or right to left.
                    */
                    if ((item == 'bg1' || current == 3) || (item == 'bg2' && current == 0)) {
                        $('#menu .sub' + parseInt(current)).stop().animate({ backgroundPosition: "(-266px 0)" }, 300);
                    }
                    if ((current == 0 && item == 'bg4') || (item == 'bg2' && current == 3)) {
                        $('#menu .sub' + parseInt(current + 2)).stop().animate({ backgroundPosition: "(266px 0)" }, 300);
                    }


                    /* change the current element */
                    current = $this.parent().index();

                    /* let's make the overlay of the current one appear */

                    $('#menu .sub' + parseInt(current + 1)).stop().animate({ backgroundPosition: "(0 0)" }, 300, function () {
                        $(this).find('li').fadeIn();
                    });
                });
            }
        }).attr('src', 'images/' + i + '.jpg');
});