queryForData ( TRS.ConfigMap.ComponentsBaseURL + "js/typemaps/combobox.js", function() {} ) ;
queryForData ( TRS.ConfigMap.ComponentsBaseURL + "js/widgets/gaq_vertical.js", function() {} ) ;
construct = function()
{
    var element = $("//div[@name=GAQdiv]") ;
    element.empty() ;

    //first floor
    var spiderAssistContainer = $("<div>").attr("className","GAQspiderAssistContainer");
    var topContainer_spider = $("<div>").attr("className","GAQtopContainer_spider");
    var spiderBodyContainer = $("<div>").attr("className","GAQspiderBodyContainer");
    var bottomCurveContainer = $("<div>").attr("className","GAQbottomCurveContainer");
    spiderAssistContainer.append(topContainer_spider);
    spiderAssistContainer.append(spiderBodyContainer);
    spiderAssistContainer.append(bottomCurveContainer);
    
    //second floor
    var spiderBodyContent = $("<div>").attr("className","GAQspiderBodyContent");
    spiderBodyContainer.append(spiderBodyContent);
    
    //third floor
    var spiderHeaderContainer = $("<div>").attr("className","GAQbluecolorHdr");
    var spiderBrandAndModelContainer = $("<div>").attr("className","GAQcontainer1");
    var spiderStateAndCityContainer = $("<div>").attr("className","GAQcontainer2");
    var spiderTitleContainer = $("<div>").attr("className","GAQtitleContainerClass");
    var spiderNameContainer = $("<div>").attr("className","GAQnameContainerClass");
    var spiderLandlineContainer = $("<div>").attr("className","GAQcontainer3");
    var spiderMobileContainer = $("<div>").attr("className","GAQcontainer2");
    var spiderEmailContainer = $("<div>").attr("className","GAQcontainer3");
    var spiderTradeContainer = $("<div>").attr("className","GAQtradeContainer");
    var spiderContactContainer = $("<div>").attr("className","GAQcontact");
    var spiderQueryContainer = $("<div>").attr("className","GAQqueryContainer");


    var spiderApprovalContainer = $("<div>").attr("className","GAQApprovalContainer");



    var spiderButonContainerr = $("<div>").attr("className","GAQbutonContainer");
    spiderBodyContent.append(spiderHeaderContainer);
    spiderBodyContent.append(spiderBrandAndModelContainer);
    spiderBodyContent.append(spiderStateAndCityContainer);
    spiderBodyContent.append(spiderTitleContainer);
    spiderBodyContent.append(spiderNameContainer);
    spiderBodyContent.append(spiderLandlineContainer);
    spiderBodyContent.append(spiderMobileContainer);
    spiderBodyContent.append(spiderEmailContainer);
    spiderBodyContent.append(spiderTradeContainer);
    spiderBodyContent.append(spiderContactContainer);
    spiderBodyContent.append(spiderQueryContainer);


    spiderBodyContent.append(spiderApprovalContainer);



    spiderBodyContent.append(spiderButonContainerr);
    
    //fourth floor
    var spiderHeaderLogoImgContainer = $("<div>").attr("className","GAQblueLogoImgContainer");
    var spiderHeaderTxtcotainer = $("<div>").attr("className","GAQblueTxtcotainer");
    spiderHeaderContainer.append(spiderHeaderLogoImgContainer);
    spiderHeaderContainer.append(spiderHeaderTxtcotainer);
    
    var spiderBrandLabel = $("<div>").attr("className","GAQbrandBox").html("Brand:");
    var spiderBrandCombo = $("<div>").attr("className","GAQbrandCombo");
    var spiderModelLabel = $("<div>").attr("className","GAQmodelBox").html("Model:");
    var spiderModelCombo = $("<div>").attr("className","GAQmodelBox");
    spiderBrandAndModelContainer.append(spiderBrandLabel);
    spiderBrandAndModelContainer.append(spiderBrandCombo);
    spiderBrandAndModelContainer.append(spiderModelLabel);
    spiderBrandAndModelContainer.append(spiderModelCombo);
    
    var spiderStateLabel = $("<div>").attr("className","GAQbrandBox").html("State:");
    var spiderStateCombo = $("<div>").attr("className","GAQbrandCombo");
    var spiderCityLabel = $("<div>").attr("className","GAQmodelBox").html("City:");
    var spiderCityCombo = $("<div>").attr("className","GAQmodelBox");
    spiderStateAndCityContainer.append(spiderStateLabel);
    spiderStateAndCityContainer.append(spiderStateCombo);
    spiderStateAndCityContainer.append(spiderCityLabel);
    spiderStateAndCityContainer.append(spiderCityCombo);
    
    var spiderTitleLabel = $("<div>").attr("className","GAQbrandBox").html("Title:");
    var spiderTitleCombo = $("<div>").attr("className","GAQbrandCombo");
    spiderTitleContainer.append(spiderTitleLabel);
   	spiderTitleContainer.append(spiderTitleCombo);
   	
   	var spiderNameLabel = $("<div>").attr("className","GAQnameField").html("First/Last Name:");
   	var spiderFirstNameInput = $("<div>").attr("className","GAQnamediv");
   	var spiderSecondNameInput = $("<div>").attr("className","GAQnamediv");
    spiderNameContainer.append(spiderNameLabel);
    spiderNameContainer.append(spiderFirstNameInput);
    spiderNameContainer.append(spiderSecondNameInput);
    
    var spiderLandLineLabel = $("<div>").attr("className","GAQlandlineField").html("Landline:");
    var spiderLandLinenum1 = $("<div>").attr("className","GAQnum1");
    var spiderLandLineSeprateDiv1 = $("<div>").attr("className","GAQnumSperateDiv1"); 
    var spiderLandLinenum2 = $("<div>").attr("className","GAQnum2");
    var spiderLandLineSeprateDiv2 = $("<div>").attr("className","GAQnumSperateDiv1"); 
    var spiderLandLinenum3 = $("<div>").attr("className","GAQnum3");
    spiderLandlineContainer.append(spiderLandLineLabel);
    spiderLandlineContainer.append(spiderLandLinenum1);
    spiderLandlineContainer.append(spiderLandLineSeprateDiv1);
    spiderLandlineContainer.append(spiderLandLinenum2);
    spiderLandlineContainer.append(spiderLandLineSeprateDiv2);
    spiderLandlineContainer.append(spiderLandLinenum3);
    
    var spiderMobileLabel = $("<div>").attr("className","GAQlandlineField").html("Mobile:");
    var spiderMobileNum1 = $("<div>").attr("className","GAQnum1");
    var spiderMobileSeprateDiv1 = $("<div>").attr("className","GAQnumSperateDiv1");
    var spiderMobileNum3 = $("<div>").attr("className","GAQnum3");
    spiderMobileContainer.append(spiderMobileLabel);
    spiderMobileContainer.append(spiderMobileNum1);
    spiderMobileContainer.append(spiderMobileSeprateDiv1);
    spiderMobileContainer.append(spiderMobileNum3);
    
    var spiderEmailLabel = $("<div>").attr("className","GAQlandlineField").html("Email:");
    var spiderEmailContent = $("<div>").attr("className","GAQemailContainer");
    spiderEmailContainer.append(spiderEmailLabel);
    spiderEmailContainer.append(spiderEmailContent);
	
	var spiderProviderContent = $("<div>").attr("className","GAQemailContainer");
	spiderEmailContainer.append(spiderProviderContent);
    
    var spiderTradeLabel = $("<div>").attr("className","GAQtradeinDiv").html("Considering a Trade-in:");
    var spiderRadio1 = $("<div>").attr("className","GAQradio1");
    var spiderRadioAnswer1 = $("<div>").attr("className","GAQradioAnswer").html("Yes");
    var spiderRadio2 = $("<div>").attr("className","GAQradio2");
    var spiderRadioAnswer2 = $("<div>").attr("className","GAQradioAnswer").html("No");
    spiderTradeContainer.append(spiderTradeLabel);
    spiderTradeContainer.append(spiderRadio1);
    spiderTradeContainer.append(spiderRadioAnswer1);
    spiderTradeContainer.append(spiderRadio2);
    spiderTradeContainer.append(spiderRadioAnswer2);
    
    var spiderContactLabel = $("<div>").attr("className","GAQcontactContainer").html("Your Contact preferences:");
    var spiderContactCombo = $("<div>").attr("className","GAQbrandCombo");
    spiderContactContainer.append(spiderContactLabel);
    spiderContactContainer.append(spiderContactCombo);
    
    var spiderQueryLabel = $("<div>").attr("className","GAQqueryTxt").html("Your Query:");
    var spiderQueryTxtareaContainer = $("<div>").attr("className","GAQtxtareaContainer");
    spiderQueryContainer.append(spiderQueryLabel);
    spiderQueryContainer.append(spiderQueryTxtareaContainer);


    var spiderCheckbox = $("<div>").attr("className","GAQCheckbox");
    var spiderApprovalLabel = $("<div>").attr("className","GAOApprovalLabel").html("I accept the terms and conditions");
    spiderApprovalContainer.append(spiderCheckbox);
    spiderApprovalContainer.append(spiderApprovalLabel);



    
    var spiderBtnImg = $("<div>").attr("className","GAQbtnImg").click( function(){
				return checkGAQ();
    	}
    );
    spiderButonContainerr.append(spiderBtnImg);

		//fifth floor
		var spiderHeaderTxt1 = $("<div>").attr("className","GAQboldTxt").html("CarBuy Assist");
		var spiderHeaderTxt2 = $("<div>").attr("className","GAQregularTxt").html("Want to buy a car?Let our experts help. Please provide:");
		spiderHeaderTxtcotainer.append(spiderHeaderTxt1);
		spiderHeaderTxtcotainer.append(spiderHeaderTxt2);
		
		var brands = $("<select>").attr( "name", "prMake" ).attr( "componentType", "ComboBox" ).attr("className","GAQcomboStyle").attr("id","prMake").change( function() {
            TRS.refresh ( this.name, this.value ) ;
            } ) ;
		spiderBrandCombo.append(brands);
		
		var vehicles = $("<select>").attr( "name", "prYearModel" ).attr( "componentType", "ComboBox" ).attr("className","GAQcomboStyle").attr("id","prYearModel") ;
		spiderModelCombo.append(vehicles);
		
		var states = $("<select>").attr( "name", "StatesDropDown" ).attr( "componentType", "ComboBox" ).attr("className","GAQcomboStyle").attr("id","StatesDropDown").change( function() {
            TRS.refresh ( this.name, this.value ) ;
            } ) ;
    spiderStateCombo.append(states);
    
    var cities = $("<select>").attr( "name", "CitiesDropDown" ).attr( "componentType", "ComboBox" ).attr("className","GAQcomboStyle").attr("id","CitiesDropDown") ;
    spiderCityCombo.append(cities);
    
		var titleOfUser = '<select id="titleOfUser" class="GAQtitlecomboStyle" componentType="ComboBox" name="titleOfUser" >' + 
											'<option value="Mr." selected >Mr.</option>' +
											'<option value="Miss.">Miss.</option>' +
											'<option value="Dr.">Dr.</option>' +
											'<option value="Mrs.">Mrs.</option>' +
											'</select>';
	  spiderTitleCombo.html(titleOfUser);
	  
	  var firstName = '<input type="text" class="GAQtxtBoxStyle" id="firstName"/>';
	  spiderFirstNameInput.html(firstName);
	  var lastName = '<input type="text" class="GAQtxtBoxStyle" id="lastName"/>';
		spiderSecondNameInput.html(lastName);
		
		var landLineNum1 = '<select class="GAQtitlecomboStyle" name="num1">' +
											 '<option value="+91" selected >+91</option>' +
											 '</select>';
	  var landLineNum2 = '<input type="text" class="GAQnumTxtBox" value="" id="stdCode" />';
	  var landLineNum3 = '<input type="text" class="GAQnum3TxtBox" value="" id="phoneNumber" />';
	  spiderLandLinenum1.append(landLineNum1);
	  spiderLandLinenum2.append(landLineNum2);
	  spiderLandLinenum3.append(landLineNum3);
	  
	  var mobileNum1 = '<select class="GAQtitlecomboStyle" name="num1">' +
										 '<option value="+91" selected >+91</option>' +
										 '</select>';
	  var mobileNum3 = '<input type="text" class="GAQnum3TxtBox" value="" id="mobileNumber" />';
	  spiderMobileNum1.append(mobileNum1);
	  spiderMobileNum3.append(mobileNum3);
	  
	  var email = '<input type="text" class="GAQemailTxtBox" id="email"/>';
	  spiderEmailContent.append(email);
	  
	  var provider = '<input type="hidden" class="GAQtxtBoxStyle" id="provider" value="null"/>';
	  spiderEmailContent.append(provider);	  
	  
	  var radio1 = '<input id="tradeIn" name="tradeIn" type="radio" value="yes" />';
	  var radio2 = '<input id="tradeIn" name="tradeIn" type="radio" value="no" checked />';
	  spiderRadio1.append(radio1);
	  spiderRadio2.append(radio2);
	  
	  var contact = '<select id="contactPreference" class="GAQcontactcomboStyle" componentType="ComboBox" name="contactPreference" >' +
									'<option value="Morning" selected >Morning</option>' +
									'<option value="Afternoon">Afternoon</option>' +
									'<option value="Evening">Evening</option>' +
									'</select>';
		spiderContactCombo.append(contact);
		
		var query = '<textarea class="GAQtxtareaStyle" rows="" cols="" name="yourQuery" id="yourQuery" ></textarea>';
		spiderQueryTxtareaContainer.append(query);


    var checkbox = '<input id="checkbox" name="checkbox" type="checkbox" />';
    spiderCheckbox.append(checkbox);



	  
	  var imghref = '<a href="#"></a>';
	  spiderBtnImg.append(imghref);

    //add the spiderAssistContainer to element
    element.append(spiderAssistContainer);
    
}

construct() ;
TRS.getData ( "prMake", {} );
TRS.getData ( "StatesDropDown", {} );

document.onreadystatechange = function(e){
	if(document.readyState == 'complete'){
		TRS.getData ( "prMake", {} );
		TRS.getData ( "StatesDropDown", {} );
	}
}