<div class="intro">
<p>This example shows how to use YUI 2 and 3 at the same time as well as interacting with each other.</p>
</div>

<div class="example">
    {{>yui-yui2}}
</div>

<style>
div.hidden {
    display: none;
}
</style>
<script>
YUI().use('node', function(Y) {
    if (Y.UA.mobile) {
        Y.one('#note').removeClass('hidden');
    }
});
</script>

<div id="note" class="intro hidden">
<p>This example does not work on touch based devices since it uses the old YUI 2 based Image Cropper.</p>
</div>

<h3>Using YUI 2 inside of YUI 3</h3>
<p>In this example, we are using the new YUI 3 support for loading and sandboxing YUI 2. 
From the `YUI().use()` statement, you will be able to load any module/utility/widget from
YUI 2 and use it like you would in YUI 2.</p>

<h3>Creating your YUI instance</h3>
<p>Now we need to create our YUI instance with the `node` and `yui2-imagecropper`
modules, so we can create a YUI 2 ImageCropper and do some simple DOM manipulation with `Node`.</p>

```
YUI().use('node', 'yui2-imagecropper', function(Y) {
});
```

<h3>Creating the ImageCropper</h3>
<p>Now that we have our tools in place, let's create the ImageCropper. Using the new support 
for loading YUI 2 into a YUI 3 instance, you can set up a simple variable to help you cut 
and paste your YUI 2 based code.</p>
<p>In the code sample below, we are creating a scoped variable called `YAHOO` and assigning
it from `Y.YUI2`. The `YUI2` property of the `YUI` instance is a scoped version of the 
YUI 2 `YAHOO` object. If this page is inspected, you will notice that there is no global `YAHOO` variable.</p>

```
YUI().use('node', 'yui2-imagecropper', function(Y) {
    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2;

    var crop = new YAHOO.widget.ImageCropper('cropper'); 
    
});
```

<h3>Using Node too</h3>
<p>Now we need to add the `yui-skin-sam` class to the body so the skin works.</p>

```
    Y.one('body').addClass('yui-skin-sam');

```

<h3>Full example source</h3>

```
{{>yui-yui2}}
```
