// Show loader and disable the rest of the user interface
function show_loader() {
    $("#foo").addClass('ui-disabled');
    $.mobile.loading("show", {
        text: "loading",
        textVisible: true
    });
}

// Hide loader and activate the rest of the user interface
function hide_loader() {
    $.mobile.loading("hide");
    $("#foo").removeClass('ui-disabled');
}

// Retrieve all switch configurations and update web user interface
function load_switches() {
    show_loader();

    $.post("/api/switches", function(data) {
        var items = data.length;

        $("#content").empty();
        $("#content").hide();

        $.each(data, function(index, object) {
            var li = $("#content").append('<li class="ui-field-contain"><a href="#details">'
                    + '<h2>' + object + '</h2>'
                    + '<p><select name="flip_' + object + '" id="flip_' + object + '" data-role="slider" data-mini="true">'
                        + '<option value="off">Off</option>'
                        + '<option value="on">On</option>'
                    + '</select></p>'
                    + '</a></li>');

            li = li.find("li").last();
            var flip = li.find("#flip_" + object);
            flip.slider().change(function(event) {
                li.addClass('ui-disabled');
                $.post("/api/switch/" + object + "/" + $(this).val(), function(data) {
                    flip.val(data ? "on" : "off").slider("refresh");
                }).always(function() {
                    li.removeClass('ui-disabled');
                });
            });

            $.ajax({
                url: "/api/get/" + object,
                type: "POST",
                async: false,
                timeout: 2000
            }).done(function(data) {
                if (data.switch == true) {
                    // apply light theme when switch is enabled
                    //li.attr("data-theme", "a");
                    flip.val("on").slider("refresh");
                } else {
                    // apply dark theme when switch is enabled
                    //li.attr("data-theme", "b");
                    flip.val("off").slider("refresh");
                }
            }).fail(function() {
            }).always(function() {
                items--;
                if (items == 0) {
                    hide_loader();
                }
            });
        });

        $("#content").listview("refresh");
        $("#content").show();
    });
}

// Load web page and set event handlers
$(function() {
    load_switches();

    $("#refresh").click(function(event) {
        event.preventDefault();
        load_switches();
    });
});

@@ -1093,16 +1093,68 @@
 t%3E%3C/p%3E'%0A
+                    + '%3Cp class=%22ui-li-aside%22%3E%3C/p%3E'%0A
         
@@ -1908,99 +1908,257 @@
     
-// apply light theme when switch is enabled%0A                    //li.attr(%22data-theme%22, %22a%22
+flip.val(%22on%22).slider(%22refresh%22);%0A                %7D else %7B%0A                    flip.val(%22off%22).slider(%22refresh%22);%0A                %7D%0A%0A                // update side part of LI item%0A                var next_event = Object.keys(data.next_events).shift(
 );%0A 
@@ -2176,235 +2176,502 @@
     
- 
-   flip.val(%22on%22).slider(%22refresh%22);%0A                %7D else %7B%0A                    // apply dark theme when switch is enabled%0A                    //li.attr(%22data-theme%22, %22b%22);%0A                    flip.val(%22off%22).slider(%22refresh
+var aside = li.find(%22p.ui-li-aside%22)%0A                if (next_event === undefined) %7B%0A                    aside.html('manual');%0A                %7D else %7B%0A                    var next_state = data.next_events%5Bnext_event%5D;%0A                    next_event = new Date(Date.parse(next_event));%0A                    aside.html(%22next: %22%0A                            + next_event.getHours() + %22:%22 + next_event.getMinutes()%0A                            + %22 %3Cstrong%3E%22 + (next_state ? %22on%22 : %22off%22) + %22%3C/strong%3E
 %22);%0A

add size part of LI element