/*
	Expanded Content Overlay
	
	example:
		<!-- overlay for expanding tiles -->
		<div class="tile_overlay" style="display:none">
			<div class="tile_overlay_container">
				<div class="tile_overlay_pages">
					<div class="tile_overlay_page"> ... </div><!-- tile 1 -->
					<div class="tile_overlay_page"> ... </div><!-- tile 2 -->
					<div class="tile_overlay_page"> ... </div><!-- tile 3 -->
					<div class="tile_overlay_page"> ... </div><!-- tile 4 -->
				</div>
			</div>
		</div>
		
		<!-- content -->
		<div class="content">
		
			<!-- tile 1 -->
			<div class="tile">
				<div class="tile_name"> ... </div><div class="tile_title"> ... </div>
				<a class="content_expand" onClick="onShow_TileOverlay(this);">Expand</a>
			</div>
			
			<!-- tile 2 -->
			<div class="tile">
				<div class="tile_name"> ... </div><div class="tile_title"> ... </div>
				<a class="content_expand" onClick="onShow_TileOverlay(this);">Expand</a>
			</div>
			
			<!-- tile 3 -->
			<div class="tile">
				<div class="tile_name"> ... </div><div class="tile_title"> ... </div>
				<a class="content_expand" onClick="onShow_TileOverlay(this);">Expand</a>
			</div>
			
			<!-- tile 4 -->
			<div class="tile">
				<div class="tile_name"> ... </div><div class="tile_title"> ... </div>
				<a class="content_expand" onClick="onShow_TileOverlay(this);">Expand</a>
			</div>
		</div>
	
*/
	
	// resize overlay height to match content area or vice versa
	function onResize_TileOverlay() {
		if ( $('.tile_overlay').length ) {
			$('.middle').height('auto');
			$('.tile_overlay').height('auto');
			
			middle_height = $('.middle').height();
			overlay_height = $('.tile_overlay').height();
			if (middle_height > overlay_height) {
				$('.tile_overlay').height( middle_height );
			} else {
				$('.middle').height( overlay_height );
			}
		}
	};
	
	// Scroll Top
	function scrollTop() {
	  $('html, body' ).animate( { scrollTop: 0 }, 'slow');
	}
	
	// display overlay with expanded tile content
	function onShow_TileOverlay(btn) {
		tile = $(btn).parents('.tile');
		idx = $(tile).index('.tile');
		$('.tile_overlay_page').hide();
		$('.tile_overlay_page').eq( idx ).show();
		$('.tile_overlay').show();
		onResize_TileOverlay();
		scrollTop();
	};
	
	// hide overlay
	function onClose_TileOverlay() {
		$('.tile_overlay').hide();
		$('.middle').height('auto');
	};
	
	// display previous tile content
	function onPrev_TileOverlay(btn) {
		idx = $('.tile_overlay_page:visible').index();
		if (idx <= 0) {
			$('.tile_overlay_page').hide();
			$('.tile_overlay_page').last().show();
		} else {
			$('.tile_overlay_page').hide();
			$('.tile_overlay_page').eq( idx - 1 ).show();
		}
		onResize_TileOverlay();
	};
	
	// display next tile content
	function onNext_TileOverlay(btn) {
		idx = $('.tile_overlay_page:visible').index();
		pages = ($('.tile_overlay_page').length - 1);
		if (idx >= pages) {
			$('.tile_overlay_page').hide();
			$('.tile_overlay_page').first().show();
		} else {
			$('.tile_overlay_page').hide();
			$('.tile_overlay_page').eq( idx + 1 ).show();
		}
		onResize_TileOverlay();
	};