﻿buildTable();
changeImage(0);
			
	function changeImage(imageIndex){
		if(document.getElementById("dataSelect").options.length < imageIndex) return;
		var options = document.getElementById("dataSelect").options[imageIndex];
		document.getElementById("titleView").innerHTML 		 = options.value;
		document.getElementById("imageView").innerHTML 		 = options.text;
		document.getElementById("descriptionView").innerHTML = options.getAttribute("descriptionView");
	}

	function buildTable(){	
	var options     = document.getElementById("dataSelect").options;
	var valuesArray = new Array(options.length);
	var trCounter   = 0;		
		
		for(var i=0;i<options.length;i++){
			valuesArray[i] = "";
			
			if(trCounter == 0) valuesArray[i] = "<tr>";
			trCounter++;
		
			valuesArray[i] += "<td title='" + options[i].value + "' onmouseover=changeImage(" + i + ")>" + options[i].text + "</td>";
		
			if(trCounter == 3){
				valuesArray[i] += "</tr>";
				trCounter = 0;
			}
		}

		document.getElementById("data").innerHTML = "<table>" + valuesArray.join("") + "</table>";
	}