{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}

{* display var=$newcomp *}

<h1 class="underline">Create a Competition: Step 1</h1>
In this first step you will select the competition type, all the detials of your competition, and the type of invitation letter you want to send. Then click 'Next'
<br />

<form name="compStartForm" method="post" style="margin:0px;">
<input type="hidden" name="pg" value="{toc_next}">
<input type="hidden" name="no_expire" value="true">

<h2 class="withBG">
	<div class="topRight hideShow">
		<a href="javascript:toggle('selectComp','hideSelectComp', 'showHide');"><img id="selectComp_img" src="./img/blank.gif" width="48" height="17" class="showHide_{if $newcomp.hideSelectComp eq 1}off{else}on{/if}" alt="show/hide" border="0" /></a></div>
	Selected Competition Type:</h2>
<input type="hidden" id="hideSelectComp" name="newcomp[hideSelectComp]" value="{$newcomp.hideSelectComp|default:0}" />
<div id="selectComp" style="margin:10px;" style="display:{if $newcomp.hideSelectComp eq 1}none{else}block{/if};">
	<table>
	<tr>
		<td><div id="corporate" style="display:{if $newcomp.type eq "corporate"}block{else}none{/if};">
				<img src="{$skinFolder}images/icon_money.gif" width="150" height="150" class="icon" style="float:left;" />
				<div class="chunk" style="text-align:left; width:250px; height:140px;"><h2 class="withBG">Corporate</h2>
				Discover how WeightLossWars can help your business cut costs, and boost productivity!</div>
			</div>
					
			<div id="friends" style="display:{if $newcomp.type eq "friends"}block{else}none{/if};">
				<img src="{$skinFolder}images/icon_family.gif" width="150" height="150" class="icon" style="float:left;" />
				<div class="chunk" style="text-align:left; width:250px; height:140px;"><h2 class="withBG">Family/Friends</h2>
				'Call out' your friends and see who has what it takes to win the Weight War!</div>
			</div>
				
			<div id="partner" style="display:{if $newcomp.type eq "partner"}block{else}none{/if};">
				<img src="{$skinFolder}images/icon_weights.gif" width="150" height="150" class="icon" style="float:left;" />
				<div class="chunk" style="text-align:left; width:250px; height:140px;"><h2 class="withBG">Partner/Spouse</h2>
				Face off in a grueling head to head competition against your spouse or close friend.</div>
			</div>
				
			<div id="group" style="display:{if $newcomp.type eq "group"}block{else}none{/if};">
				<img src="{$skinFolder}images/icon_alert.gif" width="150" height="150" class="icon" style="float:left;" />
				<div class="chunk" style="text-align:left; width:250px; height:140px;"><h2 class="withBG">Group/Club</h2>
				Team up with your homies to battle another group in an all-out weight loss rumble</div>
			</div>
			
			<div class="chunk" style="text-align:left; width:140px; height:140px;" id="compRadios">
				<input type="radio" name="newcomp[type]" id="corporateRadio" value="corporate" onclick="selectType();" onchange="selectType();"> <a href="javascript://" onclick="document.getElementById('corporateRadio').checked='true';selectType();return false;">Corporate</a><br />
				<input type="radio" name="newcomp[type]" id="friendsRadio" value="friends" onclick="selectType();" onchange="selectType();"> <a href="javascript://" onclick="document.getElementById('friendsRadio').checked='true';selectType();return false;">Family / Friends</a><br />
				<input type="radio" name="newcomp[type]" id="partnerRadio" value="partner" onclick="selectType();" onchange="selectType();"> <a href="javascript://" onclick="document.getElementById('partnerRadio').checked='true';selectType();return false;">Partner / Spouse</a><!-- <br />
				<input type="radio" name="newcomp[type]" id="groupRadio" value="group" onclick="selectType();" onchange="selectType();"> <a href="javascript://" onclick="document.getElementById('groupRadio').checked='true';selectType();return false;">Group / Club</a> -->
			</div></td>
	</tr>
	</table>
</div>

{assign var="includeX" value="true"}

{if $newcomp.startDate}
	{assign var="startDate" value=$newcomp.startDate}
{else}
	{assign var="startDate" value=$smarty.now}
{/if}
{if $newcomp.endDate}
	{assign var="endDate" value=$newcomp.endDate}
{else}
	{assign var="endDate" value=$smarty.now|math:"x+5184000"}  {* Now + 2 Months *}
{/if}

<h2 class="withBG">
	<div class="topRight hideShow">
		<a href="javascript:toggle('selectParams','hideSelectParams', 'showHide');"><img id="selectParams_img" src="./img/blank.gif" class="showHide_{if $newcomp.hideSelectParams eq 1}off{else}on{/if}" alt="show/hide" border="0" /></a></div>
	Competition Details:</h2>
