{include file="public/mall_top" /}
{include file="public/mall_header" /}
<link rel="stylesheet" href="{$Think.config.url_domain_root}static/home/css/member.css">
<div class="dsm-container">
    {include file="public/member_left" /}
    <div class="right-layout">
        <div class="tabmenu">
            {include file="public/member_items" /}
        </div>

        <div class="alert">
            {$Think.lang.home_member_more_tag_list}
        </div>
        <div class="dsm-default-form">
            <form method="post" id="profile_more" action="{:url('memberinformation/more')}">
                <input type="hidden" name="form_submit" value="ok" />
                <input type="hidden" name="old_member_avatar" value="{$member_info.member_avatar}" />
                <div nctype="list" class="user-tag-optional">
                    {if $mtag_list}
                    {volist name="mtag_list" id="mtag"}
                    <span nctype="able" data-param='{"id":"{$mtag.mtag_id}"}'>{$mtag.mtag_name}</span>
                    {/volist}
                    {/if}
                </div>
                <h4 class="w90 mt20 mb10 tip" title="{$Think.lang.home_member_more_my_tag_title}">{$Think.lang.home_member_more_my_tag}</h4>
                <div nctype="choose" class="user-tag-selected">
                    {if $mtm_list}
                    {volist name="mtm_list" id="mtm"}
                    <span nctype="able" data-param='{"id":"{$mtm.mtag_id}"}'>{$mtm.mtag_name}
                        <a href="javascript:void(0)" nctype="delTag">
                    <input type="hidden" name="mid[]" value="{$mtm.mtag_id}" />
                    X</a></span>
                    {/volist}
        			{/if}
                    <span nctype="ep" class="ep">&nbsp;</span> </div>
                <div class="bottom">
                    <label class="submit-border">
                        <input type="submit" class="submit" value="{$Think.lang.home_member_save_modify}" />
                    </label>
                </div>
            </form>
        </div>
</div>
</div>
{include file="public/mall_server" /}
{include file="public/mall_footer" /}
<script>
    jQuery.browser={};(function(){jQuery.browser.msie=false; jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)./)){ jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;}})();
</script>
<script src="{:config('url_domain_root')}static/plugins/jquery.poshytip.min.js"></script>
<script type="text/javascript">
    //注册表单验证
    $(function(){
        var $list = $('div[nctype="list"]');
        var $choose = $('div[nctype="choose"]');
        var $ep = $('span[nctype="ep"]');
        $('span[nctype="able"]', $list).draggable({
            cancel: "a.ui-icon",
            revert: "invalid",
            containment: "document",
            helper: "clone",
            cursor: "move"
        });
        $('span[nctype="able"]', $choose).draggable({
            cancel: "a.ui-icon",
            revert: "invalid",
            containment: "document",
            helper: "clone",
            cursor: "move"
        });
        $choose.droppable({
            accept: 'div[nctype="list"] span',
            activeClass: "ui-state-highlight",
            drop: function( event, ui ) {
                chooseTeg(ui.draggable);
            }
        });
        $list.droppable({
            accept: 'div[nctype="choose"] span',
            activeClass: "custom-state-active",
            drop: function( event, ui ) {
                recycleIeg(ui.draggable);
            }
        });

        function chooseTeg($item){
            $item.fadeOut('fast',function(){
                eval("data_param = "+($item.attr('data-param')));
                $item.append('<a href="javascript:void(0)" nctype="delTag"><input type="hidden" name="mid[]" value="'+data_param.id+'" />X</a>')
                    .insertBefore($ep).fadeIn('fast').removeAttr('style');
            });

        }
        function recycleIeg($item){
            $item.fadeOut('fast',function(){
                $item.find('a').remove().end().appendTo($list).fadeIn('fast').removeAttr('style');
            });
        }

        $('a[nctype="delTag"]').on('click', function(){
            recycleIeg($(this).parent());
        });

        $('div[nctype="list"]').find('span').on('click', function(){
            chooseTeg($(this));
        });

        $('#profile_more').submit(function(){
            ajaxpost('profile_more', '', '', 'onerror');
            return false;
        });
        $('.tip').poshytip({//Ajax提示
            className: 'tip-yellowsimple',
            showTimeout: 1,
            alignTo: 'target',
            alignX: 'right',
            alignY: 'center',
            offsetY: 5,
            allowTipHover: false
        });
    });
</script>