/**
 * @constructor
 * @desc Popup Balloon Widget. 
 */    
 
/**@constructor
 * @desc Provides a standard balloon popup. 
 *
 * @example
 * popupBalloon = new cnp.widget.popupBalloon()
 *               .setWidth(190)
 *               .setHeight(105)
 *               .setOffsetLeft(117) //relative to the event trigger 
 *               .setOffsetTop(133)  //relative to the event trigger
 *               .setContent("This is the text that will go inside of the popup")
 *               .draw()
 *               
 * <img src="x.gif" onmouseover="popupBalloon.show(this)" onmouseout="popupBalloon.hide()" /> 
 */ 
  
cnp.widget.popupBalloon = function() {
    var objWidth;
    var objHeight;
    var objContent;
    leftOffSet=0;
    topOffSet=0;
    var elId, contentId;
   
    this.setWidth = function(setWidth) {
        objWidth = setWidth;
        return this;
    }
    
    this.setHeight = function(setHeight) {
        objHeight = setHeight;
        return this;
    }
    
    this.setContent = function(content) {
        objContent = content;
        return this;
    }
    
    this.setOffsetLeft = function(val) {
        leftOffSet = val;
        return this;
    }
    
    this.setOffsetTop = function(val) {
        topOffSet = val;
        return this;
    }
    
    this.draw = function(txtalign) {
	  this.elId = "popupBalloon" + Math.round(10000*Math.random());
	  this.contentId = "popupBalloonContent" + Math.round(10000*Math.random());
        //this.elId = new cnp.util.UniqueIdGenerator.getUniqueId("popupBalloon");
        //this.contentId = new cnp.util.UniqueIdGenerator.getUniqueId("popupBalloonContent");
        
        txtalign=="right" ? txtalign="right" : txtalign="left";
        objHTMLCode = '<div id="' + this.elId + '" class="popupBalloon" style="width: ' + objWidth + 'px; height: ' + objHeight + 'px" onmouseover="this.style.display=\'block\'" onmouseout="this.style.display=\'none\'">'
            + '<div style="padding:5px;height:100%;width:100%;">'
                + '<div class="popupBalloonContainer">'
                    + '<div id="'+ this.contentId +'" align="left"> ' + objContent + '</div>'
                + '</div>'
                + '<div class="popupBalloonFooter" align="'+ txtalign +'">'
                    + '<img src="/i/popupBalloonBottom.gif" />'
                + '</div>'
            +'</div>'
        +'</div>';
        jQuery(document).ready(function() {
            jQuery("body").prepend(objHTMLCode);    
        });
        return this;
    }
    
    this.changeContent = function(content) {
        document.getElementById(this.contentId).innerHTML = content;
        return this;
    }
    
    function getCoords(el) {
        return jQuery(el).offset();
    }
    
    this.show = function(el) {
        coords = getCoords(el);
        //Uses element location as target coordinates
        jQuery("#" +this.elId).css( {
            top: (coords.top - topOffSet)+ "px",
            left: (coords.left - leftOffSet)+ "px"
        }).fadeIn("fast");
        return this;
    }
    
    this.showOnCursor = function(evt) {
        //Uses mouse coordinates as target coordinates
        jQuery("#" + this.elId).css( {
            top: (getPosition(evt).y - topOffSet)+ "px",
            left: (getPosition(evt).x - leftOffSet)+ "px"
        }).fadeIn("fast");
        
        return this;
    }
    
    this.hide = function() {
        jQuery("#" +this.elId).fadeOut("fast");
    }
}
/**
 * Retrieve Cursor coordinates
**/
    function getPosition(e) {
        e = e || window.event;
        var cursor = {x:0, y:0};
        if (e.pageX || e.pageY) {
            cursor.x = e.pageX;
            cursor.y = e.pageY;
        }
        else {
            cursor.x = e.clientX +
                (document.documentElement.scrollLeft ||
                document.body.scrollLeft) -
                document.documentElement.clientLeft;
            cursor.y = e.clientY +
                (document.documentElement.scrollTop ||
                document.body.scrollTop) -
                document.documentElement.clientTop;
        }
        return cursor;
    }

