<!-- Header -->
<{includeq file="db:system_header.html"}>
<!-- Buttons -->
<div class="floatright">
    <div class="xo-buttons">
        <{if !$edit_form && !$listimg}>
        <button id="xo-addcat-btn" class="ui-corner-all tooltip" onclick="xo_toggle('div#xo-category-add');" title="<{$smarty.const._AM_SYSTEM_IMAGES_ADDCAT}>">
            <img src="<{xoAdminIcons add.png}>" alt="<{$smarty.const._AM_SYSTEM_IMAGES_ADDCAT}>" />
            <{$smarty.const._AM_SYSTEM_IMAGES_ADDCAT}>
        </button>
        <{/if}>
        <{if $cat_img || $listimg}>
        <button id="xo-addimg-btn" class="ui-corner-all tooltip" onclick="xo_toggle('div#xo-images-add');" title="<{$smarty.const._AM_SYSTEM_IMAGES_ADDIMG}>">
            <img src="<{xoAdminIcons add.png}>" alt="<{$smarty.const._AM_SYSTEM_IMAGES_ADDIMG}>" />
            <{$smarty.const._AM_SYSTEM_IMAGES_ADDIMG}>
        </button>
        <{/if}>
    </div>
</div>
<!-- Category List -->
<{if !$edit_form && !$listimg}>
<table class="outer" cellspacing="1">
    <thead>
        <tr>
            <th><{$smarty.const._AM_SYSTEM_IMAGES_NAME}></th>
            <th><{$smarty.const._AM_SYSTEM_IMAGES_NBIMAGES}></th>
            <th><{$smarty.const._AM_SYSTEM_IMAGES_MAXSIZE}></th>
            <th><{$smarty.const._AM_SYSTEM_IMAGES_MAXWIDTH}></th>
            <th><{$smarty.const._AM_SYSTEM_IMAGES_MAXHEIGHT}></th>
            <th><{$smarty.const._AM_SYSTEM_IMAGES_DISPLAY}></th>
            <th><{$smarty.const._AM_SYSTEM_IMAGES_ACTIONS}></th>
        </tr>
    </thead>
    <tbody>
        <{foreach item=cat from=$cat_img}>
        <tr class="<{cycle values='odd, even'}> txtcenter">
            <td>
                <a class="tooltip" href="admin.php?fct=images&amp;op=listimg&amp;imgcat_id=<{$cat.id}>" title="<{$smarty.const._AM_SYSTEM_IMAGES_VIEW}>">
                    <{$cat.name}>
                </a>
            </td>
            <td><{$cat.count}></td>
            <td><{$cat.maxsize}></td>
            <td><{$cat.maxwidth}></td>
            <td><{$cat.maxheight}></td>
            <td class="xo-actions"><img id="loading_cat<{$cat.id}>" src="./images/spinner.gif" style="display:none;" alt="<{$smarty.const._AM_SYSTEM_LOADING}>" /><img class="cursorpointer tooltip" id="cat<{$cat.id}>" onclick="system_setStatus( { fct: 'images', op: 'display_cat', imgcat_id: <{$cat.id}> }, 'cat<{$cat.id}>', 'admin.php' )" src="<{if $cat.display}><{xoAdminIcons success.png}><{else}><{xoAdminIcons cancel.png}><{/if}>" alt="" title="<{if $cat.display}><{$smarty.const._AM_SYSTEM_IMAGES_OFF}><{else}><{$smarty.const._AM_SYSTEM_IMAGES_ON}><{/if}>" />
            </td>
            <td class="xo-actions txtcenter">
                <a class="tooltip" href="admin.php?fct=images&amp;op=listimg&amp;imgcat_id=<{$cat.id}>" title="<{$smarty.const._AM_SYSTEM_IMAGES_VIEW}>">
                    <img src="<{xoAdminIcons display.png}>" alt="<{$smarty.const._AM_SYSTEM_IMAGES_VIEW}>" />
                </a>
                <{if $xoops_isadmin}>
                <a class="tooltip" href="admin.php?fct=images&amp;op=editcat&amp;imgcat_id=<{$cat.id}>" title="<{$smarty.const._EDIT}>">
                    <img src="<{xoAdminIcons edit.png}>" alt="<{$smarty.const._EDIT}>" />
                </a>
                <a class="tooltip" href="admin.php?fct=images&amp;op=delcat&amp;imgcat_id=<{$cat.id}>" title="<{$smarty.const._EDIT}>">
                    <img src="<{xoAdminIcons delete.png}>" alt="" />
                </a>
                <{/if}>
            </td>
        </tr>
        <{/foreach}>
        <{if !$cat_img}>
        <tr>
            <td class="txtcenter bold odd" colspan="7"><{$smarty.const._AM_SYSTEM_IMAGES_NOCAT}></td>
        </tr>
        <{/if}>
    </tbody>
