{literal}
<style>
.app_welcomeapp {
  margin-left: -1px;
  margin-right: -1px;
  margin-bottom: -1px;
}

#welcomeapp_nav {
  padding: 5px;
}

A.welcomeapp_nav_disabled {
  color: #DDD;
}

.app_welcomeapp_screen {
  padding: 10px;
  color: 333;
}

#appcontent_app_{/literal}{$appdata.app_id}{literal} {
  padding: 0px;
}

.welcomeapp_viewport {
  Xwidth: 200px;
  min-height: 100px;
  overflow: hidden;
  vertical-align: top;
  border: 1px solid #DDDDDD;
}

.welcomeapp_viewportwrapper {
  Xpadding: 5px;
  Xbackground: #fffadc;
  background: {/literal}{$appdata.style_background}{literal};
  Xborder: 1px dashed #CCCCCC;
  position: relative;
}
</style>
{/literal}

{literal}
<script>

var se_app_welcomeapp = semods_app.extend({
  current_screen : 0,
  screens : 10,
  adjusted : false,
  
  constructor : function( app_id, page_id, view_id, instance_id ) {
    this._super( app_id, page_id, view_id, instance_id );
    this.start_timer(1000);
  },

  closeme : function() {
    SEMods.B.hide( this.app_block_id );
    this.request( 'task=docloseme' );
    SEMods.Apps.removeApp(this.app_id, this.page_id, this.view_id, this.instance_id);
  },
  
  prev_screen : function() {
    if(this.current_screen == 0) {
      return;
    }
    this.current_screen--;
    
    nextScreen = 'app_welcomeapp_screen_' + this.current_screen;
    
    var myFx = new Fx.Scroll('welcomeapp_viewport', {duration: 500}).toElement(nextScreen);
    
    this.update_navs();
    
  },
  
  on_timer : function() {
    this.stop_timer();
    this.position_elements();
  },
  
  update_navs : function() {
    if(this.current_screen == 0) {
      $('welcomeapp_nav_left').className = 'welcomeapp_nav_disabled';
    } else {
      $('welcomeapp_nav_left').className = '';
    }

    if(this.current_screen == this.screens-1) {
      $('welcomeapp_nav_right').className = 'welcomeapp_nav_disabled';
    } else {
      $('welcomeapp_nav_right').className = '';
    }
    
  },
  
  next_screen : function() {
    if(this.current_screen == this.screens-1) {
      return;
    }
    this.current_screen++;
    
    nextScreen = 'app_welcomeapp_screen_' + this.current_screen;
    
    var myFx = new Fx.Scroll('welcomeapp_viewport', {duration: 500}).toElement(nextScreen);

    this.update_navs();
    
  },
  
  position_elements : function() {
    this.adjusted = true;
    var width = $('app_welcomeapp_wrapper').getWidth();
    if(width > 300) {
      width = 250;
    }
    var elems = $$('div.app_welcomeapp_screen');
    for(var i=0; i<elems.length; i++) {
      elems[i].style.width = width - 20 + 'px';
      elems[i].style.display = '';
    }
    $('welcomeapp_viewport').style.width = width + 'px';
  }
  
});

</script>
{/literal}

<script>
var app_welcomeapp = new se_app_welcomeapp( '{$appdata.app_id}', '{$appdata.page_id}', '{$appdata.view_id}', '{$appdata.instance_id}' );
app_welcomeapp.screens = parseInt('{$appdata.welcome_steps|@count}');
</script>


{if $appdata.welcomeapp_showbox}

  <table cellpadding='0' cellspacing='0' width='100%'>
  <tr>
    <td class='header header_noapphook'>
      <div class="apps_settings_titlediv"><img class="apps_icon" src="{$appdata.app_icon}">{lang_print id=$appdata.app_title}</div>
      <div class="apps_box_close" onclick="app_welcomeapp.closeme();"></div>
    </td>
  </tr>

  <tr>
  <td class='profile appcontent' id="appcontent_app_{$appdata.app_id}">

{/if}

<div class="app_welcomeapp" id="app_welcomeapp_wrapper">

  <div id="welcomeapp_nav">
    <div style="float:left">
      <a id="welcomeapp_nav_left" href="javascript:void(0)" onclick="app_welcomeapp.prev_screen();this.blur();">&lt; {lang_print id=100501187}</a>
    </div>
    <div style="float:right">
      <a id="welcomeapp_nav_right" href="javascript:void(0)" onclick="app_welcomeapp.next_screen();this.blur();">{lang_print id=100501188} &gt;</a>
    </div>
    <div style="clear:both"></div>
  </div>
  

  <div class='welcomeapp_viewportwrapper'>

    {if !$appdata.welcomeapp_showbox}
    <div style="position:absolute; top:3px; right:3px; background:url(./images/icons/apps_close.gif) no-repeat;cursor:pointer;height:16px;width:16px;" onclick="app_welcomeapp.closeme();"></div>
    {/if}

    <div id='welcomeapp_viewport' class='welcomeapp_viewport'>

      <table cellpadding='0' cellspacing='0'>
      <tr>
      {foreach from=$appdata.welcome_steps item=welcome_step name=welcomeapp_loop}
      <td valign="top"><div class="app_welcomeapp_screen" style="display: none" id="app_welcomeapp_screen_{$smarty.foreach.welcomeapp_loop.index}" >{$welcome_step.content}</div></td>
      {/foreach}
      </tr>
      </table>

    </div>
    
  </div>
  
</div>

{if $appdata.welcomeapp_showbox}

  </td>
  </tr>
  </table>

{/if}

{literal}
<script type="text/javascript">

window.addEvent('domready',
                function() {
                  app_welcomeapp.position_elements();}
                  );
</script>
{/literal}