//the iframe onload event was firing early so This variable controls this.
var globalIframeLoad = false;
//var globalUploaderURL = "fileupload.php";
var globalUploaderURL = "/db/image.php";


function createUploadDialog(aid)
{
	var buttons = new Array();
	
	//create the Upload Button
	var button = {};
	button.title = "Upload";
	button.id = "upload";
	button.onclick = function(){return submitForm();};
	buttons.push(button);
	
	//Create the Cancel button
	var button = {};
	button.title = "Close";
	button.id = "close";
	button.onclick = function(){ return removeDialog();};
	buttons.push(button);
	
	//create the container div for everything
	var parent = document.createElement("div");
	parent.style.display = "none";
	parent.id = "parent";

	//create the gray transparetn overlay
	var overlay = createOverlay();
	overlay.id = "overlay";
	parent.appendChild(overlay);
	
	//create the upload dialog box
	var dialog = document.createElement("div");
	dialog.className = "center";
	dialog.id = "dialog";
	
	//create the heading/Title area for the dialog box
	var header = document.createElement("h1");
	header.appendChild(document.createTextNode('Photo Uploader '));
	var progress = document.createElement("img");
	progress.src="/images/progress.gif";
	progress.id="uploadProgress";
	progress.width="125";
	progress.alt="progress bar";
	progress.style.visibility="hidden";
	header.appendChild(progress);
	dialog.appendChild(header);
	
	//add line break
	var lineBreak = document.createElement("br");
	dialog.appendChild(lineBreak);
	
	//create the text instructions to be displayed on the dialog box
	var message = document.createElement("p");
	message.className = "instruction";
	message.appendChild(document.createTextNode("Browse for the file and then click Upload."));
	dialog.appendChild(message);
	
	//create the form and browse input file object to put on the dialog box
	//var browseLine = document.createElement("p");
	var uploadFormDiv = document.createElement("div");
	uploadFormDiv.innerHTML +='<form enctype="multipart/form-data" id="uploadForm" name="uploadForm" action="'+globalUploaderURL+'" method="POST" target="uploadresult" onsubmit="showStatus()">' +
							'<input type="file" id="inputfile" name="inputfile" size="63" style="width:auto; margin:0px 0px 0px 0px;" />' +
							'<br /><textarea name="caption" id="uploadCaption" scrollbar="no" style="overflow: auto;margin:5px 0px 0px 0px;height:30px;"></textarea>' +
							'<br /><input type="hidden" id="photoAid" name="aid" value="'+aid+'" />' +
							'</form>';
	
	/*var uploadForm = document.createElement("form");
	uploadForm.enctype="multipart/form-data";
	uploadForm.id = "uploadForm";
	uploadForm.name = "uploadForm";
	uploadForm.action=globalUploaderURL ;
	uploadForm.method="POST";
	uploadForm.target="uploadresult";
	uploadForm.onsubmit=function(){return showStatus();};
	var input = document.createElement("input");
    input.type = "file";
    input.id = "inputfile";
    input.name = "inputfile";
	var inputHidden = document.createElement("input");
	inputHidden.type = "hidden";
	inputHidden.name = "aid";
	inputHidden.value = aid;
	alert(aid);
	uploadForm.appendChild(input);
	uploadForm.appendChild(inputHidden);*/
	//browseLine.appendChild(uploadForm);
	dialog.appendChild(uploadFormDiv);
	//dialog.appendChild(browseLine);

	//add line break
	var lineBreak2 = document.createElement("br");
	dialog.appendChild(lineBreak2);
	
	//add the buttons (upload, cancel) to the dialog box
	for (var i=0;i<buttons.length;i++)
	{
		var button = document.createElement("a");
		button.href = "#";
		button.id = buttons[i].id;
		button.appendChild(document.createTextNode(buttons[i].title));
		button.onclick = buttons[i].onclick;
		dialog.appendChild(button);
	}	
	
	//add line break
	var lineBreak3 = document.createElement("br");
	dialog.appendChild(lineBreak3);
	
	//creat the upload iFrame
	var uploadIframeSpan = document.createElement("span");
/*	uploadIframe.id = "uploadResult";
	uploadIframe.name = "uploadresult";
	uploadIframe.width = "200";
	uploadIframe.frameborder="0";
	uploadIframe.onload=function(){showResult();};
	uploadIframe.style.visibility="hidden";
	dialog.appendChild(uploadIframe);*/
	uploadIframeSpan.innerHTML += '<p><iframe id="uploadResult" name="uploadresult" onload="showResult();" frameborder="0" height="30" style="visibility:hidden" scrollbar="no" marginwidth="0" marginheight="0" hspace="0" align="middle"></iframe></p>';
	dialog.appendChild(uploadIframeSpan);
	
	
	//put the dialog box on the parent  container div 
	parent.appendChild(dialog);
	
	//add the container div to the document so it will display
	document.body.appendChild(parent);
	parent.style.display = "block";

	//get the current scroll position (in order to display the dialog in the correct place according to scroll position and not always near the top of the entire page)
    var y = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        // Netscape
        y = window.pageYOffset;
    } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        // DOM
        y = document.body.scrollTop;
    } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        // IE6 standards compliant mode
        y = document.documentElement.scrollTop;
    }
	document.getElementById("dialog").style.top = (30 + y) + "px";
	
	//Make the overlay cover the entire page content, not just the visitlbe window area
	var windowHeight = 0;
	windowHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
	document.getElementById("overlay").style.height =  windowHeight + "px";

	return false;
}

function removeDialog() 
{
	if (document.getElementById("close").innerHTML == "Close")
	{
		var parent = document.getElementById("parent");
		document.body.removeChild(parent);
		return false;
	}
	else
	{//file upload is currently in progress 
		//same as clicking browser "stop" button. 
		window.stop();
		return false;
	}
}

function createOverlay()
{
	var div = document.createElement("div");
	div.className = "grayout";
	document.body.appendChild(div);
	
	return div;	
}

function submitForm()	
{
	if (document.getElementById("inputfile").value == "")
	{
		alert("Please select a file to upload.");
	}
	else
	{

		//submit the file upload form
		document.getElementById("uploadForm").action = globalUploaderURL ;
		document.getElementById("uploadForm").target = "uploadresult";
		//the following line didn't work.  I had to call the function manually  3 lines down.
		//document.getElementById("uploadForm").onsubmit = showStatus;//function(){showStatus();};
		document.getElementById("uploadForm").submit();
		showStatus();
	}
	return false;
}

function showStatus()
{
	//alert("showStatus called");
	var progressbar = document.getElementById("uploadProgress");
	progressbar.style.visibility = "visible";
	document.getElementById("close").innerHTML = "cancel";
	//document.getElementById("uploadResult").onload = function(){showResult();};
	globalIframeLoad = true;
		
	return true;
}

function showResult()
{
	//iframe onload was being called when it was created as well as when it loaded so this if statement 
	//makes sure we only do the following actions when the iframe content loads
	if (globalIframeLoad )
	{//
		globalIframeLoad = false;
		document.getElementById("uploadResult").style.visibility = "visible";
		document.getElementById("uploadResult").style.padding = "0px";
		document.getElementById("uploadResult").style.margin = "0px";
		//make the dialog a little bigger to show the iframe area
		document.getElementById("dialog").style.height = "187px";
		var progressbar = document.getElementById("uploadProgress");
		progressbar.style.visibility = "hidden";
		//clear the file from the upload box
		document.getElementById("inputfile").value = "";
		document.getElementById("close").innerHTML = "Close";
		//call the function to update the photo area on the 
		getPhotos(document.getElementById("photoAid").value);
	}
}