</table>
<!-- Nav menu -->
<{if $nav_menu}><div class="xo-avatar-pagenav floatright"><{$nav_menu}></div><div class="clear spacer"></div><{/if}>
<{/if}>
<{if $images}>
<!-- Image list -->
<div id="xo-category-add" class="">
    <{foreach item=img from=$images}>
    <div class="floatleft">
        <div class="ui-corner-all xo-thumb txtcenter">
            <div class="xo-thumbimg">
                <img class="tooltip" src="<{$xoops_url}>/image.php?id=<{$img.image_id}>&amp;width=120&amp;height=120" alt="<{$img.image_nicename}>" title="<{$img.image_nicename}>" style="max-width:120px; max-height:120px;" />
            </div>
            <div class="xo-actions txtcenter">
                <div class="spacer bold"><{$img.image_nicename}></div>
                    <img id="loading_img<{$img.image_id}>" src="./images/spinner.gif" style="display:none;" alt="<{$smarty.const._AM_SYSTEM_LOADING}>" /><img class="cursorpointer tooltip" id="img<{$img.image_id}>" onclick="system_setStatus( { fct: 'images', op: 'display_img', image_id: <{$img.image_id}> }, 'img<{$img.image_id}>', 'admin.php' )" src="<{if $img.image_display}><{xoAdminIcons success.png}><{else}><{xoAdminIcons cancel.png}><{/if}>" alt="<{$smarty.const._IMGDISPLAY}>" title="<{$smarty.const._IMGDISPLAY}>" />
                    <{if !$db_store}>
                    <a class="lightbox tooltip" href="<{$xoops_upload_url}>/<{$img.image_name}>" title="<{$smarty.const._PREVIEW}>">
                    <{else}>
                    <a class="lightbox tooltip" href="<{$xoops_url}>/image.php?id=<{$img.image_id}>" title="<{$smarty.const._PREVIEW}>">
                    <{/if}>
                        <img src="<{xoAdminIcons display.png}>" alt="<{$smarty.const._AM_SYSTEM_IMAGES_VIEW}>" />
                    </a>
                <a class="tooltip" href="admin.php?fct=images&amp;op=editimg&amp;image_id=<{$img.image_id}>" title="<{$smarty.const._EDIT}>">
                    <img src="<{xoAdminIcons edit.png}>" alt="<{$smarty.const._EDIT}>" />
                </a>
                <a class="tooltip" href="admin.php?fct=images&amp;op=delfile&amp;image_id=<{$img.image_id}>" title="<{$smarty.const._DELETE}>">
                    <img src="<{xoAdminIcons delete.png}>" alt="<{$smarty.const._DELETE}>" />
                </a>
                 <img class="tooltip" onclick="display_dialog(<{$img.image_id}>, true, true, 'slide', 'slide', 120, 350);" src="<{xoAdminIcons url.png}>" alt="<{$smarty.const._AM_SYSTEM_IMAGES_URL}>" title="<{$smarty.const._AM_SYSTEM_IMAGES_URL}>" />
            </div>
        </div>
    </div>
    
    <div id="dialog<{$img.image_id}>" title="<{$img.image_nicename}>" style='display:none;'>
          <div class="center">
              <{if !$db_store}>
              <{$xoops_upload_url}>/<{$img.image_name}>
              <{else}>
              <{$xoops_url}>/image.php?id=<{$img.image_id}>
              <{/if}>
          </div>
    </div>

    <{/foreach}>
    <div class="clear"></div>
