<script>
/**
	A textarea with x-axis and y-axis scrolling for overflow.

		// Can be created dynamically
		var scrollbar = new OreeshScrollbar();
	
	
		<!-- Or via HTML -->
		<!-- Basic example with y-axis scrolling-->
		<oreesh-scrollbar style="display: inline-block; width: 200px; height: 200px;" scroll-y>
			... Lots of content ...
		</oreesh-scrollbar>
		
		<!-- X-axis scrolling -->
		<oreesh-scrollbar style="display: inline-block; width: 200px; height: 200px;" scroll-x>
			... Lots of content ...
		</oreesh-scrollbar>
		
		<!-- Both scrollbars-->
		<oreesh-scrollbar style="display: inline-block; width: 100px; height: 100px;" scroll-x scroll-y>
			... Lots of content ...
		</oreesh-scrollbar>

		<!-- with hover-to-show scroll bars which are animated -->
		<oreesh-scrollbar style="display: inline-block; width: 100px; height: 100px;" scroll-y hover-to-show animation>
			... Lots of content ...
		</oreesh-scrollbar>
		
		
	@class oreesh-scrollbar
**/
/**
	Scroll bars are hidden unless the element is moused-over
	
	@attribute hover-to-show
**/
/**
	Adds a scrollbar to the bottom of the textarea for the x-axis.
	
	@attribute scroll-x
**/
/**
	Adds a scrollbar to the right-side of the textarea for the y-axis.
	
	@attribute scroll-y
**/
/**
	Sets the size of the scrollbars.  Options are `large` and `small`.
	
	@attribute size
**/
/**
	Theme of the scrollbar.  Options are `black` and `white`
	
	@attribute theme
**/
/**
	If this scrollbar has the `scroll-y` attribute, then this will scroll the content to the given (absolute) pixel value, and move the scroll bar accordingly.

		scrollbar.scrollContentTop(50);	// Scroll to 50px from the top
	
	@param {Number} px The pixel value that will be scrolled to from the top
	@method scrollContentTop
**/
/**
	If this scrollbar has the `scroll-y` attribute, then this will scroll the content relative to the current position.

		scrollbar.scrollContentYRelative(1, 50);	// Scroll 50px from the current position
	
	@param {Number} direction The direction to scroll (positive vs negative)
	@param {Number} px The pixel value 
	@method scrollContentYRelative
**/

/**
	If this scrollbar has the `scroll-y` attribute, then this will scroll the content to the given (absolute) pixel value, and move the scroll bar accordingly.  Added for convenience.

		scrollbar.scrollContentBottom(50);	// Scroll to 50px from the bottom
	
	@param {Number} px The pixel value that will be scrolled to from the bottom
	@method scrollContentBottom
**/
/**
	If this scrollbar has the `scroll-x` attribute, then this will scroll the content to the given (absolute) pixel value, and move the scroll bar accordingly.

		scrollbar.scrollContentLeft(50);	// Scroll to 50px from the left
	
	@param {Number} px The pixel value that will be scrolled to from the left
	@method scrollContentLeft
**/
/**
	Returns the children in the content div.
	
	@method getChildren
**/
/**
	Event which is fired if there is scrolling in any direction
	
	@param {String} detail.axis Indiciates which axis was scrolled.  Will be either `x` or `y`
	@param {String} detail.top The current `top` styling of the scrollbar
	@param {String} detail.left The current `left` styling of the scrollbar

	@event scroll
**/
</script>

<dom-module id="oreesh-scrollbar">
	<template>
		<link rel="stylesheet" is="custom-style" href="./oreesh-scrollbar.css">
		<iron-a11y-keys target="[[target]]" keys="up down left right pageup pagedown home end" on-keys-pressed="_keyPressed"></iron-a11y-keys>
		<div class="oreesh-scroll">
			<div class="content">
				<content></content>
			</div>
		</div>
		
		<div class="bar barY"></div>
		<div class="bar barX"></div>
	</template>
</dom-module>

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