var colorError="#F1F1F5";//grey
var colorSucess="#FFFFFF";//white
var isPkLate=false;
var isRtLate=false;
var currentDay;
var currentMonth;
var currentYear;
var currentHour;
var currentMinute;
//on the server side, the <asp:repeater will alway let the last radio button set checked....
//But I want the first radio button to be set checked, so a javascript is needed...
function onLoading(day,month,year,hour,minute){
    if(document.getElementsByName("rentalTableInsurance").length>0){
        document.getElementsByName("rentalTableInsurance")[0].checked=true;
    }
    if(document.getElementsByName("camperTableInsurance").length>0){
        document.getElementsByName("camperTableInsurance")[0].checked=true;
    }
    if(document.getElementsByName("budgetTableInsurance").length>0){
        document.getElementsByName("budgetTableInsurance")[0].checked=true;
    }
    currentDay=day;
    currentMonth=month;
    currentYear=year;
    currentHour=hour;
    currentMinute=minute;
    populateTodayDayMonthYearDeutsch("ddlPickUpDay","ddlPickUpMonth","ddlPickUpYear",day,month,year);
    populateTodayDayMonthYearDeutsch("ddlReturnDay","ddlReturnMonth","ddlReturnYear",day,month,year);
    getHideShowLateFee();
}


//month start from 0
function daysInMonth(iMonth, iYear){
  return 32 - new Date(iYear, iMonth, 32).getDate();
}




//not every month will ending up to 31st in days...
//Feb only having 28 days instead..
//Given the month and year value, we compute again the new days in that month
// and save it into the dayfield component..
function updateDays(dayfield,monthfield,yearfield){
    var dayObj=document.getElementById(dayfield);
    var monthObj=document.getElementById(monthfield);
    var yearObj=document.getElementById(yearfield);
    var daySelecVal =dayObj.options[dayObj.selectedIndex].value;
    var monthSelectVal =monthObj.options[monthObj.selectedIndex].value;
    var yearSelectVal =yearObj.options[yearObj.selectedIndex].value;
    
    var monthlyDays=daysInMonth(monthSelectVal-1,yearSelectVal);//in .net(DateTime.Now.Month start from 1) but in javascript it start from 0...So -1 is what it for..
    dayObj.length = 0;
    for (var i=0; i<monthlyDays; i++)
        dayObj.options[i]=new Option(i+1, i+1);
    if(daySelecVal<=monthlyDays)
        dayObj.options[daySelecVal-1]=new Option(daySelecVal, daySelecVal, true, true) ;//new Option(text,value,default select,text select)
    else
        dayObj.options[monthlyDays-1]=new Option(monthlyDays, monthlyDays, true, true) ;//new Option(text,value,default select,text select)

}

//when user select a time in pick up or return...if either those time belong to the business hour
//then the late fee box will disapper....if outside business hour, then it show the late fee...
function GetBookTime() {
    getHideShowLateFee();
}       

