Pre-plug in template:

Code:


{JAVASCRIPT}
<ul id="navstrip" class="clearfix">
   <li class="begin"><a href="{U_INDEX}">{L_INDEX}</a></li>
   {NAV_CAT_DESC}
</ul>

<!-- BEGIN message_admin_index -->
   <div class="newslink">
        <!-- BEGIN message_admin_titre -->
      <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   <!-- END message_admin_txt -->
   </div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
 <br />
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div id="fo_stat" class="borderwrap">
   <div class="maintitle floated">
      <h3>{L_STATISTICS}</h3>
      <div class="contract" id="bs0" onclick="toggleCategory('s0');">
         &nbsp;&nbsp;&nbsp;
      </div>
   </div>

   <table cellpadding="0" cellspacing="0" class="ipbtable">
      <thead>
         <tr>
            <th colspan="2">
               <div class="linklist clearfix statlinks">
                  <ul>
                     <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                     <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                     <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                  </ul>
               </div>
            </th>
         </tr>
      </thead>
      <tfoot>
         <tr><td colspan="2"></td></tr>
      </tfoot>
      <tbody id="s0">
         <tr>
            <th colspan="2" class="formsubtitle">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
            <td class="row2">
               <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
               <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
               <div>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</div>
            </td>
         </tr>
         <!-- BEGIN switch_birthday -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_BIRTHDAY}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_BIRTHDAY_IMG}" alt="{L_BIRTHDAY}" /></td>
            <td class="row2">
               <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            </td>
         </tr>
         <!-- END switch_birthday -->
         <!-- BEGIN switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_CALENDAR_5DAYS}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_CALENDAR_IMG}" alt="{L_CALENDAR}" /></td>
            <td class="row2">
               {CALENDAR_EVENTS_5DAYS}
            </td>
         </tr>
         <!-- END switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">

            <!-- BEGIN switch_statistics_link -->
            <a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a>
            <!-- END switch_statistics_link -->

            <!-- BEGIN switch_statistics_nolink -->
            {L_STATISTICS}
            <!-- END switch_statistics_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1"><img src="{L_STATISTICS_IMG}" alt="{L_STATISTICS}" /></td>
            <td class="row2">
               <p>{TOTAL_POSTS}</p>
               <p>{TOTAL_USERS}</p>
               <p>{NEWEST_USER}</p>
               <p>{RECORD_USERS}</p>
            </td>
         </tr>
         <!-- BEGIN switch_chatbox_activate -->
         <tr>
            <th colspan="2" class="formsubtitle">{CHATBOX_NAME}</th>
         </tr>
         <tr>
            <td class="row1"><img src="{CHATBOX_IMG}" alt="{CHATBOX_NAME}" /></td>
            <td class="row2">
               <p>{TOTAL_CHATTERS_ONLINE}</p>
               <p>{CHATTERS_LIST}</p>
               <!-- BEGIN switch_chatbox_popup -->
               <div id="chatbox_popup"></div>
               <script type="text/javascript">
               insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
               </script>
               <!-- END switch_chatbox_popup -->
            </td>
         </tr>
         <!-- END switch_chatbox_activate -->
      </tbody>
   </table>

</div>

<!-- END disable_viewonline -->
<br />
{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<br />
<br>
<br>
<!-- END switch_legend -->


<!-- BEGIN switch_user_login_form_footer -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->


Plug in beta 1:

Code:


<style type="text/css">
/* Specific to example one */

#example-one { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }

#example-one .nav { overflow: hidden; margin: 0 0 10px 0; }
#example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#example-one .nav li a:hover { background-color: #111; }

#example-one ul { list-style: none; }
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#example-one ul li a:hover, #example-one ul li a:focus { background: #fe4902; color: white; }
#example-one ul li:last-child a { border: none; }

#example-one li.nav-one a.current, ul.Whoisontab li a:hover { background-color: #0575f4; color: white; }
#example-one li.nav-two a.current, ul.Eventstab li a:hover { background-color: #d30000; color: white; }
#example-one li.nav-three a.current, ul.Statstab li a:hover { background-color: #8d01b0; color: white; }
#example-one li.nav-four a.current, ul.Chattab li a:hover { background-color: #FE4902; color: white; }



/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }



</style>


<script language="javascript">