</div>
<{if $nav_menu}><div class="xo-avatar-pagenav floatright"><{$nav_menu}></div><div class="clear spacer"></div><{/if}>
<{else}>
<div id="xo-category-add" class="">
    <div class="clear"></div>
</div>
<{/if}>

<!-- Add Image form -->
<div id="xo-images-add" class="hide">
    <br />
    <{$image_form.javascript}>
    <form name="<{$image_form.name}>" id="<{$image_form.name}>" action="<{$image_form.action}>" method="<{$image_form.method}>" <{$image_form.extra}> >
    <table class="outer">
        <tr>
            <th colspan="2"><{$image_form.title}></th>
        </tr>
        <{foreach item=element from=$image_form.elements}>
        <{if $element.hidden != true && $element.body != ''}>
        <tr>
            <td class="odd aligntop">
                <div class="spacer bold"><{$element.caption}><{if $element.required}><span class="red">&nbsp;*</span><{/if}></div>
                <div class="spacer"><{$element.description}></div>
            </td>
            <td class="even"><{$element.body}></td>
        </tr>
        <{else}>
        <{$element.body}>
        <{/if}>
        <{/foreach}>
    </table>
    </form>
</div>
<!-- Add Category form -->
<div id="xo-category-add" class="hide">
    <br />
    <{$imagecat_form.javascript}>
    <form name="<{$imagecat_form.name}>" id="<{$imagecat_form.name}>" action="<{$imagecat_form.action}>" method="<{$imagecat_form.method}>" <{$imagecat_form.extra}> >
    <table class="outer">
        <tr>
            <th colspan="2"><{$imagecat_form.title}></th>
        </tr>
        <{foreach item=element from=$imagecat_form.elements}>
        <{if $element.hidden != true && $element.body != ''}>
        <tr>
            <td class="odd aligntop">
                <div class="spacer bold"><{$element.caption}><{if $element.required}><span class="red">&nbsp;*</span><{/if}></div>
                <div class="spacer"><{$element.description}></div>
            </td>
            <td class="even"><{$element.body}></td>
        </tr>
        <{else}>
        <{$element.body}>
        <{/if}>
        <{/foreach}>
    </table>
    </form>
</div>
<!-- Edit form image -->
<{if $edit_form}>
<div id="xo-images-add" class="">
    <{$edit_thumbs}>
    <br />
    <{$edit_form.javascript}>
    <form name="<{$edit_form.name}>" id="<{$edit_form.name}>" action="<{$edit_form.action}>" method="<{$edit_form.method}>" <{$edit_form.extra}> >
    <table class="outer">
        <tr>
            <th colspan="2"><{$edit_form.title}></th>
        </tr>
        <{foreach item=element from=$edit_form.elements}>
        <{if $element.hidden != true && $element.body != ''}>
        <tr>
            <td class="odd aligntop">
                <div class="spacer bold"><{$element.caption}><{if $element.required}><span class="red">&nbsp;*</span><{/if}></div>
                <div class="spacer"><{$element.description}></div>
            </td>
            <td class="even"><{$element.body}></td>
        </tr>
        <{else}>
        <{$element.body}>
        <{/if}>
        <{/foreach}>
    </table>
    </form>
</div>
<{/if}>
<script type="text/javascript">
    IMG_ON = '<{xoAdminIcons success.png}>';
    IMG_OFF = '<{xoAdminIcons cancel.png}>';

    $('.lightbox').lightBox({
        imageLoading:'language/<{$xoops_language}>/images/lightbox-ico-loading.gif',
        imageBtnClose:'language/<{$xoops_language}>/images/lightbox-btn-close.gif',
        imageBtnNext:'language/<{$xoops_language}>/images/lightbox-btn-next.gif',
        imageBtnPrev:'language/<{$xoops_language}>/images/lightbox-btn-prev.gif',
        imageBlank:'language/<{$xoops_language}>/images/lightbox-blank.gif'
    });


</script>