//<![CDATA[
function randTab( tab_)
{
	 var i;
	 var Num;
	 var Nbr = tab_.length;
	 var Tab = new Array();
	 Tab = Tab.concat(tab_);
	 while( Nbr> 0){
	   Num = Math.floor(Math.random() * Nbr);
	   Nbr--;
	   szTmp = Tab[Num];
	   for( i= Num; i < Nbr; i++)
	     Tab[i] = Tab[i+1]
	   Tab[ Nbr] = szTmp;
	 }
	 Tab.reverse();
	 return( Tab);
	} 
	window.addEvent('domready',function(){


		//SAMPLE 4 (walk to item)
		var hs4 = new noobSlide({
			box: $('box4'),
			items: $ES('div','box4'),
			size: 558,
			handles: $ES('span','handles4'),
			onWalk: function(currentItem,currentHandle){
				//$('info4').setHTML(currentItem.getFirst().innerHTML);
				this.handles.removeClass('active');
				currentHandle.addClass('active');
			}
		});
		
		
		var hs8 = new noobSlide({
			box: $('box8'),
			startItem: 1,
			items: $ES('h3','box8'),
			size: 558,
			handles: $ES('span','handles8'),
			buttons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') },
			onWalk: function(currentItem,currentHandle){
				//style for handles
				/*
					don't  do some like that
						this.handles.extend(handles8_more).removeClass('active');
					because every walk event "this.handles" is extend permanently, use:
						$extend(hthis.handles,andles8_more).removeClass('active'); OR
						$$(this.handles,handles8_more).removeClass('active');
				*/
				$$(this.handles,handles8_more).removeClass('active');
				$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
				//text for "previous" and "next" default buttons
				$('prev8').setHTML('&lt;&lt; '+this.items[this.previousIndex].innerHTML);
				$('next8').setHTML(this.items[this.nextIndex].innerHTML+' &gt;&gt;');
			}
		});
		//more "previous" and "next" buttons
		hs8.addActionButtons('previous',$ES('.prev','box8'));
		hs8.addActionButtons('next',$ES('.next','box8'));
		hs8.walk(0);
	});

	function charge(){
	tabTitres = new Array();
	tabTextes = new Array();
	tabIndice = new Array();

	tableaux = document.getElementById('box4').getElementsByTagName('div');
	for(x=0;x<tableaux.length;x++){
		tabTextes.push(tableaux[x].innerHTML);
		tabIndice.push(x);
	}
	tableaux = document.getElementById('handles4').getElementsByTagName('span');
	for(x=0;x<tableaux.length;x++){
		tabTitres.push(tableaux[x].innerHTML);
		//tabIndice[x]=x;
	}

	document.getElementById('box4').innerHTML="";
	document.getElementById('handles4').innerHTML="";
	
	tabIndice=randTab(tabIndice);

	for(i=0;i<tabIndice.length;i++){
		document.getElementById('box4').innerHTML+="<div>"+tabTextes[tabIndice[i]]+"</div>";
		document.getElementById('handles4').innerHTML+="<span>"+tabTitres[tabIndice[i]]+"</span>";

	}	
	}
//]]>