function showImage(image,url,current,total) {
	var image;
	var url;
	var current;
	var total;
//alert(current+' - '+total);
	function gotoURL() {
		window.location = url;
	}


	//first we need to clear up all that was created under moby_image_div
	while (document.getElementById("moby_image_div").lastChild) {
	  document.getElementById("moby_image_div").removeChild(document.getElementById("moby_image_div").lastChild);
	}

	// recomended way of DOM manipulation
	//document.getElementById('moby_div').closeChild(newImage);
	//if (!document.getElementById('moby_image')) {
	var prevLink=document.createElement('a');
	//prevLink.setAttribute('href','removeChild.html');
	prevLink.className='prev';
	prevLink.setAttribute("id","the_prevLink");
	var linkText=document.createTextNode('previous');
	prevLink.appendChild(linkText);

	var newImage = document.createElement("img");
	newImage.setAttribute("id","moby_image");
	
	var nextLink=document.createElement('a');
	//nextLink.setAttribute('href','removeChild.html');
	nextLink.className='next';
	nextLink.setAttribute("onclick","showImage(image,url,current,total)");
	var linkText=document.createTextNode('next');
	nextLink.appendChild(linkText);
	
	if (current > 1) { document.getElementById('moby_image_div').appendChild(prevLink); }
	document.getElementById("moby_image_div").appendChild(newImage);
	if (current < total) { document.getElementById('moby_image_div').appendChild(nextLink); } 

	//document.getElementById('moby_div').innerHTML = '<div><a id="moby_link" href=""><img id="moby_image"></a></div>'; // this is the buggy&simpler way of doing it.

	document.getElementById('moby_image').src=image; 
	document.getElementById('moby_image').onclick=gotoURL;


}