class Logo {


	constructor() {
		
 	 
 		this.Visible=false
		this.offSet=0
		this.img = document.createElement('IMG');
 		
		this.img.onload = this.comp
		this.menu=false
		this.img.src = "images/logo.png";
		this.botom = 0
		this.ratio = 1
	}
	
 
  
	comp=()=>{
		this.Show()
	}
	
  
	Show= (menu=false) => {
		
		this.menu=menu
 		
		this.offSet = menu ? $( window ).height()*0.3 : 0
		 
		gsap.to($( "#pxs_logo" ),0.5,{top: ($( window ).height()-$("#pxs_logo").height())/2-this.offSet/2 })
		var logotop = ($( window ).height()-$("#pxs_logo").height())/2-this.offSet/2 
		var ratio =     $( window ).width()  / 580
		if(ratio >1){ratio=1}
		this.botom=($("#pxs_logo").height()*ratio) + (($("#pxs_logo").height()-($("#pxs_logo").height()*ratio))/2) + logotop
	 
		$(window).on('resize',  this.resized );
		if( this.Visible){
 			
			return
		}
		$( "#pxs_logo" ).remove()
		var elmnt = $(' <div id="pxs_logo"><canvas id="c" width="480" height="240"></canvas></div>');
		$( "body" ).append(elmnt)
		
		this.canvas = document.getElementById('c');
		this.ctx = this.canvas.getContext('2d');
		
		
		$("#pxs_logo").css({position:"absolute",width:480})
		 
		this.Visible=true
 		this.ctx.clearRect(0, 0,480, 240); 
		$("#pxs_logo").show();
  		this.everyTime();
		this.logoint=setInterval(this.everyTime, 70);
 		this.resized()
		$ViewPort()
		
		gsap.to($('body'),0.5,{background:"#000000"})
 	};
	
	resized=( )=>{
		 var logotop = ($( window ).height()-$("#pxs_logo").height())/2-this.offSet/2 
		$("#pxs_logo").css({ left: ($( window ).width()-$("#pxs_logo").width())/2 });
		$("#pxs_logo").css({ top:logotop });
		
 		
 		
		var ratio =     $( window ).width()  / 580
		
		if(ratio >1){ratio=1}
		if(ratio<1){ 
			$("#pxs_logo").css({transform: 'scale('+ratio+')', 'transform-origin': '50% 50%'  })
 		}
		
		this.ratio=ratio
		
		this.botom=($("#pxs_logo").height()*ratio) + (($("#pxs_logo").height()-($("#pxs_logo").height()*ratio))/2) + logotop
		
 	}
  
	 everyTime = () =>{
 
 		for(var i=0; i<18; i++){  
			this.scratch();
		}
 	}
 


	 

	Hide= () =>{
		this.botom = 0
		if(!this.Visible){return}
		this.Visible=false
  		clearInterval(  this.logoint);
		$("#pxs_logo").fadeOut();
		setTimeout(this.Closed,500)
		$(window).off('resize',  this.resized );
		this.botom=0
		gsap.to($('body'),0.5,{background:"#0a0a0a"})
		
	}
	
	Closed= () => {
		$("#pxs_logo").remove()
	}



		
	scratch= () => {
 		this.ctx.save();

		var rx =0
		var ry =this.randomNumber(0,240)

		var XY  = [{x:rx, y:ry}];
		XY[1] = {x:480, y:ry+1};

		 
		 var XY  = [{x:this.randomNumber(0,480), y:this.randomNumber(0,240)}];
			XY[1] = {x:this.randomNumber(0,480), y:this.randomNumber(0,240)};
			
			
		this.ctx.beginPath();




		this.ctx.moveTo(XY[0].x,XY[0].y);
		this.ctx.lineTo(XY[1].x,XY[1].y);
		this.ctx.lineTo(XY[1].x+1   ,XY[1].y );
		this.ctx.lineTo(XY[0].x+1,XY[0].y );
		this.ctx.closePath();
		this.ctx.fill();
		 



		this.ctx.clip();
		this.ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height, 0, 0, this.canvas.width, this.canvas.height);
		this.ctx.restore();

	}
		
	randomNumber=  (min, max) =>{
		return Math.floor(Math.random()*(max-min+1)+min);  
	}
	
 
		
		
		
}	




