var imageViewInstance;

function getImageViewInstance(){
    if(imageViewInstance == null){
        imageViewInstance = new ImageView();
    }
    return imageViewInstance;
}

function ImageView (){
    //background opacity
    this.backgroundDiv = document.createElement('div');
    this.backgroundDiv.style.position = 'absolute';
    this.backgroundDiv.style.left = '0px';
    this.backgroundDiv.style.top = '0px';
    this.backgroundDiv.style.zIndex = 10000;
    this.backgroundDiv.style.backgroundColor = '#888';
    this.backgroundDiv.style.border = '0px';
    this.backgroundDiv.onclick = new Function("imageViewInstance.hide();");
    
	
	if(window.innerHeight){//FF
        this.backgroundDiv.style.opacity = '.80';
    }
    else{//IE
        this.backgroundDiv.style.filter = 'alpha(opacity=80)';
    }
    
    //image
    this.img = document.createElement('img');
    
	this.img.onload = new Function("imageViewInstance.resize();");

    //image holder
    this.holderDiv = document.createElement('div');
    this.holderDiv.style.position = 'fixed';
    this.borderWidth = 10;
    this.holderDiv.style.zIndex = 10001;
    this.holderDiv.style.border = this.borderWidth + 'px solid #444';
    this.holderDiv.style.backgroundColor = '#888';
    this.holderDiv.onclick = new Function("imageViewInstance.hide();");
    
    //append divs
    this.holderDiv.appendChild(this.img);
}


ImageView.prototype.resize = function(){

	var imageWidth = getNaturalWidth(this.img);
	var imageHeight = getNaturalHeight(this.img);

	this.img.style.width = imageWidth+"px";
	

    if(window.innerHeight){//FF
		this.holderDivTargetTop = (window.innerHeight / 2) - (imageHeight / 2) - this.borderWidth;
        this.holderDiv.style.top = this.holderDivTargetTop + (imageHeight / 2)  + 'px';
        this.holderDiv.style.left = (window.innerWidth / 2) - (imageWidth / 2) - this.borderWidth + 'px';
    }
    else{//IE
		
		this.holderDivTargetTop = (document.documentElement.clientHeight / 2) - (imageHeight / 2) - this.borderWidth;
		this.holderDiv.style.top = this.holderDivTargetTop + (imageHeight / 2)  + 'px';
        this.holderDiv.style.left = (document.documentElement.clientWidth / 2) - (imageWidth / 2) -  this.borderWidth + 'px';
    }

	this.holderDivCurrentHeight = 0;
	this.holderDivTargetHeight = imageHeight;

	this.imageHeight = imageHeight;

    this.holderDiv.style.width = imageWidth+"px";
    this.holderDiv.style.height = imageHeight+"px";
	
	document.body.appendChild(this.backgroundDiv);
    document.body.appendChild(this.holderDiv);

	this.resizeAnimate();

}

ImageView.prototype.resizeAnimate = function(){
	
	this.holderDivCurrentHeight += 45;

	if (this.holderDivCurrentHeight >=  this.holderDivTargetHeight  )
	{
		this.holderDivCurrentHeight = this.holderDivTargetHeight;
		
	} else {

		setTimeout ("imageViewInstance.resizeAnimate();", 50);
	}

	this.holderDiv.style.top = this.holderDivTargetTop + (this.imageHeight/2) - (this.holderDivCurrentHeight / 2) +"px";

	this.holderDiv.style.height = this.holderDivCurrentHeight+"px";
	this.img.style.height = this.holderDivCurrentHeight+"px";

}

ImageView.prototype.show = function(imgSrc){
    this.img.src = imgSrc;

	var height = (document.documentElement.clientHeight > document.documentElement.scrollHeight) ? document.documentElement.clientHeight : document.documentElement.scrollHeight;
	var width = (document.documentElement.clientWidth > document.documentElement.scrollWidth) ? document.documentElement.clientWidth : document.documentElement.scrollWidth;

	this.backgroundDiv.style.width = width + 'px';
	this.backgroundDiv.style.height = height + 'px';
	this.backgroundDiv.style.filter = 'alpha(opacity=80)';
    
	

}

ImageView.prototype.hide = function(){
	this.img.style.width = "0px";
	this.img.style.height = "0px";
	this.holderDiv.style.width = "0px";
	this.holderDiv.style.height = "0px";
    document.body.removeChild(this.backgroundDiv);
    document.body.removeChild(this.holderDiv);
}

function getNaturalHeight(img) {
	if( img.naturalHeight ) {
		return img.naturalHeight;
	} else {
		lgi = new Image();
		lgi.src = img.src;
		return lgi.height;
	}
}

function getNaturalWidth(img) {
	if( img.naturalWidth ) {
		return img.naturalWidth;
	} else {
		lgi = new Image();
		lgi.src = img.src;
		return lgi.width;
	}
}