$( document ).on( "pageinit", "#mainpage", function() {
    $( document ).on( "swipeleft swiperight", "#mainpage", function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft"  ) {
                $( "#searchpanel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#defaultpanel" ).panel( "open" );
            }
        }
    });
});

$(document).ready(function()
{
    $("#searchvalue").keypress(function(event) {
        if (event.which === 13) {
            Search($("#searchvalue").val());
            return false;
        }
    });
    $("#searchbtn").click(function()
    {
        Search($("#searchvalue").val());
        return false;
    });
    $("#growfont").click(function()
    {
        Settings.IncreaseResultFontSize();
        return false;
    });
    $("#shrinkfont").click(function()
    {
        Settings.DecreaseResultFontSize();
        return false;
    });
    $("#break-on-verses").click(function()
    {
        Settings.Save();
        return false;
    });
    $("#showhelp").click(function()
    {
        $("#help").dialog({
            draggable: true,
            width: 700,
            height: 650,
            resizable: true
        });
    });
    $("#changefont").change(function()
    {
        Settings.ChangeResultFont($("#changefont").val());
        return false;
    });
    // load querystring
    var ref = decodeURIComponent(Util.GetUrlVars().r);
    if (ref !== "undefined") {
        // remember the settings, first, because if you have results, the load process would wipe out the passage you want to load.
        Settings.Load();
        // now load the passage from the querystring.
        Search(ref);
        $("#searchvalue").val(ref);
    } else {
        Settings.Load();
    }

    // you need to do this last, otherwise the settings load resets the window height.
    $(window).bind("resize", function()
    {
        $(".my-breakpoint.ui-grid-c .ui-block-a").css("width", 50);
        $(".my-breakpoint.ui-grid-c .ui-block-b").css("width", window.innerWidth - 190);
        $(".my-breakpoint.ui-grid-c .ui-block-c").css("width", 65);
        $(".my-breakpoint.ui-grid-c .ui-block-d").css("width", 55);
        $("#searchresults").css("height", window.innerHeight - 100);
        return false;
    });
    $(".my-breakpoint.ui-grid-c .ui-block-a").css("width", 50);
    $(".my-breakpoint.ui-grid-c .ui-block-b").css("width", window.innerWidth - 190);
    $(".my-breakpoint.ui-grid-c .ui-block-c").css("width", 65);
    $(".my-breakpoint.ui-grid-c .ui-block-d").css("width", 55);
    $("#searchresults").css("height", window.innerHeight - 100);

});