How to adapt php page to jpolite2 template

Question

Hi. I just discovered jpolite and think it looks very cool. I thought I would change my php page based on that. The problem is that I need allot of php code on each page to interpret _POST input and such. To do that I think I need to make index.html from jpolite, that normally just load different modules containing html like this:

var _modules={
    m101:{url:"modules/m101.html",  t:"Motivation"},
    m102:{url:"modules/m102.html",  t:"Philisophy"},
    m103:{url:"modules/m103.html",  t:"Buzz"},

    m200:{url:"modules/m200.html",  t:"Layout Width"},
    m201:{url:"modules/m201.html",  t:"Module Definition"},
    m202:{url:"modules/m202.html",  t:"Module Layout Definition"},
    m203:{url:"modules/m203.html",  t:"Column Layout Definition"},

To a php file that displays modules like this:

    <div id="c4" class="cc">
    <div class="module blue" id="m104:t1">
        <div class="moduleFrame">
            <div class='moduleHeader'>
                <div class='moduleTitle'>Key New Features</div>
                <div class='moduleActions'>
                    <b title="Collapse" class="actionMin"></b>
                    <b title="Expand" class="actionMax"></b>
                    <b title="Close" class="actionClose"></b>
                </div>
            </div>
            <div class='moduleContent'>
                <h4>SEO Support</h4>
                <p>Note this module is a static one pre-loaded in <b>index.html</b>, which is visible to search engines.</p>
                <script type="text/javascript">
                    function switchTheme(t) {
                        $('link[title]','head').each(function(){
                            this.disabled = true;
                            this.disabled = (this.title != t); 
                        });
                        return false;
                    };
                </script>
                <fieldset><legend>Live Theme Switcher</legend>
                    <p>
                    <button onclick="switchTheme('modern')"><img style="width:126px;height:66px" src="img/t1.png" alt="Modern"/></button>
                    <button onclick="switchTheme('silver')"><img style="width:126px;height:66px" src="img/t2.png" alt="Silver"/></button>
                    <button onclick="switchTheme('classic')"><img style="width:126px;height:66px" src="img/t3.png" alt="Classic"/></button>
                    </p>
                </fieldset>
                <div class="span-11">
                    <h4>Layout Persistence</h4>
                    <p>Module layout can be stored and retrieved to your selected store.</p>
                    <button onclick="$.cookie('jpolite2layout',null)">Reset Layout</button>
                    <p class="clear">Any drag-n-drop operation will trigger save layout. To resume the original layout, press above button then refresh.</p>                        
                </div>
                <div class="span-11 last">
                    <h4>Popup &amp; Dropdown Menu</h4>
                    <p>A module popup menu is provided for users to add modules to current tab.</p>
                    <button onclick="$('#menu_btn').click()">Show Module Menu</button>
                    <p class="clear">Dropdown menu is now supported which provides additional navigation support in addition to horizontal tabs.</p>                        
                </div>
            </div>
        </div>
    </div>
</div>

The problem is that I don't know how to change index.html so that it's a diffrent page. It displays the index modules in addition to my modules and shows that the homepage is selected in the nav_bar