$(document).ready(function(){
	FormDetect.init();	
	FormDetect.getComparsionTable();
	$("#compasion").replaceWith('<div id="compasion" align="center">' + FormDetect.comparsionTable + '</div>');
	$("#show_compasion").replaceWith('<div id="show_compasion"><table width="95%" border="0" cellspacing="0" cellpadding="0"><tr><td height="30" align="left" valign="middle"><a onclick="showComparsionTable();" href="javascript:void(0);">Show comparsion table</a></td></tr></table></div>');
	$("#show_compasion").hide();
	replaceTable();
	
	if(!(FormDetect.licenseTypeSelected || FormDetect.licenseTypeUltimateSelected))
	{
		$("#purchasetype_selector").hide();
	}
	
	if(FormDetect.licenseSelectorChecked)
	{
		$("#license").slideDown("slow");
		$("#host").slideUp("slow");
	}
    else 
    {
    	$("#host").slideDown("slow");
    	$("#license").slideUp("slow");
    }
});

function productClick()
{
	productChoose = true;
}
function replaceTable()
{
	productChoose = false;
	FormDetect.getLicenseTable();
	replaceLicenseTable();
	FormDetect.getHostTable();
	replaceHostTable();
}
function basicChange()
{
	FormDetect.init();
	replaceTable();
	hideComparsionTable()
	if(FormDetect.licenseTypeSelected || FormDetect.licenseTypeUltimateSelected)
	{
		$("#purchasetype_selector").slideDown("slow");
	}
}

function replaceLicenseTable()
{
	$("#license").replaceWith('<div id="license" align="center">' + FormDetect.licenseTable + '</div>');
	if(!FormDetect.licenseSelectorChecked)$("#license").hide();
}

function replaceComparsionTable()
{

	if(!FormDetect.licenseTypeSelected && !FormDetect.licenseTypeUltimateSelected)
	{
		$("#compasion").slideDown("slow");
		$("#show_compasion").slideUp("slow");
	}
	else if(FormDetect.licenseTypeSelected || FormDetect.licenseTypeUltimateSelected)
	{
		$("#compasion").slideUp("slow");
		$("#show_compasion").slideDown("slow");
	}		
}

function showComparsionTable()
{
	$("#compasion").slideDown("slow");
	$("#show_compasion").slideUp("slow");
}

function hideComparsionTable()
{
	$("#show_compasion").slideDown("slow");
	$("#compasion").slideUp("slow");
}

function replaceHostTable()
{
	$("#host").replaceWith('<div id="host" align="center">' + FormDetect.hostTable + '</div>');
	if(!FormDetect.hostSelectorChecked)$("#host").hide();
}

function showTable()
{
	FormDetect.init();
	productChoose = false;
	if(FormDetect.licenseSelectorChecked)
	{
		$("#license").slideDown("slow");
		$("#host").slideUp("slow");
	}
    else 
    {
    	$("#host").slideDown("slow");
    	$("#license").slideUp("slow");
    }
}

function checksubmit()
{	
	var re = /^[1-9]+[0-9]*]*$/;  
	if ($("#domain").val() == "")
	{	
		alert("Error: Please enter a chat domain.");
		return false;
	}	

	if (FormDetect.hostSelectorChecked && ($("#host_quantity").val() == "" || !re.test($("#host_quantity").val())))
	{	
		alert("Error: Please input host quantity.");
		return false;
	}	

	if(!productChoose)
	{
		alert("Error: Please choose a product.");
		return false;
	}

	return true;
}


