// JavaScript Document
	// ciclebox v01
	// Ailantd & Additive Works 
	// www.ailantd.com & www.additiveworks.com

	// ciclebox()
	//------------------------------------------------------------
	//
	// METODOS
	//------------------------------------------------------------
	//
	//------------------------------------------------------------
	function CCiclebox( oDiv , nLapse , nId )
	{		
		this._nLapse 			= nLapse * 1000 ;	// Scroll speed controler
		this._nSpeed 			= 30 ;		// Scroll speed controler
		this._nId 				= nId ;		// Id
		
		this._oDiv 				= oDiv ;	// Main gallerybox div
		this._oNext;						// Next button div
		this._oPrev;						// Prev button div
		this._oTop;							// Superior div
		this._oBottom;						// Inferior div

		this._voPictures = [] ;				// Picture objects
		
		this._nTopItemId ;					// TopImg
		this._bTransition 		= false ;	// If the set is in transition
		this._oTimertransition ;			// Timer para la animación de transición
		this._oTimerChange ;				// Timer para el cambio de foto
		this._nCurrentAlpha		= 100 ;		// If the set is in transition
		
		var that 				= this ;	// Fix for callbacks
		
		//------------------------------------------
		// METODOS
		//------------------------------------------

		// CREATE
		//
		//-------------------------------------------------
		this.Create = function()
		{
			// RECOPILAR LA INFORMACION Y COMENZAR CARGA DE IMAGENES
			//
			var nMyItem ;
			var vImg = this._oDiv.getElementsByTagName( "div" ) ;
			for ( var i=0 , n=vImg.length ; i<n ; i++ )
			{
				if( vImg[i].getAttribute("data-foam") == 'item' )
				{
					this._voPictures.push( new Image() ) ;
					nMyItem = this._voPictures.length-1 ;
					this._voPictures[nMyItem].loaded = false ;
					this._voPictures[nMyItem].src = vImg[i].getAttribute("data-src") ;
					this._voPictures[nMyItem].onload = function(){ this.loaded = true ; } ;
				}
			}
			// Si no hay imágenes nada de nada
			if( n == 0 ) return ;
			
			// LIMPIAR EL DIV Y CREAR LA NUEVA ESTRUCTURA
			this._oDiv.innerHTML = "" ;

			// ESTABLECER PARÁMETROS INICIALES DE ROTACION AUTOMATICA
			this._nTopItemId = 0 ;
			
			// CREAR BOTTOm
			this._oBottom = document.createElement( "div" ) ;
			this._oBottom.className = "CicleImg_Layer" ;	
			this._oBottom.style.backgroundImage = "url(" + this._voPictures[0].src + ")" ;
			this._oDiv.appendChild( this._oBottom ) ;

			// CREAR TOP
			this._oTop = document.createElement( "div" ) ;
			this._oTop.className = "CicleImg_Layer" ;
			this._oTop.style.backgroundImage = "url(" + this._voPictures[0].src + ")" ;
			this._oDiv.appendChild( this._oTop ) ;
			//this._oTop.onclick = this.GoNext;

			// CREAR PREV
			if( n > 1 ) // SI HAY MAS DE UNA IMAGEN
			{
				this._oPrev = document.createElement( "div" ) ;
				this._oPrev.className = "CicleImg_Left" ;
				this._oDiv.appendChild( this._oPrev ) ;
				this._oPrev.onclick = this.GoPrev;
				
				// CREAR NEXT
				this._oNext = document.createElement( "div" ) ;
				this._oNext.className = "CicleImg_Right" ;
				this._oDiv.appendChild( this._oNext ) ;
				this._oNext.onclick = this.GoNext;
			}
				this._oDiv.style.visibility = "visible";
				
				// START ANIMATION 
				//
				if( this._nLapse != 0 && n > 1 )
					this.AutoCicle() ;
			
		}


		// AUTO CICLE
		//
		//-------------------------------------------------		
		this.AutoCicle = function()
		{
			this._oTimerChange = setTimeout( that.GoNext , ( that._nLapse + that._nSpeed ) ) ;
		}
		
		
		// GO NEXT
		//
		//-------------------------------------------------		
		this.GoNext = function()
		{
			if( !that._bTransition )
			{
				that._nTopItemId = that.getNextId( that._nTopItemId ) ;
				clearTimeout( that._oTimerChange ) ;
				that.ShowImage( that._nTopItemId ) ;
			}
		}

		// GO PREV
		//
		//-------------------------------------------------		
		this.GoPrev = function()
		{
			if( !that._bTransition )
			{
				that._nTopItemId = that.getPrevId( that._nTopItemId );
				clearTimeout( that._oTimerChange ) ;
				that.ShowImage( that._nTopItemId ) ;
			}
		}


		// GET NEXT ID
		//
		//-------------------------------------------------		
		this.getNextId = function( nId )
		{
			if( that.CheckId( nId + 1 ) )
				return nId + 1 ;
			
			return 0 ;
		}

		// GET PREV ID
		//
		//-------------------------------------------------		
		this.getPrevId = function( nId )
		{
			if( that.CheckId( nId - 1 ) )
				return nId - 1 ;
			
			return that._voPictures.length - 1 ;
		}


		// CHECK ID
		//
		//-------------------------------------------------		
		this.CheckId = function( nId )
		{
			if( nId < that._voPictures.length && nId >= 0 )
				return true ;
			
			return false ;
		}


		// SET TRANSPARENCY
		//
		//-------------------------------------------------		
		this.SetOpacity = function( oDiv , nValue )
		{
			oDiv.style.opacity = nValue / 100 ;
			if( nValue > 0.9 ) nValue = 0.9 ; // -> ESTO PARECE SER UN HACK PARA IE cuando las imagenes a fusionar son png con alfa.
			oDiv.style.filter = 'alpha(opacity=' + nValue + ')' ;
		}


		// SHOW IMAGE
		//
		//-------------------------------------------------		
		this.ShowImage = function( nId )
		{
			if( !that._bTransition )
			{
				that._bTransition = true ;
				that._oBottom.style.backgroundImage = "url(" + that._voPictures[ nId ].src + ")" ; 
				that.Transition() ;
			}
		}

		// TRANSITION
		//
		//-------------------------------------------------		
		this.Transition = function()
		{
			var nextAlpha = that._nCurrentAlpha - 5 ;
			if( nextAlpha >= 0 )
			{
				that._nCurrentAlpha = nextAlpha ;
				that.SetOpacity( that._oTop , nextAlpha ) ;
				that._oTimertransition = setTimeout( that.Transition , that._nSpeed ) ;
				return ;
			}
			
			that.EndTransition() ;
			return;
		}

		// END TRANSITION
		//
		//-------------------------------------------------		
		this.EndTransition = function()
		{
			that._oTop.style.backgroundImage = that._oBottom.style.backgroundImage ;
			that.SetOpacity( that._oTop , 100 ) ;
			that._nCurrentAlpha = 100 ;
			that._bTransition = false ;
			if( this._nLapse != 0 )
				this.AutoCicle() ;			
		}
		
		this.Create() ;
	}
	
	
	// Ciclebox Array
	// All Ciclebox detected in the page are stored in this array
	//------------------------------------------------------------
	var vCiclebox = new Array() ;

	// initCiclebox()
	// 
	//------------------------------------------------------------
	function initCiclebox()
	{
		vCiclebox.splice( 0 , vCiclebox.length ) ;
		
		// Create new Scrolls
		if ( !document.getElementsByTagName )
		{
			alert( 'Your browser is not compatible. Update it to newer version.' ) ;
			return ;
		}
		
		var vDivs = document.getElementsByTagName( "div" ) ;
		var vFounds = new Array() ;
		for ( var i=0 , n=vDivs.length ; i<n ; i++ )
		{
			if( vDivs[i].getAttribute("data-foam") == 'cicleImg' )
				vFounds.push( vDivs[i] ) ;
		}
		
		for( var i=0 , n=vFounds.length ; i<n ; i++ )
			vCiclebox[ vCiclebox.length ] = new CCiclebox( vFounds[i] , parseInt( vFounds[i].getAttribute("data-time") ) , vCiclebox.length ) ;
	}
	
	// CicleboxAddLoadEvent()
	// Adds event to window.onload without overwriting currently assigned onload functions.
	// Function found at Simon Willison's weblog - http://simon.incutio.com/
	//------------------------------------------------------------
	function CicleboxAddLoadEvent( func )
	{
		var oldonload = window.onload ;
		if ( typeof window.onload != 'function' )
		{
			window.onload = func ;
		}
		else
		{
			window.onload = function()
			{
				oldonload() ;
				func() ;
			}
		}
	}

	//------------------------------------------------------------
	//CicleboxAddLoadEvent( initCiclebox ) ;	// runs initCiclebox onLoad