{include file="shared:layouts/comp_create_navbar.tpl"}

<form method="post" action="index.php">
<table width="100%" border=0>
 <tr>
  <td nowrap><h2> A. Competing for...</h2></td>
  <td nowrap><h2>B. The competition name is...</h2></td>
  <td nowrap><h2>C. How's competing...</h2></td>
 </tr>
 <tr>
  <td valign="top" width="30%">
    <small>
      <input type="radio" name="comp[type]" value="p2p" checked> <a href="javascript:setCompType('p2p');">Pound for pound <i>(Weight lost)</i></a><br />
      <input type="radio" name="comp[type]" value="pctWt"> <a href="javascript:setCompType('pctWt');">Percent of body weight lost</a><br />
      <input type="radio" name="comp[type]" value="minEx"> <a href="javascript:setCompType('minEx');">Total minutes excercised</a><br />
      <input type="radio" name="comp[type]" value="disEx"> <a href="javascript:setCompType('disEx');">Total distance excercised</a><br />
      <input type="radio" name="comp[type]" value="veg"> <a href="javascript:setCompType('veg');">Vegitable challenge</a><br />
      <input type="radio" name="comp[type]" value="gain"> <a href="javascript:setCompType('gain');">Weight gained</a><br />
    </small>
  </td>
  <td valign="top">
    <table border=0 cellspacing=0>
    <tr>
      <td><h3>Name:</h3></td>
      <td><input type="text" name="comp[title]" /></td>
    </tr>
    <tr>
      <td valign="top"><small><b>Examples:</b></small></td>
      <td><small>&quot;The chubby family reunion&quot;<br />&quot;Company shape-up marathon&quot;<br />&quot;Super Summer Slimdown&quot;</small></td>
    </tr>
    <tr>
      <td colspan="2">
	<br/>
        <div style="border:solid 1px black;width:98%;height:60px;">
	  test
	</div>
      </td>
    </tr>
    </table>
  </td>
  <td valign="top">
     <table border=0 cellpaddin=0 cellspacing=0>
      <tr>
	<td colspan="2">
	  <div id='enterFriendNameDiv' style='display:block;position:relative'>
	   <table border="0" cellpadding="0" cellspacing="0">
	     <tr>
	       <td colspan=2><li>Invate your friends</li></td>
             </tr>
             <tr>
	       <td align="right">
	         <small>
		   My friend's Name:
                 </small>
	       </td>
	       <td>
	         <input type="text id="comp[competitor_name]" name="comp[competitor_name]" style="width:110px;" />
	       </td>
             </tr>
             <tr>
	       <td align="right">
	         <small>
		   My friend's Email:
	         </small>
	       </td>
	       <td>
		  <input type="text" id="comp[competitor_email]" name="comp[competitor_email]" style="width:110px;" />
	       </td>
             </tr>
             <tr>
	       <td colspan="2" align="right">
	         <small>
		   <span onclick="extraCompetitors('open');" style="cursor:pointer;">
                     Add more
                   </span>
                 </small>
	        </td>
             </tr>
	   </table>
	  <div>
	  <div id="myEnteredFriends" style="display:none;position:relative">
	  </div>
	</td>
      </tr>
      <tr><td colspan="2"><li>Send them an email</li></td></tr>
      <tr>
        <td valign="top" colspan=2>
	  <table border="0" cellpadding="0" cellspacing="0">
	      <tr>
		 <td valign="top">
		    <small>
			<table border=0 cellpadding=0 cellspacing=0 width="100%">
			  <tr><td id='kind'><input type="radio" value="kind" name="comp[invite_type]" onclick="setInviteStyle('kind');"/> <a href="javascript:setInviteStyle('kind');">Kind</a></td></tr>
			  <tr><td id='smack'><input type="radio" value="smack" name="comp[invite_type]" onclick="setInviteStyle('smack');"/> <a href="javascript:setInviteStyle('smack');">Smack</a></td></tr>
			  <tr><td id='challenge'><input type="radio" value="challenge" name="comp[invite_type]" onclick="setInviteStyle('challenge');" /> <a href="javascript:setInviteStyle('challenge');">Challenge</a></td></tr>
			  <tr><td id='custom'><input type="radio" value="custom" name="comp[invite_type]" onclick="setInviteStyle('custom');"/> <a href="javascript:setInviteStyle('custom');">Make Your Own</a></td></tr>
                        </table>
		    </small>
		 </td>
		 <td valign="top">
		    <div id="InvateW" style="border-bottom:solid 1px #CCC;border-left:solid 1px #CCC;padding-right:5px;visibility:hidden;">
			<small>
			   <input type="radio" value="heavy" name="comp[invite_subtype]" /> <a href="javascript:setInviteWeight('heavy');">Heavy</a><br />
			   <input type="radio" value="medium" name="comp[invite_subtype]" /> <a href="javascript:setInviteWeight('medium');">Medium</a><br />
			   <input type="radio" value="light" name="comp[invite_subtype]" /> <a href="javascript:setInviteWeight('light');">Light</a><br />
			</small>
		    </div>
		</td>
	     </tr>
	  </table>
        </td>
     </tr>
     </table>
  </td>
