var ImagePreloader = require('./ImagePreloader/');
var Overlay = require('./Overlay/');

function QueryLoader(element, options) {
    'use strict';
    this.element = element;
    this.options = options;
    this.done = false;
    this.maxTimeout = null;

    //The default options
    this.defaultOptions = {
        onComplete: function() {},
        backgroundColor: "#000",
        barColor: "#fff",
        overlayId: 'qLoverlay',
        percentageId: 'qLpercentage',
        barHeight: 1,
        percentage: false,
        deepSearch: true,
        minimumTime: 300,
        maxTime: 10000,
        fadeOutTime: 1000
    };

    //children
    this.overlay = null;
    this.preloader = null;

    if (element !== null) {
        this.init();
    }
}

QueryLoader.prototype.init = function () {
    'use strict';
    this.options = this.extend(this.defaultOptions, this.options);

    if (typeof this.element !== "undefined") {
        this.createOverlay();
        this.removeTempOverlay();
        this.createPreloader();
        this.startMaxTimeout();
    }
};

QueryLoader.prototype.extend = function (base, adding) {
    'use strict';
    if (typeof base === "undefined") {
        base = {};
    }

    for (var property in adding) {
        if (adding.hasOwnProperty(property)) {
            base[property] = adding[property];
        }
    }

    return base;
};

QueryLoader.prototype.startMaxTimeout = function () {
    "use strict";
    this.maxTimeout = window.setTimeout(this.doneLoading.bind(this), this.options.maxTime);
};

QueryLoader.prototype.createOverlay = function () {
    'use strict';
    this.overlay = new Overlay(this.element);
    this.overlay.idName = this.options.overlayId;
    this.overlay.percentageId = this.options.percentageId;
    this.overlay.backgroundColor = this.options.backgroundColor;
    this.overlay.barHeight = this.options.barHeight;
    this.overlay.barColor = this.options.barColor;
    this.overlay.showPercentage = this.options.percentage;
    this.overlay.fadeOutTime = this.options.fadeOutTime;

    if (typeof this.element !== "undefined") {
        this.overlay.init();
    }
};

QueryLoader.prototype.removeTempOverlay = function () {
    if (QueryLoader.tempOverlay) {
        QueryLoader.tempOverlay.parent.removeChild(QueryLoader.tempOverlay);
    }
};

QueryLoader.createTempOverlay = function () {
    window.setTimeout(function () {
        QueryLoader.tempOverlay = document.createElement("div");
        QueryLoader.tempOverlay.style.position = "fixed";
        QueryLoader.tempOverlay.style.width = "100%";
        QueryLoader.tempOverlay.style.height = "100%";
        QueryLoader.tempOverlay.style.zIndex = "9999";
        QueryLoader.tempOverlay.style.backgroundColor = "#000";
        QueryLoader.tempOverlay.style.left = "0";
        QueryLoader.tempOverlay.style.top = "0";
        document.getElementsByTagName('body')[0].appendChild(QueryLoader.tempOverlay);
    }, 0);
};

QueryLoader.prototype.createPreloader = function () {
    'use strict';
    this.preloader = new ImagePreloader(this);
    this.preloader.deepSearch = this.options.deepSearch;

    window.setTimeout(function () { this.preloader.findAndPreload(this.element); }.bind(this), 100);
};

QueryLoader.prototype.updateProgress = function (done, total) {
    "use strict";
    this.overlay.updateProgress(((done / total) * 100), this.options.minimumTime);

    if (done === total && this.done === false) {
        window.clearTimeout(this.maxTimeout);
        window.setTimeout(this.doneLoading.bind(this), this.options.minimumTime);
    }
};

QueryLoader.prototype.doneLoading = function () {
    "use strict";
    window.clearTimeout(this.maxTimeout);
    this.done = true;

    this.overlay.element.style.opacity = 0;

    window.setTimeout(this.destroy.bind(this), this.options.fadeOutTime);
};

QueryLoader.prototype.destroy = function () {
    "use strict";
    this.overlay.remove();

    this.options.onComplete();
};

module.exports = QueryLoader;
@@ -2202,24 +2202,120 @@
     
-if (QueryLoader.
+window.setTimeout(function () %7B%0A        var tempOverlay = document.getElementById(%22qLtempOverlay%22);%0A        if (
 temp
@@ -2329,36 +2329,28 @@
 ) %7B%0A        
-QueryLoader.
+    
 tempOverlay.
@@ -2355,16 +2355,20 @@
 y.parent
+Node
 .removeC
@@ -2368,36 +2368,24 @@
 removeChild(
-QueryLoader.
 tempOverlay)
@@ -2386,25 +2386,40 @@
 erlay);%0A    
-%7D
+    %7D%0A    %7D, 0);
 %0A%7D;%0A%0AQueryLo
@@ -2497,36 +2497,28 @@
 ) %7B%0A        
-QueryLoader.
+var 
 tempOverlay 
@@ -2554,36 +2554,24 @@
 %22);%0A        
-QueryLoader.
 tempOverlay.
@@ -2600,36 +2600,24 @@
 d%22;%0A        
-QueryLoader.
 tempOverlay.
@@ -2642,36 +2642,24 @@
 %25%22;%0A        
-QueryLoader.
 tempOverlay.
@@ -2685,36 +2685,24 @@
 %25%22;%0A        
-QueryLoader.
 tempOverlay.
@@ -2728,36 +2728,24 @@
 9%22;%0A        
-QueryLoader.
 tempOverlay.
@@ -2780,36 +2780,24 @@
 0%22;%0A        
-QueryLoader.
 tempOverlay.
@@ -2822,28 +2822,16 @@
         
-QueryLoader.
 tempOver
@@ -2843,32 +2843,89 @@
 tyle.top = %220%22;%0A
+        tempOverlay.setAttribute(%22id%22, %22qLtempOverlay%22);%0A
         document
@@ -2969,28 +2969,16 @@
 ndChild(
-QueryLoader.
 tempOver

remove the temp overlay