var
	kind = require('enyo/kind');

var
	Divider = require('moonstone/Divider'),
	Button = require('moonstone/Button'),
	ToggleButton = require('moonstone/ToggleButton'),
	Dialog = require('moonstone/Dialog');

module.exports = kind({
	name: 'moons.sample.DialogSample',
	classes: 'moon enyo-unselectable enyo-fit',
	components: [
		{kind: Divider, content: 'Dialog'},
		{kind: Button, content: 'Open Dialog', ontap: 'showDialog'},
		{classes: 'moon-1v'},
		{kind: ToggleButton, content: 'Showing', name: 'showingToggle'},
		{kind: ToggleButton, content: 'Animate', name: 'animateToggle'},
		{kind: ToggleButton, content: 'SpotlightModal', ontap: 'buttonToggled'},
		{
			name: 'dialog',
			kind: Dialog,
			title: 'You\'ve been watching TV for a very long time so let\'s do a quick check-in.',
			subTitle: 'This TV has been active for 10 hours.',
			message: 'Perhaps it is time to take a break and get some fresh air. There is a nice coffee shop around the corner',
			components: [
				{kind: Button, content: 'Go get a coffee', ontap: 'hideDialog'},
				{kind: Button, content: 'Keep watching TV', ontap: 'addMessage'}
			]
		}
	],
	bindings: [
		{from: '.$.showingToggle.value', to: '.$.dialog.showing', oneWay:false},
		{from: '.$.dialog.animate', to: '.$.animateToggle.value', oneWay:false}
	],
	buttonToggled: function (sender, ev) {
		this.$.dialog.setSpotlightModal(sender.getActive());
		this.$.dialog.setAutoDismiss(!sender.getActive());
	},
	showDialog: function (sender) {
		this.$.dialog.show();
	},
	hideDialog: function (sender, ev) {
		this.$.dialog.hide();
	},
	addMessage: function () {
		this.$.dialog.setMessage(this.$.dialog.getMessage() + '<br> No, seriously, you should probably take a break.');
	}
});
@@ -113,28 +113,28 @@
 ton'),%0A%09
-ToggleButton
+CheckboxItem
  = requi
@@ -147,28 +147,28 @@
 onstone/
-ToggleButton
+CheckboxItem
 '),%0A%09Dia
@@ -461,87 +461,305 @@
 nd: 
-ToggleButton, content: 'Showing', name: 'showingToggle'%7D,%0A%09%09%7Bkind: ToggleButton
+Divider, content: 'Options'%7D,%0A%09%09%7Bkind: CheckboxItem, content: 'Tap outside to close (autoDismiss)', name: 'autoDismissToggle'%7D,%0A%09%09%7Bkind: CheckboxItem, content: 'Modal', name: 'modalToggle'%7D,%0A%09%09%7Bkind: CheckboxItem, content: 'Show Close Button', name: 'showCloseButtonToggle'%7D,%0A%09%09%7Bkind: CheckboxItem
 , co
@@ -813,33 +813,58 @@
 nd: 
-ToggleButton, content: 'S
+CheckboxItem, content: 'Lock 5-way inside popup (s
 potl
@@ -876,32 +876,136 @@
 odal
+)
 ', 
-ontap: 'button
+name: 'spotlightModalToggle'%7D,%0A%09%09%7Bkind: CheckboxItem, content: 'Close by back key (allowBackKey)', name: 'allowBackKey
 Toggle
-d
 '%7D,%0A
@@ -1506,27 +1506,108 @@
 '.$.
-showingToggle.value
+dialog.allowBackKey', to: '.$.allowBackKeyToggle.checked', oneWay: false%7D,%0A%09%09%7Bfrom: '.$.dialog.modal
 ', t
@@ -1617,22 +1617,27 @@
 '.$.
+mo
 d
-i
 al
+T
 og
-.showing
+gle.checked
 ', o
@@ -1638,24 +1638,25 @@
 ed', oneWay:
+ 
 false%7D,%0A%09%09%7Bf
@@ -1707,13 +1707,15 @@
 gle.
-value
+checked
 ', o
@@ -1724,65 +1724,113 @@
 Way:
+ 
 false%7D
-%0A%09%5D,%0A%09buttonToggled: function (sender, ev) %7B%0A%09%09this
+,%0A%09%09%7Bfrom: '.$.dialog.autoDismiss', to: '.$.autoDismissToggle.checked', oneWay: false%7D,%0A%09%09%7Bfrom: '
 .$.d
@@ -1840,11 +1840,8 @@
 og.s
-etS
 potl
@@ -1853,85 +1853,161 @@
 odal
-(sender.getActive());%0A%09%09this.$.dialog.setAutoDismiss(!sender.getActive());%0A%09%7D
+', to: '.$.spotlightModalToggle.checked', oneWay: false%7D,%0A%09%09%7Bfrom: '.$.dialog.showCloseButton', to: '.$.showCloseButtonToggle.checked', oneWay: false%7D%0A%09%5D
 ,%0A%09s

Add more options to existing Dialog sample for testing