class Loading {


	constructor() {
 		var ldng = $('<div id="main_loader_cont" class="main_loader_cont_landscape"><div id="main_loader_text">0%</div></div>');
 		$( "body" ).append(ldng)
		
		
 		var loader = $('<div id="loader-cont" ><div id="loader_bar"></div></div>');
 		$( "#main_loader_cont" ).append(loader)
		
		
		
 		//$(window).resize(  this.resized );
		//this.resized()
		this.count=0
		 var rnd="?i="+Math.random()
		
		this.scripts=[  
			'css/loaded.css'+rnd,
			'js/lang-ui.js'+rnd,
			'css/jquery.mCustomScrollbar.css',
 			'css/pannellum.css'+rnd,						
			'js/jquery-ui.js',
			'css/video-js.css',						
			'js/jquery.mobile-events.min.js',
			'css/jquery-ui.css',
 			'js/pannellum.js',
 			'js/video.min.js',
			'js/web3.min.js',
			'js/html5-qrcode.min.js',
			'js/elements.js'+rnd,
			'js/artistprofile.js'+rnd,
			'js/arapp.js'+rnd,
			'js/lines.js',
			'js/events.js'+rnd,
			'js/collectibles.js'+rnd,
			'js/artifacts.js'+rnd,
			'js/pgallery.js'+rnd,
			'js/thegallery.js'+rnd,
			'js/container.js'+rnd,
			'js/settings.js'+rnd,
			'js/chainsettings.js',
			'js/menu.js'+rnd,
			'js/chain.js'+rnd,
 			'js/viewer360.js'+rnd,
			'js/jquery.mCustomScrollbar.concat.min.js',
 			'images/menu.svg' ,
  			'images/collectibleback.jpg' ,
 			'images/icons/facebook.png' ,
 			'images/icons/opensea.png' ,
			'images/icons/instagram.png' ,
			'images/icons/youtube.png' ,
			'images/icons/website.png' ,
			'images/icons/time.png' ,
			'images/icons/tiktok.png' ,
			'images/icons/twitter.png' ,
			'images/copy.png' ,
			'images/link.png' ,
			'images/icons/artifacts.png' ,
			'images/icons/360.png' ,
			'images/icons/gallery.png' ,
			'images/dia-xronos.png' 

			
			]
		this.resized()
	}
	
	resized=( )=>{
		
	 
 
		$("#main_loader_cont").css({width:$Logo.ratio* 192})
		$("#main_loader_cont").css({ left: (($( window ).width()-$("#main_loader_cont").width())/2)  });
		$("#main_loader_cont").css({ top:  $Logo.botom-(30 *$Logo.ratio ) });
		
		//$("#loadingplanet").css({left:($( window ).width()-$( "#loadingplanet" ).width())/2})
		//$("#loadingplanet").css({top:($( window ).height()-$( "#loadingplanet" ).height())/2})
	}
	
	LoadingStarting= async() => {
		console.log("LoadingScriptsStarting")
 		
		$("#main_loader_cont").fadeIn('slow');
		//start load files
		$("#main_loader_text").text('0%')
		this.resized()
		
		
		var URL = window.location.search.substring(1)
		var page = getURLobject(URL) 
		
		var path= "php/data.php" 
		var rs = await this.LoadContenet(path,null,'json' )
		if(rs.status=='error'){
			window.location.reload()
		}else{
			delete rs.status
			$Data=rs
			
		}
		
		if(page.hasOwnProperty('exhibition')){
			var path= "php/exhibition.php?tag="+page.exhibition
			var rs = await this.LoadContenet(path,null,'json' )
			if(rs.status=='error'){
				//NewPage("AR Planets | " ,"?p=menu" )
			}else{
				rs.status
				var arr = Object.keys(rs)
				for(var i=0; i<arr.length; i++){
					$Data.exhibitions[page.exhibition][arr[i]]=rs[arr[i]]
				}
				 
			}
			
		}
	 
		 
		 
 		  for(var i=0; i<this.scripts.length; i++){
		 
			  await this.LoadFile(this.scripts[i],'find',this.Percent)
			  this.count++
			  
		  }
  		  this.LoadingComplete()
 		
	}
	
