$(document).ready(function() {
    showContactForm();
    $(window).resize(function(){
        var  overlayHeight = $.browser.opera ? window.innerHeight : $(document).height();
        var  overlayWidth = $.browser.opera ? window.innerWidth : $(document).width();

        $("#overlay").css({'width' : overlayWidth + 'px', 'height' : overlayHeight + 'px'});
        centerPopup('outerFormContainer');
    });
});

function showContactForm() {
    var contactFormHTML = getContactFormHTML();

    $('body').append(contactFormHTML);
    
    $("#outerFormContainer").find("#closeButton").click(function() {
        $("#outerFormContainer").hide('slow', function() {
            $("#overlay").hide();
        });      
        
        return false;
    });
        
    $(".engage").click(function() {
        centerPopup('outerFormContainer');
        var  overlayHeight = $.browser.opera ? window.innerHeight : $(document).height();
        var  overlayWidth = $.browser.opera ? window.innerWidth : $(document).width();

        $("#overlay").css({'opacity':'0.7', 'width' : overlayWidth + 'px', 'height' : overlayHeight + 'px', 'z-index' : '10500', 'position' : 'absolute'});
        $("#overlay").show();
        $("#outerFormContainer").show("slow", function() {
            $(this).find("#edit-name").focus();
        });

        return false;
    });
    
    $(".sendButton").click(function() {
        sendMail('/demo/emailsent');                
		//sendMail('/demo/index1');                

        return false;
    });
}

function getContactFormHTML() {
    var formHTML = "<div id='outerFormContainer'><div id='formIcon'></div><a href='#' id='closeButton'></a>";

    formHTML += "<div class='engageForm' id = 'mailContainer'>";    
    formHTML += "<h2>Find out how we can help you reach your goals.</h2>";
    formHTML += "<form name='mailForm' id='contact-mail-page' accept-charset='UTF-8' >";
    formHTML += "<table>";
    formHTML += "<tr>";
    formHTML += "<td><h4>Name<span style='color:#f00'>*</span></h4><input type='text' name='name' maxlength='30' id='edit-name' /></td>";
    formHTML += "<td><h4>Company<span style='color:#f00'>*</span></h4><input type='text' name='subject' id='edit-subject' maxlength='30' /></td>";
    formHTML += "</tr>";
    formHTML += "<tr>";
    formHTML += "<td colspan='2'><h4>Address</h4><input class='addressField' type='text' name='addressField' maxlength='80' /></td>";
    formHTML += "</tr>";
    formHTML += "<tr>";
    formHTML += "<td><h4>Email<span style='color:#f00'>*</span></h4><input type='text' name='from' id='edit-mail' maxlength='30' /></td>";
    formHTML += "<td><h4>Phone Number</h4><input type='text' name='phone' maxlength='20' /></td>";
    formHTML += "</tr>";
    formHTML += "<tr>";
    formHTML += "<td colspan='2'><h4>Message</h4><br /><textarea class='messageText' name='message' id='edit-message' maxlength='200'></textarea></td>";
    formHTML += "</tr>";
    formHTML += "<tr>";
    formHTML += "<td colspan='2' align='center'><input class='sendButton' type='button' name='op' id='edit-submit' value=''></input></td>"
    formHTML += "</tr>";
    formHTML += "<tr>";
    formHTML += "<td id='contactHiddenFields'></td>";
    formHTML += "</tr>";
    formHTML += "</table>";
    formHTML += "<input type='hidden' name='mailReady' value='yes'></input>";
    formHTML += "</form>"
    formHTML += "</div>";
    formHTML += "</div>";
    
    return formHTML;
}

function centerPopup(popupId){
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#" + popupId).height();
    var popupWidth = $("#" + popupId).width();
    var docScrollTop = $(document).scrollTop();
    var docScrollLeft = $(document).scrollLeft();
    var topPos = windowHeight/2-popupHeight/2 +docScrollTop;
    var leftPos = windowWidth/2-popupWidth/2 + docScrollLeft;
    
    if (topPos <= 0) {
        topPos = docScrollTop + 10;
    }

    if (leftPos <= 0) {
        leftPos = docScrollLeft + 10;
    }

        //centering
    $("#" + popupId).css({
        "position": "absolute",
        "top": topPos,
        "left": leftPos
    });
}

function validateMailAddressField(str) {
		var at="@";
		var dot=".";
		var lat=str.indexOf(at);
		var lstr=str.length;
		var ldot=str.indexOf(dot);
		if (str.indexOf(at)==-1){
		   alert("Invalid E-mail");
		   return false;
		}

		if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
		   alert("Invalid E-mail");
		   return false;
		}

		if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
		    alert("Invalid E-mail");
		    return false;
		}

		 if (str.indexOf(at,(lat+1))!=-1){
		    alert("Invalid E-mail");
		    return false;
		 }

		 if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
		    alert("Invalid E-mail");
		    return false;
		 }

		 if (str.indexOf(dot,(lat+2))==-1){
		    alert("Invalid E-mail ID");
		    return false;
		 }
		
		 if (str.indexOf(" ")!=-1){
		    alert("Invalid E-mail");
		    return false;
		 }

 		 return true	;
}
    
