<style>
	div.bubble.editAccess_type
	{
		position: relative;
		text-align: center;
		float: left;
		margin-right: 20px;
		max-width: 30%;
	}

	div.bubble.editAccess_type table.editAccess_typeList
	{
		position: relative;
		left: -9px;
		text-align: left;
		width: 120%;
		border-collapse: collapse;
	}

	div.bubble.editAccess_type table.editAccess_typeList tr
	{
		height: 24px;
		cursor: pointer;
		background-position: center right;
		background-repeat: no-repeat;

	}

	div.bubble.editAccess_type table.editAccess_typeList tr:hover
	{
		background-image: url(./assets/images/listItem_hover.png);
	}

	div.bubble.editAccess_type table.editAccess_typeList tr.active
	{
		background-image: url(./assets/images/listItem_active.png);
	}

	div.bubble.editAccess_type table.editAccess_typeList tr.active:hover
	{
		background-image: url(./assets/images/listItem_active_hover.png);
	}

	div.bubble.editAccess_type table.editAccess_typeList tr td
	{
		padding-left: 10px;
	}

	div.bubble.editAccess_type_target input
	{
		color: #146BB4;
		padding: 2px;
		margin-left: 10px;
		margin-top: 3px;
	}

	div.bubble.editAccess_type_target.editAccess_group,
	div.bubble.editAccess_type_target.editAccess_individual
	{
		display: none;
		max-width: 65%;
		float: left;
		margin-left: 7px;
		clear: none;
	}

	div.bubble.editAccess_group div.editAccess_group,
	div.bubble.editAccess_individual div.editAccess_individual
	{
		max-height: 20em;
		overflow: auto;
	}

	div.bubble.editAccess_type_target.editAccess_group table,
	div.bubble.editAccess_type_target.editAccess_individual table
	{
		border: none;
		border-collapse: collapse;
		margin-right: 25px;
	}

	div.bubble.editAccess_type_target.editAccess_group table tr,
	div.bubble.editAccess_type_target.editAccess_individual table tr
	{
		height: 24px;
		background-position: center right;
		background-repeat: no-repeat;
	}

	div.bubble.editAccess_type_target.editAccess_group table tr:hover,
	div.bubble.editAccess_type_target.editAccess_individual table tr:hover
	{
		background-image: url(./assets/images/endItem_active.png);
		background-color: red;
	}

	div.bubble.editAccess_type_target.editAccess_group table th,
	div.bubble.editAccess_type_target.editAccess_individual table th
	{
		padding: 0px 5px;
		text-align: center;
		border-bottom: 1px solid #cccccc;
	}

	div.bubble.editAccess_type_target.editAccess_group table td,
	div.bubble.editAccess_type_target.editAccess_individual table td
	{
		text-align: center;
		border-bottom: 1px solid #cccccc;
	}

	div.bubble.editAccess_type_target.editAccess_group table td.name,
	div.bubble.editAccess_type_target.editAccess_individual table td.name
	{
		text-align: right;
	}

	div.controls
	{
		position: relative;
		clear: both;
		text-align: left;
		margin-top: -40px;
	}

	div.controls img
	{
		margin: 10px;
		cursor: pointer;
	}
</style>

<form id="editAccess">
<?php

// ==================== Create Access Type List
$inner = '<table class="editAccess_typeList">';
$types = array( 'group' => 'Groups', 'individual' => 'Individuals' );
foreach ($types as $index => $type)
{
	$inner .= '<tr onclick="editAccess_typeSelect( this );" id="target_'.$index.'">';
	$inner .=		'<td>'.$type.'</td>';
	$inner .= '</tr>';
}
$inner .= '</table>';

$action = new bubble( $inner );
$action->setClassName( 'editAccess_type' );
echo $action->getHTML( );

// ==================== Create Group List
$newBubble = new bubble( '<div class="editAccess_group"></div>' );
$newBubble->setClassName( 'editAccess_type_target editAccess_group' );
echo $newBubble->getHTML( );

// ==================== Create Individuals List
$newBubble = new bubble( '<div class="editAccess_individual"></div>' );
$newBubble->setClassName( 'editAccess_type_target editAccess_individual' );
echo $newBubble->getHTML( );
?>

<div class="controls">
	<img src="./assets/images/button_cancel.png" alt="Cancel" onclick="getFirstParentByClassName( 'div', this, 'dialog' ).parent.close( true );" />
	<img src="./assets/images/button_next.png" alt="Next" onclick="getFirstParentByClassName( 'div', this, 'dialog' ).parent.captureValues( getFirstParent( 'form', this ), false );" />

	<input type="hidden" name="repoId" value="<?= $_REQUEST['repoId']; ?>" />
</div>
</form>

<?php

class bubble
{
	protected $_content;
	protected $_classes = array();

	public function __construct( $content = null )
	{
		if (!defined( 'BUBBLE_DEFAULT_CLASSNAME' )) { define( 'BUBBLE_DEFAULT_CLASSNAME', 'bubble' ); }

		$this->setContent( $content );

		if (!sizeof( $this->_classes ))
		{
			$this->setClassName( BUBBLE_DEFAULT_CLASSNAME );
		}
	}

	public function __destruct()
	{
	}

	public function setContent( $content )
	{
		$this->_content = $content;
	}

	public function setClassName( $className )
	{
		// ====================  Ensure that the base classname is preserved in the first position
		if (sizeof( $this->_classes ))
		{
			$base = reset( $this->_classes );
		}

		$this->_classes = array();

		if (isset( $base ))
		{
			$this->_classes[] = $base;
		}

		// ====================  Add new classname
		$this->_classes[] = $className;
	}

	public function appendContent( $content )
	{
		$this->_content .= $content;
	}

	public function getHTML( )
	{
		$output = '';
		$output = '<div class="'.implode( ' ', $this->_classes ).'">';
		$output .= '<div class="top"><div class="right"></div></div>';
		$output .= '<div class="content"><div class="right">';
		$output .= $this->_content;
		$output .= '</div></div>';
		$output .= '<div class="bot"><div class="right"></div></div>';
		$output .= '</div> <!-- Close bubble Div -->';

		return $output;
	}
}

class tooltip extends bubble
{
	public function __construct( $content = null )
	{
		if (!defined( 'TOOLTIP_CLASSNAME' )) { define( 'TOOLTIP_CLASSNAME', 'tooltip' ); }

		if (!sizeof( $this->_classes ))
		{
			$this->setClassName( TOOLTIP_CLASSNAME );
		}

		parent::__construct( $content );
	}
}

class error extends bubble
{
	public function __construct( $content = null )
	{
		if (!defined( 'ERROR_CLASSNAME' )) { define( 'ERROR_CLASSNAME', 'error' ); }

		if (!sizeof( $this->_classes ))
		{
			$this->setClassName( ERROR_CLASSNAME );
		}

		parent::__construct( $content );
	}
}

?>