var numCols = 3, numRows = 3;
var globalId = null, globalSubid = null;
var globalPage = 0;

function showPage(page) {
	globalPage = page;
	
	showEntries();
}

function selectNavi(id, subid) {
	globalPage = 0;
	globalId = id;
	globalSubId = subid;

	document.getElementById('navi2').innerHTML = '';
	document.getElementById('navi3').style.display = 'none';
	document.getElementById('navi3_ul').innerHTML = '';
	
	if (id != null) {
		navi[id]['selected'] = 'selected';
		if (subid != null) {
			navi[id]['subnavi'][subid]['selected'] = 'selected';
		}

		enableNavi3(id);
		
		if (subid != null) {
			delete(navi[id]['subnavi'][subid]['selected']);
		}
	}

	for ( var i = 0; i < navi.length; i++) {
		var li = document.createElement('li');
		if (i == 0) {
			li.className = 'first';
		} else if (i == navi.length - 1) {
			li.className = 'last';
		}

		var a = document.createElement('a');
		var myText = document.createTextNode(navi[i]['name']);
		a.appendChild(myText);
		a.href = "javascript:selectNavi('" + i + "');";
		if (navi[i]['selected']) {
			a.className = 'selected';
		}
		li.appendChild(a);

		document.getElementById('navi2').appendChild(li);
		
		delete(navi[i]['selected']);
	}
	
	// show entries in the selected category	
	showEntries();
}

function showEntries() {
	var numEntries = 0;
	var minEntry = globalPage * (numRows * numCols);
	
	if (globalSubId == null) {
		document.getElementById('content').innerHTML = '';
	}
	
	if (globalId == null && globalSubid == null) {
		for ( var i = 0; i < navi.length; i++) {
			if (navi[i]['subnavi']) {
				for ( var j = 0; j < navi[i]['subnavi'].length; j++) {
					if (numEntries >= minEntry + numRows * numCols) {
						numEntries++;
						continue;
					}
					
					if (numEntries >= minEntry) {
						var div = document.createElement('div');
						div.className = 'pictures_selection';
						div.onmousemove = new Function("this.style.background = '#E6E6E6'");
						div.onmouseout = new Function("this.style.background = '#FFFFFF'");
						div.onclick = new Function("location.href = '" + navi[i]['subnavi'][j]['url'] + "'");
						
						if (numEntries != 0 && numEntries % numCols == 0) {
							div.style.clear = 'left';
						}
						
						var img = document.createElement('img');
						img.height = "250";
						img.width = "250";
						img.src = navi[i]['subnavi'][j]['picture'];
						div.appendChild(img);
						div.appendChild(document.createElement('br'));
						
						var font = document.createElement('font');
						font.style.fontSize = '15px';
						font.style.fontWeight = 'bolder';
						font.appendChild(document.createTextNode(navi[i]['subnavi'][j]['name']));
						div.appendChild(font);
						div.appendChild(document.createElement('br'));
						var font = document.createElement('font');
						font.style.fontSize = '15px';
						font.appendChild(document.createTextNode(navi[i]['subnavi'][j]['subtitle']));
						div.appendChild(font);
						
						document.getElementById('content').appendChild(div);
					}
					
					numEntries++;
				}
			}
		}
		
		var br = document.createElement('br');
		br.style.clear = 'left';
		document.getElementById('content').appendChild(br);
	} else if (globalSubId == null) {
		if (navi[globalId]['subnavi']) {
			for ( var j = 0; j < navi[globalId]['subnavi'].length; j++) {
				if (numEntries >= minEntry + numRows * numCols) {
					numEntries++;
					continue;
				}
				
				if (numEntries >= minEntry) {
					var div = document.createElement('div');
					div.className = 'pictures_selection';
					div.onmousemove = new Function("this.style.background = '#E6E6E6'");
					div.onmouseout = new Function("this.style.background = '#FFFFFF'");
					div.onclick = new Function("location.href = '" + navi[globalId]['subnavi'][j]['url'] + "'");
	
					if (numEntries != 0 && numEntries % numCols == 0) {
						div.style.clear = 'left';
					}
					
					var img = document.createElement('img');
					img.height = "250";
					img.width = "250";
					img.src = navi[globalId]['subnavi'][j]['picture'];
					div.appendChild(img);
					
					div.appendChild(document.createElement('br'));
					var font = document.createElement('font');
					font.style.fontSize = '15px';
					font.style.fontWeight = 'bolder';
					font.appendChild(document.createTextNode(navi[globalId]['subnavi'][j]['name']));
					div.appendChild(font);
					div.appendChild(document.createElement('br'));
					var font = document.createElement('font');
					font.style.fontSize = '15px';
					font.appendChild(document.createTextNode(navi[globalId]['subnavi'][j]['subtitle']));
					div.appendChild(font);
					
					document.getElementById('content').appendChild(div);
				}
				
				numEntries++;
			}
			
			var br = document.createElement('br');
			br.style.clear = 'left';
			document.getElementById('content').appendChild(br);
		}
	}
	
	if (globalSubId == null) {
		var br = document.createElement('br');
		document.getElementById('content').appendChild(br);
		document.getElementById('content').appendChild(br);
		
		// show page numbers
		if (numEntries > numRows * numCols) {
			var pages = Math.ceil(numEntries / (numRows * numCols));
			for (var i = 0; i < pages; i++) {
				if (i > 0) {
					document.getElementById('content').appendChild(document.createTextNode("-"));
				}
				
				if (i == globalPage) {
					document.getElementById('content').appendChild(document.createTextNode(i+1));
				} else {
					var a = document.createElement('a');
					a.href="javascript:showPage(" + i + ")";
					a.appendChild(document.createTextNode(i+1));
					document.getElementById('content').appendChild(a);
				}
			}
		}
	}
}

function enableNavi3(id) {
	document.getElementById('navi3_ul').innerHTML = '';

	if (navi[id]['subnavi'] && navi[id]['subnavi'].length > 0) {
		document.getElementById('navi3').style.display = '';
		
		for ( var i = 0; i < navi[id]['subnavi'].length; i++) {
			var li = document.createElement('li');
			if (i == 0) {
				li.className = 'first';
			} else if (i == navi[id]['subnavi'].length - 1) {
				li.className = 'last';
			}

			var a = document.createElement('a');
			var myText = document.createTextNode(navi[id]['subnavi'][i]['name']);
			a.appendChild(myText);
			a.href = navi[id]['subnavi'][i]['url'];
			if (navi[id]['subnavi'][i]['selected']) {
				a.className = 'selected';
			}

			li.appendChild(a);

			document.getElementById('navi3_ul').appendChild(li);
		}
	} else {
		document.getElementById('navi3').style.display = 'none';
	}	
}