<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
	<title>Widget contenedor</title>
	<!--<script src="scripts/util.js"></script>-->
	<script src="scripts/socket.io.min.js"></script>
	<!--<script src="scripts/cargarCapa.js"></script>-->
	<script>
		var websocket = io.connect("http://150.214.150.116:6969");
		
		// on connection to server, ask for user's name with an anonymous callback
		websocket.on('connect', function(){
			// call the server-side function 'adduser' and send one parameter (value of prompt)
			//websocket.emit('adduser', getUrlVars()['email'], 'WidgetUso3', '');
			websocket.emit('adduser', 'pepe@pepe.com', 'WidgetUso3', '');
		});
		
		function change(addComponent, deleteComponent) {
			websocket.emit('changewidget', 'pepe@pepe.com', addComponent, deleteComponent);
		}
		
		function gestionarMapaPolitico(){
			if(document.getElementById('mapapolitico').checked){
				addComponent = new Array('mapapolitico');
				deleteComponent = new Array('mapapolitico','mapavacio');
				change(addComponent,deleteComponent);
			}else{
				addComponent = new Array();
				deleteComponent = new Array('mapapolitico','mapavacio');
				change(addComponent,deleteComponent);
			}
		}
		
		function gestionarMapaVacio(){
			if(document.getElementById('mapavacio').checked){
				addComponent = new Array('mapavacio');
				deleteComponent = new Array('mapavacio','mapapolitico');
				change(addComponent,deleteComponent);
			}else{
				addComponent = new Array();
				deleteComponent = new Array('mapavacio','mapapolitico');
				change(addComponent,deleteComponent);
			}
		}
		
		function gestionarHistograma(){
			if(document.getElementById('histograma').checked){
				addComponent = new Array('histograma');
				deleteComponent = new Array('histograma');
				change(addComponent,deleteComponent);
			}else{
				addComponent = new Array();
				deleteComponent = new Array('histograma');
				change(addComponent,deleteComponent);
			}
		}
		
		function gestionarPiechart(){
			if(document.getElementById('piechart').checked){
				addComponent = new Array('piechart');
				deleteComponent = new Array('piechart');
				change(addComponent,deleteComponent);
			}else{
				addComponent = new Array();
				deleteComponent = new Array('piechart');
				change(addComponent,deleteComponent);
			}
		}

	</script>
	<link rel="stylesheet" href="styles/general.css" type="text/css"/>
</head>
<body>
				<font size="4">Maps</font>
				<!--Maps-->
				<table>
					<tr>
						<td>
							<font style="white-space: pre">    </font>
						</td>
						<td>
							<input type="radio" name="myradio" id="mapapolitico" onclick="gestionarMapaPolitico();" checked></input>
						</td>
						<td>
							Political map
						</td>
					</tr>
					<tr>
						<td>
							<font style="white-space: pre">    </font>
						</td>
						<td>
							<input type="radio" name="myradio" id="mapavacio" onclick="gestionarMapaVacio();"></input>
						</td>
						<td>
							Empty map
						</td>
					</tr>
				</table>
			
				<font size="4">Graphics</font>
				<!--Graphics-->
				<table>
					<tr>
						<td>
							<font style="white-space: pre">    </font>
						</td>
						<td>
							<input type="checkbox" id="histograma" onclick="gestionarHistograma();"></input>
						</td>
						<td>
							Histogram
						</td>
					</tr>
					<tr>
						<td>
							<font style="white-space: pre">    </font>
						</td>
						<td>
							<input type="checkbox" id="piechart" onclick="gestionarPiechart();"></input>
						</td>
						<td>
							Pie chart
						</td>
					</tr>
				</table>	
	
	<!--<font size="4">Maps</font>
	<table>
		<tr>
			<td>
				<font style="white-space: pre">    </font>
			</td>
			<td>
				<input type="radio" name="myradio" id="mapapolitico" onclick="gestionarMapaPolitico();" checked></input>
			</td>
			<td>
				Political map
			</td>
		</tr>
		<tr>
			<td>
				<font style="white-space: pre">    </font>
			</td>
			<td>
				<input type="radio" name="myradio" id="mapavacio" onclick="gestionarMapaVacio();"></input>
			</td>
			<td>
				Empty map
			</td>
		</tr>
	</table>
	
	<font size="4">Graphics</font>
	<table>
		<tr>
			<td>
				<font style="white-space: pre">    </font>
			</td>
			<td>
				<input type="checkbox" id="histograma" onclick="gestionarHistograma();"></input>
			</td>
			<td>
				Histogram
			</td>
		</tr>
		<tr>
			<td>
				<font style="white-space: pre">    </font>
			</td>
			<td>
				<input type="checkbox" id="piechart" onclick="gestionarPiechart();"></input>
			</td>
			<td>
				Pie chart
			</td>
		</tr>
	</table>-->
</body>
</html>