package jumpstart.web.pages.examples.ajax;

import org.apache.tapestry5.Asset;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.Path;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;
import org.apache.tapestry5.services.javascript.StylesheetLink;
import org.apache.tapestry5.services.javascript.StylesheetOptions;

@Import(stylesheet = { "css/examples/js.css", "css/examples/zone-overlay.css" })
public class AjaxLoadingSpinner {
    static final private String[] ALL_THINGS = { "Sugar", "Spice", "All Things Nice" };

    // Screen fields

    @Property
    private String[] things;

    @Property
    private String thing;

    // Generally useful bits and pieces

    @Inject
    private Request request;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    @InjectComponent
    private Zone thingsZone;

    @Inject
    private JavaScriptSupport javaScriptSupport;

    @Inject
    @Path("css/examples/zone-overlay-ie.css")
    private Asset ieCSS;

    // The code

    void afterRender() {

        // Add a stylesheet that is conditional on whether the browser is Internet Explorer. We would do this in the
        // @Import above except that it doesn't have the syntax to specify a condition.

        javaScriptSupport.importStylesheet(new StylesheetLink(ieCSS, new StylesheetOptions().withCondition("IE")));

        javaScriptSupport.require("zone-overlay");
    }

    void onShowThings() {
        refreshZoneSlowly();
    }

    void onSuccess() {
        refreshZoneSlowly();
    }

    private void refreshZoneSlowly() {
        // Set up the list of things to display
        things = ALL_THINGS;

        // Sleep 4 seconds to simulate a long-running operation
        sleep(4000);

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(thingsZone);
        }
    }

    private void sleep(long millis) {
        try {
            Thread.sleep(millis);
        }
        catch (InterruptedException e) {
            // Ignore
        }
    }

}

// A script that detects when a zone-related refresh is requested. 
// It reacts by overlaying the zone with a div of class "zone-loading-overlay". 
// The idea is that you should define that class, in css, to display an animated GIF.
//
// Based on a solution by Howard Lewis Ship at http://tapestryjava.blogspot.co.uk/2011/12/adding-ajax-throbbers-to-zone-updates.html .

define(["t5/core/dom", "t5/core/events", "t5/core/zone"], function(dom, events, zoneManager) {

    return function(params) {

        function addZoneOverlay() {
            var $zone = this.$;
            this.prepend("<div class='zone-loading-overlay'/>");
            var $overlay = $zone.find("div:first");

            $overlay.css({
                width : $zone.width() + "px",
                height : $zone.height() + "px"
            });
        }

        // Tell t5/core/dom to call my addZoneOverlay() whenever it receives t5/core/events.zone.refresh 
        // (which bubbles up from t5/core/zone when you click a Form or link that specifies zone).

        dom.onDocument(events.zone.refresh, addZoneOverlay);
    }

});

.eg {
                margin: 20px 0;
                padding: 14px;
                color: #888;
                border: 1px solid #ddd;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -mox-border-radius: 6px;
}

.js-required {
                color: red;
                display: block;
                margin-bottom: 14px;
}

.js-recommended {
                color: red;
                display: block;
                margin-bottom: 14px;
}

/* Based on a solution by Howard Lewis Ship at http://tapestryjava.blogspot.co.uk/2011/12/adding-ajax-throbbers-to-zone-updates.html .*/

@-webkit-keyframes fade-in {
  from {
     opacity: 0;
  }
  to {
    opacity: .5
  }
}

@-moz-keyframes fade-in {
  from {
     opacity: 0;
  }
  to {
    opacity: .5
  }
}

div.zone-loading-overlay {
    position: absolute;
    background-color: #eee;
    opacity: 0;
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 250ms;
    -webkit-animation-delay: 50ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: fade-in;
    -moz-animation-duration: 250ms;
    -moz-animation-delay: 50ms;
    -moz-animation-fill-mode: forwards;
    background-image: url(../../tapestry5/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 9999;
}

/* Based on a solution by Howard Lewis Ship at http://tapestryjava.blogspot.co.uk/2011/12/adding-ajax-throbbers-to-zone-updates.html .*/

div.zone-ajax-overlay {
    background-color: silver;
    filter: alpha(opacity = 50);
}