/*
 * Given a parent <div>, MyHugsDiv
 * creates a container and display a list of kisses that
 * the user has received.
 */ 
function MyHugsDiv(a_parentDiv) {
    var m_parentDiv = a_parentDiv;
    var m_containerDiv = undefined;
    var m_hugsArray = new Array();

    if (isValid(m_parentDiv)) {
        createDiv(m_parentDiv);
    }

    function createDiv(_a_parentDiv) {
        m_parentDiv = _a_parentDiv;

        m_containerDiv = document.createElement("div");
        m_parentDiv.appendChild(m_containerDiv);
        m_containerDiv.style.textAlign = "center";
        m_containerDiv.innerHTML = "<br><font color='red'><b>[Loading Kisses... Please wait.]</b></font>";

        makeXMLNotCachedRequest(REQUEST_DESTINATION_URL + "/getmyhugs?to_user_id=" +
                                MAIN_DATA.getViewer().getUserId(), onLoadMyKisses);
    }

    function onLoadMyKisses(response) {
        var xmlDoc = getGadgetResponseData(response);
        if (!isValid(xmlDoc)) {
            return;
        }

        var hugs = undefined;
        try {
            hugs = xmlDoc.getElementsByTagName("hugmehugs");
        } catch(err) {
            outputDebug("Hugs: " + err);
        }

        if (hugs == undefined || hugs.length == 0) {
            m_containerDiv.innerHTML = "<div class='messageBox'> Sorry, you don't have any kisses yet! </div>";
            return;
        }

        outputDebug("num hugs: " + hugs.length);

        m_containerDiv.innerHTML = "";
        var l_hugsListTable = document.createElement("table");
        m_containerDiv.appendChild(l_hugsListTable);
        l_hugsListTable.style.marginLeft = "auto";
        l_hugsListTable.style.marginRight = "auto";
        l_hugsListTable.style.cellSpacing = "0px";
        l_hugsListTable.style.borderCollapse = "collapse";
        var l_hugsListTableBody = document.createElement("tbody");
        l_hugsListTable.appendChild(l_hugsListTableBody);

        for (var messageId = 0; messageId < hugs.length; messageId++) {
            l_hugsListTableBody.appendChild(createKissTr(hugs[messageId], messageId));
        }
    }

    function createKissTr(a_kissNode, a_kissId) {
        var l_tr = document.createElement("tr");
        var l_td = document.createElement("td");
        l_tr.appendChild(l_td);

        var l_senderName = decodeURIComponent(getXMLNodeValue(a_kissNode, "from_user_name"));
        var l_sentOn = getXMLNodeValue(a_kissNode, "sent_on");
        var l_senderThumbnailUrl = getXMLNodeValue(a_kissNode, "from_user_profile");
        var l_senderId = getXMLNodeValue(a_kissNode, "from_user_id");

        var l_ssCells = new SideBySideCells(l_td);


        var l_imgCell = l_ssCells.getLeftCell();
        var userImageDiv = new ImageDiv(l_imgCell, l_senderThumbnailUrl, "80px", "80px");        
        //Set overflow style to visible
        userImageDiv.getContainerDiv().style.overflow = "visible";

        var l_infoCell = l_ssCells.getRightCell();

        var l_infoDiv = document.createElement("div");
        l_infoCell.appendChild(l_infoDiv);
        l_infoDiv.innerHTML = l_senderName + " kissed you on " + l_sentOn;

        var l_respondResultDiv = document.createElement("div");
        l_infoCell.appendChild(l_respondResultDiv);
        l_respondResultDiv.style.display = "none";

        var l_respondButtonDIv = document.createElement("div");
        l_infoCell.appendChild(l_respondButtonDIv);
        l_respondButtonDIv.style.padding = "10px";
        l_respondButtonDIv.style.width = "200px";
        new DivButton(l_respondButtonDIv, "Send A Kiss Back!", function() {  //  <br> And send comment
            l_respondResultDiv.style.display = "block";
            l_respondResultDiv.innerHTML = "Sending kiss...";
            //var l_sendMessage = "<a href='" + APP_URL + "'><img src='http://cdn0.supercomment.com/kissme/images/kissme/kissmeDirectory.png'></a><br/><br/>I just kissed you.<br/><a href='" + APP_URL + " '>Click here to kiss me back!</a>";
            //sendCommentWOGoToPageTop(MAIN_DATA.getViewer(), l_sendMessage, undefined);

            var l_params = {};
            l_params.network = "myspace";
            l_params.to_user_id = l_senderId;
            l_params.from_user_id = MAIN_DATA.getViewer().getUserId();
            l_params.from_user_name = encodeURIComponent(MAIN_DATA.getViewer().getDisplayName());
            l_params.from_user_profile = MAIN_DATA.getViewer().getThumbnailUrl();

            makeXMLNotCachedRequest(REQUEST_DESTINATION_URL + "/sendmessage", function() {
                startKissAnim(userImageDiv.getContainerDiv());
                l_respondResultDiv.innerHTML = "Kiss Sent.";
            }, l_params);
        });

        return l_tr;
    }
}

function linear(start, finish, percent){
    return start * percent + finish * (1 - percent); 
}

/**
 * Given a html element, attach
 * a kiss img to it and start the kiss animation
 */
function startKissAnim(pic_div) {
    if (!isValid(pic_div))
        return;

    var kissImg = pic_div.kissImg;
    //Create kissImg if it does not exist
    if (!isValid(kissImg)) {
        kissImg = document.createElement("img");
        kissImg.src = IMAGE_SOURCE_URL + "/kissme/kissmeOverlay.gif";
        kissImg.style.position = "relative";
        kissImg.style.border = "none";
        kissImg.style.left = 20;
        kissImg.style.top = 0;
        pic_div.appendChild(kissImg);
        
        //Keep track of the child element
        pic_div.kissImg = kissImg;
    }

    kissImg.style.width = linear(116, 26, 8.0 / 20.0); //116;   --> 26
    kissImg.style.height = linear(89, 20, 8.0 / 20.0); //89;   --> 20
    kissImg.style.opacity = 0;
    
    setTimeout(function() { kissAnimFrame(kissImg, 4, 10) }, 50);
}

function kissAnimFrame(kissImg, frame, totalFrame){
    frame--;
    if(frame <= 0) {
        return;
    }
    
    kissImg.style.width = linear(116, 26, frame / totalFrame);
    kissImg.style.height = linear(89, 20, frame / totalFrame); 
    kissImg.style.opacity = (totalFrame - frame) / totalFrame;
    
    setTimeout(function(){ kissAnimFrame(kissImg, frame, totalFrame) }, 50);
}