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

	scrollbox._support_transitions = liwe.dom.supports ( "transition" );

	scrollbox._event_names = [];

	scrollbox.cbacks [ 'render' ] = function ( sbox ) { 
		scrollbox._set_content ();

		var cnt = $( scrollbox.id );

		if ( scrollbox._support_transitions )
		{
			if ( ! cnt._has_events )
			{
				cnt.addEventListener ( "transitionend", scrollbox._remove_child, false );
				cnt.addEventListener ( "webkitTransitionEnd", scrollbox._remove_child, false );
				cnt._has_events = true;
			}
		}
	};

	scrollbox._remove_child = function ( evt )
	{
		var cnt = $( scrollbox.id );

		cnt.style.MozTransition = "";
		cnt.style.WebkitTransition = "";
		cnt.style.Transition = "";

		if ( cnt._remove_last )
			cnt.removeChild ( cnt.lastChild );
		else
			cnt.removeChild ( cnt.firstChild );

		cnt.style.left = - ( scrollbox.item_width ) + "px";

		cnt._remove_last = false;

		if ( cnt._transition_cback ) cnt._transition_cback ();
		cnt._transition_cback = null;

		scrollbox._in_transition = false;
	};

	scrollbox.clear = function ()
	{
		// List of items inside scrollbox
		scrollbox._items = [ -1 ];

		// Current start position
		scrollbox._start = 0;

		scrollbox.width = 400;
		scrollbox.height = 100;

		scrollbox.item_width = 100;
		scrollbox.item_height = 100;
	};

	scrollbox.set_size = function ( w, h )
	{
		scrollbox.width = w;
		scrollbox.height = h;
	};

	scrollbox.set_item_size = function ( w, h )
	{
		scrollbox.item_width = w;
		scrollbox.item_height = h;
	};

	scrollbox.add_item = function ( html )
	{
		scrollbox._items.push ( html );
	};

	scrollbox.to_string = function ()
	{
		var s = new String.buffer ();

		scrollbox.items_to_show = Math.floor ( scrollbox.width / scrollbox.item_width );

		s.add ( '<div class="wwl_' + scrollbox.type + '" style="width: ' + scrollbox.width + 'px; height: ' + scrollbox.height + 'px">' );
		s.add ( scrollbox._render_container () );
                s.add ( '</div>' );

		return s.toString ();
	};

	scrollbox._render_container = function ()
	{
		var s = new String.buffer ();

		var container_width = ( scrollbox.items_to_show + 2 ) * scrollbox.item_width;

		s.add ( String.formatDict ( WWL.scrollbox.templates [ 'container-start' ], { 
			"container_width" : container_width + scrollbox.item_width * 2,
			"left" :  - scrollbox.item_width,
			"id" : scrollbox.id,
			"height" : scrollbox.item_height
				} ) );

		s.add ( WWL.scrollbox.templates [ 'container-end' ] );

		return s.toString ();
	};

	scrollbox._set_content = function ()
	{
		var t, l = scrollbox._items.length;
		var item, el;
		
		for ( t = 0; t < scrollbox.items_to_show + 2; t ++ )
		{
			el = scrollbox._create_element ( scrollbox._start + t );

			$( scrollbox.id ).appendChild ( el );
		}
	};

	scrollbox.move_prev = function ()
	{
		var cnt = $( scrollbox.id );
		var el;

		if ( scrollbox._in_transition ) return;
		if ( ! scrollbox.can_move_prev () ) return;

		scrollbox._in_transition = true;

		scrollbox._start -= 1;
		el = scrollbox._create_element ( scrollbox._start );

		cnt._transition_cback = function ()
		{
			cnt.insertBefore ( el, cnt.firstChild );
		};

		cnt._remove_last = true;
		scrollbox._set_transition ( cnt );
		cnt.style.left = "0px";

		if ( ! scrollbox._support_transitions ) scrollbox._remove_child ();
	};

	scrollbox.can_move_prev = function ()
	{
		return ! ( scrollbox._start == 0 );
	};

	scrollbox.can_move_next = function ()
	{
		// console.debug ( "Start: %s, to_show: %s - len: %s", scrollbox._start, scrollbox.items_to_show, scrollbox._items.length );
		return ! ( scrollbox._start + scrollbox.items_to_show + 1  >= scrollbox._items.length );
	};

	scrollbox.move_next = function ()
	{
		var cnt = $( scrollbox.id );
		var el;

		if ( scrollbox._in_transition ) return;
		if ( ! scrollbox.can_move_next () ) return;

		scrollbox._in_transition = true;
		scrollbox._start += 1;

		el = scrollbox._create_element ( scrollbox._start + scrollbox.items_to_show + 1 );
		$( scrollbox.id ).appendChild ( el );

		scrollbox._set_transition ( cnt );
		cnt.style.left = - ( scrollbox.item_width * 2 ) + "px";

		if ( ! scrollbox._support_transitions ) scrollbox._remove_child ();
	};

	scrollbox._set_transition = function ( cnt )
	{
		cnt.style.MozTransition = "left 0.5s ease-in";
		cnt.style.WebkitTransition = "left 0.5s ease-in";
		cnt.style.Transition = "left 0.5s ease-in";
	};

	scrollbox._create_element = function ( pos )
	{
		item = scrollbox._items [ pos ];

		if ( ! item ) item = "";
		
		el = document.createElement ( 'div' );
		el.className = "wwl_scrollbox_item";
		el.style.width = scrollbox.item_width +"px";
		el.style.height = scrollbox.item_height + "px";
		el.innerHTML = item;

		return el;
	};

	scrollbox.get_item = function ( pos ) { return scrollbox._items [ pos ]; };
	scrollbox.set_item = function ( pos, html ) { scrollbox._items [ pos ] = html; };

	scrollbox.clear ();

	return scrollbox;
};

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