jQuery(document).ready(function(){
    /* prevent the page from scrolling to the top if a left side nav category with subcategories is clicked */
    jQuery('.page-item-87 a').attr("href", "http://store.wirexgroup.com/");
    
    //
   jQuery("a[rel=emailModal]").click(function(e){
		e.preventDefault();
		// var aspVar = jQuery(this).attr('href'); // aspVar is the value for the hidden field
		// aspVar = aspVar.replace(/[^\d]/g,'');
		var adName = jQuery(this).attr('id');
        var userName = jQuery(this).attr('class');
		buildform(adName, userName);
	});
   
   
}); // end document ready function

function buildform(adName, userName){
	jQuery('body').append("<div id='mask'></div>");
	
	// set up the mask
	var maskHeight = jQuery(document).height();
	var maskWidth = jQuery(window).width();
					
	jQuery('#mask').css({
		'width': maskWidth,
		'height': maskHeight,
		'display': 'none',
		'background': '#000',
		'position': 'absolute',
		'left': '0',
		'top': '0',
		'opacity': '0.8',
		'z-index': '10'
		});

	jQuery('#mask').show();
		
	// set up the modal/form box
	// append form markup to #mask
	jQuery('body').append("<form id='frmContactModal' name='frmContactModal'><h2>Contact: <span id='nme'></span></h2><fieldset><input type='hidden' value='' name='selID' id='selID'><p>Fields marked with <img src='http://dev.wirexgroup.wirexgroup.local/wp-content/themes/TheSource/images/star.jpg' width='11' height='10' alt='a red star' title='required'> are required.</p><p id='alert'></p><div><label for='selName'>Name: <img src='http://dev.wirexgroup.wirexgroup.local/wp-content/themes/TheSource/images/star.jpg' width='11' height='10' alt='*' title='required'></label><input type='text' name='selName' id='selName' class='validate valLength'></div><div><label for='selPhone'>Phone:</label><input type='text' name='selPhone' id='selPhone' class='validate phone'></div><div><label for='selEmail'>Email: <img src='http://dev.wirexgroup.wirexgroup.local/wp-content/themes/TheSource/images/star.jpg' width='11' height='10' alt='*' title='required'></label><input type='text' name='selEmail' id='selEmail' class='validate email'></div><div><label for='selSubject'>Subject: <img src='http://dev.wirexgroup.wirexgroup.local/wp-content/themes/TheSource/images/star.jpg' width='11' height='10' alt='*' title='required'></label><input type='text' name='selSubject' id='selSubject' class='validate valLength'></div><label for='selBody' id='textarealabel'>Comment / Question: <img src='http://dev.wirexgroup.wirexgroup.local/wp-content/themes/TheSource/images/star.jpg' width='11' height='10' alt='*' title='required'></label><span>250 characters remaining</span><textarea name='selBody' id='selBody' rows='8' cols='40' class='validate textarea dimtext'>Please enter 15 to 250 characters.</textarea><input type='button' name='btnSubmit' id='submitBtn' value='Send Email'><input type='button' id='closeBtn' value='Close'></fieldset></form>");
	
	jQuery('#selID').attr('value', adName); // make the hidden input value = the adName
	jQuery('#nme').html(userName); // insert name in the h2
	
	var wHeight = jQuery(window).height();
	var wWidth = jQuery(window).width();
					
	jQuery('#frmContactModal').css('top', (wHeight/2 - 260) + getScrollY()); // $('#contactform').height()/2
	jQuery('#frmContactModal').css('left', wWidth/2 - 200);										
					
	jQuery('#frmContactModal').fadeIn(500);
	
	jQuery('#mask, #closeBtn').click(function(){
		jQuery('#mask').remove();
		jQuery('#frmContactModal').remove();
	});
	
	// validate
	jQuery('#submitBtn').click(function(){
        jQuery('.highlightinput').removeClass('highlightinput'); // remove highlight from all fields
		jQuery('p#alert').html('');
        var formValid = true;
		
		var fieldsToValidate = jQuery('#frmContactModal .validate'); // collection of all fields to validate
		
		for(var i = 0; i < fieldsToValidate.length; i++){
			var el = fieldsToValidate[i];
			if(jQuery(el).hasClass('valLength') && (jQuery(el).val().length < 2 || jQuery(el).val().length > 50)){
				displayAlert(jQuery(el), 'Please enter more than 1 character and less than 50.');
				formValid = false;
			}
			if(jQuery(el).hasClass('phone') && !hasTenDigits(jQuery(el).val())){
				displayAlert(jQuery(el), 'Please enter a 10 digit phone number.');
				formValid = false;
			}
			if(jQuery(el).hasClass('email') && !/^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/.test(jQuery(el).val())){
				displayAlert(jQuery(el), 'Please enter a valid email address.');
				formValid = false;
			}
			if(jQuery(el).hasClass('email') && /^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/.test(jQuery(el).val()) && jQuery(el).val().length > 40){
				displayAlert(jQuery(el), 'Email addresses must be 40 characters or shorter.');
				formValid = false;
			}
			if(jQuery(el).hasClass('textarea') && jQuery(el).val().length < 15){
				displayAlert(jQuery(el), 'Please enter at least 15 characters.');
				formValid = false;
			}
		}
        
        if(formValid){
            // run ajax
            var emailName = jQuery('#selName').val();
            var emailPhone = jQuery('#selPhone').val();
            var emailEmail = jQuery('#selEmail').val();
            var emailSubject = jQuery('#selSubject').val();
            var emailComments = jQuery('#selBody').val();
            var emailTo = adName;
            
            jQuery.post('/wp-content/themes/TheSource/ajax/sendContactEmail.php',
                {
                    'emailName' : emailName,
                    'emailPhone' : emailPhone,
                    'emailEmail' : emailEmail,
                    'emailSubject' : emailSubject,
                    'emailComments' : emailComments,
                    'emailTo' : emailTo
                },
                    function(data){
                        if(jQuery.trim(data) == 'false'){
                            // email not sent
                            alert("There was an error sending this email.\r\nPlease try again.");
                        } else {
                            // email sent
                            
                            jQuery('#frmContactModal h2').text('Success!');
                            jQuery('#frmContactModal fieldset').remove();
                            jQuery('#frmContactModal').append('<h3>Your message was successfully sent to '+ userName + '.</h3><h4>Please allow up to 24 hrs for a response.</h4><h4>Thank you</h4><input type="button" id="closeModalBtn" value="Close">');
                            
                            // register click event after element exists
                            jQuery('#closeModalBtn').click(function(){
                                jQuery('#mask').remove();
                                jQuery('#frmContactModal').remove();
                            });
                        }
                    }
                );
            
        }
    });
    
	jQuery('#frmContactModal textarea').focus(function(){
		jQuery(this).removeClass('dimtext').val('');
	});

	jQuery('#frmContactModal textarea').keyup(function(){
		var textarea = jQuery(this).val();
		var textareaLength = textarea.length;
		var limit = 250;
		if(textareaLength > limit){
			jQuery('#frmContactModal span[id!=nme]').html('0 characters remaining!');
			jQuery(this).val(textarea.substr(0, limit));
		}
		else{
			jQuery('#frmContactModal span[id!=nme]').html((limit - textareaLength) + ' characters remaining');	
		}
	});

}

function hasTenDigits(phoneNumber){
	if(phoneNumber.length > 0){
		var digits = phoneNumber.replace(/[^\d]/g,'');
		if(digits.length == 10){
			var newNumber = digits.replace(/(\d{3})(\d{3})(\d+)/, '$1-$2-$3');
			jQuery('#selPhone').attr('value',newNumber);
			return true;
		}
		else{
			return false;
		}
	}
	else{
		return true;
	}
}

function getScrollY() {
  var scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
  }
  return scrOfY;
}

function displayAlert(el, message){
	el.addClass('highlightinput');
	jQuery('p#alert').html(message);
}