checkOut = function() {	
	var month = [];
	var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
	for(var x = 0;x<12;x++) {
		month.push('<option value="'+(x+1)+'">'+months[x]+'</option>');	
	}
	var day = [];
	for(var x = 0;x<=31;x++) {
		day.push('<option value="'+(x+1)+'">'+(x+1)+'</option>');	
	}
	var year = [];
	for(var x = 2006;x<=2020;x++) {
		year.push('<option value="'+(x+1)+'">'+(x+1)+'</option>');	
	}
	year.reverse();
	var f = ['	<div class="title">Checkout</div>',
			 '	<div style="padding-top:0.8em;">',
			 '		<div style="padding-bottom:0.7em;">Please enter your credit card information below. If you have any questions, please call us at 1-877-502-9619</div>',
			 '	<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">',
			 '		<tr>',
			 '			<td width="65%" align="left">',
			 '		<table border="0" width="100%">',
			 '			<tr>',
			 '				<td style="font-size:12px;color:#666;">',
			 '					Name on card',
			 '				</td>',
			 '				<td>',
			 '					<input type="text" id="creditcard_name">',
			 '				</td>',
			 '			</tr>',
			 '			<tr>',
			 '				<td style="font-size:12px;color:#666;">',
			 '					Date on card',
			 '				</td>',
			 '				<td>',
			 '					<select id="creditcard_date_month"><option value=""></option>'+month.join('')+'</select>',
			 '					<select id="creditcard_date_day"><option value=""></option>'+day.join('')+'</select>',
			 '					<select id="creditcard_date_year"><option value=""></option>'+year.join('')+'</select>',
			 '				</td>',
			 '			</tr>',
			 '			<tr>',
			 '				<td style="font-size:12px;color:#666;">',
			 '					Card type',
			 '				</td>',
			 '				<td>',
			 '					<select id="creditcard_type"><option value=""></option><option value="MasterCard">MasterCard</option><option value="Discover">Discover</option><option value="Visa">Visa</option></select>',
			 '				</td>',
			 '			</tr>',
			 '			<tr>',
			 '				<td style="font-size:12px;color:#666;">',
			 '					Card number',
			 '				</td>',
			 '				<td>',
			 '					<input type="text" id="creditcard_number">',
			 '				</td>',
			 '			</tr>',
			 '		</table>',
			 '			</td>',
			 '			<td align="center" valign="middle">',
			 '				<img src="/images/builder_button_submitorder.png" style="cursor:pointer;" onclick="builder.processOrder();">',
			 '			</td>',
			 '		</tr>',
			 '	</table>',
			 '	</div>',
			 '</div>'];
	var createBox = new boxOverlay({
		width:'600px',
		height:'300px',
		content:'<div class="box"><div class="close" onclick="removeOverlay();"><img src="/wwwroot/r/relyoncsi.com/sitebuilder/images/box_close.png"></div>'+f.join('')+'</div>'
	});
	createBox.init();
}

