var stylecss = "<style>"+
	"@keyframes loadinganimate{from {-webkit-transform: rotatey(0deg);-o-transform: rotatey(0deg);-ms-transform: rotatey(0deg);-moz-transform: rotatey(0deg);transform: rotatey(0deg);}to {-webkit-transform: rotatey(-180deg);-o-transform: rotatey(-180deg);-ms-transform: rotatey(-180deg);-moz-transform: rotatey(-180deg);transform: rotatey(-180deg);}}"+
	"@-webkit-keyframes loadinganimate{from {-webkit-transform: rotatey(0deg);-o-transform: rotatey(0deg);-ms-transform: rotatey(0deg);-moz-transform: rotatey(0deg);transform: rotatey(0deg);}to {-webkit-transform: rotatey(-180deg);-o-transform: rotatey(-180deg);-ms-transform: rotatey(-180deg);-moz-transform: rotatey(-180deg);transform: rotatey(-180deg);}}"+
	".loadingrun{-webkit-animation : loadinganimate 1.2s infinite;animation : loadinganimate 1.2s infinite;}</style>";
$("body").append(stylecss);

window.waitforloading = true;
var loadingjs = function(){
	this.initconfig();
	this.inithtml();
	this.initcss();
	this.startloading();
	
	this.onresize();
	var self = this;
	$(window).resize(function(){
		self.onresize();
	});
	
	window.settimeout(function(){window.waitforloading = false;},250);
}

