var section_1Size = {width:0,height:0}; //--------------------------------------------------------------------------------// function fnBrandRolls(tmpDaId) { //---------------------------// remove brand highlighting... var arrJSElements = new Array(); var js = -1; var arrTags = window.document.getElementsByTagName("img"); for (tg = 0; tg < arrTags.length; tg++) { if (arrTags[tg].getAttribute("name")) { //class if (arrTags[tg].getAttribute("name") == 'nptBrand') { js++; arrJSElements[js] = arrTags[tg]; tmpId = '' + arrJSElements[js].id.replace('idSelectBrand_', ''); tmpId = tmpId.replace('idSelectBrand2_', ''); document.getElementById('idSelectBrand_' + tmpId).className = "clsBrand4Models2"; } //if } //if } //for document.getElementById('idSelectBrand_' + tmpDaId).className = "clsBrand4Models2_selected"; } function xkcolor(hue, sat) { $('.wheel .lights, .runwayLights, .logoLight').removeClass('rainbow').css('filter', 'hue-rotate(' + hue + 'deg) saturate(' + sat + '%) brightness(300%)'); $('input[name="xkActiveColor"]').val(hue+':'+sat); } $('#XKChromeAppButton').click(function (e) { e.preventDefault(); $('.appScreenshotHolder').children().not('#XKChromeAppSS').hide(); $('#XKChromeAppSS').toggle(); imageMapResize(); return false; }); $('#TireInsightAppButton').click(function (e) { e.preventDefault(); $('.appScreenshotHolder').children().not('#TireInsightAppSS').hide(); $('#TireInsightAppSS').toggle(); return false; }); $('#GoVueAppButton').click(function (e) { e.preventDefault(); $('.appScreenshotHolder').children().not('#GoVueAppSS').hide(); $('#GoVueAppSS').toggle(); return false; }); let colorNoticeAccepted = false; $('#step_1,#step_2,#step_3,#step_4,#step_5').click(function(){ // if this is step_5 colors if($(this).attr('id') == 'step_5' && !colorNoticeAccepted) { openColorPopUp(); colorNoticeAccepted = true; } var oldStep = varStep; varStep = $(this).attr('id').replace('step_',''); updateStep(varStep,oldStep); }); updateStep = function(varStep, oldStep, skipOpen){ if(typeof skipOpen === 'undefined') skipOpen=0; if(varStep == 1) url = 'dev_brands2.php'; if(varStep == 2) url = 'dev_frames2.php'; if(varStep == 3) url = 'dev_parts2.php'; if(varStep == 4) url = 'dev_wheels2.php'; if(varStep == 5) url = 'dev_colors2.php'; $.get("includes/"+url,$('#idFooterInnerWrap2').serialize(),function(data){ var hashedData = data.replace(/checked/g,'').hashCode(); if(!skipOpen && varStep != oldStep) $('#idContainer_' + oldStep).removeClass("clsContainerOpen"); if($('#idContainer_' + varStep).data('hash') != hashedData){ if(!skipOpen) $('.clsContainerOpen').removeClass("clsContainerOpen"); $('#idContainer_' + varStep).html(data).data('hash',hashedData).find('input').click(function(){ $(this).closest('.clsContainer').prev().prev().trigger('click'); rebuildTrailer(); //change view based on clicked option var layer = $(this).attr('data-layer'); if(['Lights (tail)','Mats','Transom-Step','Transom-Straps','trim-rings','mats'].indexOf(layer)>=0) changeView('rear'); else if(['Fender','Winch','Rims','rim','rim-insert'].indexOf(layer)>=0) changeView('side'); //load parts page again on make / frame change if(varStep!=3 && ( varStep==1 || varStep==2)) updateStep(3,oldStep,1); //load wheels page again on frame change if(varStep!=4 && varStep==2) updateStep(4,oldStep,1); //load paints page again on make change if(varStep!=5 && varStep==1) updateStep(5,oldStep,1); //reload current selections $('#step_'+varStep).trigger('click'); }).hover(function(){ //preload all images in group $('input[name="'+$(this).attr('name')+'"][data-image!=""]').map(function(){ var image = $(this).attr('data-image').replace(".png",''); return fileList.filter(function(a){ return a.indexOf(image)>=0; }); }).preload(); }); //hide part sections with only one option if(varStep == 3) $('#idContainer_3 .partsGroup').each(function(){ if($(this).find('input').length==1) $(this).hide(); }); //load images $('#idContainer_' + varStep+' img[data-src]').each(function(){ $(this).attr('src',$(this).attr('data-src')); }); rebuildTrailer(); } if(!skipOpen)$('#idContainer_' + varStep).addClass("clsContainerOpen") }) } rebuildTrailer(); resizeWheels(); setTimeout(function(){ rebuildTrailer(); },500); $(window).on('load',function(){ $('body').removeClass('loading'); $('img[data-src]').each(function(){ $(this).attr('src',$(this).attr('data-src')); }); }); var varStep=0; $('.nav-prev').click(function(){ varStep--; if(varStep<1)varStep=1; $('#step_'+varStep).trigger('click'); }); $('.nav-next').click(function(){ varStep++; if(varStep>5)varStep=5; $('#step_'+varStep).trigger('click'); }); $('#idArrowToggle,#idArrowToggle2').click(function(){ $('body').toggleClass('menuOpened'); }); var trailerFrame; function rebuildTrailer(){ $('#idSection_1').removeClass('frame-1 frame-2 frame-3').addClass('frame-'+$('#idFooter input[data-layer="Frame"]:checked').val()); trailerFrame = (($('#idSection_1').is('.frame-1'))?'single': (($('#idSection_1').is('.frame-2'))?'tandem': 'triple' ) ); //reset all layers $('#idSection_1 .layers>div, #idSection_1 .rim, #idSection_1 .insert').css({'background-image':'',filter:''}); $('#idSection_1 [class*="-flake"]').hide(); $('#idSection_1 .runwayLights, #idSection_1 .wheel .lights, #idSection_1 .logoLight').css('background-image','').removeClass('rainbow'); $('#XKChromeAppButton').hide(); //apply selections to layers //-- parts $('#idFooter input[data-layer][data-layer!=""][data-image]:checked').each(function(){ var layer, layerName='', url1, url2, url3, url4, paintableLayerName, i, includes, excludes; var layer = $(this).attr('data-layer'); if(layer == 'Frame') layerName = 'frame'; if(layer == 'Bowcatch') layerName = 'bowcatch'; if(layer == 'Bowstep') layerName = 'bowstep'; if(layer == 'Fender') layerName = 'fender'; if(layer == 'Fender Steps') layerName = 'fender-steps'; if(layer == 'Jack') layerName = 'jack'; if(layer == 'Transom-Step') layerName = 'transom'; if(layer == 'Transom-Straps') layerName = 'transom-straps'; //TODO if(layer == 'Lights (tail)') layerName = 'tailLights-trim-rings'; if(layer == 'Technology Light Packages') layerName = 'runwayLights'; if(layer == 'Mats') layerName = 'mats'; if(layer == 'Spare Tire Assembly') layerName = 'spareTireMount'; if(layer == 'Winch') layerName = 'winch'; if(layerName!=''){ if($(this).attr('data-image')=='') $('#idSection_1 .'+layerName+'-flake, #idSection_1 .'+layerName+'-flake').css('background-image',''); else{ //get image urls url1 = 'images/byot2/frames/'+trailerFrame+'/side/'+$(this).attr('data-image').replace('triple_',trailerFrame+'_'); url2 = 'images/byot2/frames/'+trailerFrame+'/rear/'+$(this).attr('data-image').replace('triple_',trailerFrame+'_'); url3 = 'images/byot2/frames/'+trailerFrame+'/side/'+$(this).attr('data-image').replace('triple_',trailerFrame+'_').replace('.png','_flake.png'); url4 = 'images/byot2/frames/'+trailerFrame+'/rear/'+$(this).attr('data-image').replace('triple_',trailerFrame+'_').replace('.png','_flake.png'); //check transom variants var transom = $('input[data-layer="Transom-Step"]:checked').val(); if(transom == 68){ //standard if(fileList.indexOf(url1.replace('.png','_transom.png'))>=0) url1 = url1.replace('.png','_transom.png'); if(fileList.indexOf(url2.replace('.png','_transom.png'))>=0) url2 = url2.replace('.png','_transom.png'); if(fileList.indexOf(url3.replace('_flake.png','_transom_flake.png'))>=0) url3 = url3.replace('_flake.png','_transom_flake.png'); if(fileList.indexOf(url4.replace('_flake.png','_transom_flake.png'))>=0) url4 = url4.replace('_flake.png','_transom_flake.png'); } if(transom == 85){ //combo if(fileList.indexOf(url1.replace('.png','_transomCombo.png'))>=0) url1 = url1.replace('.png','_transomCombo.png'); else if(fileList.indexOf(url1.replace('.png','_transom.png'))>=0) url1 = url1.replace('.png','_transom.png'); if(fileList.indexOf(url2.replace('.png','_transomCombo.png'))>=0) url2 = url2.replace('.png','_transomCombo.png'); else if(fileList.indexOf(url2.replace('.png','_transom.png'))>=0) url2 = url2.replace('.png','_transom.png'); if(fileList.indexOf(url3.replace('_flake.png','_transomCombo_flake.png'))>=0) url3 = url3.replace('_flake.png','_transomCombo_flake.png'); else if(fileList.indexOf(url3.replace('_flake.png','_transom_flake.png'))>=0) url3 = url3.replace('_flake.png','_transom_flake.png'); if(fileList.indexOf(url4.replace('_flake.png','_transomCombo_flake.png'))>=0) url4 = url4.replace('_flake.png','_transomCombo_flake.png'); else if(fileList.indexOf(url4.replace('_flake.png','_transom_flake.png'))>=0) url4 = url4.replace('_flake.png','_transom_flake.png'); } //check crashpand/winch variants for inverted winch var crashpad = $('input[data-layer="Bowcatch"]:checked').val(); if(layerName == 'winch' && ["82","98","99","146"].indexOf(crashpad) >= 0){ //tilting crash pad if(fileList.indexOf(url1.replace('.png','_tilt.png'))>=0) url1 = url1.replace('.png','_tilt.png'); if(fileList.indexOf(url2.replace('.png','_tilt.png'))>=0) url2 = url2.replace('.png','_tilt.png'); if(fileList.indexOf(url3.replace('_flake.png','_tilt_flake.png'))>=0) url3 = url3.replace('_flake.png','_tilt_flake.png'); if(fileList.indexOf(url4.replace('_flake.png','_tilt_flake.png'))>=0) url4 = url4.replace('_flake.png','_tilt_flake.png'); } //apply to layers if(fileList.indexOf(url1)>=0) $('#idSection_1 .side .'+layerName+':not([class*="paint-"])').css('background-image','url(/'+url1+')'); if(fileList.indexOf(url2)>=0) $('#idSection_1 .rear .'+layerName+':not([class*="paint-"])').css('background-image','url(/'+url2+')'); if(fileList.indexOf(url1.replace('.png','_color.png'))>=0) $('#idSection_1 .side .'+layerName+'[class*="paint-"]').css('background-image','url(/'+url1.replace('.png','_color.png')+')'); if(fileList.indexOf(url2.replace('.png','_color.png'))>=0) $('#idSection_1 .rear .'+layerName+'[class*="paint-"]').css('background-image','url(/'+url2.replace('.png','_color.png')+')'); if(fileList.indexOf(url3)>=0) $('#idSection_1 .side .'+layerName+'-flake').css('background-image','url(/'+url3+')'); if(fileList.indexOf(url4)>=0) $('#idSection_1 .rear .'+layerName+'-flake').css('background-image','url(/'+url4+')'); } //check require if($(this).is('[data-include]')){ includes = $(this).attr('data-include').split('|') var hasARequired = false; for(i=0;i=0) $('#idSection_1 .side .'+layerName+':not([class*="paint-"])').css('background-image','url(/'+url1+')'); if(fileList.indexOf(url1.replace('.png','_color.png'))>=0) $('#idSection_1 .side .'+layerName+'[class*="paint-"]').css('background-image','url(/'+url1.replace('.png','_color.png')+')'); if(fileList.indexOf(url2)>=0) $('#idSection_1 .side .'+layerName+'-flake').css('background-image','url(/'+url2+')'); layerName = 'insert'; url3 = 'images/byot2/wheels/'+$(this).attr('data-image').replace('.png','_insert_color.png'); url4 = 'images/byot2/wheels/'+$(this).attr('data-image').replace('.png','_insert_flake.png'); if(fileList.indexOf(url3)>=0) $('#idSection_1 .side .'+layerName).css('background-image','url(/'+url3+')'); if(fileList.indexOf(url4)>=0) $('#idSection_1 .side .'+layerName+'-flake').css('background-image','url(/'+url4+')'); } }); //-- make each paint selector visible if corresponding paintable layer has an image loaded var visiblePaintLayers = [...new Set($('#idSection_1 [class*="paint"][style*="background-image"]').map(function(a){return paintClass=$(this).attr('class').split(' ').filter(function(a){return a.indexOf('paint-')>=0})[0].replace('paint-','');}).get())] $('.paintSelector').hide(); for(var i=0; i=0)$(this).css('background-image',$(this).css('background-image').replace('.png','_color.png')); $(this).show(); }); if(hasFlake)$('#idSection_1 .paint-'+layerName).each(function(){ if($(this).css('background-image')!='') $('#idSection_1 .'+this.getAttribute('class').replace('paint-'+layerName,'').trim()+'-flake').show(); }); } else //remove paint $('#idSection_1 .paint-'+layerName).css('filter','').each(function(){ if(fileList.indexOf($(this).css('background-image').replace('_color.png','.png').replace('url("http://www.boatmatetrailers.com/','').replace('")',''))>=0)$(this).css('background-image',$(this).css('background-image').replace('_color.png','.png')); else $(this).hide(); }); //cannot paint chrome fenders if(["9","12","13","16","17"].indexOf($('input[name="Fender"]:checked').val())>=0) $('#idSection_1 .fender').css('filter',''); }); //-- special //-- -- xk chrome lights //29 RGB Fade //30 RGB App Controlled //87 Intensity Light Pack (1) - Front Logo Steps & Runway Lights //88 89 Intensity Light Pack (2) - Front Logo Steps & 18" Wheel Light Rings //90 91 Intensity Light Pack (3) - Front Logo Steps, Runway Lights, & 18" Wheel Light Rings if(["30","87","88","89","90","91"].indexOf($('#idFooter input[data-layer="Technology Light Packages"]:checked').val())>=0){ if(!$('#XKChromeAppButton').is(':visible')){ $('#XKChromeAppButton').show(); if(["30","87","90","91"].indexOf($('#idFooter input[data-layer="Technology Light Packages"]:checked').val())>=0){ //add runway lights url1 = 'images/byot2/frames/'+trailerFrame+'/side/'+trailerFrame+'_lights_runway_red.png'; url2 = 'images/byot2/frames/'+trailerFrame+'/rear/'+trailerFrame+'_lights_runway_red.png'; $('#idSection_1 .side .runwayLights').css('background-image','url(/'+url1+')').addClass('rainbow'); $('#idSection_1 .rear .runwayLights').css('background-image','url(/'+url2+')').addClass('rainbow'); } if(["87","88","89","90","91"].indexOf($('#idFooter input[data-layer="Technology Light Packages"]:checked').val())>=0){ //add front logo lights if(trailerFrame == 'tandem' || trailerFrame=='triple'){ url1 = 'images/byot2/frames/'+trailerFrame+'/side/'+trailerFrame+'_side_logo.png'; $('#idSection_1 .side .logoLight').css('background-image','url(/'+url1+')').addClass('rainbow'); } } if(["88","89","90","91"].indexOf($('#idFooter input[data-layer="Technology Light Packages"]:checked').val())>=0 && $('input[name="rim"][data-size="18"]:checked').length==1){ //add wheel lights $('#idSection_1 .wheel .lights').css('background-image','radial-gradient(closest-side,red 0%, transparent 80%)').addClass('rainbow'); } } } else $('#XKChromeAppButton,XKChromeAppSS').hide(); //-- -- tire insight tpms if($('#idFooter input[value="74"]:checked').length>0) $('#TireInsightAppButton').show(); else $('#TireInsightAppButton,#TireInsightAppSS').hide(); //-- -- rear view camera if($('#idFooter input[value="73"]:checked').length>0) $('#GoVueAppButton').show(); else $('#GoVueAppButton,#GoVueAppSS').hide(); // give the spare tire a rim setTimeout(function(){ $('.layers .wheel-spare-15, .layers .wheel-spare-18').hide(); if($('#idFooter input[value="63"]:checked').length>0) $('.layers .wheel-spare-15').show(); if($('#idFooter input[value="64"]:checked').length>0) $('.layers .wheel-spare-18').show(); },1500); if($('.appIconsHolder a:visible').length>0) $('.appIconsHolder span').show(); else $('.appIconsHolder span').hide(); window.history.pushState(null, null, "?"+$('#idFooterInnerWrap2').serialize()); } function changeView(what){ if(typeof what === 'undefined'){ if($('#idSection_1').is('.view-side')) var what = 'rear'; else if($('#idSection_1').is('.view-rear')) var what = 'side'; } if(what!='print'){ $('#idFooterInnerWrap2 input[name="view"]').val(what); $('body,#idSection_1').removeClass('view-print'); $('#idSection_1').removeClass('view-side view-rear view-print').addClass('view-'+what); window.history.pushState(null, null, "?"+$('#idFooterInnerWrap2').serialize()); } else{ $('body,#idSection_1').addClass('view-print'); renderPrintList(); setTimeout(function(){ window.print(); },500); setTimeout(function(){ $('body,#idSection_1').removeClass('view-print'); },1000); } } function changeBg(what){ if(typeof what === 'undefined'){ if($('#idSection_1').is('.bg-dark')) var what = 'light'; else if($('#idSection_1').is('.bg-light')) var what = 'img'; else if($('#idSection_1').is('.bg-img')) var what = 'dark'; } $('#idFooterInnerWrap2 input[name="bg"]').val(what); $('#idSection_1').removeClass('bg-dark bg-light bg-img').addClass('bg-'+what); window.history.pushState(null, null, "?"+$('#idFooterInnerWrap2').serialize()); } $.fn.preload = function() { this.each(function(){ $('')[0].src = this; }); } String.prototype.hashCode = function() { var hash = 0; if (this.length == 0) { return hash; } for (var i = 0; i < this.length; i++) { var char = this.charCodeAt(i); hash = ((hash<<5)-hash)+char; hash = hash & hash; // Convert to 32bit integer } return hash; } $.browser={chrome: /chrom(e|ium)/.test(navigator.userAgent.toLowerCase())}; if($.browser.chrome) $('#idSection_1').resizer(resizeWheels); else setInterval(resizeWheels,500); function resizeWheels(){ var $this = $('#idSection_1'); var width = $this.children(':visible').first().width(); var height = $this.children(':visible').first().height(); if(width == section_1Size.width && height == section_1Size.height) return; section_1Size = {width:width, height:height}; var layersRatio = 1024/680; var curRatio = width / height; if(layersRatio < curRatio) //width is greater, height is limiting var scale = height / 680; else // height is greater, width is limiting var scale = width / 1024; $this.find('.wheels').css('transform','scale('+scale+')'); } function renderPrintList(){ var out = ''; var vars = {paint:'',parts:''}; $('#idFooterInnerWrap input:checked').each(function(){ var name = $(this).attr('name') if(name == 'brand') vars.brand = $(this).next().children().attr('alt'); else if(name == 'rim') vars.wheels = $(this).parent().find('.clsWheelName').text(); else if(name.indexOf('paint[')==0 && $(this).parent().attr('title')!='None') vars.paint+=''+name.replace('paint[','').replace(']','').replace('-',' ').replace(/\b\w/g, function(l){ return l.toUpperCase() })+': '+$(this).parent().attr('title')+'
'; else if($(this).parent().text().replace('None','').replace('Standard','').trim()!='') vars.parts+='' + $(this).closest('.partsGroup').children('span').text()+': '+$(this).parent().text()+'
'; }); out+='

