function Overlay(i){
	
	this.i = i;
	
	this.create = function(){
		
		if (!this.bg){ 
			this.bg = document.createElement('div');
			this.bg.overlay_id = this.i;
			this.bg.className = 'overlay_bg';
			this.bg.id = 'overlay_bg';
			this.bg.style.zIndex = 100;
			
			if (this.bg.addEventListener){
				this.bg.addEventListener('click', function(){ overlays[this.overlay_id].hide(); }, false);
			}
			else if (this.bg.attachEvent){
				this.bg.onclick = function(){ overlays[this.overlay_id].hide(); };
			}
			
			this.bg_inner = document.createElement('div');
			this.bg_inner.style.filter = 'alpha(opacity = 50)';
			this.bg.appendChild(this.bg_inner);
			
			this.container = document.createElement('div');
			this.container.className = 'overlay_container';
			this.container.id = 'overlay_container';
			this.container.overlay_id = this.i;
			this.container.style.width = '662px';
			this.container.style.height = '605px';
			this.container.style.zIndex = 110;
			

			/*
			if (this.container.addEventListener){
				this.container.addEventListener('click', function(){ overlays[this.overlay_id].hide(); }, false);
			}
			else if (this.container.attachEvent){
				this.container.onclick = function(){ overlays[this.overlay_id].hide(); };
			}
			*/
			
		}
					
					
		this.bg.style.opacity = 0;
		this.bg.style.filter = 'alpha(opacity = 0)';
		this.bg.FadeState = null;
		this.container.style.opacity = 0;
		this.container.style.filter = 'alpha(opacity = 0)';
		this.container.FadeState = null;

		document.body.appendChild(this.bg);
		document.body.appendChild(this.container);
		
	}
	
	this.show = function(){

		if (navigator.userAgent.indexOf("MSIE") > -1){
			document.body.onresize = resizeGallery;
		}
		else {
			window.onresize = function(){ resizeGallery(); };
		}

		this.position();		
		
		fade('overlay_bg');
		setTimeout('fade("overlay_container")', 600);
		
	}
	
	this.position = function(){
		
		this.viewport = new Object;				
		this.viewport.scrollTop = document.documentElement.scrollTop;
		this.viewport.scrollHeight = document.documentElement.scrollHeight;
		this.viewport.scrollWidth = document.documentElement.scrollWidth;
		
		if (navigator.userAgent.indexOf("MSIE") > -1){
			this.viewport.width		= document.documentElement.clientWidth;
			this.viewport.height	= document.documentElement.clientHeight;
		}
		else {
			this.viewport.width		= window.innerWidth;
			this.viewport.height	= window.innerHeight;
		}
		
		this._set_bg_size();
		this._center_container();
		
	}
	

	this._set_bg_size = function(){
			
		if (parseInt(this.bg.style.width) > this.viewport.width){
			this.bg.style.width = this.viewport.width+'px';
		}
		else {
			this.bg.style.width = this.viewport.scrollWidth+'px';
		}
		this.bg.style.height = this.viewport.scrollHeight+'px';
		this.bg_inner.style.width = this.viewport.scrollWidth+'px';
		this.bg_inner.style.height = this.viewport.scrollHeight+'px';

	}
	
	this._center_container = function(){
		
		this.container.style.marginLeft = (this.viewport.width - parseInt(this.container.style.width))  / 2 +'px';
		this.container.style.marginTop = ((this.viewport.height - parseInt(this.container.style.height)) / 2) + this.viewport.scrollTop + 'px';

	}
	
	this.hide = function(){
		
		// TODO: update styles so that gallery is hidden
		//fade('overlay_bg');
		//setTimeout('fade("overlay_container")', 1000);

		this.bg.parentNode.removeChild(this.bg);
		this.container.parentNode.removeChild(this.container);
		if (navigator.userAgent.indexOf("MSIE") > -1){
			document.body.onresize = '';
		}
		else {
			window.onresize = '';
		}
		
	}
	
	this.fill = function(element){
		
		this.container.innerHTML = '';

		var closebutton = document.createElement('a');
		closebutton.className = 'close';
		closebutton.onclick = function(){ overlays[0].hide(); };

		this.container.appendChild(closebutton);
		this.container.appendChild(element);
		
	}	
	
}



var  TimeToFade = 1000.0;

function fade(eid){
  var element = document.getElementById(eid);
  if(element == null)
    return;
   
  if(element.FadeState == null)
  {
    if(element.style.opacity != 0 &&
	   (element.style.opacity == null
        || element.style.opacity == ''
        || element.style.opacity == '1'))
    {
      element.FadeState = 2;
    }
    else
    {
      element.FadeState = -2;
    }
  }
   
  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  }  
}

