<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-button/paper-button.html">

<dom-module id="paper-alert-dialog">

	<template>
		<paper-dialog id='dialog' opened={{opened}} modal>
		    <h2>[[title]]</h2>
		    <p><content></content></p>
			<div class='buttons'>
				<paper-button dialog-dismiss hidden=[[!dismissButton]]>[[dismissButton]]</paper-button>
				<paper-button dialog-confirm autofocus on-tap='_tapConfirm'>[[confirmButton]]</paper-button>
			</div>
		</paper-dialog>
	</template>
	         
</dom-module>

<script>

(function() {

	Polymer({
		is: 'paper-alert-dialog',
		properties: {
			title: String,
			confirmButton: {
				type: String,
				value: 'Confirm'
			},
			dismissButton: String,
			opened: {
				true: Boolean,
				notify: true
			}
		},
		
		// Public methods
		open: function() {
			this.$.dialog.open();
		},
		
		// Private methods
		_tapConfirm: function() {
			this.fire('confirm');
		}
	});

})();

</script>

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-button/paper-button.html">

<dom-module id="paper-alert-dialog">

	<template>
		<paper-dialog id='dialog' opened={{opened}} modal>
		    <h2>[[title]]</h2>
		    <p><content></content></p>
			<div class='buttons'>
				<paper-button dialog-dismiss hidden=[[!dismissButton]]>[[dismissButton]]</paper-button>
				<paper-button dialog-confirm autofocus on-tap='_tapConfirm'>[[confirmButton]]</paper-button>
			</div>
		</paper-dialog>
	</template>
	         
</dom-module>

<script>

(function() {

	Polymer({
		is: 'paper-alert-dialog',
		properties: {
			title: String,
			confirmButton: {
				type: String,
				value: 'Confirm'
			},
			dismissButton: String,
			opened: {
				true: Boolean,
				notify: true
			}
		},
		
		// Public methods
		open: function() {
			// Attach dialog to the body to ensure it's on top of all existing overlays
			Polymer.dom(document.body).appendChild(this);
			
			this.$.dialog.open();
		},
		
		// Private methods
		_tapConfirm: function() {
			this.fire('confirm');
		}
	});

})();

</script>

Attach dialog to the body to ensure it's on top of all existing overlays
Attach dialog to the body to ensure it's on top of all existing overlays