function initGallery() {
	Element.cleanWhitespace($('Gallery'));
	//new Insertion.Bottom('Gallery', '<div id="OuterContainer"><div id="Container"><img id="Photo" src="img/c.gif" alt="" /><div id="LinkContainer"><a href="#1" onclick="prevPhoto();" id="PrevLink" title="Forrige billede"><span>Forrige</span></a><a href="#2" onclick="nextPhoto();" id="NextLink" title="Næste billede"><span>Næste</span></a></div><div id="Loading" style="display:none;"><img src="img/busy.gif" width="35" height="35" title="" alt="Henter..." /></div></div><img id="Preload" src="img/c.gif" alt="" /></div>');
    //getImg(photoId);
    getImg(-1);
}

var photos = new Array();
var links = $('Thumbs').getElementsByTagName("A");

for (var i=0; i < links.length; i++) {
    links[i].nr = i;
    links[i].onclick = function() {
        getImg(this.nr); 
		return false;
    }
    photos[i]= new Array(links[i].href, links[i].title);
    links[i].title="";
    //links[i].href ="#"+(i+1);
}


// get current photo id from URL
var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;
// if no photoId supplied then set default
var photoId = ((!photoId) || (photoId==-1) || (photoId >= photos.length)) ? 0 : photoId;
var photoId = ((!photoId) || (photoId==-1) ) ? 0 : photoId;



// when new photo is selected...
function getImg(nr) {
    if (photoId == nr) return;
    if (nr == -1) nr = 0;
    if(!photos[nr][2] || photos[nr][2]=="undefined"){
        //only preload when it hasn't been viewed before...
        //new Effect.Appear("Loading", {duration: 0.3});
		Element.show("Loading");
    }
    var img = $("Preload");
    img.src = photos[nr][0];
    links[photoId].className="";
    links[nr].className="current";
    photoId = nr;
    updateView(nr);
}

function nextPhoto() {
    var nr = (photoId+1 >= photos.length) ? 0 : photoId+1;
    getImg(nr);
    $('NextLink').blur();
	return false;
}

function prevPhoto() {
    var nr = (photoId-1 < 0) ? photos.length-1 : photoId-1;
    getImg(nr);
    $('PrevLink').blur();
	return false;
}

function updateView(nr) {
    $("Description").innerHTML= photos[nr][1];
    $("Counter").innerHTML = (nr+1) +"/"+ photos.length 
    $("PrevLink").href = "#" + (photoId+1);
    $("NextLink").href = "#" + (photoId+1);
}

// when the preload is done...
$("Preload").onload = function() {
    var container = $("Container");
	var p = $("Photo");
    p.style.visibility = "hidden";

    if(!photos[photoId][2] || photos[photoId][2] == "undefined"){
		photos[photoId][2]=this.offsetWidth;
	    photos[photoId][3]=this.offsetHeight;
	    
	} 
	container.style.width=this.offsetWidth + 'px';
    container.style.height=this.offsetHeight + 'px';
    
	//new Effect.Fade("Loading", {duration: 0.3});
	p.src = this.src;
	p.style.width = this.offsetWidth+'px';
	p.style.height = this.offsetHeight+'px';
    Element.hide("Loading");
}

$("Photo").onload = function() {
	this.style.visibility="visible";
}

window.onload = function() {
	
	initGallery();
}