var FormDetect = {
	license_par: new Array(
	new Array("50", "199", "599", "1 year", "1", "2"),
	new Array("100", "299", "899", "1 year", "3", "4"),
	new Array("250", "499", "1499", "2 year", "5", "6"),
	new Array("500", "899", "2699", "2 year", "7", "8"),
	new Array("1000", "1299", "3899", "3 year", "9", "10"),
	new Array("Unlimited", "1999", "5999", "Life Time", "11", "12")
	),
	
	host_par: new Array(
	new Array("50", "19", "59", "199", "599", "13", "14"),
	new Array("100", "29", "89", "299", "899", "15", "16"),
	new Array("250", "49", "149", "499", "1499", "17", "18"),
	new Array("500", "89", "269", "899", "2699", "19", "20"),
	new Array("1000", "129", "389", "1299", "3899", "21", "22"),
	new Array("Unlimited", "199", "599", "1999", "5999", "23", "24")
	),
	
	productChoose:false,
	
	init: function () {
		this.licenseSelectorChecked = $("#license_selector").attr("checked");
		this.hostSelectorChecked = $("#host_selector").attr("checked");
		this.licenseTypeSelected = $("#basic_selector").attr("checked");
		this.licenseTypeUltimateSelected = $("#ultimate_selector").attr("checked");
	},

	getComparsionTable: function()
	{
		table = '<table width="95%" border="0" cellspacing="0" cellpadding="0"><tr><td height="30" align="left" valign="middle"><a onclick="hideComparsionTable();" href="javascript:void(0);">Hide comparsion table</a></td></tr></table>';
		table += '<table width="95%" border="0" cellspacing="0" cellpadding="0">';
		table += '<tr>';
        table += '<td height="28" align="left" valign="middle"><b>The comparison of main features list between Basic Edition   and Ultimate Edition:</b></td>';
        table += '</table>';
        table += '<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="pricing">';
		table += '<tr>';
        table += '<td width="29%" height="28" align="left" valign="middle" bgcolor="#eeeeee" class="wz2">Features</td>';
        table += '<td width="35%" align="center" valign="middle" bgcolor="#eeeeee" class="wz2">Basic Edition</td>';
        table += '<td width="36%" align="center" valign="middle" bgcolor="#eeeeee" class="wz2">Ultimate Edition</td>';
        table += '</tr>';
        table += '<tr>';
        table += '<td height="25" align="left" valign="middle">Tech Support</td>';
        table += '<td align="center" valign="middle">Normal</td>';
        table += '<td align="center" valign="middle">In Priority</td>';
        table += '</tr>';
        table += '<tr>';
        table += '<td height="25" align="left" valign="middle">Free Installation &amp; Integration</td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/yes.gif" alt="" width="23" height="21" /></td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/yes.gif" alt="" width="23" height="21" /></td>';
        table += '</tr>';
        table += '<tr>';
        table += '<td height="38" align="left" valign="middle">Facebook Messenger<br />';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/yes.gif" alt="" width="23" height="21" /></td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/yes.gif" alt="" width="23" height="21" /></td>';
        table += '</tr>';
        table += '<tr>';
        table += '<td height="25" align="left" valign="middle">Web Friend List</td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/yes.gif" alt="" width="23" height="21" /></td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/yes.gif" alt="" width="23" height="21" /></td>';
        table += '</tr>';
        table += '<tr>';
        table += '<td height="25" align="left" valign="middle">Web Invitation</td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/yes.gif" alt="" width="23" height="21" /></td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/yes.gif" alt="" width="23" height="21" /></td>';
        table += '</tr>';
        table += '<tr>';
        table += '<td height="25" align="left" valign="middle">Windows Desktop Client</td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/no.gif" alt="" width="20" height="20" /></td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/yes.gif" alt="" width="23" height="21" /></td>';
        table += '</tr>';
        table += '<tr>';
        table += '<td height="25" align="left" valign="middle">Video Chat</td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/no.gif" alt="" width="20" height="20" /></td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/yes.gif" alt="" width="23" height="21" /></td>';
        table += '</tr>';
        table += '<tr>';
        table += '<td height="25" align="left" valign="middle">File Transfer</td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/no.gif" alt="" width="20" height="20" /></td>';
        table += '<td align="center" valign="middle"><img src="img/webmessenger/yes.gif" alt="" width="23" height="21" /></td>';
        table += '</tr>';
        table += '</table>';
        this.comparsionTable = table;
	},
		
	
	getLicenseTable: function()
	{
		table = '<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="pricing">';
		table += '<tr>';
        table += '<td width="6%" height="28" align="center" valign="middle" bgcolor="#EEEEEE">&nbsp;</td>';
        table += '<td width="33%" align="center" valign="middle" bgcolor="#EEEEEE" class="wz2">Concurrent Users</td>';
        table += ' <td width="20%" align="center" valign="middle" bgcolor="#EEEEEE" class="wz2">Price</td>';
        table += '<td width="41%" align="center" valign="middle" bgcolor="#EEEEEE" class="wz2">Free Support & Upgrade Service</td>';
        table += '</tr>';
		for(i = 0; i < this.license_par.length; i++)
		{
			table += '<tr bgcolor="#ffffff">';
			if(this.licenseTypeSelected)
        	{
      			table += '<td height="25" align="left" valign="middle"><input type="radio" class="productid" onclick="productClick();" value="' + this.license_par[i][4] + '" name="productid"/></td>';
       		}
       		else
       		{
				table += '<td height="25" align="left" valign="middle"><input type="radio" class="productid" onclick="productClick();" value="' + this.license_par[i][5] + '" name="productid"/></td>';
       		}
        	table += '<td align="center" valign="middle">' + this.license_par[i][0]+ ' Users</td>';
        	
        	if(this.licenseTypeSelected)
        	{
        		table += '<td align="center" valign="middle">$' + this.license_par[i][1] + '</td>';
        	}
        	else
        	{
        		table += '<td align="center" valign="middle">$' + this.license_par[i][2] + '</td>';
        	}
        	table += '<td align="center" valign="middle">' + this.license_par[i][3] + '</td>';
        	table += '</tr>';
		}
		table += '<input type="hidden" value="1" name="paymenttype">';
		table += '</tbody></table>';

		this.licenseTable = table;
	},
	
	getHostTable: function()
	{
		table = '<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="pricing">';
		table += '<tr>';
        table += '<td width="6%" height="28" align="center" valign="middle" bgcolor="#EEEEEE">&nbsp;</td>';
        table += '<td width="33%" align="center" valign="middle" bgcolor="#EEEEEE" class="wz2">Concurrent Users</td>';
        table += '<td colspan="2" align="center" valign="middle" bgcolor="#EEEEEE" class="wz2">Price</td>';
        table += '</tr>';
		for(i = 0; i < this.host_par.length; i++)
		{
			table += '<tr>';
       		
       		if(this.licenseTypeSelected)
        	{
        		table += ' <td height="25" align="left" valign="middle"><input type="radio" class="productid" onclick="productClick();" value="' + this.host_par[i][5] + '" name="productid"/></td>';
       		}
       		else
       		{
				table += ' <td height="25" align="left" valign="middle"><input type="radio" class="productid" onclick="productClick();" value="' + this.host_par[i][6] + '" name="productid"/></td>';
       		}
       		
        	table += '<td align="center" valign="middle">' + this.host_par[i][0]+ ' Users</td>';
  
        	if(this.licenseTypeSelected)
        	{
        		table += '<td width="30%" align="center" valign="middle">$' + this.host_par[i][1] + '/month</td><td width="30%" align="center" valign="middle">$' + this.host_par[i][3] + '/year</td>';
        	}
        	else
        	{
        		table += '<td width="30%" align="center" valign="middle">$' + this.host_par[i][2] + '/month</td><td width="30%" align="center" valign="middle">$' + this.host_par[i][4] + '/year</td>';
        	}

        	table += '</tr>';
		}
		table += '<tr bgcolor="#ffffff"><td height="35" colspan="4" align="center" valign="middle"><div id="host_quantity_selector">Host Quantity: <input type="text" id="host_quantity" name="host_quantity" value="1" size=5> <select name="host_paymenttype"><option value="0">month</option><option value="1">year</option></select></div></td></tr></tbody></table>';

		this.hostTable = table;
	}
}