/*
*	Image Transitions Manager, version 0.1
*	(c) 2007 Ajaxorized.com
*
*	Authors:	Willem Spruijt
*				Martijn de Kuijper
*	Website:	http://www.ajaxorized.com/
*/

Element.addMethods( {
		bringToFront : function(p_eElement) {
			p_eElement.setStyle({zIndex:'2'});
			return p_eElement;
		},
		sendToBack : function(p_eElement) {
			p_eElement.setStyle({zIndex:'1'});
			return p_eElement;
		},
		getHeight : function (p_eElement) {
			return p_eElement.offsetHeight;	
		},
		getWidth : function (p_eElement) {
			return p_eElement.offsetWidth;	
		},		
		getCenterHeight : function(p_eElement) {	
			return (p_eElement.offsetHeight/2);
		},
		getCenterWidth : function(p_eElement) {
			return (p_eElement.offsetWidth/2);
		},
		isLoaded : function (p_eElement) {
			return (p_eElement.complete);
		},
		loadAnchors : function () {
			var a = 0;
			//document.getElementsByClassName('linkImagem').each( function( eAnchor ) {
			$(document.body).select('.linkImagem').each( function( eAnchor ) {
				var sRel = String( eAnchor.getAttribute( 'rel' ) );			
				if ( eAnchor.getAttribute( 'href' ) && ( sRel.toLowerCase().match( 'transition' ) ) ) {
					a++;
					var linkAtivo = 'link02';
					var linkNormal = 'link04';
					var imagemAmpliada = $('imagemAmpliar');
					eAnchor.removeClassName(linkAtivo);
					eAnchor.m_eRef = this;
					eAnchor.ondblclick = function () { 
						return false;
					}
					eAnchor.onclick = function () { 
						var blocoAmpliada = $('blocoImagemAmpliada');
						if(blocoAmpliada){
							//var imagensAmpliadas = blocoAmpliada.getElementsByClassName('removerImagem');
							var imagensAmpliadas = blocoAmpliada.select('.removerImagem');
							if(imagensAmpliadas.size() > 1){
								return false;
							}
						}
						
						//var linkClicado = document.getElementsByClassName('linkImagem').indexOf(eAnchor);
						var linkClicado = $(document.body).select('.linkImagem').indexOf(eAnchor);
						g_eTransition.execucao = linkClicado+1;
						//document.getElementsByClassName(linkAtivo).each( function (el){el.addClassName(linkNormal);el.removeClassName(linkAtivo);});
						//document.getElementsByClassName('linkImagem').each( function (el){el.onclick = function(){return false;}});
						$(document.body).select('.'+linkAtivo).each( function (el){el.addClassName(linkNormal);el.removeClassName(linkAtivo);});
						$(document.body).select('.linkImagem').each( function (el){el.onclick = function(){return false;}});
						eAnchor.removeClassName(linkNormal);
						eAnchor.addClassName(linkAtivo);
						g_eTransition._restartCarrosel();
						g_eTransition.loadImage(this); 
						return false; 
					}
					if(imagemAmpliada){
						if(eAnchor.getAttribute('href') == imagemAmpliada.getAttribute('src')){
							eAnchor.addClassName(linkAtivo);
						}
					}
					if(!eAnchor.hasClassName(linkAtivo) && !eAnchor.hasClassName(linkNormal)){
						eAnchor.addClassName(linkNormal);
					}
				}
			});
		}
		
	}
);

