var QuickReply = new Class({
    Implements: [Options, Events],
    options: {
        url: '/quick_reply/'
    },
    
    initialize: function(comment, options) {
        this.comment = comment;
        this.setOptions(options);
        var quickLink = $(document).getElement('.quick_reply');
        if(quickLink){
            quickLink.addEvent('click', function(e) {
                e.stop();
                this.replyModel();
            }.bind(this));
        }
    },
    
    replyModel: function() {
        var qrs = $('quick_reply_space');
        if(qrs){
            qrs.setStyle('display', qrs.getStyle('display') == 'block' ? 'none' : 'block');
            return;
        }
        
        var quickDiv = new Element('div', {
            'id': 'quick_reply_space',
            'html': QuickReply.templete.get('base')
        });
        $(document.body).adopt(quickDiv);
        quickDiv.getElement('h4 a').addEvent('click', function(e) {
            e.stop();
            quickDiv.setStyle('display', 'none');
        });
        
        new Request({
            method: 'get',
            url: this.options.url + '?v=' + $time(),
            onSuccess: function(text) {
                $('quick_reply_space').getElement('.data').set('html', text);
                $('quick_reply_space').getElements('li').each(function(li) {
                    this.replyEvent(li.getElement('a.reply'));
                    this.copyEvent(li.getElement('a.copy'));
                }, this);
            }.bind(this)
        }).send();
    },
    
    replyEvent: function(link) {
        link.addEvent('click', function(e) {
            e.stop();
            var text = link.getParent('li').getElement('b').get('title');
            $('msg_content').set('value', text);
            this.comment.form.fireEvent('submit', e, 500);
        }.bind(this));
    },
    
    copyEvent: function(link) {
        link.addEvent('click', function(e) {
            e.stop();
            var text = link.getParent('li').getElement('b').get('title');
            $('msg_content').set('value', text);
            new Fx.Scroll($(document.body)).toElement($('msg_content'));
        });
    }
});

QuickReply.templete = new Hash({
    'base':
    '<div class="quick_reply">' +
        '<h4><span><a href="#">关闭</a></span>常用回复模板</h4>' +
        '<div class="data">' +
        '<p>数据载入中...</p>'+
        '</div>' +
    '</div>'
});

