function ajaxFileUpload()
	{
		//starting setting some animation when the ajax starts and completes
		$("#photoList").append("<div id='loading' class='pic'><img src='/peary/icons/ajax-loader.gif'></div>");
		//alert($("#photoList.ajaxPhotos")[0].scrollTop);
		var scroll = $("#photoList.ajaxPhotos");
		
		//try to scroll it, it will die if it is unscrollable
		try{
			scroll.animate({
				scrollTop: scroll[0].scrollHeight
			}, 500);
		}catch(e){
		}
		$("#noimg").remove(); //remove the no image error
		/**/
		//alert($("#photoList.ajaxPhotos").offset().top);
		/*
			prepareing ajax file upload
			url: the url of script file handling the uploaded files
                        fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
			dataType: it support json, xml
			secureuri:use secure protocol
			success: call back function when the ajax complete
			error: callback function when the ajax failed
			
                */
        //alert(document.getElementById("album").value);
		$.ajaxFileUpload
		(
			{
				url:'/peary/pages/function/doAjaxFileUpload.php?album='+encodeURI(document.getElementById("album").value), 
				secureuri:false,
				fileElementId:'fileToUpload',
				dataType: 'json',
				success: function (data, status)
				{
					if(typeof(data.error) != 'undefined')
					{
						$("#photoList div#loading").remove();
						if(data.error != '')
						{
							//alert(document.getElementById("album").value);
							alert("There was an error. "+data.error);
						}else
						{
							//it's all good
							if(data.msg.indexOf(":")>0){
								var msgAr = data.msg.split(":");
								var img = msgAr[1];
								var album = msgAr[0];
								
								$("#photoList").append("<div class='pic'><a rel='shadowbox[" + album + "]' title='" +album+ "' href='/peary/upload_photo/" + album + "/" + img + "'><img src='/peary/upload_photo/" + album + "/thumb/" + img + "'></a><br>[<a href='#' onclick='deletePhoto(this, \""+ album +"\", \""+ img +"\");'>Delete</a>]</div>");
								
								//we just added it
								//we should scroll to the very bottom to see the photo
								scroll = $("#photoList.ajaxPhotos");		
								//try to scroll it, it will die if it is unscrollable
								try{
									scroll.animate({
										scrollTop: scroll[0].scrollHeight
									}, 500);
								}catch(e){
								}
								
								//now resetup the shadowbox
								Shadowbox.setup();
							}else{
								alert(data.msg);
							}
							
						}
					}
				},
				error: function (data, status, e)
				{
					alert(e);
				}
			}
		)
		
		return false;

	}