//
// This object is used to handle asynchronous calls a server 
// from a web page that doesn't violate the same-source policy 
// of most web browsers.  It uses the <script> method of calling
// the server rather than other methods like XmlHttpRequest or IFRAME.
//
// Here's an example usage of this object
//
// that = this;
// PAsync2.call(url, function(result){ that.update(result); });
//
// These two lines capture (through javascript closure) the current object scope
// and an anonymous function and have PAsync2 callback to them.
//

PAsync2 = new Object();
PAsync2.contexts = new Array();

PAsync2.call = function (url, f) {
	// validate
	if (f == null) throw 'cannot pass in null object';
	// store state
	var retVal = this.createId();
	this.contexts[retVal] =  f;
	// call asynchronously via script
	var s = document.createElement('script');
	if (url.indexOf('?') >= 0) {
		url += '&';
	} else {
		url += '?';
	}
	s.src = url + 'callback=PAsync2.callback(' + retVal + ')';
	var h = document.getElementsByTagName('head');
	h[0].appendChild(s);
	return retVal;
}
PAsync2.callback = function(id) {
	var c = this.contexts[id];
	PAsync2.contexts[id] = null;
	return c;
}
PAsync2.createId = function() {
	return new Date().getTime() + Math.random();
}

PKeyForm = function(instance) {
	this.instance = instance;
	this.isAttached = false;
	this.requiredFields = [this.instance + '-name', this.instance + '-email', this.instance + '-domain'];
	var container = document.createElement('div');
	this.container = container;
	container.id = instance+'-container';
	container.className = 'entry';
	container.style.position = 'absolute';
	container.style.visibility = 'hidden';
	container.style.left = '15%';
	container.style.top = '30%';
	html = '<div class="entryMsg" id="' + this.instance + '-msg"></div> \
	<br>\
	<form id="' + this.instance + '-form" class="entry" name="" method="post" action="testkey.jsp" onsubmit="return false;">\
		<table id="' + this.instance + '-table" class="entry">\
			<tr><th>Name:</th><td><input name="name" id="' + this.instance + '-name" value="" style="width: 200px"></td></tr>\
			<tr><th>Email:</th><td><input name="email" id="' + this.instance + '-email" value="" style="width: 200px"></td></tr>\
			<tr><th>Domain for Key:</th><td>http://<input name="domain" id="' + this.instance + '-domain" value="" style="width: 165px"></td></tr>\
			<tr><th>Your Title:</th><td><input name="title" id="' + this.instance + '-title" value="" style="width: 200px"></td></tr>\
			<tr><th>Application Area:</th><td><select name="' + this.instance + '-app" id="' + this.instance + '-app" style="width: 215px">\
				<option value="">Please Select</option>\
				<option value="Real Estate">Real Estate </option>\
				<option value="Marketing Analytics">Marketing Analytics </option>\
				<option value="Community Redevelopment">Community Redevelopment </option>\
				<option value="Other">Other </option>\
			</select></td></tr>\
			<tr><th>Company Size:</th><td><select name="' + this.instance + '-size" id="' + this.instance + '-size" class="select" style="width: 215px">\
				<option value="">Please Select</option>\
				<option value="Individual">Individual </option>\
				<option value="2-24">2-24 </option>\
				<option value="25-49">25-49 </option>\
				<option value="50-99">50-99 </option>\
				<option value="100-499">100-499 </option>\
				<option value="500 and over">500 and over </option>\
			</select</td></tr>\
		</table>\
		<br><br>\
		<input id="' + this.instance + '-submit" type="button" value="Submit" onclick="' + instance + '.submit()">\
		<input id="' + this.instance + '-close" type="button" value="Close" onclick="' + instance + '.close()">\
	</form>';
	container.innerHTML = html;
}

PKeyForm.prototype.submit = function() {
	if (this.validate()) {
		var url = "http://signup.pushpin.com/signup/createkey.jsp";
		var name = document.getElementById(this.instance + '-name').value;
		var email = document.getElementById(this.instance + '-email').value;
		var domain = document.getElementById(this.instance + '-domain').value;
		var title = document.getElementById(this.instance + '-title').value;

		var select = document.getElementById(this.instance + '-app');
		var app = select.options[select.selectedIndex].value;
		select = document.getElementById(this.instance + '-size');
		var size = select.options[select.selectedIndex].value;

		url += '?name=' + name;
		url += '&email=' + email;
		url += '&domain=' + domain;
		url += '&title=' + title;
		url += '&app=' + app;
		url += '&size=' + size;

		var that = this;
		PAsync2.call(url, function(result){ that.update(result); });
	} else {
		this.update({level: 1, msg: 'Please complete the <span class="entryError">required</span> fields.'});
	}
}

PKeyForm.prototype.update = function(result) {
	var m = document.getElementById(this.instance + '-msg');
	m.style.visibility = "visible";
	if (result.level == 1) 
	{
		m.innerHTML = result.msg;
	} else {
		m.innerHTML = "<br><br><br><br>" + result.msg + "<br><br><br><br><br>";
		var f = document.getElementById(this.instance + '-table');
		f.style.display = "none";
		var b = document.getElementById(this.instance + '-submit');
		b.style.display = "none";
	}

}

PKeyForm.prototype.attach = function() {
	if (this.isAttached == false) {
		var b = document.getElementsByTagName('body')[0];
		b.appendChild(this.container);
		this.isAttached = true;
	}
}

