if (typeof console == 'undefined') console = {};
console.log = console.log || function() { };
console.info = console.info || console.log;
console.warn = console.warn || console.log;
console.error = console.error || console.log;
console.debug = console.debug || console.log;

$.info = function(msg) { if (console.info) console.info(msg); }
$.warn = function(msg) { if (console.warn) console.warn(msg); }
$.error = function(msg) { if (console.error) console.log(msg); }
$.debug = function(msg) { if (console.debug) console.debug(msg); }
$.log = function(msg) { if (console.log) console.log(msg); }

if (!com) var com = {};
if (!com.play2bfit) com.play2bfit = {};
if (!com.play2bfit.www) com.play2bfit.www = {};

com.play2bfit.www = {

    SLOW: 0.1,

    staging: false,

    trace: false,

    onLoad: function() {
        var self = com.play2bfit.www;

        self.loadReports();

        self.initDemoScript();

        self.fixTraceContent();
    },

    /**
    * Load reports via AJAX
    */
    loadReports: function() {
        var $reports = $('*[data-report]');
        var $loader = $('<span/>').text('Loading...').addClass('AjaxLoader');
        //$reports = $($reports.get().reverse());
        $reports.each(function() {
            var $this = $(this);
            var url = $this.attr('data-report');
            var h = $this.css('height');

            $this.empty().append($loader.clone());
            //alert('start ' + url);
            $.ajax({
                url: url,
                async: true,
                success: function(r) {
                    var $html = $(r);
                    var s = $this.attr('style');
                    var p = $this.css('position');
                    var o = $this.css('overflow');
                    var w = $this.css('width');
                    var info = p + '/' + o + ':' + w + 'x' + h;

                    $this.css({
                        //outline: 'thin solid',
                        overflow: 'hidden',
                        width: w,
                        height: h
                    });

                    var $table = $html.find('table');

                    $this.empty();
                    //$this.css({ visibility: 'hidden' });
                    $this.css({ opacity: 0 });
                    $this.append($table);

                    var mt = parseInt($table.css('margin-top').replace(/px$/,''));
                    var mb = parseInt($table.css('margin-bottom').replace(/px$/,''));

                    $this.animate({
                        height: $table.height() + mt + mb
                    }, function() {
                        $(this).animate({ opacity: 1 }, function() {
                            $(this).removeAttr('style').attr('style', s);
                        });
                    });
                    //$this.append(info);
                    //$this.empty().append($html.find('table'));
                },
                error: function() {
                    var message = 'Error fetching report: ' + url;
                    $this.empty().append(message);
                }
            });
        });
    },

    initDemoScript: function() {
        var $demo = $(".DemoScript");

        var $mask = $("<div/>").addClass("DemoMask").css({
            opacity: 0.8
        });
        $mask.append($("<div/>").addClass("Top"));
        $mask.append($("<div/>").addClass("Left"));
        $mask.append($("<div/>").addClass("Right"));
        $mask.append($("<div/>").addClass("Bottom"));

        var $highlight = $("<div/>").addClass("DemoHighlight").css({
            opacity: 0.8
        });


        $highlight.get(0).extent = 30;

        $highlight.get(0).animate = function() {
            var $this = $(this);
            var extent = 50;
            var end = 5;
            $this.css({
                borderWidth: extent + "px",
                left: ($this.offset().left - extent) + "px",
                top: ($this.offset().top - extent) + "px",
                opacity: 0
            }).animate({
                borderWidth: end + "px",
                left: "+=" + (extent - end) + "px",
                top: "+=" + (extent - end) + "px",
                opacity: 1
            });
        };
        /*
        $highlight.get(0).animate = function(){
        var $this = $(this);
        $this.css({
        borderWidth: "1px",
        left: this.offset.left,
        top: this.offset.top,
        opacity: 1
        }).animate({
        borderWidth: "+=" + this.extent + "px",
        left: "-=" + this.extent + "px",
        top: "-=" + this.extent + "px",
        opacity: 0
        },1000,function(){
	        
        this.animate();
        return;
	            
        $(this).animate({
        borderWidth: "-=" + this.extent + "px",
        left: "+=" + this.extent + "px",
        top: "+=" + this.extent + "px"
        },function(){
        $(this).get(0).animate();
        });
        });
        };
        */

        $("body").append($mask);
        $("body").append($highlight);

        $demo.get(0).hideMe = function() {
            var $this = $(this);
            $this.animate({
                left: -$this.width() - 10
            });
        };

        $demo.get(0).showMe = function() {
            var $this = $(this);
            $this.animate({
                left: 0
            });
        };

        $demo.find("dfn").each(function() {
            this.selector = this.title;
            this.title = null;
        }).hover(function() {
            var $highlight = $(".DemoHighlight");
            var $mask = $(".DemoMask");
            var $target = $(this.selector);
            var $window = $(window);

            var m = {
                target: {
                    top: $target.offset().top,
                    left: $target.offset().left,
                    right: $target.offset().left + $target.get(0).offsetWidth,
                    bottom: $target.offset().top + $target.get(0).offsetHeight,
                    width: $target.get(0).offsetWidth,
                    height: $target.get(0).offsetHeight
                },
                window: {
                    width: $window.width(),
                    height: $window.height()
                }
            };

            $mask.find(".Top").css({ left: 0, top: 0 }).width($window.width()).height(m.target.top);
            $mask.find(".Bottom").css({ left: 0, top: m.target.bottom }).width(m.window.width).height(m.window.height - m.target.bottom);
            $mask.find(".Left").css({ left: 0, top: 0 }).width(m.target.left).height(m.window.height);
            $mask.find(".Right").css({ left: m.target.right, top: 0 }).width(m.window.width - m.target.right).height(m.window.height);

            $mask.css({
                opacity: 0.6,
                visibility: "visible"
            }).width(m.window.width).height(m.window.height);
            /*
            $mask.animate({
            opacity: 0.6
            });
            */

            $highlight.width($target.width());
            $highlight.height($target.height());

            $highlight.width($target.get(0).offsetWidth);
            $highlight.height($target.get(0).offsetHeight);

            $highlight.get(0).offset = $target.offset();
            $highlight.css({
                left: $target.offset().left,
                top: $target.offset().top,
                visibility: "visible"
            });
            $highlight.get(0).animate();

        }, function() {
            var $highlight = $(".DemoHighlight");
            var $mask = $(".DemoMask");

            $highlight.css({
                visibility: "hidden"
            }).stop();

            $mask.css({
                visibility: "hidden"
            });
        });

        $demo.css({
            opacity: 0.9
        });

        $demo.hover(function() {
            clearTimeout(this.hideTimeout);
            this.showMe();
        }, function() {
            var self = this;
            this.hideTimeout = setTimeout(function() { self.hideMe(); }, 2000);
            //this.hideMe();
        });

        $demo.get(0).hideMe();
    },

    //
    // Add additional markup to ASP trace information for custom formatting.
    //
    fixTraceContent: function() {
        var script = com.play2bfit.www;
        if (script.traceFixed) return;
        $("#__asptrace .tracecontent table").each(function() {
            var html = $(this).find("th:first-child").html();
            $(this).before(html);
            $(this).find("tr:first-child").empty();
        });
        $("#__asptrace .tracecontent td:last-child").each(function() {
            var $td = $(this);
            var value = parseFloat($td.text());
            if (value > script.SLOW) $td.parent().addClass('slow');
        });
        $("#__asptrace .tracecontent table").slideUp();
        $("#__asptrace .tracecontent h3").css({
    }).toggle(function() {
        $(this).next("table").slideDown();
    }, function() {
        $(this).next("table").slideUp();
    });
    $("#__asptrace").prepend("<h2>Trace Information</h2>");
    $("#__asptrace .tracecontent").wrapAll('<div class="contents"></div>');
    $("#__asptrace h2").toggle(function() {
        //            $("#__asptrace .contents").slideUp();
    }, function() {
    });
    $("#__asptrace").fadeTo(100, 0.2).hover(function() {
        $(this).fadeTo(100, 1);
        $("#__asptrace .contents").slideDown();
        $("#__asptrace").animate({ width: "100%" });
    }, function() {
        $(this).fadeTo(100, 0.2);
        $(this).find(".contents").slideUp();
        $("#__asptrace").animate({ width: "100px" });
    });
    $("#__asptrace .contents").hide();
    $("#__asptrace").width("150px");
    script.traceFixed = true;
},

traceWrite: function(msg) {
    var self = com.play2bfit.www;
    if (self.trace) {
        var console = $("#console");
        console.get(0).innerHTML += msg + "<br />";
        //			console.html(console.html() + msg + "<br/>");
        console.scrollTo({ top: "+=200px" }, 0);
    }
}

}
$(document).ready(com.play2bfit.www.onLoad);