(function($) {

    $.organicTabs = function(el, options) {
   
        var base = this;
        base.$el = $(el);
        base.$nav = base.$el.find(".nav");
               
        base.init = function() {
       
            base.options = $.extend({},$.organicTabs.defaultOptions, options);
           
            // Accessible hiding fix
            $(".hide").css({
                "position": "relative",
                "top": 0,
                "left": 0,
                "display": "none"
            });
           
            base.$nav.delegate("li > a", "click", function() {
           
                // Figure out current list via CSS class
                var curList = base.$el.find("a.current").attr("href").substring(1),
               
                // List moving to
                    $newList = $(this),
                   
                // Figure out ID of new list
                    listID = $newList.attr("href").substring(1),
               
                // Set outer wrapper height to (static) height of current inner list
                    $allListWrap = base.$el.find(".list-wrap"),
                    curListHeight = $allListWrap.height();
                $allListWrap.height(curListHeight);
                                       
                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
                                           
                    // Fade out current list
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
                       
                        // Fade in new list on callback
                        base.$el.find("#"+listID).fadeIn(base.options.speed);
                       
                        // Adjust outer wrapper to fit new list snuggly
                        var newHeight = base.$el.find("#"+listID).height();
                        $allListWrap.animate({
                            height: newHeight
                        });
                       
                        // Remove highlighting - Add to just-clicked tab
                        base.$el.find(".nav li a").removeClass("current");
                        $newList.addClass("current");
                           
                    });
                   
                }  
               
                // Don't behave like a regular link
                // Stop propegation and bubbling
                return false;
            });
           
        };
        base.init();
    };
   
    $.organicTabs.defaultOptions = {
        "speed": 300
    };
   
    $.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
    };
   
})(jQuery);

</script>


<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="http://testtesciadz.forumotion.com/13449.js"></script>
<script type='text/javascript'>
    $(function() {

        $("#example-one").organicTabs();
       
        $("#example-two").organicTabs({
            "speed": 200
        });

    });
</script>





{JAVASCRIPT}
<ul id="navstrip" class="clearfix">
   <li class="begin"><a href="{U_INDEX}">{L_INDEX}</a></li>
   {NAV_CAT_DESC}
</ul>

<!-- BEGIN message_admin_index -->
   <div class="newslink">
        <!-- BEGIN message_admin_titre -->
      <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   <!-- END message_admin_txt -->
   </div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
 <br />
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}

{BOARD_INDEX}



<div id="example-one">
         
    <ul class="nav">
                <li class="nav-one"><a href=“#Whoisontab” class="current">Who is Online?</a></li>
                <li class="nav-two"><a href=“#Eventstab”>Events</a></li>
                <li class="nav-three"><a href=“#Statstab”>Statistics</a></li>
                <li class="nav-four last"><a href=“#Chattab”>Chatbox</a></li>
    </ul>
   
    <div class="list-wrap">



<!-- BEGIN disable_viewonline -->


