<?php
/**
 * @package     Aikon typo
 *
 * @copyright   Copyright (C) 2005 - 2013 Aikon CMS, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
?>




<!-- dynamic styles style -->
<style>
	#<?php echo $uniqueId;?> h1,
	#<?php echo $uniqueId;?> h2,
	#<?php echo $uniqueId;?> h3,
	#<?php echo $uniqueId;?> h4,
	#<?php echo $uniqueId;?> h5,
	#<?php echo $uniqueId;?> h6	{
		color: <?php echo $titleColor;?>;
	}
	
	#p-<?php echo $uniqueId;?>{
		color: <?php echo $contentColor;?>;
	}
	
</style>


	<!-- content -->
<div id="<?php echo $uniqueId;?>" class="letterercontainer letterer-<?php echo $direction; ?> <?php echo $animation; ?>">

	<?php 
		/* write title. you can make your own using: $showTitle, $headLevel	,$titleColor and $titleText */
		if ($showTitle) {
			echo($heading);
		}
	?>

	<p id="p-<?php echo $uniqueId;?>" ><?php echo $contentText;?></p>
</div>

	<!-- activate the leterer -->
<script>
	// config - most controlled from the backend
	var lettersContainer = document.getElementById('<?php echo $uniqueId;?>'),
	letters, 
	delay = 1000,
	delayJump = <?php echo $animationDelay;?>,
	totalLetters;
	
	letterer( lettersContainer );
	letters = lettersContainer.getElementsByTagName('letter');
	totalLetters = letters.length;
	
	for( var i=0; i < totalLetters; i++ ){
		doTimer(letters[i], delay);
		delay += delayJump;
		if( letters[i].innerHTML == ' ' )
		delay += delayJump * 3;
	}
	

	function doTimer(letter, delay){
			setTimeout(function(){ 
			letter.removeAttribute('class');
		}, delay);
	}
</script>
