//Global variables
var siteValues = '';
var vacancyTypeValues = '';

/* Sets the values from teh selected checkboxes, but nasty if statements used! */
function setCheckboxValues(checkboxName) {
    for (var i=0; i < document.getElementsByName(checkboxName).length; i++) {
        if (document.getElementsByName(checkboxName)[i].checked) {
            if (checkboxName == 'sites') {
                if (siteValues == '') {
                    siteValues = document.getElementsByName(checkboxName)[i].value;
                } else {
                    siteValues += ',' + document.getElementsByName(checkboxName)[i].value;
                }
            }

            if (checkboxName == 'vacancytypes') {
                if (vacancyTypeValues == '') {
                    vacancyTypeValues = document.getElementsByName(checkboxName)[i].value;
                } else {
                    vacancyTypeValues += ',' + document.getElementsByName(checkboxName)[i].value;
                }
            }
        }
    }
}

/* Validates compulsory checkboxes */
function validateCheckboxes(checkboxName) {
    for (var i = 0; i < document.getElementsByName(checkboxName).length; i++) {
        if (document.getElementsByName(checkboxName)[i].checked) {
            return true;
            break;
        }
    }
    return false;            
}

/*validates email adress*/
function checkEmail(email) {
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(email)) {
        return false;
    } else {
        return true;
    }
}


//Initialise the Overlay for Book a meeting when the book a meeting button is clicked
function initialiseScreenOverLay() {
    $(document).ready(function() {

        //select all the a tag with name equal to modal
        $('.overlay-button').click(function(e) {

            $.maxZIndex = $.fn.maxZIndex = function(opt) {
                /// <summary>
                /// Returns the max zOrder in the document (no parameter)
                /// Sets max zOrder by passing a non-zero number
                /// which gets added to the highest zOrder.
                /// </summary>    
                /// <param name="opt" type="object">
                /// inc: increment value, 
                /// group: selector for zIndex elements to find max for
                /// </param>
                /// <returns type="jQuery" />
                var def = { inc: 10, group: "*" };
                $.extend(def, opt);
                var zmax = 0;
                $(def.group).each(function() {
                    var cur = parseInt($(this).css('z-index'));
                    zmax = cur > zmax ? cur : zmax;
                });
                if (!this.jquery)
                    return zmax;

                return this.each(function() {
                    zmax += def.inc;
                    $(this).css("z-index", zmax);
                });
            }

            //Cancel the link behavior
            e.preventDefault();

            //build the Form
            var id = '#dialog';
            $(id).html(createBookingForm("Book a meeting"));
            //if close button is clicked
            $('#dialog .close').click(function(e) {
                //Cancel the link behavior   
                e.preventDefault();
                $('#mask, #dialog').hide();
            });

            $("#meetingdate").datepicker({
                beforeShow: function() { $('#ui-datepicker-div').maxZIndex(); },
                dateFormat: 'dd/mm/yy'
            });

            //Get the screen height and width   
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();

            //transition effect
            $('#mask').css({ 'width': '100%', 'height': maskHeight, 'top': 0, 'left': 0 });
            $('#mask').fadeIn(0.1); //1000
            $('#mask').fadeTo("slow", 0.5); 0.8


            $(id).css('top', 50);
            $(id).css('left', 100);

            //transition effect
            $(id).fadeIn(1);

            window.location.href = '#book-a-meeing';
        });

    });
}

