$(document).ready(function() {
    $("#btnNutrition").click(function() {
        if ($("#nutritionvalue").hasClass("open")) {
            $("#nutritionvalue").animate({
                top: 0
            }, 700);

            $("#nutritionvalue").removeClass("open");
        } else {
            $("#nutritionvalue").animate({
                top: -66
            }, 700);

            $("#nutritionvalue").addClass("open");
        }
    });
});

$(document).ready(function() {
    $("#btnDictionary").click(function() {
        if ($("#keyboard").hasClass("open")) {
            $("#keyboard").animate({
                top: -66
            }, 700);
            $(".bottom").animate({
                height: 97 - 54
            }, 700);

            $("#keyboard").removeClass("open");
        } else {
            $(".bottom").animate({
                height: 97
            }, 700);
            $("#keyboard").animate({
                top: 0
            }, 700);


            $("#keyboard").addClass("open");
        }
    });
});

function openKeyboard() {
    $(".bottom").css("height", "97px");
    $("#keyboard").css("top", "0px");

    $("#keyboard").addClass("open");
}

function openInfo(button, box, block, anchor) {
    var location = Sys.UI.DomElement.getLocation(button);
    var locationBlock = Sys.UI.DomElement.getLocation(block);
    //Henter ut opprinnelige verdier
    var start = $(button).height();
    var middle = $(button).width() / 2;
    var oldheight = $(box).height();
    var oldwidth = $(box).width();
    var justify = 0;

    location.x = location.x - locationBlock.x;
    location.y = location.y - locationBlock.y;

    if (anchor == "bottom") {
        var buttonBounds = Sys.UI.DomElement.getBounds(button);
        var boxBounds = Sys.UI.DomElement.getBounds(box);

        justify = buttonBounds.height - (boxBounds.height);
    }
    // Starter animasjon visning
    $(box).css({
        top: location.y,
        left: (location.x + middle),
        height: 1,
        width: 1
    });

    $(box).animate({
        top: location.y + justify,
        left: (location.x - (oldwidth + 15)),
        height: oldheight,
        width: oldwidth,
        opacity: 1
    }, 700);
    // Pause     

    $(box).animate({
        opacity: 1
    }, 2500);

    // Starter animasjon skjuling         
    $(box).animate({
        top: location.y,
        left: (location.x + middle),
        height: "toggle",
        width: "toggle",
        opacity: 0.2
    }, 500);

    //Setter opprinnelige verdier og klargjør for neste kjøring
    $(box).css({
        height: oldheight,
        width: oldwidth
    });

}

function openInfoWithClose(button, box, block, anchor) {
    var location = Sys.UI.DomElement.getLocation(button);
    var locationBlock = Sys.UI.DomElement.getLocation(block);
    //Henter ut opprinnelige verdier
    var start = $(button).height();
    var middle = $(button).width() / 2;
    var oldheight = $(box).height();
    var oldwidth = $(box).width();
    var justify = 0;

    location.x = location.x - locationBlock.x;
    location.y = location.y - locationBlock.y;

    if (anchor == "bottom") {
        var buttonBounds = Sys.UI.DomElement.getBounds(button);
        var boxBounds = Sys.UI.DomElement.getBounds(box);

        justify = buttonBounds.height - (boxBounds.height);
    }
    // Starter animasjon visning
    $(box).css({
        top: location.y,
        left: (location.x + middle),
        height: 1,
        width: 1
    });

    $(box).animate({
        top: location.y + justify,
        left: (location.x - (oldwidth + 15)),
        height: oldheight,
        width: oldwidth,
        opacity: 1
    }, 700);
}

function showInfo(button, box, block, anchor) {
    var location = Sys.UI.DomElement.getLocation(button);
    var locationBlock = Sys.UI.DomElement.getLocation(block);
    //Henter ut opprinnelige verdier
    var start = $(button).height();
    var middle = $(button).width() / 2;
    var oldheight = $(box).height();
    var oldwidth = $(box).width();
    var justify = 0;

    location.x = location.x - locationBlock.x;
    location.y = location.y - locationBlock.y;

    if (anchor == "bottom") {
        var buttonBounds = Sys.UI.DomElement.getBounds(button);
        var boxBounds = Sys.UI.DomElement.getBounds(box);

        justify = buttonBounds.height - (boxBounds.height);
    }

    $(box).show({
        top: location.y + justify,
        left: (location.x - (oldwidth + 15)),
        height: oldheight,
        width: oldwidth,
        opacity: 1
    });
}

function closeInfo(button, box, block, anchor) {
    var location = Sys.UI.DomElement.getLocation(button);
    var locationBlock = Sys.UI.DomElement.getLocation(block);
    //Henter ut opprinnelige verdier
    var start = $(button).height();
    var middle = $(button).width() / 2;
    var oldheight = $(box).height();
    var oldwidth = $(box).width();
    var justify = 0;

    location.x = location.x - locationBlock.x;
    location.y = location.y - locationBlock.y;

    if (anchor == "bottom") {
        var buttonBounds = Sys.UI.DomElement.getBounds(button);
        var boxBounds = Sys.UI.DomElement.getBounds(box);

        justify = buttonBounds.height - (boxBounds.height);
    }
    
     // Starter animasjon skjuling         
    $(box).animate({
        top: location.y,
        left: (location.x + middle),
        height: "toggle",
        width: "toggle",
        opacity: 0.2
    }, 500);

    //Setter opprinnelige verdier og klargjør for neste kjøring
    $(box).css({
        height: oldheight,
        width: oldwidth
        });
}