var UserComment = new Class({
    Implements: [Options, Events],
    options: {
        url: false,
        onSaved: $empty(),
        place: 'top'
    },
    
    initialize: function(params, options) {
        this.form = $(params.form);
        this.container = $(params.container);
        this.masterId = params.masterId;
        this.delUrl = params.delUrl;
        this.myself = params.myself;
        this.setOptions(options);
        this.check = FormCheck ? new FormCheck(this.form) : false;
        this.submitEvent();
        this.replyEvent();
        this.delEvent();
        this.cancelEvent();
        if($('icon_reply_link')){
            new QuickReply(this);
        }
    },
    
    cancelEvent: function() {
        this.form.getElement('button[name=cancel]').addEvent('click', function(e) {
            this.resetForm();
        }.bind(this));
    },
    
    resetForm: function() {
        //this.form.getParent().inject(this.container.getElement('h5'), 'after');
        this.container.adopt(this.form.getParent());
        this.form.getElement('textarea[name=content]').set('value', '');
        this.form.getElement('input[name=parent]').set('value', '');
        if(this.check)this.check.resetForm();
    },
    
    submitEvent: function() {
        this.form.addEvent('submit', function(e) {
            var parent = this.form.getElement('input[name=parent]');
            
            if(this.check.submitForm(e)){
                var sub_btn = this.form.getElement('button[type=submit]');
                sub_btn.set('disabled', true);
                try{e.stop();}catch(e){}
                new Request.HTML({
                    url: this.options.url ? this.options.url : this.form.get('action'),
                    method: 'post',
                    onSuccess: function(tree, elements, html) {
                        sub_btn.set('disabled', false);	
                        if(html == '00'){
                            alert('对不起，你还没有登录，不能发表评论！');
                            return false;
                        }
                        
                        var div = new Element('div', {html: html});
                        var replyEl = null;
                        this.fireEvent('onSaved', [div, parent.get('value')], 50);
                        
                        var replyLink = div.getElement('.reply a');
                        if(replyLink){
                            replyLink.addEvent('click', function(e) {
                                this.replyMessage(e);
                            }.bind(this));
                        }
                        
                        var delLink = div.getElement('.delete a');
                        delLink.addEvent('click', function(e) {
                            var tempArr = delLink.get('id').slice(1).split('_');
                            this.delMessage(e, tempArr[0]);
                        }.bind(this));
                        
                        if(parent.get('value')){
                            var nextDt = this.form.getParent('dt').getNext('dt');
                            if(nextDt){
                                replyEl = div.getElement('dd').inject(nextDt, 'before');
                            }else{
                                replyEl = div.getElement('dd');
                                this.container.getElement('dl').adopt(replyEl);
                                //div.getElement('dd').inject(this.form.getParent('dt'), 'after');
                            }
                        }else{
                            if(this.options.place == 'top'){
                                replyEl = div.getElement('dt').inject(this.container.getElement('dl'), 'top');
                            }else if(this.options.place == 'bottom'){
                                replyEl = div.getElement('dt');
                                this.container.getElement('dl').adopt(replyEl);
                            }
                        }
                        //scroll to 
                        if(replyEl){
                            new Fx.Scroll($(document.body)).toElement(replyEl);
                            replyEl.highlight();
                        }
                        
                        //reset form
                        this.resetForm();
                    }.bind(this),
                    
                    onFailure: function() {
                        sub_btn.set('disabled', false);
                    }
                }).post(this.form);
            }
        }.bind(this));
    },
    
    replyEvent: function() {
        this.container.getElements('.reply a').each(function(link) {
            link.addEvent('click', function(e) {
                this.replyMessage(e);
            }.bind(this));
        }, this);
    },
    
    replyMessage: function(e) {
        e.stop();
        var link = e.target;
        this.form.getElement('input[name=parent]').set('value', link.get('id').slice(1));
        this.form.getElement('textarea[name=content]').set('value', '');
        //alert(parentId);
        link.getParent('div.info').adopt(this.form.getParent());
    },
    
    delEvent: function() {
        this.container.getElements('.delete a').each(function(link) {
            var tempArr = link.get('id').slice(1).split('_');
            if(tempArr.length == 2 && (tempArr[1] == this.masterId || this.myself)){
                link.getParent().setStyle('display', 'block');
                
                link.addEvent('click', function(e) {
                    this.delMessage(e, tempArr[0]);
                }.bind(this));
            }else{
                link.getParent().setStyle('display', 'none');
            }
        }, this);
    },
    
    delMessage: function(e, id) {
        postUrl = this.delUrl || this.form.get('action');
        e.stop();
        var link = e.target;
        var tp = new TipLayer({'tpl': 'remove_info', 'data': {'type': '评论'}}, e, {
            postUrl: postUrl + 'delete/' + id + '/',
            onPosted: function(response) {
                if(response == 'true'){
                    if(link.getParent('dd')){
                        this.resetForm();
                        this.fadeOut(link.getParent('dd'));
                    }else{
                        /*
                            TODO improve refresh action
                        */
                        this.container.getElements('dd.' + link.getParent('dt').get('id')).each(function(dd) {
                            this.fadeOut(dd);
                        }, this);
                        this.fadeOut(link.getParent('dt'));
                    }
                }
            }.bind(this)
        });
    },
    
    fadeOut: function(el) {
        $(el).fade(0);
        (function() { el.destroy(); }).delay(500);
    }
});

var ChooseFace = new Class({
    Implements: [Options, Events],
    options: {
        faceId: 'live_face_list',
        chooseClass: '.choose_face'
    },
    
    initialize: function(options) {
        this.setOptions(options);
        this.choosedLink = false;
        this.textarea = false;
        this.ieBookmark = false;
        $$(this.options.chooseClass).each(function(link) {
            link.addEvent('click', function(e) {
                e.stop();
                this.showFace(e);
                this.choosedLink = link;
                this.textarea = this.choosedLink.getParent('form').getElement('textarea');
            }.bind(this));
        }, this);
    },
    
    buildFace: function() {
        var faceList = '';
        for(var i = 0, j = 30; i < j; i ++){
            faceList += new Template(ChooseFace.templete.get('single')).parse({ 'id': i + 1 });
        }
        var faceEl = new Element('div', {
            'html': new Template(ChooseFace.templete.get('base')).parse({ 'face_list': faceList }),
            'id': this.options.faceId,
            'class': this.options.faceId,
            'styles': {'display': 'none'}
        });
        $(document.body).adopt(faceEl);
        faceEl.getElements('li a').each(function(link) {
            link.addEvent('click', function(e) {
                e.stop();
                this.toTextArea(link);
                $(this.options.faceId).setStyle('display', 'none');
            }.bind(this));
        }, this);
        
        $(document.body).addEvent('click', function(e) {
            $(this.options.faceId).setStyle('display', 'none');
        }.bind(this));
    },
    
    showFace: function(eventSrc) {
        if(!$(this.options.faceId)){
            this.buildFace();
        }
        var position = $(eventSrc.target).getPosition();
        //console.log(position);
        $(this.options.faceId).setStyles({
            'display': 'block',
            'left': position.x,
            'top': position.y + 15
        });
    },
    
    toTextArea: function(link) {
         this.textarea.focus();
        if(document.selection){           
            var selText = document.selection.createRange();
            selText.text = '[xiu:' + link.get('id').slice(4) + ':]';
        }else{
            var startText = this.textarea.get('value').slice(0, this.textarea.selectionStart);
            var endText = this.textarea.get('value').slice(this.textarea.selectionEnd);
            this.textarea.set('value', startText + '[xiu:' + link.get('id').slice(4) + ':]' + endText);
        }
    }
});

