/*
*	Image Slider, imagen rotativa con efectos de transicion
* 	Basado en Scriptaculous+prototype
* 	Autor: 		Beto Lopez
*	Website:	http://www.phpninja.info/
*	E-mail:		contacto@humbertolopez.info
*	(c) 2009 PhpNinja
* 	                                 __       __
*	 _______  __           _____ __ |__|     |__|
*	|       ||  |--.-----.|     |  |.--.-----.--.-----+
*	|   -   ||     |  _  ||        ||  |     |  |---  |
*	|   ____||__|__|   __||__|_____||__|__|__|  |_____|
*	|__|           |__|    Ingeniería Web    |_/ 
*
*	Junio 2009
*
*	Codigo Original (Transitions Manager) Willem Spruijt, Martijn de Kuijper
*	Website:	http://www.ajaxorized.com/
*
*/

/*	Setup - Modificar aqui */

var delay = 5; // en segundos
var fotos_array = Array('banner2.jpg','banner4.jpg','banner5.jpg','banner21.jpg','banner22.jpg','banner199.jpg','carl.jpg','feos.jpg','rekena.jpg');

var fotos_path ='http://www.dc10barcelona.com/img/banner/'; // carpeta donde estan las fotos
var fotos_width = 810; // ancho imagenes
var fotos_height = 185; // altura imagenes
var divholder = 'banner'; //nombre del div que contendra el slider

/* End Setup */

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}


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 = {
		initialize: function( p_eTarget, p_Path, p_fotos_array, p_Width,p_Height ) {
		this.m_eTarget = $( p_eTarget );
		this.m_eTarget.setStyle( { position: 'relative', overflow:'hidden'} );
		this.m_eLoading = null;
		this.fotos_counter = 2;
		this.fotos_path = p_Path;
		this.fotos_array = p_fotos_array;
		this.width = p_Width;
		this.height= p_Height;
		g_eTransition = this;		
	
		// clear all content of holder.
		//while( this.m_eTarget.hasChildNodes() )
		//	this.m_eTarget.removeChild( this.m_eTarget.firstChild );
				var eImage = document.createElement( 'img' );
				eImage.setAttribute( 'src',this.fotos_path+this.fotos_array[0] );	
				eImage.setAttribute( 'width', p_Width);	
				eImage.setAttribute( 'height', p_Height);									
				this.m_eTarget.appendChild( eImage );		
				this.m_eCurrent = eImage;
				new Effect.Appear( this.m_eCurrent, { duration: 1.5, from: 0.0, to: 1.0 } );
				i = 0;
				while (i < this.fotos_array.length ){	
						MM_preloadImages(this.fotos_path+this.fotos_array[i]);
						i++;
				}
	},

	loadImage: function( sTransition, sImage) {	
		var eImage = document.createElement( 'img' );
		eImage.setAttribute( 'src', this.fotos_path+sImage );
		eImage.setAttribute( 'width', this.width );	
		eImage.setAttribute( 'height', this.height );	
		$(eImage).setStyle( { position: 'absolute', left: '0px', top: '0px', opacity: '0' } );
		this.m_eTarget.appendChild( eImage );
		if(!eImage.isLoaded()) {
			Event.observe( eImage, 'load', this._onLoad.bindAsEventListener( null, this, eImage, sTransition ) );
		} else {
			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} );
			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});
			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});					
			break;
		}	
		this.m_eCurrent = eImage;
	},

	_removeImage: function( p_oObj ) {
		p_oObj.element.remove();
	}
}

function aleatorio(inferior,superior){
    numPosibilidades = superior - inferior
    aleat = Math.random() * numPosibilidades
    aleat = Math.round(aleat)
    return parseInt(inferior) + aleat
} 

function rotate_banner(oTransition){
	m = oTransition.fotos_array;
	MAX_fotos = m.length;
	n = oTransition.fotos_counter;
	if (n > MAX_fotos) {
		n = 1;
		oTransition.fotos_counter = 1;
	}
	path = oTransition.fotos_path;
	num = aleatorio(1,3);

	switch(num){
		case 1:
			trans='slidedown';
		break;
		case 2:
			trans ='slideright';
		break;
		case 3:
			trans ='appear';
		break;
	}
	oTransition.loadImage( trans, m[n-1]);
	oTransition.fotos_counter = n+1 ;
	return false;
}


// Inicializacion del Slider.

	oTransition = new Transition( divholder, fotos_path ,fotos_array,fotos_width,fotos_height );
	try{
		iTimerID = window.setInterval("rotate_banner( oTransition )",delay * 1000);
		} catch(e){
			try {
				intervalID = setInterval("rotate_banner( oTransition )",delay * 1000);
			} catch(E){
			}
	}