/*
*	Image Transitions Manager, version 0.1
*	(c) 2007 Ajaxorized.com
*
*	Authors:	Willem Spruijt
*				Martijn de Kuijper
*	Website:	http://www.ajaxorized.com/
*/
/**
 * Modifié par nico pour permettre de lancer automatiquement le changement !
 **/
var cpt = 1;
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);
		}
	}
);

/* The Transition Class */
var Transition = Class.create();
Transition.prototype = {
		compteur:1,
		timeIntervale: 2000,
		textAttente:'',
		id_encour : null,
		
		initialize: function( p_eTarget, p_sImage) {
		
		this.timer = null;
		this.m_eTarget = $( p_eTarget );
		this.m_eTarget.setStyle( { position: 'relative', overflow:'hidden'} );
		this.m_eLoading = 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.
		*/
		    tab = arguments[2];

      // l'image et le lien !				
				var eImage = $(document.createElement( 'img' ));

				eImage.setAttribute( 'src', p_sImage );
				eImage.setAttribute( 'class', 'btnActu1' );
	
				eImage.setStyle({ position: 'absolute', 
                           'left': '0px', 
                           'top': '0px', 
                           'width':'370px', 
                           'height': '202px', 
                           opacity: '0'
                           });
            				
            var eLink1 = $(document.createElement('a'));
            eLink1.setAttribute( 'href', tab[0][4]);
            eLink1.setAttribute( 'id', 'holderImage');
                        
            eLink1.appendChild( eImage );


		 // lien contenant le commentaire
      		var eLink = $(document.createElement('a'));
				eLink.setAttribute( 'class', 'text' );
				eLink.setAttribute( 'id', 'holderComm');
				eLink.setStyle( { 
                              position: 'absolute', 
                              'right': '0', 
                              'bottom': '0', 
                              'color': '#004178', 
                              'text-decoration': 'none', 
                              'line-height': '14px', 
                              'display': 'block', 
                              'width': '350px',                              
                              'background': 'url(/'+lg+'/images/bgTexteActu.png) repeat',                              
                              'padding': '5px 10px'
                              } );
                              
				eLink.setAttribute( 'href', tab[0][4]);
				eLink.update(tab[0][3]);
		
		       // div coin droit
		       var eDiv = $(document.createElement('div'));
             eDiv.setAttribute('id', 'coinDroit');
             eDiv.setStyle({
                     'position': 'absolute', 
                     'right': '0',
                     'top': '0', 
                     'width': '370px', 
                     'height': '202px', 
                     'background': 'transparent url(/'+lg+'/images/coinActus.png) no-repeat right bottom'
             });
                
      		// on colle le tout dans this.m_eTarget 
      		this.m_eTarget.appendChild( eDiv );
            this.m_eTarget.appendChild( eLink1 );	      		
            this.m_eTarget.appendChild( eLink );                        	
				
            this.m_eCurrent = eImage;
				new Effect.Appear( this.m_eCurrent, { duration: 1.5, from: 0.0, to: 1.0 } );
		/*******************************************************************************************/

		if(typeof arguments[2]=='undefined')
		{
			// loop through all anchors. REFACTORED: pretty nifty eh :)
			$$('a.classElImage').each( function( eAnchor ) {
				var sRel = String( eAnchor.getAttribute( 'rel' ) );			
				if ( eAnchor.getAttribute( 'href' ) && ( sRel.toLowerCase().match( 'transition' ) ) ) {
					eAnchor.m_eRef = this;
					eAnchor.onclick = function () { g_eTransition.loadImage(this); return false; }
				}
			});
		}
		else
		{

         if(typeof arguments[3] != 'undefined') 
         {
            this.timeIntervale = arguments[3]; 
         }
			var interval= 10000;
			var newinterval=0;
			var i=1;
			var tab = arguments[2];

			tab.each(function(eAnchor){
				var sRel = eAnchor[1];
				var objLightbox = $(document.createElement("a"));
				objLightbox.setAttribute('href',eAnchor[0]);
				objLightbox.setAttribute('rel',eAnchor[1]);
				objLightbox.setAttribute('id','ElImage'+i);
				objLightbox.setAttribute('title',eAnchor[3]);
				objLightbox.setAttribute('link',eAnchor[4]);
				objLightbox.setAttribute('class','classElImage');
				//objLightbox.style.display = 'none';
            // modif propre à GFE
            textli = eAnchor[2].replace('&lt;','<').replace('&gt;','>').replace('&lt;','<').replace('&gt;','>');
            objLightbox.update(textli);

				var objList = $(document.createElement("li"));
				objList.setAttribute('id','btnActu'+i);
            objList.appendChild(objLightbox);
            $('tabs').appendChild(objList);
            
				eAnchor = objLightbox;

				eAnchor.m_eRef = this;
				i++;
			});
         
         // gestion des liens :)
			$$('a.classElImage').each( function( eAnchor ) {
				var sRel = String( eAnchor.getAttribute( 'rel' ) );			
				if ( eAnchor.getAttribute( 'href' ) && ( sRel.toLowerCase().match( 'transition' ) ) ) {
					eAnchor.m_eRef = this;
					eAnchor.onclick = function () { 
                        
                         window.location.href = eAnchor.getAttribute( 'link' );
                        return false; 
                        }
                  eAnchor.onmouseover = function() {                                          
                        if(!$('holderImage').hasClassName(this.id))
                        {
                           g_eTransition.getTimer(tab);           
                           g_eTransition.loadImage(this);              
                        }
                        return false; 
                  } 
                                                           
				}
			});
			

         if($('ElImage1'))$('ElImage1').addClassName('active-tab');
		   // si on quitte le bloc Actualite on relance l'intervale A developper un jour ou on a le temps !

          // on lance les transition avec le timer
			g_eTransition.getTimer(tab);
          
		}

	},
	getTimer: function(tab){

      if(this.timer==null)
         this.timer = setInterval(function(){g_eTransition.loadImageDynamic(tab);},this.timeIntervale);
      else{
         clearInterval(this.timer);
      if($('ElImage'+this.compteur))$('ElImage'+this.compteur).removeClassName('active-tab');      
      //  this.timer = null;
      }               
   },
	loadImageDynamic: function(tab){

      elNum = tab.length;		
      this.compteur++;
      precedent = this.compteur-1;
		if(this.compteur>elNum){
         precedent = elNum;
         this.compteur = 1;
      }
		if($('ElImage'+precedent)) $('ElImage'+precedent).removeClassName('active-tab');
      if($('ElImage'+this.compteur)) $('ElImage'+this.compteur).addClassName('active-tab');
		this.loadImage($('ElImage'+this.compteur));
	},
	// modification pour permetre de creer le block image et texte
	loadImage: function( p_eAnchor ) {
		// Get transition type and image url.
		var sTransition = /^transition\[(.+)\]$/.exec( p_eAnchor.getAttribute( 'rel' ) )[ 1 ];
		var sImage = p_eAnchor.getAttribute( 'href' );
		var sClass = p_eAnchor.getAttribute( 'id' );
		var sCommentaire = p_eAnchor.getAttribute( 'title' );
		var eImage = $(document.createElement( 'img' ));
		
		eImage.setAttribute( 'src', sImage );
		eImage.setAttribute( 'alt', sCommentaire );
		$(eImage).setStyle( { position: 'absolute', left: '0px', top: '0px', width:'370px', height: '202px', opacity: '0' } );

      $('holderImage').setAttribute('class',sClass);
      $('holderImage').href = p_eAnchor.getAttribute( 'link' );            
		$('holderImage').appendChild( eImage );

		$('holderComm').href = p_eAnchor.getAttribute( 'link' );
		$('holderComm').update(sCommentaire);

		if(!eImage.isLoaded()) {
			/* The image is not yet loaded, so fix the loading div */
			/* Creation d'un layer pour montrer le chargement en cours*/
			this.m_eLoading = $(document.createElement( 'div' ));
			$( this.m_eLoading ).setStyle( { position: 'absolute', left: '5px',  bottom: '5px', color: '#FFF' } );
			this.m_eLoading.appendChild( document.createTextNode( this.textAttente ) );
         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 ) {
		p_oObj.element.remove();
	}
}