var showcaseScroller;

function showcase_scroller() {
	var showcase = document.getElementById('bars');
	var i;
	var longueurDemo=0;
	var longueurDownload=0;
	var baseDemo;
	var baseDownload;
	
	//AVEC CA, TU REGLE LE PB DE LONGUEUR DU UL
	/*alert(document.getElementById('demo').getElementsByTagName('li')[0].clientWidth);
	alert(document.getElementById('demo').getElementsByTagName('li')[1].clientWidth);
	alert(document.getElementById('demo').getElementsByTagName('li')[2].clientWidth);
	alert(document.getElementById('demo').getElementsByTagName('li')[3].clientWidth);*/

	for(i=0; i<document.getElementById('demo').getElementsByTagName('li').length; i++){
		longueurDemo += document.getElementById('demo').getElementsByTagName('li')[i].clientWidth;
	}
	for(i=0; i<document.getElementById('download').getElementsByTagName('li').length; i++){
		longueurDownload += document.getElementById('download').getElementsByTagName('li')[i].clientWidth;
	}
	for(i=0; i<document.getElementById('demo').getElementsByTagName('a').length; i++){
		document.getElementById('demo').getElementsByTagName('a')[i].style.position = 'static';
	}
	for(i=0; i<document.getElementById('download').getElementsByTagName('a').length; i++){
		document.getElementById('download').getElementsByTagName('a')[i].style.position = 'static';
	}
	baseDemo = showcase.getElementsByTagName('ul')[0].clientWidth;
	baseDownload = showcase.getElementsByTagName('ul')[1].clientWidth;
	if(longueurDemo < baseDemo){
		longueurDemo = baseDemo;
	}
	if(longueurDownload < baseDownload){
		longueurDownload = baseDownload;
	}
	//AVEC CA, TU CHERCHE A REGLER LE PROBLEME DES A :)
	/*showcase.style.width = '650px';
	showcase.style.padding = '0 18px';*/
	showcase.getElementsByTagName('div')[0].style.display = 'block';
	showcase.getElementsByTagName('ul')[0].style.width = longueurDemo+'px';
	showcase.getElementsByTagName('div')[0].style.overflow = 'hidden';
	showcase.getElementsByTagName('div')[1].style.display = 'block';
	showcase.getElementsByTagName('ul')[1].style.width = longueurDownload+'px';
	showcase.getElementsByTagName('div')[1].style.overflow = 'hidden';
	/*showcase.getElementsByTagName('div')[0].style.margin = '0 25px';*/
	
	showcaseScroller = new Scroller(showcase.getElementsByTagName('div')[0]);

	var left = document.createElement('a');
	left.id = 'previous';
	left.className = 'btn';
	left.href = '';
	left.title = 'Défiler vers la gauche';
	left.onclick = function () { return false; }
	left.onmousedown = function () {
		showcaseScroller.interval = window.setInterval('showcaseScroller.left()', showcaseScroller.intervalDelta);
		return false;
	};
	left.onmouseup= function () {
		window.clearInterval(showcaseScroller.interval);
	}

	showcase.appendChild(left);

	var span = document.createElement('span');
	span.appendChild(document.createTextNode(' - '));
	showcase.appendChild(span);

	var right = document.createElement('a');
	right.id = 'next';
	right.className = 'btn';
	right.href = '';
	right.title = 'Défiler vers la droite';
	right.onclick = function () { return false; };
	right.onmousedown = function () {
		showcaseScroller.interval = window.setInterval('showcaseScroller.right()', showcaseScroller.intervalDelta);
		return false;
	};
	right.onmouseup= function () {
		window.clearInterval(showcaseScroller.interval);
	}

	showcase.appendChild(right);
	
	showcaseScroller2 = new Scroller(showcase.getElementsByTagName('div')[1]);
	
	var left2 = document.createElement('a');
	left2.id = 'previous2';
	left2.className = 'btn';
	left2.href = '';
	left2.title = 'Défiler vers la gauche';
	left2.onclick = function () { return false; }
	left2.onmousedown = function () {
		showcaseScroller2.interval = window.setInterval('showcaseScroller2.left()', showcaseScroller2.intervalDelta);
		return false;
	};
	left2.onmouseup= function () {
		window.clearInterval(showcaseScroller2.interval);
	}

	showcase.appendChild(left2);

	var span2 = document.createElement('span');
	span2.appendChild(document.createTextNode(' - '));
	showcase.appendChild(span2);

	var right2 = document.createElement('a');
	right2.id = 'next2';
	right2.className = 'btn';
	right2.href = '';
	right2.title = 'Défiler vers la droite';
	right2.onclick = function () { return false; };
	right2.onmousedown = function () {
		showcaseScroller2.interval = window.setInterval('showcaseScroller2.right()', showcaseScroller2.intervalDelta);
		return false;
	};
	right2.onmouseup= function () {
		window.clearInterval(showcaseScroller2.interval);
	}

	showcase.appendChild(right2);

}