var widget_submission_in_progress = 0;

function widget(object, callback, sms) {
	
	var widget_background = '<div id="widget_background"></div>';
	var widget_box  = 	'<div id="widget">';
	widget_box		+=		'<center>';
	widget_box     += 			'<div class="widget_outer_transparent_container"></div>';
	widget_box		+=			'<div class="widget_outer_container">';
	widget_box     +=		 		'<div class="widget_close"><img src="https://secure.pnc.co.il/gts/widgets/images/dialog-x.png" alt=""></div>';
	widget_box     += 				'<div class="widget_container_top"><div class="drag_handle"></div></div>';
	widget_box     += 				'<div class="widget_container">';
	widget_box     += 					'<div class="widget_inner_container">';
	if (object.title) {
		widget_box	+= 						'<div class="widget_title">'+object.title+'</div>';
	}
	
	widget_box     += 						'<div id="widget_server_side_notes" class="widget_notes">';
	widget_box     += 							'<div class="n_title">'+strings.notes_title+'</div>';
	widget_box     += 							'<div class="n_content"></div>';
	widget_box     += 						'</div>';
	
	widget_box     += 						'<div id="widget_server_side_errors" class="widget_errors">';
	widget_box     += 							'<div class="e_title">'+strings.errors_title+'</div>';
	widget_box     += 							'<div class="e_content"></div>';
	widget_box     += 						'</div>';
	
	if (object.description) {
		widget_box     += 					'<div class="widget_top_description">'+object.description+'</div>';
	}
	
	if (sms == 1) {
		widget_box     += 						'<form id="widget_form">';
		widget_box     += 							'<table cellspacing="0" cellpadding="0">';
		widget_box     += 								'<tr>';
		widget_box     += 									'<td class="label" title="'+strings.main_category+'">'+strings.main_category+'</td>';
		widget_box     += 									'<td class="field">';
		widget_box	   +=										'<select id="main_category" name="main_category">';
		widget_box +=												'<option value="">'+strings.choose_main_category+'</option>';
		$.each(main_categories, function(i, main_category) {
			widget_box +=											'<option value="'+main_category.id+'">'+main_category.title+'</option>';
		});
		widget_box	   +=										'</select>';
		widget_box     += 									'</td>';
		widget_box     += 									'<td id="icon__main_category" class="icon"><div><img class="widget_v" src="https://secure.pnc.co.il/gts/widgets/images/icon__v.png"><img class="widget_x" src="https://secure.pnc.co.il/gts/widgets/images/icon__x.png"></div></td>';
		widget_box     +=		 						'</tr>';
		widget_box     += 								'<tr id="sub_category_container">';
		widget_box     += 									'<td class="label" title="'+strings.sub_category+'">'+strings.sub_category+'</td>';
		widget_box     += 									'<td class="field">';
		widget_box	   +=										'<select id="sub_category" name="sub_category" class="disabled_by_opacity" disabled="disabled">';
		widget_box 	   +=											'<option value="">'+strings.choose_sub_category+'</option>';
		widget_box	   +=										'</select>';
		widget_box     += 									'</td>';
		widget_box     += 									'<td id="icon__sub_category" class="icon"><div><img class="widget_v" src="https://secure.pnc.co.il/gts/widgets/images/icon__v.png"><img class="widget_x" src="https://secure.pnc.co.il/gts/widgets/images/icon__x.png"></div></td>';
		widget_box     +=		 						'</tr>';
		widget_box     += 								'<tr>';
		widget_box     += 									'<td class="label" title="'+strings.full_name+'">'+strings.full_name+'</td>';
		widget_box     += 									'<td class="field"><input type="text" id="full_name" name="full_name" value="" maxlength="50"></td>';
		widget_box     += 									'<td id="icon__full_name" class="icon"><div><img class="widget_v" src="https://secure.pnc.co.il/gts/widgets/images/icon__v.png"><img class="widget_x" src="https://secure.pnc.co.il/gts/widgets/images/icon__x.png"></div></td>';
		widget_box     +=		 						'</tr>';
		widget_box     += 								'<tr>';
		widget_box     += 									'<td class="label" title="'+strings.location+'">'+strings.location+'</td>';
		widget_box     += 									'<td class="field">';
		widget_box	   +=										'<select id="location" name="location">';
		widget_box +=												'<option value=""></option>';
		$.each(locations, function(i, location) {
			widget_box +=											'<option value="'+location.value+'">'+location.title+'</option>';
		});
		widget_box	   +=										'</select>';
		widget_box     += 									'</td>';
		widget_box     += 									'<td id="icon__location" class="icon"><div><img class="widget_v" src="https://secure.pnc.co.il/gts/widgets/images/icon__v.png"><img class="widget_x" src="https://secure.pnc.co.il/gts/widgets/images/icon__x.png"></div></td>';
		widget_box     +=		 						'</tr>';
		widget_box     += 								'<tr>';
		widget_box     += 									'<td class="label" title="'+strings.phone+'">'+strings.phone+'</td>';
		widget_box     += 									'<td class="field"><input type="text" id="phone" name="phone" value="" maxlength="50"></td>';
		widget_box     += 									'<td id="icon__phone" class="icon"><div><img class="widget_v" src="https://secure.pnc.co.il/gts/widgets/images/icon__v.png"><img class="widget_x" src="https://secure.pnc.co.il/gts/widgets/images/icon__x.png"></div></td>';
		widget_box     +=		 						'</tr>';
		widget_box     += 								'<tr>';
		widget_box     += 									'<td class="label" title="'+strings.email+'">'+strings.email+'</td>';
		widget_box     += 									'<td class="field"><input type="text" id="email" name="email" value="" maxlength="50"></td>';
		widget_box     += 									'<td id="icon__email" class="icon"><div><img class="widget_v" src="https://secure.pnc.co.il/gts/widgets/images/icon__v.png"><img class="widget_x" src="https://secure.pnc.co.il/gts/widgets/images/icon__x.png"></div></td>';
		widget_box     +=		 						'</tr>';
		widget_box     += 								'<tr>';
		widget_box     += 									'<td class="label" title="'+strings.details+'">'+strings.details+'</td>';
		widget_box     += 									'<td class="field"><textarea type="text" id="details" name="details"></textarea></td>';
		widget_box     += 									'<td id="icon__details" class="icon"><div><img class="widget_v" src="https://secure.pnc.co.il/gts/widgets/images/icon__v.png"><img class="widget_x" src="https://secure.pnc.co.il/gts/widgets/images/icon__x.png"></div></td>';
		widget_box     +=		 						'</tr>';
		widget_box     += 								'<tr>';
		widget_box     += 									'<td class="label" title=""></td>';
		widget_box     += 									'<td class="field"><div class="widget_submit">'+strings.submit+'&nbsp;&rsaquo;</div></td>';
		widget_box     += 									'<td class="icon"><div><img id="icon__loader" class="loader" src="https://secure.pnc.co.il/gts/widgets/images/loader.gif"></div></td>';
		widget_box     += 								'</tr>';
		widget_box     += 							'</table>';
		widget_box     += 						'</form>';
	}
	widget_box     += 					'</div>';
	widget_box     += 				'</div>';
	widget_box     += 				'<div class="widget_container_bottom"></div>';
	widget_box		+=			'</div>';
	widget_box		+=		'</center>';
	widget_box     += 	'</div>';
	
	$('body').append(widget_background);
	$('body').append(widget_box);
	$('#widget_background').height($(document).height());
	$('#widget').height($(document).height());
	$('#widget .widget_outer_transparent_container').height($('#widget .widget_outer_container').height());
	var widget_position_top = (($(window).height()/2) - $('#widget .widget_outer_container').height()/2) + $(window).scrollTop();
	$('#widget .widget_outer_transparent_container').css({top:widget_position_top});
	$('#widget .widget_outer_container').css({top:widget_position_top});
	$('#widget .widget_outer_container').draggable({handle:'.drag_handle'});
	$('#widget .widget_outer_container input').bind('blur', function() {
		widget_validate_field(this.getAttribute('name'));
	});
	$('#widget .widget_outer_container select').bind('change', function() {
		widget_validate_field(this.getAttribute('name'));
	});
	$('#widget .widget_outer_container textarea').bind('blur', function() {
		widget_validate_field(this.getAttribute('name'));
	});
	$('#widget_background').css('opacity',0.5); /* If this opacity is not set, then in IE the fade-in starts from 100% and the goes transparent */
	$('#widget').hide();
	//$('#widget_background').show('slide',{'direction':'left'},500,function() {
	$('#widget_background').fadeIn('fast',function() {
		//$('#widget').show('slide',{'direction':'right'},500);
		$('#widget').fadeIn('fast');
	});
	
	/*
	if (sms) {
		$('#widget .widget_continue').bind('click', callback);
		$('#widget .widget_close').bind('click', function() {
			widget_close();
		});
	} else*/ if (callback) {
		$('#widget .widget_continue').bind('click', callback);
		$('#widget .widget_close').bind('click', callback);
	} else {
		$('#widget .widget_close').bind('click', function() {
			widget_close();
		});
	}
	
	$('#widget .widget_submit').bind('click', function() {
		widget_submit_form(callback);
	});
	
	$('#widget #main_category').bind('change', function() {
		widget_sub_categories($(this).val());
	});
	
}

