//To use TitleTip add these lines to your onload:
/*
$(".titleTip").bind("mouseover", TitleTip.show);
$(".titleTip").bind("mouseout", TitleTip.hide);
*/

//TODO: testing page, bug fixes

TitleTip = function(opts){
    var opacity = 1;
    var cornerSize = 5;
    var cornerImg = '/static/img/tool_tip_roundedcorners.png';
    var anchorImg = '/static/img/blacktriangle_down.png';
    var minAnchorPadding = 2*cornerSize + 16;
    var rememberTitle = ""; 

    function positionToolTip(ele, titleTip){
        //x and y of the element that has the tooltip
        var offset = ele.offset();
        //x and y of the parent container
        var parentOffset = ele.parent().offset();
        //x relative to parent
        var left = offset.left - parentOffset.left;
        //width of the TitleTip
        var tipWidth = titleTip.width()
        //width of the element
        var eleWidth = ele.width()
        if(left < tipWidth - minAnchorPadding){
            //align to the left side of the parent
            alignToParentLeft(ele, titleTip);
        }
        else if(eleWidth > tipWidth){
            //align to the left side of the element
            alignToElement(ele, titleTip, "left");
        }
        else {
            //align to the right side of the element
            alignToElement(ele, titleTip, "right");
        }

    }
    function alignToParentLeft(ele, titleTip){
        //x and y of the element that has the tooltip
        var offset = ele.offset();
        //x and y of the parent container
        var parentOffset = ele.parent().offset();
        //x relative to parent
        var left = offset.left - parentOffset.left;
        //width of the TitleTip
        var tipWidth = titleTip.width()
        //width of the element
        var eleWidth = ele.width()
        var anchor = titleTip.children("img.anchor");

        //calculate where to position the anchor for the tooltip
        var anchorPos;
        //if the tip is long enough reach past the center of the element
        if(tipWidth - minAnchorPadding > left + eleWidth*0.5){
            //position the anchor on the center of the element 
            anchorPos = offset.left - parentOffset.left + ele.width()*0.5 - anchor.width();
        }
        //if the tip is not long enough reach past beginning of the element
        else if (tipWidth - minAnchorPadding < left){
            //align the tip to the element
            alignToElement(ele, titleTip);
        }
        //if the tip is not long enough reach the middle of the element
        //but is long enough to reach past it's beginning
        else if (tipWidth*0.5 < left){
            //place the tip in the center of the start of the element and then end of the tip
            anchorPos = tipWidth - (tipWidth - left)*0.5;
        }
        //if the element is really big
        else {
            //position the anchor on the center of the tip
            anchorPos = titleTip.width()*0.5 - anchor.width()*0.5;
        }
        anchor.css("float", "left");
        anchor.css("margin-left", anchorPos);
        titleTip.css("left", parentOffset.left);
        titleTip.css("top", offset.top - titleTip.height());
    }

    function alignToElement(ele, titleTip){
        var offset = ele.offset();
        var eleMiddle = ele.width()*0.5;
        if(offset.left + titleTip.width() < $(document).width())
        {
            titleTip.css("left", offset.left);
            titleTip.children("img.anchor").css("margin-left", eleMiddle);
        }
        else
        {
            titleTip.css("left", offset.left + ele.width() - titleTip.width());
            titleTip.children("img.anchor").css("float", "right");
            titleTip.children("img.anchor").css("margin-right", eleMiddle - minAnchorPadding);
        }
        titleTip.css("top", offset.top - titleTip.height());
    }
        function roundedCorners(ele, cornerImg, size){
            var ele = $(ele);
            ele.before("<div style='background-image:url("+cornerImg+");background-position:top left;background-repeat:no-repeat;padding-left:"+cornerSize+"px;height:"+cornerSize+"px;'>"+
                "<div style='background-image:url("+cornerImg+");background-position:top right;background-repeat:no-repeat;padding-right:"+cornerSize+"px;height:"+cornerSize+"px;'>"+
                "<div style='background-color:black;height:"+cornerSize+"px;'>"+
                "</div></div></div>");
            ele.after("<div style='background-image:url("+cornerImg+");background-position:bottom left;background-repeat:no-repeat;padding-left:"+cornerSize+"px;height:"+cornerSize+"px;'>"+
                "<div style='background-image:url("+cornerImg+");background-position:bottom right;background-repeat:no-repeat;padding-right:"+cornerSize+"px;height:"+cornerSize+"px;'>"+
                "<div style='background-color:black;height:"+cornerSize+"px;'>"+
                "</div></div></div>");
            ele.wrap(
                "<div style='background-color:black;padding-left:"+cornerSize+"px;padding-right:"+cornerSize+"px;'>"+
                "</div>");
        }

    return {
        init:function(){
            $(".titleTip").bind("mouseover", TitleTip.show);
            $(".titleTip").bind("mouseout", TitleTip.hide);
            //hide tooltip on click
            $(".titleTip").bind("click", TitleTip.hide);
        },
        show:function(e){
            var ele = $(this);
            //if the title is not loaded yet, do nothing
            if(!this.title || this.title=="") return;
            //set title to empty to prevent IE from it's own tooltip 
            rememberTitle = this.title;
            if (document.activeElement == this) {
                this.title = ""; 
                return;
            }
            var titleTipStyle = "";
            var contentStyle = "";
            if (ele.hasClass("titleTipSmall")){
                titleTipStyle="width:auto;";
                contentStyle="margin-left:8px;margin-right:8px;";
            }
            var titleTip = $("<div id='titleTip' style='position:absolute;"+titleTipStyle+"'><div class='titleTipContent' style='background-color:black;"+contentStyle+"'>"+this.title+"</div><img class='anchor' src='"+anchorImg+"'/></div>");
            titleTip.css("opacity", opacity);
            this.title = ""; 
            ele.before(titleTip);
            var tip = titleTip.children("div");
            roundedCorners(tip, cornerImg, cornerSize);
            positionToolTip(ele, titleTip);
        },
        hide:function hideTitleTip(e){
            this.title = rememberTitle;
            $('#titleTip').remove();
        }
    
    } 
}();