function area_browse ( areaname )
{
    var $area = $ ( '#'+areaname );
    var $cnt  = $area.contents();
    var $bcnt = $area.find ( '.area_browse .browse_container' );
    var count = 0;

    function new_container()
    {
        id = areaname+'_bu_'+count;

        count++;

        $x = $( '<div class="browse_unit" id="'+id+'"></div>' );

        $bcnt.append ( $x );

        return $x;
    }

    function rearrange()
    {
        //alert ( $area );

        var status = 0; // Noch keinen Anfang gefunden

        $current_container = null;

        $cnt.each ( function ( i )
        {
            //alert ( status );

            $this = $(this);

            if ( $this.hasClass ( 'area_browse' ) )
            {
                status = 1; // ab dem naechsten CO geht es los

                $current_container = new_container();
            }
            else
            {
                if ( status == 1 )
                {
                    if ( $this.hasClass ( 'browse_break' ) )
                        $current_container = new_container();
                    else
                        $current_container.append ( $this.clone ( true ) );

                    $this.remove();
                }
            }
        });
    }

    rearrange();

    // .content_object hat CSS properties, die nicht geschachteln
    //  werden koennen

    $area.find ( '.area_browse' ).removeClass ( 'content_object' );

    $bcnt.show();

    // die hoehen korrigieren

    h = 0;
    var max_pg = 0;

    $bcnt.contents().each ( function ( i )
    {
        nh = $(this).height();

        if ( nh > h ) h = nh;

        max_pg = i;
    });

    /* // nein doch nicht die hoehen wirklich korrigieren

    $bcnt.contents().each ( function ( i )
    {
        $(this).css ( 'min-height', h+'px' );
    });
*/
    function set_hash()
    {
        //window.location.hash = '#'+areaname+'_bu_'+$bcnt.cur_page;
        $.historyLoad ( areaname+'_bu_'+$bcnt.cur_page );
    }

    function change_state()
    {
        $bcnt.contents().hide();

        $bcnt.contents().eq ( $bcnt.cur_page ).show();

        $area.find ( '.browse_navigation .ctrls a' ).hide();

        if ( $bcnt.cur_page > 0 )
            $area.find ( '.browse_navigation .ctrls a.prev' ).show();

        if ( $bcnt.cur_page < max_pg )
            $area.find ( '.browse_navigation .ctrls a.next' ).show();


        $area.find ( '.browse_navigation .pinfo .curr_pg_no' ).html ( ''+($bcnt.cur_page+1) );
        $area.find ( '.browse_navigation .pinfo .no_of_pg'   ).html ( ''+(max_pg+1) );

        new_title = title+' ~ '+$( '.pinfo .pg_caption' ).html()+' '+($bcnt.cur_page+1)+' / '+(max_pg+1);

        //$( 'head title' ).html ( new_title );
        document.title = new_title;
    }

    $bcnt.cur_page = 0;

    var $nav = $area.find ( '.area_browse .browse_navigation' );

    function back()
    {
        if ( $bcnt.cur_page == 0 )
           return;

        if ( this.scroll_to_top )
            window.scrollTo ( 0, nav_pos.top );

        $bcnt.cur_page--;

        set_hash();
    }

    function fwd()
    {
        if ( $bcnt.cur_page == max_pg )
           return;

        if ( this.scroll_to_top )
            window.scrollTo ( 0, nav_pos.top );

        $bcnt.cur_page++;

        set_hash();
    }

    $nav.find ( '.prev' ).click ( back );
    $nav.find ( '.next' ).click ( fwd  );

    var $nav_clone = $nav.clone ( true );

    $nav_clone.addClass ( 'browse_navigation_copy' );

    $nav_clone.find ( 'a' ).each ( function()
    {
        this.scroll_to_top = 1;
    });

    $area.find ( '.area_browse .browse_container'  ).after ( $nav_clone );
    $area.find ( '.area_browse .browse_navigation' ).show();
    $nav.css ( 'position', 'relative' );

    //$nav_clone.css ( 'margin-bottom', '20px' );

    $nav_clone.before ( '<div class="clear noheight"></div>' );
    $nav_clone.after  ( '<div class="clear noheight"></div>' );

    var title = $( 'head title' ).html();

    function proc_hash()
    {
        pattern = '^#'+areaname+'_bu_([0-9]*)$';

        var RE  = new RegExp ( pattern, 'i' );
        var res = RE.exec ( window.location.hash );

        if ( res )
        {
            target_no = parseInt ( res [ 1 ] );

            if ( target_no > 0 )
                $bcnt.cur_page = target_no;
        }
        else
            $bcnt.cur_page = 0;

        change_state();
    }

    function get_terms()
    {
        pattern = '^#q:(.*)$';
        var RE  = new RegExp ( pattern, 'i' );

        res = RE.exec ( window.location.hash );

        if ( !res )
            return false;

            //alert ( res  [1 ]);

        ql = res [ 1 ].split ( ',' );

        return ql;
    }

    function hl_terms()
    {
        ql = get_terms();

        if ( !ql )
            return false;

        for ( j = 0; j < ql.length; j++ )
        {
            hilight_text ( $bcnt.get ( 0 ), ql[j], 'span', 'hl_search_'+j, '', '', false );
        }
    }

    function jump_term()
    {
        var ql = get_terms();

        if ( !ql )
            return false;

        var page_no = 100000000;

        pattern = '^'+areaname+'_bu_([0-9]*)$';

        var RE  = new RegExp ( pattern, 'i' );

        for ( var j = 0; j < ql.length; j++ )
            $bcnt.contents().each ( function ( i )
            {
                text = $(this).text();

                if ( text.toLowerCase().indexOf ( ql[j].toLowerCase() ) != -1 )
                {
                    res = RE.exec ( this.id );

                    if ( res && ( parseInt ( res[1] ) < page_no ) )
                        page_no = parseInt ( res[1] );
                }
            });

        if ( page_no < 1000000 )
        {
            location.hash = '#'+areaname+'_bu_'+page_no;
            window.scrollTo ( 0, 0 );
        }
    }

    hl_terms();
    jump_term();

    $.historyInit ( proc_hash );

    var nav_pos = $nav.offset();
}