let side_bar=document.getElementById('side_bar')
let width=side_bar.clientWidth
side_bar.style.left=-(width)+'px'

function animate({timing,draw,duration,on_done}){
	start = performance.now();
	requestAnimationFrame(function animate(time){
		let timeFraction = (time - start) / duration;
		if (timeFraction>1) timeFraction = 1;
		let progress = timing(timeFraction)
		draw(progress);
		if(timeFraction<1){
			requestAnimationFrame(animate)
		} else {
			if(typeof on_done === "function") on_done();
		}
	})
}

function open_sb(){
	side_bar.style.opacity="1";
	animate({
		duration: 400,
		timing(timeFraction){
			return Math.pow(timeFraction,2);
		},
		draw(progress){
			side_bar.style.left=(progress*width)-width+'px'
		}
	});
}
function close_sb(){
	animate({
		duration: 800,
		timing(timeFraction){
			return Math.pow(timeFraction, 2);
		},
		draw(progress){
			document.getElementById("side_bar").style.left=((1-progress)*width)-width+'px'
		},
		on_done(){
			side_bar.style.opacity="0";
		}
	});
}


fetch('assets/fetch-content-list.php?type=partial',{
	cache:'no-cache'
})
.then(response=>response.json())
.then(res=>{
	let folder='assets/'
	input_str=''
	for(i in res){
		if(res[i].match(/.png|.PNG|.jpg|.JPG|.jpeg|.JPEG|.gif|.GIF/g)){
			input_str+='<div class="image_box_img_wrap"><div><img src="'+folder+res[i]+'" /></div></div>'
		} else if(res[i].match(/.mp4|.MP4/g)){
			input_str+='<div class="image_box_img_wrap">'+
		      	'<video class="videos" width="100%" height="100%'+
		      	'" controls><source src=\''+folder+res[i]+
		      	'\' type="video/mp4"></video></div>';
		}
	}
	
	document.getElementById('image_box_container').innerHTML=input_str
})

image_container_child_width=0
image_container_child_count=0
function set_size(){
	let img_wrap=document.getElementsByClassName("image_box_img_wrap")
	image_container_child_width=img_wrap[0].clientWidth
	image_container_child_count=img_wrap.length-1
	setTimeout(set_size,1000)
}
setTimeout(set_size,1000)


last_index=0
last_pos=0
index=0
move_image_box_locked=false
function move_image_box(dir){
	if(move_image_box_locked==false){
		move_image_box_locked=true
		let direction=''
		let sub=''
		if(dir=="+"){
			index=index+1
			direction=''
			sub=''
		} else {
			direction='1-'
			index-=1
			sub='-'+image_container_child_width
		}
		animate({
			duration:800,
			timing(TF){
				return Math.pow(TF,2);
			},
			draw(Prog){
				document.getElementById("image_box_container").scrollLeft=(eval(direction+Prog)*(image_container_child_width))+eval(last_pos+sub)+(10*index)
			},
			on_done(){
				last_pos=(image_container_child_width*index);
				if(index<0){ 
					index=0; 
					last_pos=0; 
				}
				if(index>image_container_child_count){ index=image_container_child_count; last_pos=(image_container_child_width*index); }
				move_image_box_locked=false
			}
		})
	}
	
}