var fadeOut = function(el) {
    $(el).fade(0);
    (function() { el.destroy(); }).delay(500);
};

//template settings
var BASE_TPL = new Hash({
    //basic templete for pop-up window
    pop_layer: 
    '<div class="dialog">' +
        '<table cellspacing="0">' +
            '<thead><tr><td class="l"></td><td class="c"></td><td class="r"></td></tr></thead>' +
            '<tbody>' +
                '<tr>' +
                    '<td class="v"></td>' +
                    '<td>' +
                        '<div class="pop_content clearfix">' +
                            '<p class="ini">内容加载中...</p>' +
                        '</div>' +
                    '</td>' +
                    '<td class="v"></td>' +
                '</tr>' +
            '</tbody>' +
            '<tfoot><tr><td class="l"></td><td class="c"></td><td class="r"></td></tr></tfoot>' +
        '</table>' +
    '</div>',
    
    tip_layer:
    '<div class="dialog">' +
        '<div class="arrow_line"></div>' +
        '<div class="pop_content">' +
            '<p class="ini">内容加载中...</p>' +
       ' </div>' +
    '</div>',
    
    friend_layer:
    '<h5><span class="delete"><a href="#">-</a></span>选择接收消息的秀友...</h5>'+
    '<div class="user_list pop_content clearfix">' +
    '<p class="ini">内容加载中...</p>' +
    '</div>'
});

