/* Cblock cares about storing info and comments for given block */
/* Commentable handles all other routines such as creating list of blocks */

Commentable = function(){
        /* private variables */
        var cb, blocks, tpl, cn, tabs, wait, list, vlist, error, submit, postBtn;
        var cmResize, viewResize;
        var posting = false;
        var currentIndex, lastIndex;
        
        /* private functions */
        var isOnCommentBar = function(e){
            var x = cb.getX();
            return(e.getPageX() >= x && e.getPageX() <= (x+30));
        };
        
        var setActiveIndex = function(index){
            index = index || 0;
            if(typeof currentIndex != 'undefined'){
                blocks[currentIndex].el.removeClass('active-content');
            }
            currentIndex = index;
            blocks[currentIndex].el.addClass('active-content');
        };
        
        var onClick = function(e){
            if(isOnCommentBar(e)){
                var p = Ext.get(e.getTarget());
                var p = Ext.get(e.getTarget());
                if(p.contentIndex >= 0){
                    e.stopEvent();
                    setActiveIndex(p.contentIndex);
                    Commentable.addComment();
                }
            }
        };
        
        var cancelSelection = function(e){
            if(isOnCommentBar(e)){
                e.preventDefault();
            }
        };
        
        var afterSuccess = function(el){
            blocks[currentIndex].addComment(el);
        }
        
        var commentSuccess = function(o){
            posting = false;
            var text = o.responseText;
            // if we got a comment block back
            if(text.substr(0, 3) == '<li'){
                var el = list.insertHtml('beforeEnd', text);
                wait.removeClass('active-msg');
                cn.hide(afterSuccess.createCallback(el));
            }else{
                Ext.get('post-error-msg').update(text);
                error.radioClass('active-msg');
            }
        };
        
        var commentFailure = function(o){
            posting = false;
            var msg = Ext.get('post-error-msg');
            msg.update('Error: Unable to connect.');
            error.radioClass('active-msg');
        };
        
        var loadComments = function(index){
            if(blocks){
                block = blocks[index];
                vlist.innerHTML = '';
                for(var i = 0, len = block.count; i < len; i++){
                    vlist.appendChild(block.comments[i].cloneNode(true));
                }
                vlist.parentNode.scrollTop = 0;
                tabs.getTab('cview-tab').setText('Block Comments ('+block.count+')');
            }
        };
        
        var listClick = function(e){
            var t = e.getTarget(".csel");
            if(t){
                var index = t.getAttribute('contentIndex');
                setActiveIndex(index);
                Commentable.scrollIntoView(document.getElementById('content'), blocks[currentIndex].el);
                loadComments(currentIndex);
            }
        };
        
        /* public functions */
        return {
            init : function(){
                wait = Ext.get('posting-wait');
                error = Ext.get('post-error');
                submit = Ext.get('comment-submit');
                vlist = document.getElementById('comment-view-list');
                cb = Ext.get('content');
                cb.addClass('comments-enabled');
                cb.addClass('cnt');
                cb.on({
                    'click' : {
                        fn: onClick,
                        scope: this
                       
                    }, 
                    'mousedown' : {
                        fn: cancelSelection,
                        scope: this
                    },
                    'selectstart' : {
                        fn: cancelSelection,
                        scope: this
                    }
                });

                blocks = [];
                var paras  = Ext.DomQuery.select('*.x-comentable-block');
                var bindex = -1;
                for(var i = 0, len = paras.length; i < len; i++){
                    //if(paras[i].className == 'content' || paras[i].className == 'content content-title'){
                        blocks[++bindex] = new CBlock(Ext.get(paras[i]), bindex);
                    //}
                }
                
                list = Ext.get('comment-items');
                list.on('click', listClick, list);
                var items = list.dom.getElementsByTagName('li');
                for(var i = 0, len = items.length; i < len; i++){
    				var block = blocks[items[i].getAttribute('contentIndex')];
                    if(block){
    					block.addComment(items[i]);
    				}
                }
                this.initCn.defer(100, this);       
            },
            
            isOpen : function(){
                return cn && cn.isVisible();    
            },
            
            addComment : function(){
                var block = blocks[currentIndex || 0];
                this.showComments(block, 'cform-tab');
            },
            
            addGeneralComment : function(){
                if(!blocks) return; // still initializing
                setActiveIndex(0);
                this.addComment();  
            },
            
            showHelp : function(){
                if(!blocks) return; // still initializing
                setActiveIndex(0);
                this.showComments(blocks[0], 'chelp-tab'); 
            },
            
            submitComment : function(){
                if(posting) return;
                var f = document.getElementById('commentform');
                wait.radioClass('active-msg');          
                posting = true;
                Ext.lib.Ajax.formRequest(f,'http://www.openrightsgroup.org/consult/wp-comments-post.php',{success: commentSuccess, failure: commentFailure});
            },
            
            closeComment : function(){
                wait.removeClass('active-msg');
                error.removeClass('active-msg');
                cn.hide();
            },
            
            showAllComments : function(){
                if(!blocks)return; // still initializing
                setActiveIndex(0);
                this.showComments(blocks[0], 'call-tab');  
            },
            
            commentMarkClick : function(block){
                if(block.index == currentIndex && cn.isVisible()){
                    this.closeComment();
                }else{
                    this.showComments(block);
                } 
            },
            
            initCn : function(){
                if(!cn){
                    cn = new Ext.BasicDialog("comment-cn", { 
                            width:600,
                            height:450,
                            shadow:true,
                            minWidth:500,
                            minHeight:350,
                            autoTabs:true,
                            autoScroll:false,
                            tabTag: 'dt',
                            proxyDrag:true,
                            shim:true
                    });
                    // override the proxy anims to animate the the comment bar
                    cn.animShow = function(){
                        var xy = Ext.get(this.animateTarget).getXY();
                        this.proxy.setSize(20, 20);
                        this.proxy.setXY(xy);
                        this.proxy.show();
                        this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height, 
                                        true, .35, this.showEl.createDelegate(this));
                    };
                    cn.animHide = function(callback){
                        var xy = Ext.get(this.animateTarget).getXY();
                        this.proxy.show();
                        this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
                        this.el.hide();
                        this.proxy.setBounds(xy[0], xy[1], 20, 20, true, .35, 
                                    this.hideEl.createDelegate(this, [callback]));
                    }
                    cn.on('hide', function(){
                        var block = blocks[currentIndex];
                        if(block){
                            block.el.removeClass('active-content');
                        }
                    });
                    var cmt = Ext.get('comment');
                    cn.on('resize', function(bd, w, h){
                        cmt.setSize(w-50,h-260);
                    });
                    cn.restoreState();
                    cmt.setSize(cn.size.width-50, cn.size.height-260);
                    tabs = cn.getTabs();
                    postBtn = cn.addButton('Post It!', this.submitComment, this);
                    cn.addKeyListener(27, cn.hide, cn);
                    cn.setDefaultButton(cn.addButton('Close', cn.hide, cn));
                    tabs.on('tabchange', function(tp, tab){
                        postBtn.el.setStyle('visibility', tab.id == 'cform-tab' ? 'visible' : 'hidden');
                    });
                }
            },
            
            showComments : function(block, tab){
                setActiveIndex(block.index);
                this.initCn();
                tabs.activate(tab || 'cview-tab');
                tabs.getTab('call-tab').setText('All Comments ('+list.dom.childNodes.length+')');
                var f = document.getElementById('commentform');
                f.elements['contentIndex'].value = currentIndex;
                f.elements['comment'].value = '';
                loadComments(block.index);
                list.dom.parentNode.scrollTop = 0;
                cn.show(block.el);
            },
            
            scrollIntoView : function(container, child){
                var childTop = parseInt(child.offsetTop, 10);
                var childBottom = childTop + child.offsetHeight;
                var containerTop = parseInt(container.scrollTop, 10); // parseInt for safari bug
                var containerBottom = containerTop + container.clientHeight;
                if(childTop < containerTop){
                	container.scrollTop = childTop;
                }else if(childBottom > containerBottom){
                    container.scrollTop = childBottom-container.clientHeight;
                }
            }
        };
    }();
    
    
    CBlock = function(el, index){
        this.el = el;
        el.contentIndex = index;
        el.set({contentIndex : index});
        this.index = index;
        this.count = 0;
    };
    
    CBlock.prototype = {
        addComment : function(commentItem){
            if(!this.comments){
                this.comments = [];
            }
            this.comments.push(commentItem);
            this.count++;
            this.updateMark();
        },
        
        updateMark : function(){
            if(this.mark == null){
                this.markTpl = new Ext.Template(
					   '<span class="comment-mark" id="mark-{contentIndex}" contentIndex="{contentIndex}" title="{markTitle}">' +
				       '<span class="comment-mark-text">{commentsNo}</span></span>');
                this.mark = Ext.get(this.markTpl.append(this.el, 
                                            {contentIndex: this.index,
                                             commentsNo: this.count, 
                                             markTitle: (this.count == 1 ? '1 comment' : this.count + ' comments')}));
                                             
                this.mark.on('click', this.onClick, this, {stopEvent: true});
            } else {
                this.mark.dom.firstChild.innerHTML = this.count;
                this.mark.dom.title = this.count == 1 ? '1 comment' : this.count + ' comments'; 
            }
        },
        
        getXY : function(){
            return this.el.getXY();
        },
        
        onClick : function(e){
            this.mark.setOpacity(.5);
            Commentable.commentMarkClick(this);
        }
    };