var infoBox =
{
	init: function(name)
	{
		var container = new Element('div', {id:'infoBox_'+name, className:'infoBoxContainer'});
		var iframe = new Element('iframe');
		var content = new Element('div', {className:'infoBoxContent'});

		container.setStyle({
			display: 'none', width: '60em', height: '20em', position: 'absolute'
		});

		iframe.setStyle({
			width: '100%', height: '100%', border: '0', position: 'absolute', zIndex: 1
		});

		content.setStyle({
			position: 'absolute', zIndex: 2
		});

		container.insert(iframe).insert(content);

		$$('body')[0].insert(container);

		//Hacer la ventana arrastrable
		/*
		new Draggable(container, {
			scroll:window,
			starteffect:null,
			endeffect:null,
			onStart:container.setOpacity.bind(container,0.75),
			onEnd:container.setOpacity.bind(container,1)
		});
		*/

		return container;
	},

	open: function(name, url, parameters, position)
	{
		//Crear la ventana con los valores por defecto
		var container = $('infoBox_'+name);
		
		if (!container)
		{
			container = infoBox.init(name);
			
			var content = container.down('div');
			
			//Posicionarla junto al elemento que hizo el click
			if (parseInt(position['left']) && parseInt(position['top']))
			{
				container.setStyle({left:position['left']+'px', top:position['top']+'px'});				
			}
			
		}
		else
		{
			var content = container.down('div');
			content.setOpacity(0.2);
		}

		
		//Rellenar la ventana con la petición ajax
		new Ajax.Request( url, {
				parameters:parameters,
				onSuccess:function(transport){
					if (transport.responseText)
					{
						content.setOpacity(1);
						content.update(transport.responseText);
						var resizeDuration = container.visible() ? 0.5 : 0;
						container.show();

						//Poner el ancho y alto de la ventana igual al del nuevo contenido
						//Si la ventana es nueva no hay efecto
						if (parseInt(position['width']) && parseInt(position['height']))
						{
							var dimensions = position;
						}
						else
						{
							var dimensions = content.down().getDimensions();
						}					
						new Effect.Morph(container, {
							style:{
								width:dimensions['width']+2+'px',
								height:dimensions['height']+2+'px'
							},
							duration: resizeDuration
						});
						new Effect.Morph(content, {
							style:{
								width:dimensions['width']+'px',
								height:dimensions['height']+'px'
							},
							duration: resizeDuration
						});
						
						container.observe('click', function(event){ event.stop() });
						document.observe('click', infoBox.close);
						
						//Evento de cierre del botón close, si lo hay
						//content.select('a.close').invoke('writeAttribute', 'href','#').invoke('observe', 'click', function(event){ container.remove(); event.stop(); });
					}
				}
		});
	},

	close: function(name)
	{
		if ($('infoBox_'+name))
		{
			$('infoBox_'+name).remove();			
		}
		else
		{
			$$('.infoBoxContainer').invoke('remove');
			document.stopObserving('click', infoBox.close);
		}
	}
}