/* UI Components - written by Wes Reid, http://wesreid.com
*/

window.UIComponents = {
    callback: function (args) {
        pb.setProgress(args.x / 200);
        pb.setBottomProgress((args.x / 200) * 1.15);
    },
    /* Progress Bar */
    progressBar: function (uiArgs, callbackArgs) {
        try {
            /*

            Example:
            var pb = UIComponents.progressBar(
            { 
            align: "left|center",
            containerSelector: ".appContent", 
            width:200, 
            height: 21, 
            usePctValue: true, 
            bkgdImg: "/img/progress_red.png", 
            bkgdClr:null, 
            startValue: .10, 
            usePctValue: true, 
            useEase: true, 
            rtBorderCss:null,
            customClass:null,
            pbBottom: { startValue: .50, bkgdClr:'#333333', rtBorderCss:'solid 1px #555555', customClass:null } 
            }, 
            { onClick:function(){pb.setBarFillToPosition(.2);} }
            );

            */
            var retVal = {

                uiArgs: null,
                callbackArgs: null,
                pbContainerClass: null,
                pbClass: null,
                pbbClass: null,
                currentPosition: 0,
                currentBottomPosition: 0,

                setProgress: function (pctOrValue) {
                    if (this.uiArgs.usePctValue && pctOrValue >= 0 && pctOrValue <= 1) {
                        $("." + this.pbClass, this.uiArgs.containerSelector).css("width", pctOrValue * this.uiArgs.width);
                        this.currentPosition = pctOrValue;
                    }
                },

                setBottomProgress: function (pctOrValue) {
                    if (this.uiArgs.usePctValue && pctOrValue >= 0 && pctOrValue <= 1) {
                        $("." + this.pbbClass, this.uiArgs.containerSelector).css("width", pctOrValue * this.uiArgs.width);
                        this.currentBottomPosition = pctOrValue;
                    }
                }

            };

            /* internal setup class */
            var _internal = {
                init: function (uiArgs, callbackArgs) {
                    this.initUiArgs(uiArgs);
                    this.initCallbackArgs(callbackArgs);
                },
                initUiArgs: function (args) {
                    if (!args.containerSelector || $(args.containerSelector).length == 0)
                        throw new Error("A valid uiArgs.containerSelector was not provided.");
                    if (!args.width)
                        throw new Error("uiArgs.width not provided.");
                    if (!args.height)
                        throw new Error("uiArgs.height not provided.");
                    if (!args.usePctValue)
                        args.usePctValue = true;
                    if (!args.bkgdImg && !args.bkgdClr)
                        throw new Error("Must set either uiArgs.bkgdImg or uiArgs.bkgdClr.");
                    if (!args.startValue)
                        args.startValue = 0;
                    if (args.usePctValue && args.startValue && (args.startValue < 0 || args.startValue > 1))
                        throw new Error("When uiArgs.usePctValue=true, all positions (i.e. uiArgs.startValue) must be a decimal between 0 and 1.");
                    if (args.useEase == null || (typeof args.useEase === "undefined"))
                        args.useEase = false;
                    // bottom progress bar arg validation
                    if (args.pbBottom) {
                        if ((!args.pbBottom.bkgdImg && !args.pbBottom.bkgdClr))
                            throw new Error("Must set either uiArgspbBottom.bkgdImg or uiArgs.pbBottom.bkgdClr.");
                        if (!args.pbBottom.startValue)
                            args.pbBottom.startValue = 0;
                        if (args.usePctValue && args.pbBottom.startValue && (args.pbBottom.startValue < 0 || args.pbBottom.startValue > 1))
                            throw new Error("When uiArgs.usePctValue=true, all positions (i.e. uiArgs.pbBottom.startValue) must be a decimal between 0 and 1.");
                    }
                },
                initCallbackArgs: function (args) {
                    if (args.onClick && !(typeof args.onClick === "function"))
                        throw new Error("callbackArgs.onClick must be a javascript function.");
                    if (args.onComplete && !(typeof args.onComplete === "function"))
                        throw new Error("callbackArgs.onComplete must be a javascript function.");
                },
                setup: function (uiArgs, callbackArgs) {
                    var pbContainer = $("<div></div>");
                    $(pbContainer).css({ width: uiArgs.width, height: uiArgs.height, padding: 0, border: 'none', overflow: 'hidden', position: 'absolute', left: (uiArgs.align=="center")?'50%':0, 'margin-left': (uiArgs.align=="center")?-(uiArgs.width / 2):0 });
                    $(pbContainer).addClass(this.mmdd() + "pbc");

                    if (uiArgs.pbBottom) {
                        var pbBottom = $("<div></div>");
                        $(pbBottom).css({ width: 0, height: uiArgs.height, padding: 0, border: 'none', position: 'absolute' });
                        (uiArgs.pbBottom.bkgdImg) ? $(pbBottom).css('backgroundImage', 'url(' + uiArgs.pbBottom.bkgdImg + ')') : $(pbBottom).css('background-color', uiArgs.pbBottom.bkgdClr);
                        if (uiArgs.pbBottom.rtBorderCss)
                            $(pbBottom).css('border-right', uiArgs.pbBottom.rtBorderCss);
                        $(pbBottom).addClass(this.mmdd() + "pbb");
                        $(pbBottom).appendTo(pbContainer);

                        if (uiArgs.pbBottom.startValue > 0) {
                            if (uiArgs.usePctValue) {
                                $(pbBottom).css("width", uiArgs.pbBottom.startValue * uiArgs.width);
                            }
                        }
                        if (uiArgs.pbBottom.customClass)
                            $(pbBottom).addClass(uiArgs.pbBottom.customClass);
                    }

                    var pb = $("<div></div>");
                    $(pb).css({ width: 0, height: uiArgs.height, padding: 0, border: 'none', position: 'absolute' });
                    (uiArgs.bkgdImg) ? $(pb).css('backgroundImage', 'url(' + uiArgs.bkgdImg + ')') : $(pb).css('background-color', uiArgs.bkgdClr);
                    if (uiArgs.rtBorderCss)
                        $(pb).css('border-right', uiArgs.rtBorderCss);
                    $(pb).addClass(this.mmdd() + "pb");
                    $(pb).appendTo(pbContainer);

                    if (uiArgs.startValue > 0) {
                        if (uiArgs.usePctValue) {
                            $(pb).css("width", uiArgs.startValue * uiArgs.width);
                        }
                    }
                    if (uiArgs.customClass)
                        $(pb).addClass(uiArgs.customClass);

                    // add event catcher
                    if (callbackArgs.onClick) {
                        var evtCatcher = $("<div></div>");
                        $(evtCatcher).css({ cursor: 'pointer', width: uiArgs.width, height: uiArgs.height, margin: 0, padding: 0, border: 'none', position: 'absolute' });
                        $(evtCatcher).click(function (evt) {
                            var x = evt.pageX - $(this).offset().left;
                            var y = evt.pageY - $(this).offset().top;
                            callbackArgs.onClick({ x: x, y: y });
                        });
                        $(evtCatcher).appendTo(pbContainer);
                    }

                    $(uiArgs.containerSelector).empty();
                    $(pbContainer).appendTo($(uiArgs.containerSelector));
                },
                id: function () {
                    return "pb" + (new Date()).getTime().toString();
                },
                mmdd: function () {
                    return (new Date()).getMonth().toString() + (new Date()).getDay().toString();
                }
            };

            _internal.init(uiArgs, callbackArgs);
            retVal.uiArgs = uiArgs;
            retVal.callbackArgs = callbackArgs;
            retVal.pbContainerClass = _internal.mmdd() + "pbc";
            retVal.pbClass = _internal.mmdd() + "pb";
            retVal.pbbClass = _internal.mmdd() + "pbb";
            _internal.setup(uiArgs, callbackArgs);
            return retVal;
        }
        catch (ex) {
        }
    }

}