ChooseFace.templete = new Hash({
    'base':
    '<div class="arrow_line"></div>' +
    '<ul class="clearfix">' +
    '%face_list%' +
    '</ul>',
    
    'single':
    '<li><a href="#" id="face%id%"><img src="/image/face/%id%.gif" /></a></li>'
});

var SimpleComment = new Class({
    Implements: [Options, Events],
    options: {
        wrapTag: 'li',
        baseUrl: '/share/comment/'
    },
    
    initialize: function(links, options) {
        this.setOptions(options);
        this.link = null;
        links.each(function(link) {
            this.showEvent(link);
        }, this);
    },
    
    showEvent: function(link) {
        link.addEvent('click', function(e) {
            e.stop();
            link.store('text', link.get('text'));
            link.set('text', '隐藏回复');
            link.removeEvents('click');
            this.hideEvent(link);
            //显示评论、表单
            this.buildReply(link);
        }.bind(this));
    },
    
    hideEvent: function(link) {
        link.addEvent('click', function(e) {
            e.stop();
            link.set('text', link.retrieve('text'));
            link.removeEvents('click');
            this.showEvent(link);
            try{
                link.getParent(this.options.wrapTag).getElement('.reply_entry').setStyle('display', 'none');
            }catch(e){}
        }.bind(this));
    },
    
    buildReply: function(link) {
        var entry = link.getParent(this.options.wrapTag);
        var cid = link.get('id').split('_')[1];
        var comment = entry.getElement('.reply_entry');
        if(comment){
            comment.setStyle('display', 'block');
            new Fx.Scroll($(document.body)).toElement(entry);
        }else{
            new Request({
                method: 'get',
                url: this.options.baseUrl + cid + '/',
                onSuccess: function(res) {
                    var replyEl = new Element('div', {
                        'class': 'reply_entry',
                        'html': res
                    });
                    entry.adopt(replyEl);
                    //event for reply and delete
                    this.replyEvent(entry);
                    replyEl.getElements('.delete a').each(function(delLink) {
                    	this.deleteEvent(delLink);
                    }, this);
                    
                    new Fx.Scroll($(document.body)).toElement(entry);
                }.bind(this)
            }).send();
        }
    },
    
    replyEvent: function(entry) {
        var form = entry.getElement('form');
        var fm = new FormCheck(form, {'msgPlace': 'parent_after'});
        
        form.set('send', {
            onSuccess: function(res) {
                /*
                    TODO adopt comment entry
                */
                form.getElement('button').set('disabled', false);
                var dd = new Element('dd', {
                    'class': 'clearfix',
                    'html': res
                });
                entry.getElement('dl').adopt(dd);
                new Fx.Scroll($(document.body)).toElement(dd);
                dd.highlight();
                //add delete event
                this.deleteEvent(dd.getElement('.delete a'));
                form.getElement('input[name=content]').set('value', '');
            }.bind(this)
        });
        
        form.addEvent('submit', function(e) {
            if(fm.submitForm(e)){
                e.stop();
                form.send();
                form.getElement('button').set('disabled', true);
            }
        });
    },
    
    deleteEvent: function(delLink) {
    	if(!delLink)return;
        delLink.addEvent('click', function(e) {
            e.stop();
            new TipLayer({'tpl': 'remove_info', 'data': {'type': '评论'}}, e, {
                postUrl: this.options.baseUrl + 'delete/' + delLink.get('id').slice('2').toInt() + '/',
                onPosted: function(res) {
                    if(res == 'true'){
                        this.fadeOut(delLink.getParent('dd'));
                    }
                }.bind(this)
            });
        }.bind(this));
    },
    
    fadeOut: function(el) {
        $(el).fade(0);
        (function() { el.destroy(); }).delay(500);
    }
});

SimpleComment.tpl = {
    'reply_form':
    '<form action="/share/comment/" method="post">'+
    '<div class="reply">'+
        '<span><input type="text" name="reply_content" class="field"/></span>'+
        '<span><button><b><i>回复</i></b></button></span>'+
    '</div>'+
    '</form>'
};