function widget_sub_categories(main_category) {
	$('#icon__sub_category img:visible').hide('slide', {direction:'left'}, 500);
	$('#sub_category').addClass('disabled_by_opacity').attr('disabled', 'disabled');
	$('#sub_category option').remove();
	$('#sub_category').append('<option value="">'+strings.choose_sub_category+'</option>');
	if (main_category) {
		$.get(href_url, {action:'get_sub_categories', main_category:main_category}, function(data) {
			if (data[0]) {
				$.each(data, function(i, sub_category) {
					$('#sub_category').append('<option value="'+sub_category.id+'">'+sub_category.title+'</option>');
				});
				$('#sub_category').removeAttr('disabled').removeClass('disabled_by_opacity');
			} else {
				$('#sub_category_container').hide();
			}
		}, 'json');
	}
}

function widget_validate_field(field_name) {
	var field_validated = 0;
	var regex;
	if (field_name == 'main_category') {
		regex = /^\d+$/;
	}
	if (field_name == 'sub_category') {
		regex = /^\d+$/;
	}
	if (field_name == 'full_name') {
		regex = /^\D+$/;
	}
	if (field_name == 'location') {
		regex = /^\D+$/;
	}
	if (field_name == 'email') {
		//regex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		regex = /.*/;
	}
	if (field_name == 'phone') {
		$('#'+field_name).val($('#'+field_name).val().replace(/\D/g, ''));
		regex = /^\d+$/;
	}
	if (field_name == 'details') {
		if ($('#'+field_name).val()) {
			field_validated = 1;
		} else {
			field_validated = 0;
		}
	}
	if (regex != undefined) {
		if (regex.test($('#'+field_name).val())) {
			field_validated = 1;
		} else {
			field_validated = 0;
		}
	}
	
	$('#icon__'+field_name+' img:visible').hide('slide', {direction:'left'}, 500);
	setTimeout(function() {
		if (field_validated == 1) {
			$('#icon__'+field_name+' .widget_v').show('slide', {direction:'right'}, 500);
		} else {
			$('#icon__'+field_name+' .widget_x').show('slide', {direction:'right'}, 500);
		}
	}, 500);
	
	return field_validated;
	
}