</tr>
</table>
<br />
<table border="0" cellpadding="0" width="100%">
 <tr>
   <td align="right">tab</td>
 </tr>
 <tr>
   <td>
      <div id="letterHolder" name="letterHolder" style="border:solid 1px black;height:410px;width:100%">
      </div>
   </td>
 </tr>
</table>
{* <iframe src="?pg=compCreate/inviteFrame" style="width:100%;height:410px;" scrollbars="no" frameborder="0"></iframe> *}

<div id="invite-div"></div>
<br />

<div align="right">
  <a href="?pg=compCreate/step2"><img src="{$skinFolder}images/btn_next.gif" alt="Next" border="0" /></a>
</div>

<div id="myCompetitors" style="width:300px;background-color:white;zIndex:100;position:absolute;display:none;top:-70px;left:300px;border:solid 1px #CCC;filter: alpha(opacity=90)">
  <center>
   <table border="0" cellpadding="1" cellspacing="0" width="95%">
      <tr><td align="right" valign="top" style="height:5px"><small><span style="cursor:pointer;" onclick="extraCompetitors('close');">close window</span><small></td></tr>
      <tr><td style="border-bottom:solid 1px #CCC;"><h2>More Competitors...</td></tr>
      <tr>
         <td align="center">
	    <table id="competitorsTable" border="0" cellpadding="2" cellspacing="0" width="90%">
                <tr>
		  <td></td>
		  <td align="center" valign="bottom">Name</td>
                  <td align="center" valign="bottom">Email</td>
                </tr>
	        <tr>
		  <td>2.</td>
		  <td><input type="text" id="comp[competitor_name]" name="comp[competitor_name]" style="width:110px;" /></td>
		  <td><input type="text" id="comp[competitor_email]" name="comp[competitor_email]" style="width:110px;" /></td>
		</tr>
	        <tr>
		  <td>3.</td>
		  <td><input type="text" id="comp[competitor_name]" name="comp[competitor_name]" style="width:110px;" /></td>
		  <td><input type="text" id="comp[competitor_email]" name="comp[competitor_email]" style="width:110px;" /></td>
		</tr>
	        <tr>
		  <td>4.</td>
		  <td><input type="text" id="comp[competitor_name]" name="comp[competitor_name]" style="width:110px;" /></td>
		  <td><input type="text" id="comp[competitor_email]" name="comp[competitor_email]" style="width:110px;" /></td>
		</tr>
	        <tr>
		  <td>5.</td>
		  <td><input type="text" id="comp[competitor_name]" name="comp[competitor_name]" style="width:110px;" /></td>
		  <td><input type="text" id="comp[competitor_email]" name="comp[competitor_email]" style="width:110px;" /></td>
		</tr>
	        <tr>
		  <td>6.</td>
		  <td><input type="text" id="comp[competitor_name]" name="comp[competitor_name]" style="width:110px;" /></td>
		  <td><input type="text" id="comp[competitor_email]" name="comp[competitor_email]" style="width:110px;" /></td>
		</tr>
	        <tr>
		  <td>7.</td>
		  <td><input type="text" id="comp[competitor_name]" name="comp[competitor_name]" style="width:110px;" /></td>
		  <td><input type="text" id="comp[competitor_email]" name="comp[competitor_email]" style="width:110px;" /></td>
		</tr>
	        <tr>
		  <td>8.</td>
		  <td><input type="text" id="comp[competitor_name]" name="comp[competitor_name]" style="width:110px;" /></td>
		  <td><input type="text" id="comp[competitor_email]" name="comp[competitor_email]" style="width:110px;" /></td>
		</tr>
	        <tr>
		  <td>9.</td>
		  <td><input type="text" id="comp[competitor_name]" name="comp[competitor_name]" style="width:110px;" /></td>
		  <td><input type="text" id="comp[competitor_email]" name="comp[competitor_email]" style="width:110px;" /></td>
		</tr>
	        <tr>
		  <td>10.</td>
		  <td><input type="text" id="comp[competitor_name]" name="comp[competitor_name]" style="width:110px;" /></td>
		  <td><input type="text" id="comp[competitor_email]" name="comp[competitor_email]" style="width:110px;" /></td>
		</tr>
	        <tr>
		  <td>11.</td>
		  <td><input type="text" id="comp[competitor_name]" name="comp[competitor_name]" style="width:110px;" /></td>
		  <td><input type="text" id="comp[competitor_email]" name="comp[competitor_email]" style="width:110px;" /></td>
		</tr>
		<tr>
		  <td colspan="3" align="right"><small><span style="cursor:pointer;" onclick='addMoreCompetitors();'>Add More Lines</span></small></td>
		</tr>
            </table>
         </td>
      </tr>
      <tr>
	<td align="right" style="border-top:solid 1px #CCC;"><img style="cursor:pointer;" onclick="addingCompetitors();" src="{$skinFolder}images/btn_next.gif" alt="Add" border="0" /></td>
      </tr>
   </table>
  </center>
