Ext.onReady(function(){
	
	if (apideoKey == "XXX") {
		alert("Please edit demo1-userlist.html and replace XXX with your Apideo key. If you don't have an Apideo key, you can obtain a free Apideo key on www.apideo.com.");
		return;
	}
	
	conn = Apideo.connect(apideoKey)
	
	
	//Renderer to display the user state
	function stateRenderer(val) {
		if(!val)
			return "On air";
		else
			return "";
	}
	
	//User list
	store = new Ext.data.Store({});
	
	//Grid to display the user list
	   grid = new Ext.grid.GridPanel({
	       store: store,
	       columns: [
	           {id:'name',header: "Name", width: 180, sortable: true, dataIndex: 'name'},
	           {header: "State", width: 60, sortable: false, renderer: stateRenderer, dataIndex: 'available'}
	       ],
	       stripeRows: true,
	       autoExpandColumn: 'name',
	       height:490,
	       width:292,
	       title:'Connected users'
	   });
	
	//Window to enter the user name
	modalLoginWin = new Ext.Window({
        title: 'Please enter your nickname',
        closable:false,
        modal:true,
        layout: 'form',
        bodyStyle:'padding:5px 5px 0',
        width: 360,
        defaults: {width: 230},
        defaultType: 'textfield',
            
		items: [{
                fieldLabel: 'Nickname',
                name: 'login',
                id: 'loginTextField',
                xtype: 'textfield',
                allowBlank:false
            }],
        buttons: [{
            text: 'Ok',
            id: 'loginButton',
            type: 'submit'
        }]            
	});
    
    //Add listenr
   	modalLoginWin.buttons[0].on("click", onLogin);
	modalLoginWin.findById('loginTextField').addListener("specialkey", validate);
	
	modalLoginWin.show()
	grid.addListener('cellclick', cellClick);
});

//If the user press Enter
function validate(a, e){
	if(e.getKey() == Ext.EventObject.ENTER) {
		onLogin();
	}
}


Apideo.onError(function(type, message) {
	endServices();
	alert(message);
})

//When the user click on the validate button
function onLogin() {
	//Get the name
	var login = makehtml(modalLoginWin.getComponent("loginTextField").getValue());
	if(login != "") {
		//Close the window
		modalLoginWin.close();
		//Create user data
		userData = {name:login, available: true};		
		
		//Join the main room
		room = conn.joinRoom("demo1_all", userData)
		room.onLoad(function() {
			//Check all user and add it in list
			for (var key in this.userList) {
				var myObj = this.userList[key].userObj;
				if(myObj != undefined) {
					myObj.id = key
					if(key == room.myId)
						myObj.name = '<span class="myName">'+myObj.name+'</span>'
					store.add([new Ext.data.Record(myObj)])
				}
			}
			//Subscription of connect event 
			room.registerListener(connect, "connect_"+room.myId)
		})
		room.onUserJoin(function(userId, userObj) {
			//Adding user to the list
			var myObj = userObj;
			if(myObj != undefined) {
				myObj.id = userId
				store.add([new Ext.data.Record(myObj)])
			}
		})
		room.onUserUpdate(function(userId, userObj) {
			//Update user informations
			var myRecords = store.query("id", userId)
			if(myRecords != null) {
				var myObj = myRecords.first()
				myObj.beginEdit()
				myObj.set("available", userObj.available)
				myObj.endEdit()
			}
		})
		room.onUserQuit(function(userId, userObj) {
			//Remove a user of user list
 			var myRecord = store.query("id", userId)
			if(myRecord != null) {
				store.remove(myRecord.first())
			}
		})
		//Display grid
		grid.render('grid_display');
	}
}

//Event when the user click on the list
function cellClick(grid, rowIndex, columnIndex, e) {
	//If the user is not onair
	if(userData.available) {
		var record = grid.getStore().getAt(rowIndex);
		userId = record.get("id");
		//If the other user is not onair
		if(userId != room.myId && record.get("available")) {
			//Change is status
			changeAvailable(false);
			//Send event to other user
			room.sendEvent({event: "connect"},"connect_"+userId)
			//Create a new connection
			connectOneToOne(room.myId, userId);
		}
	}
}

//Event connection or disconnection
function connect(msg, senderId, triggeredListener, timeStamp) {
	if(msg.event == "connect") {
		changeAvailable(false);			
		connectOneToOne(senderId, senderId)
	} else if(msg.event == "disconnect") {
		endServices();
	}
}

