// Reposition the gallery to be at the center of the page
// even when the page has been scrolled
function adjust(){
		// Locate the gallery
		var obj = id("popup");
		
		// Make sure that the gallery exists
		if ( !obj ) return;
		
		// Find its current height and width
		var w = getWidth( obj );
		var h = getHeight( obj );
		
		// Position the box, vertically, in the middle of the window
		var t = scrollY() + ( windowHeight() / 2 ) - ( h / 2 );
		
		// But no heigher than the top of the page
		if ( t < 0 ) t = 0;
		
		// Position the box, horizontally, in the middle of the window
		var l = scrollX() + ( windowWidth() / 2 ) - ( w / 2 );
		
		// But no less than the left of the page
		if ( l < 0 ) l = 0;
		
		// Set the adjusted position of the element
		setY( obj, t );
		setX( obj, l );
};

// Readjust the position of the gallery every time
// the user scrolls the page or resizes the browser
window.onresize = document.onscroll = window.onscroll = adjust;

// Hide the grey overlay and the current gallery
function hideOverlay() {
		
		// and hide the overlay and gallery
		hide( id("overlay") );
		hide( id("popup") );
}

// Show the grey overlay
function showOverlay() {
		// Find the overlay
		var over = id("overlay");
		
		// Make it as tall and wide as the entire page
		// (this helps with scrolling)
		over.style.height = pageHeight() + "px";
		over.style.width = pageWidth() + "px";
		
		// And fade it in
		fadeIn( over, 80, 0 );
}

function showPopup(url) {
		var popup = id("popup");
		fadeIn(popup,100,0);
		var popup_form = id("popup_form");
		popup_form.innerHTML = sbLoadSync(url);
		adjust();
}

function showValue(name) {
	return id(name).value;
}

// Wait for the document \to finish loading before modifying
// or traversing the DOM
window.onload = function() {
		/*
		 * Create the following DOM structure:
		 * <div id="overlay"></div>
		 * <div id="gallery">
		 *     <div id="gallery_image"></div>
		 *     <div id="gallery_prev"><a href="">&laquo; Prev</a></div>
		 *     <div id="gallery_next"><a href="">Next &raquo;</a></div>
		 *     <div id="gallery_title"></div>
		 * </div>
		 */
		 
		// Create the transparent, gray, overlay
		var overlay = document.createElement("div");
		overlay.id = "overlay";

		// Make it so that when the grey background is clicked,
		// the gallery and background are hidden
		overlay.onclick = hideOverlay;
		
		// Add the overlay into the DOM
		document.body.appendChild( overlay );
		overlay.style.height = pageHeight() + "px";
		overlay.style.width = pageWidth() + "px";
		
		// Create the overall gallery holder
		var popup = document.createElement("div");
		popup.id = "popup";
		
		// And add in all the organization divs
		popup.innerHTML = '<div id="popup_form" style="padding:20px"></div>' +
				'<div id="popup_ok"><a href="#1" class="button" onclick="document.getElementById(' + "'form1'" + ').submit();">Подтвердить</a></div>' +
				'<div id="popup_cancel"><a onclick="hideOverlay();" href="#1" class="button">Отмена</a></div>';
		
		// Add the gallery into the DOM
		document.body.appendChild(popup);
		
		// Handle support for which the next and previous links
		// are clicked within the gallery
		//id("popup_cancel").onclick = hideOverlay;
		//id("popup_ok").onclick = id("form1").submit();
		
						/*link[j].onclick = function(){
								// Show the gray background
								showOverlay();
								
								// Show the image, in the gallery
								//showImage( this.parentNode );
								
								// Make sure that the browser doesn't go the
								// image, like it normally would
								return false;
						};
				}
		}*/
};