let act_clouds = [
	'cloud-01.png',
	'cloud-02.png',
	'cloud-03.png',
	'cloud-04.png',
]


// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
function actusClouds( target, args ){
	target = target || '#actus-clouds'
	args = args || {}
	let mode 			= args.mode 	|| 'random'
	let motion			= args.motion 	|| 'random'
	let transitionTime 	= args.transitionTime || 5	// seconds
	let duration		= args.duration 	  || 25	// seconds
	let durationOff		= args.durationOff 	  || 20	// percentage
	let path = 'img/clouds/'
	
	 
	transitionTime = Math.floor(5 + Math.random()*(10 - 5 + 1))
	duration = Math.floor(40 + Math.random()*(80 - 40 + 1))
	
	
	let motionTypes = ['l-r', 'r-l']
	
	let $clouds = $( target )
	if ( ! $clouds.length ) return;
	if ( ! act_clouds.length ) return;
	
	
	let current = -1;
	let $current,
		$allClouds;
	
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	createClouds()
	setTimeout( start, 3000)
	
	
	
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	function createClouds(){
		$allClouds =
			$('<div id="all-clouds">').appendTo( $clouds )
		act_clouds.forEach((src,idx)=>{
			let slide = $('<img>')
				.addClass('cloud-'+idx)
				.attr('src', path+src)
				.css('opacity', 0)
				.css('transition', `${transitionTime}s opacity, ${duration}s transform linear`)
				.appendTo( $allClouds )
		})
	}
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	function start(){
		new Cloud()
	}
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	function getNext(){
		let next
		if ( mode == 'random' ) {
			next =
				Math.floor(Math.random() * act_clouds.length);
		} else {
			next++
			if (next > act_clouds.length) next = 0
		}
		if (next == current) next = getNext()
		
		current = next
		
		return next;
	}
	
	// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
	function Cloud(){
		let idx = getNext()
		let $slide = $('#all-clouds .cloud-'+idx)
			.clone()
			.appendTo( $clouds )
		
		let scl = Math.floor(8 + Math.random()*(15 - 8 + 1))
		
		// set motion type
		let motionType;
		if ( motion == 'random' )
			motionType = motionTypes[ Math.floor(Math.random() * motionTypes.length) ]
		else motionType = motion
		
		// set motion beginning
		if ( motionType == 'l-r' )
			$slide.css('transform', `scale(${scl/10}) translate3d(-75%,0,0)`)
		if ( motionType == 'r-l' )
			$slide.css('transform', `scale(${scl/10}) translate3d(75%,0,0)`)
		
		
		
		
		// IN
		// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅
		setTimeout(r =>{
			// fade in
			$slide.css('opacity', 0.3)
		}, 50)
		
		
		
		// MOTION
		// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅
		setTimeout(r =>{
			if ( motionType == 'l-r' )
				$slide.css('transform', `scale(${scl/10}) translate3d(75%,0,0)`)
			if ( motionType == 'r-l' )
				$slide.css('transform', `scale(${scl/10}) translate3d(-75%,0,0)`)
		}, 40)

		
		
		// OUT
		// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅
		setTimeout(r =>{
			
			// fade out
			$slide.css('opacity', 0)

			// remove slide
			setTimeout(r =>{
				$slide.remove();
			}, (transitionTime * 1000) + 100 )


		}, (duration - transitionTime) * 1000)
		
		
		
		
		// NEXT
		// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅
		let min = (duration*1000)/4
		let max = (duration*1000)/2
		let nextTime =
			Math.floor(min + Math.random()*(max - min + 1))
		
		setTimeout(r =>{
			
			// next Cloud
			setTimeout(rr =>{
				new Cloud()
			}, 100)
			
		}, nextTime)
		
		
		
	}

	
}





// ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅
actusClouds('#actus-clouds');