<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ScheduleInstallation.ascx.vb" Inherits="Controls_ScheduleInstallation" %>

<script language="javascript" type="text/javascript">
	var first = 0;
	var second = 0;

	function prevFirst()
	{
		document.getElementById("tblFirst" + first).style.display = "none";
		document.getElementById("tblFirst" + parseInt(first - 1)).style.display = "block";
		document.getElementById("lnkNextFirst").style.visibility = "visible";
		
		if (document.getElementById("tblFirst" + parseInt(first - 2)) == null)
		{
			document.getElementById("lnkPrevFirst").style.visibility = "hidden";
		}
		
		first = first  - 1; 
	}
	
	function nextFirst()
	{
		if (document.getElementById("tblFirst" + parseInt(first + 1)) != null)
		{	
			document.getElementById("tblFirst" + first).style.display = "none";
			document.getElementById("tblFirst" + parseInt(first + 1)).style.display = "block";
			document.getElementById("lnkPrevFirst").style.visibility = "visible";
			
			if (document.getElementById("tblFirst" + parseInt(first + 2)) == null)
			{
				document.getElementById("lnkNextFirst").style.visibility = "hidden";
			}
			
			first = first + 1;
		} 
	}

	function prevSecond()
	{
		document.getElementById("tblSecond" + second).style.display = "none";
		document.getElementById("tblSecond" + parseInt(second - 1)).style.display = "block";
		document.getElementById("lnkNextSecond").style.visibility = "visible";
		
		if (document.getElementById("tblSecond" + parseInt(second - 2)) == null)
		{
			document.getElementById("lnkPrevSecond").style.visibility = "hidden";
		}
		
		second = second  - 1; 
	}
	
	function nextSecond()
	{
		if (document.getElementById("tblSecond" + parseInt(first + 1)) != null)
		{	
			document.getElementById("tblSecond" + second).style.display = "none";
			document.getElementById("tblSecond" + parseInt(second + 1)).style.display = "block";
			document.getElementById("lnkPrevSecond").style.visibility = "visible";
			
			if (document.getElementById("tblSecond" + parseInt(second + 2)) == null)
			{
				document.getElementById("lnkNextSecond").style.visibility = "hidden";
			}
			
			second = second + 1;
		} 
	}
	
	function chkFirst_click(i)
	{
		var elem = document.forms[0]["chkFirst" + i];
		if (elem.checked)
		{
			if (document.forms[0]["txtFirst1"].value == "")
			{
			    document.forms[0]["txtFirst1"].value = i;
				document.getElementById("lblFirst1").innerHTML = elem.title;
			}
			else if (document.forms[0]["txtFirst2"].value == "") 
			{
				document.forms[0]["txtFirst2"].value = i;
				document.getElementById("lblFirst2").innerHTML = elem.title;
			}
			else
			{
				document.forms[0]["chkFirst" + document.forms[0]["txtFirst2"].value].checked = false;
				document.forms[0]["txtFirst2"].value = i;
				document.getElementById("lblFirst2").innerHTML = elem.title;
			}
		}
		else 
		{
			if (document.forms[0]["txtFirst1"].value == i)
			{
				document.forms[0]["txtFirst1"].value = "";
				document.getElementById("lblFirst1").innerHTML = "Please select the first preferred appointment time from the calendar above";
			}
			else if (document.forms[0]["txtFirst2"].value == i)
			{
				document.forms[0]["txtFirst2"].value = "";
				document.getElementById("lblFirst2").innerHTML = "Please select the second preferred appointment time from the calendar above";
			}
		}
	}

	function chkSecond_click(i)
	{
		var elem = document.forms[0]["chkSecond" + i];
		
		if (elem.checked)
		{
			if (document.forms[0]["txtSecond1"].value == "")
			{
				document.forms[0]["txtSecond1"].value = i;
				document.getElementById("lblSecond1").innerHTML = elem.title;
			}
			else if (document.forms[0]["txtSecond2"].value == "") 
			{
				document.forms[0]["txtSecond2"].value = i;
				document.getElementById("lblSecond2").innerHTML = elem.title;
			}
			else
			{
				document.forms[0]["chkSecond" + document.forms[0]["txtSecond2"].value].checked = false;
				document.forms[0]["txtSecond2"].value = i;
				document.getElementById("lblSecond2").innerHTML = elem.title;
			}
		}
		else 
		{
			if (document.forms[0]["txtSecond1"].value == i)
			{
				document.forms[0]["txtSecond1"].value = "";
				document.getElementById("lblSecond1").innerHTML = "Please select the first preferred appointment time from the calendar above";
			}
			else if (document.forms[0]["txtSecond2"].value == i)
			{
				document.forms[0]["txtSecond2"].value = "";
				document.getElementById("lblSecond2").innerHTML = "Please select the second preferred appointment time from the calendar above";
			}
		}
	}	

	function validate()
	{
		var message = "";
		
		if (typeof document.forms[0]["txtFirst1"] != "undefined")
		{
			if (document.forms[0]["txtFirst1"].value == "")
			{
				message += "<li>No appointment time for the first service installation is selected</li>";
			}
		}
		
		if (typeof document.forms[0]["txtSecond1"] != "undefined")
		{
			if (document.forms[0]["txtSecond1"].value == "")
			{	
				message += "<li>No appointment time for the second service installation is selected</li>";
			}
		}
		
		if (message.length > 0)
		{
			document.getElementById("lblMessage").innerHTML = "<ul>" + message + "</ul>";
			return false;
		}
		else
		{
			document.getElementById("lblMessage").innerHTML = "";
			return true;
		}
	}		