<input type="hidden" id="hideSelectParams" name="newcomp[hideSelectParams]" value="{$newcomp.hideSelectParams|default:0}" />
<div id="selectParams" style="margin:10px; display:{if $newcomp.hideSelectParams eq 1}none{else}block{/if};">
	<table>
	<tr>
		<td align="right" valign="middle"><div>Competition Title:</div></td>
		<td><input type="text" name="newcomp[title]" class="textInput" size="22" maxlength="32" style="width:220px;" /></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><div style="margin-left:15px;"><small>Give your competition a title.</small></div></td>
	</tr>
	<tr>
		<td align="right" valign="middle"><div>Start Date:</div></td>
		<td valign="middle"><div id="fCalendar0" style="float:left; display:none; border:#999999 1px solid; width:100px; z-index:20;" align="center">
				<iframe name="frameCalendar" height="144" width="100%" src="?pg=jscalendar&id=0&year={$startDate|date_format2:"Y"}&month={$startDate|date_format2:"m"}&day={$startDate|date_format2:"j"}" scrolling="No" frameborder="image/gif"></iframe>
			</div>
			<input type="text" class="textLabel" disabled="disabled" name="newcomp[startDateViewable]" value="{if not $newcomp.startDate}Click a Date >{else}{$newcomp.startDate|date_format2:"M j, Y"}{/if}">
			<a href="javascript:toggle('fCalendar0');" onmouseover="self.status='Show/Hide Calendar'; return true;" onmouseout="self.status=''; return true;"><img src="{$skinFolder}images/ico_calendar.gif" border="0" alt="Show/Hide Calendar" /></a>
			<input type="hidden" name="newcomp[startDate]" value="">
		</td>
	</tr>
	<tr>
		<td align="right" valign="middle"><div>End Date:</div></td>
		<td valign="middle"><div id="fCalendar1" style="float:left; display:none; border:#999999 1px solid; width:100px;" align="center">
				<iframe name="frameCalendar2" height="144" width="100%" src="?pg=jscalendar&id=1&year={$endDate|date_format2:"Y"}&month={$endDate|date_format2:"m"}&day={$endDate|date_format2:"j"}" scrolling="No" frameborder="image/gif"></iframe>
			</div>
			<input type="text" class="textLabel" disabled="disabled" name="newcomp[endDateViewable]" value="{if not $newcomp.endDate}Click a Date ^{else}{$newcomp.endDate|date_format2:"M j, Y"}{/if}">
			<a href="javascript:toggle('fCalendar1');" onmouseover="self.status='Show/Hide Calendar'; return true;" onmouseout="self.status=''; return true;"><img src="{$skinFolder}images/ico_calendar.gif" border="0" alt="Show/Hide Calendar" /></a>
			<input type="hidden" name="newcomp[endDate]" value="">
		</td>
	</tr>
	
	<tr>
		<td align="right" valign="middle"><div>Competition Style:</div></td>
		<td><select name="newcomp[style]" size="1" class="textInput" style="width:220px;" />
			<option value="Everyone-vs-Everyone">Everyone vs. Everyone</option>
			<option value="Group-vs-Group">Team vs. Team</option>
			<option value="One-on-One">One on One</option></select></td>
	</tr>
	<tr>
		<td align="right" valign="middle"><div>Jackpot Method:</div></td>
		<td><select name="newcomp[potMethod]" size="1" class="textInput" style="width:220px;" />
			<option value="Per-competitor Donations">Per-competitor Donations</option>
			<option value="Individual Charity">Individual Charity</option>
			<option value="Company Charity">Company Charity</option>
			<option value="Other-None">Other-None</option></select></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><div style="margin-left:15px;"><small>The "Jackpot" money can come from everyone, or you can supply the entire "pot" by selecting "Individual Charity".</small></div></td>
	</tr>
	<tr>
		<td align="right" valign="middle" nowrap><div>Jackpot Contribution:</div></td>
		<td valign="middle"><span style="position:relative; top:-5px;">$</span><input type="text" name="newcomp[individualPotAmount]" class="textInput" size="4" maxlength="4" style="width:30px;" /><span style="position:relative; top:-5px;">.00</span></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><div style="margin-left:15px;"><small>Each individual must enter this much money into the jackpot to join the competition.</small></div></td>
	</tr>
	<tr>
		<td align="right" valign="middle" nowrap><div>Jackpot Description:</div></td>
		<td valign="middle"><input type="text" name="newcomp[potDescription]" class="textInput" size="22" maxlength="255" style="width:220px;"  /></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><div style="margin-left:15px;"><small>(optional) Enter a brief description of the jackpot.</small></div></td>
	</tr>
	<tr>
		<td align="right" valign="middle"><div>Scoring Method:</div></td>
		<td><select name="newcomp[scoringMethod]" size="1" onchange="updateScoringMethod(this);" class="textInput" style="width:220px;" />
			<option value="Weight Lost">Weight Lost</option>
			<option value="Percentage Weight Lost">Percentage Weight Lost</option></select></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><div style="margin-left:15px;"><small>How the winner is determined.</small></div></td>
	</tr>
	<tr>
		<td align="right" valign="middle"><span>Tie-Breaker Method:</span></td>
		<td><select name="newcomp[tieBreakerMethod]" size="1" onchange="updateScoringMethod(this);" class="textInput" style="width:220px;" />
			<option value="Weight Lost">Weight Lost</option>
			<option value="Percentage Weight Lost"{if not $newcomp.tieBreakerMethod} selected{/if}>Percentage Weight Lost</option></select></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><div style="margin-left:15px;"><small>How the winner is determined, in the event of a tie.</small></div></td>
	</tr>
	</table>
