if (typeof (window.ceemeagain) == "undefined") window.ceemeagain = new Object();
if (typeof (ceemeagain.behindtheceen) == "undefined") {
    ceemeagain.behindtheceen = {
        viewallcomment: false,
        comment: {
            itemArr: new Array(),
            generate: function(item) {

                var html = "<div>&nbsp;</div>";
                html += '<div class="BehindTheCeeComment">';
                html += '<div class="hint-pointer">&nbsp;</div>';

                html += '<div class="avatar">' + item.avatar + '</div>';
                html += '<div class="name">' + item.commentby + '</div>';
                html += '<div class="date">' + item.createdate + '</div>';
                html += '<div class="content">' + item.comment;
                if (item.candelete)
                    html += '<span class="control"><a href="javascript:ceemeagain.behindtheceen.deletecomment(' + item.id + ');">Delete this comment?</a></span>';
                html += '</div>';
                html += '</div>';

                return html;
            },
            showcomment: function(pageid) {
                var html = "";
                for (var i = 0; i < this.itemArr.length; i++) {
                    if (this.itemArr[i].pageid != pageid) continue;
                    html += this.generate(this.itemArr[i]);
                }
                html += "<div>&nbsp;</div>";
                $("#comment").html(html);
                $('#comment .avatar48x48,.avatar75x75,.avatar154x115').unbind("mouseover").mouseover(function() {
                    $('.social-link', this).show();
                }).unbind("mouseout").mouseout(function() {
                    $('.social-link', this).hide();
                });
            },
            viewallcomment: function() {
                $("#comment").unblock().block({ message: '<div style="text-align:center;"><img src="/Content/im/ico/loading_wh.gif" alt="Loading" title="Loading" /></div>' });
                ceemeagain.behindtheceen.viewallcomment = true;
                var html = "";
                for (var i = 0; i < this.itemArr.length; i++) {
                    html += this.generate(this.itemArr[i]);
                }
                html += "<div>&nbsp;</div>";

                setTimeout(function() {
                    $("#comment").unblock();
                    $("#comment").html(html);
                    $('#comment .avatar48x48,.avatar75x75,.avatar154x115').unbind("mouseover").mouseover(function() {
                        $('.social-link', this).show();
                    }).unbind("mouseout").mouseout(function() {
                        $('.social-link', this).hide();
                    });
                }, 200);
            }
        },
        deletecomment: function(commentid) {
            if (confirm("Do you want to delete this comment?")) {
                setTimeout(function() {
                    $("#comment").unblock().block({ message: '<div style="text-align:center;"><img src="/Content/im/ico/loading_wh.gif" alt="Loading" title="Loading" /></div>', css: { border: "10px solid #EEE", padding: "5px"} });
                    $.post("/Comic/DeleteComment", { commentid: commentid, cache: false }, function(data) {
                        if (data.iserror) {
                            alert(data.message);
                        } else {
                            ceemeagain.behindtheceen.comment.itemArr = data.data;
                            if (ceemeagain.behindtheceen.viewallcomment) {
                                ceemeagain.behindtheceen.comment.viewallcomment();
                            } else {
                                ceemeagain.behindtheceen.comment.showcomment(ceemeagain.behindtheceen.currentId);
                            }

                        }
                        $("#comment").unblock();
                    }, "json");
                }, 100);
            }
        },
        generatetag: function(tag) {
            var html = '';
            html += '<div class="tagged">';
            html += '<div id="tagid:' + tag.TagId + '">';
            html += '<div style="display: none;">';
            html += 'x:' + tag.PosX + ';y:' + tag.PosY + '</div>';
            html += '<div class="im_tag">';
            html += '<img src="' + tag.Image + '" alt="Tagged Image" title="Tagged Image" /></div>';
            html += '<div class="detail">';
            html += '<div class="message">' + tag.Message + '</div>';
            html += '<div class="date">tagged date: ' + tag.TagDate + '</div>';
            html += '<div>';
            html += '<div class="name">By <span style="text-decoration:underline;">' + tag.Name + '</span></div>';
            if (tag.candelete)
                html += '<div class="command"><a href="javascript:;" onclick="ceemeagain.behindtheceen.deletetag(' + tag.TagId + ');">Delete this?</a></div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            return html;
        },
        settagEvent: function() {
            $('li[id=' + ceemeagain.behindtheceen.currentId + '] .tagged')
            .unbind('mouseover').unbind('mouseout').mouseover(function() {
                $(this).css("cursor", "pointer");
                var name = $(".name", this).text();
                var message = $(".message", this).text();
                var im = $('.im_tag img', this).attr("src").replace('48x48', '75x75');
                var html = "";
                html += '<div><span style="color:#FF0099;">' + name + '</span></div>';
                html += '<div style="padding:2px;color:#333;">' + message + '</div>';

                var data = $("div:hidden", this).text();
                var dd = data.split(';');

                var x = parseInt(dd[0].replace('x:', '')) - 10;
                var y = parseInt(dd[1].replace('y:', '')) - 10;


                $("#" + ceemeagain.behindtheceen.currentId.toString()).find("img.img_tag").each(function() {
                    var $img = $(this).offset();
                    x = x + $img.left;
                    y = y + $img.top;

                });

                $("#tagShowed .tag_message").html(html);
                $("#tagShowed .tag_image").css({ 'background': 'url(' + im + ') no-repeat 0 0 #EEE' });
                $("#tagShowed").show()
                .css({ position: 'absolute', top: y, left: x, zIndex: 400 });
            })
           .mouseout(function() {
               $("#tagShowed").hide();
           });
        },
        deletetag: function(tagid) {
            if (confirm("Do you want to delete this tag?")) {
                setTimeout(function() {
                    $.blockUI({ message: '<div style="text-align:center;"><img src="/Content/im/ico/loading_wh.gif" alt="Loading" title="Loading" /></div>' });
                    $.post("/Comic/DeleteTag", { tagid: tagid, cache: false }, function(data) {
                        if (data.iserror) {
                            alert(data.message);
                        } else {

                            var html = '';
                            for (var i = 0; i < data.data.length; i++) {
                                var tag = data.data[i];
                                html += ceemeagain.behindtheceen.generatetag(tag);
                            }

                            $('li#' + ceemeagain.behindtheceen.currentId + ' div.page-tags').html(html);
                            ceemeagain.behindtheceen.settagEvent();
                        }
                        $.unblockUI();
                    }, "json");
                }, 100);
            }
        },
        postcomment: function(name, comment) {


            name = $.trim(name);
            comment = $.trim(comment);

            if (comment.length == 0) {
                alert("Ooops! Please enter your message.");
                return false;
            }

            setTimeout(function() {
                $.blockUI({ message: '<div style="text-align:center;"><img src="/Content/im/ico/loading_wh.gif" alt="Loading" title="Loading" /></div>' });
                $.post("/Comic/PostComment", { pageid: ceemeagain.behindtheceen.currentId
                                           , name: name
                                           , comment: comment
                                           , cache: false
                }, function(data) {
                    if (data.iserror) {
                        alert(data.message);
                    } else {

                        ceemeagain.behindtheceen.comment.itemArr = data.data;
                        if (ceemeagain.behindtheceen.viewallcomment) {
                            ceemeagain.behindtheceen.comment.viewallcomment();
                        } else {
                            ceemeagain.behindtheceen.comment.showcomment(ceemeagain.behindtheceen.currentId);
                        }

                    }
                    $.unblockUI();
                }, "json");
            }, 100);
            return true;
        },
        posX: 0,
        posY: 0,
        currentPage: 1,
        currentId: 001,
        tagPhoto: function() {
            var container = $("#" + ceemeagain.behindtheceen.currentId.toString());


            var name = "";
            var message = "";

            $("#divTagPhoto").find("input.name span").each(function() {
                name = $(this).val();
            });
            $("#divTagPhoto").find("input.message").each(function() {
                message = $(this).val();
            });

            $.blockUI({ message: '<div style="text-align:center;"><img src="/Content/im/ico/loading_wh.gif" alt="Loading" title="Loading" /></div>' });
            $.post("/Comic/Tag", { id: ceemeagain.behindtheceen.currentId, x: ceemeagain.behindtheceen.posX, y: ceemeagain.behindtheceen.posY, name: name, message: message }, function(data) {
                if (data.iserror) {
                    alert(data.message);
                } else {
                    alert("Thank you for your tag!");

                    $("#divTagPhoto").find("input.name").each(function() {
                        $(this).val('');
                    });
                    $("#divTagPhoto").find("input.message").each(function() {
                        $(this).val('');
                    });
                    var html = '';
                    for (var i = 0; i < data.data.length; i++) {
                        var tag = data.data[i];
                        html += ceemeagain.behindtheceen.generatetag(tag);
                    }

                    $('li#' + ceemeagain.behindtheceen.currentId + ' div.page-tags').html(html);
                    ceemeagain.behindtheceen.settagEvent();
                }
                $("#divTagPhoto").hide().draggable('destroy');
                $.unblockUI();
            }, "json");
        }
    };
}