<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>enia</title>
		<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/af/2.0.0/loader.js"></script>
		
		<link href="styles/general.css" rel="stylesheet" type="text/css"/>
		<script src="scripts/socket.io.min.js"></script>
		<script src="scripts/util.js"></script>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
		
		<script>
			var websocket = io.connect("http://150.214.150.116:8081");

            // 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', 'pepe@pepe.com', 'root', 'technician');
            });
			
			websocket.on('replace', function(addComponent, deleteComponent){
                    var i;
                    for(i = 0; i < deleteComponent.length; i++){
						if(deleteComponent[i] == 'mapapolitico'){
							if(document.getElementById("mapavacio") != null ){
								$('#mapavacio').css("top", 100);
								$('#piechart').css("top", 564);
								$('#histograma').css("top", 564);
							}else{
								$('#piechart').css("top", 100);
								$('#histograma').css("top", 100);
							}
							
						}
						if(deleteComponent[i] == 'mapavacio'){
							if(document.getElementById("mapapolitico") != null ){
								$('#mapapolitico').css("top", 100);
								$('#piechart').css("top", 330);
								$('#histograma').css("top", 330);
							}else{
								$('#piechart').css("top", 100);
								$('#histograma').css("top", 100);
							}
						}
						if(deleteComponent[i] == 'histograma'){
							if(document.getElementById("piechart") != null ){
								$('#piechart').css("right", "39.9%");
							}
						}
						if(deleteComponent[i] == 'menu' || deleteComponent[i] == 'nivel2' || deleteComponent[i] == 'nivel3' ||
								deleteComponent[i] == 'ano'){
							if(document.getElementById("mapavacio") == null && document.getElementById("mapapolitico") == null){
								$('#' + deleteComponent[i]).remove();
							}
						}else{
							$('#' + deleteComponent[i]).remove();
						}
                    }
                    
                    for(i = 0; i < addComponent.length; i++){
                        if(addComponent[i] == 'mapapolitico'){
							if(document.getElementById("mapavacio") != null ){
								$('#mapavacio').css("top", 564);
								$('#piechart').css("top", 330);
								$('#histograma').css("top", 330);
							}else{
								if(document.getElementById("piechart") != null || document.getElementById("histograma") != null){
									$('#piechart').css("top", 330);
									$('#histograma').css("top", 330);
								}
							}							
							
                            $('#titulo').after(
							"<div id='mapapolitico' class='widget'>"+
								"<div class='titulo'>"+
									"<h4>Map</h4>"+
								"</div>"+
								"<iframe id='imapapolitico' src='widgets/widgetMapaPolitico/index.html'>"+
								"</iframe>"+
							 "</div>"
							);
                            $('#mapapolitico').hide();
                            $('#mapapolitico').fadeIn(1400);
                        }
                        if(addComponent[i] == 'mapavacio'){
							if(document.getElementById("mapapolitico") != null ){
								$('#mapapolitico').css("top", 564);
								$('#piechart').css("top", 330);
								$('#histograma').css("top", 330);
							}else{
								if(document.getElementById("piechart") != null || document.getElementById("histograma") != null){
									$('#piechart').css("top", 330);
									$('#histograma').css("top", 330);
								}
							}

                            $('#titulo').after(
							"<div id='mapavacio' class='widget'>"+
								"<div class='titulo'>"+
									"<h4>Map</h4>"+
								"</div>"+
								"<iframe id='imapavacio' src='widgets/widgetMapaVacio/index.html'>"+
								"</iframe>"+
							"</div>"
							);
                            $('#mapavacio').hide();
                            $('#mapavacio').fadeIn(1400);
                        }
                        if(addComponent[i] == 'ano' && document.getElementById("ano") == null){
                            $('#elements').after(
							"<div id='ano' class='widget' onmousedown='bajarAno()' onmouseup='subirAno()'>"+
								"<div id='tituloMenu' class='titulo'>"+
									"<h4>Select year to load level</h4>"+
									"<img id='despliegueano' class='despliegue' src='img/triangulo.png' height='12px' width='12px' onclick='desplegarAno();'/>"+
								"</div>"+
								"<iframe id='iano' src='http://localhost:8082/wookie/wservices/incubator.apache.org/wookie/generated/29463630-BD80-D8B0-5BCF-76AAD1260DA8/index.html?idkey=jdLmoYoouvMJpUvybUjKukw5cjo.eq.&proxy=http://localhost:8082/wookie/proxy&st=?idkey=null&proxy=http://localhost:8082/wookie/proxy'>"+
								"</iframe>"+
							"</div>"
							);
                            $('#ano').hide();
                            $('#ano').fadeIn(1400);
                        }
                        if(addComponent[i] == 'menu' && document.getElementById("menu") == null){
                            $('#elements').after(
							"<div id='menu' class='widget' onmousedown='bajarMenu()' onmouseup='subirMenu()'>"+
								"<div id='tituloMenu' class='titulo'>"+
									"<h4>Load level 1 in Map</h4>"+
									"<img id='desplieguemenu' class='despliegue' src='img/triangulo.png' height='12px' width='12px' onclick='desplegarMenu();'/>"+
								"</div>"+
								"<iframe id='imenu' src='http://localhost:8082/wookie/wservices/incubator.apache.org/wookie/generated/1BB60E59-1821-7397-BFA8-4ACFC72D7757/index.html?idkey=Uk7AHJSExjTTZiiLTPrL1eY7jaU.eq.&proxy=http://localhost:8082/wookie/proxy&st=?idkey=null&proxy=http://localhost:8082/wookie/proxy'>"+
								"</iframe>"+
							"</div>"
							);
                            $('#menu').hide();
                            $('#menu').fadeIn(1400);
                        }
                        if(addComponent[i] == 'nivel2' && document.getElementById("nivel2") == null){
                            $('#elements').after(
							"<div id='nivel2' class='widget' onmousedown='bajarNivel2()' onmouseup='subirNivel2()'>"+
								"<div id='tituloMenu' class='titulo'>"+
									"<h4>Load level 2 in Map</h4>"+
									"<img id='desplieguenivel2' class='despliegue' src='img/triangulo.png' height='12px' width='12px' onclick='desplegarNivel2();'/>"+
								"</div>"+
								"<iframe id='inivel2' src='http://localhost:8082/wookie/wservices/incubator.apache.org/wookie/generated/B698AB39-FA57-5606-F027-2F68AA8F076C/index.html?idkey=8.pl.JyKQi3XuVSicrZMXyyjlCGJTI.eq.&proxy=http://localhost:8082/wookie/proxy&st=?idkey=null&proxy=http://localhost:8082/wookie/proxy'>"+
								"</iframe>"+
							"</div>"
							);
                            $('#nivel2').hide();
                            $('#nivel2').fadeIn(1400);
                        }
                        if(addComponent[i] == 'nivel3' && document.getElementById("nivel3") == null){
                            $('#elements').after(
							"<div id='nivel3' class='widget' onmousedown='bajarNivel3()' onmouseup='subirNivel3()'>"+
								"<div id='tituloMenu' class='titulo'>"+
									"<h4>Load level 3 in Map</h4>"+
									"<img id='desplieguenivel3' class='despliegue' src='img/triangulo.png' height='12px' width='12px' onclick='desplegarNivel3();'/>"+
								"</div>"+
								"<iframe id='inivel3' src='http://localhost:8082/wookie/wservices/incubator.apache.org/wookie/generated/7604989C-BFA8-B8C5-5570-3C267FBA64BE/index.html?idkey=Y2MrpP3beD807S1DVenznTscuTU.eq.&proxy=http://localhost:8082/wookie/proxy&st=?idkey=null&proxy=http://localhost:8082/wookie/proxy'>"+
								"</iframe>"+
							"</div>"
							);
                            $('#nivel3').hide();
                            $('#nivel3').fadeIn(1400);
                        }
						if(addComponent[i] == 'histograma'){
							$('#elements').after(
							"<div id='histograma' class='widget' onmousedown='bajarHistograma()' onmouseup='subirHistograma()'>"+
								"<div class='titulo' id='titulohistograma'>"+
									"<h4>Histogram</h4>"+
								"</div>"+
								"<iframe id='ihistograma' src='widgets/widgetHistograma/index.html'>"+
								"</iframe>"+
							"</div>"
							);
                            $('#histograma').hide();
							if(document.getElementById("mapapolitico") != null && document.getElementById("mapavacio") != null){
								//$('#histograma').css("top", 1019);
								$('#histograma').css("top", 330);
							}else{
								if(document.getElementById("mapapolitico") != null || document.getElementById("mapavacio") != null){
									//$('#histograma').css("top", 564);
									$('#histograma').css("top", 330);
								}
							}
							$('#piechart').css("right", 0);
                            $('#histograma').fadeIn(1400);
                        }
						if(addComponent[i] == 'piechart'){
							$('#elements').after(
							"<div id='piechart' class='widget' onmousedown='bajarPiechart()' onmouseup='subirPiechart()'>"+
								"<div class='titulo' id='tituloPiechart'>"+
									"<h4>Pie Chart</h4>"+
								"</div>"+
								"<iframe id='ipiechart' src='widgets/widgetSectores/index.html'>"+
								"</iframe>"+
							"</div>"
							);
							$('#piechart').hide();
							if(document.getElementById("mapapolitico") != null && document.getElementById("mapavacio") != null){
								$('#piechart').css("top", 330);
							}else{
								if(document.getElementById("mapapolitico") != null || document.getElementById("mapavacio") != null){
									$('#piechart').css("top", 330);
								}
							}
							if(document.getElementById("histograma") == null){
								$('#piechart').css('right', '39.9%');
							}
                            $('#piechart').fadeIn(1400);
                        }
						if(addComponent[i] == 'anohisto'){
                            $('#elements').after(
							"<div id='anohisto' class='widget' onmousedown='bajarAnohisto()' onmouseup='subirAnohisto()'>"+
								"<div id='tituloMenu' class='titulo'>"+
									"<h4>Select year to histogram</h4>"+
									"<img id='despliegueanohisto' class='despliegue' src='img/triangulo.png' height='12px' width='12px' onclick='desplegarAnohisto();'/>"+
								"</div>"+
								"<iframe id='ianohisto' src='http://localhost:8082/wookie/wservices/incubator.apache.org/wookie/generated/29463630-BD80-D8B0-5BCF-76AAD1260DA8/index.html?idkey=jdLmoYoouvMJpUvybUjKukw5cjo.eq.&proxy=http://localhost:8082/wookie/proxy&st=?idkey=null&proxy=http://localhost:8082/wookie/proxy'>"+
								"</iframe>"+
							"</div>"
							);
                            $('#anohisto').hide();
                            $('#anohisto').fadeIn(1400);
                        }
						if(addComponent[i] == 'datapie'){
                            $('#elements').after(
							"<div id='datapie' class='widget' onmousedown='bajarDatapie()' onmouseup='subirDatapie()'>"+
								"<div id='tituloMenu' class='titulo'>"+
									"<h4>Data to Pie Chart</h4>"+
									"<img id='desplieguedatapie' class='despliegue' src='img/triangulo.png' height='12px' width='12px' onclick='desplegarDatapie();'/>"+
								"</div>"+
								"<iframe id='idatapie' src='http://localhost:8082/wookie/wservices/incubator.apache.org/wookie/generated/DD3730E7-5778-CB8A-6209-F4D20FBF90C7/index.html?idkey=wtSLPuW3qQyBGMQNNyhyXQeE.sl.D4.eq.&proxy=http://localhost:8082/wookie/proxy&st=?idkey=null&proxy=http://localhost:8082/wookie/proxy'>"+
								"</iframe>"+
							"</div>"
							);
                            $('#datapie').hide();
                            $('#datapie').fadeIn(1400);
                        }
                    }
					actualizarWidget();
            });
			
			$(document).ready(function() {
				$("#mapapolitico").draggable();
				$("#mapavacio").draggable();
				$("#elements").draggable();
				$("#histograma").draggable();
				$("#piechart").draggable();
				$("#titulo").draggable();
				
				$("#histograma").resizable();
				$("#piechart").resizable();
				$("#mapapolitico").resizable();
				$("#mapavacio").resizable();
				
			
				$("#ano").draggable();
				$("#ano").css("height","30px");
				$("#iano").css("height","0px");
				
				$("#menu").draggable();
				$("#menu").css("height","30px");
				$("#imenu").css("height","0px");
			
				$("#nivel2").draggable();
				$("#nivel2").css("height","30px");
				$("#inivel2").css("height","0px");
				
				$("#nivel3").draggable();
				$("#nivel3").css("height","30px");
				$("#inivel3").css("height","0px");
				
				$("#anohisto").draggable();
				$("#anohisto").css("height","30px");
				$("#ianohisto").css("height","0px");
		
				$("#datapie").draggable();
				$("#datapie").css("height","30px");
				$("#idatapie").css("height","0px");
				
				$(".despliegue").attr("src","img/triangulo2.png");
			});	
		</script>
		
	</head>
	<body>
		<div class='widget' id='titulo' style='border-width=3px;border-color:grey;'>

			<iframe id="ititulo" src="widgets/widgetTituloTecnico/index.html">
			</iframe>
		</div>
		
		<div class='widget' id='elements'>
			<div  class='titulo' id='tituloMenu'>
				<h4>Elements</h4>
			</div>
			<iframe src='widgets/widgetElementos/index.html' id='ielements'>
			</iframe>
		</div>
		
		<div class="widget" id='mapapolitico'>
			<div class='titulo'>
				<h4>Map</h4>
			</div>
			<iframe src='widgets/widgetMapaPolitico/index.html' id='imapapolitico'>
			</iframe>
		</div>
	</body>
</html>
