// USE EXAMPLE
/*
layerGroup = new LayerGroup();

layer1 = new Layer("layerId_1", "titleId_1");
layer2 = new Layer("layerId_2", "titleId_2");

layerGroup.setLayerGroup(new Array(layer1, layer2, ...));

layerGroup.showSelectedLayer(layerIndex);

*/

/* LAYER GROUP OBJECT */

LayerGroup.prototype.setLayerGroup = setLayerGroup;
LayerGroup.prototype.setClassNames = setClassNames;
LayerGroup.prototype.showSelectedLayer = showSelectedLayer;
LayerGroup.prototype.hideAll = hideAll;

function LayerGroup() {}

function setLayerGroup(layersGroup) {
	this.layersGroup = layersGroup;
	this.activeClassName = "active";
	this.inactiveClassName = "";
}

function setClassNames(activeClassName, inactiveClassName) {
	this.activeClassName = activeClassName;
	this.inactiveClassName = inactiveClassName;
}

/* LAYER OBJECT */

Layer.prototype.setTexts = setTexts;
Layer.prototype.setLayerClassNames = setLayerClassNames;
Layer.prototype.showHide = showHide;

function Layer(layerId, titleId) {
	this.layerId = layerId;
	this.titleId = titleId;
	this.activeClassName = "active";
	this.inactiveClassName = "hidden";
}

function setLayerClassNames(activeClassName, inactiveClassName) {
	this.activeClassName = activeClassName;
	this.inactiveClassName = inactiveClassName;
}

function setTexts(textBlock, textHidden) {
	this.textActive = textBlock;
	this.textInactive = textHidden;
}

function showSelectedLayer(index) {
	this.hideAll();
	if (this.layersGroup[index].layerId == null) { return ;} // It usually means the document hasn't been loaded already. We do not want JS error in that case
	if (this.layersGroup[index].titleId == null) { return ;} // It usually means the document hasn't been loaded already. We do not want JS error in that case
	if (document.getElementById(this.layersGroup[index].layerId) != null) { document.getElementById(this.layersGroup[index].layerId).style.display = "block"; }
	if (document.getElementById(this.layersGroup[index].titleId) != null) {
		document.getElementById(this.layersGroup[index].titleId).className = this.activeClassName;
		document.getElementById(this.layersGroup[index].titleId).blur();
	}
}

function hideAll() {
	for (var i = 0; i < this.layersGroup.length; i++) {
		if (this.layersGroup[i].layerId == null) { continue ;} // It usually means the document hasn't been loaded already. We do not want JS error in that case
		if (document.getElementById(this.layersGroup[i].layerId) != null) document.getElementById(this.layersGroup[i].layerId).style.display = "none";
		if (this.layersGroup[i].titleId == null) { continue ;} // It usually means the document hasn't been loaded already. We do not want JS error in that case
		if (document.getElementById(this.layersGroup[i].titleId) != null) document.getElementById(this.layersGroup[i].titleId).className = this.inactiveClassName;
	}
}

function showHide() {
	var layerElement = document.getElementById(this.layerId);
	var titleElement = document.getElementById(this.titleId);
	if (layerElement.style.display == "none") { // Layer Oculto, mostrar
		layerElement.style.display = "block";
		if (!isEmpty(this.textActive)) titleElement.innerHTML = this.textActive;
		if (titleElement != null) {
			titleElement.className = this.activeClassName;
			titleElement.blur();
		}
	} else { // ocultar Layer
		layerElement.style.display = "none";
		if (!isEmpty(this.textInactive)) titleElement.innerHTML = this.textInactive;
		if (titleElement != null) {
			titleElement.className = this.inactiveClassName;
			titleElement.blur();
		}
	}
}

function showHideMe(me, elementToShowHideId, textShown, textHidden, classShown, classHidden) {
	var layerElement = document.getElementById(elementToShowHideId);
	if (layerElement.style.display == "none") { // Layer Oculto, mostrar
		layerElement.style.display = "block";
		me.className = classShown;
		me.innerHTML = textShown;
		me.blur();
	} else if (layerElement.style.display == "block") { // ocultar Layer
		layerElement.style.display = "none";
		me.className = classHidden;
		me.innerHTML = textHidden;
		me.blur();
	}
}