WWL.arrowbox = function ( name )
{
	var arrowbox = new WWL ( 'arrowbox', name );

	arrowbox.sb = new WWL.scrollbox ( "ab:" + name );

	arrowbox.cbacks [ 'render' ] = function ()
	{
		arrowbox.sb.render ( arrowbox.id + ":sb" );
	};

	console.debug ( "SB: %o", arrowbox.sb );

	arrowbox.clear = arrowbox.sb.clear;
	arrowbox.set_size = arrowbox.sb.set_size;
	arrowbox.set_item_size = arrowbox.sb.set_item_size;
	arrowbox.add_item = arrowbox.sb.add_item;

	arrowbox.set_arrow_w = function ( w )
	{
		arrowbox.arrow_width = w;
	};

	arrowbox.to_string = function ()
	{
		var s = new String.buffer ();
		var w = arrowbox.sb.width + arrowbox.arrow_width *2 ;
		var h = arrowbox.sb.height;
		
		s.add ( '<div class="wwl_' + arrowbox.type + '" style="width: ' + w + 'px; height: ' + h + 'px; position: relative">' );
		s.add ( String.formatDict ( WWL.arrowbox.templates [ 'nav-next' ], { 'name' :  arrowbox.name } ) );
		s.add ( '<div id="' + arrowbox.id + ':sb" style="width: ' + arrowbox.sb.width + 'px; height: ' + arrowbox.sb.height + 'px; float: left"></div>' );
		s.add ( String.formatDict ( WWL.arrowbox.templates [ 'nav-prev' ], { 'name' :  arrowbox.name } ) );
                s.add ( '</div>' );

		return s.toString ();
	};

	return arrowbox;
};

WWL.arrowbox.get_instance = function ( instance_name )
{
	return WWL.get_instance ( "arrowbox", instance_name );
};

WWL.arrowbox.move_prev = function ( instance_name )
{
	WWL.arrowbox.get_instance ( instance_name ).sb.move_prev ();
};

WWL.arrowbox.move_next = function ( instance_name )
{
	WWL.arrowbox.get_instance ( instance_name ).sb.move_next ();
};