var background, wrapper, indicator, picture;

function loadPictureViewer(selector) {
	var str = "<div id=\"PictureWrapper\"><div id=\"PictureContainer\"><div id=\"Close\"><a href=\"#\" onclick=\"pictureViewer('Hide')\"><img src=\"/images/x.gif\" title=\"Close\" alt=\"Close\"></a></div><img src=\"/images/indicator.gif\" id=\"Indicator\"><img id=\"Picture\"></div></div><div id=\"PictureBackground\"></div>";
	document.body.insertAdjacentHTML("afterBegin", str);
	background = document.getElementById("PictureBackground");
	wrapper = document.getElementById("PictureWrapper");
	indicator = document.getElementById("Indicator");
	picture = document.getElementById("Picture");
	EventManager.Add(picture, "load", showPicture);
	var anchors = cssQuery(selector);
	var len = anchors.length, i = 0;
	while (i < len) {
		var anchor = anchors[i];
		anchor._href = anchor.href;
		anchor.href = "#";
		EventManager.Add(anchor, "click", pictureViewer);
		i++;
	}
}

function showPicture() {
	indicator.style.display = "none";
	this.style.display = "block";
}

function pictureViewer(state) {
	if(state == "Hide") { picture.style.display = "none"; indicator.style.display = "block"; }
	picture.src = (state == "Hide")?"":this._href;
	wrapper.style.display = (state == "Hide")?"none":"block";
	background.style.display = (state == "Hide")?"none":"block";
}