Selection Over Power 1

//http://www.inf.pucrs.br/~pinho/CG/Aulas/OpenGL/Interseccao/CalcIntersec.html
//http://eusouryca.com/meninaswtf/
//http://www.greywyvern.com/code/php/binary2base64
var wwp_selection_and_hint_from_hell = (function()
{
    // search and regaça all imagens with title
    this.init = function()
    {
        var list = $('img');//$('.sidebar img');
        for(var i=0; i<list.length; i++)
        {
            var img = $(list[i]);
            if (img.attr('title') || (img.parent().attr('title') && img.parent().attr('href')))
            {
                img.mouseover(this.over).mouseout(this.out);
                if(!img.attr('title'))
                {
                    img.attr('title',img.parent().attr('title'));
                    img.parent().attr('title','');
                }
                var tit = img.attr('title');
                img.attr('title','').data('vtitle',tit);
            }
        }
        $(document.body).append(this.overlay);//.append(this.circle).append(box);

        for(var i=0;i<3;i++)
        {
            var l = $(document.createElement('img'));
            l.css({'width':'100px','height':'3px','position':'absolute'}).attr('src',linData);
            this.lin.push(l);
            this.setOrigin(l,0,1);
            this.overlay.append(l);
        }

        this.anim();

        this.line(0,20,20,1000,1000);
    }
    this.setOrigin = function(o,x,y)
    {
        o.css({'-moz-transform-origin':x+'px '+y+'px','-ms-transform-origin':x+'px '+y+'px',
            '-o-transform-origin':x+'px '+y+'px','-webkit-transform-origin':x+'px '+y+'px'});
    }

    this.over = function(e)
    {
        var o = $(e.target);
        var self = wwp_selection_and_hint_from_hell;
        o.css(self.overStyle);
        var off = o.offset();
        self.Tx = off.left + o.width()*0.5 - 64;
        self.Ty = off.top + o.height()*0.5 - 64;
        self.talpha=1;
        //target box
        self.ofB=140;
        /*var x = off.left + o.width() + 80;
        if ((x+self.box.width())>$(window).width())
            x = off.left - 80 - self.box.width();*/
        var x = off.left - o.width() - 80;
        if (x<0)
        {
            x = off.left + o.width() + 80;
            self.ofB = 0;
        }
        self.Tbx = x;
        self.Tby = e.pageY;
        o.bind('mousemove',self.move);
        self.info.html(o.data('vtitle'));
    }
    this.out = function(e)
    {
        var o = $(e.target);
        var self = wwp_selection_and_hint_from_hell;
        o.css(self.outStyle);
        self.talpha=0;
        o.unbind('mousemove',self.move);
    }
    this.move = function(e)
    {
        var self = wwp_selection_and_hint_from_hell;
        self.mx = e.pageX;
        self.my = e.pageY;
    }
    this.click = function(e)
    {
        var o = $(e);
        var self = wwp_selection_and_hint_from_hell;
        //window.open(self.link,self.link);
    }
    this.rot = function(el,a)
    {
        el.css({'-moz-transform':'rotate('+a+'deg)',
            '-ms-transform':'rotate('+a+'deg)',
            '-o-transform':'rotate('+a+'deg)',
            '-webkit-transform':'rotate('+a+'deg)'});
    }
    this.line = function(i,x,y,xt,yt)
    {
        var lin = this.lin[i];
        var _x = xt-x;
        var _y = yt-y;
        var l = Math.sqrt(_x*_x + _y*_y);
        var a = Math.atan2(_y,_x) / this.RAD;
        lin.width(l);
        this.rot(lin,a);
        lin.css('top',y).css('left',x);
    }

    this.anim = function()
    {
        var D=0.3;
        var Db=0.16;
        if (this.alpha>0.05)
        {
            this.x += (this.Tx-this.x)*D;
            this.y += (this.Ty-this.y)*D;
            this.ang += 7;
            this.circle.css('left',this.x).css('top',this.y);
            this.rot(this.circle,this.ang);

            this.bx += (this.Tbx-this.bx)*Db;
            this.by += (this.my-this.by)*Db;
            this.box.css('left',this.bx).css('top',this.by);

            var l0x = this.Tx+64;
            var l0y = this.Ty+64;
            var l1x = this.bx+this.ofB;
            var l1y = this.by+40;
            //this.line(0,l0x,l0y, l1x,l1y);
            this.line(0,l0x,l0y, l0x,l1y);
            this.line(1,l0x,l1y, l1x,l1y);
            this.line(2,0,0,0,0);

            this.overlay.css({'display':'block','opacity':this.alpha,'filter':String('alpha(opacity='+parseInt(this.alpha*100)+')')});
        } else this.overlay.css('display','none')
        this.alpha += (this.talpha-this.alpha)*D;

        setTimeout('wwp_selection_and_hint_from_hell.anim()',35);
    }

    this.RAD = Math.PI/180;
    this.alpha=0; this.talpha=0;
    this.x=0; this.y=0;
    this.Tx=0; this.Ty=0;
    this.bx=0; this.by=0;
    this.Tbx=0; this.Tby=0;
    this.ofB = 140;
    this.ang=0;
    this.overStyle = {"-webkit-box-shadow":"0px 0px 8px 0px rgb(121, 235, 93)","box-shadow":"0px 0px 8px 0px rgb(121, 235, 93)"};
    this.outStyle = {"-webkit-box-shadow":"none","box-shadow":"none"};
    //circle
    this.circle = $(document.createElement('img'));
    this.circle.css({'position':'absolute','pointer-events':'none'}).attr('src','circle.png');
    this.setOrigin(this.circle,64,64);
    // linhas
    var linData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AQTDhU1dZwneAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAF0lEQVQI12No+Nzwn4HhOcN/pgaeBgYANLsF5xLNRbwAAAAASUVORK5CYII%3D';
    this.lin = [];
    // box
    this.box = $(document.createElement('div'));
    this.box.css({'position':'absolute', 'width':'140px', 'height':'80px', 'overflow':'hidden',
            'background':'rgba(0,0,0,0.75)', 'border':'1px #000 solid', 'color':'#f0f050','pointer-events':'none'
            });
    this.title = $(document.createElement('h4'));
    this.info = $(document.createElement('div'));
    var hr = $(document.createElement('hr'));
    this.box.append(this.title).append(hr).append(this.info);
    // overbox
    this.overlay = $(document.createElement('div'));
    this.overlay.css({'position':'absolute', 'width':'100%', 'height':'100%', 'overflow':'hidden','z-index':'400','top':'0px','left':'0px','pointer-events':'none'});

    this.overlay.append(this.box).append(this.circle);

    return this;
})();