// @param countries {array} countries
// @param map {object} google map object
// @param url {string} marker icons images url
function addMarkers(countries, map, url, open_tab) {
	
	// if any parameter is invalid
	if(!countries || !map || !url || (countries && countries.length < 1)) return;
	
	var correct_icon = new GIcon();
	correct_icon.image = url + "images/flag-green.png";
	correct_icon.iconSize = new GSize(31, 40);
	//correct_icon.shadow = url + "images/flag-shadow.png";
	//correct_icon.shadowSize = new GSize(27.0, 20.0);
	correct_icon.iconAnchor = new GPoint(0, 40);
	correct_icon.infoWindowAnchor = new GPoint(23, 7);
	
	var wrong_icon = new GIcon();
	wrong_icon.image = url + "images/flag-red.png";
	wrong_icon.iconSize = new GSize(31, 40);
	//wrong_icon.shadow = url + "images/flag-shadow.png";
	//wrong_icon.shadowSize = new GSize(27.0, 20.0);
	wrong_icon.iconAnchor = new GPoint(0, 40);
	wrong_icon.infoWindowAnchor = new GPoint(23, 7);
	
	var gray_icon = new GIcon();
	gray_icon.image = url + "images/flag-green-question.gif";
	gray_icon.iconSize = new GSize(31, 40);
	//gray_icon.shadow = url + "images/flag-shadow.png";
	//gray_icon.shadowSize = new GSize(27.0, 20.0);
	gray_icon.iconAnchor = new GPoint(0, 40);
	gray_icon.infoWindowAnchor = new GPoint(23, 7);
	
	for(var i=0; i<countries.length; i++) {		
		var country = countries[i];
		var icon = (country.correct == null) ? gray_icon : (country.correct ? correct_icon : wrong_icon);
		var x_y = country.point.split(',');
		var x = x_y[0];
		var y = x_y[1];
		
		marker = new GMarker(new GLatLng(x, y), icon);
		map.addOverlay(marker);
		
		// do not add tabs if we don't want to
		if (!country.hide_details) {
			var tabs = new Array();
			for(var j=0; j<country.tabs.length; j++) {
				var tab = country.tabs[j];
				tabs.push(new GInfoWindowTab(tab.title,  tab.html));
			}
			
			if (tabs.length > 1) {
				marker.bindInfoWindowTabsHtml(tabs, {selectedTab: open_tab});
				if(i >= countries.length - 1) marker.openInfoWindowTabsHtml(tabs, {selectedTab: open_tab});
			}
			else {
				marker.bindInfoWindowTabsHtml(tabs);
				if(i >= countries.length - 1) marker.openInfoWindowTabsHtml(tabs);
			}
		}
	}
	
}

var items = new Array(
	{
		'button': 'guesstheflag_question1', // the ID of the element which is clicked to start the slide
		'content': 'guesstheflag_answer1', // the ID of the element which will be slided
		'speed': 15, // slide speed
		'time': 5, // slide time in ms
		'group': 'faq',
		'open': true
	},
	{
		'button': 'guesstheflag_question2',
		'content': 'guesstheflag_answer2',
		'speed': 15,
		'time': 5,
		'group': 'faq'
	},
	{
		'button': 'guesstheflag_question3',
		'content': 'guesstheflag_answer3',
		'speed': 15,
		'time': 5,
		'group': 'faq'
	},
	{
		'button': 'guesstheflag_question4',
		'content': 'guesstheflag_answer4',
		'speed': 15,
		'time': 5,
		'group': 'faq'
	},
	{
		'button': 'guesstheflag_question5',
		'content': 'guesstheflag_answer5',
		'speed': 15,
		'time': 5,
		'group': 'faq'
	},
	{
		'button': 'guesstheflag_question6',
		'content': 'guesstheflag_answer6',
		'speed': 15,
		'time': 5,
		'group': 'faq'
	}
);

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;
			}
			
		}
	
	}

}