<style>
/* Hide overlay markup while loading, if js is enabled */
.yui3-js-enabled .yui3-overlay-loading {
    top:-1000em;
    left:-1000em;
    position:absolute;
}

{{>overlay-css}}

.yui3-overlay-content .yui3-widget-ft {
    padding: 0.4em 0.6em 0.5em;
    background-color:#DFE3F5;
    border-radius: 0 0 2px 2px;
}

/* Example Layout CSS */
.overlay-example {
    padding:5px;
    zoom:1;
}

.overlay-example .fields {
    float:left;
    width:23em;
}

.overlay-example .contenttype {
    margin-bottom:0px;
    padding-bottom:0px;
}

.overlay-example .note {
    margin:0px;
    padding:0px;
}

.overlay-example label {
    display:block;
    font-weight:bold;
    margin-bottom:3px
}

.overlay-example select {
    width:19em;
}

.overlay-example textarea {
    width:19em;
    height:15em;
}

.overlay-example .filler {
    margin-left:24em;
    margin-top:1em;
    color:#999;
}

.overlay-example:after {
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}
</style>

<div class="intro">
    <p>This example shows how you can work either the `headerContent, bodyContent, footerContent` attributes, to replace content in the Overlay's standard module sections, or use the `setStdModContent(section, content, where)` method to insert content <em>before</em>, or append it <em>after</em> existing content in the section.</p>
</div>

<div class="example">
    {{>overlay-stdmod-source}}
</div>

<h2>Overlay's Standard Module Support</h2>

<h3>Setting Up The YUI Instance</h3>

<p>To create an instance of an Overlay on your page, the only module you need to request is the `overlay` module. The `overlay` module will pull in the `widget`, `widget-stack`, `widget-position`, `widget-position-align`, `widget-position-constrain` and `widget-stdmod` extensions it uses.</p>

```
YUI({...}).use("overlay", function(Y) {
    // We'll write example code here, where we have a Y.Overlay class available.
});
```

<p>Note, using the `overlay` module, will also pull down the default CSS required for overlay, on top of which we only need to add our required look/feel CSS for the example.</p>

{{>need-skin-note}}
```
<body class="yui3-skin-sam"> {{>need-skin-comment}}
```


<h3>Creating The Overlay From Markup</h3>

<p>For this example, we'll create the overlay instance from markup which already exists on the page, and is shown below. We mark the existing markup with the `yui3-overlay-loading` class, so that we can hide it while the rich control is being instantiated:</p>

```
<div id="overlay" class="yui3-overlay-loading">
    <div class="yui3-widget-hd">Overlay Header</div>
    <div class="yui3-widget-bd">Overlay Body</div>
    <div class="yui3-widget-ft">Overlay Footer</div>
</div>
```

<h3>Instantiating The Overlay</h3>

<p>To create an overlay instance, we use the overlay constructor `Y.Overlay`, and pass it the `srcNode` reference for the existing markup on the page:</p>

```
var overlay = new Y.Overlay({
    srcNode:"#overlay",
    width:"20em",
    align: {
        node:"#overlay-stdmod > .filler",
        points:["tl", "tl"]
    }
});
overlay.render();
```

<p>We also set it's width and align it to the filler paragraph in the example box ("#overlay-stdmod > .filler"). We don't pass any node references to the `render` method, so the Overlay is rendered in the location of the contentBox provided.</p>

<h3 id="setting-content">Setting Content</h3>

<p>
The example provides a set of input fields, allowing the user to set content in either of the 3 standard module sections which Overlay supports using Overlay's `setStdModContent` method.
The content can either be inserted before, appended after, or replace existing content in the specified section.</p>

<p>
Additionally the new content can be converted to a node instance before being added to the specified section. Although it has no impact on the example, if the new content is added as a string, innerHTML is used to insert before or append after the existing section content, removing any event listeners which may have been attached to elements inside the section.
</p>

```
// Hold onto input field references.
var content = Y.one("#content");
var where = Y.one("#where");
var section = Y.one("#section");

Y.on("click", function() {

    // New content to be added. For this example, we escape the HTML since it's
    // coming from an unknown source, however Overlay accepts HTML strings as
    // content (you should ensure it's coming from a trusted source).
    var newContent = Y.Escape.html(content.get("value"));

    overlay.setStdModContent(section.get("value"), newContent, where.get("value"));

}, "#setHTML");
```

<h3>CSS: Overlay Look/Feel</h3>

<p>As with the other basic overlay examples, the overlay.css Sam Skin file (build/overlay/assets/skins/sam/overlay.css) provides the default functional CSS for the overlay. Namely the CSS rules to hide the overlay, and position it absolutely. However there's no default out-of-the-box look/feel applied to the Overlay widget.</p>

<p>The example provides it's own look and feel for the Overlay, by defining rules for the content box, header, body and footer sections:</p>

```
/* Hide overlay markup while loading, if js is enabled */
.yui3-js-enabled .yui3-overlay-loading {
    top:-1000em;
    left:-1000em;
    position:absolute;
}

{{>overlay-css}}

```

<h2>Complete Example Source</h2>
```
{{>overlay-stdmod-source}}
```