function validatePhoneField() {
    var form = document.forms['mailForm'];
    var phoneField = form.phone;

    var error = "";
    var stripped = phoneField.value.replace(/[\(\)\.\-\ ]/g, '');    

   if (phoneField.value == "") {
        return true;
    } else if (isNaN(parseInt(stripped))) {
        error = "The phone number contains illegal characters.\n";
    } else if (stripped.length < 5) {
        error = "The phone number is to short.\n";
    }
    
    if (error != "") {
        alert(error);
   //     phoneField.focus();
        
        return false;
    }
    
    return true;
}


function validateForm() {
	var form = document.forms['freeform'];
	
    if ( (form.name.value == "") || ((form.name.value == null) ) ) {
        alert("Please Enter Name");
		form.name.focus();
        return false;
    } else
    
    if ( (form.subject.value == "") || ((form.subject.value == null) ) ) {
        alert("Please Enter Company");
		form.subject.focus();		
        return false;
    } else
    
	if ( (form.email.value==null)||(form.email.value=="") ) {
		alert("Please Enter your Email");
form.email.focus();
		return false;
	} else
	if (validateMailAddressField(form.email.value)==false) {
		form.email.focus();
		return false;
	} else
	 if ( (form.captcha.value == "") || ((form.captcha.value == null) ) ) {
		 alert("Please Enter correct Captcha");
		form.captcha.focus();	
		return false;
	} else { 
		form.submit(); 
		return (true); 
	}
    
	return true;
 }

function sendMail(strURL) {
   if (validateForm()) {
       xmlhttpPost(strURL);
       
        $("#outerFormContainer").hide('slow');        
        $("#mailContainer").find(':input').val('');
   }
}

function xmlhttpPost(strURL) {
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	
    self.xmlHttpReq.onreadystatechange = function() {
        if (self.xmlHttpReq.readyState == 4) {
            updatepage(self.xmlHttpReq.responseText);
        }
    }
}

function getquerystring() {
    var form     = document.forms['mailForm'];
    var messageStr = "Name: " + form.name.value + "\r\n" + "Company: " + form.subject.value + "\r\n" + "Mail: " + form.from.value + "\r\n";
    
    if ( (form.addressField.value != "") && (form.addressField.value != null) ) {
        messageStr = messageStr + "Address: " + form.addressField.value + "\r\n";
    }
    
    if ( (form.phone.value != "") && (form.phone.value != null) ) {
        messageStr = messageStr + "Phone number: " + form.phone.value + "\r\n\r\n";
    }
    
    if ( (form.message.value != "") && (form.message.value != null) ) {
        messageStr = messageStr + form.message.value;
    }
    
    qstr = 'subject=' + escape(form.subject.value) + "&from=" + escape(form.from.value) + "&message=" + escape(messageStr) + "&mailReady=" + escape(form.mailReady.value) ;  // NOTE: no '?' before querystring
    return qstr;
}

function updatepage(str){
    var mailStatus = 0;
    if (str.indexOf("mailSuccess") == -1) {
        mailStatus = 1;
    }
    
    if (mailStatus == 0) {
        showMessage('info','Reach Out',  'Mail was successfully sent');
    } else {
       showMessage('alert','Engage',  'Sending mail falure');
    }
}

function showMessage(type, title, message) {
    var uiState = null;

    switch (type) {
        case "alert":
            uiState = 'error';

            break;
        case "info":
            uiState = 'highlight';

            break;
    }

    var dialogHTML = "<div id='messageDialog' title='" + title + "' class='ui-widget'><div class='ui-state-" + uiState +" ui-corner-all' style='padding: 0 .7em;'>";
    dialogHTML += "<p><span class='ui-icon ui-icon-" + type + "' style='float: left; margin-right: .3em;'></span>" + message + "</p></div></div>";

    $("#messageDialog").hide('slow');
    $("#messageDialog").remove();
    $("body").append(dialogHTML);
    $("#messageDialog").dialog({
        autoOpen: true,
        modal: true,
        buttons: {
            'Ok': function() {                              
                $(this).dialog('close');   
            }
        },
        close: function() {
                    
        }
    });
    $("#overlay").hide();
    $('.ui-dialog').css({'z-index' : '10599'});
    $('.ui-dialog-overlay').css({'opacity' : '0.7', 'z-index' : '10500',  'background' : '#000'});
}