var displayList;
var displayY;

var dataLength = 100;
var contenerWidth = window.getSize().x-150;

var nbBoxLine = 6;
var fadeInTime = 200;

var buffer = new Listing({onLoaded:addToList});
var displayTimer;
var displayThreads = 0;

function addToList(){
	displayList = displayList.concat(buffer.elements);
	dataBegin += dataLength;
	if(buffer.state == 'READY'){
		
		startBuffering.delay(dataLength/nbBoxLine*fadeInTime)*10;
	}
}

function startBuffering(){
	buffer.load(dataBegin, dataLength);
}

function display(){
	if(displayList.length == 0){
		if(buffer.state == 'DONE'){
			$clear(displayTimer);
		}
		return;
	}
	if(displayThreads > 2) return;
	
	displayThreads++;
	if(displayList.length < nbBoxLine) var lineLength = displayList.length;
	else var lineLength = nbBoxLine;
	var lineWidth = 0;
	for(var i = 0; i<lineLength; i++){
		displayList[i].inject($('structure'));
		if(lineWidth + displayList[i].getElement('.textElem').getDimensions().x > contenerWidth){
			lineLength = i;
			break;
		}
		lineWidth += displayList[i].getElement('.textElem').getDimensions().x;
		
	}
	var displayX = (contenerWidth-lineWidth)/2;
	var tweens = new Array();
	var previousElem = false;
	var firstElem = displayList[0];
	var lineHeight = firstElem.getElement('.textElem').getDimensions().y;
	var line = new Element('div', {'class':'line'});
	//if(window.getScrollSize().y > window.getSize().y)
		//window.scrollTo(0, window.getScrollSize().y);
	line.setStyles({'left':displayX, 'top':displayY, 'width':lineWidth, 'height':lineHeight});
	line.inject($('structure'));
	var lastElem = displayList[lineLength-1];
	for(var i = 0; i < lineLength; i++){
		var elem = displayList.shift();
		elem.setStyles({'left':displayX, 'top':displayY});
		
		tweens.push(elem.get('tween', {property: 'opacity', duration: fadeInTime}));
		elem.getElements('div').each(function(el){el.setStyle('display', 'block');});
		if(Browser.Engine.trident){
			elem.getElement('.background').setStyle('display', 'none');
		}
		elem.setStyle('opacity', 0);
		displayX += elem.getElement('.textElem').getDimensions().x;
		if(previousElem != false){
			previousElem.store('nextElem', elem);
			var tween = previousElem.get('tween', {property: 'opacity', duration: fadeInTime});
			
			tween.addEvent('onComplete', function(){
				if(Browser.Engine.trident){
					this.element.retrieve('nextElem').getElement('.background').setStyle('display', 'block');
				}
				this.element.retrieve('nextElem').get('tween').start(1);
				//elem.get('tween').start(1);
			});
		}
		
		previousElem = elem;
		
		
	}
	firstElem.get('tween').start(1);
	lastElem.get('tween').addEvent('onComplete', function(){
		
		displayThreads--;
		
	});
	
	if(Browser.Engine.trident){
			firstElem.getElement('.background').setStyle('display', 'block');
	}
	
	displayY += lineHeight;
	
}
function showSubs(){
	var request = new Request({
			url:'json/subs.json.php',
			method:'get',
			onSuccess:function(nb){
				//alert($$('.nbSubs'));
				$('form').getElement('.nb').set('text', nb);
				$('form').getElement('.subs').setStyle('visibility', 'visible');
			}
		}).send();
}
function checkForm(form){
	var validated = true;
	form.getElements('input[type=text]').each(function(el){

		if(!el.get('value').test('[a-z]', 'i') || (el.get('name')=='email' && !el.get('value').test('^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$'))){
			validated = false;
			el.setStyle('border-bottom', '1px dotted #F00');
		}else{
			el.setStyle('border-bottom', '1px dotted #0CF');
		}
		
	});
	
	return validated;
}
function launch(){
	displayList = new Array()
	dataBegin = 0;
	displayY = 10
	$('structure').empty();
	$clear(displayTimer);
	startBuffering();
	displayTimer = display.periodical(fadeInTime*nbBoxLine);
}
function sendForm(form){
	if(!checkForm(form))return;
	
	form.set('send', {
		onComplete: function(response) {
			if(response == 'error_mail')form.getElement('input[name=email]').setStyle('border-bottom', '1px dotted #F00');
			else{
				$('formBox').setStyle('display', 'none');
				launch();
			}
		}
	});
	form.send();
}

window.addEvent('domready', function(){
	showSubs();
	var form = $('form');
	$$('.textBody').each(function(el){
			var track = el.getNext('.ui').getElement('.track');
			var thumb = track.getElement('.thumb');
			var scrollBar = new ScrollBar({scrollbar:track, handle:thumb, content:el});
	});
	$('global').setStyle('width', contenerWidth);
	
	launch();
	
	
	var infoBoxes = $$('.infoBox');
	
	infoBoxes.setStyle('display', 'none');
	$('mainBox').setStyle('display', 'block');
	
	$$('.go2Box').addEvent('click', function(e){
		e.stop();
		infoBoxes.setStyle('display', 'none');
		var target = this.get('href').replace('#', '');
		$(target).setStyle('display', 'block');
	});
	
	$('structure').addEvent('click', function(){
			infoBoxes.setStyle('display', 'none');
			$('formBox').setStyle('display', 'block');
	});
	$('structure').addEvent('mouseenter', function(){
			$('infoBoxes').setStyle('z-index', '1');
	
	});
	$('structure').addEvent('mouseleave', function(){
			$('infoBoxes').setStyle('z-index', '5');
	
	});
	$$('.sendForm').addEvent('click', function(){
		sendForm(form);
	});
	
	form.getElement('textarea').addEvent('click', function(){
		this.set('text', '');
		this.setStyle('color', '#000');
	});
	
	form.addEvent('submit', function(e){
		e.stop();
		sendForm(this);
	});
	
	
});