var Lightbox = {
  fileLoadingImage: "/scripts/loading.gif",
  
	initialize: function() {	
    if (!document.getElementsByTagName){ return; }
		var images = document.getElementsByTagName('img');
    for (var i=0; i<images.length; i++){
	  	var image = images[i];
			if (image.className=='popup'){
				image.onclick = function () {Lightbox.start(this);}
			}
		}
	
		//Build Preview Box
		
		var objBody = document.getElementsByTagName("body").item(0);
		var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','overlay');
		objOverlay.style.display = 'none';
		objOverlay.onclick = function () {Lightbox.close();}
		objBody.appendChild(objOverlay);
		
		var objLoadingImage = document.createElement("img");
		objLoadingImage.setAttribute('src', Lightbox.fileLoadingImage);
		objLoadingImage.setAttribute('id', 'imgloading');
		objLoadingImage.style.display = 'none';
		objBody.appendChild(objLoadingImage);
		
		var objLightbox = document.createElement("div");
		objLightbox.setAttribute('id','lightbox');
		objLightbox.style.display = 'none';
		objLightbox.onclick = function () {Lightbox.close();}
		objBody.appendChild(objLightbox);	  
	
		var objLightboxImage = document.createElement("img");
		objLightboxImage.setAttribute('id','lightboxImage');
		objLightbox.appendChild(objLightboxImage);
		
		var objClose = document.createElement("p");
		text = document.createTextNode("Click to Close");
		objClose.appendChild(text);
		objLightbox.appendChild(objClose);
	
	},
	
	start: function(image) {
    var off = document.viewport.getScrollOffsets();
		//$('lightbox').hide();
		Lightbox.center('imgloading');
		$('imgloading').show();

    var dw = document.body.clientWidth
    var dh = document.body.clientHeight
   // var off = document.viewport.getScrollOffsets()
    
		var overlay = $('overlay');
		$('overlay').style.width = dw +'px';
		$('overlay').style.height = dh +'px';
		new Effect.Appear('overlay', { duration: 0.5, from: 0.0, to: 0.8,queue:'end' });

		imgPreloader = new Image();

		imgPreloader.onload = function(){
		  $('lightboxImage').src = this.src
			var lightbox=$('lightbox');
			lightbox.style.width = (imgPreloader.width+10)+'px';
			lightbox.style.height = (imgPreloader.height+40)+'px';
			Lightbox.center('lightbox')
		  new Effect.Appear('lightbox', { duration: 0.7, from: 0.0, to: 1, queue:'end' });
		  new Effect.Fade('imgloading', { duration: 0.5});
		}
		
    var tmpsrc = image.getAttribute('src')
		tmpsrc = tmpsrc.substring(0,tmpsrc.length-4)+'lrg.jpg';
		imgPreloader.src = tmpsrc;
	},

	center: function(obj) {
	  var cobj = $(obj);
	  var dims = document.viewport.getDimensions();
	  var off = document.viewport.getScrollOffsets();
		cobj.style.top=((dims.height/2)-(cobj.getHeight()/2))+off[1]+'px';
		cobj.style.left=((dims.width/2)-(cobj.getWidth()/2))+off[0]+'px';
		//alert('here');
	},
	
	close: function() {
	  Effect.Fade('lightbox',{ duration: 0.3, queue:'end' });
	  Effect.Fade('overlay',{ duration: 0.3, queue:'end' });
	  $('imgloading').hide();
	}
	
}

  Event.onDOMReady(Lightbox.initialize);