triptych/guest.html

## readme.txt
YUI Communication Layer:

Working demo: http://dl.dropbox.com/u/3688/commlayer/host.html
(view with console on so you see the Y.log events)

Based off of : http://yuilibrary.com/gallery/show/communication-layer

Clicking the button demonstrates how you can send events from the guest page back up into the host.
You pass info into the guest from the host using the proxy.fire() and pass data along with the event.

## guest.html
<html>
	<head>
<script src="http://yui.yahooapis.com/3.6.0pr3/build/yui/yui-min.js"></script>
	</head>
	<body>

<script>

// As the child application
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.07.05-20-01'
}).use('gallery-communication-layer', function(Y) {

    Y.CL = Y.CL || new Y.CommunicationLayer();

    Y.CL.on('pageinfo', function (e) {
        var pageData = e.data;
        Y.log(pageData);
    });

    Y.CL.ready(); // ready signal

    Y.one("#btn").on("click", function(){
        Y.CL.fire("navigate");
    	window.location.href="guest2.html";
    })

});
</script>

<button id="btn"> go somewhere </button>

	</body>
</html>

## guest2.html
<html>
	<head>
<script src="http://yui.yahooapis.com/3.6.0pr3/build/yui/yui-min.js"></script>
	</head>
	<body>

<script>

// As the child application
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.07.05-20-01'
}).use('gallery-communication-layer', function(Y) {

    Y.CL = Y.CL || new Y.CommunicationLayer();

    Y.CL.on('pageinfo', function (e) {
        var pageData = e.data;
        Y.log(pageData);
    });

    Y.CL.ready(); // ready signal

    Y.one("#btn").on("click", function(){
    	Y.CL.fire("navigate");
    	window.location.href="guest.html";
    })

});
</script>

<button id="btn"> go back </button>

	</body>
</html>

## host.html
<html>
	<head>
<script src="http://yui.yahooapis.com/3.6.0pr3/build/yui/yui-min.js"></script>
<style>
	iframe{
		border: 1px solid red;
	}
</style>
	</head>
	<body>

		<script>

// As the parent application
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.07.05-20-01'
}).use('gallery-communication-layer', function(Y) {

    Y.CL = Y.CL || new Y.CommunicationLayer();

    // The src attribute is required for registration
    var iframe = Y.Node.create('<iframe src="guest.html">');

    function navigateHandler (e){
    	Y.log("navigateHandler");
    	Y.log(e);
    }

    var pageData = {
    	a: 1,
    	apple: "cool"
    }

    Y.CL.register(iframe, function (proxy) {

        proxy.on('navigate', navigateHandler);

        // Logic to execute when the child signals readiness
        proxy.ready(function () {
        	Y.log("proxy.ready");
            proxy.fire('pageinfo', pageData);
        });

    });

    Y.one("body").append(iframe);

});

		</script>

	</body>
</html>
	YUI Communication Layer:

	Working demo: http://dl.dropbox.com/u/3688/commlayer/host.html
	(view with console on so you see the Y.log events)

	Based off of : http://yuilibrary.com/gallery/show/communication-layer

	Clicking the button demonstrates how you can send events from the guest page back up into the host.
	You pass info into the guest from the host using the proxy.fire() and pass data along with the event.
	<html>
	<head>
	<script src="http://yui.yahooapis.com/3.6.0pr3/build/yui/yui-min.js"></script>
	</head>
	<body>

	<script>

	// As the child application
	YUI({
	//Last Gallery Build of this module
	gallery: 'gallery-2012.07.05-20-01'
	}).use('gallery-communication-layer', function(Y) {

	Y.CL = Y.CL \|\| new Y.CommunicationLayer();

	Y.CL.on('pageinfo', function (e) {
	var pageData = e.data;
	Y.log(pageData);
	});

	Y.CL.ready(); // ready signal

	Y.one("#btn").on("click", function(){
	Y.CL.fire("navigate");
	window.location.href="guest2.html";
	})

	});
	</script>

	<button id="btn"> go somewhere </button>

	</body>
	</html>