/* EXPAND ELEMENT v2*/

        var setToggle = function(elContainer, elHeight) {
            containerID = elContainer;
            containerHeight = jQuery('#'+elContainer).height();
            
            origHeight = elHeight;
            
            closeImg = new Image();
            closeImg.src = '/i/ICN_close_txt.gif';
            
            viewMoreImg = new Image();
            viewMoreImg.src = '/i/ICN_viewmoretags.gif';
            
            function expand() {
                jQuery('#'+containerID).css({
                    height: 'auto',
                    position: 'absolute'
                });

                jQuery('#viewAll').css({
                    display: 'block' 
                });
                
                jQuery('#tagList').css({
                    overflow: 'visible',
                    height: 'auto'
      //              padding: '0 0 20px 0'
                });
                
                jQuery('#viewmoreImg').attr({
                    src: closeImg.src,
                    width: 45,
                    height: 12
                });
            }
            
            function contract() {
                jQuery('#tagList').height(origHeight);
                jQuery('#'+containerID).height(containerHeight);
                
                jQuery('#viewAll').css({
                    display: 'none' 
                });
                
                jQuery('#tagList').css({
                    overflow: 'hidden'
               //     padding: '0 0 5px 0'
                });
                 
                jQuery('#'+containerID).css({
                    position: 'relative'
                });
                
                document.getElementById('viewmoreImg').src = viewMoreImg.src;

                jQuery('#viewmoreImg').attr({
                    src: viewMoreImg.src,
                    width: 103,
                    height: 12 
                });
                
                
            }
            
            this.toggle = function() {
                jQuery('#'+containerID).css('position')!='absolute' ? expand() : contract();
            }
        }

/*
 * Alters the positioning of an element to absolute and expands the height. Mainly used on Popular Tags pieces
 */
expandElement = function(elContainer) {
    try {
        var origHeight = document.getElementById(elContainer).style.height;
    }
    catch(err) {}
    
    this.expand = function(callbackFunc) {
        
        jQuery("#" + elContainer + "> div").css(
            {
                position: "absolute",
                height: "auto"    
            }
        )
        
        jQuery("#" + elContainer + "> div > ul").css(
            {
                overflow: "visible",
                height: "auto",
                padding: '0 0 20px 0'   
            }
        )
        eval(callbackFunc);  
    }   
    
    this.contract = function(callbackFunc) {
        jQuery("#" + elContainer + "> div").height(origHeight);
        jQuery("#" + elContainer + "> div").css(
            {
                position: "relative"
            }
        )
        
        jQuery("#" + elContainer + "> div > ul").css(
            {
                overflow: "hidden",
                height: origHeight,
                padding: '0 0 5px 0'       
            }
        )
        eval(callbackFunc);
    }
    
    this.toggle = function(expandCallback, contractCallback) {
        if (origHeight==0) {
            origHeight = jQuery("#" + elContainer + "> div").height();
        }

        jQuery("#" + elContainer + "> div").height()!=origHeight ? this.contract(contractCallback) : this.expand(expandCallback);
    }
}


/*
 * Inserts value of a tag into a text field.
 */

activateTags = function(tagContainer, targetField) {
    var container;
    var tagInput = targetField;
    
    /* Appends a click event to each item on a list */
    jQuery("#" + tagContainer + "> li").each(
        function() {
            jQuery(this).click(
                function() {
                    addSuggestedKeyword(jQuery(this).html());
                }
            );
        }
    );
   
   /* Retrieve's innerHTML of current list element and inserts to a text input field */
    function addSuggestedKeyword(keyword) {
        if (isUniqueKeyword(keyword)) {
            if (jQuery("#" + tagInput).val())
                keyword = jQuery("#" + tagInput).val() + ", " + keyword;
            jQuery("#" + tagInput).val(keyword);
        }
    }
    
    function isUniqueKeyword(keyword) {
        return (document.getElementById(tagInput).value.indexOf(keyword) == -1) ? true : false;
    }
}

function checkLimit(el, maxSize) {
    if (document.getElementById(el.id+"_error")) {
        document.getElementById(el.id+"_error").innerHTML = "";
    }
    if (el.value.length>maxSize) {
        el.value = el.value.substring(0, maxSize)
        if (document.getElementById(el.id+"_error")) {
            document.getElementById(el.id+"_error").innerHTML = "*Character Limit has been reached.";
        }
        return;
    }
}

function displayUserMenu() {
    if (userData.loggedIn && document.getElementById("userMenu")) {
        hrefLink = jQuery("#userMenu > ul > li:last > a").attr("href");

        if (!userData.handle) {
            profilelink = "/user/profile/community";
        }
        else {
            if (hrefLink.indexOf(userData.handle)==-1) {
                profilelink = "/user/profile/community/"+userData.handle;
            }
        }

        jQuery("#userMenu > ul > li:last > a").attr({
            href: profilelink
        });
        document.getElementById("userMenu").style.display="block";
    }
}
        
jQuery(document).ready(
    function() {
        userDataEventRegistry.add('displayUserMenu()');        
    }
)