var currentChannel = 0;
var orderedChannels; 						// two dimensional channel array, ordered by languages
var currentlyShownLanguage = 0;	// the id of the currently displayed language
var languageNames;							// array of channel language names
var channelJoined = false;

function getDefaultChannel() {
	var channelObject = new ServiceObject(TRIVIAL_URL);	
	channelObject.addParam ("inLanguage", languageCode); 		
	return channelObject.call("getDefaultChannel");
}

/**
 *	Requests a current channelList object from the server.
 */
function getChannelList() {
	var channelObject = new ServiceObject(TRIVIAL_URL);
	channelObject.call("getChannelList");
}

/*
 * Updates the channel tab list
 */
function updateChannelList(chn) {
	var div = document.getElementById("channels");
	
	// prepare two dimensional channel array
	sortChannels(chn);
	
	// create language tabs
	for (i=0; i<languageNames.length; i++) {
		// decide on style values
		var imgAppendix = "-inactive";
		var dxClass = "tab-inactive";
		if (i==0) { // set first language as selected
			imgAppendix = "";
			dxClass = "tab-active";
		}
		// build and display cell
		var img = document.createElement("img");
		img.src = "img/lang-" + languageNames[i] + imgAppendix + ".gif";
		img.id = "lang." + languageNames[i] + ".image";
		var dx = document.createElement("div");
		dx.id = ("lang." + languageNames[i]);
		dx.className = dxClass;
		dx.appendChild(img);
		dx.style.left = (i*20) + "px";
		dx.onclick = function() { showLanguage(this); };
		div.parentNode.insertBefore(dx, div);
	}
	
	updateLanguageDisplay();		
}

/**
 *	Called to join the channel with the id specified in channel.
 */
function joinChannel(channel) {
	subscribePushlets(channel);

	var joinObject = new ServiceObject(TRIVIAL_URL);
	joinObject.addParam ("inChannelId", channel); 			
	joinObject.call("joinChannel");
	
	channelJoined = true; 
	tryRemoteLogin(); 
	
}

function onChannelSelection(c) {
	var id = parseInt(c.id.substring(c.id.lastIndexOf(".") + 1, c.id.length));
	// default handling
	joinChannel(id);
	currentChannel = id;
	updateChannelDisplay();	
	// special handling for main channel, id = 1: What can i win? is displayed
	if (id == 1) document.getElementById("div.info.prizes").style.display = "";
	else document.getElementById("div.info.prizes").style.display = "none";
}
		
function updateChannelDisplay() {
	// reset all channels
	for (var i=0; i<orderedChannels.length; i++) {
		for (var j=0; j<orderedChannels[i].length; j++) {
			var id = orderedChannels[i][j].id;
			var txt = document.getElementById("channel." + id);
			var img = document.getElementById("channel.image." + id);
			if (id != currentChannel) {
				if (txt) {
					txt.style.fontWeight = "normal";
					txt.style.color = "#cccccc";
				}
				if (img) {
					var fn = orderedChannels[i][j].image;
					var pre = fn.substring(0, fn.lastIndexOf("."));
					var app = fn.substring(fn.lastIndexOf("."), fn.length);
					img.src = pre + "-inactive" + app;
				}
			} else {
				if (txt) {
					txt.style.fontWeight = "bold";
					txt.style.color = "#000000";
				}
				if (img) {
					img.src = orderedChannels[i][j].image;
				}
			}
		}
	}
}
		
function sortChannels(chn) {
	// prepare language names
	languageNames = new Array();
	for (i=0; i<chn.languages.length; i++) 
		if(!arrayContains(languageNames, chn.languages[i])) { 
			languageNames.push(chn.languages[i]); 
		}
	// fill orderedChannels
	orderedChannels = new Array(languageNames.length);
	for (i=0; i<languageNames.length; i++) 
		orderedChannels[i] = new Array();
	
	for (i=0; i<chn.languages.length; i++) {
		var obj = { "id": chn.ids[i], "name": chn.names[i], "description": chn.descriptions[i], "image": chn.images[i], "language": chn.languages[i] };
		orderedChannels[languageNames.indexOf(chn.languages[i])].push(obj);
	}
}


function updateLanguageDisplay() {
	var div = document.getElementById("channels");
	div.innerHTML = "";
	var tbody = document.createElement("tbody");
	for (i=0; i<orderedChannels[currentlyShownLanguage].length; i++) {
		var chn = orderedChannels[currentlyShownLanguage][i];
		var img = document.createElement("img");
		img.src = chn.image;
		img.id = "channel.image." + chn.id;
		var cimg = document.createElement("td");
		cimg.appendChild(img);
		cimg.style.cursor = "pointer";
		cimg.onclick = function() { onChannelSelection(this); }
		cimg.id = "channel.cell." + chn.id;
		var cname = document.createElement("td");
		cname.appendChild(document.createTextNode(chn.name));
		cname.style.cursor = "pointer";
		cname.style.paddingLeft = "4px";
		cname.id = "channel." + chn.id;
		cname.onclick = function() { onChannelSelection(this); }
		var row = document.createElement("tr");
		row.title = chn.description;
		row.appendChild(cimg);
		row.appendChild(cname);
		tbody.appendChild(row);
	}						
	
	var tbl = document.createElement("table");
	tbl.appendChild(tbody);
	tbl.style.width = "100%";
	div.appendChild(tbl);
	// update channel colors
	updateChannelDisplay()
}
		
function showLanguage(c) {
	for (i=0; i<languageNames.length; i++) {
		// decide on style values
		var imgAppendix = "-inactive";
		var cellClass = "tab-inactive";
		if (c.id == "lang." + languageNames[i]) {
			imgAppendix = "";
			cellClass = "tab-active";
			currentlyShownLanguage = i;
		}
		// update GUI
		var img = document.getElementById("lang." + languageNames[i] + ".image");
		img.src = "img/lang-" + languageNames[i] + imgAppendix + ".gif";
		var cell = document.getElementById("lang." + languageNames[i]);
		cell.className = cellClass;
	}
	// update menu items
	updateLanguageDisplay();
	// update text nodes
	updateStrings(languageNames[currentlyShownLanguage]);
}