//Get all Form selected Values and Validate and Submit Form
function submitBookingForm() {
    //Get all Form selected Values
    var allSites = [];
    $("input[name='sites']").each(function() {
        if ($(this).is(':checked')) {
            allSites.push($(this).val());
        }
    });
    var company = $("#company").val();
    var clientname = $("#clientname").val();
    var clientemail = $("#clientemail").val();
    var telephone = $("#telephone").val();
    var position = $("#position").val();
    var meetingdate = $("#meetingdate").val();
    var selecthour = $("#selecthour").val();
    var selectminute = $("#selectminute").val();
    var meetinglocation = $("#meetinglocation").val();
    var adReqs = [];
    $("input[name='vacancytypes']").each(function() {
        if ($(this).is(':checked')) {
            adReqs.push($(this).val());
        }
    });
    var otherRequirements = $("#otherRequirements").val();
    var recruitmentno = $("#recruitmentno").val();
    var extrainfo = $("#extrainfo").val();
    var hearaboutus = $("#hearaboutus").val();
    var hearaboutusother = $("#hearaboutusother").val();
    //Validate and Submit Form
    if (validateBookingForm(allSites, company, clientname, clientemail, telephone, meetingdate, recruitmentno, adReqs, hearaboutusother, hearaboutus)) {
        SendBookingRequest(allSites, company, clientname, clientemail, telephone, meetingdate, recruitmentno, adReqs, position, selecthour, selectminute, otherRequirements, extrainfo, hearaboutus, hearaboutusother, meetinglocation);
    }
}

//Check booking form and validate required fields
function validateBookingForm(allSites, company, clientname, clientemail, telephone, meetingdate, recruitmentno, adReqs, hearaboutusother, hearaboutus) {
    if (allSites == null || allSites.length == 0) {
        alert("You must select at least one area of interest.");
        return false;
    }
    if (jQuery.trim(company) == "") {
        alert("Please enter a company name.");
        return false;
    }
    if (jQuery.trim(clientname) == "") {
        alert("Please enter your name.");
        return false;
    }
    if (jQuery.trim(clientemail) == "") {
        alert("Please enter your email address.");
        return false;
    }
    if (jQuery.trim(telephone) == "") {
        alert("Please enter your telephone number.");
        return false;
    }
    if (jQuery.trim(meetingdate) == "" || jQuery.trim(meetingdate) == "dd/mm/yyyy") {
        alert("Please enter a valid date.");
        return false;
    }
    if (jQuery.trim(recruitmentno) == "") {
        alert("Please select a number of recruitment positions you are planning to advertise.");
        return false;
    }
    if (adReqs == null || adReqs.length == 0) {
        alert("You must select at least one advertising requirement.");
        return false;
    }
    if (jQuery.trim(hearaboutusother) == "" && jQuery.trim(hearaboutus) == "") {
        alert("Please select where you heard about us.");
        return false;
    }
    return true;
}


/*Send data to ajax-helper to add a new booking request*/
function SendBookingRequest(allSites, company, clientname, clientemail, telephone, meetingdate, recruitmentno, adReqs, position, selecthour, selectminute, otherRequirements, extrainfo, hearaboutus, hearaboutusother, meetinglocation) {
    $('#mask, #dialog').hide();
    var siteValues = allSites.join(",");
    var vacancyTypeValues = adReqs.join(",");
    var template = { id: 0, Sites: siteValues, Company: company, Name: clientname, Email: clientemail, Telephone: telephone, Position: position, MeetingDateTime: meetingdate + ' ' + selecthour + ':' + selectminute,
        RecruitmentNo: recruitmentno, VacancyTypes: vacancyTypeValues, AdvertOther: otherRequirements, ExtraInfo: extrainfo, HearAboutUs: hearaboutus, HearAboutUsOther: hearaboutusother, Location: meetinglocation
    };
    $.post("/library/ajax/ajax-helper.aspx?action=addBookingRequest", template,
        function(data) {
            if (data == 1) {
                $.prompt('Thank you for your meeting request. We will be in contact shortly to confirm your meeting.', {
                    prefix: 'cleanblue'
                });
            }
            else {
                $.prompt('We are sorry, an error has occurred while sending your request. Please call our mainline number to arrange a meeting: +44 (0)20 3003 4000', {
                    prefix: 'cleanblue'
                });
            }
        }
    );
}