</div>

<h2 class="withBG">
	<div class="topRight hideShow">
		<a href="javascript:toggle('selectInvite', 'hideSelectInvite', 'showHide');"><img id="selectInvite_img" src="./img/blank.gif" class="showHide_{if $newcomp.hideSelectInvite eq 1}off{else}on{/if}" alt="show/hide" border="0" /></a></div>
	Choose an Invitation Style:</h2>
<input type="hidden" id="hideSelectInvite" name="newcomp[hideSelectInvite]" value="{$newcomp.hideSelectInvite|default:0}" />	
<div id="selectInvite" style="margin:10px;" style="display:{if $newcomp.hideSelectInvite eq 1}none{else}block{/if};">
	<table>
	<tr>
		<td><div>
			Select the type of invitation you want to send.</div>
				
		<div id="smack" style="display:{if $newcomp.type eq "corporate"}block{else}none{/if};">
				<img src="{$skinFolder}images/icon_money.gif" width="150" height="150" class="icon" style="float:left;" />
				<div class="chunk" style="text-align:left; width:250px; height:140px;"><h2 class="withBG">SMACK!</h2>
				<b>example:</b><br /> &quot;Hey Blubber Butt,I challenge you to the battle of all battles...&quot;</div>
			</div>
					
			<div id="challenge" style="display:{if $newcomp.type eq "friends"}block{else}none{/if};">
				<img src="{$skinFolder}images/icon_family.gif" width="150" height="150" class="icon" style="float:left;" />
				<div class="chunk" style="text-align:left; width:250px; height:140px;"><h2 class="withBG">Challenge</h2>
				<b>example:</b><br /> &quot;I'm putting up $100 that says I can take you down in a 6-week weight-loss competition...&quot;</div>
			</div>
				
			<div id="friendly" style="display:{if $newcomp.type eq "partner"}block{else}none{/if};">
				<img src="{$skinFolder}images/icon_weights.gif" width="150" height="150" class="icon" style="float:left;" />
				<div class="chunk" style="text-align:left; width:250px; height:140px;"><h2 class="withBG">Friendly</h2>
				<b>example:</b><br /> &quot;A healthy weight loss challenge is what we all need to lose these extra pounds...&quot;</div>
			</div>
			
			<div class="chunk" style="text-align:left; width:140px; height:140px;" id="inviteRadios">
				<input type="radio" name="newcomp[invitationType]" id="smackRadio" value="smack" onclick="selectInvite();" onchange="selectInvite();"> <a href="javascript://" onclick="document.getElementById('smackRadio').checked='true';selectInvite();return false;">SMACK!</a><br />
				<input type="radio" name="newcomp[invitationType]" id="challengeRadio" value="challenge" onclick="selectInvite();" onchange="selectInvite();"> <a href="javascript://" onclick="document.getElementById('challengeRadio').checked='true';selectInvite();return false;">Challenge</a><br />
				<input type="radio" name="newcomp[invitationType]" id="friendlyRadio" value="friendly" onclick="selectInvite();" onchange="selectInvite();"> <a href="javascript://" onclick="document.getElementById('friendlyRadio').checked='true';selectInvite();return false;">Friendly</a>
			</div></td>
	</tr>
	</table>
</div>

<div class="hBox" align="right" style="margin:0px;">
	<a href="javascript:document.compStartForm.submit();"><img src="{$skinFolder}images/btn_next.gif" border="0" /></a></div>

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

</form>

	<script language="JavaScript">{literal}
	function selectType() {
		var type;
		var types = Array('corporate','friends','partner','group');
		var elems = document.getElementsByName('newcomp[type]');
	
		for (var x = 0; x < elems.length; x++) {
			if (elems[x].checked) {
				type = elems[x].value;
				break;
			}
		}
	
		if (!type) type = 'friends';
	
		for (x = 0; x < types.length; x++) {
			document.getElementById(types[x]).style.display = (types[x] != type) ? 'none' : 'block';
		}
	
		return false;
	}
	
	function selectInvite() {
		var type;
		var types = Array('smack','challenge','friendly');
		var elems = document.getElementsByName('newcomp[invitationType]');
	
		for (var x = 0; x < elems.length; x++) {
			if (elems[x].checked) {
				type = elems[x].value;
				break;
			}
		}
	
		if (!type) type = 'smack';
	
		for (x = 0; x < types.length; x++) {
			document.getElementById(types[x]).style.display = (types[x] != type) ? 'none' : 'block';
		}
	
		return false;
	}
	
	function updateScoringMethod(obj) {
		var name = obj.name;
		var other = (name == 'newcomp[scoringMethod]') ? 'newcomp[tieBreakerMethod]' : 'newcomp[scoringMethod]';
		other = document.getElementsByName(other)[0];
	
		other.selectedIndex = (obj.selectedIndex == 0) ? 1 : 0;
	}
	
	{/literal}
</script>