//since the method getHideShowLateFee() execute at two different place...so we need to define its method..
//it execute when user select a time at the drop down list...or at when the program just start loading it...
function getHideShowLateFee(){
    var pkDayObj= document.getElementById("ddlPickUpDay");
    var pkDayValue =pkDayObj.options[pkDayObj.selectedIndex].value;
    var pkMonthObj= document.getElementById("ddlPickUpMonth");
    var pkMonthValue =pkMonthObj.options[pkMonthObj.selectedIndex].value;
    var pkYearObj= document.getElementById("ddlPickUpYear");
    var pkYearValue=pkYearObj.options[pkYearObj.selectedIndex].value;
    var pkDate=new Date();
    pkDate.setFullYear(pkYearValue,pkMonthValue-1,pkDayValue);
    
    var rtDayObj= document.getElementById("ddlReturnDay");
    var rtDayValue =rtDayObj.options[rtDayObj.selectedIndex].value;
    var rtMonthObj= document.getElementById("ddlReturnMonth");
    var rtMonthValue =rtMonthObj.options[rtMonthObj.selectedIndex].value;
    var rtYearObj= document.getElementById("ddlReturnYear");
    var rtYearValue=rtYearObj.options[rtYearObj.selectedIndex].value;
    var rtDate=new Date();
    rtDate.setFullYear(rtYearValue,rtMonthValue-1,rtDayValue);
    
    var pkTimeObj=document.getElementById("ddlPickUpTime");
    var pkTimeValue=parseFloat(pkTimeObj.options[pkTimeObj.selectedIndex].value);
    var rtTimeObj=document.getElementById("ddlReturnTime");
    var rtTimeValue=parseFloat(rtTimeObj.options[rtTimeObj.selectedIndex].value);
    


    //getDay...0 which is for Sunday,1 is for Monday...through to 6 is for Saturday....
    if( (pkDate.getDay()==0)&&(pkTimeValue>=8.5 &&  pkTimeValue<=12.5))
        isPkLate=false;
    else if( (pkDate.getDay()>0)&&(pkTimeValue>=8.5 &&  pkTimeValue<=16.5))
        isPkLate=false;
    else
        isPkLate=true;
        
    if( (rtDate.getDay()==0)&&(rtTimeValue>=8.5 &&  rtTimeValue<=12.5))
        isRtLate=false;
    else if( (rtDate.getDay()>0)&&(rtTimeValue>=8.5 &&  rtTimeValue<=16.5))
        isRtLate=false;
    else
        isRtLate=true;
    
    if(isPkLate==true || isRtLate==true){
        document.getElementById("chkBoxFee").style.display="inline";
        document.getElementById("spanLateFee").style.display="inline";
    }
    else{
        document.getElementById("chkBoxFee").style.display="none";
        document.getElementById("spanLateFee").style.display="none";
    }
} 


//When user click on a particular radio button of a vehicle name, then 
//the rental insurance table or the camper insurance will dynamic poping up...
//title assign to 1 is for rental, to 2 is for camper and to 3 is for budget camper...
//we later use its title value for VehicleTypeID(so we don't have make query for its value at database)...
function AVehicleClick(aRadio,campingKitID){
    if(aRadio.title=="1"){
        this.vehicleTypeSelect=1
        document.getElementById(campingKitID).style.display="block";
	    document.getElementById("divRentalInsurace").style.display="block";
	    document.getElementById("divCamperInsurace").style.display="none";
	    document.getElementById("divBudgetInsurace").style.display="none";
	}
    else if(aRadio.title=="2"){
        this.vehicleTypeSelect=2
        document.getElementById(campingKitID).style.display="none";
        document.getElementById("divRentalInsurace").style.display="none";
	    document.getElementById("divCamperInsurace").style.display="block";
	    document.getElementById("divBudgetInsurace").style.display="none";
    }
    else if(aRadio.title=="3"){
        this.vehicleTypeSelect=3
        document.getElementById(campingKitID).style.display="none";
        document.getElementById("divRentalInsurace").style.display="none";
	    document.getElementById("divCamperInsurace").style.display="none";
	    document.getElementById("divBudgetInsurace").style.display="block";
    }
}

//Get an insurance ID base on a vehicle select..
function getInsuranceID(){
    var insurArrayName="";
    var RadioVehicleArray=document.getElementsByName("RadioVehicle");
    for (k=0;k<RadioVehicleArray.length;k++){
        if (RadioVehicleArray[k].checked==true){
            if(RadioVehicleArray[k].title=="1"){//vehicle typeID
                insurArrayName="rentalTableInsurance";
            }
            else if(RadioVehicleArray[k].title=="2"){//vehicle typeID
                insurArrayName="camperTableInsurance";
            }
            else if(RadioVehicleArray[k].title=="3"){//vehicle typeID
                insurArrayName="budgetTableInsurance";
            }
        }
    } 
    insureArray=document.getElementsByName(insurArrayName);
    for(insurID=0;insurID<insureArray.length;insurID++){
        if(insureArray[insurID].checked==true)
            return insureArray[insurID].value;
    }
    return -1;
}

//Get an insurance ID base on a vehicle select..
function getVehID(){
    var vehID_vehTypeID=new Array();
    var RadioVehicleArray=document.getElementsByName("RadioVehicle");
    for (k=0;k<RadioVehicleArray.length;k++){
        if (RadioVehicleArray[k].checked==true){
            vehID_vehTypeID[0]=RadioVehicleArray[k].title;//vehicle typeID
            vehID_vehTypeID[1]=RadioVehicleArray[k].value;//vehicleID
            return vehID_vehTypeID;
        }
    } 
    return vehID_vehTypeID;  
}