</script>


<div class="dotruleCenter">
	<p id="pInstruction" runat="server">
		Your order has been submitted. Your confirmation number is <asp:Label ID="lblConfirmation" runat="server" Font-Bold="true"></asp:Label>
		<br /><br />
		<span style="font-weight:bold">Please choose 2</span> preferred installation appointment dates by checking boxes on the calender below. 
		We will attempt to schedule 1 one of the 2 you select. 
		If neither are available, we will contact you by phone to set up the appointment.
	</p>

	<asp:Panel ID="pnlFirst" runat="server">
		<table>
			<tr>
				<td colspan="2" style="font-weight:bold">
					<asp:Label ID="lblFirst" runat="server"></asp:Label> Installation				
					<input type="hidden" name="txtFirst1" value="" />
					<input type="hidden" name="txtFirst2" value="" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<asp:Literal ID="ltrFirst" runat="server"></asp:Literal>
					<table id="scheduleWidget" cellpadding="0" cellspacing="0">
						<tr>
							<th class="calendarNext">
								<a href="javascript:void prevFirst()" id="lnkPrevFirst" style="visibility:hidden">&lt;&lt; Prev 2 weeks</a>&nbsp;&nbsp;
								<a href="javascript:void nextFirst()" id="lnkNextFirst">Next 2 weeks &gt;&gt;</a>
							</th>
						</tr>
					</table>
				</td>				
			</tr>
			<tr>
				<td colspan="2">
					<div style="font-weight:bold">Your preferred times:</div>
					<ul>
						<li><span id="lblFirst1">Please select the first preferred appointment time from the calendar above</span></li>
						<li><span id="lblFirst2">Please select the second preferred appointment time from the calendar above</span></li>
					</ul>
				</td>
			</tr> 
		</table>
	</asp:Panel>

	<asp:Panel ID="pnlSecond" runat="server">
		<table>
			<tr>
				<td colspan="2" style="font-weight:bold">
					<asp:Label ID="lblSecond" runat="server"></asp:Label> Installation				
					<input type="hidden" name="txtSecond1" value="" />
					<input type="hidden" name="txtSecond2" value="" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<asp:Literal ID="ltrSecond" runat="server"></asp:Literal>
					<table id="scheduleWidget" cellpadding="0" cellspacing="0">
						<tr>
							<th class="calendarNext">
								<a href="javascript:void prevSecond()" id="lnkPrevSecond" style="visibility:hidden">&lt;&lt; Prev 2 weeks</a>&nbsp;&nbsp;
								<a href="javascript:void nextSecond()" id="lnkNextSecond">Next 2 weeks &gt;&gt;</a>
							</th>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
						
			</tr>
			<tr>
				<td colspan="2">
					<div style="font-weight:bold">Your preferred times:</div>
					<ul>
						<li><span id="lblSecond1">Please select the first preferred appointment time from the calendar above</span></li>
						<li><span id="lblSecond2">Please select the second preferred appointment time from the calendar above</span></li>
					</ul>
				</td>
			</tr> 
		</table>
	</asp:Panel>
</div>
				 	
<table cellpadding="0" cellspacing="0" style="width:100%">
	<tr>
		<td colspan="2">&nbsp;</td>
	</tr>
	<tr>
		<td colspan="2">
			<span id="lblMessage" style="color:Red"></span>
			<asp:Label ID="lblError" runat="server"></asp:Label>
		</td>
	</tr>
	<tr>
		<td colspan="2" style="text-align:right">
			<asp:ImageButton ID="btnNext" runat="server" ImageUrl="../Images/but_continueArrows.gif" AlternateText="Continue" Height="19.75px" Width="90px" />
		</td>
	</tr>
</table>
