var page = null;

var WatchPage = new Class({
    initialize: function(currentVideoID,viewingUserID,commentsThresold)
    {
        this.currentVideoID = currentVideoID;
        this.viewingUserID = viewingUserID;
        this.commentsThresold = commentsThresold;
    }            
});

var Paginated = new Class({
    initialize: function(divPaginatedObjetsContainerID, method)
    {
        this.divPaginatedObjetsContainer = $(divPaginatedObjetsContainerID);
        this.method = method; 
    }            
}); 

var comments = null;
var addComment = null;
var addReply = null;

var AddComment = new Class(
{
    initialize: function(commentedEntity, txtNameCID, txtEmailCID, txtTextCID, txtCaptchaCID, imgSpinner, btnSubmitCID, divMsg, captchaID)
    {
        this.commentedEntity = JSON.decode(commentedEntity);
        this.txtName = $(txtNameCID);
        this.txtEmail = $(txtEmailCID);
        this.txtText = $(txtTextCID);
        this.txtCaptcha = $(txtCaptchaCID);
        this.spinner = $(imgSpinner);
        this.inProcess = false;
        this.http = null;
        this.msg = $(divMsg);
        this.captchaID = captchaID;        
        var btnSubmit = $(btnSubmitCID);
        
        if(this.commentedEntity.id == 0) //is reply
        {
            btnSubmit.addEvent('click', function(e){
	            e = new Event(e);	            
	            addReply.send(true);
	            e.stop();
	        });
        }
        else
        {
            btnSubmit.addEvent('click', function(e){
	            e = new Event(e);
	            addComment.send(false);
	            e.stop();
	        });
	    }
    },
    
    send: function(isReplay)
    {
    	this.msg.className = "text_3"; 
        if(this.inProcess)
        {
        	this.msg.addClass("text_blue");
            this.msg.innerHTML='Operation still in process.';
            return;
        }
        if(this.txtText.value == "")
        {
        	this.msg.addClass("text_red");
            this.msg.innerHTML='Please Enter a Comment.';
            return;
        }
        if(this.txtCaptcha.value == "")
        {
        	this.msg.addClass("text_red");
            this.msg.innerHTML='Please Enter Validation Code.';
            return;
        }
        
        this.inProcess = true;
        this.spinner.style.display = "";
        this.msg.className = "text_3 text_black"; 
        this.msg.innerHTML='Sending...';
        
        var commenterEmail = (this.txtEmail == null) ? '' : this.txtEmail.value;
        var commenterName = (this.txtName == null) ? '' : this.txtName.value;
        
        var commentText = encodeURIComponent(this.txtText.value);
        
        this.http = new Request({
	        method: 'post',
	        url: 'Handlers/CommentsHandler.ashx',
	        data: 'method=AddComment&commentedEntityID=' + this.commentedEntity.id.toString() + '&commenterName=' + commenterName + '&commenterEmail=' + commenterEmail + '&commentText=' + commentText + '&captchaCode=' + this.txtCaptcha.value + '&captchaID=' + this.captchaID + "&ownerID=" + this.commentedEntity.ownerID + "&isReplay=" + isReplay,
	        onSuccess: this.sendSucceeded.bind(this),
	        onFailure: this.sendFailed.bind(this)
    	    
        }).send();
    },    

    sendSucceeded: function() 
    {
        this.spinner.style.display = "none";
        var reply = JSON.decode(this.http.response.text);
        if (reply.success)
        {
            //Empty Comment and Captcha fields
            this.txtText.value = "";
            this.txtCaptcha.value = "";
            this.msg.className = "text_3 text_blue";
        }
        else 
        {
            this.msg.className = "text_3 text_red";            
        }
        this.inProcess = false;
        this.msg.innerHTML = reply.message;
    },

    sendFailed: function() 
    {
        this.msg.className = "text_3 text_red";
        this.inProcess = false;
        this.spinner.style.display = "none";
        this.msg.innerHTML='Comment was not added, problem contacting server';
    }
    
});


