var images = []; 
var currentphoto = 0;

function PreLoad(){
	var arrPreloadImages = [
    'images/bigrotation2.gif',
    'images/photo1_large.jpg',
    'images/photo2_large.jpg',
    'images/photo3_large.jpg',
    'images/photo4_large.jpg'
    ];
	
	for (var i = 0; i < arrPreloadImages.length; i++){
	  images[i] = new Image();
	  images[i].loaded = false;
	  images[i].src = arrPreloadImages[i];
	  //images[i].onload = setTimeout(ImageLoaded,1000);
	  images[i].onload = ImageLoaded;
  }
}

function ImageLoaded(){
	this.loaded = true;
	
	//if (currentphoto != 0 && currentphoto == i) {
	//	if (div = document.getElementById('largephotodiv')){
	//		ShowPhoto();
	//	}
	//}	
}

function CreatePopup(photo, photowidth, photoheight){
	currentphoto = photo;
	
	//creat a div for the large image
	var div = document.createElement('div');
	div.setAttribute('id','largephotodiv');
	div.setAttribute('style','position: absolute; top: 0px; left: 100px; margin: 0px; padding: 0px;width: '+ photowidth  + 'px; height: ' + photoheight + 'px; border: 7px solid #000; background-color: #fff;');
	//for ie :(
	div.style.cssText = 'position: absolute; top: 0px; left: 100px; margin: 0px; padding: 0px;width: '+ photowidth  + 'px; height: ' + photoheight + 'px; border: 7px solid #000; background-color: #fff;'
	
	//render div
	document.body.appendChild(div);

	if (images[currentphoto].complete || images[currentphoto].loaded){
		ShowPhoto();
	}
	else {
		//load animation gif
		var img_animation = document.createElement('img');
		img_animation.setAttribute('src',images[0].src);
		img_animation.setAttribute('id','animation');
		img_animation.setAttribute('style','display: block; border: 0px; margin-left:' + (photowidth - 32) / 2 + 'px; margin-top: ' + (photoheight - 32) / 2 + 'px;');
		
		//for ie :(
		//img_animation.style.cssText = 'style','border: 0px; margin-left:' + (photowidth - 32) / 2 + 'px; margin-top: ' + (photoheight - 32) / 2 + 'px;'
	
		//add animation gif to div, animation is shown while large image is loading in the background
		div.appendChild(img_animation);
	}
}

function ShowPhoto(){
	if (div = document.getElementById('largephotodiv')) {
		var img_largephoto = document.createElement('img');
		img_largephoto.setAttribute('id','largephoto');
		img_largephoto.setAttribute('src', images[currentphoto].src );
		img_largephoto.setAttribute('class','largephoto');
		img_largephoto.setAttribute('style','padding: 0px; margin: 0px; filter: alpha(opacity=0);	-moz-opacity: 0; opacity: 0;');
		
		if (img_animation = document.getElementById('animation')) {
			div.removeChild(img_animation);
		}
		
		//add large image
		div.appendChild(img_largephoto);
		
	  //make image transparent
	  changeOpac(0, 'largephoto'); 
	  
		var speed = Math.round(1000 / 100);
	  var timer = 0;
	
	  //fade in image
	  for(i = 0; i <= 100; i++) {
    	setTimeout("changeOpac(" + i + ",'largephoto')",(timer * speed));
    	timer++;
  	}
	}
}





function HidePhoto(){
	currentphoto = 0;
	var div = document.getElementById('largephotodiv');
	//remove div and it's children
	removeAllChildNodes('largephotodiv');
	document.body.removeChild(div);
	
}


function removeAllChildNodes(divname) {
    var node = document.getElementById(divname);
    if (node && node.hasChildNodes && node.removeChild) {
        while (node.hasChildNodes()) {
            node.removeChild(node.firstChild);
        }
    }

}