{template block/header}

<div id="bodywrap">
    <table class="layout">
        <tr>
            <td class="left">
                <div class="mainbody">
                    <div class="col titbg">
                        <h1 class="f_left">{lang upload_photo}</h1>
                        <h4 class="f_left"></h4>
                        <div class="rmenu f_right">
                           {lang switch_upload_type}: <a href="{link ctl=upload act=index}" class="current">{lang expert_mode}</a> | <a href="{if $album_id}{link ctl=upload act=normal aid=$album_id}{else}{link ctl=upload act=normal}{/if}">{lang normal_mode}</a>
                        </div>
                    </div>
                    <div class="innercol grid">
<!--{if count($albums_list) > 0}-->
<script type="text/javascript" src="{$statics_path}js/plupload.min.js"></script>
<script type="text/javascript" src="{$statics_path}js/jquery.plupload.queue.min.js"></script>
<script>
$(function() {
    plupload.addI18n({
        'Filename' : '{lang filename}',
        'Status' : '{lang status}',
        'Size' : '{lang size}',
        'Add files' : '{lang add_file}',
        'Stop current upload' : '{lang stop_upload}',
        'Start uploading queue' : '{lang start_upload}',
        'Start upload' : '{lang start_upload}',
        'Uploaded %d/%d files':'{lang upload_status}',
        'Drag files here.' : '{lang drag_file_here}'
    });

   $("#muilti_uploader").pluploadQueue({
        runtimes : 'html5,flash',
        url : '{link ctl=upload act=process t=save_tmp}',
        max_file_size : '15mb',
        chunk_size : '512kb',
        unique_names : true,
        multipart: false,
        filters : [
            {title : "Image files", extensions : "{$support_type}"}
        ],
        flash_swf_url : '{$statics_path}swf/plupload.flash.swf'
        {if $upload_setting['enable_pre_resize']},
        resize : {width : {$upload_setting['resize_width']}, height : {$upload_setting['resize_height']}, quality : {$upload_setting['resize_quality']}}
        {/if}
    });
    var uploader = $('#muilti_uploader').pluploadQueue();
    var usubmited = 0;
    if(uploader){
        uploader.bind('UploadProgress', function() {
            if (uploader.total.uploaded == uploader.files.length && usubmited == 0){
                usubmited = 1;
                Mui.box.setData('<div class="loading">Loading...</div>');
                Mui.form.sendPop('upload_photos_form');
                setTimeout(function(){
                    $('#upload_photos_form').submit();
                },200);
            }
        });
        $('#upload_photos_form').find('input[name="uploadbtn"]').click(function(e) {
            if (uploader.total.uploaded == 0) {
                if (uploader.files.length > 0) {
                    uploader.start();
                } else {
                    Mui.box.alert('{lang notice_title}','{lang must_upload_one}','{lang confirm}');
                }
            }
        });
    }
});

function reload_albums_options(je){
    $.get('{link ctl=albums act=ajaxlist t=all}',{},function(data){
        setTimeout(function(){
            Mui.box.close();
        },1000);
        if(data.ret){
            $(je).empty();
            for(v in data.list){
                $(je).addOption(data.list[v],v);
            }
        }
    },'json');
}
</script>
<link rel="stylesheet" href="{$statics_path}plupload/plupload.queue.css" type="text/css" />
                        <div id="upload_field">
                            <form id="upload_photos_form" method="post" action="{link ctl=upload act=save t=multi}" onsubmit="return false;">
                                <div class="field">
                                    <div class="label">{lang select_album}:</div>
                                    <div class="ipts">
                                        <select id="album_id" name="album_id">
                                            <!--{loop $albums_list $k $v}-->
                                                <option value="{$k}" {if $album_id==$k}selected="selected"{/if}>{$v}</option>
                                            <!--{/loop}-->
                                        </select> <a  href="javascript:void(0)" onclick="Mui.box.show('{link ctl=albums act=create}',true);Mui.box.callback = function(){ reload_albums_options('#album_id'); }" class="ml10">{lang new_album}</a></div>
                                    <div class="clear"></div>
                                </div>
                                <div id="muilti_uploader">
                                    <div class="notice_info">
                                    {lang loading} <a href="{link ctl=upload act=normal}">{lang if_no_response_click_here}</a>
                                    </div>
                                </div>
                                <div align="center"><input type="button" name="uploadbtn" class="ylbtn" value="{lang upload_immediatly}" /></div>
                            </form>
                        </div>
                        <!--{else}-->
                        <div class="no_data_info">
                            <div class="pic no_album"></div>
                            <div class="data_msg">
                                <div>{lang no_album_notice}</div >
                                <div class="button"><div class="bigbutton"><a href="javascript:void(0)" onclick="Mui.box.show('{link ctl=albums act=create}',true);"><span>{lang create_new_album}</span></a></div></div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <!--{/if}-->
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
{template block/footer}