	LoadFile= async (file, addto='body',progress=null ) => {
		 
			var tp=''
			var rnd=''
			
			if(file.split("?").length>1){
				var t= file.split("?") 
				
				file =t[0]
				rnd = "?"+t[1]
  				tp = file.split(".")[file.split(".").length-1]
			}else{
				tp = file.split(".")[file.split(".").length-1]
			}
			 
			
		 
			if(tp=="js"){
				var  scrpt = document.createElement('script');
				scrpt.type = "application/javascript";
				scrpt.innerHTML = await this.LoadContenet(file,progress, 'text',rnd)
				if(addto=='find'){addto='body'}
				$( addto ).append(scrpt)
 				
			}
			 
			if(tp=="css"){
 				var  lnk = document.createElement('link');
				lnk.rel  = 'stylesheet';
				lnk.type = 'text/css';
				lnk.href = file+rnd;
				//lnk.innerHTML = await this.LoadContenet(file,progress, 'text', rnd)
				if(addto=='find'){addto='head'}
				$( addto ).append(lnk)
 			}
			
			
			if(tp=="svg"){
				 var nm =file.split("/").reverse()[0]
				 var data = await this.LoadContenet(file,progress, 'text', rnd)
 				$SVGS[nm]=data;
				
			}
			
			
			if(tp=="jpg" || tp=="jpeg" || tp=="png"){
				var img = new Image();
				await img.load(file, this.Percent);
				
			}
			 
			return(true)
		 
	}
	
	LoadContenet= async (file,progress=null,type='text',rand='') => {
		return new Promise((resolve, reject)=>{
			
		if(rand==''){ //let cached
  			$.ajax({
				url :file,
				dataType: type,
				success : resolve,
				error : function (){resolve('error')},
				progress: progress
			});
		}else{
  			$.ajax({
				url :'php/loadfile.php',
 				data:{url:'../'+file, rnd:Math.random()},
				success : resolve,
				error : function (){resolve('error')},
				progress: progress,
				cache: false
			});
			
		}
		
			
			
			
 		})
	}

 
	
	 
	
	Percent= (e) => {
		
		var mainpcnt = ((this.count/(this.scripts.length))*99)
		var toadd = (((this.count+1)/(this.scripts.length))*99)-mainpcnt
		var curPcnt = (e.loaded / e.total)
		if(curPcnt==Infinity){curPcnt=0}
		var pcnt = mainpcnt+(curPcnt*toadd)
		
		
		 
		 
		if(pcnt==0){pcnt=1}
		 
		$("#main_loader_text").text( pcnt.toFixed(0)+"%")
		$("#loader_bar").animate({ width: pcnt.toFixed(0) +"%"   },{duration:1500, queue:false});
		
		var scle = (0.4 * (pcnt/100))+0.15
		 
		//gsap.to($("#loadingplanet"),5,{  scale:scle })
		//$("#loadingplanet").css({transform: 'scale('+scle+')', 'transform-origin': '50% 50%'  })
		
		
	 
	}
	
 
	
	
	
	 LoadingComplete= ( ) => {
 
		var pcnt = ((this.count/ (this.scripts.length ))*100)
		if(pcnt==0){pcnt=1}
		$("#main_loader_text").text(pcnt.toFixed(0)+"%")
		$("#main_loader_bar").animate({ width:  (pcnt+1)*2.5  },{duration:1500, queue:false});
		 
		 setTimeout(this.Hide,800)
		 setTimeout($App.LoadingScriptsComplete,1500)
 
	}
	
	Hide= () => {
 		$("#main_loader_cont").fadeOut('slow');
		setTimeout(this.HideNow,2500)
	}
	
	HideNow= () => {
		//console.log("DestroyNow")
		$("#load-result").fadeIn('slow');
		$("#main_loader_cont").remove()
	 
  	}
	
}