<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ChatLive.aspx.vb" Inherits="Visitors_ChatLive" %>

<%@ Register Src="../Controls/CustomContent.ascx" TagName="CustomContent" TagPrefix="uc" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>Charter.com - Chat</title>
	    <link type="text/css" rel="stylesheet" href="../Styles/Charter.css" />
		<script type="text/javascript">
		
	var sValid = "";

	function validate(oForm) {	    
	    sValid = "";
	    bFocused = false;
	    if(CheckReq(oForm,"fname","lname","email","phone","chatSupportGroup")) {
	        if (oForm.email.value.length > 0) {
		        checkEmail(oForm.email);
		        }
	        if (oForm.phone.value.length > 0) {
		        checkPhone(oForm.phone, "Phone #");
		        }
	    }
	    if(sValid > "") {
		    alert(sValid);
		    return false;
	    } else {
		    return true;
		}
    }

    /*
	@func bool | checkPhone | Makes certain that the input value has at least 10 digits
	@parm object | oField | Input object to validate
	@parm string | sInput | Label for input object
	@rdesc Returns true if compare works, otherwises adds error message to sValid
	*/	
	function checkPhone(oField, sInput) {
		var xText = new String(oField.value);
		var oPattern = /^\d{3}-\d{3}-\d{4}.{0,}/;
		if(!oPattern.test(oField.value) && oField.value > "") {
			xText = xText.replace(".","-");
			oField.value = xText.replace(".","-");
			if(!oPattern.test(oField.value) && oField.value > "") {
				sValid += "Please enter a valid phone number for " + sInput + "\nFormat : ###-###-####...\n";
				setFocus(oField);
				return false;
			}
			return true;
		}
		return true;
	}

	/*
	@func bool | checkEmail | Compares the value of the object passed in to a Regular Express
	@parm object | oField | Input object to validate
	@rdesc Returns true if compare works, otherwises adds error message to sValid
	*/
	function checkEmail(oField) {
		var emailStr = oField.value;
	
		/* The following variable tells the rest of the function whether or not
		to verify that the address ends in a two-letter country or well-known
		TLD.  1 means check it, 0 means don't. */
		var checkTLD=1;

		var knownDomsPat=/^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum)$/;
		var emailPat=/^(.+)@(.+)$/;

		var specialChars="\\(\\)><@,;:\\\\\\\"\\.\\[\\]";
		var validChars="\[^\\s" + specialChars + "\]";

		/* The following pattern applies if the "user" is a quoted string (in
		which case, there are no rules about which characters are allowed
		and which aren't; anything goes).  E.g. "jiminy cricket"@disney.com
		is a legal e-mail address. */
		var quotedUser="(\"[^\"]*\")";

		/* The following pattern applies for domains that are IP addresses,
		rather than symbolic names.  E.g. joe@[123.124.233.4] is a legal
		e-mail address. NOTE: The square brackets are required. */
		var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;

		var atom=validChars + '+';
		var word="(" + atom + "|" + quotedUser + ")";
		var userPat=new RegExp("^" + word + "(\\." + word + ")*$");

		/* The following pattern describes the structure of a normal symbolic
		domain, as opposed to ipDomainPat, shown above. */
		var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");
		var matchArray=emailStr.match(emailPat);
		if (matchArray==null) {
			sValid += "E-mail address is invalid (check for '@' and '.')\n";
			setFocus(oField);			
			return false;
		} 
		
		var user=matchArray[1];
		var domain=matchArray[2];

		// Start by checking that only basic ASCII characters are in the strings (0-127).
		for (i=0; i<user.length; i++) {
			if (user.charCodeAt(i)>127) {
				sValid += "The e-mail username contains invalid characters\n";
				setFocus(oField);
				return false;
			}
		}

		// Check domain
		for (i=0; i<domain.length; i++) {
			if (domain.charCodeAt(i)>127) {
				sValid += "The e-mail domain name contains invalid characters\n";
				setFocus(oField);
				return false;
			}
		}

		// Check user
		if (user.match(userPat)==null) {
			sValid += "The e-mail username is invalid\n";
			setFocus(oField);
			return false;
		}

		/* If the e-mail address is at an IP address (as opposed to a symbolic
		host name) make sure the IP address is valid. */
		var IPArray=domain.match(ipDomainPat);
		if (IPArray!=null) {
			for (var i=1;i<=4;i++) {
				if (IPArray[i]>255) {
					sValid += "The e-mail destination IP address is invalid\n";
					setFocus(oField);
					return false;
				}
			}
		return true;
		}

		// Domain is symbolic name.  Check if it's valid.
		var atomPat=new RegExp("^" + atom + "$");
		var domArr=domain.split(".");
		var len=domArr.length;
		for (i=0;i<len;i++) {
			if (domArr[i].search(atomPat)==-1) {
				sValid += "The e-mail domain name is invalid.\n";
				setFocus(oField);
				return false;
			}
		}

		/* domain name seems valid, but now make sure that it ends in a
		known top-level domain (like com, edu, gov) or a two-letter word,
		representing country (uk, nl), and that there's a hostname preceding 
		the domain or country. */
		if (checkTLD && domArr[domArr.length-1].length!=2 && 
			domArr[domArr.length-1].search(knownDomsPat)==-1) {
			sValid += "The e-mail address must end in a well-known domain or two letter country\n";
			setFocus(oField);
			return false;
		}

		// Make sure there's a host name preceding the domain.
		if (len<2) {
			sValid += "This e-mail address is missing a hostname\n";
			setFocus(oField);
			return false;
		}

		// If we've gotten this far, everything's valid!

		return true;
	}
	
	/*
	@func void | setFocus | Sets cursor focus to the first input object to validate false
	@parm object | oField | Input object to set focus to
	*/	
	var bFocused = false;
	function setFocus(oField) {
		if (!bFocused) {
			oField.focus();
			bFocused = true;
		}
	}

	/*
	@func bool | CheckReq | Checks to see if form objects have values
	@parm string | sForm | Name of the form to validate
	@parm string | sInput | List all of the Input object you want to validate
	@rdesc Returns true if all inputs have value, sets sValid if they do not
	*/
	function CheckReq(oForm) {
		var oItem, LeftArg, RightArg, descTest, reqFlag;
		var sTemp = new String();
		
		for(var i = 1; i < arguments.length; i++) 
		{
			LeftArg =  arguments[i];
			var descTest = LeftArg.indexOf('~');
			if(descTest != -1) {
				RightArg = " - " + LeftArg.slice(descTest+1)
				LeftArg = LeftArg.slice(0,descTest)
			}
			oItem = eval("oForm." + LeftArg);
			switch(oItem.type) {
				case "radio":
					if(oItem.selectedIndex == -1) {
						sValid += "Some required fields are missing\n";
						oItem.focus();
						return false;
					} else
						break;
				case "select-multiple":
					if(oItem.selectedIndex == -1) {
						sValid += "Some required fields are missing\n";
						oItem.focus();
						return false;
					} else
						break;				
				case "select-one":
					if(oItem.selectedIndex == 0) {
						sValid += "Some required fields are missing\n";
						oItem.focus();
						return false;
					} else
						break;
				default :
					if(oItem.type) {
						if(!(Trim2(oItem.value))) {
							if(RightArg) {
								sValid += "Some required fields are missing " + RightArg + "\n";
								oItem.focus();
							}
							else {
								sValid += "Some required fields are missing\n";
								oItem.focus();
								return false;
							}
							
							reqFlag = 1;
							//return false;
						}
					} else {
						//alert(arguments[i]);
						var bSelected = false;
						for(var x=0;x < oItem.length;x++) {
							//alert(oItem[x].checked)
							if(oItem[x].checked)
								bSelected = true
						}
						if(!bSelected) {
							sValid += "Some required fields are missing\n";
							oItem[0].focus();
							return false;
						}
					}
					break;
			}
		}
		if(reqFlag==1) { return false; }
		return true;
	}
	
	/*
	@func String Object | trim | Trims leading and trailing white space from string. Uses prototype definition  "String.prototype.trim = trim;".
	@rdesc Returns Copy of string with leading and trailing whitespace stripped off.
	*/

    function trim() {
      return this.replace(/^\s+/,'').replace(/\s+$/,'');
    }

    /*
    ==================================================================
    LTrim(string) : Returns a copy of a string without leading spaces.
    ==================================================================
    */
    function LTrim(str) {
    /*
       PURPOSE: Remove leading blanks from our string.
       IN: str - the string we want to LTrim
    */
       var whitespace = new String(" \t\n\r");
     
       var s = new String(str);
     
       if (whitespace.indexOf(s.charAt(0)) != -1) {
          // We have a string with leading blank(s)...
     
          var j=0, i = s.length;
     
          // Iterate from the far left of string until we
          // don't have any more whitespace...
          while (j < i && whitespace.indexOf(s.charAt(j)) != -1)
             j++;
     
          // Get the substring from the first non-whitespace
          // character to the end of the string...
          s = s.substring(j, i);
       }
       return s;
    }
 
    /*
    ==================================================================
    RTrim(string) : Returns a copy of a string without trailing spaces.
    ==================================================================
    */
    function RTrim(str) {
    /*
       PURPOSE: Remove trailing blanks from our string.
       IN: str - the string we want to RTrim
     
    */
       // We don't want to trip JUST spaces, but also tabs,
       // line feeds, etc.  Add anything else you want to
       // "trim" here in Whitespace
       var whitespace = new String(" \t\n\r");
     
       var s = new String(str);
     
       if (whitespace.indexOf(s.charAt(s.length-1)) != -1) {
          // We have a string with trailing blank(s)...
     
          var i = s.length - 1;       // Get length of string
     
          // Iterate from the far right of string until we
          // don't have any more whitespace...
          while (i >= 0 && whitespace.indexOf(s.charAt(i)) != -1)
             i--;
     

          // Get the substring from the front of the string to
          // where the last non-whitespace character is...
          s = s.substring(0, i+1);
       }
     
       return s;
    }
 
    /*
    =============================================================
    Trim(string) : Returns a copy of a string without leading or trailing spaces
    =============================================================
    */
    function Trim2(str) {
    /*
       PURPOSE: Remove trailing and leading blanks from our string.
       IN: str - the string we want to Trim
     
       RETVAL: A Trimmed string!
    */
       return RTrim(LTrim(str));
    }

    function SelectSupportGroup(radioObj, newValue) {
	    if(!radioObj)
		    return;
	    var radioLength = radioObj.length;
	    if(radioLength == undefined) {
		    radioObj.checked = (radioObj.value == newValue.toString());
		    document.forms['chat_form'].elements['di'].value = '<%= Utilities.Javascript.getQueueID("cable")%>';
		    return;
	    }
	    for(var i = 0; i < radioLength; i++) {
		    radioObj[i].checked = false;
		    if(radioObj[i].value == newValue.toString()) {
			    radioObj[i].checked = true;
		    }
	    }
	    switch (newValue) {
	        case "Cable":
	            document.forms['chat_form'].elements['di'].value = '<%= Utilities.Javascript.getQueueID("cable")%>';
	            break;
	        case "Internet":
	            document.forms['chat_form'].elements['di'].value = '<%= Utilities.Javascript.getQueueID("internet")%>';
	            break;
	        case "Telephone":
	            document.forms['chat_form'].elements['di'].value = '<%= Utilities.Javascript.getQueueID("telephone")%>';
	            break;
	        case "PricingOrderServices":
	            document.forms['chat_form'].elements['di'].value = '<%= Utilities.Javascript.getQueueID("pricing/ordering")%>';
	            break;
	        case "MyAccount":
	            document.forms['chat_form'].elements['di'].value = '<%= Utilities.Javascript.getQueueID("myaccount")%>';
	            break;
	        case "BillingInquiries":
	            document.forms['chat_form'].elements['di'].value = '<%= Utilities.Javascript.getQueueID("billing")%>';
	            break;
	        case "Transfer":
	            document.forms['chat_form'].elements['di'].value = '<%= Utilities.Javascript.getQueueID("transfer")%>';
	            break;
	        default:
	            document.forms['chat_form'].elements['di'].value = '<%= Utilities.Javascript.getQueueID("cable")%>';
        }
    }

		</script>
    </head>
	<body id="centerBody" style="padding-left:14px; background-position:3px 0px; background-repeat:no-repeat; background-color:White; background-image: url('../Visitors/Images/chatBKG.jpg');">
	<script type="text/javascript" src="../Scripts/tooltip.js"></script>
		<form id="Chat" name="chat_form" method="post" action="https://admin.instantservice.com/Customer" onsubmit="return validate(this);">
		    <asp:Panel runat="server" id="pnlChatForm" visible="true">
   			    <table cellpadding="0" cellspacing="0" border="0">
   			        <tr style="">
   			             <td style="width:100%" valign="top">
                          <div style="float:left"><img style=" padding-left:10px; padding-top:5px; vertical-align:middle;" alt="" src="Images/supportGear.gif" /> &nbsp;&nbsp;<span style="font-size:19px; vertical-align:text-top; font-family:Arial; font-weight:bolder; color:#0b607d;">Online Chat</span></div><div style="padding-left:380px; padding-top:3px; background-image:none;"><img alt="" src="CMS_IMAGES/CharterLogo2010.ccom"  style="background-image:none;" /></div>
                         </td>
                    </tr>
   			        <tr style="height:235px">
   			             <td style="width:4px" valign="top">&nbsp;</td>
                    </tr>
			    </table>
    	        <asp:Panel runat="server" id="pnlOrderVerbiage" visible="false">
   			    <table cellpadding="0" cellspacing="0" border="0">
   			        <tr style="height:auto">
        		        <td align="left"><span style="font-style:normal; font-weight:lighter; font-family:Arial; text-decoration:underline; margin-left:25px;">Please verify the following information and click Submit to initiate a chat with our agents to complete your order</span></td>
    		        </tr>
   			    </table>
		        </asp:Panel>
    		    <asp:Panel runat="server" id="pnlRegularVerbiage" visible="false">
   			    <table cellpadding="0" cellspacing="0" border="0">
   			        <tr style="height:auto">
        		        <td align="left"><span style="font-style:normal; font-weight:lighter; font-family:Arial; text-decoration:underline; margin-left:25px;">Please supply the following information and click Submit to initiate a chat with our agents</span></td>
		            </tr>
		            <tr style="height:auto">
		                <td align="left" valign="top">&nbsp;<span class="smallInstOrange" style="margin-left:15px;">* Required Fields</span></td>
    		        </tr>
   			    </table>
    		    </asp:Panel>

			    <table cellpadding="2" cellspacing="0" border="0" style="font-family:Arial;">
				    <tr>
				        <td width="150" align="right" valign="middle"><span class="smallInstOrange">* </span>First Name&nbsp;&nbsp;</td>
				        <td width="350" align="left" valign="middle"><input type="text" id="fname" name="fname" runat="server" size="43" value="" style="width:195px"/></td>
				    </tr>
				    <tr>
				        <td width="150" align="right" valign="middle"><span class="smallInstOrange">* </span>Last Name&nbsp;&nbsp;</td>
				        <td width="350" align="left" valign="middle"><input type="text" id="lname" name="lname" runat="server" size="43" value=""  style="width:195px"/></td>
				    </tr>
				    <tr>
				        <td width="150" align="right" valign="middle"><span class="smallInstOrange">* </span>E-mail Address&nbsp;&nbsp;</td> 
				        <td width="350" align="left" valign="middle"><input type="text" id="email" name="email" runat="server" size="43" value="" style="width:195px" /></td>
				    </tr>
				    <tr>
				        <td width="150" align="right" valign="middle"><span class="smallInstOrange">* </span>Phone Number&nbsp;&nbsp;</td> 
				        <td width="350" align="left" valign="middle"><input type="text" id="phone" name="phone" runat="server" size="43" value=""  style="width:195px"/>&nbsp;&nbsp;(format: XXX-XXX-XXXX)</td>
				    </tr>
                    <asp:Panel runat="server" id="pnlChatSupportGroup" visible="true">
				    <tr>
				        <td colspan="2" align="left">
			                <table cellpadding="0" cellspacing="0" border="0" width="490">
				                <tr style="height:30px">
				                    <td colspan="6" align="center" valign="top"><span class="smallInstOrange">* </span>Chat Support Group: You must select ONE type and click submit</td>
				                </tr>

               				    <tr>
                                    <td width="30">&nbsp;</td>
				                    <td valign="middle"><input type="radio" id="rdoPricingOrderServices" runat="server" onclick="javascript:SelectSupportGroup(document.forms['chat_form'].elements['chatSupportGroup'], 'PricingOrderServices');" name="chatSupportGroup" value="PricingOrderServices" /></td>
				                    <td><img onclick="javascript:SelectSupportGroup(document.forms['chat_form'].elements['chatSupportGroup'], 'PricingOrderServices');" alt="Pricing/Ordering" src="CMS_IMAGES/pricingButton.ccom" style="" onmouseover="Tip('Place an Order, Pricing Information, Available Services, Serviceability Requests, Check Order Status')" onmouseout="UnTip()" /></td>
                                    <td width="40">&nbsp;</td>
                                    <td colspan="2" align="right" valign="bottom"><input style=" margin-right:5px" type="image" src="../Visitors/Images/submitButton.gif" value="Submit" /></td>
                                </tr>
               				    <tr>
                                    <td width="30">&nbsp;</td>
				                    <td valign="middle"><input type="radio" id="rdoInternet" runat="server" onclick="javascript:SelectSupportGroup(document.forms['chat_form'].elements['chatSupportGroup'], 'Internet');" name="chatSupportGroup" value="Internet" /></td>
				                    <td><img onclick="javascript:SelectSupportGroup(document.forms['chat_form'].elements['chatSupportGroup'], 'Internet');" alt="Internet" src="CMS_IMAGES/internetButton.ccom"  onmouseover="Tip('E-Mail, Online Security, Internet troubleshooting')" onmouseout="UnTip()" /></td>
                                    <td width="40">&nbsp;</td>
				                    <td valign="middle"><input type="radio" id="rdoMyAccount" runat="server" onclick="javascript:SelectSupportGroup(document.forms['chat_form'].elements['chatSupportGroup'], 'MyAccount');" name="chatSupportGroup" value="MyAccount" /></td>
				                    <td><img onclick="javascript:SelectSupportGroup(document.forms['chat_form'].elements['chatSupportGroup'], 'MyAccount');" alt="My Account" src="CMS_IMAGES/myaccountButton.ccom" onmouseover="Tip('Create and Manage E-mail Accounts/Web Space, Manage Account Settings, Download and Manage Charter Security Suite, Charter ePay (Change the way you receive your bills, View Statements, Manage or make payments, View Recent Activity, Telephone Call Usage Details)')" onmouseout="UnTip()" /></td>
                                 </tr>
               				    <tr>
                                    <td width="30">&nbsp;</td>
				                    <td valign="middle"><input type="radio" id="rdoTelephone" runat="server" onclick="javascript:SelectSupportGroup(document.forms['chat_form'].elements['chatSupportGroup'], 'Telephone');" name="chatSupportGroup" value="Telephone" /></td>
				                    <td><img onclick="javascript:SelectSupportGroup(document.forms['chat_form'].elements['chatSupportGroup'], 'Telephone');" alt="Telephone" src="CMS_IMAGES/telephoneButton.ccom" onmouseover="Tip('Call Features, Voicemail Help, Voicemail Setup, International Calling, Reading and understanding your Telephone Bill')" onmouseout="UnTip()"  /></td>
                                    <td width="40">&nbsp;</td>
				                    <td valign="middle"><input type="radio" id="rdoBillingInquiries" runat="server" onclick="javascript:SelectSupportGroup(document.forms['chat_form'].elements['chatSupportGroup'], 'BillingInquiries');" name="chatSupportGroup" value="BillingInquiries" /></td>
				                    <td><img onclick="javascript:SelectSupportGroup(document.forms['chat_form'].elements['chatSupportGroup'], 'BillingInquiries');" onmouseover="Tip('Making payments, Payment arrangements,  Reading and understanding your Bill')" onmouseout="UnTip()"  alt="Billing" src="CMS_IMAGES/billingButton.ccom"  /></td>				                    
                                 </tr>
				            </table>
				        </td>
				    </tr>
                    </asp:Panel>
                    <asp:Panel runat="server" id="pnlNoChatSupportGroup" visible="false">
   				    <tr style="height:50px">
	                    <td colspan="2" align="right" valign="bottom"><input style=" margin-right:15px" type="image" src="../Visitors/Images/submitButton.gif" value="Submit" /></td>
                    </tr>
                    </asp:Panel>
			    </table>

			    <input type="hidden" id="ai" name="ai" value="6092" />
		        <input type="hidden" id="di" name="di" runat="server" value="" />		
		        <input type="hidden" id="optionaldata" name="optionaldata" runat="server" value="" />
  		        <%--ROD COPELAND    JULY 27, 2009   ISSUE ID 6808   TAKE INTELLIRESPONSE SESSION ID AND PASS TO INSTANCE SERVICE--%>
        		<input type="hidden" id="optionaldata5" name="optionaldata5"  value="<% Response.write(request.querystring("sessionid")) %>" />
	        </asp:Panel> 
		</form>

    <uc:CustomContent ID="ucGoogleAnalyticsScriptBlock" runat="server" ContentKey="analytics:google:scriptblock" />

    <script type="text/javascript">
        document.forms['chat_form'].elements['fname'].focus();
    </script>
    		
	</body>
</html>
