var hiding;
var showing;
var currentHash = false;
var routingIntervalID;
//var baseUri = "http://localhost:14871/"
var baseUri = "http://www.jackatherton.com/"
var css1;
var css2;
var style;
var switchingStyles = true;
var loadingArea;
var shifters;
function startRouting() {
    routingIntervalID = setInterval(checkHashChanges, 50);
}

function stopRouting() {
    clearInterval(routingIntervalID);
}

function checkHashChanges() {
    var a = document.location.hash.replace("#!/", "");
    if (a == currentHash) {
        return;
    }
    stopRouting();
    hiding = currentHash;
    currentHash = a;
    reRoute();
}

function reRoute() {
    // get the new page location
    // move the sliders
    showing = currentHash;
    if (hiding) {
        clearWheel()
    } else {
        loadCSS()
    }
}

function loadCSS() {
    new Request({
        url: "../css/" + showing + ".css",
        method: "get",
        onSuccess: function (c) {
            switchingStyles ? style = css1 : style = css2;
            switchingStyles = !switchingStyles;
            Browser.ie ? (style.styleSheet.cssText = c) : style.set("html", c);
            var d = [];
            var a = [];
            c.replace(/url\((.+)\)/g, function () {
                d.push(arguments[1].replace(/^('|")(.+)('|")$/, "$2"))
            });
            for (var b = 0; b < d.length; b++) {
                a.push(new Element("img", {
                    "data-loadsrc": d[b],
                    style: "position: absolute; top: 0; left: 0;"
                }).addEvent("load", e).inject(loadingArea))
            }
            for (var b = 0; b < d.length; b++) {
                a[b].store("next", a[b + 1] || false)
            }
            a[0].set("src", a[0].get("data-loadsrc"));

            function e(f) {
                (function () {
                    f.target.retrieve("next") && f.target.retrieve("next").set("src", f.target.retrieve("next").get("data-loadsrc"));
                    if (!f.target.retrieve("next")) {
                        loadInPage()
                    }
                }).delay(50)
            }
        }
    }).send()
}

function loadInPage() {
    new Request.HTML({
        url: "/Pages/" + showing,
        onComplete: function (c, a, d, b) {
            if (!hiding) {
                new Element("div", {
                    id: showing,
                    "class": "page"
                }).setStyles({
                    position: "absolute",
                    width: "100%",
                    "margin-left": "0"
                }).inject($(document.body)).set("html", d);
                reReadyUp()
            } else {
                if (Browser.Platform.name == "ios") {
                    new Element("div", {
                        id: showing,
                        "class": "page"
                    }).inject($(hiding), "after").set("html", d)
                } else {
                    new Element("div", {
                        id: showing,
                        "class": "page"
                    }).setStyles({
                        position: "absolute",
                        width: "100%",
                        "margin-left": $(hiding).getSize().x,
                        overflow: "hidden"
                    }).inject($(hiding), "after").set("html", d)
                }
                switchPages()
            }
        }
    }).get();
    startRouting();
}

function resetScroll() {
    scrollDocument = new Fx.Scroll(window, {
        duration: document.body.getScroll().y * 1.5,
        transition: Fx.Transitions.Quint.easeInOut,
        wheelStops: false,
        onComplete: createLittleLoada.bind(window, loadCSS)
    }).toTop()
}

function reReadyUp() {
    new Fx.Scroll(window).set(0, 0);
    if (!hiding) {
        delayBasedOnInitOrTransition = 6000;
        (function () {
            showSite()
        }).delay(5000)
    } else {
        delayBasedOnInitOrTransition = 2000
    }

    siteDetails = new Element("div", {
        id: "jackInfo",            
        html: "<h1>Jack Atherton.com</h1><p>Welcome to Jack Atherton.com.</p><p>Jack is a Nottingham based Drummer proficient in all styles and available for both live and studio session work. For more details contact Jack by clicking the link below.</p><p><a href=\"mailto:jdrum@jackatherton.com\">Contact Jack</a></p>"
    }).setStyles({
        height: 150,
        width: 300,
        position: "absolute",
        "z-index": "2",
        "margin-top": -75,
        "margin-left": 0,
        "color": "White",
        "background-color": "Black",
        "padding": 15,
        top: "75%",
        left: "10%",
        opacity: 0
    }).inject(document.body);
    $("jackInfo").set("tween", {
        duration: 1500,
        transition: Fx.Transitions.Quint.easeIn,
        unit: "%",
        property: "opacity"
    });

    LoadFonts();

    setTimeout(function () { $("jackInfo").tween.delay(600, $("jackInfo"), ["opacity", "1"]) }, 4000);
}

function switchPages() {
    var a = $$("#" + showing + " #bar");
    if (Browser.Platform.name != "ios") {
        $(showing).set("tween", {
            duration: 1200,
            transition: Fx.Transitions.Quint.easeInOut
        }).tween.delay(0, $(showing), ["margin-left", "0"]);
        a.setStyles({
            top: -112
        }).set("tween", {
            duration: 400,
            transition: Fx.Transitions.Quint.easeInOut
        }).tween.delay(1200, a, ["top", "-20"])
    } else {
        a.setStyles({
            top: -20
        })
    }
    if (Browser.Platform.name == "ios") {
        (function () {
            $$("#" + hiding + " > *").each(function (c, b) {
                if (c.get("id") == undefined || c.get("id") == "littleLoada") {
                    return
                } else {
                    c.destroy()
                }
            });
            $$("#" + hiding + " > *").setStyles({
                webkitTransition: "opacity 0s linear",
                opacity: 0.01
            });
            (function () {
                $(hiding).destroy()
            }).delay(700)
        }).delay(2400)
    } else {
        $(hiding).setStyle("overflow", "hidden").set("tween", {
            duration: 1200,
            transition: Fx.Transitions.Quint.easeInOut,
            onComplete: function (b) {
                b.destroy()
            }
        }).tween.delay(0, $(hiding), ["margin-left", -$(hiding).getSize().x])
    }
    reReadyUp()
}

function showSite() {
    if (Browser.Platform.name == "ios") {
        $("bigLoadaLogo").setStyles({
            webkitTransition: "opacity .3s linear",
            opacity: 0
        });
        $("bigLoadaSpinner").setStyles({
            webkitTransition: "opacity .3s linear",
            opacity: 0
        });
        $("bigLoadaBox").set("morph", {
            duration: 500
        }).morph({
            transform: ["scale(0)"]
        }).setStyles({
            webkitTransition: "opacity .5s linear",
            opacity: 0
        });
        (function () {
            $("bigLoada").setStyles({
                webkitTransition: "opacity .5s linear",
                opacity: 0
            })
        }).delay(200)
    } else {
        $("bigLoadaLogo").set("morph", {
            duration: 300
        }).morph({
            opacity: 0
        });
        $("bigLoadaSpinner").set("tween", {
            duration: 300
        }).tween("opacity", 0);
        $("bigLoadaBox").set("morph", {
            duration: 1500
        }).morph({
            opacity: 0,
            transform: ["scale(0)"]
        });
        $("bigLoada").set("morph", {
            duration: 500
        }).morph.delay(1000, $("bigLoada"), [{
            opacity: 0
        }])
    } (function () {
        Browser.ie8 ? $("bigLoada").empty().dispose() : $("bigLoada").destroy();
        startWheel()
    }).delay(1500)
}
function clearWheel() {
    window.addEvent("mousewheel", stopWheel)
}
function stopWheel(a) {
    a.stop()
}
function startWheel() {
    window.removeEvent("mousewheel", stopWheel)
}

function colouredSpinner(d, a) {
    var c = {
        lines: 16,
        length: 0,
        width: 5,
        radius: 20,
        color: a,
        speed: 1,
        trail: 60,
        shadow: false
    };
    var b = new Spinner(c).spin($(d))
}

function setbigLoada() {
    bigLoadaEl = new Element("div", {
        id: "bigLoada"
    }).setStyles({
        height: "100%",
        width: "100%",
        "background-color": "#fff",
        position: "absolute",
        "z-index": "1000",
        top: 0,
        left: 0
    }).inject(document.body);
    bigLoadaSlider = new Element("div", {
        id: "bigLoadaSlider"
    }).setStyles({
        height: "100%",
        width: "100%",
        "background-color": "#000",
        position: "absolute",
        "z-index": "1",
        "opacity": "0",
        left: 0
    }).inject(bigLoadaEl);
    bigLoadaLogo = new Element("img", {
        id: "bigLoadaLogo",
        src: "/images/logo-on-dark.png"
    }).setStyles({
        height: 15,
        width: 156,
        position: "absolute",
        "z-index": "2",
        "margin-top": -67,
        "margin-left": -78,
        top: "50%",
        left: "50%",
        opacity: 0
    }).inject(bigLoadaSlider);
    $("bigLoadaSlider").set("tween", {
        duration: 1500,
        transition: Fx.Transitions.Quint.easeIn,
        unit: "%",
        property: "opacity",
        onComplete: showBigLoada
    });
    if (Browser.Platform.name == "ios") {
        $("bigLoadaSlider").setStyles({
            webkitTransitionDuration: "0",
            "-webkit-backface-visibility": "hidden",
            "-webkit-perspective": "1000",
            webkitTransform: "translate3d(0, -" + (document.body.getHeight()) + "px, 0)",
            "margin-top": 0
        });
        (function () {
            $("bigLoadaSlider").setStyles({
                webkitTransitionDuration: "700ms",
                webkitTransitionTimingFunction: "cubic-bezier(0.33,0.0,0.33,1)",
                webkitTransform: "translate3d(0, 0, 0)"
            })
        }).delay(1000);
        (function () {
            showBigLoada()
        }).delay(2400)
    } else {
        $("bigLoadaSlider").tween.delay(500, $("bigLoadaSlider"), 1)
    }
    $("bigLoadaLogo").set("morph", {
        duration: 500,
        transition: Fx.Transitions.Quint.easeOut,
    });
}

function showBigLoada() {
    setTimeout(function () {$("bigLoadaLogo").morph({
        "margin-top": -57,
        opacity: 1
    });}, 400);
    createBigLoada()
}

function createBigLoada() {
    clearWheel();
    bigLoadaBox = new Element("div", {
        id: "bigLoadaBox",
        style: "position: absolute; z-index: 3; top: 50%; left: 50%; margin: -31px 0 0 -25px; width: 50px; height: 50px; border-radius: 10px; background-color: #000000; opacity: 0;"
    }).setStyles({
        transform: ["scale(1)"]
    }).inject(bigLoadaSlider).set("morph", {
        duration: 700,
        transition: Fx.Transitions.Quint.easeOut
    });
    bigLoadaSpinner = new Element("div", {
        id: "bigLoadaSpinner",
        style: "width: 15px; height: 15px; opacity: 0; margin: 17px 0 0 18px;"
    }).inject(bigLoadaBox).set("tween", {
        duration: 700,
        transition: Fx.Transitions.Quint.easeOut
    });
    var b = {
        lines: 16,
        length: 0,
        width: 3,
        radius: 15,
        color: "#fff",
        speed: 1,
        trail: 60,
        shadow: false
    };
    var a = new Spinner(b).spin(bigLoadaSpinner);
    (function () {
        if (Browser.Platform.name == "ios") {
            (function () {
                $("bigLoadaBox").setStyles({
                    webkitTransition: "opacity .4s linear",
                    opacity: 1
                })
            }).delay(300);
            (function () {
                $("bigLoadaSpinner").setStyles({
                    webkitTransition: "opacity .4s linear",
                    opacity: 1
                })
            }).delay(600)
        } else {
            $("bigLoadaBox").morph.delay(300, $("bigLoadaBox"), [{
                opacity: "1"
            }]);
            $("bigLoadaSpinner").tween.delay(600, $("bigLoadaSpinner"), ["opacity", "1"])
        }
    }).delay(200)
}

window.addEvent("domready", function () {

    // START
    // Check if there is a hash tag, if not we are loading the page up in starting conditions
    if (!document.location.hash) {
        // IF NO HASH TAG
        // create and append the #!/home hash tag
        document.location.href = baseUri + "#!/homepage";
    }
    if (!hiding) {
        setbigLoada()
    }
    loadingArea = new Element("div", {
        style: "display: none;"
    }).inject(document.body);

    css1 = new Element("style", {
        type: "text/css"
    }).inject($(document.head), "bottom");

    css2 = new Element("style", {
        type: "text/css"
    }).inject($(document.head), "bottom");

    $("homepage") && $("homepage").dispose().destroy();

});

window.addEvent("load", function () {
    startRouting();
});