<script>
/**
	A group of selectbox items

		// Can be created dynamically
		var selectboxItem = new OreeshSelectboxItem();
	
	
		<!-- Or via HTML -->
		<!-- Basic example -->
		<oreesh-selectbox-item>Apple</oreesh-selectbox-item>
				
		<!-- With attributes -->
		<oreesh-selectbox-item value="10" selected>Item 10</oreesh-selectbox-item>
		
	@class oreesh-selectbox-item
**/
/**
	Sets the value of the item
	
	@type String
	@attribute value
**/
/**
	Sets the the item as selected
	
	@type Boolean
	@attribute selected
**/
/**
	Adds a checkbox to the selectbox item
	
	@type Boolean
	@attribute with-checkbox
**/
</script>

<dom-module id="oreesh-selectbox-item">
	<template>
		<link rel="stylesheet" is="custom-style" href="oreesh-selectbox-item.css">
		<div class="container">

			<template is="dom-if" if="{{withCheckbox}}">
				<oreesh-checkbox-button selected="{{selected}}" no-border><content></content></oreesh-checkbox-button>
			</template>

			<content></content>
			
		</div>
	</template>
</dom-module>

<script>
	window.OreeshSelectboxItem = Polymer({
		is: 'oreesh-selectbox-item',
		properties: {
			value: {
				type: String,
				reflectToAttribute: true
			},
			keyboardHover: {
				type: Boolean,
				value: false,
				reflectToAttribute: true,
				observer: '_keyboardHoverChanged'
			},
			selected: {
				type: Boolean,
				value: false,
				reflectToAttribute: true
			},
			withCheckbox: {
				type: Boolean,
				value: false,
				reflectToAttribute: true
			}
		},
		listeners: {
			tap: '_clickAction'
		},

		attached: function() {
			// Grab the parent (the root selectbox)
			this.parent = Polymer.dom(this).parentNode;
			while (this.parent && this.parent.tagName !== 'OREESH-SELECTBOX') {
				this.parent = Polymer.dom(this.parent).parentNode;
			}
			if (this.parent.multiple) {
				this.withCheckbox = true;
			}
			if (this.value === undefined || this.value === null) {
				this.value = this.textContent;
				print(3, 'selectbox-item value not set: fallback value set as textContent');
			}
		},

		_clickAction: function() {
			this.parent.itemClicked(this);
		},

		_keyboardHoverChanged: function() {
			if (!this.withCheckbox) {
				return;
			}
			
			if (this.keyboardHover) {
				this.$$('oreesh-checkbox-button').setAttribute('tab-focus', '');
			} else {
				this.$$('oreesh-checkbox-button').removeAttribute('tab-focus');
			}
		}
	});
</script>