{stored_object name=$smarty.session.session_id|truncate:10:"" type="newcomp" from="newcomp" assign="newcomp"}

{if $smarty.request.confirmReset}{stored_object name=$smarty.session.session_id|truncate:10:"" type="signup" destroy="true"}{/if}

{include_php file="shared_handle:newcomp.createInvitation"}

<form name="compStartForm" method="post" style="margin:0px;">
<input type="hidden" name="pg" value="{toc_next}">
<input type="hidden" name="no_expire" value="true">
<input type="hidden" id="letterType" name="newcomp[letterType]" value="{if not $newcomp.letterType}customLetter{/if}">

<h1 class="underline">Create a Competition: Step 2</h1>
<br />
<h2 class="withBG">
	<div class="topRight hideShow">
		<a href="javascript:toggle('makeInvite', 'hideMakeInvite', 'showHide');"><img id="makeInvite_img" src="./img/blank.gif" class="showHide_{if $newcomp.hideMakeInvite eq 1}off{else}on{/if}" alt="show/hide" border="0" /></a></div>
	Create Your Invitation Letter:</h2>
	<input type="hidden" id="hideMakeInvite" name="newcomp[hideMakeInvite]" value="{$newcomp.hideMakeInvite|default:"0"}">
<div>	
	In this step you will create an email letter to invite your competitors into your Weight Loss War!<br /><br />
	Select an Example letter or a fill-in-the-blanks letter to Edit.  If you don't like any of those letters then simply click on 
	<b>'Create My Own'</b> below and write your own challenge invitation!  Then click <b>'Next'</b> below.</div>

<div id="makeInvite" style="display:{if $newcomp.hideMakeInvite eq 1}none{else}block{/if};">	
	{toc_next assign="next"}
	{toc_prev assign="prev"}
		
	<br />
	
	<table>
	<tr>
		<td valign="top"><div>
			<h2 class="withBG">Examples:</h2>
			<div style="margin:0px 10px 0px 10px;">
				{foreach from=$examples key="key" item="example"}
					<a href="javascript://" onclick="setExample({$key});">{$example.title}</a><br />
				{foreachelse}
					Sorry, there are no<br />examples for this combination<br />of competition type and<br />invitation letter type.
				{/foreach}
			</div>
		</div></td>
		<td>
			<h2 class="withBG">{$newcomp.invitationType|niceText} Letter</h2>
			<table style="border:1px solid #AAAAAA;background-color:#CCCCCC;" width="500">
			<tr>
				<td><div>
					{if $madlibs|@count}
						<select id="madlibsElement" name="newcomp[selectedMadlib]" onchange="setMadlib(this.selectedIndex);">
							<option value="">(Select a MadLib)</option>
						{foreach from=$madlibs item="madlib"}
							<option value="{$madlib.id}">{$madlib.title}</option>
						{/foreach}
						</select>
					{else}
						No Madlibs Available!
					{/if}
					<a href="javascript://" onclick="toggleType('customLetter');" class="button">Create My Own</a>
				</div></td>
			</tr>
			<tr>
				<td align="left">
					<div id="madlib" align="left" style="padding:8px;border:1px solid #CCCCCC;background-color:#FFFFFF;display:{if $newcomp.letterType eq "madlib"}block{else}none{/if};">
						{foreach from=$madlibs key="key" item="madlib"}
							<div id="madlib{$key}" style="display:{if $newcomp.selectedMadlib eq $madlib.id}block{else}none{/if};">{eval var=$madlib.body|replace:"\n":"<br />"}</div>
						{/foreach}
						</div>
	
					<div id="customLetter" style="display:{if $newcomp.letterType eq "customLetter" OR not $newcomp.letterType}block{else}none{/if};">
						<textarea id="customLetterElement" name="newcomp[customLetter]" rows="20" cols="40" style="width:480px;" class="textarea"></textarea></div>
				</td>
			</tr>
			</table>
		</td>
	</tr>
	</table>
</div>
<br />

<div class="hBox" style="text-align:right;margin:0px;"">
	{if $prev.pageName}<input type="image" src="{$skinFolder}images/btn_back.gif" class="btn_image" onclick="pg.value='{$prev.pageName}';">&nbsp; {/if}
	{if $next.pageName}<input type="image" src="{$skinFolder}images/btn_next.gif" class="btn_image" onclick="pg.value='{$next.pageName}';">{/if}	
</div>

</form>

{stored_object_fill_form object=$newcomp name="newcomp"}

<script language="JavaScript">
	
	var examples = Array();
	{foreach from=$examples key="key" item="example"}
	examples[{$key}] = '{eval var=$example.body|addslashes|replace:"\r":""|replace:"\n":"\\n"}';
	{/foreach}
	
	{literal}
	
	function toggleType(type) {
		if (type == 'customLetter') {
			document.getElementById('customLetter').style.display = 'block';
			document.getElementById('madlib').style.display = 'none';
			document.getElementById('letterType').value = 'customLetter';
			document.getElementById('madlibsElement').selectedIndex = 0;
		} else {
			document.getElementById('customLetter').style.display = 'none';
			document.getElementById('madlib').style.display = 'block';
			document.getElementById('letterType').value = 'madlib';
		}
	}
	
	function setExample(key) {
		toggleType('customLetter');
		var ta = document.getElementById('customLetterElement');
	
		if (!ta.value || confirm('Are you sure you want to overwrite your custom letter with this example?')) {
			ta.value = examples[key];
		}
	}
	
	function setMadlib(key) {
		var obj;
		key--;
		toggleType('madlib');	
		for (var x = 0; x < {/literal}{$madlibs|@count}{literal}; x++) {
			obj = document.getElementById('madlib'+x).style.display = (x != key) ? 'none' : 'block';
		}
	}
	{/literal}
</script>