//Due to the use of asp:repeater which is hard to know how many items in there....
//So getElementByID seems hard to code,to know which option item got selected.....
//I then use the getElementsByName instead,that loop all items with that group name,
//  and filter out the option items they got selected to a new string, ie:1,3,5....
//Those 1,3,5 then send to database and iterate from there..
//  (only 1 want round trip is needed for record fields in booking)...
function getOptionCharge(){
    var outcome="";
    var optionChargeArray=document.getElementsByName("optionChargeExtra");
    var numBoxTick=0;
    
    //camping Kit applied to car only...not camper one..
    if(document.getElementById("campingKit").checked==true && this.vehicleTypeSelect==1){
        outcome= outcome + document.getElementById("campingKit").value;
        numBoxTick=numBoxTick+1;
    }
    for (i=0;i<optionChargeArray.length;i++){
        if (optionChargeArray[i].checked==true){
            value= optionChargeArray[i].value;
            if(numBoxTick>0)
                outcome=value + ","+ outcome;
            else{
                outcome=outcome+value;
                numBoxTick=numBoxTick+1;
            }
        }
    }
    return outcome;
}




//Method submitValidate() do a validate check whether "a Vehcile been selected; Contact Detail be filled in, etc..."
//If all details are validating, a call back get back to server for update/insert their new data fields...
function submitValidate(){
    //get the fields of date and time for Pick up....
    obj_ddlPickUpLocation= document.getElementById("ddlPickUpLocation");
    val_ddlPickUpLocation =obj_ddlPickUpLocation.options[obj_ddlPickUpLocation.selectedIndex].value;
    obj_ddlPickUpDay= document.getElementById("ddlPickUpDay");
    val_ddlPickUpDay =obj_ddlPickUpDay.options[obj_ddlPickUpDay.selectedIndex].value;
    obj_ddlPickUpMonth= document.getElementById("ddlPickUpMonth");
    val_ddlPickUpMonth =obj_ddlPickUpMonth.options[obj_ddlPickUpMonth.selectedIndex].value;
    obj_ddlPickUpYear= document.getElementById("ddlPickUpYear");
    val_ddlPickUpYear=obj_ddlPickUpYear.options[obj_ddlPickUpYear.selectedIndex].value;
    obj_ddlPickUpTime= document.getElementById("ddlPickUpTime");
    val_ddlPickUpTime =obj_ddlPickUpTime.options[obj_ddlPickUpTime.selectedIndex].value;
    
    //get the fields of date and time for Return
    obj_ddlReturnLocation= document.getElementById("ddlReturnLocation");
    val_ddlReturnLocation =obj_ddlReturnLocation.options[obj_ddlReturnLocation.selectedIndex].value;
    obj_ddlReturnDay= document.getElementById("ddlReturnDay");
    val_ddlReturnDay =obj_ddlReturnDay.options[obj_ddlReturnDay.selectedIndex].value;
    obj_ddlReturnMonth= document.getElementById("ddlReturnMonth");
    val_ddlReturnMonth =obj_ddlReturnMonth.options[obj_ddlReturnMonth.selectedIndex].value;
    obj_ddlReturnYear= document.getElementById("ddlReturnYear");
    val_ddlReturnYear=obj_ddlReturnYear.options[obj_ddlReturnYear.selectedIndex].value;
    obj_ddlReturnTime= document.getElementById("ddlReturnTime");
    val_ddlReturnTime =obj_ddlReturnTime.options[obj_ddlReturnTime.selectedIndex].value;
    
    var sucessCount=true;
    
    var pkDate=new Date(val_ddlPickUpYear,val_ddlPickUpMonth-1,val_ddlPickUpDay,val_ddlPickUpTime-val_ddlPickUpTime%1,val_ddlPickUpTime%1*60,0,0);
    var rtDate=new Date(val_ddlReturnYear,val_ddlReturnMonth-1,val_ddlReturnDay,val_ddlReturnTime-val_ddlReturnTime%1,val_ddlReturnTime%1*60,0,0);
    document.getElementById("span_DateBook").innerHTML="";
    
    isRtDateLesser=false;
    if(rtDate<pkDate){
        isRtDateLesser=true;
        sucessCount=false;
        document.getElementById("span_DateBook").innerHTML="You have selected a return date that is earlier than your pickup date. Please check your dates are correct.<br>";
    }
    currentDate=new Date(currentYear,currentMonth-1,currentDay,parseInt(currentHour),parseInt(currentMinute),0,0);
    isLesserToday=false;
    if(rtDate.getTime()<currentDate.getTime()){
        document.getElementById("span_DateBook").innerHTML=document.getElementById("span_DateBook").innerHTML+ "You have selected a return date and time that has passed. Please check your dates are correct.<br>";
        isLesserToday=true;
        sucessCount=false;
        
        if(pkDate.getTime()<currentDate.getTime()){
            document.getElementById("span_DateBook").innerHTML=document.getElementById("span_DateBook").innerHTML+"You have selected a pickup date and time that has passed. Please check your dates are correct.<br>";
            isLesserToday=true;        
            sucessCount=false;
        }
    }
    else if(pkDate.getTime()<currentDate.getTime()){
        document.getElementById("span_DateBook").innerHTML=document.getElementById("span_DateBook").innerHTML+"You have selected a pickup date and time that has passed. Please check your dates are correct.<br>";
        isLesserToday=true;        
        sucessCount=false;
    }
    
    else if(isRtDateLesser==false && isLesserToday==false){
        document.getElementById("span_DateBook").innerHTML="";
    }
    
    if(pkDate.getMonth()==val_ddlPickUpMonth){
        document.getElementById("span_DateBook").innerHTML="You have selected a pickup date don't exist for that month. Please check your dates are correct.<br>";
        sucessCount=false;
    }
    if(rtDate.getMonth()==val_ddlReturnMonth){
        document.getElementById("span_DateBook").innerHTML=document.getElementById("span_DateBook").innerHTML+"You have selected a return date don't exist for that month. Please check your dates are correct.<br>";
        sucessCount=false;
    }
    
    
    //check if valid, then get the vehicleID from a particular vehicle...
    var vehID_vehTypeID=getVehID();
    if(vehID_vehTypeID.length==0){
        document.getElementById("span_UnslectVechile").innerHTML="Please select the vehicle you wish to book.";
        sucessCount=false;
    }
    else{
        document.getElementById("span_UnslectVechile").innerHTML="";
    }
    
    //check if valid, then get the insuranceID from a particular vehicle...    
    var insurID=getInsuranceID();    
    if(insurID==-1){
        //alert("There is something wrong with the insurance ID at this page...\nSo it can not make a booking...Sorry..");
        sucessCount=false;
    }


    //validate the contact details....
    //it take input as 'obj','error message','colorsucess','color error...
    //if no error...then the error message will not show...but an empty string will display instead
    if(checkEmptyField(document.getElementById("txtFirstName"),"Please enter your first name",colorSucess,colorError)==true)
        sucessCount=false;
    if(checkEmptyField(document.getElementById("txtSurName"),"Please enter your surname",colorSucess,colorError)==true)
        sucessCount=false;
    var emailEmpty=checkEmptyField(document.getElementById("txtEmail"),"Please enter your email address",colorSucess,colorError)
    if(emailEmpty)
        sucessCount=false;
    if(emailEmpty==false){
        if(checkEmail(document.getElementById("txtEmail"),"Please enter a valid email address",colorSucess,colorError)==false)
            sucessCount=false;
    } 
    var emailEmptyConf=checkEmptyField(document.getElementById("txtEmailConf"),"Please confirm your email address",colorSucess,colorError)
    if(emailEmptyConf)
        sucessCount=false;
    if(emailEmptyConf==false){
        if(checkEmailConf(document.getElementById("txtEmail"),document.getElementById("txtEmailConf"),"Confrimation email does not match",colorSucess,colorError)==false)
            sucessCount=false;
    } 
    var numEmpty=checkEmptyField(document.getElementById("txtPhoneDay"),"Please enter your daytime phone number",colorSucess,colorError)
    if(numEmpty)    
        sucessCount=false; 
    if(numEmpty==false){
        if(checkPhoneNum(document.getElementById("txtPhoneDay"),"Your daytime phone must be numbers only",colorSucess,colorError)==false)
            sucessCount=false; 
    } 
    if(checkEmptyField(document.getElementById("txtCountry"),"Please enter your country",colorSucess,colorError)==true)
        sucessCount=false;
    if(sucessCount==true){
        var xmlObj=GetXmlHttpObject();
        if(xmlObj){
            document.getElementById('bkQueryImg').disabled=true;
            document.getElementById('loadImg').style.display='inline';
            xmlObj.open("POST", "booking.aspx",true);
            xmlObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlObj.setRequestHeader("BookingUpload", "true");//The BookingUpload is an abitrary header...Can put it under any name, as long its name match to the header at the server side...
            
            var pkLoc="pkIDLoc="+val_ddlPickUpLocation;
            var pkDay="&pkDay="+val_ddlPickUpDay;
            var pkMon="&pkMon="+val_ddlPickUpMonth;
            var pkYear="&pkYear="+val_ddlPickUpYear;
            var pkTime="&pkTime="+val_ddlPickUpTime;
            
            var rtLoc="&rtIDLoc="+val_ddlReturnLocation;
            var rtDay="&rtDay="+val_ddlReturnDay;
            var rtMon="&rtMon="+val_ddlReturnMonth;
            var rtYear="&rtYear="+val_ddlReturnYear;
            var rtTime="&rtTime="+val_ddlReturnTime;
            
            var vehTypeID="&vehTypeID="+vehID_vehTypeID[0];
            var vehID="&vehID="+vehID_vehTypeID[1];
            var addInfo="&addInfo="+escape(document.getElementById("txtComments").value.replace(/</g,"~lessthan~"));
            
            var insurID="&insurID="+insurID;
            var optChargeID="&optChargeID="+getOptionCharge();
    
            //-1 for not late, 1 for late...
            var pkLateID=isPkLate==false?"&pkLateID=-1":"&pkLateID="+document.getElementById("chkBoxFee").value;
            var rtLateID=isRtLate==false?"&rtLateID=-1":"&rtLateID="+document.getElementById("chkBoxFee").value;
            //var lateFeeID="&lateFeeID="+document.getElementById("chkBoxFee").value;
            
            var fName="&fName="+document.getElementById("txtFirstName").value;
            var sName="&sName="+document.getElementById("txtSurName").value;
            var email="&email="+document.getElementById("txtEmail").value;
            var phoneDay="&phoneDay="+document.getElementById("txtPhoneDay").value;
            var phoneEven="&phoneEven="+document.getElementById("txtPhoneDay").value;
            var fax="&fax="+document.getElementById("txtFax").value;
            var mobile="&mobile="+document.getElementById("txtMobile").value;
            var street="&street="+document.getElementById("txtStreet").value;
            var suburb="&suburb="+document.getElementById("txtSuburb").value;
            var city="&city="+document.getElementById("txtCity").value;
            var state="&state="+document.getElementById("txtState").value;
            var postCode="&postCode="+document.getElementById("txtPostcode").value;
            var country="&country="+document.getElementById("txtCountry").value;
            var flightDetail="&flightDetail="+escape(document.getElementById("txtFlightDetail").value.replace(/</g,"~lessthan~"));//javascript don't allow < symbol when sending to server
            var dataFields=pkLoc+pkDay+pkMon+pkYear+pkTime+rtLoc+rtDay+rtMon+rtYear+rtTime+vehTypeID+vehID+addInfo+insurID+optChargeID+pkLateID+rtLateID+fName+sName+email+phoneDay+phoneEven+fax+mobile+street+suburb+city+state+postCode+country+flightDetail;
            
            xmlObj.send(dataFields);
            xmlObj.onreadystatechange = function readyCallback(){
                if(xmlObj.readyState==4 && xmlObj.status==200){//finish sending=4.....success request=200...
                    if(xmlObj.responseText!="-1"){//any number bigger than -1 is for sucess...-1 is for fail
                        delete xmlObj;
                        //window.location="../secure/thankyou.aspx?bkID="+xmlObj.responseText +"&email=RG&init=IG"
                        window.location="../secure/thankyou.aspx?bkID="+xmlObj.responseText +"&email=IG"
                    }
                    else{
                        alert("The Booking can not be done...\nThat could be due to the server error...\nPlease try it again...");
                        document.getElementById('bkQueryImg').disabled=false;
                        document.getElementById('loadImg').style.display='none';
                    }
                }
            }
        }
    }
    else{
        document.getElementById("headMessage").style.display="block";
        window.location="#top";    
    }
}