<div id="fo_stat" class="borderwrap">
   <div class="maintitle floated">
      <h3>{L_STATISTICS}</h3>
      <div class="contract" id="bs0" onclick="toggleCategory('s0');">
         &nbsp;&nbsp;&nbsp;
      </div>
   </div>

   <table cellpadding="0" cellspacing="0" class="ipbtable">
      <thead>
         <tr>
            <th colspan="2">
               <div class="linklist clearfix statlinks">
                  <ul>
                     <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                     <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                     <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                  </ul>
               </div>
            </th>
         </tr>
      </thead>


      <tfoot>
         <tr><td colspan="2"></td></tr>
      </tfoot>
      <tbody id="s0">
         <tr>


      <ul id="Whoisontab">
            <th colspan="2" class="formsubtitle">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
            <td class="row2">
               <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
               <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
               <div>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</div>
            </td>
         </tr>

      </ul>

       <ul id="Eventstab" class="hide">

         <!-- BEGIN switch_birthday -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_BIRTHDAY}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_BIRTHDAY_IMG}" alt="{L_BIRTHDAY}" /></td>
            <td class="row2">
               <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            </td>
         </tr>
         <!-- END switch_birthday -->
         <!-- BEGIN switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_CALENDAR_5DAYS}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_CALENDAR_IMG}" alt="{L_CALENDAR}" /></td>
            <td class="row2">
               {CALENDAR_EVENTS_5DAYS}
            </td>
         </tr>
         <!-- END switch_calendar_5days -->

      </ul>

       <ul id="Statstab" class="hide">
         <tr>
            <th colspan="2" class="formsubtitle">

            <!-- BEGIN switch_statistics_link -->
            <a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a>
            <!-- END switch_statistics_link -->

            <!-- BEGIN switch_statistics_nolink -->
            {L_STATISTICS}
            <!-- END switch_statistics_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1"><img src="{L_STATISTICS_IMG}" alt="{L_STATISTICS}" /></td>
            <td class="row2">
               <p>{TOTAL_POSTS}</p>
               <p>{TOTAL_USERS}</p>
               <p>{NEWEST_USER}</p>
               <p>{RECORD_USERS}</p>
            </td>
         </tr>

       </ul>


       <ul id="Chattab" class="hide">

         <!-- BEGIN switch_chatbox_activate -->
         <tr>
            <th colspan="2" class="formsubtitle">{CHATBOX_NAME}</th>
         </tr>
         <tr>
            <td class="row1"><img src="{CHATBOX_IMG}" alt="{CHATBOX_NAME}" /></td>
            <td class="row2">
               <p>{TOTAL_CHATTERS_ONLINE}</p>
               <p>{CHATTERS_LIST}</p>
               <!-- BEGIN switch_chatbox_popup -->
               <div id="chatbox_popup"></div>
               <script type="text/javascript">
               insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
               </script>
               <!-- END switch_chatbox_popup -->
            </td>
         </tr>
         <!-- END switch_chatbox_activate -->
      </tbody>
   </table>

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

<!-- END disable_viewonline -->












<br />
{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<br />
<br>
<br>
<!-- END switch_legend -->


<!-- BEGIN switch_user_login_form_footer -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->


Plug in 2:

Code:


<style type="text/css">
/* Specific to example one */

#example-one { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }

#example-one .nav { overflow: hidden; margin: 0 0 10px 0; }
#example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#example-one .nav li a:hover { background-color: #111; }

#example-one ul { list-style: none; }
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#example-one ul li a:hover, #example-one ul li a:focus { background: #fe4902; color: white; }
#example-one ul li:last-child a { border: none; }

#example-one li.nav-one a.current, ul.Whoisontab li a:hover { background-color: #0575f4; color: white; }
#example-one li.nav-two a.current, ul.Eventstab li a:hover { background-color: #d30000; color: white; }
#example-one li.nav-three a.current, ul.Statstab li a:hover { background-color: #8d01b0; color: white; }
#example-one li.nav-four a.current, ul.Chattab li a:hover { background-color: #FE4902; color: white; }



/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }



</style>


<script language="javascript">

(function($) {

    $.organicTabs = function(el, options) {
   
        var base = this;
        base.$el = $(el);
        base.$nav = base.$el.find(".nav");
               
        base.init = function() {
       
            base.options = $.extend({},$.organicTabs.defaultOptions, options);
           
            // Accessible hiding fix
            $(".hide").css({
                "position": "relative",
                "top": 0,
                "left": 0,
                "display": "none"
            });
           
            base.$nav.delegate("li > a", "click", function() {
           
                // Figure out current list via CSS class
                var curList = base.$el.find("a.current").attr("href").substring(1),
               
                // List moving to
                    $newList = $(this),
                   
                // Figure out ID of new list
                    listID = $newList.attr("href").substring(1),
               
                // Set outer wrapper height to (static) height of current inner list
                    $allListWrap = base.$el.find(".list-wrap"),
                    curListHeight = $allListWrap.height();
                $allListWrap.height(curListHeight);
                                       
                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
                                           
                    // Fade out current list
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
                       
                        // Fade in new list on callback
                        base.$el.find("#"+listID).fadeIn(base.options.speed);
                       
                        // Adjust outer wrapper to fit new list snuggly
                        var newHeight = base.$el.find("#"+listID).height();
                        $allListWrap.animate({
                            height: newHeight
                        });
                       
                        // Remove highlighting - Add to just-clicked tab
                        base.$el.find(".nav li a").removeClass("current");
                        $newList.addClass("current");
                           
                    });
                   
                }  
               
                // Don't behave like a regular link
                // Stop propegation and bubbling
                return false;
            });
           
        };
        base.init();
    };
   
    $.organicTabs.defaultOptions = {
        "speed": 300
    };
   
    $.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
    };
   
})(jQuery);