</div>

</form>

<script language="javascript" type="text/javascript" src="/js/js-get-data.js"></script>
<script language="javascript" type="text/javascript" src="/js/AJAX.js"></script>

<script language="JavaScript">
	
        //jsGetData('?pg=jsGetData','invite-div', 'madlib.form', '&compType=friends&inviteType=smack');

	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 setCompType(type) {
		checkValue(type, 'comp[type]');
	}

	function setInviteStyle(type) {
		checkValue(type, 'comp[invite_type]');
		var oInvateW = document.getElementById('InvateW');
		
		if(type == 'custom')
		  oInvateW.style.visibility = "hidden";
		else
 		  oInvateW.style.visibility = "visible";

	        setTypeUnderLine(type);
 	}

	function setInviteWeight(type) {
		checkValue(type, 'comp[invite_subtype]');
	}

	function checkValue(type, eName) {
		var aInput=document.getElementsByName(eName);
		for (i = 0; i < aInput.length; i++)
		{
			aInput[i].checked = (aInput[i].value == type) ? true : false;
		}
	}

	/*  This functions should go inside of JS file  *******/

	var prevType = "";
	function setTypeUnderLine(type)
	{
	    if(prevType != "")
	    {
		var oldTypeLine = eval("document.getElementById('"+prevType+"')");
		oldTypeLine.style.borderBottom = "";
            }
	    var oTypeLine = eval("document.getElementById('"+type+"')");
	    oTypeLine.style.borderBottom = "solid 1px #CCC";
	    prevType = type;
	    return;
	}

	// This function adds a new row in the CompetitorsTable to add more competitors
        // the current limit of competitors is 10
	function addMoreCompetitors()
	{
	  var oTable = document.getElementById("competitorsTable");
	  var rowNum = oTable.rows.length - 1;
          if(rowNum >= 15){
		alert('message: No more than 15');
		return;
	  }
	  var w = oTable.insertRow(rowNum);
	  var x = w.insertCell(0);
	  var y = w.insertCell(1);
	  var z = w.insertCell(2);
	
	  rowNum++;
	  x.innerHTML = rowNum + ".";
	  y.innerHTML = "<input type='text' id='comp[competitor_name]' name='comp[competitor_name]' style='width:110px;' />";
	  z.innerHTML = "<input type='text' id='comp[competitor_email]' name='comp[competitor_email]' style='width:110px;' />";
	  
	  return;
	}

	function extraCompetitors(type){
	  var oDiv = document.getElementById("myCompetitors");

	  if(type == "close"){
	     oDiv.style.display = "none";
	  }else{
	      var nameValidator = document.getElementsByName("comp[competitor_name]");
	      var emailValidator = document.getElementsByName("comp[competitor_email]");
	
		/*alert(nameValidator[0].value);
		alert(emailValidator[0].value);*/
	        if(nameValidator[0].value != "" && emailValidator[0].value != "")
		{
		   var goOn = validateEmail(emailValidator[0].value,0);
		   if(!goOn)
		     return;
     
		   oDiv.style.display = "block";
	        }
		else
		{
		   if(nameValidator[0].value == "" && emailValidator[0].value == ""){
			alert("Please enter the information of your first competitor before adding more competitors");
			return;
		   }
		   if(nameValidator[0].value == ""){
		   	alert("Please enter the name of your first competitor before adding more competitors");
			return;
		   }
		   if(emailValidator[0].value == ""){
			alert("Please enter the email of your first competitor before adding more competitors");
			return;
		   }

	        }
	  }
	  return;
	}

	function validateEmail(email,comp){
	  var validated = false;
	  var at = false;
	  var dot = false;
	  comp = comp + 1;

	  if(email.indexOf("@") > -1)
		at = true;

	  if(email.indexOf(".") > -1)
		dot = true;


	  if(dot && at)
		validated = true;

	  if(!dot && at)
	     alert('Please correct the email address for competitor '+comp+', (.) character missing');

	  if(!at && dot)
	     alert('Please correct the email address for competitor '+comp+', (@) character missing');

	  if(!validated && !at && !dot)
	     alert('Please enter a valid email address for competitor '+comp);
	
	  return validated;        
	}

	function addingCompetitors()
        {
	   var nameValidator = document.getElementsByName("comp[competitor_name]");
	   var emailValidator = document.getElementsByName("comp[competitor_email]");
	   var validator;

	   for(i=1;i<nameValidator.length;i++)
	   {
	      if(nameValidator[i].value != ""){
	         validator = validateEmail(emailValidator[i].value,i);
		 highLigh('competitorsTable',i,2,validator);
		 if(!validator){
		   return false;
	         }
	      }
	   }	
	}

	function highLigh(tableName,row,cell,validator){
	   var oTable = eval("document.getElementById('"+tableName+"')");
	   var highLightRow = oTable.rows[row].cells[cell];
	   highLightRow.style.backgroundColor = !validator ? "darkred" : "";
           return;
	}

	{/literal}
</script>