/* JS Scripts for the configurator Model.asp page */ /* * This is for the NEW configurator Model page, created 2010 * -Leland */ // Define a switch, then check for older versions of IE (IE6 and below), as some of the fancy animations won't work there. var isCapable = true; if($.browser.msie && $.browser.version < 7){ isCapable = false; } // do stuff when DOM is ready jQuery(document).ready(function($) { /* Init the 'select another model' dropdown */ /* **************************************** */ // reset to the first option 'select another option' since browsers hold onto the last selection when you go back $('form#cmOtherModels select#cmModelMenu').val($('form#cmOtherModels select#cmModelMenu option:first').val()); // Submit the form onChange of the selection $('form#cmOtherModels select#cmModelMenu').change( function(form) { // $.log("changed to: " + this.value); if (this.value !== "") { // $.log("submitting: Model=" + this.value); $(this).closest("form").submit(); } else { // $.log("oops, don't do anything yet"); } } ); /* Init Summary Block Appearance (equal heights + stick-to-top) */ /* ************************************************************ */ //first, makes sure the image is preloaded, b/c Safari will break if it tries to get the image height before it's done loading $('#cmSummary #cmImage img').preload({ // once the image is done loading... onFinish : function(){ setSummaryHeight(); if (!isCapable) { // if the img load finishes after the some things are setup, IE6 will go wonky... this just resets that. $('div.cmOptions').hide().show(); } } }); if (isCapable) { // check on the stickiness of the Summary box on init stickySummary(); // whenever scrolling the window, check on the stickiness of the Summary box too $(window).scroll(stickySummary); // toggle-control the stickiness of the Summary window $('#cmStickySwitch').live('click', function(){ toggleIsSticky(); }); } /* Init Disclaimer blocks */ // uses a 2nd class in the span.moreInfo to define which disclaimer content to include in the tooltip. // so far, we only have two disclaimers to work with... if we change any of them, we need to make changes here, // as well as at the bottom of the html, within DIV#disclaimers. // get disclaimer content from DIVs in the DOM var MSRPs = new String() var dphFees = new String() MSRPs = $('#MSRPs').html(); //$.log(MSRPs); dphFees = $('#dphFees').html(); //$.log(dphFees); // set up the wTootip function for each different Disclaimer Content $('.moreInfo.MSRPs').wTooltip({ content : MSRPs, className : 'disclaimers', offsetX : -230, offsetY : 5, delay : 200, fadeIn : 100, fadeOut : 200, follow : false }); $('.moreInfo.dphFees').wTooltip({ content : dphFees, className : 'disclaimers', offsetX : -230, offsetY : 5, delay : 200, fadeIn : 100, fadeOut : 200, follow : false }); /* Since the number of color chips can vary, determine & set width on chip-colors container, so it can center within its container DIV */ /* *********************************************************************************************************************************** */ // set the variable to hold the total width of all the chips; start at 0. var chipsWidth = 0; // get the container width var containerWidth = $('#cmSelectColor div.cmOptionsSub').width(); // for each color chip.... $('ul#cmColorChips li.cmChipColor').each(function(){ // ...get the outer width of the color chip and add it to our variable chipsWidth += $(this).outerWidth(true); }); // if there are less chips than will fill the width of the outer container... if (chipsWidth < containerWidth) { // ...set the width of the group of color chips, so they'll center (in coordination with CSS settings - margin-left:auto; margin-right:auto;) $('ul#cmColorChips').width(chipsWidth); } /* make each div.cmOptions (options sections) collapsible [except for the Form] */ /* **************************************************************************** */ if (isCapable) { $('div.cmOptions h3').not('div#cmOfferAndRequest h3').click(function(){ // toggles the appearance of the correct DIV $(this).siblings('div.cmOptionsSub').slideToggle(); // toggles a class for the header so it shows the different background graphic, with a '+' or a '-' on the left, in conjunction w/ CSS. $(this).toggleClass('closed'); }); } /* Reset the form, so nothing is selected from the browser's memory, and thus shown MSRP & Options Pricing are accurate */ $('form#signup')[0].reset(); /* Init Color Chips */ /* **************** */ // reset to first color chip, since browsers keep the last selection, but our image will always go back to the first one... $("input[name='ExteriorColor']:radio:first").click(); // Declare and define the main image paths, for use with toggling colors on Hover var selectedColorURI, selectedColorPath, selectedColor, hoveringColor, newImgSrc; // get the img src path info updateImgPath(); // preload images var urls = []; $("input[name='ExteriorColor']:radio").each(function(){ urls.push(this.value); //$.log(urls); }); $.preload( urls, { base :selectedColorPath, ext :'.jpg' }); // Change image on RadioBtn Change $("input[name='ExteriorColor']:radio").change(function() { // $.log("Color Option changed to: " + this.value+'.jpg'); // build new img src path newImgSrc = selectedColorPath + this.value + '.jpg'; // change the src & alt attributes of the img $('#cmImage img#altimg').attr({ src : newImgSrc, alt : this.value }); // Reset the variables so they still work with the Hovering updateImgPath(); }); // Toggle image on Hover //$("#cmColorChips .cmChipColor label").hover( $("#cmColorChips .cmChipColor").hover( function() { // id chip color //hoveringColor = $(this).attr('for'); // $.log("Hovering over color chip: " + hoveringColor +'.jpg'); hoveringColor = $(this).attr('title'); // $.log("Hovering over color chip: " + hoveringColor +'.jpg'); // change the src & alt attributes of the img $('#cmImage img#altimg').attr({ src : selectedColorPath + hoveringColor + '.jpg', alt : hoveringColor }); }, function() { // change the src & alt attributes of the img back to the selected one $('#cmImage img#altimg').attr({ src : selectedColorURL, alt : selectedColor }); } ); // force a change on clicking the color chip... $("#cmColorChips .cmChipColor label").click(function(){ // since not all browsers select the radio button attached to its label's IMG... clickedColor = $(this).attr('for'); // $.log('clicked color chip' + clickedColor); //clickedColor = $(this).attr('title'); // $.log('clicked color chip' + clickedColor); $("#cmColorChips .cmChipColor input[value='"+ clickedColor +"']").click().change(); }); // Updates the Img Src variables so that the hover states return to the right image after a different radio button has been selected function updateImgPath(){ // $.log('updating imageColor'); selectedColorURL = $('#cmImage img#altimg').attr('src'); // $.log('URI: '+selectedColorURL); selectedColorPath = $.url.setUrl(selectedColorURL).attr("directory"); // $.log('Path: ' + selectedColorPath); selectedColorFile = $.url.setUrl(selectedColorURL).attr("file"); // $.log('ColorFile: ' + selectedColorFile); selectedColor = selectedColorFile.slice(0,(selectedColorFile.lastIndexOf('.'))); // $.log('Color: ' + selectedColor); $.url.setUrl(); // reset the current URL to the function } /* Init Trim layout */ /* **************** */ // ensure all trim containers are equal height, to prevent funky floating var trimHeight = 0; var trimContainers = $('ul#cmAvailableTrims li.cmTrim'); $(trimContainers).each(function(){ if ($(this).height() > trimHeight) { trimHeight = $(this).height(); } }); $(trimContainers).height(trimHeight); $(trimContainers).hover( function(){ $(this).addClass('hovering'); }, function(){ $(this).removeClass('hovering'); } ); /* Init trim-level change event to reload page w/ trim change */ /* ********************************************************** */ // get the current URL & trim var currentPath = $.url.setUrl().attr('source'); //$.log(currentPath); var currTrimQuery = $.url.param('T') ? $.url.param('T') : $.url.param('t') ? $.url.param('t') : false; //$.log(currTrimQuery); // whenever a new trim is clicked... $("input[name='TrimPackage']:radio").change(function() { //$.log("Trim Option changed to: " + this.value); $.log('currentPath: '+currentPath); var newTrimQuery = ($(this).attr('id')).replace('t',''); //$.log(newTrimQuery); if (currTrimQuery) { //$.log('yes, there is a trim'); // if there's already a trim in the URL string, replace w/ the new trim currentPath = currentPath.replace(currTrimQuery,newTrimQuery); } else { //$.log('nope, there is not a trim'); // otherwise, add the trim to the query string currentPath = currentPath += ('&T=' + newTrimQuery); } //$.log(currentPath); go(currentPath); }); /* Init Table Zebra Striping - adds .odd to the odd rows & .even to the even rows of the options table, starting over after each row, to zebra stripe it. */ /* ****************************************************************************************************************************** */ // flag for even/odd 0 is even, 1 is odd var evenOddFlag = 0; // run function on each tr $('table.striped tr').each(function(index){ var $tr = $(this); if ($tr.find('th').length == 1) { //this is a header row, set evenOddFlag to zero evenOddFlag = 0 } else { //this is a table row if (evenOddFlag == 0) { // add even class and change flag $tr.addClass('even'); evenOddFlag = 1; } else { // add odd class and change flag $tr.addClass('odd'); evenOddFlag = 0; } } }); /* Init Options Selections & Price Block Adjustments */ /* ******************************************** */ //init the price MSRP in the pricing block var basePrice, fees, selOptions, msrp; var opt = $('#cmPricing .cmSelectedOptions td.value'); var tot = $("span#total"); updateMSRP(); // init variables used in the changeOptionsTotal function var last = new Array; // last = an array to hold the last amount added to the options total from a single-choice (radioBtn) group var cb = 0; // cb = a switch used to determine a radio-btn change (vs a checkbox change), so we can then determine the difference between the *last* amount for that group & this one. // make sure that all prices are shown with penny values $('#cmPricing .cmBasePrice td.value').text("$"+formatAsMoney(unformatAsMoney($('#cmPricing .cmBasePrice td.value').text()))); $('#cmPricing .cmFees td.value').text("$"+formatAsMoney(unformatAsMoney($('#cmPricing .cmFees td.value').text()))); $('#cmPricing .cmSelectedOptions td.value').text("$"+formatAsMoney(unformatAsMoney($('#cmPricing .cmSelectedOptions td.value').text()))); // handler for options change events $('#cmSelectOptions input').change(function(){ //$.log('changed options') if ($(this).is(':radio')){ cb=1; // if this is a radioBtn (as opposed to a checkbox), cb=1 } // get the amount, the switch state, and the group from various HTML Elements var amnt = parseFloat($(this).parent().siblings('.optionAmount').text()); //$.log(amnt); // amnt comes from the text in the last column of the table var swtch = ($(this).is(':checked')); //$.log(swtch); // swtch looks at the state of the checkbox or radioBtn var groupName = ($(this).attr('name')); //$.log(groupName); // get group from name attr. // get group# based on groupName switch (groupName) { case 'Options_Wanted' : group = 0; break; case 'Packages' : group = 1; break; case 'Engine' : group = 2; break; case 'Transmission' : group = 3; break; case 'DriveTrain' : group = 4; break; case 'Bed' : group = 5; break; case 'Cab' : group = 6; break; default : group = 0; } // figure and update pricing changeOptionsTotal(amnt, swtch, group); }); /* Init Main Submission Form */ $('form#signup').submit(function() { return checkData(); }); /* Add'l functions req'd after the document is ready */ /* ************************************************* */ // adds up the total for options, then update the pricing shown function changeOptionsTotal(amnt, swtch, group) { // amnt = the amount of the changed option // swtch = (boolean) state of the checkbox or radio button of the changed option // group = the options group of the changed option //get current options total var current = unformatAsMoney($(opt).text()); // make sure we're dealing w/ numbers, not strings amnt*=1; current*=1; if (swtch == true) { // if we are turning the option ON (or changing radio choice) if (cb == "1") { // if we're dealing w/ a radio btn if (!last[group]) { // if there was no previously selected item for this RadioBtn group, // make the previous amount for that group = 0 last[group] = 0; } // figure the total by adding the new amnt & subtracting the old amount var result = ((current+amnt) - last[group]); // reassign the new amnt tp the 'last' variable, for the next time we change this group last[group] = amnt; // reset our radioBtn switch cb=0; } else { // or else we're dealing w/ a checkbox // so just add the new Amount var result = (current+amnt); } } else { // or else we're turning the option OFF // so just subtract the new amount var result = ((current-amnt)); } // take the new options total and update the amount shown on the page updateOptions(formatAsMoney(result)); } // endfunction changeOptionsTotal() // updates the options pricing shown -- is called after each option is selected or deselected function updateOptions(result) { var result = result; // update the Options Total $(opt).text('$'+result); // re-check the amounts shown and update the total MSRP updateMSRP(); } // end function updateOptions() // updates the MSRP shown -- is called after each time the options total is updated, as well as at page init function updateMSRP(){ // grabs the numbers shown from the DOM var basePrice = unformatAsMoney($('#cmPricing .cmBasePrice td.value').text()); //$.log('basePrice = '+basePrice); var fees = unformatAsMoney($('#cmPricing .cmFees td.value').text()); //$.log('fees = '+fees); var selOptions = unformatAsMoney($('#cmPricing .cmSelectedOptions td.value').text()); //$.log('selOptions = '+selOptions); // and adds 'em up to make the new MSRP var msrp = formatAsMoney(( basePrice + fees + selOptions )); //$.log('msrp = '+msrp); // and updates the DOM $(tot).text('$'+msrp); //$.log('updating total to: '+msrp); } // end function updateMSRP() // fixes an IE Bug where clicking on a radio button doesn't generate an onChange event until you click again *away* from the button. if ($.browser.msie) { $('input:radio').click(function () { this.blur(); this.focus(); }); } }); /* end doc.ready functions */ /* functions and variables used throughout */ /* console logging for debugging help */ jQuery.log = function(message) { try { console.debug(message); } catch(e) { try { console.log(message); } catch(e) { alert(message); } } }; /* js page linking (to load new trim) */ function go(loc) { window.location.href = loc; } /* Set the Height of the Summary Block based on Img Height */ function setSummaryHeight() { // get/set initial values var adjustmentAmt; var cmImg = $('#cmSummary #cmImage img').height(); //$.log('cmImg = ' + cmImg); var cmPrc = $('#cmSummary #cmPricing').height(); //$.log('cmPrc = ' + cmPrc); var cmSummaryBlocks = $('#cmSummary > div').filter('#cmImage, #cmPricing'); // adjust to the larger height if ( cmImg > cmPrc ) { $(cmSummaryBlocks).height(cmImg); } else { $(cmSummaryBlocks).height(cmPrc); } // get adjusted height of image container var cmImgWrap = $('#cmSummary #cmImage').height(); //$.log('cmImgWrap = ' + cmImgWrap); var cmPrcWrap = $('#cmSummary #cmPricing').height(); //$.log('cmPrcWrap = ' + cmPrcWrap); // if the image is too skinny, center it vertically within the block if (cmImgWrap > cmImg) { adjustmentAmt = (cmImgWrap - cmImg)/2; //$.log('adjustmentAmt = ' + adjustmentAmt); $('#cmSummary #cmImage img').css('top', adjustmentAmt); } // if the textblock is too skinny, near-center it vertically within the block if (cmPrcWrap > cmPrc) { adjustmentAmt = (cmPrcWrap - cmPrc)/3; //$.log('adjustmentAmt = ' + adjustmentAmt); $('#cmSummary #cmPricing table').css('top', adjustmentAmt); } } /* Sticky Summary - make the summary box stick to the header */ // Get DIVs var stickyDiv = $('#cmSummary'); var nextDiv = $('.cmOptions:first'); // define switches var firstStick = 0; // a switch to show the stick/unstick button only after the very first time it sticks var isStuck = 0; // resets every time we scroll to top... so animation only runs as it first sticks each time var isSticky = 1; // a switch so we can turn the sticky feature on and off programatically // define Sticky text var makeSticky = "Make Sticky"; var unStick = "Un-Stick"; function toggleIsSticky(){ // toggles the stickiness of the cmSummary DIV if (isSticky) { isSticky = 0; resetSticky(); $('#cmStickySwitch').text(makeSticky); } else { isSticky = 1; $('#cmStickySwitch').text(unStick); stickySummary(); if (!isStuck) { $('#cmStickySwitch').hide(); } } } // the function function stickySummary() { if(isSticky) { //$.log('we can stick') // get the current location of the page in relation to the window var window_top = $(window).scrollTop(); // get the current location of the area just above the summary box (the bottom of the header) var div_top = (($('#cmHeader').offset().top)+($('#cmHeader').outerHeight())); // get height of the Summary box var divOffset = $(stickyDiv).outerHeight(); // get the left position of the div, so it can stay there when it sticks var div_left = ($('#cmHeader').offset().left); //$.log(div_left); // If we've scrolled down past the top of the cmSummary DIV if (window_top > div_top) { $(nextDiv).css('margin-top',divOffset); $(stickyDiv).addClass('sticky').css('left',div_left); // each time the DIV gets Sticky after being unstuck... if (!isStuck) { // if it's the first time, attach the sticky switch if(!firstStick){ $("
"+unStick+"
").appendTo("div#cmSummary"); firstStick = 1; } // reset the switch isStuck = 1; //show the switch if hidden if ($('#cmStickySwitch').css('display')=='none') { $('#cmStickySwitch').show(); } // stop any current animations and start the border animation $(stickyDiv) .stop() .animate({ borderRightColor : 'orange', borderBottomColor : 'orange', borderLeftColor : 'orange' }, 10) .delay(1000) .animate({ borderRightColor : 'yellow', borderBottomColor : 'yellow', borderLeftColor : 'yellow' }, 3000) .animate({ borderRightColor : 'white', borderBottomColor : 'white', borderLeftColor : 'white' }, 4000); } } else { // if we've scrolled above the normal position... resetSticky(); } } else { //$.log('we can NOT stick') } } function resetSticky(){// stop all animations and reset the DIV's to defaults $(stickyDiv) .stop() .css({ borderRightColor : 'white', borderBottomColor : 'white', borderLeftColor : 'white' }) .removeClass('sticky') .css('left',''); $(nextDiv).css('margin-top',''); if (isSticky) { $('#cmStickySwitch').hide() } // reset the switch, so the animations can re-run next time we stick isStuck = 0; } /* Money & Number Formatting functions */ function unformatAsMoney(str) { // cleans a dollar-amount expressed as a string & converts into a number that the rest of the code can handle str = str.replace('$',''); str = str.replace(',',''); str *= 1; str = (Math.round(str*100))/100; return str } // end of function unformatAsMoney() function CurrencyFormatted(amount) { // returns a number with exactly 2 decimal points // make sure it's a number var i = parseFloat(amount); // if not a number, = 0.00 if(isNaN(i)) { i = 0.00; } // set up handling for negative numbers... var minus = ''; if(i < 0) { minus = '-'; } i = Math.abs(i); // round off to the nearest 1/100ths i = parseInt((i + .005) * 100); i = i / 100; // makes sure there are two digits following the decimal point, prepends the "-" character if it started as a negative number, and returns the result s = new String(i); if(s.indexOf('.') < 0) { s += '.00'; } if(s.indexOf('.') == (s.length - 2)) { s += '0'; } s = minus + s; return s; } // end of function CurrencyFormatted() function formatAsMoney(amount) { // takes a number, sends it to the currency formatter, then adds commas every 3rd position from the right of the whole number (to the left of the decimal) // sends the amount through the CurrencyFormatted function, to help clean it up var amount = amount; amount = CurrencyFormatted(amount) // assign the delimeter var delimiter = ","; // convert to a string, then split at the decimal var amt = new String(amount); var a = amt.split('.',2) // store the decimal var d = a[1]; // store the whole number var i = parseInt(a[0]); if(isNaN(i)) { return ''; } // setup handling for negative numbers var minus = ''; if(i < 0) { minus = '-'; } i = Math.abs(i); // set up arrays and strings var n = new String(i); var a = []; //three digits are removed from the end of the number and assigned to array variable a, so long as the number is longer than three digits. while(n.length > 3) { var nn = n.substr(n.length-3); a.unshift(nn); n = n.substr(0,n.length-3); } // The number is then reformed using the elements of array a, with the delimiter digit inserted between each element. if(n.length > 0) { a.unshift(n); } n = a.join(delimiter); if(d.length < 1) { amt = n; } else { amt = n + '.' + d; } amt = minus + amt; return amt; } // end of function formatAsMoney() // form validation - basic function checkData (){ if (document.signup.First_Name.value == "") { alert("Please fill in your first name."); document.signup.First_Name.focus(); return false; } if (document.signup.Last_Name.value == "") { alert("Please fill in your last name."); document.signup.Last_Name.focus(); return false; } if (document.signup.Customer_Email.value == "") { alert("Please fill in your email Address."); document.signup.Customer_Email.focus(); return false; } } /* jQuery.Preload - Multifunctional preloader * Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com * http://flesler.blogspot.com/2008/01/jquerypreload.html * Dual licensed under MIT and GPL. * Date: 3/25/2009 * @author Ariel Flesler * @version 1.0.8 */ ;(function($){var h=$.preload=function(c,d){if(c.split)c=$(c);d=$.extend({},h.defaults,d);var f=$.map(c,function(a){if(!a)return;if(a.split)return d.base+a+d.ext;var b=a.src||a.href;if(typeof d.placeholder=='string'&&a.src)a.src=d.placeholder;if(b&&d.find)b=b.replace(d.find,d.replace);return b||null}),data={loaded:0,failed:0,next:0,done:0,total:f.length};if(!data.total)return finish();var g=$(Array(d.threshold+1).join('')).load(handler).error(handler).bind('abort',handler).each(fetch);function handler(e){data.element=this;data.found=e.type=='load';data.image=this.src;data.index=this.index;var a=data.original=c[this.index];data[data.found?'loaded':'failed']++;data.done++;if(d.enforceCache)h.cache.push($('').attr('src',data.image)[0]);if(d.placeholder&&a.src)a.src=data.found?data.image:d.notFound||a.src;if(d.onComplete)d.onComplete(data);if(data.done