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

    $$(".QuestionContainer").each(function(e, i, a) {
        //Add A's and q's 
        var bigQ = new Element('div', {
            'class': 'toggleQ',
            'html': 'Q'
        });
        var SmallA = new Element('div', {
            'class': 'toggleSmallA',
            'html': 'A'
        });
        var ViewAnswer = new Element('div', {
            'class': 'toggleviewanswer',
            'html': 'view answer'
        });
        var CloseAnswer = new Element('div', {
            'class': 'toggleclose',
            'html': 'Close'
        });
        CloseAnswer.setStyle("opacity", "0");

        var bigA = new Element('div', {
            'class': 'toggleanswerA',
            'html': 'A'
        });
        if (e.getFirst(".toggle")) {
            bigQ.inject(e.getFirst(".toggle"));
            SmallA.inject(e.getFirst(".toggle"));
            CloseAnswer.inject(e.getFirst(".toggle"));
            ViewAnswer.inject(e.getFirst(".toggle"));

            bigA.inject(e.getFirst(".toggleanswer"));

            var toggleanswer = e.getFirst(".toggleanswer");
            toggleanswer.store("originalHeight", toggleanswer.getSize().y);
            toggleanswer.setStyle("height", "0px");

            e.addEvent("click", function() {
                ToggleQuestiuonDisplay(e)
            });
            e.addEvent("mouseenter", function() {
                if (!e.retrieve("Showing")) {
                    e.getFirst(".QuestionBackground").setStyle("opacity", "1");
                    e.getFirst(".toggle").getFirst(".toggleQ").setStyle("color", "#231F20");
                }
            });

            e.addEvent("mouseleave", function() {
                if (!e.retrieve("Showing")) {
                    e.getFirst(".QuestionBackground").setStyle("opacity", "0");
                    e.getFirst(".toggle").getFirst(".toggleQ").setStyle("color", "#404041");
                }
            });

            e.getFirst(".QuestionBackground").setStyle("opacity", "0");

            e.store("Showing", false);
        }
    });
});

function ToggleQuestiuonDisplay(element) {

    if (!element.retrieve("Showing")) {
        element.getFirst(".toggle").getFirst(".toggleSmallA").morph({ "opacity": "0" })
        element.getFirst(".toggle").getFirst(".toggleviewanswer").morph({ "opacity": "0" })
        element.getFirst(".toggleanswer").morph({
            "height": element.getFirst(".toggleanswer").retrieve("originalHeight")
        });
        element.store("Showing", true);
        element.getFirst(".QuestionBackground").morph({ "opacity": "1" });
        element.getFirst(".toggle").getFirst(".toggleQ").setStyle("color", "#404041");
        element.getFirst(".toggle").getFirst(".toggleclose").morph({ "opacity": "1" });
    }
    else {
        element.getFirst(".toggle").getFirst(".toggleSmallA").morph({ "opacity": "1" })
        element.getFirst(".toggle").getFirst(".toggleviewanswer").morph({ "opacity": "1" })
        element.getFirst(".toggleanswer").morph({ "height": "0px" });
        element.store("Showing", false);
        element.getFirst(".QuestionBackground").morph({ "opacity": "0" });
        element.getFirst(".toggle").getFirst(".toggleQ").setStyle("color", "#231F20");
        element.getFirst(".toggle").getFirst(".toggleclose").morph({ "opacity": "0" });
    }
}