BRAND

'+vars.brand; out+='

PARTS

'+vars.parts+'
'; out+='

WHEELS

'+vars.wheels; out+='

PAINT COLORS

'+vars.paint; $('#printList').html(out); $('#idSendConfig').val(out); } function openShareWarningPopUp(){ // console.log('here'); $.fancybox.open($('#idShareWarningPopUp')); } function closeShareWarningPopUp(){ $.fancybox.close($('#idShareWarningPopUp')); $.fancybox.open($('#idPopUp')); } function openSharePopup(){ openShareWarningPopUp(); // $.fancybox.open($('#idPopUp')); } $('#shareForm').submit(function() { renderPrintList(); $.post('/srcfiles2/submitShare.json.php',$(this).serialize(),function(data){ swal({ type: ((data.status == 'good')? 'success':'error'), title: 'Share Your Own Trailer Design', text: data.message }); if(data.status == 'good')$.fancybox.close(); }); return false; }) function openWarningPopUp(){ $.fancybox.open($('#idWarningPopUp')); } function closeWarningPopUp(){ $.fancybox.close($('#idWarningPopUp')); } function openColorPopUp(){ $.fancybox.open($('#idColorPopUp')); } function closeColorPopUp(){ $.fancybox.close($('#idColorPopUp')); } function hideShowDealerEmail(){ console.log($(this)); if($('#idSendCheck').is(':checked')) { console.log('here'); $('#dealerEmailContainer').show(); } else { console.log('here2'); $('#dealerEmailContainer').hide(); } }