//New room connection
function connectOneToOne(roomId, withUser) {
	//Idthe other user in main room
	ConnectedWith = withUser;
	
	userDataOneToOne = {name:userData.name, available: true};	
	//Join room for one to one
	roomOneToOne = conn.joinRoom("demo1_"+roomId, userData)
	roomOneToOne.onLoad(function() {
		myStream = null;
		hisStream = null;
		//Check if there is only 2 persons in this room and start videos streaming
		var count = 0;
		text = "";
		for (var key in this.userList) {
			count ++;
			text = "name: "+this.userList[key].userObj.name+"\n";
		}
		if(count == 1) {
			startServices(1, 2);
		} else if(count == 2) {
			startServices(2, 1);
		} else {
			alert("The user is already on air\n"+text)
			conn.quitRoom(roomOneToOne);
			changeAvailable(true);
		}
	})
	roomOneToOne.onUserQuit(function(userId, userObj) {
		//If the user disconnect stop videos streaming
		if(!userObj.available)
			endServices();
	})
}

//Start video streaming and tchat
function startServices(cameraId, playerId) {
	userDataOneToOne.available = false;
	roomOneToOne.updateUserData(userDataOneToOne);
	roomOneToOne.registerListener(tchatReceive, "tchat");
	document.getElementById("streams").style.display = "block";
	document.getElementById("tchat").innerHTML = '<textarea id="tchat_box" disabled="disabled"></textarea><br />'
													+'<div id="tchat_send_message">'
													+'<input id="tchat_message" type="text" onkeypress="if(event.keyCode == 13) tchatSend()" />'
													+'<input type="button" value="Send" id="tchat_send" onclick="tchatSend()" />'
													+'</div>';
	document.getElementById("deco_button").innerHTML = '<input type="button" value="Deconnexion" onclick="disconnect()" />';
	myStream = roomOneToOne.startCamera("camera","mystream_"+cameraId, {width:290, height:218, camera:{width:290, height:218, fps:10, quality:0, bandwidth:30000, micRate:11}});
	hisStream = roomOneToOne.playStream("player","mystream_"+playerId, {width:290, height:218});
}

//Stop video streaming and tchat
function endServices() {
	if(ConnectedWith != -1) {
		ConnectedWith = -1;
		conn.quitRoom(roomOneToOne);
		document.getElementById("streams").style.display = "none";
		document.getElementById("tchat").innerHTML = "";
		document.getElementById("deco_button").innerHTML = "";
		changeAvailable(true);
	}
}

//When the user click on the disconnect button
function disconnect() {
	room.sendEvent({event: "disconnect"},"connect_"+ConnectedWith)
	endServices();
}

//Change the user status
function changeAvailable(value) {
	var myRecords = store.query("id", room.myId)
	if(myRecords != null) {
		var myObj = myRecords.first()
		myObj.beginEdit()
		myObj.set("available", value)
		myObj.endEdit()
	}
	userData.available = value;
	room.updateUserData(userData);
}

//Event receive message
function tchatReceive(msg, senderId, triggeredListener) {
	element = document.getElementById("tchat_box")
	if(senderId == roomOneToOne.myId) {
		element.value += "Me: " + msg.text + "\n"
	}
	else {
		element.value += makejs(msg.name)+": " + msg.text + "\n"
	}
	element.scrollTop = element.scrollHeight;
}

//send message
function tchatSend() {
	tchatMessage = document.getElementById("tchat_message")
	if(tchatMessage.value != "") {
		roomOneToOne.sendEvent({name: userData.name, text: tchatMessage.value},"tchat");
		tchatMessage.value = ""
	}
}

function makehtml(text) {
	var ret = text.replace(/&/g,"&amp;");
	ret = ret.replace(/</g,"&lt;");
	ret = ret.replace(/>/g,"&gt;");
	ret = ret.replace(/"/g,"&quot;");
	ret = ret.replace(/\r\n/g,"<br />");
	ret = ret.replace(/\n/g,"<br />");
	ret = ret.replace(/\r/g,"<br />");
	return(ret);
}

function makejs(text) {
	var ret = text.replace(/&amp;/g,"&");
	ret = ret.replace(/&lt;/g,"<");
	ret = ret.replace(/&gt;/g,">");
	ret = ret.replace(/&quot;/g,"\"");
	ret = ret.replace(/<br \/>/g,"\r\n");
	return(ret);
}