/// <reference path="../jQuery/jquery-1.3.2.js" />

MasterTimelineRenderer = function(parentDivID) {
    this.init(parentDivID);
}

$.extend(MasterTimelineRenderer.prototype,
{
    // object variables
    m_parentDivID: null,
    m_myDivID: "",
    m_gStrMe: "",

    m_objRenderer: new Array(),

    // Page
    m_pageNumber: 1,
    m_itemPerPage: 18,

    init: function (parentDivID) {
        // Push me to object tracker
        var iIndex = AddObjectToTracker(this) - 1;
        this.m_gStrMe = "g_ObjectTracker[" + iIndex + "]";

        this.m_parentDivID = parentDivID;
        this.m_myDivID = parentDivID + "_MasterTimelineRenderer";
        this.m_drawSectionDiv = this.m_myDivID + "_drawSection";

        // My main div
        $("#" + this.m_parentDivID).append("<div id='" + this.m_myDivID + "'></div>");

        // Message display section
        $("#" + this.m_myDivID).append("<div id='" + this.m_drawSectionDiv + "'></div>");

        this.loadTimeline();
    },
    loadTimeline: function () {
        AppendLoadingProgress(this.m_myDivID);

        // Draw message
        var jData = new Object();
        jData.pageNumber = this.m_pageNumber;
        jData.itemPerPage = this.m_itemPerPage;
        SendAjaxFromClass(GetURL("MyHome/WebService/TimelineWebService.asmx") + "/GetMasterTimeline", jData,
          this, this.onGetTimelineComplete);
    },
    loadMoreTimeline: function () {
        this.m_pageNumber++;
        this.loadTimeline();
    },
    hideDivIfNoResult: function (divID) {
        this.hideDivIfNoResultDivID = divID;
    },
    onGetTimelineComplete: function (data) {
        //alert(data.result.pageCount);
        RemoveLoadingProgress(this.m_myDivID);

        if (null == data.result || 0 == data.result.itemList.length) {
            $("#" + this.hideDivIfNoResultDivID).hide();
            return;
        }

        // Hide "more" button
        if (undefined != this.hideDivIfNoResultDivID && this.m_pageNumber >= data.result.pageCount) {
            $("#" + this.hideDivIfNoResultDivID).hide();
        }

        //alert(JSON.stringify(data));
        // Loop each message and pass to renderer
        for (var iData = 0; iData < data.result.itemList.length; iData++) {
            this.renderTimeline(data.result.itemList[iData]);
            //for (var iObj = 0; iObj < this.m_objRenderer.length; iObj++) {
            // If return 0 mean object has been render
            //if (0 == this.m_objRenderer[iObj].RenderMessage(data.result[iData])) break;
            //}
        }

        $("#" + this.m_myDivID + " img.thumb190Scale").each(function () {
            //alert("a");
            $(this).cjObjectScaler({
                destElem: $(this).parent().parent(),
                method: "fill"
            });
        });
    },
    renderTimeline: function (masterTimeline) {
        var txtHTML = "";
        var strPlaceName = "<a href='" + GetURL(masterTimeline.strPlaceURL) + "'>" + masterTimeline.strPlaceName + "</a>";
        var strProvinceName = masterTimeline.strPlaceProvince;
        var strAvatarURL = masterTimeline.strAvatarURL;
        var strAvtivityClass = masterTimeline.strAvtivityClass;
        var strActivityURL = masterTimeline.strActivityURL;
        var strThumbnailClass = masterTimeline.strThumbnailClass;
        var userHTML = "<a href='" + GetURL(masterTimeline.userHomeURL) + "'>" + masterTimeline.userDisplayName + "</a>";

        txtHTML += "<div class='container_thumbnail'>";
        txtHTML += "    <div class='bg_thumbnail'>";
        txtHTML += "        <div class='thumbnail'>";

        txtHTML += "            <div class='frame_activity " + strAvtivityClass + "'></div>";
        txtHTML += "            <a href='" + GetURL(masterTimeline.strPlaceURL) + "'><img src='" + strActivityURL + "' class='scale thumb190Scale'/></a>";

        txtHTML += "        </div>";
        txtHTML += "        <div>";
        txtHTML += "            <div class='frame_thumbnail_content'>";
        txtHTML += "                <div class='" + strThumbnailClass + "'></div>";
        txtHTML += "                <span class='text_content'>" + strPlaceName;
        txtHTML += "                    <div class='text_content_province'>" + strProvinceName + "</div>";
        txtHTML += "                </span>";
        txtHTML += "            </div>";
        txtHTML += "        </div>";
        txtHTML += "    </div>";
        txtHTML += "    <span class='frame_thumbnail_user'>";
        txtHTML += "        <span class='thumbnail_user'>";
        txtHTML += "            <a href='" + GetURL(masterTimeline.userHomeURL) + "'><img src='" + strAvatarURL + "' class='scale'/></a>";
        txtHTML += "        </span>";

        // Adding different layout if last activity user not same as creater
        if (masterTimeline.PlaceOwnerAccountID != masterTimeline.PlaceActivityAccountID) {
            txtHTML += "        <span class='thumbnail_user'>";
            txtHTML += "            <a href='" + GetURL(masterTimeline.PlaceOwnerHomeURL) + "'><img src='" + masterTimeline.PlaceOwnerAvatarURL + "' class='scale'/></a>";
            txtHTML += "        </span>";

            userHTML = "<a href='" + GetURL(masterTimeline.userHomeURL) + "'>" + masterTimeline.userDisplayName + "</a> for <a href='" + GetURL(masterTimeline.PlaceOwnerHomeURL) + "'>" + masterTimeline.PlaceOwnerName + "</a>";
            txtHTML += "           <span class='text_user_default'>" + userHTML + "</span>";
            txtHTML += "           <div class='text_date_default' style='padding-left:70px;'>" + masterTimeline.updateDate + "</div>";
        }
        else {
            txtHTML += "           <span class='text_user_default'>" + userHTML + "</span>";
            txtHTML += "           <div class='text_date_default'>" + masterTimeline.updateDate + "</div>";
        }


        txtHTML += "    </span>";
        txtHTML += "</div>";

        $("#" + this.m_drawSectionDiv).append(txtHTML);
    },
    toString: function () {
        return 'MasterTimelineRenderer';
    }
});