function Debug(string){
	$('debugger').innerHTML = string + '<br>' + $('debugger').innerHTML;
}

var Carrousel = function( properties ) {
	
	if( properties )
		this.carrouselProperties = properties;
	else {
		this.carrouselProperties = {
			startColor: '#FFFFFF', 
			endColor: '#FF0000',
			duration: 4000,
			transition: 1000,
			startPos: 0,
			endPos: -80,
			opacity: 0.7
		};
	}
	this.stageObjectsArray = [];
	this.currentStageObject = 1;
	this.totalStageObjects = $('StageCarrousel').getElementsByTagName('ul').length;
	this.previousStageObject = 0;//this.totalStageObjects - 1;
	this.hasStarted = true;
	this.intervalTimer = null;
	for( var i = 0; i < this.totalStageObjects; i++ ) {
		this.stageObjectsArray.push( [$('Carrousel-' + ( i + 1 ) ), $('CarrouselInfo-' + ( i + 1 ) ), $('CarrouselSelector-' + ( i + 1 ) ) ] );
		this.stageObjectsArray[i][0].set('tween', {duration: this.carrouselProperties.transition, link:'chain'});
		//Inicializamos el info
		this.stageObjectsArray[i][1].set('tween', {duration: this.carrouselProperties.transition, link:'chain'});
	}
	this.RefreshObjects = function() {
		for( var i = 1; i < this.totalStageObjects; i++ ) {
			this.stageObjectsArray[i][0].setStyles({left: 795});
			this.stageObjectsArray[i][1].setStyles({opacity: 0});
		}
	}
	this.RefreshObjects();
	this.MoveForward = function() {
		//Movemos la siguiente foto
		this.stageObjectsArray[this.currentStageObject][0].style.display = 'block';
		this.stageObjectsArray[this.currentStageObject][0].tween('left', 795, 0);
		//Movemos la actualhacia atrás
		
		
		
		
		
		
		
		
		
		
		
		
		
		//Modificación para que no se vean los espacios negros
		this.stageObjectsArray[this.previousStageObject][0].tween('left', 0, -795)//.tween('display', 'none');//.tween('opacity', 1, 0).tween('left', 795).tween('opacity', 0, 1);
		//Cambiamos los iconos de navegación
		if( this.carrouselProperties.endBkg )
			this.stageObjectsArray[this.previousStageObject][2].src = this.carrouselProperties.startBkg;
		else {
			if( this.carrouselProperties.startColor == 'transparent')
				this.stageObjectsArray[this.previousStageObject][2].style.backgroundColor = 'transparent';
			else
				this.stageObjectsArray[this.previousStageObject][2].tween('background-color', this.carrouselProperties.endColor, this.carrouselProperties.startColor);
		}
		//Movemos el layer de info
		//Modificación para que no desaparezcan los cuadros de Info	
		this.stageObjectsArray[this.previousStageObject][1].tween( 'opacity', this.carrouselProperties.opacity, 0 )//.tween('display', 'none');
		this.stageObjectsArray[this.currentStageObject][1].style.display = 'block';
		this.stageObjectsArray[this.currentStageObject][1].tween( 'opacity', 0, this.carrouselProperties.opacity);
		//Cambiamos fondo de selectores
		if( this.carrouselProperties.startBkg )
			this.stageObjectsArray[this.currentStageObject][2].src = this.carrouselProperties.endBkg;
		else {
			if( this.carrouselProperties.startColor == 'transparent')
				this.stageObjectsArray[this.currentStageObject][2].style.backgroundColor = this.carrouselProperties.endColor;
			else
				this.stageObjectsArray[this.currentStageObject][2].tween('background-color', this.carrouselProperties.startColor, this.carrouselProperties.endColor);
		}
		//Movemos los contadores
		( this.previousStageObject == (this.totalStageObjects - 1) ) ? this.previousStageObject = 0 : this.previousStageObject++;
		( this.currentStageObject < (this.totalStageObjects - 1) ) ? this.currentStageObject++ : this.currentStageObject = 0;
		//alert(this.currentStageObject);
		if( $('superlog') )
			$('superlog').innerHTML = 'Previous:' + this.previousStageObject + ' Current:' + this.currentStageObject;
	}
	this.MoveBackwards = function() {
		
		//-->Debug('Back (previousStageObject): ' + this.previousStageObject);
		
		( this.previousStageObject == 0 ) ? this.previousStageObject = this.totalStageObjects - 1 : this.previousStageObject--;
		( this.currentStageObject > 0 ) ? this.currentStageObject-- : this.currentStageObject = this.totalStageObjects - 1;
		if( $('superlog') )
			$('superlog').innerHTML = 'Previous:' + this.previousStageObject + ' Current:' + this.currentStageObject;
		//Movemos la siguiente foto
		this.stageObjectsArray[this.currentStageObject][0].tween('left', 0, 795)//.tween('display', 'none');
		//Movemos la actualhacia atrás
		this.stageObjectsArray[this.previousStageObject][0].style.display = 'block';
		
		//Modificación para que no se vean los espacios negros		
		this.stageObjectsArray[this.previousStageObject][0].tween('left', -795, 0);//.tween('opacity', 1, 0).tween('left', 795).tween('opacity', 0, 1);	
		//Movemos el layer de info
		this.stageObjectsArray[this.previousStageObject][1].style.display = 'block';
		this.stageObjectsArray[this.previousStageObject][1].tween( 'opacity', 0, this.carrouselProperties.opacity );
		
		//Modificación para que no desaparezcan los cuadros de Info
		this.stageObjectsArray[this.currentStageObject][1].tween( 'opacity', this.carrouselProperties.opacity, 0  )//.tween('display', 'none');
		//Cambamos botones
		if( this.carrouselProperties.startBkg )
			this.stageObjectsArray[this.previousStageObject][2].src = this.carrouselProperties.endBkg;
		else
			this.stageObjectsArray[this.currentStageObject][2].tween('background-color', this.carrouselProperties.startColor, this.carrouselProperties.endColor);
		if( this.carrouselProperties.endBkg )
			this.stageObjectsArray[this.currentStageObject][2].src = this.carrouselProperties.startBkg;	
		else
			this.stageObjectsArray[this.previousStageObject][2].tween('background-color', this.carrouselProperties.endColor, this.carrouselProperties.startColor);
	}
	this.GoTo = function( index ) {
		clearInterval(this.intervalTimer);
		//Movemos el cursor a la posición deseada
		this.currentStageObject = index;
		( this.currentStageObject == 0 ) ? this.previousStageObject = this.totalStageObjects - 1 : this.previousStageObject = this.currentStageObject - 1;
		this.RefreshObjects();
		this.stageObjectsArray[this.currentStageObject][0].style.display = 'block';
		this.stageObjectsArray[this.currentStageObject][0].setStyles({left: 0});
		this.stageObjectsArray[this.currentStageObject][1].style.display = 'block';
		this.stageObjectsArray[this.currentStageObject][1].setStyles({opacity: this.carrouselProperties.opacity});
		//Limpia botones de navegación
		for( i = 0; i < this.totalStageObjects; i++) {
			if( this.carrouselProperties.startBkg )
				this.stageObjectsArray[i][2].src = this.carrouselProperties.startBkg;
			else
				this.stageObjectsArray[i][2].src = this.carrouselProperties.startColor;
		}
		//Marcamos el botón actual
		if( this.carrouselProperties.startBkg )
			this.stageObjectsArray[this.currentStageObject][2].src = this.carrouselProperties.endBkg;
		else {
			if( this.carrouselProperties.startColor == 'transparent')
				this.stageObjectsArray[this.currentStageObject][2].style.backgroundColor = this.carrouselProperties.endColor;
			else
				this.stageObjectsArray[this.currentStageObject][2].tween('background-color', this.carrouselProperties.startColor, this.carrouselProperties.endColor);
		}
		( this.previousStageObject == (this.totalStageObjects - 1) ) ? this.previousStageObject = 0 : this.previousStageObject++;
		( this.currentStageObject < (this.totalStageObjects - 1) ) ? this.currentStageObject++ : this.currentStageObject = 0;
		this.intervalTimer = setInterval( 'myCarrousel.MoveForward()', this.carrouselProperties.duration );
	}
	this.Next = function() {
		clearInterval(this.intervalTimer);
		this.Start();
	}
	this.Previous = function() {
		clearInterval(this.intervalTimer);
		//this.stageObjectsArray[this.previousStageObject][0].style.display = 'none';
		this.MoveBackwards();
		this.intervalTimer = setInterval( 'myCarrousel.MoveForward()', this.carrouselProperties.duration );
	}
	this.Start = function() {
		this.MoveForward();
		this.intervalTimer = setInterval( 'myCarrousel.MoveForward()', this.carrouselProperties.duration);
	}
}