coupons = function() {	
	var f = ['	<div class="title">Check out <span>coupon discount</span></div>',
			 '	<div style="padding-top:20px;"></div>',
			 '<div style="position:relative;">',
			 '	<div class="stepDescription" style="padding-left:10px;color:#666;padding-right:10px;padding-bottom:15px;text-align:center;">Enter your coupon code to  view your updated total.</div>',
			 /*'	<table width="100%">',
			 '		<tr>',
			 '			<td width="50%" align="center">',
			 '				<div style="font-size:28px;font-weight:bold;color:#333;">Total</div>',
			 '			</td>',
			 '			<td align="center">',
			 '				<div style="font-size:28px;color:green;" id="coupon_total">$'+sbYourSite.total+'</div>',
			 '				<div style="font-size:28px;color:green;" id="new_coupon_total"></div>',
			 '			</td>',
			 '		</tr>',
			 '	</table>',*/
			// '	<table width="90%" align="center">',
			// '		<tr>',
			// '			<td width="65%" align="center" class="sitebuilder">',
			 //'				<div class="warning" id="div_coupon">',
			 '					<table width="70%" border="0" align="center">',
			 '						<tr>',
			 /*'							<td width="45%" valign="top">',
			 '								<table width="100%" border="0">',
			 '									<tr>',
			 '										<td valign="top" style="font-size:16px;font-weight:bold;color:#333;">',
			 '											Total',
			 '										</td>',
			 '										<td valign="top">',
			 '											<div id="box_no_coupon_total" style="font-size:16px;font-weight:bold;color:green;">$'+sbYourSite.price.total+'</div>',
			 '											<div id="box_coupon_total" style="font-size:16px;font-weight:bold;color:green;"></div>',
			 '										</td>',
			 '									</tr>',
			 '								</table>',
			 '							</td>',*/
			 '							<td valign="top">',
			 '								<input type="text" id="checkout_coupon" style="height:45px;font-size:35px;width:150px;" maxlength="8" onkeyup="if(this.value > \'\'){$(\'coupon_proceed\').setStyle({opacity:1.0});} else {$(\'coupon_proceed\').setStyle({opacity:0.3});}">',
			 //'								<div style="font-size:12px;padding-top:4px;" id="coupon_message">Enter coupon code above.</div>',
			 '							</td>',
			 '							<td valign="top" style="padding-top:5px;">',
			 '								<img src="images/sb_button_validate.jpg" style="cursor:pointer;" id="coupon_proceed" onclick="websiteBuilder.actions.loadCoupon();">',
			 '							</td>',
			 '						</tr>',
			 '					</table>',
			 //'				</div>',
			 //'			</td>',
			// '			<td align="center">',
			// '				<div align="right" style="padding-top:5px;"><img src="images/sb_button_proceed.jpg" id="coupon_proceed" onclick="websiteBuilder.actions.loadCoupon();"><div align="right" id="coupon_options"><a href="javascript://" style="font-weight:normal;" onclick="websiteBuilder.actions.skipCoupon();">I do not have a coupon...</a></div><!--<img src="images/sb_button_skip.jpg" style="cursor:pointer;" onclick="websiteBuilder.actions.skipCoupon();">--></div>',
			 //'			</td>',
			 //'		</tr>',
			 //'	</table>',
			 '</div>'];
	var createBox = new boxOverlay({
		width:'400px',
		height:'150px',
		content:'<div class="box"><div class="close" onclick="removeOverlay();"><img src="/wwwroot/r/relyoncsi.com/sitebuilder/images/box_close.png"></div>'+f.join('')+'</div>'
	});
	createBox.init();
	$('coupon_proceed').setStyle({opacity:0.3});
}
// Custom Builder Functions
// --------------------------
function builderError(elm,message) {
	if (!$('builder_error_overlay')) {
		var o = $(document.createElement('div'));
		o.setStyle({backgroundImage:'url(/images/builder_step_message_bg.png)',width:'491px',height:'110px',display:'none',position:'absolute'});
		o.setAttribute('id','builder_error_overlay');
		o.innerHTML = '<div style="font-weight:bold;position:relative;width:491px;height:110px;padding:0.5em;"><div style="line-height:145%;text-align:center;font-size:14px;color:#ae1818;position:absolute;left:30px;top:20px;height:70px;width:365px;padding-top:1em;" class="text"></div><img src="/images/builder_button_yes.png" style="cursor:pointer;position:absolute;right:40px;top:34px;" class="yes" /></div>';
		document.body.appendChild(o);
	}
	var overlay = $('builder_error_overlay');
	var text = overlay.select('.text')[0];
	var yes = overlay.select('.yes')[0];
	text.innerHTML = message;
	Event.observe(yes,'click',function() {
		builderErrorClose(elm);
	});
	var elmPos = elm.cumulativeOffset();
	var elmDim = {width:parseInt(elm.getStyle('width')),height:parseInt(elm.getStyle('height'))}
	overlay.setStyle({left:elmPos.left+((elmDim.width-491)/2)+'px',top:elmPos.top+((elmDim.height-110)/2)+'px'});
	new Effect.Appear(overlay,{duration:0.2});
	new Effect.Opacity(elm,{from:1.0,to:0.4,duration:0.5});
}
function builderErrorClose(elm) {
	var overlay = $('builder_error_overlay');
	//overlay.setStyle({display:''});
	new Effect.Fade(overlay,{duration:0.2});
	new Effect.Opacity(elm,{from:0.4,to:1.0,duration:0.3});
}
function previewTemplate(elm) {
	//alert(elm.src);
	if (!$('builder_template_overlay')) {
		var o = $(document.createElement('div'));
		o.setStyle({backgroundImage:'url(/images/builder_templater_focus_bg.png)',width:'369px',height:'363px',display:'none',position:'absolute'});
		o.setAttribute('id','builder_template_overlay');
		document.body.appendChild(o);
	} else {
		if ($('builder_template_overlay').getStyle('display') != 'none') {
			new Effect.Fade($('builder_template_overlay'),{duration:0.3});
			setTimeout(function() {
				new Effect.Opacity($('root_step2_slider'),{from:0.4,to:1.0,duration:0.3});
			},150);
			new Effect.Appear($('template_gallery_pagination'),{duration:0.4});
			new Effect.Fade($('template_pagination'),{duration:0.4});
			step2.removeClassName('complete');
			step2.addClassName('active');
			return;
		}
	}
	new Effect.Opacity($('root_step2_slider'),{from:1.0,to:0.4,duration:0.5});
	new Effect.Fade($('template_gallery_pagination'),{duration:0.4});
	new Effect.Appear($('template_pagination'),{duration:0.4});
	var overlay = $('builder_template_overlay');
	
	var themes = [];
	var templatethemes = elm.getAttribute('themes').split('|');
	themes.push('<div style="height:15px;position:relative;padding-right:0.7em;" id="current_themes">');
	if (templatethemes.length) {
		templatethemes.each(function(r){
			var color = r.replace('_','');
			var color = color.replace('~','');
			themes.push('<div style="background-color:#'+color+';width:30px;height:30px;border:2px solid white;float:right;margin-left:5px;margin-top:-10px;"></div>');
		});
	}
	themes.push('<div style="color:#999;float:right;height:30px;width:120px;margin-left:5px;margin-top:-10px;line-height:40px;">Available colors:</div></div>');
	
	overlay.innerHTML = '<div style="padding:1.5em;position:relative;height:355px;"><img id="current_template" themes="'+elm.getAttribute('themes')+'" pointer="'+elm.getAttribute('pointer')+'" src="'+elm.src.replace(/.jpg/,'_large.jpg')+'"><img src="/images/builder_button_selecttemplate.png" style="cursor:pointer;position:absolute;bottom:11px;left:110px;" onclick="builder.selectTemplate();" id="templatebutton">'+themes.join('')+'</div>';
	var elmPos = $('root_step2_slider').cumulativeOffset();
	var elmDim = {width:parseInt($('root_step2_slider').getStyle('width')),height:parseInt($('root_step2_slider').getStyle('height'))}
	overlay.setStyle({left:elmPos.left+((elmDim.width-369)/2)+'px',top:elmPos.top+((elmDim.height-363)/2)+'px'});
	new Effect.Appear(overlay,{duration:0.4});
	//alert(
}
function changePreviewTemplate(move) {
	var templates = $('step2_slider').select('.template');
	var cur_template = parseInt($('current_template').getAttribute('pointer'));
	var current_template = $('current_template');
	if (eval(cur_template+move) > templates.length) {
		
	} else {
		var themes = [];
		var record = templates[cur_template+move];
		var templatethemes = record.getAttribute('themes').split('|');
		if (templatethemes.length) {
			templatethemes.each(function(r){
				var color = r.replace('_','');
				var color = color.replace('~','');
				themes.push('<div style="background-color:#'+color+';width:30px;height:30px;border:2px solid white;float:right;margin-left:5px;margin-top:-10px;"></div>');
			});
		}
		themes.push('<div style="color:#999;float:right;height:30px;width:120px;margin-left:5px;margin-top:-10px;line-height:40px;">Available colors:</div>');
		
		var thumb = record.src;
		var pointer = record.getAttribute('pointer');
		current_template.src = thumb.replace(/.jpg/,'_large.jpg');
		current_template.writeAttribute('pointer',pointer);
		if (templatethemes.length) {
			$('current_themes').innerHTML = themes.join('');
		} else {
			$('current_themes').innerHTML = '';
		}
	}
}
// Events/Variables
// --------------------------
// Main event that adds interaction to builder page
Event.observe(window,'load',function() {
	// Create onclick event for templates
	var templates = $('step2_slider').select('.template');
	templates.each(function(r) {
		Event.observe(r,'click',function() {
			var step1phase3 = step1.select('.phase3')[0];
			if (step1phase3.getStyle('opacity') == 1.0 && step1phase3.getStyle('display') != 'none') {
				previewTemplate(this);
			}
		});
	});
	
	Event.observe($('pane_next'),'click',function() {
		changePreviewTemplate(1);
	});
	
	Event.observe($('pane_prev'),'click',function() {
		changePreviewTemplate(-1);
	});
							
	// Step 1 Vars and Events
	// --------------------------
		step1 = $('bstep1');
		step2 = $('bstep2');
		step3 = $('bstep3');
		// Create onclick event for the phase1 button options in step 1						
		var s1p1buttons = step1.select('.phase1')[0].select('img');
		s1p1buttons.each(function(b) {
			Event.observe(b,'click',function() {
				builder.chooseDomain(b.readAttribute('type'));
			});
		});
	// Step 2 Vars and Events
	// --------------------------
		s1p2domain = step1.select('.phase2')[0].select('.domain')[0];
		s1p2next = step1.select('.phase2')[0].select('.next')[0];
		s1p2toplvldomains = step1.select('.phase2')[0].select('.topleveldomains')[0];
		s1p2switch = step1.select('.phase2')[0].select('.switch')[0];
		
		Event.observe(s1p2switch,'click',function() {
			step1.select('.phase1')[0].setStyle({display:''});
			step1.select('.phase2')[0].setStyle({display:'none'});
		});
		
		// Click next button
		Event.observe(s1p2next,'click',function() {
			builder.selectDomain();
		});
		// Domain typing
		Event.observe(s1p2domain,'keyup',function() {
			var typeddomain = false;
			// Loop through html top level domains to see if it has been typed
			for(var x = 0;x<s1p2toplvldomains.options.length;x++) {
				if (s1p2domain.value.endsWith(''+s1p2toplvldomains[x].value+'')) {
					s1p2domain.value = s1p2domain.value.sub(''+s1p2toplvldomains[x].value+'','');
					typeddomain = ''+s1p2toplvldomains[x].value+'';
				}
			}
			// If the top level domain that was typed is one we allow for registration, automatically select it in drop down
			if (typeddomain) {
				for(var x = 0;x<s1p2toplvldomains.options.length;x++) {
					var val = s1p2toplvldomains.options[x];
					if (val.value == typeddomain) {
						s1p2toplvldomains.selectedIndex = x;
					}
				}
			}
			// Remove the instance of www.
			if (s1p2domain.value.startsWith('www.')) {
				s1p2domain.value = s1p2domain.value.sub('www.','');
			}
			// Remove the instance of http://www.
			if (s1p2domain.value.startsWith('http://www.')) {
				s1p2domain.value = s1p2domain.value.sub('http://www.','');
			}
			// Remove the instance of http://
			if (s1p2domain.value.startsWith('http://')) {
				s1p2domain.value = s1p2domain.value.sub('http://','');
			}
		});
		// Validate domain on enter
		Event.observe(s1p2domain,'keyup',function(e) {
			if (e && e.which) {
				e = e;
				characterCode = e.which;
			} else {
				e = event;
				characterCode = e.keyCode;
			}
			
			if (characterCode == 13) {
				builder.selectDomain();
			}
		});
	// Step 3 Vars and Events
	// --------------------------
		s1p3changedomain = step1.select('.phase3')[0].select('.changedomain')[0];
		Event.observe(s1p3changedomain,'click',function() {
			builder.changeDomain();
		});
		//
	
	new Effect.Opacity(step2,{duration:1.5,from:1.0,to:0.4});
	new Effect.Opacity(step3,{duration:1.5,from:1.0,to:0.4});
});
// Builder object
// --------------------------
// Contains functions for user interaction, ajax and processing of BCS application
var builder = {
	scrollMe : function() {
		if (!step1.hasClassName('complete')) {
			scrollMeTo(step1);
		} else if (!step2.hasClassName('complete')) {
			scrollMeTo(step2);
		} else if (!step3.hasClassName('complete')) {
			scrollMeTo(step3);
		}
	},
	chooseDomain : function(type) {
		if (type == 1) {
			s1p2switch.innerHTML = 'or, I already own a domain';
		} else {
			s1p2switch.innerHTML = 'or, I\'d like to purchase a domain';
		}
		step1.select('.phase1')[0].setStyle({display:'none'});
		step1.select('.phase2')[0].setStyle({display:''});
		var s1p2domain = step1.select('.phase2')[0].select('.domain')[0];
		s1p2domain.focus();
		var input_type = $('_domain_type');
		input_type.value = type;
		
	},
	selectDomain : function() {
		var val = s1p2domain.value;
		var ext = s1p2toplvldomains.value;
		var input_type = $('_domain_type');
		if (val.empty()) {
			builderError($('bstep1'),'Please type a valid domain name');
		} else {
			
			if (input_type.value == 1) {
				new Ajax.Request('ajax/checkDomain.php',{
					postBody:'domain='+val+ext,
					onSuccess:function(transport) {
						eval(transport.responseText);
						if (domainAvailable == -1) {
							builderError($('bstep1'),'The domain is invalid, it can only contain numbers, letters and dashes (-)');
						} else if (domainAvailable == 1) {
							builder.acceptDomain();
						} else {
							builderError($('bstep1'),'Domain is not available, please try another domain');
						}
					}
				});
			} else {
				builder.acceptDomain();
			}
		}
	},
	acceptDomain : function() {
		var val = s1p2domain.value;
		var ext = s1p2toplvldomains.value;
		step1.removeClassName('active');
		step1.addClassName('complete');
		step1.select('.phase2')[0].setStyle({display:'none'});
		step1.select('.phase3')[0].setStyle({display:''});
		step1.select('.phase3')[0].select('.domain')[0].innerHTML = val+'<span>'+ext+'</span>';
		setTimeout(function() {
			builder.scrollMe();
			step2.removeClassName('inactive');
			step2.addClassName('active');
			setTimeout(function(){
				new Effect.Opacity(step2,{duration:0.5,from:0.4,to:1.0});
				new Effect.Appear($('template_gallery_pagination'),{duration:0.4});
			},200);
		},450);
	},
	changeDomain : function() {
		scrollMeTo($('bstep1'));
		step1.select('.phase2')[0].setStyle({display:''});
		step1.select('.phase3')[0].setStyle({display:'none'});
		step1.removeClassName('complete');
		step1.addClassName('active');
		s1p2domain.focus();
	},
	selectTemplate : function() {
		if ($('template_pagination').getStyle('display') == 'none') {
			builder.changeTemplate();
			scrollMeTo($('bstep2'));
			return;
		}
		var templates = $('step2_slider').select('.template');
		var current_template = $('current_template');
		var cur_template = parseInt(current_template.getAttribute('pointer'));
		
		var record = templates[cur_template];
		var thumb = record.src;
		var pointer = record.getAttribute('pointer');
		
		$('templatebutton').src = '/images/builder_button_changetemplate.png';
		new Effect.Fade($('template_pagination'),{duration:0.4});
		new Effect.Opacity($('root_step2_slider'),{duration:0.5,from:0.4,to:0.15});
		
		step2.removeClassName('active');
		step2.addClassName('complete');
		
		builder.scrollMe();
		new Effect.Opacity(step3,{duration:0.5,from:0.4,to:1.0});
		step3.removeClassName('inactive');
		step3.addClassName('active');
	},
	changeTemplate : function() {
		$('templatebutton').src = '/images/builder_button_selecttemplate.png';
		new Effect.Appear($('template_pagination'),{duration:0.4});
		new Effect.Opacity($('root_step2_slider'),{duration:0.5,from:0.15,to:0.4});
		
		step2.removeClassName('complete');
		step2.addClassName('active');
	},
	checkOut : function() {
		if (step3.hasClassName('inactive')) {
			return;
		}
		
		var firstname = $('_firstname').value;
		var lastname = $('_lastname').value;
		var phone = $('_phone').value;
		var email = $('_email').value;
		var password = $('_password').value;
		var password2 = $('_password2').value;						
		
		if (firstname.empty() || lastname.empty() || phone.empty() || email.empty() || password.empty() || password.empty()) {
			builderError($('bstep3'),'Please fill out the form completely');
			return;
		} else {
			if (password.value != password2.value) {
				builderError($('bstep3'),'Passwords do not match');
				return;
			}
			if (!isValidPhone(phone)) {
				builderError($('bstep3'),'Please type a valid phone number');
				return;
			}
			if (!isValidEmail(email)) {
				builderError($('bstep3'),'Please type a valid e-mail');
				return;
			}
		}
		
		step3.removeClassName('active');
		step3.addClassName('complete');
		
		if (step1.hasClassName('complete') && step2.hasClassName('complete') && step3.hasClassName('complete')) {
			checkOut();
		} else {
			builder.moveMe();
		}
	},
	processOrder : function() {
		var domain_name = s1p2domain.value;
		var domain_ext = s1p2toplvldomains.value;
		var domain_type = $('_domain_type').value;
		
		var cc_name = $('creditcard_name').value;
		var cc_date_month = $('creditcard_date_month').value;
		var cc_date_day = $('creditcard_date_day').value;
		var cc_date_year = $('creditcard_date_year').value;
		var cc_type = $('creditcard_type').value;
		var cc_number = $('creditcard_number').value;
		
		var firstname = $('_firstname').value;
		var lastname = $('_lastname').value;
		var phone = $('_phone').value;
		var email = $('_email').value;
		var password = $('_password').value;
		
		var _prospect = $('prospect');
		
		if (_prospect.checked) {
			var prospectinfo = '&prospect=1';
		} else {
			var prospectinfo = '&prospect=0';
		}
		
		var templates = $('step2_slider').select('.template');
		var cur_template = parseInt($('current_template').getAttribute('pointer'));
		var record = templates[cur_template];
		var template_id = record.getAttribute('template');
		var template_theme = record.getAttribute('themes').split('|')[0];

		var creditcardinformation = '&cc_name='+cc_name+'&cc_number='+cc_number+'&cc_type='+cc_type+'&cc_date_month='+cc_date_month+'&cc_date_day='+cc_date_day+'&cc_date_year='+cc_date_year;
		
		var contactinformation = '&firstname='+firstname+'&lastname='+lastname+'&phone='+phone+'&email='+email+'&password='+password;
		
		var domain = '&domain='+domain_name+'&domain_ext='+domain_ext+'&domain_type='+domain_type;
		
		if ($('package1').checked) {
			var package = 1;
		} else {
			var package = 2;
		}
		
		var template = '&template_id='+template_id+'&template_theme='+template_theme+'&package='+package;
		
		
		_working('Processing...');				
		new Ajax.Request('ajax/process.php',{
			postBody:creditcardinformation+contactinformation+template+domain+prospectinfo,
			onSuccess:function() {
				window.location='/builder/?thankyou';
			},
			onException:function() {
				alert('exception');
			},
			onFailure:function() {
				alert('failure');
			}
		});
		
	}
}
