//The following functions handle creating and removing the Popup Box


function Popup(Image, Extension)
	{
	if(document.getElementById("Popup"))
		{
		Remove_Popup();
		Create_Popup(Image, Extension);
		}
	else
		{
		Create_Popup(Image, Extension);
		}
	}

function Create_Popup(Image, Extension)
	{

	//Creates the large version of the Image
		var Source = "images/" + Image + "." + Extension;
		var Full_Image = document.createElement("img");
		Full_Image.setAttribute("src", Source);
		Full_Image.setAttribute("id","FullImg");


	//Creates the Popup Field itself
		var Field = document.createElement("div");
			Field.setAttribute("id", "Popup");


	//Creates the black area on top
		var Closing_Space = document.createElement("div");
			Closing_Space.setAttribute("id","Header");
			Closing_Space.style.backgroundColor = "black";

	//Creates the button to remove the Popup
		var Form_Element = document.createElement("form");
			var Button = document.createElement("button");
				Button.setAttribute("id","CloseButton");
			var Buttontext = document.createTextNode("X");
			var Buttondiv = document.createElement("div");
			Buttondiv.appendChild(Buttontext);
			Button.appendChild(Buttondiv);
			Buttondiv.style.fontWeight = "bolder";
			Buttondiv.style.width = "20px";
			Form_Element.appendChild(Button);



	//Creates the caption
		var Caption_Id = Image + "_text";
		if(document.getElementById(Caption_Id)){
			var Caption_Text = document.getElementById(Caption_Id).firstChild.nodeValue;
			var Dimension = 1024;}
		else{
			var Caption_Text = " ";
			var Dimension = 650;}
		var Caption = document.createTextNode(Caption_Text);
		var Caption_Area = document.createElement("div");
		Caption_Area.setAttribute("id","CaptionArea");
		Caption_Area.appendChild(Caption);
		
	//Adds the Popup to the document
		document.getElementById(Image).parentNode.insertBefore(Field,document.getElementById(Image).parentNode.firstChild);

				
	//Adds the Button to the black area and the black area to the Popup Field
	Closing_Space.appendChild(Form_Element);
	Field.appendChild(Closing_Space);

	//Adds the caption area to the Popup Field
		Field.appendChild(Caption_Area);

	//Adds the image to the Popup Field
		Field.appendChild(Full_Image);
	
	//Field.style.width = document.getElementById("FullImg").width; Versuch
	Field.style.width = Dimension;
		
	//Handles Stylesheets
	if(window.netscape)
		{
		Field.setAttribute("class","Popup");
		if(Caption_Area)
			Caption_Area.setAttribute("class","Caption_Area");
		}
	else
		{
		document.all.Popup.className = "Popup";
		if(document.all.CaptionArea)
			document.all.CaptionArea.className = "Caption_Area";
		document.getElementById("Popup").style.left = document.all.Popup.offsetLeft;
		document.getElementById("Popup").style.top = document.all.Popup.offsetTop;
		}
	document.getElementById("CloseButton").onclick = Remove_Popup;
	document.getElementById("CloseButton").onmousedown = Remove_Popup;
	document.getElementById("Header").onmousedown = Init;

	}

function Remove_Popup()
	{
	var Box = document.getElementById("Popup");
	document.getElementById("Popup").parentNode.removeChild(Box);
	}

//The following functions handle moving the Popup Box around

var xDist;
var yDist;
var xWindow_Position;
var yWindow_Position;
var xDocument_Position;
var yDocument_Position;

//Gets various things regarding the position of the mouse, PopUp, etc.

function Init(evt)
	{
	if(window.netscape)
		{
		xDist = evt.layerX;
		yDist = evt.layerY;
		}
	else
		{
		xDist = window.event.offsetX;
		yDist = window.event.offsetY;
		xWindow_Position =  window.event.clientX - xDist;
		yWindow_Position = window.event.clientY - yDist;
		xDocument_Position = document.all.Popup.offsetLeft;
		yDocument_Position = document.all.Popup.offsetTop;
		document.getElementById("Popup").style.left = xDocument_Position;
		document.getElementById("Popup").style.top = yDocument_Position;
		}
	document.onmousemove = Move_PopUp;
	document.onmouseup = Stop;
	}

//Changes the position of the Popup

function Move_PopUp(evt)
	{
	if(window.netscape)
		{
		var xCoordinate = evt.pageX - xDist;
		var yCoordinate = evt.pageY - yDist;
		if (xCoordinate <0)
			xCoordinate = 0;
		if (yCoordinate<0)
			yCoordinate = 0;
		document.getElementById("Popup").style.left = xCoordinate;
		document.getElementById("Popup").style.top = yCoordinate;
		}
	else
		{
		var xCoordinate = window.event.clientX - xWindow_Position - xDist;
		var yCoordinate = window.event.clientY - yWindow_Position - yDist;
		if(xDocument_Position + xCoordinate<0)
			xCoordinate = -xDocument_Position ;
		if (yDocument_Position + yCoordinate<0)
			yCoordinate = -yDocument_Position;
		document.getElementById("Popup").style.left = xDocument_Position + xCoordinate;
		document.getElementById("Popup").style.top = yDocument_Position + yCoordinate;
		}

	}

//Stops the Movement

//Top be added: final dropping of the PopUp

function Stop()
	{
	document.onmousemove = null;
	}