function ci_init(){
    var links = document.getElementsByTagName("A");
    for (var ii = 0; ii < links.length; ii++){
        if(links[ii].className == "collection") links[ii].onclick = ci_show(links[ii]);
    }
}

function ci_show(link){
    return function(){
        ci_show_overlay(link);
        return false;
    }
}

function ci_hide_overlay(){
    var layer = document.getElementById("overlay_layer");
    if(layer != null) layer.parentNode.removeChild(layer);
    return false;
}

function ci_show_overlay(src){
    
    // Get data from the calling object.
    href = src.href;
    
    // Remove the layer if it's already showing.
    ci_hide_overlay();
    
    // This is our parent object.
    var content = document.getElementById("container");
    
    // Create the "close" link.
    var link = document.createElement("a");
    link.setAttribute("href", "#");
    link.appendChild(document.createTextNode("Close Ring Image"));
    link.onclick = ci_hide_overlay;
    
    // Create the image to display.
    var img = document.createElement("img");
    img.setAttribute("src", href);
    img.setAttribute("alt", "ring");
    
    // Create the containing div.
    var layer = document.createElement("div");
    layer.setAttribute("id", "overlay_layer");
    
    // Give the layer the appropriate class name.
    layer.setAttribute("class", "overlay");
    layer.className = "overlay";
    
    // Set the layer to the same width as its parent,
    // and line them up on thier left edges.
    layer.style.left = content.offsetLeft + "px";
    layer.style.width = content.offsetWidth + "px";
    
    // Put the layer in the right place.
	var scrollAmount = document.documentElement.scrollTop;
	if(scrollAmount == 0) scrollAmount = document.body.scrollTop;	
	var windowHeight = window.innerHeight;
	if(!windowHeight) windowHeight = document.documentElement.clientHeight;
	var top = scrollAmount + (windowHeight - 590) / 2;
	if(top < scrollAmount) top = scrollAmount;
    layer.style.top =  top + "px";
    
    // Add children to the layer and display it.
    layer.appendChild(link);
    layer.appendChild(img);
    document.getElementById("content").appendChild(layer);

	return false;
    
}

