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('

' + step.main_text + '

'); var elems = []; // This will hold our elements. if(step.filters && selection_history.length > 0) { var match; // Check if we have a filter, and if we need to apply it. for (var filter in step.filters) { var idx = $.inArray(filter, selection_history); if(idx > -1) { match = filter; break; } } // If we found the match then we need to filter our display element. if (match) $.merge(elems, step.filters[filter]); } // If we didn't have a filter, or our filter didn't apply we need // to display all elements. if(elems.length === 0) { var oElem = elements[step.display]; for(var elem in oElem) { elems.push(elem); } } var output = []; // Finally lets display some details... output.push(''); $('#step-wrapper').html(output.join('')); $('#step-wrapper li').each(function() { $(this).click(function(event) { event.stopPropagation(); select_step_item(val,step,this); btn_next_click(); }) }); if(is_step_selection_made(step)) $('#' + selection_history[step.selection_idx]).addClass('selected-item'); set_button_display(step); } function display_finish() { var result = selection_history.join('|'); result = escape(result); // Show our main text. $('#spec-step').html('

Your Spec is complete

'); $('#step-wrapper').html(''); } function set_button_display(step) { if(layout.history.length <= 1) { var back = $('#btnBack'); back.addClass('disabled'); back.unbind(); } else { var back = $('#btnBack'); back.unbind() back.removeClass('disabled') back.click(function(event){ event.stopPropagation(); btn_back_click();}); } } function is_step_selection_made(step) { // Since selection_idx can be zero we need to use typeof. return (step.selection_idx > -1) } function select_step_item(name,step,item) { var itm_id = $(item).attr('id'); if(selection_history[step['selection_idx']] === itm_id) return; else make_step_selection(name, itm_id); if(step.hide_steps) { // Check if our selection history should hide anything, if not, show things that could be hidden from a previous selection. for (var elm in step.hide_steps) { var idx = $.inArray(elm, selection_history); if(idx > -1) $.each(step.hide_steps[elm], function(){$("#" + this).hide();}); else $.each(step.hide_steps[elm], function(){$("#" + this).show();}); } } set_button_display(step); $(item).siblings().removeClass('selected-item').end().addClass('selected-item'); var element = elements[step.display][itm_id]; // Find ye olde section on the left, and set it as selected. var main_div = $('#' + name); // Switch all the overview stuff to the right main_div.find(' > .overview-sect-full').addClass('overview-sect-right').removeClass('overview-sect-full'); // Now we re-look this up because people need to be able to switch their selected item. Since we swapped everything above, // we won't be able to find it the next time though. So look up the right section, and plop in the items. main_div.find('.overview-sect-right').find('p').remove().end().append('

' + element.name + '

'); main_div.find('.selected-item').removeClass('selected-item'); main_div.find('.overview-sect-left').remove(); main_div.append($('
').html('')); } function make_step_selection(name, itm_id) { var step = layout[name]; // if we have an item in our history already, we swap it out. if(is_step_selection_made(step)) { selection_history[step.selection_idx] = itm_id; } else { var len = selection_history.push(itm_id); step['selection_idx'] = len - 1; } } function clear_history(after_num) { selection_history = selection_history.slice(0,after_num + 1); $.each(layout, function(key, value) { if(value['selection_idx'] > after_num) { value['selection_idx'] = -1; $('#' + key).empty().html('

' + value.summary_text + '

'); } }); } function add_step(name) { var output = []; output.push('

'); output.push(layout[name].summary_text); output.push('

'); $('#specleftside').append(output.join('')); }