var loadingjs = function(){
    this.initconfig();
    this.inithtml();
    this.initcss();
    this.startloading();

    this.onresize();
    var self = this;
    $(window).resize(function(){
        self.onresize();
    });
}

loadingjs.prototype = {

    inithtml : function(){
        this.instance = $("<div class='loading'></div>");
        this.image = $("<img src='/magazine/public/read/" + this.loadingpicture + "'/>");
        this.title = $("<p></p>");
        this.loadingprogress = $("<p></p>");

        if(this.loadingpicture) this.instance.append(this.image);
        this.instance.append(this.title);
        this.instance.append(this.loadingprogress);
        $("body").append(this.instance);
    },

    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 = "#dddddd";
            this.loadingbackground = "#1f2232";
            this.loadingpicture = "";
        }
    },

    startloading : function(){
        this.title.text($(document).attr("title"));
        this.loadingprogress.text(this.loadingcaption + "...");

        var self = this, iindex = 0;
        this.timer = window.setinterval(function(){
            iindex ++;
            var icount = iindex % 3;

            switch(icount){
                case 0:{self.loadingprogress.text(self.loadingcaption + ".  ");break;}
                case 1:{self.loadingprogress.text(self.loadingcaption + ".. ");break;}
                case 2:{self.loadingprogress.text(self.loadingcaption + "...");break;}
                default:break;
            }
        }, 2000);
    },

    destroy : function(){
        window.clearinterval(this.timer);
        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" : "absolute",
            "background-color" : this.loadingbackground
        });
        this.instance.css({
            "max-width" : "100%",
            "max-height" : "100%",
            "color" : this.loadingcaptioncolor,
            "text-align" : "center",
            "vertical-align" : "middle",
            "font-family" : "tahoma",
            "position" : "relative",
            "top": "50%",
            "-webkit-transform" : "translatey(-50%)",
            "-moz-transform" : "translatey(-50%)",
            "-ms-transform" : "translatey(-50%)",
            "-o-transform" : "translatey(-50%)",
            "transform" : "translatey(-50%)"
        });
        this.image.css({
            "max-width" : "100%",
            "max-height" : "50%"
        });
        this.title.css({
            "font-size" : "24px",
            "text-shadow" : "0 0 5px #8c97cb, 0 0 10px #8c97cb, 0 0 15px #8c97cb"
        });
        this.loadingprogress.css({
            "font-size" : "12px"
        });
    },

    onresize : function(){
        var windowwidth = $("body").width();
        var windowheight = $("body").height();
        this.image.css({
            "max-width" : windowwidth + "px",
            "max-height" : windowheight / 2 + "px"
        });
    }
}

var jsloadingbar = new loadingjs();