loadingjs.prototype = {
	
	inithtml : function(){
		this.stop = false;
		this.loadimageurl = "<svg t=\"1525916222299\" class=\"icon\" style=\"\" viewbox=\"130 0 800 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2478\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"49\" height=\"56\"><defs><style type=\"text/css\"></style></defs><path d=\"m835.55027 48.761905c876.805122 48.761905 910.222223 81.441158 910.222223 121.753604l910.222223 902.095c910.222223 902.095 910.222223 942.409011 876.805 975.238095l113.777778 975.238095 113.777778 24.380952 88.888889 48.761905 835.55027 48.761905zm64 0 64 24.380952 64 1024l960 1024c835.55027 1024 904.277615 1024 960 969.325498l960 54.49204c960 54.49204 904.277615 0 835.55027 0l88.888889 0 64 0z\" p-id=\"2479\"></path><path d=\"m775.164361 219.428572c788.910114 219.428572 800.05325 208.512847 800.05325 195.047619 800.05325 181.582391 788.910114 170.666667 775.164361 170.666667l263.111111 170.666667c249.365357 170.666667 238.222222 181.582391 238.222222 195.047619 238.222222 208.512847 249.365357 219.428572 263.111111 219.428572l775.164361 219.428572z\" p-id=\"2481\"></path><path d=\"m775.164361 365.714285c788.910114 365.714285 800.05325 354.798562 800.05325 341.333333 800.05325 327.868105 788.910114 316.952382 775.164361 316.952382l263.111111 316.952382c249.365357 316.952382 238.222222 327.868105 238.222222 341.333333 238.222222 354.798562 249.365357 365.714285 263.111111 365.714285l775.164361 365.714285z\" p-id=\"2482\"></path><path d=\"m775.164361 536.380951c788.910114 536.380951 800.05325 525.465229 800.05325 512 800.05325 498.534771 788.910114 487.619049 775.164361 487.619049l263.111111 487.619049c249.365357 487.619049 238.222222 498.534771 238.222222 512 238.222222 525.465229 249.365357 536.380951 263.111111 536.380951l775.164361 536.380951z\" p-id=\"2483\"></path></svg>";
		this.instance = $("<div></div>");
		this.image = $("<img src='" + this.loadingpicture + "'/>");
		this.title = $("<p></p>");
		
		if(this.loadingpicture) this.instance.append(this.image);

		this.initanimationhtml();

		this.instance.append(this.title);
		$("body").append(this.instance);
	},

	initanimationhtml : function(){

		this.loadbox = $("<div></div>");
		var img1 = $(this.loadimageurl);
		var img2 = $(this.loadimageurl);	
		this.img3 = $(this.loadimageurl);
		this.img3.attr("class", "loadingrun");

		this.loadbox.css({
			"position":"relative",
			"perspective":"200px",
			"-webkit-transform-style":"preserve-3d",
			"-o-transform-style":"preserve-3d",
			"-ms-transform-style":"preserve-3d",
			"-moz-transform-style":"preserve-3d",
			"transform-style":"preserve-3d"
		});

		this.img3.css({
			"position" : "absolute" ,
			"left" : "50%" ,
			"z-index" : "-1" ,
			"-webkit-transform-origin" : "0 50%",
			"-o-transform-origin" : "0 50%",
			"-ms-transform-origin" : "0 50%",
			"-moz-transform-origin" : "0 50%",
			"transform-origin" : "0 50%",
			"fill" : this.loadingcaptioncolor
		});

		img2.css({
			"position" : "absolute" ,
			"left" : "-50%" ,
			"-webkit-transform":"rotatey(180deg)",
			"-o-transform":"rotatey(180deg)",
			"-ms-transform":"rotatey(180deg)",
			"-moz-transform":"rotatey(180deg)",
			"transform":"rotatey(180deg)",
			"fill" : this.loadingcaptioncolor
		});
		
		img1.css({
			"position" : "absolute" ,
			"left" : "50%",
			"fill" : this.loadingcaptioncolor
		});

		this.loadbox.append(img1).append(img2).append(this.img3);
		this.instance.append(this.loadbox);
	},

	initconfig : function(){
		  this.loadingcaption, this.loadingcaptioncolor, this.loadingpicture;
		  try{
		  	this.loadingcaption = bookconfig.loadingcaption ? bookconfig.loadingcaption : "loading";
		  	this.loadingcaptioncolor = bookconfig.loadingcaptioncolor ? bookconfig.loadingcaptioncolor : "#dddddd";
		  	this.loadingbackground = bookconfig.loadingbackground ? bookconfig.loadingbackground : "#1f2232";
		  	this.loadingpicture = bookconfig.loadingpicture ? bookconfig.loadingpicture : "";
		  }catch(err){
		  	this.loadingcaption = "loading";
		  	this.loadingcaptioncolor = "#bdbdbd";
		  	this.loadingbackground = "#1f2233";
		  	this.loadingpicture = "";
		  }
	},
	
	startloading : function(){
		this.title.text($(document).attr("title"));
	},
	
	destroy : function(){
		this.img3.attr("class", "");
		$("body>style").html("");
		this.instance.remove();
		this.image.attr("src", "");
		$("body").css({"background-color" : ""});
	},
	
	initcss : function(){

		$("html").css({
			"margin" : 0,
			"padding" : 0,
			"width" : "100%",
			"height" : "100%"
		});
		$("body").css({
			"margin" : 0,
			"padding" : 0,
			"width" : "100%",
			"height" : "100%",
			"position" : "fixed",
			"background-color" : this.loadingbackground
		});
		this.instance.css({
			"width" : "100%",
			"height" : "100%",
			"color" : this.loadingcaptioncolor,
			"text-align" : "center",
			"vertical-align" : "middle",
			"font-family" : "tahoma",
		    "position" : "relative",

		});

		this.image.css({
			"position" : "absolute",
			"bottom" : "75%",
			"left" : "50%",
			"-webkit-transform" : "translate(-50% , 50%)",
		    "-moz-transform" : "translate(-50% , 50%)",
		    "-ms-transform" : "translate(-50% , 50%)",
		    "-o-transform" : "translate(-50% , 50%)",
			"transform" : "translate(-50% , 50%)",
			"margin-bottom" : "28px",
			"max-width" : "40%",
			"max-height" : "30%"
		});
		
		if(window.innerheight <= 300) this.image.hide();
		
		var titletran = "translate(-50%, 16px)";
		var loadingboxtran = "translate(-50% , -56px)";
		
		// if(this.loadingpicture) {
			// var titletran = "translate(-50%, 40px)";
			// var loadingboxtran = "translate(-50% , -50%)";
		// }

		this.title.css({
			"font-family":"arial",
		  	"font-size" : "24px",
		  	"position" : "absolute",
		  	"top" : "50%",
		  	"left" : "50%",
		  	"-webkit-transform" : titletran,
		    "-moz-transform" : titletran,
		    "-ms-transform" : titletran,
		    "-o-transform" : titletran,
			"transform" : titletran,
		  	"margin" : 0,
		  	"padding" : 0
		});

		this.loadbox.css({
			"position" : "absolute",
			"width" : "49px",
			"height" : "56px",
			"left" : "50%",
			"top" : "50%",
			"-webkit-transform" : loadingboxtran,
		    "-moz-transform" : loadingboxtran,
		    "-ms-transform" : loadingboxtran,
		    "-o-transform" : loadingboxtran,
			"transform" : loadingboxtran,
		  	"padding" : 0
		});

	},
	
	onresize : function(){}

}

var jsloadingbar = new loadingjs();