var MAIN_TPL = new Hash({
    add_friend: 
    '<form action="/friend/add/%uid%/" method="post">' +
        '<h4><span class="delete"><a href="#">x</a></span>是否将 <strong>%friend%</strong> 添加为朋友？</h4>' +
        '<div class="add_friend clearfix">' +
            '<div class="avatar"><a href="/space/%uid%/"><img src="%avatar_url%" /></a></div>' +
            '<div class="content">' +
                '<p>您的好友请求将发送至<strong>%friend%</strong>。<br /><strong>%friend%</strong>确认你们成为好友后，您可以第一时间了解 <strong>%friend%</strong> 在伊儿秀的动态。在此之前，请等待<strong>%friend%</strong>的确认！</p>' +
                '<p class="t">请输入验证信息（选填）：</p>' +
                '<textarea name="confirm_msg"></textarea>' +
            '</div>' +
        '</div>' +
        '<div class="operation clearfix">' +
            '<span><button name="cancel" class="g" type="button"><b><i>取 消</i></b></button></span>' +
            '<span><button name="add_friend" type="submit"><b><i>加为好友</i></b></button></span>' +
        '</div>' +
    '</form>',
    
    concern_friend:
    '<form action="/friend/concern/%uid%/" method="post">' +
        '<h4><span class="delete"><a href="#">x</a></span>您真的要关注 %friend%？</h4>' +
        '<div class="add_friend clearfix">' +
            '<div class="avatar"><a href="/space/%uid%/"><img src="%avatar_url%" /></a></div>' +
            '<div class="content">' +
                '<p>您添加 <strong>%friend%</strong> 到你的关注列表，您可以第一时间了解 <strong>%friend%</strong> 在伊儿秀公开的瘦身进展。</p>' +
            '</div>' +
        '</div>' +
        '<div class="operation clearfix">' +
            '<span><button name="cancel" class="g" type="button"><b><i>取 消</i></b></button></span>' +
            '<span><button name="add_friend" type="submit"><b><i>确 认</i></b></button></span>' +
        '</div>' +
    '</form>',
    
    add_weight:
    '<h4><span class="delete"><a href="#">x</a></span>记录新体重值</h4>' +
    '<form action="/weight/add/" method="post" id="add_weight_form">' +
    '<div class="weight">' +
        '<div class="check_date clearfix c">' +
            '<p>选择一个需要记录体重的日期<p>' +
            '<label>' +
               ' <input type="text" class="field w200 form_check[required] date_picker(yyyy-MM-dd)" id="date" name="date" />' +
            '</label>' +
            '<span><a id="choose_date" href="#"><img src="/image/date.gif"/></a></span>' +
        '</div>' +
        '<div class="c">' +
            '<p><label for="weight">体重值(单位：KG)</label></p>' +
            '<input type="text" name="new_weight" class="field w200 form_check[required|compare(20,240)]" id="new_weight" />' +
        '</div>' +
   ' </div>' +
    '<div class="operation clearfix">' +
        '<span><button name="cancel" type="button" class="g"><b><i>取消</i></b></button></span>' +
        '<span><button name="sub_weight" type="submit"><b><i>保存体重</i></b></button></span>' +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>' +
    ' </form>',
    
    edit_weight:
    '<h4><span class="delete"><a href="#">x</a></span>修改记录的体重值</h4>' +
    '<form action="/weight/add/" method="post" id="edit_weight_form">' +
    '<input type="hidden" name="weight_id" id="weight_id" />'+
    '<div class="weight">' +
        '<div class="check_date clearfix c">' +
            '<p>您要修改体重记录的日期<p>' +
            '<label>' +
               ' <input type="text" class="field w200 form_check[required]" readonly="readonly" id="date" name="date" />' +
            '</label>' +
        '</div>' +
        '<div class="c">' +
            '<p><label for="weight">体重值(单位：KG)</label></p>' +
            '<input type="text" name="new_weight" class="field w200 form_check[required|compare(20,240)]" id="new_weight" />' +
        '</div>' +
   ' </div>' +
    '<div class="operation clearfix">' +
        '<span><button name="cancel" type="button" class="g"><b><i>取消</i></b></button></span>' +
        '<span><button name="sub_weight" type="submit"><b><i>修改体重</i></b></button></span>' +
        '<span><button name="delete_weight" id="delete_weight" type="button"><b><i>删除</i></b></button></span>' +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>' +
    ' </form>',
    
    leave_email:
    '<h4><span class="delete"><a href="#">x</a></span>留下您的Email</h4>' +
    '<form action="/friend/invitation/request/" method="post" id="request_form">' +
    '<div class="weight">' +
        '<div class="c">' +
            '<p><label for="invite_mail"><b>请输入您常用的email地址：</b></label></p>' +
            '<input type="text" name="invite_mail" class="field w245 form_check[required|email]" id="invite_mail" />' +
        '</div>' +
   ' </div>' +
    '<div class="operation clearfix">' +
        '<span><button name="cancel" type="button" class="g"><b><i>取 消</i></b></button></span>' +
        '<span><button name="sub_email" type="submit"><b><i>确 认</i></b></button></span>' +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>' +
    ' </form>',
    
    add_group: 
    '<form action="/group/addgroup/%groupid%/" method="post">' +
        '<h4><span class="delete"><a href="#">x</a></span>是否加入瘦吧 - %groupname%？</h4>' +
        '<div class="custom">' +
            '<p>加入“<strong>%groupname%</strong>”后。<br />您将获得该瘦吧提供的更精彩的服务和内容！</p>' +
        '</div>' +
        '<div class="operation clearfix">' +
            '<span><button id="cancel" name="cancel" type="button" class="g"><b><i>取消</i></b></button></span>' +
            '<span><button name="add_group" type="submit"><b><i>加入瘦吧</i></b></button></span>' +
            '<p class="process" id="process">&nbsp;</p>' +
        '</div>' +
    '</form>',
    
    leave_group: 
    '<form action="/group/leavegroup/%groupid%/" method="post">' +
        '<h4><span class="delete"><a href="#">x</a></span>是否退出瘦吧 - %groupname%？</h4>' +
        '<div class="custom">' +
            '<p>退出瘦吧 <strong>%groupname%</strong> 后。<br />您将不享受该瘦吧的组员特权！请确认是否退出！</p>' +
        '</div>' +
        '<div class="operation clearfix">' +
            '<span><button id="cancel" name="cancel" type="button" class="g"><b><i>取消</i></b></button></span>' +
            '<span><button name="leave_group" type="submit"><b><i>退出瘦吧</i></b></button></span>' +
            '<p class="process" id="process">&nbsp;</p>' +
        '</div>' +
    '</form>',
    
    del_topic: 
    '<form action="/group/deltopic/%topicid%/" method="post">' +
        '<h4><span class="delete"><a href="#">x</a></span>删除话题</h4>' +
        '<div class="custom">' +
            '<p>是否删除话题 <strong>%topicname%</strong>。<br />该操作不可逆，删除后将无法复原！</p>' +
        '</div>' +
        '<div class="operation clearfix">' +
            '<span><button id="cancel" name="cancel" type="button" class="g"><b><i>取消</i></b></button></span>' +
            '<span><button name="del_topic" type="submit"><b><i>删除话题</i></b></button></span>' +
            '<p class="process" id="process">&nbsp;</p>' +
        '</div>' +
    '</form>',
    
    edit_notice: 
    '<form action="/group/editnotice/" id="edit_notice" method="post">' +
        '<h4><span class="delete"><a href="#">x</a></span>请输入“%groupname%”的新公告</h4>' +
        '<div class="custom">' +
            '<p><textarea name="notice" class="w350" maxlength= "2">不超过150字</textarea></p>' +
            '<input type="hidden" name="groupid" value="%groupid%"/>'+
        '</div>' +
        '<div class="operation clearfix">' +
            '<span><button id="cancel" name="cancel" type="button" class="g"><b><i>取消</i></b></button></span>' +
            '<span><button name="edit_notice" type="submit"><b><i>保存公告</i></b></button></span>' +
            '<p class="process" id="process">&nbsp;</p>' +
        '</div>' +
    '</form>',
    
    remove_friend:
    '<h5>移除朋友</h5>' +
    '<p>您确定要从朋友名单里面移除姜琦吗？此动作不能恢复。姜琦将不会被通知。</p>' +
    '<div class="operation clearfix">' +
        '<span><button name="add_friend" type="submit"><b><i>移除朋友</i></b></button></span>'  +
        '<span><button name="cancel" class="g"><b><i>取消</i></b></button></span>' +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>',
    
    del_friend_group:
    '<h5>您确定要删除此秀友分组？</h5>' +
    '<p>删除此分组，分组内的成员不会同时被删除。</p>' +
    '<div class="operation clearfix">' +
        '<span><button name="cancel" class="g"><b><i>取消</i></b></button></span>' +
        '<span><button name="remove_msg" type="submit"><b><i>删除分组</i></b></button></span>'  +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>',
    
    remove_info:
    '<h5>您确定要删除此%type%？</h5>' +
    '<p>删除后将不能恢复。</p>' +
    '<div class="operation clearfix">' +
        '<span><button name="cancel" class="g"><b><i>取消</i></b></button></span>' +
        '<span><button name="remove_msg" type="submit"><b><i>删除%type%</i></b></button></span>'  +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>',
    
    createlink:
    '<h5>%desc%</h5>' +
    '<p><input type="text" name="url" value="%default%" class="field w245" /></p>' +
    '<div class="operation clearfix">' +
        '<span><button name="cancel" class="g"><b><i>取消</i></b></button></span>' +
        '<span><button name="create" type="button"><b><i>确定</i></b></button></span>'  +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>',
    
    delete_photo:
    '<h5>您确定要删除照片%name%？</h5>' +
    '<p>照片删除后将不能恢复。</p>' +
    '<div class="operation clearfix">' +
        '<span><button name="cancel" class="g"><b><i>取消</i></b></button></span>' +
        '<span><button name="remove_msg" type="submit"><b><i>删除</i></b></button></span>'  +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>',
	
    del_album:
    '<h5>您确定要删除此相册？</h5>' +
    '<p>删除此相册，相册内的所有照片将同时被删除。</p>' +
    '<div class="operation clearfix">' +
        '<span><button name="cancel" class="g"><b><i>取消</i></b></button></span>' +
        '<span><button name="remove_msg" type="submit"><b><i>删除相册</i></b></button></span>'  +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>',

    create_album:
    '<h4><span class="delete"><a href="#">x</a></span>创建新照片专辑</h4>' +
    '<form action="/photo/album/create/" method="post" id="create_album_form">' +
    '<div class="album_form">' +
        '<div class="c">' +
            '<label for="album_name">专辑名称：</label>' +
            '<input type="text" name="album_name" class="field w200 form_check[required|textNum(2,15)]" id="album_name" />' +
        '</div>' +
        '<div class="c">' +
            '<label>访问权限：</label>' +
            '<select name="privacy" id="privacy">' +
                '<option value="0" selected="selected">所有人可见</option>' +
                '<option value="2">好友可见</option>' +
                '<option value="3">只有自己可见</option>' +
                //'<option value="4">凭密码访问</option>' +
            '</select>' +
        '</div>' +
    '</div>' +
    '<div class="operation clearfix">' +
        '<span><button name="cancel" type="button" class="g"><b><i>取 消</i></b></button></span>' +
        '<span><button name="sub_album" type="submit"><b><i>确 认</i></b></button></span>' +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>' +
    ' </form>',
    
    edit_photo:
    '<h4><span class="delete"><a href="#">x</a></span>修改照片%name%属性</h4>' +
    '<form action="/photo/edit/%id%/" method="post" id="edit_photo_form">' +
    '<div class="edit clearfix">' +
        '<div class="left">' +
            '<img src="%src%" alt="%desc%" />' +
        '</div>' +
        '<div class="right">' +
        	'<p><label for="photo_desc"><b>照片描述：</b></label></p>' +
            '<p><input type="text" name="desc" value="%desc%" id="photo_desc" class="field w245 form_check[required,textNum(2,100)]" /></p>' +
            '<p><label><input type="checkbox" name="cover" value="%id%"/>设为专辑封面</label></p>' +
        '</div>' +
    '</div>' +
    '<div class="operation clearfix">' +
        '<span><button name="cancel" type="button" class="g"><b><i>取 消</i></b></button></span>' +
        '<span><button name="sub_album" type="submit"><b><i>确 认</i></b></button></span>' +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>' +
    ' </form>',
    
    add_friend_group:
    '<h4><span class="delete"><a href="#">x</a></span>增加秀友分组</h4>' +
    '<form action="/friend/group/add/" method="post" id="add_group_from">' +
    '<div class="weight">' +
        '<div class="c">' +
            '<p><label for="group_name"><b>请输入分组名称：</b></label></p>' +
            '<input type="text" name="group_name" class="field w245 form_check[required|textNum(2,8)]" id="group_name" />' +
        '</div>' +
        '<div class="c">' +
            '<input type="checkbox" name="is_top" id="is_top" value="1" />是否为特别分组' +
        '</div>' +
   ' </div>' +
    '<div class="operation clearfix">' +
        '<span><button name="cancel" type="button" class="g"><b><i>取 消</i></b></button></span>' +
        '<span><button name="sub_email" type="submit"><b><i>确 认</i></b></button></span>' +
        '<p class="process" id="process">&nbsp;</p>' +
    '</div>' +
    ' </form>',
    //temp model
    contest_fans:
    '<form action="/contest/fans/%uid%/" method="post">' +
        '<h4><span class="delete"><a href="#">x</a></span>您确定要成为 %friend% 的亲友团成员？</h4>' +
        '<div class="add_friend clearfix">' +
            '<div class="avatar"><a href="/space/%uid%/"><img src="%avatar_url%" /></a></div>' +
            '<div class="content">' +
                '<p>成为<strong>%friend%</strong>的亲友团成员之后，您给这位新妈妈投票时，她将会获得更高的得票权值！</p>' +
            '</div>' +
        '</div>' +
        '<div class="operation clearfix">' +
            '<span><button name="cancel" class="g" type="button"><b><i>取 消</i></b></button></span>' +
            '<span><button name="as_fans" type="submit"><b><i>确 认</i></b></button></span>' +
        '</div>' +
    '</form>'
});

