var items = new Array(
	{
		'button': 'rules_link', // the ID of the element which is clicked to start the slide
		'content': 'rules_text', // the ID of the element which will be slided
		'speed': 15, // slide speed
		'time': 5 // slide time in ms
	},
	{
		'button': 'faq_question1',
		'content': 'faq_answer1',
		'speed': 15,
		'time': 5,
		'group': 'faq',
		'open': true
	},
	{
		'button': 'faq_question2',
		'content': 'faq_answer2',
		'speed': 15,
		'time': 5,
		'group': 'faq'
	},
	{
		'button': 'faq_question3',
		'content': 'faq_answer3',
		'speed': 15,
		'time': 5,
		'group': 'faq'
	},
	{
		'button': 'faq_question4',
		'content': 'faq_answer4',
		'speed': 15,
		'time': 5,
		'group': 'faq'
	},
	{
		'button': 'faq_question5',
		'content': 'faq_answer5',
		'speed': 15,
		'time': 5,
		'group': 'faq'
	},
	{
		'button': 'faq_question6',
		'content': 'faq_answer6',
		'speed': 15,
		'time': 5,
		'group': 'faq'
	},
	{
		'button': 'languages',
		'content': 'languages_list',
		'speed': 100,
		'time': 5
	}
);

var lock = false;
var timeout;
var opened = {};

function animate(item, second) {
	var el = document.getElementById(items[item.mark].content);
	var height = el.clientHeight;
	
	lock = true;
	
	if(item.shrink) {
		
		if(height <= items[item.mark].speed) {
			lock = false;
			clearTimeout(timeout);
			item.shrink = false;
			el.style.visibility = "hidden";
			if(opened == item) opened = {};
			el.style.height = '0px';			
			
			if(second) {
				document.getElementById(items[second.mark].content).style.visibility = "visible";
				timeout = setTimeout(function() { animate(second); }, items[second.mark].time);
			}
			
			return;
		}
		
		height -= items[item.mark].speed;
		el.style.height = height + 'px';
	
	} else {
		
		if(height >= item.content_height) {
			lock = false;
			clearTimeout(timeout);
			item.shrink = true;
			opened = item;
			
			return;
		}
		
		height += items[item.mark].speed;
		el.style.height = height + 'px';
		
	}
	
	timeout = setTimeout(function() { animate(item, second); }, items[item.mark].time);
}

function slide(e) {
	var el = this;
	if(lock || (typeof items[el.mark] == 'undefined')) return;
	
	if(!el.shrink && el.slide_group && el.slide_group == opened.slide_group) {
		timeout = setTimeout(function() { animate(opened, el); }, items[el.mark].time);
	} else {
		document.getElementById(items[el.mark].content).style.visibility = "visible";
		timeout = setTimeout(function() { animate(el); }, items[el.mark].time);
	}
}

function initSlideShowHide() {
	
	// hook onclick on button divs
	for(var i in items) {
		
		var button  = document.getElementById(items[i].button);
		var content = document.getElementById(items[i].content);
		
		if(button) {
			button.onclick = slide;
			button.mark = i;
			button.shrink = false;
			if(items[i].group) button.slide_group = items[i].group;
			
			button.content_height = content.offsetHeight;
			
			if(!items[i].open) {
				content.style.height = '0px';
				content.style.visibility = 'hidden';
			} else {
				opened = button;
				button.shrink = true;
			}
			
		}
	
	}

}