var w_popup = function (extend){
            var self = this;
            this.source = null;
            this.extend = extend;
            this.timer = null;

            this.coords = function getCoords(elem) {
                var box = elem.getBoundingClientRect();
                var body = document.body;
                var docEl = document.documentElement;
                var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
                var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
                var clientTop = docEl.clientTop || body.clientTop || 0;
                var clientLeft = docEl.clientLeft || body.clientLeft || 0;
                var top  = box.top +  scrollTop - clientTop;
                var left = box.left + scrollLeft - clientLeft;
                return { top: Math.round(top), left: Math.round(left) };
            }

            this.fixPosition = function (){
                var c = self.coords(this.source[0]), obj = $("#w-popup-1"),
                        w = obj.find(".w-header")[0];
                obj[0].style.position = "absolute";
                console.log(obj[0].offsetWidth);
                obj[0].style.top = c.top - parseInt(self.css(w, "paddingTop")) + "px";
                obj[0].style.left = (c.left + this.source[0].offsetWidth) - (obj[0].offsetWidth - parseInt(self.css(w, "paddingRight"))) + "px";
            }
            this.css = function (elem, name) {
                // J/S Pro Techniques p136
                if (elem.style[name]) {
                    return elem.style[name];
                } else if (elem.currentStyle) {
                    return elem.currentStyle[name];
                }
                else if (document.defaultView && document.defaultView.getComputedStyle) {
                    name = name.replace(/([A-Z])/g, "-$1");
                    name = name.toLowerCase();
                    s = document.defaultView.getComputedStyle(elem, "");
                    return s && s.getPropertyValue(name);
                } else {
                    return null;
                }
            }
            this.init = function (){
                this.source = $("#" + this.extend.source);
                this.source.mouseover(function (evt){
                    $("#w-popup-1").animate({opacity: 'show'}, 'fast');
                    $("#w-popup-1").css("display", "inline-block");
                    self.fixPosition();
                    evt.preventDefault();
                    return false;
                })
                $("#w-popup-1").mouseout(function (evt){
                    $("#w-popup-1").animate({opacity: 'hide'}, 'fast')
                })

            }
            this.init();
        };

        $(document).ready(function (evt){
            new w_popup({source: "w-popup-enter"})
        })