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" );
	};

	arrowbox.cbacks [ 'item-clicked' ] = null;	// Invoked when the user clicks on an item
							// cback: function ( arrowbox, element )

	arrowbox.sb.cbacks [ 'click' ] = function ( sb, elem )
	{
		if ( arrowbox.cbacks [ 'item-clicked' ] ) 
			arrowbox.cbacks [ 'item-clicked' ] ( arrowbox, elem );
		
	};


	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.arrow_width = 15;
	arrowbox.arrow_height = arrowbox.arrow_width;

	arrowbox.set_size = function ( w, h )
	{
		arrowbox.width = w;
		arrowbox.height = h;
		//arrowbox.sb.set_size ( w - ( arrowbox.arrow_width * 2 ) , h );
		arrowbox.sb.set_size ( w, h );
	}
	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 w = arrowbox.width - arrowbox.arrow_width *2 ;
		var w = arrowbox.width;
		var h = arrowbox.sb.height;
		var atop = Math.floor ( ( arrowbox.sb.height / 2 ) - arrowbox.arrow_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-prev' ], { 'name' :  arrowbox.name, 'top': atop } ) );
		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-next' ], { 'name' :  arrowbox.name, 'top': atop } ) );
                s.add ( '</div>' );
		/*
		s.add ( '<div class="wwl_' + arrowbox.type + '" style="width: ' + w + 'px; height: ' + h + 'px; position: relative">' );
		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-over' ], { '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 ();
};