<script type="text/javascript">
var active = 0;
var shift = 0;
$(function(){
    initLightboxOldTemplate($('.image_gallery a'));
    var desc = $('#group_description'),
        curHeightDefault = desc.height(),
        current,isCollapse;

    if ('{description_collapse}'*1) {
        $('#show_description').show();
    }
    current = desc.data('desc-short');
    $('body').on('click', '#show_description', function(){
        var curHeight = desc.height();
            desc.css('height', curHeight+'px');
        if (current == desc.data('desc-short')) {
            current = desc.data('desc');
            isCollapse = false;
        } else {
            current = desc.data('desc-short');
            isCollapse = true;
        }
        if (curHeight >= curHeightDefault && isCollapse) {
            desc.animate({height: curHeightDefault+'px'}, 200, function() {
                $(this).html(current+' <a id="show_description" href="">{l_show_all}</a>');
            });
        } else {
            desc.html(current+' <a id="show_description" href="">{l_collapse}</a>');
            var autoHeight = desc.css('height', 'auto').height();
            desc.height(curHeight).animate({height: autoHeight}, 200);
        }

        return false;
    });
});

function set_main_image(thumbnail, image, n)
{
    $('.image_gallery a').attr('href', image);
    $('.image_gallery a img').attr('src', thumbnail);
    $('#image_list li').attr('class','');
    $('#image_list li:eq('+n+')').attr('class','active');
    active = n+shift;
}

function on_group_join_private_button()
{
    alert('{l_events_private_group_alert}');

	return false;
}

</script>
<div class="groups_decor_l">

    <div class="pl_top">
          <a href="{url_main}groups_group_show.php?group_id={group_id}" style="text-decoration:none;"><h1 class="txt_upper_header_color fl_left style888"title="{group_title_full}">{group_title}</h1></a>

          <!-- begin_group_join_button -->
              <form id="groups_join_form" action="{url_main}groups_group_join.php?group_id={group_id}"  method="POST">
				<div class=" fl_right">
                    <div id="btn_groups_form_join" class="btn_bl_show_narrow_box">
                      <a href="" onclick="if (confirm('{l_groups_do_you_really_want_to_join}')){$('#groups_join_form').submit();} return false;" class="btn round blue fl_right"  style="text-decoration: none;">
                        {l_groups_join}
                      </a>
                    </div>
                </div>
			</form>
          <!-- end_group_join_button -->
          <!-- begin_group_join_private_button -->
              <form id="group_join_private_form" action="#" onclick="" method="POST">
                  <div id="btn_groups_form_private" class="btn_bl_show_narrow_box"><div>
                      <a href="" onclick="on_group_join_private_button(); return false;" class="btn round blue fl_right"  style="text-decoration: none;">
                        {l_groups_join}&nbsp;
                      </a>
                  </div></div>
              </form>
          <!-- end_group_join_private_button -->
          <!-- begin_group_invite_button -->

              <form id="group_invite_form" action="{url_main}groups_group_invite.php?group_id={group_id}" method="POST">
                  <div id="btn_groups_form_invite" class="btn_bl_show_narrow_box">

                      <a href="" onclick="$('#group_invite_form').submit(); return false;" class="btn round blue fl_right"  style="text-decoration: none;">
                        {l_groups_invite}
                      </a>

                  </div>
              </form>

          <!-- end_group_invite_button -->

          <div class="cl"></div>
          <div class="fl_left" style="width: 160px; padding-right: 15px;">
              <div class="groups_img_yellow groups_margin0 image_gallery">
                  <!-- begin_image --> <a href="{image_file}"><img src="{image_thumbnail_b}" width="160" height="120" title="{group_title_full}" alt="{group_title_full}"/></a> <!--end_image -->
                  <!-- begin_no_image --> <img src="{image_thumbnail_b}" width="160" height="120" title="{group_title_full}" alt="{group_title_full}"/> <!--end_no_image -->
              </div>

              <div id="groups_group_image_list">
              {groups_group_image_list}
              </div>

              <!-- begin_group_functions -->
              <div class="groups_img_txt">
                  <span class="black">
                  <a href="{url_main}groups_group_add_photos.php?group_id={group_id}">{l_groups_add_images}</a>
                  <!-- begin_group_edit --> |
                  <a href="{url_main}groups_group_edit.php?group_id={group_id}">{l_groups_edit_group}</a>
                  <!-- end_group_edit -->
                  <!-- begin_group_leave -->
                  | <a href="{url_main}groups_group_leave.php?group_id={group_id}" onclick="return confirm('{l_groups_do_you_really_want_to_leave}');">{l_groups_leave}</a>
                  <!-- end_group_leave -->
                  </span>
              </div>
              <!-- end_group_functions -->
          </div>

          <div class="groups_bl_green">
              <div class="list_bg_violet">
                <ul class="list_bg fl_left">
                    <li><strong>{l_groups_category}:</strong> <!-- begin_category --><a href="{url_main}groups_search.php?category_id={category_id}" title="{category_title_full}">{category_title}</a></li><!-- end_category --><!-- begin_no_category -->{l_groups_choose_below}<!-- end_no_category -->
                    <li><span>{l_groups_members}:</span> {group_n_members}</li>
                    <li><span>{l_groups_posts}:</span> {group_n_posts}</li>
                </ul>
              </div>

              <div id ='group_description' style="padding-bottom: 10px;"  data-desc='{group_description_full}' data-desc-short='{group_description}'>
                  {group_description} <a id='show_description' style="display:none;" href="">{l_show_all}</a>
              </div>
          </div>

    </div>
<div class="cl"></div>
</div>