var elements = { support_type:{ st0:{name:'Hanger Rod Supported', icon: 'icon-type-hr-superlumideck.gif', thumb: 'thumb-type-hr-superlumideck.gif', enabled:'true'}, st1:{name:'Post Supported', icon: 'icon-type-postsupport.gif', thumb: 'thumb-type-postsupport.gif', enabled:'true'} }, canopy_type:{ ct0:{name:'Lumishade', icon: 'icon-type-hr-lumishade.gif', thumb: 'thumb-type-hr-lumishade.gif', enabled:'true'}, ct1:{name:'Super Lumideck HR', icon: 'icon-type-hr-superlumideck.gif', thumb: 'thumb-type-hr-superlumideck.gif', enabled:'true'}, ct2:{name:'Custom Curved', icon: 'icon-type-hr-custom.gif', thumb: 'thumb-type-hr-custom.gif', enabled:'true'}, ct3:{name:'SuperShade', icon: 'icon-type-hr-supershade.gif', thumb: 'thumb-type-hr-supershade.gif', enabled:'true'}, ct4:{name:'Super Lumideck (Post Supported)', icon: 'icon-type-postsupport.gif', thumb: 'thumb-type-postsupport.gif', enabled:'true'} }, decking_type:{ dt0:{name:'2 3/4"', icon: 'icon-decking-234.gif', thumb: 'thumb-decking-234.gif', template_text:'a 2 3/4" Extruded .078" Decking.', enabled:'true'}, dt1:{name:'.5"', icon: 'icon-decking-5.gif', thumb: 'thumb-decking-5.gif', template_text:' extruded aluminum (.5"), alloy 6063-T6, in profile and thickness shown in current Mapes brochures.', enabled:'true'}, dt2:{name:'Flat Soffit', icon: 'icon-decking-flatsoffit.gif', thumb: 'thumb-decking-flatsoffit.gif', template_text:'3" extruded flat soffit .078 decking.', enabled:'true'}, dt3:{name:'.032', icon: 'icon-decking-032.gif', thumb: 'thumb-decking-032.gif', template_text:'an interlocking roll-form 2 1/2 W style pan (.032" aluminum).', enabled:'true'}, dt4:{name:'.040', icon: 'icon-decking-040.gif', thumb: 'thumb-decking-040.gif', template_text:'an interlocking roll-form 2 1/2 W style pan (.040" aluminum).', enabled:'true'}, dt5:{name:'2 3/4" Perp', icon: 'icon-decking-234.gif', thumb: 'thumb-decking-234.gif', template_text:'a 2 3/4" Extruded .078” Decking.', enabled:'true'}, dt6:{name:'2 3/4" Para', icon: 'icon-decking-234.gif', thumb: 'thumb-decking-234.gif', template_text:'a 2 3/4" Extruded .078” Decking.', enabled:'true'}, dt7:{name:'8" Louver', icon: 'icon-decking-8inch-louver.gif', thumb: 'thumb-decking-8inch-louver.gif', template_text:'louvered blades (.125" extruded aluminum).', enabled:'true'}, dt8:{name:'3" "U" Channel', icon: 'icon-decking-3inch-uchannel.gif', thumb: 'thumb-decking-3inch-uchannel.gif', template_text:'3" "U" Channel (.125" extruded aluminum).', enabled:'true'}, dt9:{name:'1/4" Acrylic', icon: 'icon-decking-14acrylic.gif', thumb: 'thumb-decking-14acrylic.gif', enabled:'true'} }, beam_type:{ bt0:{name:'4"x7"', icon: 'icon-beam-4x7.gif', thumb: 'spacer.gif', enabled:'true'}, bt1:{name:'6"x6"', icon: 'icon-beam-6x6.gif', thumb: 'spacer.gif', enabled:'true'}, bt2:{name:'6"x10"', icon: 'icon-beam-6x10.gif', thumb: 'spacer.gif', enabled:'true'} }, post_type:{ pt0:{name:'4"x4"', icon: 'icon-post-4x4.gif', thumb: 'spacer.gif', enabled:'true'}, pt1:{name:'4"x6"', icon: 'icon-post-4x6.gif', thumb: 'spacer.gif', enabled:'true'}, pt2:{name:'6"x6"', icon: 'icon-post-6x6.gif', thumb: 'spacer.gif', enabled:'true'} }, fascia_type:{ ft0:{name:'J', icon: 'icon-fascia-j.gif', thumb: 'thumb-fascia-j.gif', enabled:'true'}, ft1:{name:'JM', icon: 'icon-fascia-jm.gif', thumb: 'thumb-fascia-jm.gif', enabled:'true'}, ft2:{name:'JC', icon: 'icon-fascia-jc.gif', thumb: 'thumb-fascia-jc.gif', enabled:'true'}, ft3:{name:'J4', icon: 'icon-fascia-j4.gif', thumb: 'thumb-fascia-j4.gif', enabled:'true'}, ft4:{name:'G', icon: 'icon-fascia-g.gif', thumb: 'thumb-fascia-g.gif', enabled:'true'}, ft5:{name:'GM', icon: 'icon-fascia-gm.gif', thumb: 'thumb-fascia-gm.gif', enabled:'true'}, ft6:{name:'GC', icon: 'icon-fascia-gc.gif', thumb: 'thumb-fascia-gc.gif', enabled:'true'}, ft7:{name:'G4', icon: 'icon-fascia-g4.gif', thumb: 'thumb-fascia-g4.gif', enabled:'true'}, ft8:{name:'6"', icon: 'icon-fascia-6.gif', thumb: 'thumb-fascia-6.gif', enabled:'true'} }, finish_type:{ fit0:{name:'Class II Clear Anodized', icon: 'icon-finish-clearanodized.gif', thumb: 'spacer.gif', enabled:'true'}, fit1:{name:'Bronze Baked Enamel', icon: 'icon-finish-bronzebakedenamel.gif', thumb: 'spacer.gif', enabled:'true'}, fit2:{name:'White Baked Enamel', icon: 'icon-finish-whitebakedenamel.gif', thumb: 'spacer.gif', enabled:'true'}, fit3:{name:'Powder Coat Finish', icon: 'icon-finish-powdercoatfinish.gif', thumb: 'spacer.gif', enabled:'true'}, fit4:{name:'2-Coat Kynar Finish', icon: 'icon-finish-2coatkynar.gif', thumb: 'spacer.gif', enabled:'true'}, fit5:{name:'Custom Anodized', icon: 'icon-finish-customanodized.gif', thumb: 'spacer.gif', enabled:'true'} }, drainage_type:{ drt0:{name:'Front Scupper', icon: 'icon-drain-frontscrupper.gif', thumb: 'spacer.gif', enabled:'true'}, drt1:{name:'Downspout From Fascia', icon: 'icon-drain-downspoutfromfascia.gif', thumb: 'spacer.gif', enabled:'true'}, drt2:{name:'Downspout From Rear Gutter', icon: 'icon-drain-downspoutfromreargutter.gif', thumb: 'spacer.gif', enabled:'true'}, drt3:{name:'Rear Gutter - Leader By Others', icon: 'icon-drain-reargutter.gif', thumb: 'spacer.gif', enabled:'true'}, drt4:{name:'Standard Post Drain', icon: 'icon-drain-standardpost.gif', thumb: 'spacer.gif', enabled:'true'}, drt5:{name:'Fascia Drain', icon: 'icon-drain-fasciadrain.gif', thumb: 'spacer.gif', enabled:'true'} }, stamped_calcs_type:{ sct0:{name:'No', icon: 'icon-calcs-no.gif', thumb: 'spacer.gif', template_text:'are not required', enabled:'true'}, sct1:{name:'Yes', icon: 'icon-calcs-yes.gif', thumb: 'spacer.gif', template_text:'are required and must be signed and sealed by an engineer licensed within the state canopy is installed', enabled:'true'} } }; var layout = { start:'canopy_support', canopy_support:{ main_text: 'Select Canopy Support', summary_text: 'Support', display:'support_type', default_dest:'canopy_type', hide_steps: { st0:['beam_type','post_type'] } }, canopy_type:{ main_text: 'Select Canopy Type', summary_text: 'Canopy', display:'canopy_type', filters:{ st0:['ct0','ct1','ct2','ct3'], st1:['ct4'] }, default_dest:'decking_type' }, decking_type:{ main_text: 'Select Decking Type', summary_text: 'Decking', display:'decking_type', filters:{ st1:['dt0','dt1','dt2'], ct0:['dt3','dt4'], ct1:['dt0','dt2'], ct2:['dt0'], ct3:['dt7','dt8'] }, default_dest:'fascia_type', special_dest:{ st1:'beam_type' } }, beam_type: { main_text: 'Select Beam Type', summary_text: 'Beam', display:'beam_type', default_dest:'post_type' }, post_type: { main_text: 'Select Post Type', summary_text: 'Post', display:'post_type', filters: { bt0:['pt0','pt1'], bt1:['pt1','pt2'], bt2:['pt1','pt2'] }, default_dest:'fascia_type' }, fascia_type: { main_text: 'Select Fascia Type', summary_text: 'Fascia', display:'fascia_type', filters: { st1:['ft8','ft0','ft1','ft2','ft3'], ct0:['ft0','ft1','ft2','ft3'], ct1:['ft4','ft5','ft6','ft7'], ct2:['ft4','ft5','ft6','ft7'], ct3:['ft8','ft0','ft1','ft2'] }, default_dest:'finish_type' }, finish_type: { main_text: 'Select Finish Type', summary_text: 'Finish', display:'finish_type', filters: { st1:['fit0','fit1','fit2','fit3','fit4','fit5'], ct0:['fit0','fit1','fit2','fit3','fit4'], ct1:['fit0','fit1','fit2','fit3','fit4','fit5'], ct2:['fit0','fit1','fit2','fit3','fit4','fit5'], ct3:['fit0','fit3','fit4','fit5'] }, default_dest:'drainage_type' }, drainage_type: { main_text: 'Select Drainage Type', summary_text: 'Drainage', display:'drainage_type', filters: { st1:['drt4','drt5'], ct0:['drt0','drt1','drt2','drt3'], ct1:['drt0','drt1','drt2','drt3'], ct2:['drt0','drt1','drt2','drt3'], ct3:['drt0'] }, default_dest:'stamped_calcs' }, stamped_calcs: { main_text: 'Are PE Stamped Calcs Required?', summary_text: 'PE Stamped Calcs', display:'stamped_calcs_type' }, history:[] }; var selection_history = []; var step_starting_idx = 'nonentry'; var image_preload_cache = []; // Preload images to help make things snappier. $(document).ready(function() { display_init(); }); function display_init() { var output = []; preload_images(); // Get all of our main items (steps) for(var step in layout) { if(step !== 'start') { // Avoid the meta-elements. add_step(step); layout[step]['selection_idx'] = -1 } } $('#specleftside').append(output.join('')); display_details(layout.start); $('#' + layout.start).addClass('overview-sect-active'); layout.history.push(layout.start); } function preload_images() { window.setTimeout(function() { for (var ele in elements) { for (var sub in elements[ele]) { var item = elements[ele][sub]; var icon = document.createElement('img'); icon.src = "images/" + item.icon; var thumb = document.createElement('img'); thumb.src = "images/" + item.thumb; image_preload_cache.push(icon); image_preload_cache.push(thumb); } } }, 2000); } function btn_next_click() { // Lookup the active step var step_name = layout.history[layout.history.length - 1]; var oStep = layout[step_name]; if(step_starting_idx !== 'nonentry' && step_starting_idx !== selection_history[oStep.selection_idx]) clear_history(oStep.selection_idx); if(oStep) { if(oStep.default_dest) { var destination = oStep.default_dest; // Check if we need to go anywhere special. if(oStep.special_dest) { $.each(oStep.special_dest, function(key, value) { if($.inArray(key, selection_history) > -1) { destination = value; return false; // breaks out of each loop. } }); } highlight_step(destination); // Push our destination onto the history queue. layout.history.push(destination); display_details(destination); } else { display_finish(); } } } function btn_back_click() { // Throw out the active step. if(layout.history.length > 1) layout.history.pop(); var step_name = layout.history[layout.history.length -1]; if(step_name) { highlight_step(step_name); display_details(step_name); } } function highlight_step(step) { $('.overview-sect-active').removeClass('overview-sect-active'); $('#' + step).addClass('overview-sect-active') } function display_details(val) { var step = layout[val]; step_starting_idx = 'nonentry'; if(step.selection_idx > -1 && step.selection_idx < selection_history.length) step_starting_idx = selection_history[step.selection_idx]; // Show our main text. $('#spec-step').html('
' + element.name + '
'); main_div.find('.selected-item').removeClass('selected-item'); main_div.find('.overview-sect-left').remove(); main_div.append($('