</script>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://testtesciadz.forumotion.com/13449.js"></script>
<script type="text/javascript">
    $(function() {

        $("#example-one").organicTabs();
       
        $("#example-two").organicTabs({
            "speed": 200
        });

    });
</script>





{JAVASCRIPT}
<ul id="navstrip" class="clearfix">
   <li class="begin"><a href="{U_INDEX}">{L_INDEX}</a></li>
   {NAV_CAT_DESC}
</ul>

<!-- BEGIN message_admin_index -->
   <div class="newslink">
        <!-- BEGIN message_admin_titre -->
      <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   <!-- END message_admin_txt -->
   </div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
 <br />
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}

{BOARD_INDEX}



<div id="example-one">
         
    <ul class="nav">
                <li class="nav-one"><a href="#Whoisontab" class="current">Who is Online?</a></li>
                <li class="nav-two"><a href="#Eventstab">Events</a></li>
                <li class="nav-three"><a href="#Statstab">Statistics</a></li>
                <li class="nav-four last"><a href="#Chattab">Chatbox</a></li>
    </ul>
   
    <div class="list-wrap">



<!-- BEGIN disable_viewonline -->


   <table cellpadding="0" cellspacing="0" class="ipbtable">
      <thead>
         <tr>
            <th colspan="2">
               <div class="linklist clearfix statlinks">
                  <ul>
                     <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                     <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                     <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                  </ul>
               </div>
            </th>
         </tr>
      </thead>


      <tfoot>
         <tr><td colspan="2"></td></tr>
      </tfoot>
      <tbody id="s0">
         <tr>


      <ul id="Whoisontab"><li>
            <th colspan="2" class="formsubtitle">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
            <td class="row2">
               <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
               <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
               <div>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</div>
            </td>
         </tr>

      </ul></li>

       <ul id="Eventstab" class="hide"><li>

         <!-- BEGIN switch_birthday -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_BIRTHDAY}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_BIRTHDAY_IMG}" alt="{L_BIRTHDAY}" /></td>
            <td class="row2">
               <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            </td>
         </tr>
         <!-- END switch_birthday -->
         <!-- BEGIN switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_CALENDAR_5DAYS}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_CALENDAR_IMG}" alt="{L_CALENDAR}" /></td>
            <td class="row2">
               {CALENDAR_EVENTS_5DAYS}
            </td>
         </tr>
         <!-- END switch_calendar_5days -->

      </ul></li>

       <ul id="Statstab" class="hide"><li>
         <tr>
            <th colspan="2" class="formsubtitle">

            <!-- BEGIN switch_statistics_link -->
            <a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a>
            <!-- END switch_statistics_link -->

            <!-- BEGIN switch_statistics_nolink -->
            {L_STATISTICS}
            <!-- END switch_statistics_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1"><img src="{L_STATISTICS_IMG}" alt="{L_STATISTICS}" /></td>
            <td class="row2">
               <p>{TOTAL_POSTS}</p>
               <p>{TOTAL_USERS}</p>
               <p>{NEWEST_USER}</p>
               <p>{RECORD_USERS}</p>
            </td>
         </tr>

       </ul></li>


       <ul id="Chattab" class="hide"><li>

         <!-- BEGIN switch_chatbox_activate -->
         <tr>
            <th colspan="2" class="formsubtitle">{CHATBOX_NAME}</th>
         </tr>
         <tr>
            <td class="row1"><img src="{CHATBOX_IMG}" alt="{CHATBOX_NAME}" /></td>
            <td class="row2">
               <p>{TOTAL_CHATTERS_ONLINE}</p>
               <p>{CHATTERS_LIST}</p>
               <!-- BEGIN switch_chatbox_popup -->
               <div id="chatbox_popup"></div>
               <script type="text/javascript">
               insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
               </script>
               <!-- END switch_chatbox_popup -->
            </td>
         </tr>
         <!-- END switch_chatbox_activate -->
      </tbody>
   </table>

</div>
</ul></li>
</div>
</div>

<!-- END disable_viewonline -->












<br />
{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<br />
<br>
<br>
<!-- END switch_legend -->


<!-- BEGIN switch_user_login_form_footer -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->