{config_load file=$language_path section="general"}

<script>
var STEP_URLS = new Array();
var STEP_TITLES = new Array();
var STEP = parseInt('{$CURRENT_STEP}');
var STEP_FINAL_URL = '{$STEP_FINAL_URL}';
var STEP_IDS = new Array();
{foreach from=$STEPS item=step key=stepnr}
STEP_URLS.push('{$step->url}');
STEP_TITLES.push('{$step->title}');
STEP_IDS.push('{$step->id}');
{/foreach}
    
    $(function(){
        var url = STEP_URLS[ STEP-1 ];
        stepwise_load_url(url);
    });
    
    function stepwise_load_url(url){
        console.log('stepwise_load_url('+url+') STEP='+STEP);
        $('table#steptable td.step_container').load(url,function(){
            if (typeof window['stepwise_ready_function_'+STEP] !== "function") {
                alert("Achtung: Der geladene Content aus\n"+url+"\nhat keine Funktion stepwise_ready_function_"+STEP+"() bereitgestellt.");
            }
            if(STEP == STEP_URLS.length){
                $('button#stepwise_next').hide();
                $('button#stepwise_final').show();
            }else{
                $('button#stepwise_final').hide();
                $('button#stepwise_next').show();
            }
            if(STEP > 1){
                $('button#stepwise_last').show();
            }else{
                $('button#stepwise_last').hide();
            }
            var lic = 1;
            $('ul.step_process li').each(function(){
                if(lic == STEP){
                    $(this).addClass('active');
                }else{
                    $(this).removeClass('active');
                }
                lic++;
            });
            $('#step_title').html(STEP_TITLES.at(STEP-1));
        });
    }
    function execute_nextStep(){
        console.log('execute_nextStep() STEP='+STEP);
        eval('stepwise_ready_function_'+STEP+'();');
    }
    function execute_lastStep(){
        console.log('execute_lastStep() STEP='+STEP);
        STEP--;
        var url = STEP_URLS.at(STEP-1);
        stepwise_load_url(url);
    }
    function stepwise_next(){
        console.log('stepwise_next() STEP='+STEP);
        var url = STEP_URLS.at(STEP);
        if(STEP == STEP_URLS.length){
            window.location.href=STEP_FINAL_URL;
            return false;
        }
        STEP++;
        stepwise_load_url(url);
    }
    
    function execute_final(){
        STEP++;
        console.log('execute_final() STEP='+STEP);
        eval('stepwise_ready_function_'+STEP+'();');
    }
    function rclose(){
        $('#modal_window').dialog('destroy');
    }
</script>
<style>
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    li{
        float: left;
        color: #888;
        margin-right: 15px;
    }
    li.active{
        font-weight: bold;
        color: #000;
    }
    table#steptable{
        width:100%;
    }
    table#steptable td.step_container{
        margin-bottom: 15px;
        display: block;
        width: 100%;
        float:left;
        padding: 5px;
    }
    table#steptable tr td{
        padding:5px;
        margin:0;
    }
    button#stepwise_last,button#stepwise_final{
        display: none;
    }
    #step_title{
        font-size: 1.2em;
        font-weight: bold;
    }
    td.stepwise_title{
        font-size: 1.3em;
        font-weight: bold;
    }
</style>
<div class="main" id="stepwise_struct">
    <table border="0" id="steptable" cellspacing="0">
        <tr>
            <td class="ui-state-active stepwise_title">&#9432;&nbsp;{$TITLE}</td>
        </tr>
        <tr>
            <td class="ui-state-focus">
                <ul class="step_process">
                {foreach from=$STEPS item=step key=stepnr}
                    <li data-url="{$step->url}" {if $CURRENT_STEP == $stepnr+1}class="active"{/if}>Schritt {$stepnr+1}</li>
                {/foreach}
                </ul>
            </td>
        </tr>
        <tr>
                <td><span id="step_title"></span></td>
        </tr>
        <tr>
            <td class="step_container"></td>
        </tr>
        <tr>
             <td class="step_action ui-state-focus">
                <button onclick="execute_lastStep()" class="ui-button ui-corner-all ui-state-default ui-state-default" id="stepwise_last">{#back#}</button>
                <button onclick="execute_nextStep()" class="ui-button ui-corner-all ui-state-default" id="stepwise_next">{#continue#}</button>
                <button onclick="execute_final()" class="ui-button ui-corner-all ui-state-highlight" id="stepwise_final">{#save#}</button>
                <div style="display:inline-block;float:right;">
                <button onclick="rclose()" class="ui-button ui-corner-all ui-state-default" id="close">{#close#}</button>
                </div>
            </td>
        </tr>
    </table>
</div>