Embed Block
Add an embed URL or code. Learn more
<div class='grid' role='main'>
        <article class='grid__cell'>
            <form id='calculator' class='grid'>
            <header class='grid__cell'>
                <h1>ECM Savings &amp; Payback Calculator</h1>
                <aside id='toolbar'>
                    <a id='configBtn' title='Configure Rate Values' class='pop-trigger icon-cog-alt' href='#rates'><span class='desktop'>Configure Rates</span></a>

                    <a id='sharingBtn' title='Share These Results' href='#sharing' class='pop-trigger icon-share'><span class='desktop'>Share</span></a>
                    <a id='printBtn' title='Print This Page' href='#' class='icon-print'><span class='desktop'>Print</span></a>
                    <a id='resetBtn' title='Reset' href='#' class='icon-ccw'><span class='desktop'>Reset</span></a>

                    <section id='sharing' class='grid__cell unit-1-4 left pop-menu'>
                        <span class='icon-link'>Copy and Paste this link</span>
                        <input type='text'>
                        <!-- AddThis Button BEGIN -->
                        <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
                            <a class="addthis_button_preferred_1"></a>
                            <a class="addthis_button_preferred_2"></a>
                            <a class="addthis_button_preferred_3"></a>
                            <a class="addthis_button_preferred_4"></a>
                            <a class="addthis_button_compact"></a>
                        </div>
                        <!-- AddThis Button END -->
                    </section>

                    <section id='rates' class='grid__cell before-1-4 unit-3-4 right pop-menu'>
                        <div class='grid'>
                            <section class='grid__cell unit-1-3'>
                                <h3>General</h3>
                                <p>
                                    <label for='tax'>Tax (%)</label>
                                    <input type='number' id='tax' class='percent required' step='.1' min='0' max='100'>
                                </p>
                            </section>

                            <section class='grid__cell unit-1-3'>
                                <h3>Utilities</h3>
                                <p>
                                    <label for="KWHR">$/KWHR</label>
                                    <input type="number" step='.01' id="KWHR" class='required' value='.11'>
                                </p>
                                <p>
                                    <label for="KW">KW</label>
                                    <input type="number" step='.01' id="KW" class='required' value='11'>
                                </p>
                            </section>

                            <section class='grid__cell unit-1-3'>
                                <h3>Installation</h3>
                                <p>
                                    <label for='labor'>Labor ($/hour)</label>
                                    <input type='number' id='labor' class='required'>
                                </p>
                                <p>
                                    <label for='markup'>Mark Up (%)</label>
                                    <input type='number' id='markup' class='percent required'>
                                </p>
                            </section>
                        </div>
                    </section>
                </aside>
            </header>

            <div class='grid__cell unit-1-2'>
                <details id='existing' class='box-primary' open='open'>
                    <summary class='box-complement'><span>Existing Conditions</span></summary>

                    <details class='grid__cell runtime' class='runtime'>
                        <summary>Run Time</summary>
                        <div class='grid'>
                            <section class='grid__cell unit-1-2'>
                                <header><h3>Winter (Cold Weather)</h3></header>
                                <label for="old_winterWeekdayHours">Weekday Hours</label>
                                <input type="number" id="old_winterWeekdayHours" class="winterWeekdayHours required" min='0' max='24' value="24"><br>
                                <label for="old_winterWeekendHours">Weekend Hours</label>
                                <input type="number" id="old_winterWeekendHours" class="winterWeekendHours required" min='0' max='24' value="24"><br>
                                <label for='old_winterWeeksPerYear'>Weeks Per Year</label>
                                <input type='number' id='old_winterWeeksPerYear' class='winterWeeksPerYear required' min='0' max='52' value='38'>
                            </section>

                            <section class='grid__cell unit-1-2'>
                                <header><h3>Summer (Warm Weather)</h3></header>
                                <label for="old_summerWeekdayHours">Weekday Hours</label>
                                <input type="number" id="old_summerWeekdayHours" class="summerWeekdayHours required" min='0' max='24' value="24"><br>
                                <label for="old_summerWeekendHours">Weekend Hours</label>
                                <input type="number" id="old_summerWeekendHours" class="summerWeekendHours required" min='0' max='24' value="24"><br>
                                <label for='old_summerWeeksPerYear'>Weeks Per Year</label>
                                <input type='number' id='old_summerWeeksPerYear' class='summerWeeksPerYear required' min='0' max='52' value='14'>
                            </section>
                        </div>
                    </details>

                    <table class="units">
                        <thead>
                            <tr>
                                <th>Label (optional)</th>
                                <th>Qty</th>
                                <th>Watts</th>
                                <td>&nbsp;</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type='text' class='label'></td>
                                <td><input type="number" min='0' class='qty required'></td>
                                <td><input type="number" min='0' class='watts required'></td>
                                <td><button title="Add Another" class="addBtn">+</button></td>
                            </tr>
                        </tbody>
                    </table>
                </details>
            </div>

            <div class='grid__cell unit-1-2'>
                <details id='projected' class='box-primary' open='open'>
                    <summary class='box-complement'><span>Projected Conditions</span></summary>

                    <details class='runtime grid__cell'>
                        <summary>Run Time</summary>
                        <div class='grid'>
                            <section class='grid__cell'>
                                <label for="runtimeDiversity">Run Time Diversity (%)</label>
                                <input type="number" id="runtimeDiversity" class='percent required' value="50" min='0' max='100'>
                            </section>

                            <section class='grid__cell unit-1-2'>
                                <header><h3>Winter (Cold Weather)</h3></header>
                                <label for="winterWeekdayHours">Weekday Hours</label>
                                <input type="number" id="winterWeekdayHours" class="winterWeekdayHours required" min='0' max='24' value="24"><br>
                                <label for="winterWeekendHours">Weekend Hours</label>
                                <input type="number" id="winterWeekendHours" class="winterWeekendHours required" min='0' max='24' value="24"><br>
                                <label for='winterWeeksPerYear'>Weeks Per Year</label>
                                <input type='number' id='winterWeeksPerYear' class='winterWeeksPerYear required' min='0' max='52' value='38'>
                            </section>

                            <section class='grid__cell unit-1-2'>
                                <header><h3>Summer (Warm Weather)</h3></header>
                                <label for="summerWeekdayHours">Weekday Hours</label>
                                <input type="number" id="summerWeekdayHours" class="summerWeekdayHours required" min='0' max='24' value="24"><br>
                                <label for="summerWeekendHours">Weekend Hours</label>
                                <input type="number" id="summerWeekendHours" class="summerWeekendHours required" min='0' max='24' value="24"><br>
                                <label for='summerWeeksPerYear'>Weeks Per Year</label>
                                <input type='number' id='summerWeeksPerYear' class='summerWeeksPerYear required' min='0' max='52' value='14'>
                            </section>
                        </div>
                    </details>

                    <table class="units">
                        <thead>
                            <tr>
                                <th>Size</th>
                                <th>Qty</th>
                                <th>Watts</th>
                                <th>Unit Cost</th>
                                <th>Labor (Hrs)</th>
                                <td>&nbsp;</td>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td colspan='5'>
                                    <label for='addLaborHours'>Additional Labor Hours</label>
                                    <input type='number' id='addLaborHours' class='required' min='0' step='.25'>
                                </td>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <td>
                                    <select name='size' class='size required'>
                                        <option value=''></option>
                                        <option value='15'>2</option>
                                        <option value='16'>3</option>
                                        <option value='19'>4</option>
                                        <option value='28'>6</option>
                                        <option value='68'>8</option>
                                        <option value='94'>10</option>
                                        <option value='184'>12</option>
                                    </select>
                                </td>
                                <td><input type='number' class='qty required' min='0'></td>
                                <td class='watts'></td>
                                <td><input type='number' class='cost required' min='0'></td>
                                <td><input type='number' class='laborHrs required' step='.25' min='0'></td>
                                <td><button title='Add Another' class='addBtn'>+</button></td>
                            </tr>
                        </tbody>
                    </table>

                </details>
            </div>

            <div class='grid__cell'>
                <div class='box-primary'>
                    <div class='grid'>
                        <div class='grid__cell unit-3-4'>

                            <details id="savings">
                                <summary class='box-complement'>
                                    <span id='totalSavings' class='money'>0</span>
                                    <span>Savings per Year</span>
                                </summary>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <th>KW-HRS</th>
                                            <th>KW</th>
                                            <th>Dollars</th>
                                            <th>Dollars-Demand</th>
                                            <!-- <th>Total</th> -->
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>Savings</th>
                                            <td class='kwhrs'>0</td>
                                            <td class='kw'>0</td>
                                            <td class='cost money'>0</td>
                                            <td class='demand money'>0</td>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr class='existing'>
                                            <th>Existing Cost</th>
                                            <td class='kwhrs'>0</td>
                                            <td class='kw'>0</td>
                                            <td class='cost money'>0</td>
                                            <td class='demand money'>0</td>
                                        </tr>
                                        <tr class='projected'>
                                            <th>Projected Cost</th>
                                            <td class='kwhrs'>0</td>
                                            <td class='kw'>0</td>
                                            <td class='cost money'>0</td>
                                            <td class='demand money'>0</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </details>

                            <details id='incentives'>
                                <summary class='box-complement'>
                                    <span id='totalCredit' class='money'>0</span>
                                    <span>Incentives</span>
                                </summary>
                                <div class='grid'>
                                    <div class='grid__cell'><a href='http://www.dsireusa.org/' target='_blank' title='Database of State Incentives for Renewables &amp; Efficiency'>Find State/Federal Efficiency Incentives</a></div>
                                    <div class='grid__cell unit-1-2'>
                                        <div id='rebates'>
                                            <div>
                                                <label for='motorRebateValue'>Rebates</label><br>
                                                $ <input type='number' id='motorRebateValue' class='required' min='0' value='0'>
                                            </div>
                                            <div class='one-line'>&times;</div>
                                            <div>
                                                <label for='numMotors'>Motors</label><br>
                                                <input type='number' id='numMotors' class='required' min='0' value='0'>
                                            </div>
                                            <div class='one-line'>= <span id="motorRebates" class='money'>0</span></div>
                                        </div>
                                    </div>
                                    <div class='grid__cell unit-1-2'>
                                        <label for='taxCredits'>Tax Credits</label><br>$ <input type='number' id='taxCredits' class='required' min='0' value='0'>
                                    </div>
                                    <div class='grid__cell unit-1-2'>
                                        <label for='demandCredit'>Demand Credit</label><br>$ <input type='number' id="demandCredit" class='required' min='0' value='0'>
                                    </div>
                                    <div class='grid__cell unit-1-2'>
                                        <label for='otherCredit'>Other Credits</label><br>$ <input type='number' id="otherCredit" class='required' min='0' value='0'>
                                    </div>
                                </div>
                            </details>

                            <details id="installation">
                                <summary class='box-complement'>
                                    <span id="totalInstallCost" class='money'>0</span>
                                    <span>Installation Costs</span>
                                </summary>
                                <div class='grid'>
                                    <div class='grid__cell unit-1-4'>
                                        Equipment<br>
                                        <span id='equipmentCost' class='money'>0</span>
                                    </div>
                                    <div class='grid__cell unit-1-4'>
                                        Markup<br>
                                        <span id='markupCost' class='money'>0</span>
                                    </div>
                                    <div class='grid__cell unit-1-4'>
                                        Tax<br>
                                        <span id='taxCost' class='money'>0</span>
                                    </div>
                                    <div class='grid__cell unit-1-4'>
                                        Labor<br>
                                        <span id='laborCost' class='money'>0</span>
                                    </div>
                                </div>
                            </details>
                        </div>

                        <div id="results" class='grid__cell unit-1-4'>
                            <section class='box-complement'>
                                <header><h2>Payback</h2></header>
                                <p><span id="simplePayback">&infin;</span><br>Years</p>
                            </section>
                            <section style='text-align:center;'>
                                <a href='http://airthermhvac.com/contact-sales.asp' class='callToAction'>Contact Us</a>
                            </section>
                        </div>
                    </div>
                </div>
            </div>