function CustomInfoboxControl(infoboxId, mapReference) {
    var _frameBuffer = 29;
    var _offset = 5;
    var _arrowWidth = 23;
    var _arrowHeight = 32;
    
    function GenerateInfoboxFrame(content, customStyles) {
        var infobox = [];

        //top of outer frame
        infobox.push("<table cellpadding='0' cellspacing='0' border='0'><tr><td><img src='images/infobox/infoTLCorner.png'/></td><td class='infoTop'>&nbsp;</td><td><img src='images/infobox/infoTRCorner.png'/></td></tr><tr><td class='infoLeft'>&nbsp;</td><td class='infoBG'>");

        //Top of White Frame
        infobox.push("<table cellpadding='0' cellspacing='0' border='0'><tr><td><img src='images/infobox/infoTLWCorner.png'/></td><td class='infoWBG'></td><td><img src='images/infobox/infoTRWCorner.png'/></td></tr><tr><td class='infoWBG'></td><td class='infoWBG'>");

        //content
        infobox.push(content);

        //Bottom of white frame
        infobox.push("</td><td class='infoWBG'></td></tr><tr><td><img src='images/infobox/infoBLWCorner.png'/></td><td class='infoWBG'></td><td><img src='images/infobox/infoBRWCorner.png'/></td></tr></table>");

        //Bottom of Outer frame
        infobox.push("</td><td class='infoRight'>&nbsp;</td></tr><tr><td><img src='images/infobox/infoBLCorner.png'/></td><td class='infoBtm'>&nbsp;</td><td><img src='images/infobox/infoBRCorner.png'/></td></tr></table>");
        return infobox.join('');
    };

    /***********************************
    * Infobox display Handlers
    ***********************************/
    this.DisplayInfobox = function(data, pinCoord, width, height, displayHorizontal) {
        var infobox = document.getElementById(infoboxId);

        if (infobox != null && data != "") {
            var center = mapReference.GetCenter();
            var pinPixel = mapReference.LatLongToPixel(pinCoord);

            var key = 0;

            if (center.Latitude > pinCoord.Latitude) {
                key = 2;
            }

            if (center.Longitude < pinCoord.Longitude) {
                key += 1;
            }

            var leftOffset = 0;
            var topOffset = 0;
            var customStyles = "";

            if (displayHorizontal) {
                width += _arrowWidth + _frameBuffer;
                height += _frameBuffer;

                leftOffset = (key % 2 == 0) ? -1 * _offset : width + _offset;
                topOffset = (key > 1) ? height - _arrowHeight : _arrowHeight;
            }
            else {
                width += _frameBuffer;
                height += _frameBuffer + _arrowHeight;

                leftOffset = (key % 2 == 0) ? _arrowWidth : width - _arrowWidth;
                topOffset = (key > 1) ? height + _offset : -1 * _offset;

                customStyles = (key > 1) ? "" : "margin-top:-3px;";
            }

            var top = pinPixel.y - topOffset + "px";
            var left = pinPixel.x - leftOffset + "px";

            infobox.style.left = left;
            infobox.style.top = top;
            infobox.style.zIndex = 1500;
            infobox.style.position = "absolute";
            infobox.style.width = width + "px";
            infobox.style.height = height + "px";

            var content = [];
            content.push("<div>");

            var mainContent = "<div style='float:left;" + customStyles + "'>" + GenerateInfoboxFrame(data, customStyles) + "</div>";

            key = (displayHorizontal) ? key : key + 4;

            switch (key) {
                case 0:
                    content.push("<div class='info_baseArrow info_arrowLeft' style='margin-top:");
                    content.push(_arrowHeight * 0.5);
                    content.push("px'>&nbsp;</div>");
                    content.push(mainContent);
                    break;
                case 1:
                    content.push(mainContent);
                    content.push("<div class='info_baseArrow info_arrowRight' style='margin-top:");
                    content.push(_arrowHeight * 0.5);
                    content.push("px'>&nbsp;</div>");
                    break;
                case 2:
                    content.push("<div class='info_baseArrow info_arrowLeft' style='margin-top:");
                    content.push(topOffset - (_arrowHeight * 0.5));
                    content.push("px'>&nbsp;</div>");
                    content.push(mainContent);
                    break;
                case 3:
                    content.push(mainContent);
                    content.push("<div class='info_baseArrow info_arrowRight' style='margin-top:");
                    content.push(topOffset - (_arrowHeight * 0.5));
                    content.push("px'>&nbsp;</div>");
                    break;
                case 4:
                    content.push("<div class='info_BaseVerticalArrow info_arrowUp' style='margin-left:");
                    content.push(_arrowHeight * 0.5);
                    content.push("px'>&nbsp;</div>");
                    content.push(mainContent);
                    break;
                case 5:
                    content.push("<div class='info_BaseVerticalArrow info_arrowUp' style='margin-left:");
                    content.push(leftOffset - _arrowHeight * 0.5);
                    content.push("px'>&nbsp;</div>");
                    content.push(mainContent);
                    break;
                case 6:
                    content.push(mainContent);
                    content.push("<div class='info_BaseVerticalArrow info_arrowDown' style='margin-left:");
                    content.push(leftOffset - (_arrowHeight * 0.5));
                    content.push("px'>&nbsp;</div>");
                    break;
                case 7:
                    content.push(mainContent);
                    content.push("<div class='info_BaseVerticalArrow info_arrowDown' style='margin-left:");
                    content.push(leftOffset - (_arrowHeight * 0.5));
                    content.push("px'>&nbsp;</div>");
                    break;
            }
            content.push("</div>");

            infobox.innerHTML = content.join('');

            infobox.style.display = '';
        }
    }

    this.CloseInfobox = function() {
        document.getElementById(infoboxId).style.display = "none";
    };
}