/* The Transition Class */
var Transition = Class.create();
Transition.prototype = {
		initialize: function( p_eTarget, p_sImage ) {
		this.m_eTarget = $( p_eTarget );
		this.m_eTarget.setStyle( { position: 'relative', overflow:'hidden'} );
		this.m_eLoading = null;
		this.execucao = 1;
		this.qtdeCiclos = 0;
		this.looping = null;

		/* Define the refence to this object globally so we can use it within the scope of the anchors */
		g_eTransition = this;		
	
		// clear all content of holder.
		while( this.m_eTarget.hasChildNodes() )
			this.m_eTarget.removeChild( this.m_eTarget.firstChild );
		
		/*///////////////////////////////////////////////////////////////////////////////////////////
		*	TEMPORARY WAY TO ADD FIRST IMAGE!!
		*	Should be added by the loadImage function, but this expects an anchor as parameter.
		*/
				var eImage = document.createElement( 'img' );
				eImage.setAttribute( 'id', 'imagemAmpliar' );	
				eImage.setAttribute( 'src', p_sImage );	
				this.m_eTarget.appendChild( eImage );		
				this.m_eCurrent = eImage;
				new Effect.Appear( this.m_eCurrent, { duration: 1.5, from: 0.0, to: 1.0 } );
		/*******************************************************************************************/

		// loop through all anchors. REFACTORED: pretty nifty eh :)
		/*$$('a').each( function( eAnchor ) {
			var sRel = String( eAnchor.getAttribute( 'rel' ) );			
			if ( eAnchor.getAttribute( 'href' ) && ( sRel.toLowerCase().match( 'transition' ) ) ) {
				eAnchor.removeClassName('link02');
				eAnchor.m_eRef = this;
				eAnchor.onclick = function () { 
					document.getElementsByClassName('link02').each( function (el){el.addClassName('link04');el.removeClassName('link02');});
					document.getElementsByClassName('linkImagem').each( function (el){el.setStyle({border:'1px solid red'}); el.onclick = function(){alert('não');return false;}});
					eAnchor.removeClassName('link04');
					eAnchor.addClassName('link02');
					g_eTransition.loadImage(this); return false; 
				}
			}
		});*/
		Element.loadAnchors();
		
		this._carrosel();
			
	},

	loadImage: function( p_eAnchor ) {
		
		//var imagensRemover = this.m_eTarget.getElementsByClassName('removerImagem');
		var imagensRemover = this.m_eTarget.select('.removerImagem');
		imagensRemover.each(function(imgRemover) {
			imgRemover.remove();
		});
		
		//var imagensAmpliadas = this.m_eTarget.getElementsByClassName('imgCapa');
		var imagensAmpliadas = this.m_eTarget.select('.imgCapa');
		if(imagensAmpliadas.size() >= 2){
			return false;
		}
	
		this.m_eTarget.setStyle( { position: 'relative', overflow:'hidden'} );
		// Get transition type and image url.
		var sTransition = /^transition\[(.+)\]$/.exec( p_eAnchor.getAttribute( 'rel' ) )[ 1 ];
		var sImage = p_eAnchor.getAttribute( 'href' );
		
		
		
		var eImage = document.createElement( 'img' );
		eImage.setAttribute( 'src', sImage );	
		eImage.setAttribute( 'id', 'imagemAmpliar' );	
		eImage.setAttribute( 'class', 'imgCapa' );	
		$(eImage).setStyle( { position: 'absolute', left: '0px', top: '0px', opacity: '0' } );
		this.m_eTarget.appendChild( eImage );
		if(!eImage.isLoaded()) {
			g_eTransition._stopCarrosel();
			/* The image is not yet loaded, so fix the loading div */
			this.m_eLoading = document.createElement( 'div' );
			$( this.m_eLoading ).setStyle( { position: 'absolute', right: '5px',  bottom: '5px', color: '#FFF' } );
			this.m_eLoading.appendChild( document.createTextNode( 'Carregando...' ) );
			this.m_eTarget.appendChild( this.m_eLoading );
			Event.observe( eImage, 'load', this._onLoad.bindAsEventListener( null, this, eImage, sTransition ) );
		} else {
			/* The image is already loaded*/
			this.m_eLoading = null;
			this._transImage(eImage, sTransition);
		}
	},
	
	_onLoad: function( p_eEvent, p_oRef, p_eImage, p_sTransition ) {
		p_oRef._transImage( p_eImage, p_sTransition );
	},

	_transImage : function(eImage, sTransition) {
		if(this.m_eLoading != null) this.m_eLoading.remove();
		/* ADDED: switch on different transitions, use the naming conventions of scriptaculous (appear, fade, etc).?) */
		switch(sTransition) {
			case 'appear':
				new Effect.Appear( eImage, { duration: 1.5, from: 0.0, to: 1.0} );
				new Effect.Appear( this.m_eCurrent, { duration: 1.5, from: 1.0, to: 0.0, afterFinish: this._removeImage } );
			break;
			case 'switch':
				new Effect.Appear( eImage, { duration: 0, from: 0.0, to: 1.0 } );
				new Effect.Appear( this.m_eCurrent, { duration: 0, from: 1.0, to: 0.0, afterFinish: this._removeImage } );				
			break;
			case 'blinddown':
				$(this.m_eCurrent).setStyle({display:'block', opacity:'1'}).sendToBack();
				l_oTargetDim = {left:0,top:0, width:($(eImage).offsetWidth), height:($(eImage).offsetHeight)};
				$(eImage).setStyle({display:'block', opacity:'1',height:'1px',width:($(eImage).offsetWidth-1)+'px'}).bringToFront(); // this is a must for the blinddown effect
				g_eOldImage = $(this.m_eCurrent);
				$(eImage).morph('height:'+l_oTargetDim.height+'px;width:'+l_oTargetDim.width+'px;top:'+l_oTargetDim.top+'px;left:'+l_oTargetDim.left+'px', {duration:1, afterFinish : function() { g_eOldImage.remove()}});				
			break;
			case 'grow':
				$(eImage).setStyle({display:'none', opacity:'1'}).bringToFront();
				$(this.m_eCurrent).sendToBack(); 
				new Effect.Grow( eImage, { duration: 1, direction:'center' } );				
				new Effect.Appear( this.m_eCurrent, { duration: 1, afterFinish: this._removeImage } );											
			break;
			case 'shrink':
				$(this.m_eCurrent).bringToFront();
				$(eImage).sendToBack(); 
				$(eImage).setStyle({display:'block', opacity:'1'});
				g_eOldImage = $(this.m_eCurrent);
				new Effect.Shrink( this.m_eCurrent, { duration: 1, afterFinish : function() { g_eOldImage.remove(); }} ); // bug in scriptaculous? When called _removedImage on callback the element is not passed										
			break;		
			case 'switchoff':
				$(this.m_eCurrent).setStyle({display:'block', opacity:'1'}).bringToFront();
				$(eImage).setStyle({display:'block', opacity:'1'}).sendToBack();				
				l_oTargetDim = {left:0,top:$(eImage).getCenterHeight(), width:($(eImage).offsetWidth-1), height:0};
				$(this.m_eCurrent).morph('height:'+l_oTargetDim.height+'px;width:'+l_oTargetDim.width+'px;top:'+l_oTargetDim.top+'px;left:'+l_oTargetDim.left+'px', {duration:1, afterFinish:this._removeImage});
			break;
			case 'slidedown':
				$(this.m_eCurrent).setStyle({display:'block', opacity:'1'}).bringToFront();
				$(eImage).setStyle({top:'-'+eImage.getHeight()+'px', display:'block', opacity:'1'});
				$(eImage).morph('top:0px', {duration:1});				
				$(this.m_eCurrent).morph('top:'+eImage.getHeight()+'px', {duration:1, afterFinish : this._removeImage});
			break;
			case 'slideright':
				$(this.m_eCurrent).setStyle({display:'block', opacity:'1'}).bringToFront();
				$(eImage).setStyle({left:'-'+eImage.getWidth()+'px', display:'block', opacity:'1'});
				$(eImage).morph('left:0px', {duration:1});				
				$(this.m_eCurrent).morph('left:'+eImage.getWidth()+'px', {duration:1, afterFinish : this._removeImage});				
			break;
		}	
		this.m_eCurrent = eImage;
	},

	_removeImage: function( p_oObj ) {
		
		if(Prototype.Browser.Gecko){
			var uag = window.navigator.userAgent; //Ex: Mozilla/5.0 (Windows; U; Windows NT 5.1; pt-BR; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16
			var ind = uag.indexOf('Firefox/'); //Onde achar  a versão do Firefox
			var versao = uag.charAt(ind+8 /* 8 = numero de chars Firefox/*/ ); //O primeiro caracter após a barra será o número da versão
			//Apenas para versoes anteriores a 3
			if(versao < 3){
				//O elemento é ocultado para não piscar após carregar a imagem
				p_oObj.element.style.display = 'none';
				p_oObj.element.addClassName('removerImagem');
			}
			else {
				p_oObj.element.remove();
			}
		}
		else
			p_oObj.element.remove();
			
		$('blocoImagemAmpliada').style.position = '';
		$('imagemAmpliar').style.position = '';
		$('imagemAmpliar').style.left = '';
		$('imagemAmpliar').style.top = '';
		Element.loadAnchors();
		g_eTransition._restartCarrosel();
	},
	
	_carrosel: function(segundos) {
		//Executa a troca de imagens periodicamente
		segundos = 6;
		var intervaloExecucao = segundos; //Segundos
		this.looping = new PeriodicalExecuter(function() {
			executado = false;
			var qtdeImagens = 0;	
			var linkNormal = 'link04';	
			var linkAtivo = 'link02';	
			$$('a').each( function(eAnchor) {
				var sRel = String(eAnchor.getAttribute('rel'));
				if (eAnchor.getAttribute('href') && (sRel.toLowerCase().match('transition'))){
					qtdeImagens++;
					var imagemCorrente = qtdeImagens;
					eAnchor.addClassName(linkNormal);
					eAnchor.removeClassName(linkAtivo);
					if(g_eTransition.qtdeCiclos > 0)
						var imagemExecucao = (g_eTransition.execucao);
					else
						var imagemExecucao = (g_eTransition.execucao+1);
					
					if(imagemExecucao == imagemCorrente){
						//document.getElementsByClassName('linkImagem').each( function (el){el.onclick = function(){return false;}});
						$(document.body).select('.linkImagem').each( function (el){el.onclick = function(){return false;}});
						g_eTransition.loadImage(eAnchor);
						eAnchor.addClassName(linkAtivo);
						eAnchor.removeClassName(linkNormal);
						executado = true;
					}
				}
			});
			if(executado)
				g_eTransition.execucao++;
			else{
				g_eTransition.execucao = 1;
				g_eTransition.qtdeCiclos++;
			}	
		}, intervaloExecucao);
		
	},
	
	_stopCarrosel: function(segundos) {
		if(this.looping){
			this.looping.stop();
		}
	},
	
	_restartCarrosel: function(segundos) {
		if(this.looping){
			this.looping.stop();
		}
		this._carrosel();
	} 
	
}