/**
 *
 * @access public
 * @return void
 **/
var ImageBox = {
	canvas		: null,
	descPanel	: null,
	imgBox		: null,
	imgHolder	: null,
	btnClose	: null,
	img 		: new Image(),
	maxOpacity	: 80,
	actOpacity	: 0,
	difOpacity	: 20,
	dirOpacity	: 1,
	dlyOpacity	: 50,
	timeout		: null,
	imgMargin	: 30,
	maxWidth	: 800,
	maxHeight	: 600,
	minMargin	: 30,
	relPath		: '',
	scrolledPos	: 0,
	callBackHide: null,

	init : function(){
		if(this.isIE()){
			this.imgBox=document.createElement('<div id="imgBox" onclick="ImageBox.hide()">');
		} else {
			this.imgBox=document.createElement('div');
			this.imgBox.setAttribute('id','imgBox');
			this.imgBox.setAttribute('onclick','ImageBox.hide()');
		}
		this.imgBox.style.position='absolute';
		this.imgBox.style.zIndex='11000';
		this.imgBox.style.top='0px';
		this.imgBox.style.left='0px';
		this.imgBox.style.width='100%';
		this.imgBox.style.height='100%';
		this.imgBox.style.background='black';
		this.imgBox.style.display='none';
		document.body.appendChild(this.imgBox);

		this.canvas=document.createElement('div');
		this.canvas.style.display='none';
		this.canvas.style.position='absolute';
		this.canvas.style.zIndex=Number(this.imgBox.style.zIndex)+1;
		this.canvas.style.background='white';
		document.body.appendChild(this.canvas);

		this.imgHolder=document.createElement('img');
		this.imgHolder.style.position='relative';
		this.imgHolder.style.top=this.imgMargin+'px';
		this.imgHolder.style.left=this.imgMargin+'px';
		this.imgHolder.style.border='solid 1px #CCCCCC';
		this.imgHolder.style.zIndex=Number(this.canvas.style.zIndex)+1;
		this.canvas.appendChild(this.imgHolder);

		if(this.isIE()){
			this.descPanel=document.createElement('<div onmouseover="this.style.background=\'#AAAAAA\'" onmouseout="this.style.background=\'none\'">');
			this.descPanel.style.borderTop='solid 1px gray';
			this.descPanel.style.borderBottom='solid 1px gray';
		} else {
			this.descPanel=document.createElement('div');
			this.descPanel.setAttribute('onmouseover','ImageBox.opacity(this,90)');
			this.descPanel.setAttribute('onmouseout','ImageBox.opacity(this,50)');
			this.opacity(this.descPanel,50);
		}
		this.descPanel.style.position='relative';
		this.descPanel.style.display='none';
		this.descPanel.style.top='0px';
		this.descPanel.style.left='0px';
		this.descPanel.style.width='100%';
		this.descPanel.style.background=(this.isIE())?'none':'#AAAAAA';
		this.descPanel.style.textAlign='center';
		this.descPanel.style.fontSize='14px';
		this.descPanel.style.fontWeight='bold';
		this.descPanel.style.color='black';
		this.descPanel.style.paddingTop='5px';
		this.descPanel.style.paddingBottom='5px';
		this.descPanel.style.zIndex=Number(this.imgHolder.style.zIndex)+1;
		this.canvas.appendChild(this.descPanel);

		if(this.isIE()){
			this.btnClose=document.createElement('<img src="'+this.relPath+'images/closelabel.gif" onclick="ImageBox.hide()">');
		} else {
			this.btnClose=document.createElement('img');
			this.btnClose.setAttribute('src',this.relPath+'images/closelabel.gif');
			this.btnClose.setAttribute('onclick','ImageBox.hide()');
		}
		this.btnClose.style.position='absolute';
		this.btnClose.style.top='8px';
		this.btnClose.style.cursor=(this.isIE())?'hand':'pointer';
		this.canvas.appendChild(this.btnClose);
	},

	show : function(src,desc){
		this.dirOpacity=1;
		this.imgBox.style.display='block';
		this.opacityTo(this.imgBox,this.difOpacity,this.maxOpacity,'prepareCanvas()');

		this.img.src=(src.src)?src.src:src;
		this.canvas.style.background='white';
		this.imgHolder.style.display='none';

		this.imgBox.style.height=this.max(this.imgBox.offsetHeight,document.body.offsetHeight,document.body.clientHeight,document.documentElement.offsetHeight)+'px';
		this.imgBox.style.width=this.max(this.imgBox.offsetWidth,document.body.offsetWidth,document.documentElement.clientWidth)+'px';

		if(desc){
			this.descPanel.innerHTML=desc;
			this.descPanel.style.display='block';
			this.descPanel.style.visibility='visible';
		} else {
			this.descPanel.innerHTML='';
			this.descPanel.style.display='none';
			this.descPanel.style.visibility='hidden';
		}
	},

	prepareCanvas : function(){
		if(!this.img.complete){
			this.timeout=setTimeout('ImageBox.prepareCanvas()',100);
			return true;
		}

		var w=this.img.width;
		var h=this.img.height;

		if(this.maxWidth&&(w>this.maxWidth)){
			h=(this.maxWidth/w)*h;
			w=this.maxWidth;
		}
		if(this.maxHeight&&(h>this.maxHeight)){
			w=(this.maxHeight/h)*w;
			h=this.maxHeight;
		}

		this.canvas.style.width=(w+2*this.imgMargin)+'px';
		this.canvas.style.height=(h+2*this.imgMargin)+'px';
		this.opacity(this.canvas,0);
		this.canvas.style.display='block';
		this.canvas.style.top=(((document.documentElement.clientHeight-this.canvas.offsetHeight)/2)>this.minMargin)?(parseInt((document.documentElement.clientHeight-this.canvas.offsetHeight)/2)+this.scrolledPos)+'px':this.minMargin+'px';
		this.canvas.style.left=(((document.documentElement.clientWidth-this.canvas.offsetWidth)/2)>this.minMargin)?(parseInt((document.documentElement.clientWidth-this.canvas.offsetWidth)/2))+'px':this.minMargin+'px';
		this.opacity(this.canvas,100);

		if(this.isIE()) this.imgHolder.src=this.img.src;
		else this.imgHolder.setAttribute('src',this.img.src);

		this.imgHolder.style.width=w+'px';
		this.imgHolder.style.height=h+'px';
		this.imgHolder.style.display='block';

		this.descPanel.style.top=(-(this.descPanel.offsetHeight))+'px';
		this.btnClose.style.left=(this.canvas.offsetWidth-this.btnClose.offsetWidth-8)+'px';
	},

	hide : function(){
		this.dirOpacity=-1;
		this.opacityTo(this.imgBox,this.actOpacity-this.difOpacity,this.maxOpacity,false);
		this.canvas.style.display='none';
		this.descPanel.style.display='none';
		this.imgHolder.setAttribute('src','');
		this.img=new Image();
	},

	remove : function(){
		document.body.removeChild(this.imgBox);
	},

	onscroll : function(){
		if(!this.canvas) return null;
		if(this.canvas.style.display=='block')
			this.canvas.style.top=(((document.documentElement.clientHeight-this.canvas.offsetHeight)/2)>this.minMargin)?(parseInt((document.documentElement.clientHeight-this.canvas.offsetHeight)/2)+this.scrolledPos)+'px':this.minMargin+'px';
		this.scrolledPos=this.getScrollXY()[1];
	},

	getScrollXY : function() {
		var scrOfX = 0, scrOfY = 0;
		if( typeof( window.pageYOffset ) == 'number' ) {
			//Netscape compliant
			scrOfY = window.pageYOffset;
			scrOfX = window.pageXOffset;
		} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
			//DOM compliant
			scrOfY = document.body.scrollTop;
			scrOfX = document.body.scrollLeft;
		} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
			//IE6 standards compliant mode
			scrOfY = document.documentElement.scrollTop;
			scrOfX = document.documentElement.scrollLeft;
		}
		return [ scrOfX, scrOfY ];
	},

	opacityTo : function(element,value,max,onready){
		if(value<=max){
			this.actOpacity=value;
			this.opacity(element,this.actOpacity);
			var nextOpacity=((this.actOpacity+this.dirOpacity*this.difOpacity)<=max)?(this.actOpacity+this.dirOpacity*this.difOpacity):max;
			if(value<max) element.timeout=setTimeout('ImageBox.opacityTo(ImageBox.imgBox,'+nextOpacity+','+max+',"'+onready+'")',this.dlyOpacity);
			else{
				clearTimeout(element.timeout);
				if(onready) eval('ImageBox.'+onready);
			}
		}
		if((this.dirOpacity==-1)&&(this.actOpacity==0)){
			clearTimeout(element.timeout);
			element.style.display='none';
			if(this.callBackHide) this.callBackHide();
			this.callBackHide=null;
		}
	},

	max : function(){
		var max=0;
		for (var i = 0; i < arguments.length; i++) if(arguments[i]>max) max=arguments[i];
		return max;
	},

	opacity : function(element, value){
		if(typeof element=="string"){element=document.getElementById(element);}
		if(!element){return null}
		value=parseFloat(value);
		if(isNaN(value)){return null;}
		if(typeof element.style.opacity!="undefined"){
			if(value>1){value/=100;}
			element.style.opacity=value;
			return value;
		} else if(typeof element.style.filter!="undefined"){
			if(value<=1 && value>0){value*=100;}
			element.style.filter="alpha(opacity="+value+")";
			return value;
		}
		return null;
	},

	isIE : function(){
		return (this.strpos(navigator.userAgent.toLowerCase(),"msie",0)>0);
	},

	strpos : function( haystack, needle, offset){
	    var i = haystack.indexOf( needle, offset ); // returns -1
	    return i >= 0 ? i : false;
	},

	addScroll : function() {
	    var oldQueue = window.onscroll? window.onscroll: function() {};
	    window.onscroll = function() {
	    	eval("ImageBox.onscroll()");
	        oldQueue();
	    }
	},

	addInit : function() {
	    var oldQueue = window.onload? window.onload: function() {};
	    window.onload = function() {
	    	eval("ImageBox.init()");
	        oldQueue();
	    }
	}
}

ImageBox.addInit();
ImageBox.addScroll();