var fxGallery = new Class({	
	Implements: Options,
	options: {
		list : '',				//list of images
		overcolor :'#000',		//overlay color
		overopacity:.5,			//overlay opacity
		titles: true,			//shows img title tag  has title
		alts: true,				//shows img alt tag has description
		counter:true			//shows counter of images
	},	
	
	initialize: function(options){	//Add click event to the list of images
		this.setOptions(options);
		new Asset.images(['images/close_on.png', 'images/next_on.png', 'images/prev_on.png']);		//Cria um asset pra poder carregar os botoes de next/prev/clos
		var imgs = $$("#" + this.options.list + " li a img");
		imgs.each(function(img,i){
				img.addEvent('click', function(){new Asset.images([img.getProperty("src")]);this.setOverlay(img,i)}.bindWithEvent(this, img) );
		}.bind(this) );
	},
	
	setOverlay:function(img,i){	//setting overlay	
		var overcolor = this.options.overcolor ;
		var overopacity = this.options.overopacity ;
		var overlay=new Element('div', {'styles': {'opacity': 0,'width':'100%','height':window.getScrollHeight(),'position':'absolute','top':0,'left':0,'z-index':99999999},'id': 'overlay'}).inject(document.body).morph({'opacity': overopacity, 'background-color': overcolor});
		var overlayContent=new Element('div', {'styles': {'opacity': 0,'margin':'auto', 'background-color': '#FFF','width':0,'height':0,'overflow':'visible','position':'absolute','top':0,'bottom':0,'left':0,'right':0,'z-index':999999999,'padding':0},			'id': 'overlayContent'		}).set('html','<div id="contentContainer"></div>').inject(document.body).morph({'opacity': 0});	
		var fx = new Fx.Morph('overlayContent', {duration: 800});	
		var fxC = new Fx.Morph('contentContainer', {duration: 800});	
		$("contentContainer").set({"html":"<img src='images/logo.png' width='136' height:='159' /><h2 id='waittext'>Aguarde...</h2>","opacity":0});
		$$("#contentContainer img").setStyles({'margin':'0 auto'});$("waittext").setStyles({'color':'#FFF','padding':'13px 10px','text-align':'center','font-size':'7pt','font-family':'Lucida Sans Unicode, Lucida Sans, Lucida Grande, Verdana, Arial, Helvetica, sans-serif','font-weight':'normal','letter-spacing':'2px','text-transform':'uppercase'});		
		if (Browser.Engine.trident){	//For IE centering
			fx.start({	'width':136,'height':200,'opacity': 1, 'background-color': '#117C22','margin-top':(window.getScrollHeight().toInt()-5)/3,'margin-left':(window.getScrollWidth().toInt()-136)/2	}).chain(function(){fxC.start({'opacity': 1});	 (function(){this.showImage(img,i)}.bind(this)).delay(250)	}.bind(this))
		}else{	//Others really browsers
			fx.start({'width':136,'height':200,'opacity': 1, 'background-color': '#117C22'}).chain(function(){fxC.start({'opacity': 1});	 (function(){this.showImage(img,i)}.bind(this)).delay(200)	}.bind(this))
		}
	},
	
	showImage:function(img,i){
				
				var imgs = $$("#" + this.options.list + " li a img");
				var titles = this.options.titles;
				var alts = this.options.alts;
				var counter = this.options.counter;
				
				
				if ($("btnClose") == null){new Element('img', {'styles': {'opacity': 0,"cursor":"pointer",'position':'absolute','width':50, 'height':50, "top":0,'left':0, 'z-index':999999},'events': {'click': function(){this.clos()}.bind(this),'mouseenter':function(){this.setProperty("src","images/close_on.png")},'mouseleave':function(){this.setProperty("src","images/close.png")}},'width':50,'height':50,'title':'Fechar Imagem','id': 'btnClose','src':'images/close.png'}).inject("overlayContent")}
				if ($("btnNext") == null){new Element('img', {'styles': {'opacity': 0,"cursor":"pointer",'position':'absolute','width':50, 'height':50, "top":50,'right':50,  'z-index':999999},'events': {'click': function(){this.next(img,i);}.bind(this),'mouseenter':function(){this.setProperty("src","images/next_on.png")},'mouseleave':function(){this.setProperty("src","images/next.png")}},'width':50,'height':50,'title':'Proxima Imagem','id': 'btnNext','src':'images/next.png'}).inject("overlayContent")}
				if ($("btnPrev") == null){new Element('img', {'styles': {'opacity': 0,"cursor":"pointer", 'position':'absolute','width':50, 'height':50, "top":300,'right':500,  'z-index':999999},'events': {'click': function(){this.prev(img,i);}.bind(this),'mouseenter':function(){this.setProperty("src","images/prev_on.png")},'mouseleave':function(){this.setProperty("src","images/prev.png")}},'width':50,'height':50,'id': 'btnPrev','title':'Imagem Anterior','src':'images/prev.png'}).inject("overlayContent")}
 
				new Element('img', {'styles': {'opacity': 0, 'position':'absolute', 'background-color': '#FFF','z-index':99999},'id': 'imgtemp','src':img.getProperty("dynsrc")}).inject("overlayContent",'top');					

				new Asset.images([img.getProperty("dynsrc")], {
					onComplete: function(){
						// FXs
						var fximg = new Fx.Morph('imgtemp', {duration: 'long'});
						var fx = new Fx.Morph('overlayContent', {duration: 800});	
						var fxcl = new Fx.Morph('btnClose', {duration:500});var fxC = new Fx.Morph('contentContainer', {duration: 800});
						var fxnx = new Fx.Morph('btnNext', {duration: 500});	
						var fxpr = new Fx.Morph('btnPrev', {duration: 500});
						fxC.start({'opacity':0}).chain(function(){
						$("overlayContent").setStyle("overflow","hidden");
						$(document.body).setStyle("overflow","hidden");
						
						fx.start({'background-color':'#FFF','width':$("imgtemp").getStyle("width").toInt(),'height':$("imgtemp").getStyle("height").toInt()}).chain(function(){	
							
							if (Browser.Engine.trident){
								fx.start({'margin-top':(window.getHeight().toInt()-$("imgtemp").getStyle("height").toInt())/2,'margin-left':(window.getWidth().toInt()-$("imgtemp").getStyle("width").toInt())/2});
							}
							
							
							fximg.start({'opacity': 1});
							fx.start({'padding':5});
							fxcl.start({'top':-25,'left':-25,'opacity': 1});				
							fxnx.start({'top':-25,'right':-25,'opacity': 1});
							fxpr.start({'top':-25,'right':25,'opacity': 1});
							if (counter){	
								new Element('div',{'styles': {'z-index':-1,'background-color':'#FFF','position':'absolute','opacity':0,'top':0,'right':-4,'height':0,'padding':10}, 'class':'counter','id': 'counter'}).inject("overlayContent").set("html","<span title='Mostrando "+(i.toInt()+1)+" de um total de "+imgs.length+" imagens'>"+(i.toInt()+1)+"/"+imgs.length+"</span>");
								$$("#counter span").setStyles({'font-weight':'bold','font-size':'8pt','color':'#FFF','font-family':'Lucida Sans Unicode, Lucida Sans, Lucida Grande, Verdana, Arial, Helvetica, sans-serif','letter-spacing':'2px','text-transform':'uppercase'});
								var fxcounter = new Fx.Morph('counter', {duration: 1500});
								fxcounter.start({'top':-55,'opacity': .5,'height':40,'background-color':'#5CA536'});
							}
							if (titles){
								new Element('h2',{'styles': {'position':'absolute','font-weight':'bold','margin':'0','z-index':99,'top':0,'display':'block','width':'90%','opacity':0,'color':'#FFCC33'}, 'class':'fxtitle','id': 'fxtitle'}).inject("overlayContent").set("text",img.getProperty("title"));
								$$("#overlayContent .fxtitle").setStyles({'color':'#FFF','text-align':'left','font-size':'8pt','font-family':'Lucida Sans Unicode, Lucida Sans, Lucida Grande, Verdana, Arial, Helvetica, sans-serif','font-weight':'bold','letter-spacing':'2px','text-transform':'uppercase'});
								var fxtitle = new Fx.Morph('fxtitle', {duration: 'normal'});
								fxtitle.start({'top':-30,'opacity': 1,'padding':'10px 0 0 20px' });
							}
							if (alts){
								new Element('h2',{'styles': {'position':'absolute','text-align':'center','z-index':999,'bottom':0,'display':'block','margin':'0 auto','right':0,'left':0,'width':'95%','opacity':0,'color':'#7F0C8B'}, 'class':'fxdesc','id': 'fxdesc'		}).inject("overlayContent").set("text",img.getProperty("alt"));
								$$("#overlayContent .fxdesc").setStyles({'color':'#FFF','text-align':'center','font-size':'8pt','font-family':'Lucida Sans Unicode, Lucida Sans, Lucida Grande, Verdana, Arial, Helvetica, sans-serif','font-weight':'bold','letter-spacing':'2px'});
								var fxdesc = new Fx.Morph('fxdesc', {duration: 'normal'});
								fxdesc.start({'bottom':-25,'opacity': 1})
							}
							//Asset for the next image...
							var nextimg;imgs.each(function(el,j){if (j==i+1){nextimg = el;	}});	new Asset.images([nextimg]);
						});
						$("overlayContent").setStyle("overflow","visible");
						$(document.body).setStyle("overflow","hidden");
						});//opacity overlayContent
					}//end oncomplete
				});//end asset
	
	},
	
	next:function(img,i){
	
		var imgs = $$("#" + this.options.list + " li a img");
		var titles = this.options.titles;
		var alts = this.options.alts;
		var counter = this.options.counter;
		
		var nextimg;
		var nextid=i.toInt() + 1;
		if (nextid >= imgs.length){			nextid = 0;		}
		imgs.each(function(el,j){		if (j==nextid){nextimg = el;	}		   		});
		
		var fx = new Fx.Morph('overlayContent', {duration: 800});	var fxC = new Fx.Morph('contentContainer', {duration: 800});
		var fxcl = new Fx.Morph('btnClose', {duration:600, wait:true});	var fxnx = new Fx.Morph('btnNext', {duration: 500, wait:true});	var fxpr = new Fx.Morph('btnPrev', {duration: 500, wait:true});	var fximg = new Fx.Morph('imgtemp', {duration: 500});			
		if (counter){	
			var fxcounter = new Fx.Morph('counter', {duration: 500});
			fxcounter.start({'top':0,'opacity': 0,'height':0,'background-color':'#FFF'});
		}
		if (titles){
			var fxtitle = new Fx.Morph('fxtitle', {duration: 'normal'});
			fxtitle.start({'top':0,'opacity': 0});
		}
		if (alts){
			var fxdesc = new Fx.Morph('fxdesc', {duration: 'normal'});
			fxdesc.start({'bottom':0,'opacity': 0});
		}
		fxnx.start({'top':0,'right':0,'opacity': 0});fxpr.start({'top':0,'right':0,'opacity': 0});fxcl.start({'top':0,'left':0,'opacity': 0});						
		fximg.start({'opacity': 0}).chain(function(){   
					$("btnClose").destroy(this);
					$("btnNext").destroy(this);
					$("btnPrev").destroy(this);
					$("imgtemp").destroy(this);
					if (counter){$("counter").destroy(this);}
					if (titles){$("fxtitle").destroy(this);}
					if (alts){$("fxdesc").destroy(this);}
					$("contentContainer").set({"html":"<img src='images/logo.png' width='136' height:='159' /><h2 id='waittext'>Aguarde...</h2>","opacity":0});
					$$("#contentContainer img").setStyles({'margin':'0 auto'});$("waittext").setStyles({'color':'#FFF','padding':'13px 10px','text-align':'center','font-size':'7pt','font-family':'Lucida Sans Unicode, Lucida Sans, Lucida Grande, Verdana, Arial, Helvetica, sans-serif','font-weight':'normal','letter-spacing':'2px','text-transform':'uppercase'});
					if (Browser.Engine.trident){	//For IE centering
						fx.start({	'width':136,'height':200,'opacity': 1, 'background-color': '#117C22','margin-top':(window.getScrollHeight().toInt()-5)/3,'margin-left':(window.getScrollWidth().toInt()-136)/2	}).chain(function(){fxC.start({'opacity': 1});	 (function(){this.showImage(nextimg,nextid)}.bind(this)).delay(250)	}.bind(this))
					}else{	//Others really browsers
						fx.start({'width':136,'height':200,'opacity': 1, 'background-color': '#117C22'}).chain(function(){fxC.start({'opacity': 1});	 (function(){this.showImage(nextimg,nextid)}.bind(this)).delay(200) }.bind(this))
					}
		}.bind(this));

	},
	
	prev:function(img,i){
		var imgs = $$("#" + this.options.list + " li a img");
		var titles = this.options.titles;
		var alts = this.options.alts;
		var counter = this.options.counter;
		
		var nextimg;
		var nextid=i.toInt() - 1;
		if (nextid == -1){			nextid = imgs.length - 1;		}
		imgs.each(function(el,j){if (j==nextid){nextimg = el;}		});
		
		var fx = new Fx.Morph('overlayContent', {duration: 800});	var fxC = new Fx.Morph('contentContainer', {duration: 800});
		var fxcl = new Fx.Morph('btnClose', {duration:600, wait:true});	var fxnx = new Fx.Morph('btnNext', {duration: 500, wait:true});	var fxpr = new Fx.Morph('btnPrev', {duration: 500, wait:true});	var fximg = new Fx.Morph('imgtemp', {duration: 500});			
		if (counter){	
			var fxcounter = new Fx.Morph('counter', {duration: 500});
			fxcounter.start({'top':0,'opacity': 0,'height':0,'background-color':'#FFF'});
		}
		if (titles){
			var fxtitle = new Fx.Morph('fxtitle', {duration: 'normal'});
			fxtitle.start({'top':0,'opacity': 0});
		}
		if (alts){
			var fxdesc = new Fx.Morph('fxdesc', {duration: 'normal'});
			fxdesc.start({'bottom':0,'opacity': 0});
		}
		fxnx.start({'top':0,'right':0,'opacity': 0});fxpr.start({'top':0,'right':0,'opacity': 0});fxcl.start({'top':0,'left':0,'opacity': 0});						
		fximg.start({'opacity': 0}).chain(function(){
					$("btnClose").destroy(this);
					$("btnNext").destroy(this);
					$("btnPrev").destroy(this);
					$("imgtemp").destroy(this);
					if (counter){$("counter").destroy(this);}
					if (titles){$("fxtitle").destroy(this);}
					if (alts){$("fxdesc").destroy(this);}					
					$("contentContainer").set({"html":"<img src='images/logo.png' width='136' height:='159' /><h2 id='waittext'>Aguarde...</h2>","opacity":0});
					$$("#contentContainer img").setStyles({'margin':'0 auto'});$("waittext").setStyles({'color':'#FFF','padding':'13px 10px','text-align':'center','font-size':'7pt','font-family':'Lucida Sans Unicode, Lucida Sans, Lucida Grande, Verdana, Arial, Helvetica, sans-serif','font-weight':'normal','letter-spacing':'2px','text-transform':'uppercase'});
					if (Browser.Engine.trident){	//For IE centering
						fx.start({	'width':136,'height':200,'opacity': 1, 'background-color': '#117C22','margin-top':(window.getScrollHeight().toInt()-5)/3,'margin-left':(window.getScrollWidth().toInt()-136)/2	}).chain(function(){fxC.start({'opacity': 1});	 (function(){this.showImage(nextimg,nextid)}.bind(this)).delay(200)	}.bind(this))
					}else{	//Others really browsers
						fx.start({'width':136,'height':200,'opacity': 1, 'background-color': '#117C22'}).chain(function(){fxC.start({'opacity': 1});	 (function(){this.showImage(nextimg,nextid)}.bind(this)).delay(200) }.bind(this))
					}
		}.bind(this))
	},
	
	clos:function(){
		var titles = this.options.titles;
		var alts = this.options.alts;
		var counter = this.options.counter;

		var fxcl = new Fx.Morph('btnClose', {duration:600});	var fxnx = new Fx.Morph('btnNext', {duration: 500});	
		var fxpr = new Fx.Morph('btnPrev', {duration: 500});	var fximg = new Fx.Morph('imgtemp', {duration: 500});	
		var fx = new Fx.Morph('overlay', {duration: 'long'});	
		var fx2 = new Fx.Morph('overlayContent', {duration: 500});
		var fximg = new Fx.Morph('imgtemp', {duration: 'short'});
		
		if (counter){	
			var fxcounter = new Fx.Morph('counter', {duration: 500});
			fxcounter.start({'top':0,'opacity': 0,'height':0,'background-color':'#FFF'});
		}
		if (titles){
			var fxtitle = new Fx.Morph('fxtitle', {duration: 'normal'});
			fxtitle.start({'top':0,'opacity': 0});
		}
		if (alts){
			var fxdesc = new Fx.Morph('fxdesc', {duration: 'normal'});
			fxdesc.start({'bottom':0,'opacity': 0});
		}
		
		fximg.start({'opacity': 0}).chain(function(){
				$("imgtemp").destroy(this)
					fxnx.start({'top':0,'right':0,'opacity': 0});
					fxpr.start({'top':0,'right':0,'opacity': 0});
					fxcl.start({'top':0,'left':0,'opacity': 0}).chain(function(){
					//	$("overlayContent").setStyle("overflow","hidden");
					//	$(document.body).setStyle("overflow","hidden");
					fx2.start({'width':800,'height':0,'opacity': 0, 'background-color': '#FFF'}).chain(function(){	$("overlayContent").destroy(this);fx.start({	'opacity': [0], 'background-color': ["#FFF"]  }).chain(function(){	$("overlay").destroy(this)	});})
					});
				
		});
	}
	
});
fxGallery.implement(new Options, new Events);