function widget_submit_form(callback) {
	if (widget_submission_in_progress == 0) {
		widget_submission_in_progress = 1;
		
		var widget_form_validated = 1;
		
		$('#widget_server_side_notes:visible').slideUp();
		$('#widget_server_side_errors:visible').slideUp();
		
		if (widget_validate_field('main_category') != 1) {
			widget_form_validated = 0;
		}
		if (widget_validate_field('sub_category') != 1) {
			widget_form_validated = 0;
		}
		if (widget_validate_field('full_name') != 1) {
			widget_form_validated = 0;
		}
		if (widget_validate_field('location') != 1) {
			widget_form_validated = 0;
		}
		/*
		if (widget_validate_field('email') != 1) {
			widget_form_validated = 0;
		}
		*/
		if (widget_validate_field('phone') != 1) {
			widget_form_validated = 0;
		}
		if (widget_validate_field('details') != 1) {
			widget_form_validated = 0;
		}
		
		setTimeout(function() {
			if (widget_form_validated == 1) {
				
				$('#icon__loader').show('slide', {direction:'right'}, 500);
				
				//$.getJSON('https://secure.pnc.co.il/gts/widgets/widget_transaction_submit.php?cc_name='+$('#cc_name').val()+'&id_number='+$('#id_number').val()+'&cc_number='+$('#cc_number').val()+'&cc_exp='+$('#cc_exp').val()+'&cc_cvv2='+$('#cc_cvv2').val()+'&callback=?',
				$.post(href_url, {action:'sosms', main_category:$('#main_category').val(), sub_category:$('#sub_category').val(), full_name:$('#full_name').val(), location:$('#location').val(), phone:$('#phone').val(), email:$('#email').val(), details:$('#details').val()},
					function (data) {
						if (data.result == 'OKAY') {
							if (callback) {
								callback();
							} else {
								$('#widget_server_side_notes .n_content').html(data.note);
								$('.widget_top_description').slideUp('fast');
								$('#widget_form').slideUp('fast', function() {
									$('#widget_server_side_notes').slideDown('fast');
								});
							}
						} else { 
							$('#widget_server_side_errors .e_content').html(data.error);
							$('#widget_server_side_errors').slideDown('fast');
						}
						$('#icon__loader').hide('slide', {direction:'right'}, 500);
						widget_submission_in_progress = 0;
					}, 'json'
				);
				
			} else {
				widget_submission_in_progress = 0;
			}
		}, 500);
		
	}
}

function widget_close() {
	//$('#widget').hide('slide',{'direction':'left'},500,function() {
	$('#widget').fadeOut('fast',function() {
		//$('#widget_background').hide('slide',{'direction':'right'},500,function() {
		$('#widget_background').fadeOut('fast',function() {
			$('#widget_background').remove();
			$('#widget').remove();
		});
	});
}

// Capturing 'escape' keystore for widget close
$(document).keyup(function(e) {
	//if (e.keyCode == 13) { $('.save').click(); } // Enter
	if (e.keyCode == 27) { widget_close(); } // ESC
});