MAIN_TPL.include('insertimage', MAIN_TPL.get('createlink'));

//pop windows class
var PopLayer = new Class({
    Implements: [Events, Options],
    options: {
        cId: 'pop_win',
        pId: '.pop_content',
        processId: 'process',
        adoptId: false,
        wClass: '.dialog',
        width: 425,
        eSource: false,
        type: 'pop_layer',
        baseTpl: $defined(BASE_TPL) ? BASE_TPL : new Hash(),
        mainTpl: $defined(MAIN_TPL) ? MAIN_TPL : new Hash(),
        postUrl: false,
        onPosted: $empty(),
        onGeted: $empty(),
        onClosed: $empty()
    },
    
    initialize: function(get, options) {
        this.setOptions(options);
        this.form = false;
        this.formCheck = false;
        this.datePicker = false;
        
        if($defined(get)){
            this.create();
            
            if($type(get) == 'object'){
                this.parseGet(get);
            }else{
                this.get(get.toString());
            }
        }    
    },
    
    create: function() {
        if($(this.options.cId))$(this.options.cId).destroy();
        div = new Element('div',{'id': this.options.cId}).set('html', this.getBaseTpl());
        $(this.options.adoptId ? this.options.adoptId : document.body).adopt(div);
        
        this.iniContainer();
    },
    
    destroy: function() {
        if($(this.options.cId)){
            $(this.options.cId).fade(0);
            (function() {$(this.options.cId).destroy();}.bind(this)).delay(500);
        }
    },
    
    iniContainer: function() {
        //set width
        var dialog =  $(this.options.cId).getElement(this.options.wClass);
        if(dialog)dialog.setStyle('width', this.options.width);
    },
    
    get: function(url) {
        var popContent = $(this.options.cId).getElement(this.options.pId);
        
        new Request.HTML({
            url: url,
            method: 'get',
            onSuccess: function(html) {
                popContent.set('text', '').adopt(html);
                //fire geted event
                this.fireEvent('onGeted', html, 50);
                
                this.setLoadAction();
                //post event
                this.post();
            }.bind(this),
            
            onFailure: function() {
                popContent.set('html', '<p class="fail">请求数据失败!</p>');
            }
        }).send();
    },
    
    post: function() {
        if(this.form){
            this.form.addEvent('submit', function(e) {        
                if(!this.formCheck.submitForm(e))return;
                e.stop();
                this.addProcess();
                
                this.form.set('send', {
                    onComplete: function(response) {
                        if(response == 'true' || $type(JSON.decode(response)) == 'object'){
                            //alert('success!');
                            this.removeProcess();
                            this.fireEvent('onPosted', response, 50);
                            this.destroy();
                        }
                    }.bind(this),
                    onFailure: function() {
                        $(this.options.cId).getElement(this.options.pId).set('html', '<p class="fail">提交数据失败!</p>');
                    }.bind(this)
                });
                this.form.send();
            }.bind(this));
        }else{
            var popContent = $(this.options.cId).getElement(this.options.pId);
            
            if(this.options.postUrl){
                submit = $(this.options.cId).getElement('button[type=submit]');
                submit.addEvent('click', function(e) {
                    e.stop();
                    this.addProcess();
                    
                    new Request({
                        url: this.options.postUrl,
                        method: 'get',
                        onSuccess: function(response) {
                            var status = JSON.decode(response);
                            if(status == true){
                                this.removeProcess();
                                this.fireEvent('onPosted', response, 50);
                                this.destroy();
                            }else if(status == false){
                                popContent.set('html', '<p class="fail">请求数据失败!</p>');
                            }else if($type(status) == 'number'){
                                popContent.set('html', AJAX_ERROR[status]);
                            }
                        }.bind(this),
                        
                        onFailure: function() {
                            popContent.set('html', '<p class="fail">请求数据失败!</p>');
                        }
                    }).send();
                }.bind(this));
            }
        }
    },
    
    parseGet: function(get) {
        hash = new Hash(get);
        str = this.getMainTpl(hash.get('tpl'));
        data = new Hash(hash.get('data'));
        t = new Template(str);
        $(this.options.cId).getElement(this.options.pId).set('html', t.parse(data));
        this.fireEvent('onGeted', 'static', 50);
        
        this.setLoadAction();
        //post event
        this.post();
    },
    
    addProcess: function() {
        p = $(this.options.processId);
        if(p)p.setStyle('display', 'block');
    },
    
    removeProcess: function() {
        p = $(this.options.processId);
        if(p)p.setStyle('display', 'none');
    },
    
    getMainTpl: function(key) {
        tpl = this.options.mainTpl.get(key);
        return tpl ? tpl : '';
    },
    
    getBaseTpl: function() {
        tpl = this.options.baseTpl.get(this.options.type);
        return tpl ? tpl : '';
    },
    
    setLoadAction: function() {
        this.form = $(this.options.cId).getElement('form');
        if(this.form && this.options.postUrl)this.form.set('action', this.options.postUrl);
        this.formCheck = this.form && $defined(FormCheck) ? new FormCheck(this.form) : false;
        try{
            this.datePicker = this.form && $defined(DatePicker) ? new DatePicker(this.form) : false;	
        }catch(e){}
                
        var cancel = $(this.options.cId).getElement(this.options.pId).getElement('button[name=cancel]');
        if(cancel){
            cancel.addEvent('click', function(e) {
                e.stop();
                this.fireEvent('onClosed', null, 50);
                this.destroy();
            }.bind(this));
        }
        
        var close = $(this.options.cId).getElement('.delete a');
        if(close){
            close.addEvent('click', function(e) {
                e.stop();
                this.fireEvent('onClosed', null, 50);
                this.destroy();
            }.bind(this));
        }
    }
});

