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

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

	scrollbox._event_names = []; // 'over', 'out', 'btn_up', 'btn_down', 'click', 'dblclick', 'blur' ];

	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.cbacks [ 'click' ] = null;  // Invoked when the user clicks on an item
					      // cback: function ( scrollbox, element )

	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 ) ;// - 1;

		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;
		var first = null;
		
		for ( t = 0; t < scrollbox.items_to_show + 2; t ++ )
		{
			el = scrollbox._create_element ( scrollbox._start + t );
			if ( t == 1  ) first = el;

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

		scrollbox._active_item = 0;
		scrollbox._click_event ( null, first );
	};

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

		if ( scrollbox._in_transition ) return;


		if ( scrollbox._active_el._pos > 1 ) 
		{
			scrollbox._click_event ( null, scrollbox._active_el.previousSibling );
		};

		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._active_el._pos < scrollbox._items.length-1 ) 
		{
			scrollbox._click_event ( null, scrollbox._active_el.nextSibling );
		};


		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 )
	{
		var item = scrollbox._items [ pos ];

		if ( ! item ) item = "";
		
		el = document.createElement ( 'div' );
		el.className = "wwl_scrollbox_item";
		el.style.width = scrollbox.item_width +"px";
		el._pos = pos;
		
		//add event on click
		liwe.events.add ( el , 'click', function ( ev ) { scrollbox._click_event ( ev, this );} );
				
		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 ();

	scrollbox._click_event = function ( ev, el )
	{
		if ( scrollbox._active_el ) liwe.dom.del_class ( scrollbox._active_el, 'active' );
		scrollbox._active_el = el;		
		liwe.dom.add_class ( el, 'active' );

		if ( scrollbox.cbacks [ 'click' ] ) scrollbox.cbacks [ 'click' ] ( scrollbox, el );
	}

	return scrollbox;
};

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