{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>
<p>In this first step you will select the competition arena, all the detials of your competition, and the type of invitation letter you want to send. Then click 'Next'</p>

<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>
	Select a Competition Arena:</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 Type:</div></td>
		<td><select name="newcomp[style]" size="1" class="textInput" style="width:220px;" />
			<option value="Everyone-vs-Everyone">Belly to Belly</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>Award Method:</div></td>
		<td><select name="newcomp[potMethod]" size="1" class="textInput" style="width:220px;" />
			<option value="Per-competitor Donations">Each competitor Donates</option>
			<option value="Individual Charity">I will supply the prize</option>
			<option value="Company Charity">My Company will supply the prize</option>
			<option value="Other-None">Other-None</option></select></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><div style="margin-left:15px;"><small>The Award can be pooled together by everyone, or you can supply it all yourself by selecting "I will supply the prize".</small></div></td>
	</tr>
	<tr>
		<td align="right" valign="middle" nowrap><div>Award Contribution Amount:</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>Enter the amount that each competitor will need to agree to pay to the winner, or if you are supplying it all yourself, enter that amount! (This amount is not collected by WeightLossWars, it is only displayed to provide motivation)</small></div></td>
	</tr>
	<tr>
		<td align="right" valign="middle" nowrap><div>Award 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 Award.</small></div></td>
	</tr>
	<tr>
		<td align="right" valign="middle"><div>The Judging 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 of Body Weight Lost</option>
			<option value="Minutes Exercise">Minutes Exercise</option>
			<option value="Distance Exercised">Distance Exercised</option>
			<option value="Weight Gained">Weight Gained</option></select></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><div style="margin-left:15px;"><small>This is 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>
			<option value="Minutes Exercise">Minutes Exercise</option>
			<option value="Distance Exercised">Distance Exercised</option>
			<option value="Weight Gained">Weight Gained</option></select></select></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><div style="margin-left:15px;"><small>This is 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. You can smack talk them to get their blood boiling, send them a motivating challenge, or a friendly, inspiring invitation.</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];
	
		if (obj.selectedIndex == other.selectedIndex) {
			if (obj.selectedIndex == 0) {
				other.selectedIndex = 1;
			} else {
				other.selectedIndex = 0;
			}
		}		
	}
	
	{/literal}
</script>