//pop tip class
var TipLayer = new Class({
    Extends: PopLayer,
    options: {
        cId: 'pop_tip',
        type: 'tip_layer',
        adoptId: document.body,
        width: 400,
        referEl: 'div.container',
        referWidth: 960
    },
    
    initialize: function(get, e, options) {
        this.options.eSource = e.target;
        this.parent(get, options);
    },
    
    iniContainer: function() {
        this.parent();
        this.setLocal();
    },
    
    setLocal: function() {
        var el = this.options.eSource;
        var refer = $(this.options.adoptId ? this.options.adoptId : document.body).getElement(this.options.referEl);
        var dialog = $(this.options.cId).getElement(this.options.wClass);
        //alert(el.getPosition().x);
        if(el && refer && dialog){
            var arrowLine = dialog.getElement('div.arrow_line');
            
            relatX = el.getPosition().x - refer.getPosition().x;
            if(relatX > this.options.referWidth/2){
                //alert(el.getPosition().x - dialog.getStyle('width'));
                dialogW = dialog.getStyle('width').toInt();
                positionX = dialogW - 25;
                arrowLine.addClass('al_right');
                arrowLine.setStyle('background-position', positionX + 'px 50%');
                dialog.setStyle('left', el.getPosition().x - dialogW + 20);           	
            }else{
                arrowLine.addClass('al_left');
                dialog.setStyle('left', el.getPosition().x);
            }
            //alert(Browser.Engines.trident() == 5);
            var span = Browser.Engines.trident() == 5 ? 12 : 20;
            dialog.setStyle('top', el.getPosition().y + span);
        }
    }
});

//choose friend
var FriendLayer = new Class({
    Extends: PopLayer,
    options: {
        cId: 'pop_friend',
        type: 'friend_layer',
        adoptId: 'friend_container'
    }
});