//Creates the booking form
function createBookingForm(title) {
    var str =
    "<table width='700' border='0' cellpadding='0' cellspacing='0' style='background-color:#FFFFFF; clear: both; border: 1px solid #CCCCCC; font-size: 0.9em'>" +
    "    <tr style='background-color: #CCCCCC;'>" +
    "        <td width='20'>" +
    "        </td>" +
    "        <td width='520'>" +
    "        </td>" +
    "        <td width='50'>" +
    "        </td>" +
    "        <td width='50'>" +
    "        </td>" +
    "        <td width='20'>" +
    "            <a href='#' class='close' style='color: #fff; font-weight: bolder'>x</a>" +
    "        </td>" +
    "    </tr>" +
    "    <tr>" +
    "        <td width='20'>" +
    "            &nbsp;" +
    "        </td>" +
    "        <td colspan='3'>" +
    "            <h2 style='float: left; clear: both; border: 1px none black; padding-bottom: 3px;'>" +
    "                " + title + "</h2>" +
    "            <p style='clear: both'>" +
    "                All questions marked <b class='asterisk'>*</b> are mandatory</p>" +
    "            <table width='620' style='clear: both;'>" +
    "                <tr>" +
    "                    <td width='300' valign='top'>" +
    "                        Which area(s) are you interested in? <b class='asterisk'>*</b>" +
    "                    </td>" +
    "                    <td>" +
    "                        <table cellpadding='0' cellspacing='0'>" +
    "                            <tr>" +
    "                                <td>" +
    "                                    <input type='checkbox' id='Checkbox1' name='sites' value='1' />" +
    "                                    Milkround.com" +
    "                                </td>" +
    "                                <td>" +
    "                                    <input type='checkbox' id='Checkbox2' name='sites' value='2' />" +
    "                                    Second Post" +
    "                                </td>" +
    "                                <td>" +
    "                                    <input type='checkbox' id='Checkbox3' name='sites' value='3' />" +
    "                                    Diversity" +
    "                                </td>" +
    "                            </tr>" +
    "                            <tr>" +
    "                                <td>" +
    "                                    <input type='checkbox' id='Checkbox4' name='sites' value='5' />" +
    "                                    Further Study" +
    "                                </td>" +
    "                                <td colspan='2'>" +
    "                                    <input type='checkbox' id='Checkbox5' name='sites' value='6' />" +
    "                                    Milkround Online Applications" +
    "                                </td>" +
    "                            </tr>" +
    "                            <tr>" +
    "                                <td colspan='3'>" +
    "                                    <input type='checkbox' id='Checkbox6' name='sites' value='11' />" +
    "                                    Graduate Career" +
    "                                </td>" +
    "                            </tr>" +
    "                        </table>" +
    "                    </td>" +
    "                </tr>" +
    "                <tr>" +
    "                    <td>" +
    "                        Company <b class='asterisk'>*</b>" +
    "                    </td>" +
    "                    <td>" +
    "                        <input type='text' name='company' id='company' maxlength='200' size='40' />" +
    "                    </td>" +
    "                </tr>" +
    "                <tr>" +
    "                    <td>" +
    "                        Name <b class='asterisk'>*</b>" +
    "                    </td>" +
    "                    <td>" +
    "                        <input type='text' name='name' id='clientname' maxlength='100' size='40' />" +
    "                    </td>" +
    "                </tr>" +
    "                <tr>" +
    "                    <td>" +
    "                        Email <b class='asterisk'>*</b>" +
    "                    </td>" +
    "                    <td>" +
    "                        <input type='text' name='email' id='clientemail' maxlength='100' size='40' />" +
    "                    </td>" +
    "                </tr>" +
    "                <tr>" +
    "                    <td valign='top'>" +
    "                        Telephone <b class='asterisk'>*</b>" +    
    "                    </td>" +
    "                    <td valign='top'>" +
    "                        <input type='text' name='telephone' id='telephone' maxlength='50' size='40' />" +
    "                    </td>" +
    "                </tr>" +
    "                <tr>" +
    "                    <td>" +
    "                        Job title" +
    "                    </td>" +
    "                    <td>" +
    "                        <input type='text' name='position' id='position' maxlength='100' size='40' />" +
    "                    </td>" +
    "                </tr>" +
    "                <tr>" +
    "                    <td>" +
    "                        Date of meeting <b class='asterisk'>*</b>" +
    "                    </td>" +
    "                    <td>" +
    "                        <input type='text' name='date' id='meetingdate' maxlength='10' size='20' value='dd/mm/yyyy'" +
    "                             />" +
    "                        <select id='selecthour' name='hour'>" +
    "                            <option value='00'>00</option>" +
    "                            <option value='01'>01</option>" +
    "                            <option value='02'>02</option>" +
    "                            <option value='03'>03</option>" +
    "                            <option value='04'>04</option>" +
    "                            <option value='05'>05</option>" +
    "                            <option value='06'>06</option>" +
    "                            <option value='07'>07</option>" +
    "                            <option value='08'>08</option>" +
    "                            <option value='09' selected='selected'>09</option>" +
    "                            <option value='10'>10</option>" +
    "                            <option value='11'>11</option>" +
    "                            <option value='12'>12</option>" +
    "                            <option value='13'>13</option>" +
    "                            <option value='14'>14</option>" +
    "                            <option value='15'>15</option>" +
    "                            <option value='16'>16</option>" +
    "                            <option value='17'>17</option>" +
    "                            <option value='18'>18</option>" +
    "                            <option value='19'>19</option>" +
    "                            <option value='20'>20</option>" +
    "                            <option value='21'>21</option>" +
    "                            <option value='22'>22</option>" +
    "                            <option value='23'>23</option>" +
    "                        </select>" +
    "                        :" +
    "                        <select id='selectminute' name='minute'>" +
    "                            <option value='00'>00</option>" +
    "                            <option value='05'>05</option>" +
    "                            <option value='10'>10</option>" +
    "                            <option value='15'>15</option>" +
    "                           <option value='20'>20</option>" +
    "                            <option value='25'>25</option>" +
    "                            <option value='30'>30</option>" +
    "                            <option value='35'>35</option>" +
    "                            <option value='40'>40</option>" +
    "                            <option value='45'>45</option>" +
    "                            <option value='50'>50</option>" +
    "                            <option value='55'>55</option>" +
    "                        </select>" +
    "                    </td>" +
    "                </tr>" +
    "                <tr>" +
    "                    <td valign='top'>" +
    "                        Location of meeting (if you would like the meeting at our office please leave in" +
    "                        our address, otherwise please delete and enter your address)" +
    "                    </td>" +
    "                    <td valign='top'>" +
    "                        <textarea style='width: 340px; height: 40px' name='location' id='meetinglocation'>Milkround Online, 2nd Floor, 236 Gray's Inn Road, London, WC1X 8HB</textarea>" +
    "                    </td>" +
    "                </tr>" +
    "                <tr>" +
    "                    <td width='150' valign='top'>" +
    "                        Advertising requirement <b class='asterisk'>*</b>" +
    "                    </td>" +
    "                    <td>" +
    "                        <table width='350' cellpadding='0' cellspacing='0'>" +
    "                            <tr valign='top'>" +
    "                                <td>" +
    "                                    <input type='checkbox' id='Checkbox7' name='vacancytypes' value='1' />" +
    "                                    Internship/placement" +
    "                                </td>" +
    "                                <td>" +
    "                                    <input type='checkbox' id='Checkbox8' name='vacancytypes' value='2' />" +
    "                                    Graduate job/training scheme" +
    "                                </td>" +
    "                            </tr>" +
    "                            <tr>" +
    "                                <td>" +
    "                                    <input type='checkbox' id='Checkbox9' name='vacancytypes' value='5' />" +
    "                                    Holiday/part-time work" +
    "                                </td>" +
    "                                <td>" +
    "                                    <input type='checkbox' id='Checkbox10' name='vacancytypes' value='6' />" +
    "                                    Gap year/volunteering" +
    "                                </td>" +
    "                            </tr>" +
    "                            <tr>" +
    "                                <td>" +
    "                                    <input type='checkbox' id='Checkbox11' name='vacancytypes' value='7' />" +
    "                                    Further study course" +
    "                                </td>" +
    "                                <td>" +
    "                                    <input type='checkbox' id='Checkbox12' name='vacancytypes' value='8' />" +
    "                                    Other" +
    "                                </td>" +
    "                            </tr>" +
    "                        </table>" +
    "                    </td>" +
    "                </tr>" +
    "               <tr>" +
    "                    <td valign='top'>" +
    "                        If other, please specify" +
    "                    </td>" +
    "                    <td>" +
    "                        <input type='text' name='advertiseotherinfo' id='otherRequirements' maxlength='50'" +
    "                            size='40' />" +
    "                    </td>" +
    "                </tr>" +
    "                <tr>" +
    "                    <td>" +
    "                        No. of recruits <b class='asterisk'>*</b>" +
    "                    </td>" +
    "                    <td>" +
    "                        <select id='recruitmentno' name='recruitmentno'>" +
    "                            <option value='1'>1</option>" +
    "                            <option value='2-5'>2-5</option>" +
    "                            <option value='6-10'>6-10</option>" +
    "                            <option value='11-20'>11-20</option>" +
    "                            <option value='21-50'>21-50</option>" +
    "                            <option value='51-100'>51-100</option>" +
    "                            <option value='101+'>101+</option>" +
    "                        </select>" +
    "                    </td>" +
    "                </tr>" +
    "                <tr>" +
    "                    <td valign='top'>" +
    "                        Please let us know any information regarding your requirements you feel would be" +
    "                        relevant at this stage." +
    "                    </td>" +
    "                    <td>" +
    "                        <textarea style='width: 340px; height: 70px' name='extrainfo' id='extrainfo'></textarea>" +
    "                    </td>" +
    "                </tr>" +
    "                <tr>" +
    "                    <tr>" +
    "                        <td valign='top'>" +
    "                            How did you hear about us? <b class='asterisk'>*</b>" +
    "                        </td>" +
    "                        <td>" +
    "                            <select id='hearaboutus' name='hearaboutus'>" +
    "                                <option value=''>Please select</option>" +
    "                                <option value='3'>Marketing email</option>" +
    "                                <option value='4'>Newspaper advert</option>" +
    "                                <option value='6'>Online advert</option>" +
    "                                <option value='5'>Search engine</option>" +
    "                                <option value='1'>Used us before</option>" +
    "                                <option value='2'>Word of mouth</option>" +
    "                                <option value='7'>Other</option>" +
    "                            </select>" +
    "                        </td>" +
    "                    </tr>" +
    "                    <tr>" +
    "                        <td valign='top'>" +
    "                            If other, please specify" +
    "                        </td>" +
    "                        <td>" +
    "                            <input type='text' name='hearaboutusother' id='hearaboutusother' maxlength='50' size='40' />" +
    "                        </td>" +
    "                    </tr>" +
    "            </table>" +
    "        </td>" +
    "        <td width='20'>" +
    "            &nbsp;" +
    "        </td>" +
    "    </tr>" +
    "    <tr height='50'>" +
    "        <td width='20'>" +
    "            &nbsp;" +
    "        </td>" +
    "        <td align='right' colspan='3'>" +
    "            <a href='#' class='close small-button' style='float:right;color:#383838;'>Cancel</a>" +
    "            <a href='#' onclick='submitBookingForm()' class='small-button' style='float:right;margin-right:10px;color:#383838;'>Send</a>" +
    "        </td>" +
    "        <td width='20'>" +
    "            &nbsp;" +
    "        </td>" +
    "    </tr>" +
    "</table>"
    return str;
}