// JavaScript Document
// Autor André Cavallari
// cavallari@live.com
// IMAGEBOX 1.1
// REQUER shortcuts 1.1
/*
<script type="text/javascript" src="js/shortcuts.js"></script>
<script type="text/javascript" src="js/imageBox.js"></script>
*/

/* INSERIR AS LINHAS ÀO DOCUMENTO DE ESTILO DA PÁGINA PARA MELHOR FUNCIONAMENTO
<style>
body{
	margin:0;
	padding:0;
}
</style>
*/
var imgBox;
var EffectFX;
var imageBoxImg;
var scrollingTimer;

var arrayBoxImages=new Array();
var arrayBoxTitles=new Array();
function BoxImage(){
	var ins=this;
	//--------------------------------- OVERLAY CREATION -------------------------------------------
	var overlay=document.createElement('div');
	overlay.id='overlay';
	$body().insertBefore(overlay,$body().firstChild);
	overlay='overlay';
	overlay.setSize(pagex(),pagey());
	overlay.setPosition('0','0');
	$id(overlay).style.background='#000';
	overlay.setOpacity(70);
	$id(overlay).onclick=function(){ ins.close(); }
	//----------------------------------------------------------------------------------------------
	var imagebox=document.createElement('div');
	imagebox.id='imageBox';
	$body().insertBefore(imagebox,$body().firstChild);
	imagebox='imageBox';
	this.imagebox='imagebox';
	$id(imagebox).style.border='10px solid #FFF';
	$id(imagebox).style.backgroundColor='#FFF';
	imagebox.setSize(300,260);
	imagebox.centerScreen(true,true);
	$id(imagebox).style.zIndex='9999';
	//--------------------------------------------------------------------------------------------------
	$id(imagebox).innerHTML='';
	$id(imagebox).innerHTML+='<div id="boxNBAR"><div id="boxBarra" style="width:100%;height:20px;"></div></div>';
	$id('boxBarra').innerHTML='<div id="boxText" style="width:1px;height:15px;float:left;overflow:hidden;background:#FFF;"></div>';
	$id('boxBarra').innerHTML+='<div id="boxButtons" style="width:50px;height:20px;float:right;background:#FFF;"></div>';
	$id(imagebox).innerHTML+='<img id="imageShow" src="imageBox/blank.jpg" style="border:0;margin:0;padding:0;" />';
	//---------------- BOTOES --------------------
	$id('boxButtons').innerHTML='<a style="margin-left:1px;" href="javascript:imageBoxClass.prev();void(0);"><img src="imageBox/prev.jpg" width="15" height="15" border="0" style="border:0;padding:0;margin:0;" /></a>';
	$id('boxButtons').innerHTML+='<a style="margin-left:1px;" href="javascript:imageBoxClass.next();void(0);"><img src="imageBox/next.jpg" width="15" height="15" border="0" style="border:0;padding:0;margin:0;" /></a>';
	$id('boxButtons').innerHTML+='<a style="margin-left:1px;" href="javascript:imageBoxClass.close();void(0);"><img src="imageBox/close.jpg" width="15" height="15" style="border:0;padding:0;margin:0;" border="0" /></a>';
	//------------------ END OF BUTTONS -----------------------------------------------------------------------
	// FONT STYLES
	$id('boxText').style.fontFamily='Verdana, Arial, Helvetica, sans-serif';
	$id('boxText').style.fontSize='11px';
	$id('boxText').style.color='#777';
	$id('boxNBAR').style.width='100%';
	$id('boxNBAR').style.height='20px';
	//--------------------- BOX HIDE -----------------------------------------------------------------------------
	'overlay'.setVisible(false);
	'imageBox'.setVisible(false);
	
	
	objs=document.getElementsByTagName('a');
	total=objs.length;
	var o=0;
	for(var i=0;i<total;i++){
		if(objs[i].rel=='imageBox'){
			objs[i].rev=o;
			arrayBoxImages[o]=objs[i].href;
			arrayBoxTitles[o]=objs[i].title;
			objs[i].onclick=function(){
				imageBoxClass.start(this.rev);
				return false;
			}
			o++;
		}
	}
	//-------------------------------------------------------------------------------------------------
	this.setLoading=function(loading){
		if(loading){
			$id(imagebox).style.backgroundImage='url("imageBox/loading.gif")';
			$id(imagebox).style.backgroundPosition='center';
			$id(imagebox).style.backgroundRepeat='no-repeat';
			'boxBarra'.setVisible(false);
		}
		else{
			$id(imagebox).style.backgroundImage='url("imageBox/blank.jpg")';
			$id(imagebox).style.backgroundPosition='center';
			$id(imagebox).style.backgroundRepeat='no-repeat';
		}
	}
	//-------------------------------------------------------------------
	this.start=function(rev){
		'imageBox'.centerScreen(true,true);
		this.atual=rev;
		EffectFX=new FX(5);
		'imageShow'.setVisible(false);
		EffectFX.easing('overlay','o',0,80,true);
		EffectFX.easing('imageBox','o',0,100,true);
		this.imageBoxImage=arrayBoxImages[rev];
		this.imageBoxTitle=arrayBoxTitles[rev];
		setTimeout("imageBoxClass.setImg()",500);
		this.enableKeys(true);
	}
	this.setImg=function(){
		EffectFx=new FX();
		EffectFx.center(true,true);	
		this.setLoading(true);
		img=new Image();
		img.onload=function(){
			ins.setLoading(false);
			EffectFx.easing('imageBox','w',null,img.width,true);
			EffectFx.easing('imageBox','h',null,img.height+20,true);
			EffectFx.easing('imageShow','o',0,100,true);
			$id('imageShow').src=ins.imageBoxImage;
			$id('boxText').innerHTML='';
			atual=parseInt(ins.atual)+1;
			$id('boxText').innerHTML+='<strong>'+atual+'/'+arrayBoxImages.length+'</strong>';
			if(ins.imageBoxTitle){ $id('boxText').innerHTML+=' - '+ins.imageBoxTitle; }
			'boxText'.setSize(img.width-50,false);
			EffectFx.easing('boxBarra','o',99,100,true);
		}
		img.src=this.imageBoxImage;
	}
	this.enableKeys=function(value){
		if(value){document.onkeydown=this.checkKeycode;}
		else{document.onkeydown=null;}
	}
	//-------------------------------------------------------------------
	this.next=function(){
		shown=$id('boxBarra').style.display;
		maximo=arrayBoxImages.length-1;
		if(shown=='block'){
			if(this.atual<maximo){
				this.atual++;
				this.imageBoxImage=arrayBoxImages[this.atual];
				this.imageBoxTitle=arrayBoxTitles[this.atual];
				'imageShow'.setVisible(false);
				this.setImg();
			}
		}
		return false;
	}
	this.prev=function(){
		shown=$id('boxBarra').style.display;
		if(shown=='block'){
			if(this.atual>0){
				this.atual--;
				this.imageBoxImage=arrayBoxImages[this.atual];
				this.imageBoxTitle=arrayBoxTitles[this.atual];
				'imageShow'.setVisible(false);
				this.setImg()
			}
		}
		return false;
	}
	this.close=function(){
		'boxBarra'.setVisible(false);
		EffectFx=new FX(1);
		EffectFX.easing('imageBox','o',100,0);
		EffectFX.easing('overlay','o',80,0);
		this.funcs=false;
		this.enableKeys(false);
	}
	this.checkKeycode=function(e) {
		var keycode;
		if (window.event) keycode = window.event.keyCode;
		else if (e) keycode = e.which;
		if(keycode==27){
			imageBoxClass.close();
		}
		if(keycode==39){
			imageBoxClass.next();
		}
		if(keycode==37){
			imageBoxClass.prev();
		}
	}
}
//----------------------------------------------------------------------------------------------
function boxImageInit(){
	imageBoxClass=new  BoxImage();
}
function resize(){
	'overlay'.setSize(pagex(),pagey());
	'imageBox'.centerScreen(true,true);
}
function centerall(){
	clearTimeout(scrollingTimer);
	'imageBox'.centerScreen(true,true);
}
addEvent(window,'load',boxImageInit);
addEvent(window,'resize',resize)