/**
* @name jquery freeTip
* @function 更改html标签的title提示样式，使之更友好，对ie8、FF3.6、360 3.9支持较好（提示框可随鼠标左右移动），
*     在ie6、7下支持有待改善
*
* @date 2011.7.30
* @author zhifeichuan
*
* @version 1.0
*
* 欢迎大家指出错误、提出建议
*/
(function ($) {
    $.fn.freeTip = function (options) {
        var defaults = {
            cssClass: "freeTip", //提示框类样式
            sanJiaoClass: "sanJiaoTip" //提示框下的三角类样式
        }

        var options = $.extend(defaults, options);
        var $o = this; //目标
        var $tip = $("<div id='freeTip' style='display:none;'></div>"); //提示框对象
        var $sanJiao = $("<div id='sanJiaoTip' style='display:none;'></div>"); //提示框下的三角对象

        //设置提示框的样式
        $tip.html($o.attr("title"));
        $tip.addClass(options.cssClass);
        $sanJiao.addClass(options.sanJiaoClass);
        $o.attr("title", "");

        //添加到文档中
        $("body").append($tip);
        $("body").append($sanJiao);



        $o.bind("mousemove", function (e) {
            var _e = e;
            $tip.show();
            $sanJiao.show();
            creatTip(_e);

        });

        $o.bind("mouseout", function () {
            $tip.hide();
            $sanJiao.hide();
        });


        //提示框定位
        var creatTip = function (e) {
            var mouse = new Mouse(e);

            //在ie6、7中，三角下会出现白色区域，通过设置提示框的位置解决此问题
            if (getVersion() != "IE6" && getVersion() != "IE7") {
                $tip.css("left", mouse.mouseX);
            } else {
                $tip.css("left", $o.position().left + 35);
            }

            $tip.css("top", $o.position().top - $tip.outerHeight());
            creatSanJiao();
        }

        //三角定位
        var creatSanJiao = function () {
            $sanJiao.css("top", $tip.position().top + $tip.outerHeight() + "px");
            $sanJiao.css("left", $tip.position().left + 10 + "px");
        }


        var Mouse = function (e) {
            var mouseEvent = new MouseEvent(e);
            this.mouseX = mouseEvent.x;
            this.mouseY = mouseEvent.y - $tip.height();
        }

        //鼠标坐标
        var MouseEvent = function (e) {
            this.x = e.pageX;
            this.y = e.pageY;
        }

        //浏览器判断 
        var getVersion = function () {
            if ($.browser.msie && ($.browser.version == "6.0")) {
                return "IE6";
            } else if ($.browser.msie && ($.browser.version == "7.0")) {
                return "IE7";
            }
            return "";
        }
    }
})(jQuery);