/* jQuery lib extensions for basket app */

(function($) {

    // * constants * //
    var POPUP_ID = "__popup";

    // client logging helper (e.g. firebug)
    // e.g. mangoLog("myVarName", "myValue");
    // name (object)
    // value (object)
    $.fn.mangoLog = function(name, value) {
        if (IS_DEBUG) {
            try {
                value = typeof (value) != 'undefined' ? value : "";
                if (typeof (window.loadFirebugConsole) == 'function') {
                    window.loadFirebugConsole();
                    console.log(name, value);
                } else if ($.browser.msie) {
                    if ($("#pnlLogging").length == 0) {
                        $("#pnlLeft").append("<div id=\"pnlLogging\" style=\"margin-top:12px;border:1px solid red;padding:4px;font-size:8pt;\"><strong>!! IE DEBUG ONLY !!</strong><div id=\"pnlLoggingMain\" class=\"main\"></div></div>");
                    };
                    $("#pnlLogging").append("<strong>" + name + "</strong>&nbsp;" + value + "<br/>");
                    return;
                };
            } catch (e) { };
        };
    };

    // add product stickers
    $.fn.mangoProductSticker = function() {

        var jqthis = $(this);
        if (jqthis.attr("class") && jqthis.attr("class") == "offer" || jqthis.attr("class") == "productThumbnail_offer") {

            var div = $("<img>")
                .attr("src", APPLICATION_ROOT + "client/global/img/stickers/offer_40x40.png")   // TODO - global image builder...
                .attr("width", "40")
                .attr("height", "40")
                .attr("border", "0")
                .attr("style", "z-index:1;margin-top:-30px;margin-left:0px;");

            jqthis.after(div);

            // revert to thumb
            jqthis.attr("class", jqthis.attr("class") == "productThumbnail_offer" ? "productThumbnail" : "").attr("style", "z-index:0;");
        };

        return this;

    };

    // standard pipe-separated tooltip - e.g. using title="Title|Body"
    $.fn.mangoPipeTip = function() {

        this.each(function() {
            var anchor = $(this);
            if (anchor.attr("title") && anchor.attr("title").length > 0) {
                anchor.tooltip({ delay: 0, showURL: false, showBody: anchor.attr("title").indexOf("|") != -1 ? "|" : "" });
            };
        });
    };



    // decorate mandatory fields
    $.fn.mangoMandatoryField = function() {

        this.each(function() {
            var input = $(this);
            var next = input.next();
            if (null == next || next.html() != "*") {
                var star = $("<span>*</span>");
                star.attr("class", "mandatory");
                input.after(star);
            };
        });
    };


    // registers a product pop-up link (using title="[product.MMID]")
    $.fn.mangoProductPopup = function() {

        // n.b. we use iteration rather than direct jQuery call on the result set
        // this allows us to pass over items that have already been processed, or do not contain valid data
        this.each(function() {

            var anchor = $(this);

            var mmid = anchor.attr("title");

            if (mmid.length > 0) {

                var data = $mb.getProductData(mmid);

                if (typeof (data) != 'undefined') {

                    var hb = new htmlBuilder();

                    // tooltip
                    anchor.tooltip({
                        delay: 0,
                        showURL: false,
                        bodyHandler: function() {
                            var html = hb.buildLargeBasketItemTooltipHtml(data);
                            return html;
                        }
                    });

                    // popup
                    anchor.click(function(e) {
                        var html = hb.buildFullProductInfoPopup(data, POPUP_ID, false, true);
                        showPopup(html, e);
                        return false;
                    });

                    // lose the title - tidy for display and prevents re-registration
                    anchor.attr("title", "");

                };

            };

        });

    };

    // registers a small basket item tooltip
    // + data (BasketItemJsonData)
    $.fn.smallBasketItemTooltip = function(data) {
        this.tooltip({
            delay: 0,
            showURL: false,
            bodyHandler: function() {
                var html = new htmlBuilder().buildBasketItemTooltipHtml(data);
                return html;
            }
        });
    };

    // registers a product info tooltip (using title="[product.MMID]")
    $.fn.mangoProductInfoTip = function() {

        // n.b. we use iteration rather than direct jQuery call on the result set
        // this allows us to pass over items that have already been processed, or do not contain valid data
        this.each(function() {

            var anchor = $(this);

            var mmid = anchor.attr("title");

            if (mmid.length > 0) {

                var data = $mb.getProductData(mmid);

                if (typeof (data) != 'undefined') {

                    var hb = new htmlBuilder();

                    anchor.tooltip({
                        delay: 0,
                        showURL: false,
                        bodyHandler: function() {
                            return hb.buildFullProductInfoTooltip(data);
                        }
                    });

                    // lose the title - tidy for display and prevents re-registration
                    anchor.attr("title", "");

                };

            };

        });

    };

    // register a tooltip with the specified image, header and body in the html
    // + img (string) - image url
    // + header (string) - header text
    // + body (string) - body text
    // + imgWidth (int) - image width
    // + imgHeight (int) - image height
    // + imgAlt (int) - image alt tag
    $.fn.mangoHover = function(img, header, body, imgWidth, imgHeight, imgAlt) {
        this.tooltip({
            delay: 0,
            showURL: false,
            bodyHandler: function() {
                var html = new htmlBuilder().buildHover(img, header, body, imgWidth, imgHeight, imgAlt);
                return html;
            }
        });
    };

    // register a popup with the specified image, header and body in the html
    // + img (string) - image url
    // + header (string) - header text
    // + body (string) - body text
    // + imgWidth (int) - image width
    // + imgHeight (int) - image height
    // + imgAlt (int) - image alt tag
    $.fn.mangoPopup = function(img, header, body, imgWidth, imgHeight, imgAlt) {
        this.click(function(e) {

            var hb = new htmlBuilder();
            var html = hb.buildPopupHtml(img, header, body, imgWidth, imgHeight, imgAlt);
            html = hb.buildPopup(POPUP_ID, html, false, true, "popup");

            showPopup(html, e, imgWidth);

            return false;
        });
    };

    // register a popup with the specified element contents as html
    // + id (string) - id of element to display as popup
    // + width (int) - popup width
    $.fn.mangoElementAsPopup = function(id, width) {
        this.click(function(e) {

            var html = new htmlBuilder().buildPopup(POPUP_ID, $('#' + id).html(), true, true, "textPopup");
            showPopup(html, e, width, e.pageX - 100, $(document).scrollTop() + 20);
            return false;

        });
    };


    /// props: http://github.com/brandonaaron/jquery-outerhtml/blob/6e872313fe094a507e3ba581b7181e02ccccbc02/jquery.outerhtml.js
    $.fn.outerHTML = function() {
        return $('<div>').append(this.eq(0).clone()).html();
    };

    // toggle fadeIn() / fadeOut()
    $.fn.fadeToggle = function(speed, callback) {

        var vis = this.css("display") != "none";
        if (vis) {
            this.fadeOut(speed, callback);
        } else {
            this.fadeIn(speed, callback);
        };

    };


    // ## "private" funcs ## //
    // html (string) - innerHtml
    // e (events)
    // w (int) - width (popup width is this +10px - default 310px)
    // x (int) - optional
    // y (int) - optional
    function showPopup(html, e, w, x, y) {

        // TODO - no need to remove and then build again is there?! just hide and show? check usages of this.
        $('#' + POPUP_ID).remove();
        $("body").append(html);

        var scrollTop = $(document).scrollTop();
        var x = typeof (x) == 'undefined' ? e.pageX + 160 : x;
        var y = typeof (y) == 'undefined' ? scrollTop + 20 : y;
        var w = typeof (w) == 'undefined' ? 310 : (w + 10);

        x = checkBoundaryX(x, w);

        $('#' + POPUP_ID).css({
            width: w,
            position: "absolute",
            top: y,
            left: x + "px"
        }).fadeIn();

    };

    // check if object is inside window
    // left (int) - current left (x) position
    // width (int) - width of popup window
    function checkBoundaryX(left, width) {
        
        var winWidth = $(window).width() - 20; // ~20 is the size of the scollbar
        if ((left + width) > winWidth) {
            return left - ((left + width) - winWidth);
        } else {
            return left;
        }
    };



})(jQuery);;