/// <reference path="jquery-1.3.2-vsdoc.js"/>

String.prototype.startsWith = function(str){ return (this.match("^" + str) == str); };
String.prototype.endsWith = function(str) { return (this.match(str + "$") == str); };


var COOKIE_OVL_NAME = "_LoggingOverlay";
var JQUERY_URL = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
//var LOGGING_OVL_JS = "http://localhost:83/Contents/javascript/LoggingOverlay.js";
//var LOGGING_OVL_URL = "http://localhost:83/pages/overlay/?";
var LOGGING_OVL_URL = "http://ua.fptad.com/pages/overlay/?";

(function() {
    window.__LOVL = {

        siteId: 2,
        Id: "__LOVL_CONTAINER",
        BarClass: "__LOVL_CLASSNAME",
        LogoUrl: "http://ua.fptad.com/Contents/Images/polygon200.jpg",
        IsShowBars: true,
        ZIndex: 9999999, // Control Bar Index
        BarZIndex: 9998, // Percent z-index
        Params: '',
        Links: new Array(),
        Cookie: {

            set: function(name, value, days) {
                if (days) {
                    var date = new Date();
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                    var expires = "; expires=" + date.toGMTString();
                }
                else var expires = "";
                document.cookie = name + "=" + value + expires + "; path=/";
            },
            get: function(name) {
                var nameEQ = name + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) == 0) {
                        return c.substring(nameEQ.length, c.length);
                    }
                }
                return null;
            },
            remove: function(name) {
                this.set(name, "", -1);
            }
        },

        ToolTip:
        {
            showId: null,
            zindex: 9999999,
            showSpeed: 0,
            hideSpeed: 0,
            offsetX: 20,
            offsetY: 20,
            show: function(event, _parent) {
                var _mainParent = _parent;

                var _target = $(_parent).attr("lovltip");

                if (_target != null) {

                    $(_target).css({ zindex: this.zindex, top: (event.pageY + this.offsetY) + 'px', left: (event.pageX + this.offsetX) + 'px' }).show();
                    // .fadeIn(this.showSpeed);

                }

                if (_target != this.showId) {
                    this.hide();
                }
                this.showId = _target;

                // hide when mouse click

                $(document).click(function(event) {


                    if (__LOVL.ToolTip.showId != null) {
                        __LOVL.ToolTip.hide();
                    }
                    // alert(event.pageX + ' - ' + _dimensions.left + '- ' + (_dimensions.left + $(_target).outerWidth()));

                });



            },
            hide: function() {

                //alert(this.showId);
                if (this.showId != null) {
                    $(this.showId).hide();
                    this.showId = null;

                }

            }

        },

        loadJS: function(_url) {

            var headID = document.getElementsByTagName("head")[0];
            var newScript = document.createElement("script");
            newScript.type = "text/javascript";
            newScript.src = _url;
            headID.appendChild(newScript);
        },

        loadOverlay: function() {
            var _url = document.location.href;

            var _ov = __LOVL.Cookie.get(COOKIE_OVL_NAME);
            if (_url.indexOf("#lovl=") >= 0 || _ov != null) {


                var _params = _url.substring(_url.indexOf("#") + 1, _url.length);

                if (_url.indexOf("#lovl=") >= 0) {
                    __LOVL.Cookie.set(COOKIE_OVL_NAME, _params);
                }

                _params += "&st=" + this.siteId + "&url=" + escape(_url);

                if (typeof (jQuery) == "undefined") {
                    this.loadJS(JQUERY_URL);

                }

                // this.loadJS(LOGGING_OVL_JS);

                this.loadJS(LOGGING_OVL_URL + _params);


            }
        },

        dateFormat: function(_dr) {

            _dr = _dr.split('-');
            var _d1 = _dr[0];
            var _d2 = _dr[1];
            _d1 = _d1.substring(6, 8) + '/' + _d1.substring(4, 6) + "/" + _d1.substring(0, 4);
            _d2 = _d2.substring(6, 8) + '/' + _d2.substring(4, 6) + "/" + _d2.substring(0, 4);

            return _d1 + " - " + _d2;
        },

        getQueryString: function(_url, _key) {

            if (_url.length <= 0)
                return '';

            var _qs = (_url.indexOf('?') >= 0) ? _url.split('?')[1] : _url;
            if (_qs == null || _key.length == 0) return;
            var _params = _qs.split("&");
            for (var i = 0; i < _params.length; i++) {
                var _pv = _params[i].split("=");
                if (_key.indexOf("|") > 0) {
                    var _ks = _key.split("|");
                    for (var j = 0; j < _ks.length; j++) {
                        if (_pv[0] == _ks[j]) {
                            return _pv[1]
                        }
                    }

                }
                else {
                    if (_pv[0] == _key) {
                        return _pv[1];
                    }
                }

            }
            return '';


        },


        showLoading: function() {
            var overlayLayer = $("<div id='__LOVL_OVERLAY' style='position: absolute;display:none;z-index: 9999998;top:0;left:0;background:#333;width:100%; overflow:hidden'></div>");
            $('body').append(overlayLayer);

            //$('#__LOVL_OVERLAY').height($(document).height()).animate({ opacity: 0.5, backgroundColor: '#000' });
            $('#__LOVL_OVERLAY').height($(document).height()).fadeIn('medium');

        },
        hideLoading: function() {

            //alert('Hide');

            $('#__LOVL_OVERLAY').fadeOut();


        },


        createControlBar: function() {

            var _dr = __LOVL.getQueryString(this.Params, "dr");

            // Container position: fixed;
            var _html = "<div id=\"" + this.Id + "\" style=\"position: fixed;z-index: " + this.ZIndex + ";border-bottom: solid 5px #666;margin: 0pt;padding: 0pt;left: 0pt;top: 0pt;width: 100%;font-family: Arial,Tahoma;color: #666;font-size: 10pt;background:#fff\">";


            //Control

            _html += "<table cellpadding=\"0\" cellspacing=\"0\" style=\"opacity:1;float: right;height:50px;vertical-align: middle;\"><tr>";
            _html += "<td style=\"vertical-align: middle;padding:5px\">";
            _html += "<a id=\"" + this.Id + "_ShowHideOvl\" style=\"color: rgb(12, 78, 166); font-family: arial; font-size: 10pt;\" href=\"\" onclick=\"__LOVL.showHideBars();return false;\">Hide Overlay</a>";
            _html += "</td>";
            _html += "<td style=\"border-left:solid 1px #ccc;vertical-align: middle;padding: 0px 10px; color: #666; font-family: arial; font-size: 13pt;font-weight:bold \">";
            _html += "<span id=\"" + this.Id + "_TIME_RANG\">" + this.dateFormat(_dr) + "</span>";
            _html += "</td>";

            _html += "<td style=\"border-left:solid 1px #ccc;padding: 0px 20px; vertical-align: middle;background:#999999;white-space:nowrap;font-size:10pt;font-weight:bold\" >";
            _html += "<a style=\"color:#fff\" href=\"\" onclick=\"__LOVL.close();return false;\">Close</a>";

            _html += "</td>";
            _html += "</tr>";
            _html += "</table>";

            // Logo
            _html += "<div style=\"float: left;width: 200px;padding:5px\">";
            _html += "<img alt=\"Logo\" src=\"" + this.LogoUrl + "\" style=\"border:0\" /></div>";


            _html += "</div>"; // End Main Bar


            $("body").append(_html);

            $('#' + this.Id).css("opacity", "0.9");


        },



        showHideBars: function() {

            this.IsShowBars = !this.IsShowBars;
            var _txt = this.IsShowBars ? "Hide Overlay" : "Show Overlay";
            $("#" + this.Id + "_ShowHideOvl").text(_txt);

            if (!this.IsShowBars)
                $("." + this.BarClass).hide();
            else
                $("." + this.BarClass).show();


        },
        close: function() {
            __LOVL.Cookie.remove(COOKIE_OVL_NAME);
            window.close();
            window.location = '/';

        },


        stayAllwayTop: function() {

            if ($.browser.msie && $.browser.version <= 6) {
                $('#' + this.Id).css("position", "absolute");
                //document.getElementById(__LOVL.Id).style.position = 'absolute';
                barheight = $('#' + this.Id).height(); //document.getElementById(__LOVL.Id).offsetHeight                                
                var d = document;
                function ml(id) {
                    var el = d.getElementById(id);
                    if (d.layers) el.style = el;
                    el.sP = function(x, y) { this.style.left = x + "px"; this.style.top = y + "px"; };
                    el.x = 0;

                    el.y = 0;

                    return el;
                };
                window.__LOVL_stayTopLeft = function() {
                    var pY = document.documentElement.scrollTop;
                    // alert(pY);
                    // ftlObj.y += (pY - ftlObj.y) / 8;
                    ftlObj.y += (pY - ftlObj.y) / 3;
                    ftlObj.sP(ftlObj.x, ftlObj.y);
                    setTimeout("__LOVL_stayTopLeft()", 50);
                };
                ftlObj = ml(__LOVL.Id);
                __LOVL_stayTopLeft();
            }
        },


        loadData: function(_data) {

            var _html = "";
            $("a").each(function(i, el) {

                $.each(_data.Links, function(x, link) {

                    if ($(el).attr('href') && $(el).attr('href').toLowerCase() == link.Href.toLowerCase()) {



                        var _percent = link.Percent == 0 && link.Clicks > 0 ? ">0" : link.Percent;
                        var _progressVal = (link.Percent * 50) / 100;
                        //var _dimensions = $(this).offset();
                        // Percent Bars
                        _html = "<div class=\"" + __LOVL.BarClass + "\" lovltip=\"" + ("#" + __LOVL.Id + "_Tip_" + i) + "\" onmouseover=\"__LOVL.ToolTip.show(event, this);\" onmouseout=\"__LOVL.ToolTip.hide();\" style=\"border: 1px solid rgb(0, 0, 0); margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; background-color: rgb(255, 255, 255); width: 50px; height: 11px; text-align: left;\">";
                        //_html += "<div style=\"margin: 0px; padding: 0px; display: block; position: relative;\">";
                        _html += "<div style=\"margin: 0px; padding: 0px; width:" + _progressVal + "px; height: 11px; line-height: 11px; background-color: rgb(108, 147, 190);\">";
                        _html += "<div style=\"text-decoration: none; color: rgb(0, 0, 0); font-family: arial; font-size: 7.75pt; font-weight: normal; position: absolute; right: 0px; top: 0px;\">" + _percent + "%</div>";
                        _html += "</div>";
                        _html += "</div>";

                        // $("body").append(_html);


                        $(el).css("position", "relative").attr('lovlready', "1").append(_html);

                        //Tooltip

                        _html = "";

                        _html += "<div id=\"" + __LOVL.Id + "_Tip_" + i + "\" style=\"display:none;position:absolute;border:solid 2px #333;background:#fff;width:220px;\">";

                        //Link header
                        _html += "<div style=\"padding:5px 0 5px 0;margin:0;background:#666;font-weight:bold;width:100%\">";

                        _html += "<span style=\"color:#fff;\">" + escape(link.Href) + "</span>";
                        _html += "</div>";

                        //end


                        _html += "<table cellpadding=\"0\" cellspacing=\"3\" style=\"width:100%;background:#f4f4f4\">"

                        _html += "<tr>";
                        _html += "<td style=\"text-align:right;font-weight:bold\">";
                        _html += link.Clicks;
                        _html += "</td>";
                        _html += "<td>clicks</td>";
                        _html += "</tr>";
                        _html += "</table>";

                        _html += "</div>";

                        $("body").append(_html);
                        

                    }

                });

            });

            $("a[lovlready!=1][href!='']").each(function(i, el) {

                var _progressVal = 0;
                //var _dimensions = $(this).offset();
                // Percent Bars
                _html = "<div class=\"" + __LOVL.BarClass + "\" lovltip=\"" + ("#" + __LOVL.Id + "_Tip_Null_" + i) + "\" onmouseover=\"__LOVL.ToolTip.show(event, this);\" onmouseout=\"__LOVL.ToolTip.hide();\" style=\"border: 1px solid rgb(0, 0, 0); margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; background-color: rgb(255, 255, 255); width: 50px; height: 11px; text-align: left;\">";
                _html += "<div style=\"margin: 0px; padding: 0px; display: block; position: relative;\">";
                _html += "<div style=\"margin: 0px; padding: 0px; width:" + _progressVal + "px; height: 11px; line-height: 11px; background-color: rgb(108, 147, 190);\">";
                _html += "<div style=\"text-decoration: none; color: rgb(0, 0, 0); font-family: arial; font-size: 7.75pt; font-weight: normal; position: absolute; right: 0px; top: 0px;\">0%</div>";
                _html += "</div>";
                _html += "</div>";

                // $("body").append(_html);

                $(el).css("position", "relative").append(_html);

                //Tooltip

                _html = "";

                _html += "<div id=\"" + __LOVL.Id + "_Tip_Null_" + i + "\" style=\"display:none;position:absolute;border:solid 2px #333;background:#fff;width:220px;\">";

                //Link header
                _html += "<div style=\"padding:5px 0 5px 0;margin:0;background:#666;font-weight:bold;width:100%\">";

                _html += "<span style=\"color:#fff;\">" + $(el).attr("href") + "</span>";
                _html += "</div>";

                //end


                _html += "<table cellpadding=\"0\" cellspacing=\"3\" style=\"width:100%;background:#f4f4f4\">"

                _html += "<tr>";
                _html += "<td style=\"text-align:right;font-weight:bold\">";
                _html += 0;
                _html += "</td>";
                _html += "<td>clicks</td>";
                _html += "</tr>";
                _html += "</table>";

                _html += "</div>";

                $("body").append(_html);
            });


        },


        Page_Load: function() {

            // this.showLoading();
            //this.loadOverlay();
            this.Params = __LOVL.Cookie.get(COOKIE_OVL_NAME);

            this.createControlBar();

            // this.createBar();

            this.stayAllwayTop();


        }

    };
})();