var Comments = new Class(
{
    initialize: function()
    {
        this.http = null;
        
        this.divReply = $('divReply');
    },
    
    reply: function(divCommentID, commentID, aReplyID, spanReplyMsgID)
    {   
        addReply.msg.innerHTML = "";
        if (this.spanReplyMsg)
        {
            this.spanReplyMsg.style.display = '';
            this.aReply.innerHTML = 'Reply';
            this.aReply.href = this.aReplyHref;
        }
        
        //Inject the "Reply to comment" control after the current comment.        
        this.divReply.injectAfter(divCommentID);
        //Display the Reply control.
        this.divReply.style.display = '';
        
        //Set the "Add Reply" control class parameters.
        addReply.commentedEntity.id = commentID;
        addReply.commentedEntity.type = 5;//comment
        
        //Save current reply link display.        
        this.spanReplyMsg = $(spanReplyMsgID);
        this.aReply = $(aReplyID);
        this.aReplyHref =$(aReplyID).href; 
        //Change the "Reply to this comment" link to "Close"
        $(spanReplyMsgID).style.display = 'none';
        $(aReplyID).innerHTML = 'Close';
        $(aReplyID).href = 'javascript:comments.cancelReply(\'' + divCommentID + '\',' + commentID + ',\'' + aReplyID + '\',\'' + spanReplyMsgID + '\');';        
    },
    
    cancelReply: function(divCommentID, commentID, aReplyID, spanReplyMsgID)
    {
        //Hide the "Add reply" control.
        this.divReply.style.display = 'none';
        //Restore the "Reply to this comment" link
        $(spanReplyMsgID).style.display = '';
        $(aReplyID).innerHTML = 'Reply';
        $(aReplyID).href = 'javascript:comments.reply(\'' + divCommentID + '\',' + commentID + ',\'' + aReplyID + '\',\'' + spanReplyMsgID + '\');';
    },
    
    viewReplies: function(commentID, commentDivCID, repliesAnchorCID , isVideoOwner)
    {
        this.repliedComment = $(commentDivCID);
        this.repliedCommentRepliesAnchor = $(repliesAnchorCID);
        this.repliedCommentID = commentID;
        this.isMVideoOwner = isVideoOwner;
        
        this.http = new Request({
            method: 'post',
            url: 'Handlers/CommentsHandler.ashx',
            data: 'method=GetComments&commentedEntityID=' + commentID,
            onSuccess: this.viewRepliesSucceeded.bind(this, isVideoOwner),
            onFailure: this.viewRepliesFailed.bind(this)
        }).send();    
    },
    
    viewRepliesSucceeded: function(isVideoOwner)
    {
        //Convert response to comments array.
        var replies = JSON.decode(this.http.response.text);
        
        //Create HTML comments and inject after replied comment div element.
        var repliesHTML = '';
        for ( i=0 ; i < replies.length ; i++)
        {
            repliesHTML = repliesHTML + '\n' + this.getOneReplyHtml(replies[i], isVideoOwner);
        }
            var reply = new Element('div', {});
            reply.id = 'divReplies' + this.repliedCommentID;
            reply.innerHTML = repliesHTML;
            reply.injectAfter(this.repliedComment);
        
        //Change "View replies" anchor text and href
        //this.viewRepliesHref = this.repliedCommentRepliesAnchor.href;
        //this.viewRepliesInnerHTML = this.repliedCommentRepliesAnchor.innerHTML;
        this.repliedCommentRepliesAnchor.href = 'javascript:comments.hideReplies(' + this.repliedCommentID + ',\'' +
                                                 this.repliedComment.id  + '\',\'' + 
                                                 this.repliedCommentRepliesAnchor.id + '\',\'' +
                                                 this.repliedCommentRepliesAnchor.innerHTML + '\',\''+ 
                                                 isVideoOwner + '\');';
                                                 
        this.repliedCommentRepliesAnchor.innerHTML = 'Hide replies';
    },
    
    viewRepliesFailed: function()
    {
    },
    
    hideReplies: function(commentID, divRepliedCommentID, aRepliesID, aRepliesText , isVideoOwner)
    {
        var divCID = 'divReplies' + commentID;
        var div = $(divCID);
        div.innerHTML = '';
        div.style.display = 'none';
        $(aRepliesID).href = 'javascript:comments.viewReplies(' + commentID + ', \'' + divRepliedCommentID +'\', \'' + aRepliesID +'\', \'' + isVideoOwner + '\');';
        $(aRepliesID).innerHTML = aRepliesText;
    },
    
    rate: function(commentID, cRate, divRateID, imgPlusID, imgMinusID, aPlusID, aMinusID)
    {
        this.cRate = cRate;
        this.divRate = $(divRateID);
        this.imgPlus = $(imgPlusID);
        this.imgMinus = $(imgMinusID);
        this.aPlus = $(aPlusID);
        this.aMinus = $(aMinusID);
        
        this.http = new Request({
	        method: 'post',
	        url: 'Handlers/CommentsHandler.ashx',
	        data: 'method=RateComment&id=' + commentID + '&rate=' + cRate ,
	        onSuccess: this.rateSucceeded.bind(this),
	        onFailure: this.rateFailed.bind(this)
    	    
        }).send();        
    },
    
    rateSucceeded :function()
    {
        var reply = JSON.decode(this.http.response.text);
        if (reply.success)
        {            
            newRate = parseInt(this.divRate.innerHTML) + this.cRate;
            
            if(newRate > 0)
            {
                this.divRate.innerHTML = '+' + newRate;
            }
            else
            {
                this.divRate.innerHTML = newRate;
            }
            
            this.imgPlus.src = this.imgPlus.src.replace('_on', '_off');
            this.imgMinus.src = this.imgMinus.src.replace('_on', '_off');
            
            this.aPlus.href = 'javascript:void(0);';            
            this.aPlus.style.cursor = 'default';
            
            this.aMinus.href = 'javascript:void(0);';
            this.aMinus.style.cursor = 'default';
        }
    },
    
    rateFailed :function()
    {
        
    },
    
    deleteComment : function(divMainComment , commentID)
    {
        if (confirm("Click OK if you want to delete this comment!"))
            this.http = new Request({
	            method: 'post',
	            url: 'Handlers/CommentsHandler.ashx',
	            data: 'method=DeleteComment&commentID=' + commentID,
	            onSuccess: this.delSucceeded.bind(this , divMainComment),
	            onFailure: this.delFailed.bind(this)
        	    
            }).send();  
    },
    
    delSucceeded : function(divMainComment)
    {
         var replies = JSON.decode(this.http.response.text);
         $(divMainComment).dispose();
        
    },
    
    delFailed : function(divMainComment)
    {
        
    },
    
    getOneReplyHtml: function(comment , isVideoOwner)
    {    
        
        var rateMinusHTML = '<a href="javascript:comments.rate(__commentID, -1,\'__0__divRate\',\'__0__imgPlus\',\'__0__imgMinus\',\'__0__aPlus\',\'__0__aMinus\');" id="__0__aMinus"><img id="__0__imgMinus" src="__minusImageSrc" alt="" style="border-width:0px;padding-left:7px;" /></a>\n';
        var ratePlusHTML = '<a href="javascript:comments.rate(__commentID, 1,\'__0__divRate\',\'__0__imgPlus\',\'__0__imgMinus\',\'__0__aPlus\',\'__0__aMinus\');" id="__0__aPlus"><img id="__0__imgPlus" src="__plusImageSrc" alt="" style="border-width:0px;padding-left:5px;padding-right:3px;" /></a>\n';
        
        var deleteComment = (isVideoOwner == 'true') ? 
        '<a href="javascript:comments.deleteComment(\'__0__divMainComment\' ,\'__commentID\');" class="lnkInner">Delete</a> this comment' : '';
        
        
        if (comment.viewerRate != 0)
        {
            rateMinusHTML = '<img id="__0__imgMinus" src="__minusImageSrc" alt="" style="border-width:0px;padding-left:7px;" />\n';
            ratePlusHTML = '<img id="__0__imgPlus" src="__plusImageSrc" alt="" style="border-width:0px;padding-left:5px;padding-right:3px;" />\n';
        }
        
        var oneCommentHtmlTemplate = 
            '<div id="__0__divMainComment" style="padding-left:30px">\n' + 
                '<div class="text_2" style="padding-top:5px;">\n' +
                    '<div style="float:left">By:&nbsp;</div><div id="__0__divCreatorText" style="float:left">__nameHTML</div>\n' +
                    '<div id="__0__divAgoText" style="float:left; padding-left:20px;">__agoHTML</div>\n' +
                    '<div style="float:right; padding-top:1px;">\n' +
                         rateMinusHTML +
                         ratePlusHTML +
                    '</div>\n' +
                    '<div id="__0__divRate" style="float:right;">__divRateHTML</div>\n' +
                '</div>\n' +
                '<div style="clear:both;padding-bottom:5px;"></div>\n' +
                '<div class="text_3" id="divComment" style="float:left; padding-bottom:5px; margin-bottom:5px; border-top:solid 1px #d8cba8; border-bottom: solid 1px #d8cba8"; >\n' +
                    '<div style="float:left; padding-top:5px;">\n' +
                    '__imgAnchorOpen'+
                        '<img id="__0__imgCommenter" src="__imgCommenterSrc" alt="" style="height:71px;width:96px;border-width:0px;" />\n' +
                    '__imgAnchorClose'+
                    '</div>\n' +
                    '<div style="min-height:71px; position:relative; float:left; padding-top:5px; padding-left:10px;width:320px;">\n' +
                        '<div id="__0__divText" style="width:305px; padding-bottom:15px;">__commentTextHTML</div>\n' +
                        '<div style="float:right;">\n' + 
                        deleteComment +
                        '</div>' +
                    '</div>\n' +
                '</div>\n' +
            '</div>\n' +
            '<div style="clear:both;"></div>\n';

        oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__0__/g,comment.id);
        oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__commentID/g,comment.id);
        
        oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__plusImageSrc/g,comment.plusSignImageUrl);
        oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__minusImageSrc/g,comment.minusSignImageUrl);
        oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__imgCommenterSrc/g,comment.imageUrl);

        oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__nameHTML/g,comment.name);
        oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__commentTextHTML/g,comment.text);
        oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__divRateHTML/g,comment.rate);
        oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__agoHTML/g,comment.addedAgo);
        
        if(comment.studioURL != '')
        {
            oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__imgAnchorOpen/g,'<a href='+comment.studioURL+'>');
            oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__imgAnchorClose/g,'</a>');
        }
        else
        {
            oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__imgAnchorOpen/g,'');
            oneCommentHtmlTemplate = oneCommentHtmlTemplate.replace(/__imgAnchorClose/g,'');
        }
        
       
        return oneCommentHtmlTemplate;
    }           
});