$( document ).ready( function() {
    // a menü teljes szélességét tároló változó
    var menu_full_width = 0;
    // ezek fogják tárolni az aktuális előre és hátra szkrollozás aktuális méretét pixelben
    var next_width = 0;
    var prev_width = 0;
    var next_index = 0;
    var prev_index = -1;
    var start_left = 0;
    // itt számolom ki a menu szélességét, erre szükség az animate miatt
    $( '.menu a' ).each( function( i ) {
        $( this ).css( 'left', menu_full_width );
        menu_full_width += $( this ).width() + 13; // a +13 a pdding miatt van!
    })
    // ellenőrizzük hogy alapból kilóg-e a menü a látható részből
    if ( menu_full_width <= 730 ) {
        // ha nem akkor beállítjuk a statikus szélességet és elrejtjük a vezérlőt
        $( '.menu' ).css( 'width', 730 );
        $( '#menu_next img' ).css( 'display', 'none' );
    }
    else {
        // ha szélesebb akkor beállítjuk a szélességét a fent kiszámolt értékre és megjelenítjük a 'next' gombot
        $( '.menu' ).css( 'width', menu_full_width );
        $( '#menu_next img' ).css( 'display', 'block' );
        // az itt kapott érték segítségével tudjuk az első next szélességét kiszámolni.
        // Tehát, hogy mennyivel kell jobbra görgetni első alkalommal.
    }
    function menu_scroll( direction ) {
        prev_index = -1;
        next_index = 0;
        $( '.menu a' ).each( function() {
            this_left = Number( $( this ).css( 'left' ).substr( 0, ( $( this ).css( 'left' ).length - 2 ) ) ) ;
            this_left = this_left + Number( $( '.menu' ).css( 'left' ).substr( 0, ( $( '.menu' ).css( 'left' ).length - 2 ) ) );
            if ( this_left < 0 ) {
                prev_index++;
            }
            if ( this_left <= 730 ) {
                next_index++;
            }
        })
        start_left = Number( $( '.menu' ).css( 'left' ).substr( 0, ($( '.menu' ).css( 'left' ).length - 2 ) ) );
        if ( prev_index == -1 ) {
            prev_width = 0;
        }
        else {
            prev_link = $( '.menu a' )[ prev_index ];
            prev_width = Number( $( prev_link ).css( 'left' ).substr( 0, ( $( prev_link ).css( 'left' ).length - 2 ) ) ) + start_left;
        }
        if ( next_index == ( $( '.menu a' ).length - 1 ) ) {
            next_link = $( '.menu a' )[ next_index ];
            next_width = Number( $( next_link ).css( 'left' ).substr( 0, ( $( next_link ).css( 'left' ).length - 2 ) ) ) - ( 730 - start_left ) + ( $( next_link ).width() + 13 );
        }
        else if ( next_index == ( $( '.menu a' ).length ) ) {
            next_width = 0;
        }
        else {
            next_link = $( '.menu a' )[ next_index ];
            next_width = Number( $( next_link ).css( 'left' ).substr( 0, ( $( next_link ).css( 'left' ).length - 2 ) ) ) - ( 730 - start_left );
        }
        if ( direction == 'next' ) {
            new_left = start_left - next_width;
        }
        else if ( direction == 'prev' ) {
            new_left = start_left - prev_width;
        }
        else {
            return false;
        }
        //
        $( '.menu' ).animate(
            {left: new_left},
            'normal',
            function() {
                if ( new_left == 0 ) {
                    $( '#menu_next img' ).css( 'display', 'block' );

                    $( '#menu_next img' ).click( function() {
                        $( this ).unbind( 'click' );
                        $( this ).css( 'display', 'none' );
                        $( '#menu_prev img' ).unbind( 'click' );
                        $( '#menu_prev img' ).css( 'display', 'none' );
                        menu_scroll( 'next' );
                    })
                }
                else if ( new_left == ( 730 - menu_full_width ) ) {
                    $( '#menu_prev img' ).css( 'display', 'block' );

                    $( '#menu_prev img' ).click( function() {
                        $( this ).unbind( 'click' );
                        $( this ).css( 'display', 'none' );
                        $( '#menu_prev img' ).unbind( 'click' );
                        $( '#menu_prev img' ).css( 'display', 'none' );
                        menu_scroll( 'prev' );
                    })

                }
                else if ( new_left < 0 && new_left > ( 730 - menu_full_width ) ) {
                    
                    $( '#menu_prev img' ).css( 'display', 'block' );
                    $( '#menu_next img' ).css( 'display', 'block' );

                    $( '#menu_prev img' ).click( function() {
                        $( this ).unbind( 'click' );
                        $( this ).css( 'display', 'none' );
                        $( '#menu_prev img' ).unbind( 'click' );
                        $( '#menu_prev img' ).css( 'display', 'none' );
                        menu_scroll( 'prev' );
                    })

                    $( '#menu_next img' ).click( function() {
                        $( this ).unbind( 'click' );
                        $( this ).css( 'display', 'none' );
                        $( '#menu_prev img' ).unbind( 'click' );
                        $( '#menu_prev img' ).css( 'display', 'none' );
                        menu_scroll( 'next' );
                    })

                }
            }
        )

    }

    $( '#menu_next img' ).click( function() {
        $( this ).unbind( 'click' );
        $( this ).css( 'display', 'none' ); 
        menu_scroll( 'next' );
    })
});