function  animateFade(lastTick, eid){  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '100' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
 
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}


var overlays = new Array();
function showGallery(){

	var i = overlays.length;
	if (i == 1){
		i = 0;
	}
	else {
		overlays[i] = new Overlay(i);
	}
	overlays[i].create();
	overlays[i].show();
	
}
function resizeGallery(){
	overlays[0].position();
}




function show_album(json_array){
	
	var array = eval(json_array);
	
	var album = new Album;
	album.set_from_array(array);
	
	if (!overlays[0]){
		overlays[0] = new Overlay(0);
	}
	
	overlays[0].create();
	overlays[0].fill(album.get_objects());
	
	overlays[0].show();
	
}

function Album(){
	
	this.set_from_array = function(array){

		if (array.thumb_1){		
			this.thumb_1 = array.thumb_1;
			this.image_1 = array.image_1;
		}
		if (array.thumb_2){
			this.thumb_2 = array.thumb_2;
			this.image_2 = array.image_2;
		}
		if (array.thumb_3){
			this.thumb_3 = array.thumb_3;
			this.image_3 = array.image_3;
		}
		
		
		this.cover_image = array.cover_image;
		
		if (array.description){
			this.description = array.description;
		}
		if (array.linktext){
			this.linktext = array.linktext;
		}
		if (array.linkurl){
			this.linkurl = array.linkurl;
		}
		
	}
	
	this.get_objects = function(){
		
		this._create();
		
		return this.container;
		
	}
	
	this._create = function(){
		
		if (!this.container){
			this.container = document.createElement('div');
			this.container.className = 'album_container';
			
			this.image_container = document.createElement('div');
			this.image_container.className = 'album_image_container';
			
			this.image = document.createElement('img');
			this.image.id = 'album_image';
			this.image.src = this.cover_image;
			this.image.onclick = function(){ overlays[0].hide(); };
			
			this.image_container.appendChild(this.image);
			this.container.appendChild(this.image_container);
			
			if (this.thumb_1){
				this.thumb_1_container = document.createElement('div');
				this.thumb_1_container.className = 'album_thumb';
				
				this.thumb_1_anchor = document.createElement('a');
				this.thumb_1_anchor.rel = this.image_1;
				this.thumb_1_anchor.onclick = function(){ document.getElementById("album_image").src = this.rel; };
				
				this.thumb_1_image = document.createElement('img');
				this.thumb_1_image.src = this.thumb_1;
				
				this.thumb_1_container.appendChild(this.thumb_1_anchor);
				this.thumb_1_anchor.appendChild(this.thumb_1_image);
				this.container.appendChild(this.thumb_1_container);
			}
			
			if (this.thumb_2){
				this.thumb_2_container = document.createElement('div');
				this.thumb_2_container.className = 'album_thumb';
				
				this.thumb_2_anchor = document.createElement('a');
				this.thumb_2_anchor.rel = this.image_2;
				this.thumb_2_anchor.onclick = function(){ document.getElementById("album_image").src = this.rel; }
				
				this.thumb_2_image = document.createElement('img');
				this.thumb_2_image.src = this.thumb_2;
				
				this.thumb_2_container.appendChild(this.thumb_2_anchor);
				this.thumb_2_anchor.appendChild(this.thumb_2_image);
				this.container.appendChild(this.thumb_2_container);
			}

			if (this.thumb_3){
				this.thumb_3_container = document.createElement('div');
				this.thumb_3_container.className = 'album_thumb';
				
				this.thumb_3_anchor = document.createElement('a');
				this.thumb_3_anchor.rel = this.image_3;
				this.thumb_3_anchor.onclick = function(){ document.getElementById("album_image").src = this.rel; };
				
				this.thumb_3_image = document.createElement('img');
				this.thumb_3_image.src = this.thumb_3;
	
				this.thumb_3_container.appendChild(this.thumb_3_anchor);
				this.thumb_3_anchor.appendChild(this.thumb_3_image);
				this.container.appendChild(this.thumb_3_container);
			}

			if (this.description || (this.linktext && this.linkurl)){
				this.description_container = document.createElement('div');
				this.description_container.className = 'album_description';
				this.container.appendChild(this.description_container);
			}
			if (this.description){
				this.description_container.innerHTML = this.description;
			}
			
			if (this.linktext && this.linkurl){
				this.linktextcontainer = document.createElement('a');
				this.linktextcontainer.href = this.linkurl;
				this.linktextcontainer.target = '_blank';
				this.linktextcontainer.innerHTML = this.linktext;
				this.linktextcontainer.style.display = 'block';
				this.description_container.appendChild(this.linktextcontainer);
			}
			
		}
		
	}
	
}