<script>
/**
	Dialog

		// Can be created dynamically
		var dialog = new OreeshDialog();
	
	
		<!-- Or via HTML -->
		<oreesh-dialog 
			title="Error: No Students!" 
			message="This class contains no students!  You will have to add some students before you are able to continue"
			yes-button-text="Yes!"
			large-icon-src="http://oreesh.s3.amazonaws.com.edgesuite.net/latest/img/oreesh.png"
			small-icon="error">
		</oreesh-dialog>
	
	Notes:  `icon-large-src` has priority over `icon-small`.  If there is not `icon-large-src` or `icon-small`, then it will be text only.

	@class oreesh-dialog
**/
/**
	The title of dialog.  Text which appears at the top of the dialog.

	@attribute title
	@type String
**/
/**
	Dialog mode controls the amount of buttons.  Use `alert` for a dialog with a single `Ok` button.  Use `confirmation` for a dialog with a `Yes` and a `No` button.

	@attribute mode
	@type String
	@default alert
**/
/**
	The icon which will be shown if there is no `large-icon-src` specified.  The only option is `error`.

	@attribute small-icon
	@type String
**/
/**
	Use this to specify the path to a large image.

	@attribute large-icon-src
	@type String
**/
/**
	Specifies the text on the `Ok` button (`alert` mode only).

	@attribute ok-button-text
	@type String
	@default OK
**/
/**
	Specifies the text on the `Yes` button (`confirmation` mode only).

	@attribute yes-button-text
	@type String
	@default Yes
**/
/**
	Specifies the text on the `No` button (`confirmation` mode only).

	@attribute no-button-text
	@type String
	@default No
**/
/**
	Sets the opacity value.  Options are `low`, `high`, or `none`.  This is binded to the `oreesh-overlay` `opacity` attribute.

	@attribute opacity
	@type String
**/
/**
	Opens the dialog, making it appear on the screen.

	@method open
**/
/**
	Closes the dialog, removing it from the screen.

	@method close
**/
/**
	The callback function to be executed when `Yes` or `Ok`, (or `X` (close) button when `mode="alert"`) button is pressed.

		var od = document.createElement('oreesh-dialog');
		od.yesButtonCallback = function() {...};

	@method yesButtonCallback
**/
/**
	The callback function to be executed when `No` or `X` (close) button is pressed.

		var od = document.createElement('oreesh-dialog');
		od.noButtonCallback = function() {...};

	@method noButtonCallback
**/
/**
	Hide `X` (close) button.

	@attribute hide-close-icon
	@type Boolean
**/
/**
	Prevent `backdrop-tap` callback call.

	@attribute prevent-backdrop-tap
	@type Boolean
**/
/**
	Custom z-index style for content area.

	@attribute z-index-content
	@type Number
**/
/**
	Custom z-index style for backdrop area.

	@attribute z-index-backdrop
	@type Number
**/

</script>
<dom-module id="oreesh-dialog">
	<template>
		<link rel="stylesheet" is="custom-style" href="./oreesh-dialog.css" />
		<iron-a11y-keys target="{{parentElement}}" keys="esc" on-keys-pressed="_closeButtonCallback"></iron-a11y-keys>
		<oreesh-overlay opacity="{{opacity}}">
			<div class="oreesh-overlay-shadow-target content-root">
				<div class="content-area">

					<div on-click="_closeButtonCallback" class="close-icon-area button-close">
						<img source="<%- svg.dialog_icon_close %>"></img>
					</div>
					<template is="dom-if" if="{{title}}">
						<div class="title-area">
							<span>{{title}}</span>
						</div>
					</template>

					<!-- Large icon -->
					<template is="dom-if" if="{{largeIconSrc}}">
						<div class="large-icon-area">
							<img class="large-icon" src="{{largeIconSrc}}"></img>
						</div>
						<div class="text-area large-icon-text-area">
							<span>{{message}}</span>
						</div>
					</template>
					
					<!-- Small Icon -->
					<template is="dom-if" if="{{!largeIconSrc}}">
						<template is="dom-if" if="{{smallIcon}}">
							<div class="small-icon-and-text-row">
								<div class="small-icon-area">
									<img source="{{_smallIconPath}}"></img>
								</div>
								<div class="text-area small-icon-text-area">
									<span>{{message}}</span>
								</div>
							</div>
						</template>
					</template>

					<!-- Text only -->
					<template is="dom-if" if="{{!largeIconSrc}}">
						<template is="dom-if" if="{{!smallIcon}}">
							<div class="text-area text-only-text-area">
								<span>{{message}}</span>
							</div>
						</template>
					</template>

					<div class="button-row">
						<oreesh-button on-click="_okButtonCallback" class="button-ok button-alert">{{okButtonText}}</oreesh-button>
						<oreesh-button on-click="_yesButtonCallback" class="button-yes button-confirmation">{{yesButtonText}}</oreesh-button>
						<oreesh-button on-click="_noButtonCallback" class="button-no button-confirmation" theme="white2">{{noButtonText}}</oreesh-button>
					</div>
				</div>
			</div>
		</oreesh-overlay>
	</template>
</dom-module>

<script src="./oreesh-dialog.js"></script>