PKeyForm.prototype.validate = function() {
	var ret = true;
	this.lowlight();
	for (var i=0; i<this.requiredFields.length; i++) {
		var f = this.requiredFields[i];
		var v = document.getElementById(f).value; 
		if (v == '' || v == null) { 
			this.highlight(f); 
			ret = false; 
		}
	}

	var email = document.getElementById(this.instance + '-email').value;
	if (email != null && email.indexOf('@') < 0) {
		this.highlight(this.instance + '-email');
		ret = false;
	}

	return ret;
}
PKeyForm.prototype.lowlight = function() {
	for (var i=0; i<this.requiredFields.length; i++) {
		document.getElementById(this.requiredFields[i]).style.border = "1px solid #7f9db9";
	}
}
PKeyForm.prototype.highlight = function(id) {
	document.getElementById(id).style.border = "2px solid #f00";
}

PKeyForm.prototype.msg = {open: "Please provide the following infomation so that we may get<br> you started with your 30-day key."};
PKeyForm.prototype.open = function() {
	this.attach();
	this.container.style.visibility = "visible";
	var m = document.getElementById(this.instance + '-msg');
	var f = document.getElementById(this.instance + '-form');
	var t = document.getElementById(this.instance + '-table');
	var c = document.getElementById(this.instance + '-close');
	var s = document.getElementById(this.instance + '-submit');
	m.style.visibility = "visible";
	f.style.display = "block";
	f.style.visibility = "visible";
	t.style.visibility = "visible";
	t.style.display = "block";
	s.style.display = "inline";
	c.style.visibility = "visible";
	m.innerHTML = this.msg['open'];
}
PKeyForm.prototype.close = function() {
	this.container.style.visibility = "hidden";
	var m = document.getElementById(this.instance + '-msg');
	var c = document.getElementById(this.instance + '-close');
	var f = document.getElementById(this.instance + '-form');
	var t = document.getElementById(this.instance + '-table');
	m.style.visibility = "hidden";
	c.style.visibility = "hidden";
	f.style.visibility = "hidden";
	t.style.visibility = "hidden";
}

PBriefForm = function(instance) {
	this.instance = instance;
	this.isAttached = false;
	this.requiredFields = [this.instance + '-name', this.instance + '-email'];
	var container = document.createElement('div');
	this.container = container;
	container.id = instance+'-container';
	container.className = 'entry';
	container.style.position = 'absolute';
	container.style.visibility = 'hidden';
	container.style.left = '15%';
	container.style.top = '50%';
	html = '<div class="entryMsg" id="' + this.instance + '-msg"></div> \
	<br>\
	<form id="' + this.instance + '-form" class="entry" name="" method="post" action="testkey.jsp" onsubmit="return false;">\
		<table id="' + this.instance + '-table" class="entry">\
			<tr><th>Name:</th><td><input name="name" id="' + this.instance + '-name" value="" style="width: 200px"></td></tr>\
			<tr><th>Email:</th><td><input name="email" id="' + this.instance + '-email" value="" style="width: 200px"></td></tr>\
			<tr><th>Your Title:</th><td><input name="title" id="' + this.instance + '-title" value="" style="width: 200px"></td></tr>\
			<tr><th>Application Area:</th><td><select name="' + this.instance + '-app" id="' + this.instance + '-app" style="width: 215px">\
				<option value="">Please Select</option>\
				<option value="Real Estate">Real Estate </option>\
				<option value="Marketing Analytics">Marketing Analytics </option>\
				<option value="Community Redevelopment">Community Redevelopment </option>\
				<option value="Other">Other </option>\
			</select></td></tr>\
			<tr><th>Company Size:</th><td><select name="' + this.instance + '-size" id="' + this.instance + '-size" class="select" style="width: 215px">\
				<option value="">Please Select </option>\
				<option value="Individual">Individual </option>\
				<option value="2-24">2-24 </option>\
				<option value="25-49">25-49 </option>\
				<option value="50-99">50-99 </option>\
				<option value="100-499">100-499 </option>\
				<option value="500 and over">500 and over </option>\
			</select</td></tr>\
		</table>\
		<br><br>\
		<input id="' + this.instance + '-submit" type="button" value="Submit" onclick="' + this.instance + '.submit()">\
		<input id="' + this.instance + '-close" type="button" value="Close" onclick="' + instance + '.close()">\
	</form>';
	container.innerHTML = html;
}

PBriefForm.prototype.submit = function() {
	if (this.validate()) {
		var url = "http://signup.pushpin.com/signup/getbrief.jsp";
		var name = document.getElementById(this.instance + '-name').value;
		var email = document.getElementById(this.instance + '-email').value;
		var title = document.getElementById(this.instance + '-title').value;

		var select = document.getElementById(this.instance + '-app');
		var app = select.options[select.selectedIndex].value;
		select = document.getElementById(this.instance + '-size');
		var size = select.options[select.selectedIndex].value;

		url += '?name=' + name;
		url += '&email=' + email;
		url += '&title=' + title;
		url += '&app=' + app;
		url += '&size=' + size;

		var that = this;
		PAsync2.call(url, function(result){ that.update(result); });
	} else {
		this.update({level: 1, msg: 'Please complete the <span class="entryError">required</span> fields.'});
	}
}

PBriefForm.prototype.msg = {open: "Please provide the following infomation so that we may get<br> you the product brief."};
PBriefForm.prototype.open = PKeyForm.prototype.open;
PBriefForm.prototype.close = PKeyForm.prototype.close;
PBriefForm.prototype.attach = PKeyForm.prototype.attach;
PBriefForm.prototype.update = PKeyForm.prototype.update;
PBriefForm.prototype.validate = PKeyForm.prototype.validate;
PBriefForm.prototype.highlight = PKeyForm.prototype.highlight;
PBriefForm.prototype.lowlight = PKeyForm.prototype.lowlight;

var keyForm = new PKeyForm("keyForm");
var briefForm = new PBriefForm("briefForm");