var WBXGALLERY = WBXGALLERY || {};

WBXGALLERY.GalleryManager = {

    baseUrl : "http://www.widgetbox.com",
    cdnUrl  : "http://pub.widgetbox.com",
    gallery : null,
    isInitalized : false,
    useClientStyleLoad : true,
    loadScript : function(src, callback) {
        var parentNode = document.getElementsByTagName("head")[0];
        var toLoad = document.createElement("script");

        if (!parentNode)
            parentNode = document.getElementsByTagName("body")[0];


        toLoad.setAttribute("src", src);
        toLoad.setAttribute("type","text/javascript");

        if (callback) {
                toLoad.onload = callback;
        }

        parentNode.appendChild(toLoad);
    },

    loadStyle : function(src) {
        var parentNode = document.getElementsByTagName("head")[0];
        var toLoad = document.createElement("link");
        if (!parentNode)
            parentNode = document.getElementsByTagName("body")[0];

        toLoad.setAttribute("href", src);
        toLoad.setAttribute("type", "text/css");
        toLoad.setAttribute("rel", "stylesheet");
        parentNode.appendChild(toLoad);
    },

    loadGallery : function(code) {
        WBXGALLERY.GalleryManager.gallery = new WBXGALLERY.GalleryManager.Gallery(code);
        return WBXGALLERY.GalleryManager.gallery;
    },

    showGalleryLightbox : function(code) {
        var galleryUrl = WBXGALLERY.GalleryManager.baseUrl + "/cgallery/" + code + "/home";
        this.showFrame(galleryUrl);
    },

    setBaseUrl : function(baseUrl) {
        WBXGALLERY.GalleryManager.baseUrl = baseUrl;
    },

    utils: {
        addClass: function(el, className) {
            var initialClassName = el.className;
            var allClasses = initialClassName.split(" ");
            for (var i = 0; i < allClasses.length; i++) {
                // check to see if it's already there
                if (allClasses[i] == className) return;
            }
            el.className = initialClassName + " " + className;
        },
        removeClass: function(el, className) {
            var initialClassName = el.className;
            var allClasses = initialClassName.split(" ");
            var newClassName = "";
            for (var i = 0; i < allClasses.length; i++) {
                // check to see if it's already there
                if (allClasses[i] != className) newClassName += " " + allClasses[i];
            }
            el.className = newClassName;
        },
        hasClassName: function(el, className) {
            var classes = el.className.split(" ");
            for (var i = 0; i < classes.length; i++) {
             if (classes[i] == className) return true;
            }
            return false;
        }
    },

    FrameOptions: {
        width : "842",
        height : "578",
        frameBorder : "0",
        scrolling : "no"
    },

    Gallery : function(code) {
        this.isPreview = false;
        this.code = code;
        this.parentDiv = null;
        this.suppressHeaderFooter = false;
        this.widgetsDisplayed = 15;
        this.sortBy = null;
        this.currentCategorySrc = "";
        this.searchQuery = null;
        this.usrCtxParams = []; // provide array of objects like [ {"name": "wbx_usrCtx.foo", "value": "bar"} ]
        this.allCategories = null;
        this.galleryMetadata = {
            viewOptions: "cg-grid", // other options are "cg-brick", "cg-list"
            layout: "cg-layout-top", // other options are "cg-layout-side"
            theme: "cg-theme01",
            title: ""
        };
        this.enableBackButton = false;
        this.detailsViewMode = "LIGHTBOX"; // other options are "SELF", "DIV"
        this.currentHomeUrl = "";
        this.dfltCategorySrc = null;  // start the gallery off using this content feed
    },

    init : function() {
        WBXGALLERY.GalleryManager.isInitalized = true;
    },

    ua: navigator.userAgent.toLowerCase(),

    browser: {
        isOpera: function() {
            return WBXGALLERY.GalleryManager.ua.indexOf('opera') > -1;
        },
        isSafari: function() {
            return WBXGALLERY.GalleryManager.ua.indexOf('safari') > -1;
        },
        isGecko: function() {
            var isOpera = WBXGALLERY.GalleryManager.browser.isOpera();
            var isSafari = WBXGALLERY.GalleryManager.browser.isSafari();
            return !isOpera && !isSafari && WBXGALLERY.GalleryManager.ua.indexOf('gecko') > -1;
        },
        isIE: function() {
            var isOpera = WBXGALLERY.GalleryManager.browser.isOpera();
            return !isOpera && WBXGALLERY.GalleryManager.ua.indexOf('msie') > -1;
        },
        isFirefox: function() {
            return WBXGALLERY.GalleryManager.ua.indexOf('firefox') > -1;
        },
        isCamino: function() {
            return WBXGALLERY.GalleryManager.ua.indexOf('camino');
        },
        isMac: function() {
            return WBXGALLERY.GalleryManager.ua.indexOf('mac') > -1;
        }
    },

    positionDetailsDiv: function() {
        var iframeObj = document.getElementById("iframeObj");
        var divObj = document.getElementById("wbx-details-div");
        var scrollTop = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
        var scrollLeft = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;

        if (divObj) {
            divObj.style.display = "";
            var leftPos = (WBXGALLERY.GalleryManager.getViewportWidth() / 2) - (iframeObj.offsetWidth / 2) + scrollLeft;
            var topPos =  (WBXGALLERY.GalleryManager.getViewportHeight() / 2) - (iframeObj.offsetHeight / 2) + scrollTop;
            if (leftPos < 0) {
                divObj.style.left = "0px";
            } else if (leftPos + "px" != divObj.style.left) {
                divObj.style.left = leftPos + "px";
            }
            if (topPos < 0) {
                divObj.style.top = "0px";
            } else if (topPos + "px" != divObj.style.top){
                divObj.style.top = topPos + "px";
            }
        }
    },

    getViewportHeight: function() {
        var browser = WBXGALLERY.GalleryManager.browser;
        var height = -1;
        var mode = document.compatMode;
        if ( (mode || browser.isIE()) && !browser.isOpera() ) {
            switch (mode) { // (IE, Gecko)
                case 'CSS1Compat': // Standards mode
                    height = document.documentElement.clientHeight;
                    break;
                default: // Quirks
                    height = document.body.clientHeight;
            }
        } else { // Safari, Opera
            height = (window.innerHeight) ? window.innerHeight : 0;
        }
        return height;
    },

    getViewportWidth: function() {
        var browser = WBXGALLERY.GalleryManager.browser;
        var width = -1;
        var mode = document.compatMode;
        if (mode || browser.isIE()) { // (IE, Gecko, Opera)
            switch (mode) {
                case 'CSS1Compat': // Standards mode
                    width = document.documentElement.clientWidth;
                    break;
                default: // Quirks
                    width = document.body.clientWidth;
            }
        } else { // Safari
            width = (window.innerWidth) ? window.innerWidth : 0;
        }
        return width;
    },

    showFrame: function(detailsUrl) {
        WBXGALLERY.GalleryManager.displayMask();
        var divObj = document.getElementById("wbx-details-div");

        if (divObj == null) {
            divObj = document.createElement("div");
            var borderStyle = (document.all) ? "1px solid #000" : "0";
            divObj.style.cssFloat = "left";
            divObj.style.styleFloat = "left";
            divObj.style.position = "absolute";
            divObj.style.zIndex = "5002";
            divObj.style.border = borderStyle;
            divObj.style.backgroundColor = "transparent";
            divObj.style.padding = "0px";
            divObj.style.margin = "0px";
            divObj.style.width = "842px";
            divObj.style.height = "578px";
            divObj.style.display = "none";
            divObj.id = "wbx-details-div";
            document.body.appendChild(divObj);
        } else {
            divObj.innerHTML = "";
        }

        var iframeObj = document.createElement("iframe");
        var iframeId = "iframeObj";
        iframeObj.id = iframeId;

        iframeObj.name = iframeId;
        iframeObj.width = WBXGALLERY.GalleryManager.FrameOptions.width;
        iframeObj.height = WBXGALLERY.GalleryManager.FrameOptions.height;
        iframeObj.frameBorder = WBXGALLERY.GalleryManager.FrameOptions.frameBorder;
        iframeObj.scrolling = WBXGALLERY.GalleryManager.FrameOptions.scrolling;
        iframeObj.marginWidth = "0";
        iframeObj.marginHeight = "0";
        iframeObj.setAttribute("style","border:1px solid #000;");
        iframeObj.src = detailsUrl;
        divObj.appendChild(iframeObj);

        var closeObj = document.createElement("a");
        closeObj.id = "closeObj";
        closeObj.innerHTML = "Close";

        closeObj.onclick = function() { WBXGALLERY.GalleryManager.closeWidgetDetails() };

        var rightAmt = (WBXGALLERY.GalleryManager.FrameOptions.scrolling == "yes") ? "18px" : "0px";
        var closeBtnBGStyle = "url(" + WBXGALLERY.GalleryManager.cdnUrl + "/css/images/closebox.png) no-repeat";
        closeObj.style.background = closeBtnBGStyle;
        closeObj.style.display = "block";
        closeObj.style.position = "absolute";
        closeObj.style.top = "2px";
        closeObj.style.right = rightAmt;
        closeObj.style.width = "30px";
        closeObj.style.height = "30px";
        closeObj.style.textIndent = "-9999px";
        closeObj.style.overflow = "hidden";

        divObj.appendChild(closeObj);

        if (divObj.style.position == "absolute") {
            WBXGALLERY.GalleryManager.positionDetailsDiv();
        } else {
            divObj.style.display = "";
        }
    },

    closeWidgetDetails: function() {
        var objToRemove = document.getElementById("wbx-details-div");
        if (objToRemove != null) {
            setTimeout(function() {
                objToRemove.parentNode.removeChild(objToRemove);
            }, 100);
        }
        WBXGALLERY.GalleryManager.hideMask();
    },
    displayMask: function() {
        var browser = WBXGALLERY.GalleryManager.browser;
        var maskDiv = document.createElement("div");
        maskDiv.id = "wbx-mask-div";
        if (browser.isMac() && (browser.isFirefox() || browser.isCamino())) {
            //osx ff css opacity + flash wmode transparent doesn't work
            var maskBgImg = "url(" + WBXGALLERY.GalleryManager.cdnUrl + "/images/light-bg.png)";
            maskDiv.style.backgroundImage= maskBgImg;
            maskDiv.style.backgroundRepeat="repeat";
            WBXGALLERY.GalleryManager.insertCssText('body * { opacity: 1.0 !important; }',document, null, "wbx-hide-opacity-style");
        } else {
            maskDiv.style.opacity = "0.4";
            maskDiv.style.MozOpacity = "0.4";
            maskDiv.style.filter = "alpha(opacity=40)";
            maskDiv.style.backgroundColor = "#FFF";
        }
        maskDiv.style.left = "0";
        maskDiv.style.top = "0";
        maskDiv.style.position = "absolute";
        maskDiv.style.zIndex = "5001";

        document.getElementsByTagName("body")[0].appendChild(maskDiv);
        var maskDivObj = document.getElementById("wbx-mask-div");
        WBXGALLERY.GalleryManager.resizeMask();
        if (maskDivObj) maskDivObj.onclick = function() { WBXGALLERY.GalleryManager.closeWidgetDetails(); };
    },

    hideMask: function() {
        var browser = WBXGALLERY.GalleryManager.browser;
        var maskDivObj = document.getElementById("wbx-mask-div");
        if (maskDivObj) {
            maskDivObj.style.display = "none";
            maskDivObj.parentNode.removeChild(maskDivObj);

            if (browser.isMac() && browser.isFirefox()) {
                //clear fix for flash opacity
                WBXGALLERY.GalleryManager.insertCssText('/* unhide */',document, null, "wbx-hide-opacity-style");
            }
        }
        if (window.scrollBy) {
            window.scrollBy(0,1);
            window.scrollBy(0,-1);
        }
    },
    resizeMask: function() {
        var maskDivObj = document.getElementById("wbx-mask-div");
        if (maskDivObj) {
            var docWidth = WBXGALLERY.GalleryManager.getDocumentWidth();
            var docHeight = WBXGALLERY.GalleryManager.getDocumentHeight();
            if (docWidth + "px" != maskDivObj.style.width) maskDivObj.style.width = docWidth + "px";
            if (docHeight + "px" != maskDivObj.style.height) maskDivObj.style.height = docHeight + "px";
        }
    },
    getDocumentHeight: function() {
        var browser = WBXGALLERY.GalleryManager.browser;
        var mode = document.compatMode;
        var scrollHeight = (mode != 'CSS1Compat') ? document.body.scrollHeight : document.documentElement.scrollHeight;
        var viewportHeight = self.innerHeight; // Safari, Opera
        if ( (browser.isSafari() || mode || browser.isIE()) && !browser.isOpera() ) { // IE, Gecko
            viewportHeight = (mode == 'CSS1Compat') ?
                             document.documentElement.clientHeight : // Standards
                             document.body.clientHeight; // Quirks
        }
        return Math.max(scrollHeight, viewportHeight);
    },

    getDocumentWidth: function() {
        var browser = WBXGALLERY.GalleryManager.browser;
        var mode = document.compatMode;
        var scrollWidth = (mode != 'CSS1Compat') ? document.body.scrollWidth : document.documentElement.scrollWidth;
        var viewportWidth = self.innerWidth;  // Safari
        if (browser.isSafari() || mode || browser.isIE()) { // IE, Gecko, Opera
            viewportWidth = (mode == 'CSS1Compat') ?
                            document.documentElement.clientWidth : // Standards
                            document.body.clientWidth; // Quirks
        }
        return Math.max(scrollWidth, viewportWidth);
    },

    insertCssText: function(cssStr, doc, URI, id) {
        if (!cssStr) {
            return;
        }
        var doc = document;
        var style;
        if (id) {
            style = doc.getElementById(id);
        }
        if (!style) {
            style = doc.createElement("style");
            style.setAttribute("type", "text/css");
            if (id) style.setAttribute("id",id);

            var head = doc.getElementsByTagName("head")[0];
            if (!head) {
                return;
            } else {
                head.appendChild(style);
            }
        } else {
            WBXGALLERY.GalleryManager.removeAllChildren(style);
        }
        if (style.styleSheet) {
            style.styleSheet.cssText = cssStr;
        } else {
            var cssText = doc.createTextNode(cssStr);
            style.appendChild(cssText);
        }
        return style;
    },
    removeAllChildren: function(parentNode) {
        try {
            if (parentNode.childNodes) {
                while (parentNode.childNodes.length>0) {
                    var toRemove = parentNode.childNodes[parentNode.childNodes.length-1];
                    parentNode.removeChild(toRemove);
                }
            }
        } catch (e) {
            //error
        }
    }

}
WBXGALLERY.GalleryManager.Gallery.prototype.setInitialContentFeed = function(feedUrl) {
    this.dfltCategorySrc = feedUrl;
}
WBXGALLERY.GalleryManager.Gallery.prototype.showLoadingGalleryIndicator = function() {
    var loadingEl = document.createElement("CENTER");
    var loadingImg = document.createElement("IMG");
    loadingImg.src = WBXGALLERY.GalleryManager.cdnUrl + "/images/wdgt-loader.gif";
    loadingImg.alt = "Loading...";
    loadingEl.appendChild(loadingImg);
    var cgCanvas = WBXGALLERY.GalleryManager.gallery.parentDiv;
    cgCanvas.appendChild(loadingEl);
}
WBXGALLERY.GalleryManager.Gallery.prototype.showLoadingWidgetsIndicator = function() {
    var cgView = this.getCGElement("DIV", "cg-view");
    cgView.innerHTML = "";
    var loadingEl = document.createElement("CENTER");
    var loadingImg = document.createElement("IMG");
    loadingImg.src = WBXGALLERY.GalleryManager.cdnUrl + "/images/wdgt-loader.gif";
    loadingImg.alt = "Loading...";
    loadingEl.appendChild(loadingImg);
    cgView.appendChild(loadingEl);
},
WBXGALLERY.GalleryManager.Gallery.prototype.getCGElement = function(tagName, className) {
    var elements = this.parentDiv.getElementsByTagName(tagName);
    for (var i = 0; i < elements.length; i++) {
        if (WBXGALLERY.GalleryManager.utils.hasClassName(elements[i], className)) return elements[i];
    }
    return null;
},

WBXGALLERY.GalleryManager.Gallery.prototype.render = function(loadToDivId, suppressHeaderFooter, loading) {
    if (!loading) {
        var cgCanvas = document.createElement("DIV");
        WBXGALLERY.GalleryManager.utils.addClass(cgCanvas, "cg-canvas");
        loadToDivId = loadToDivId.replace("#", ""); // fixes old jquery notations
        var loadToDiv = document.getElementById(loadToDivId);
        loadToDiv.innerHTML = "";
        loadToDiv.appendChild(cgCanvas);
        WBXGALLERY.GalleryManager.gallery.parentDiv = cgCanvas;
        this.showLoadingGalleryIndicator();
        var gallery = this;
        setTimeout(function() {
            gallery.render(loadToDivId, suppressHeaderFooter, true);
        }, 50);
        return;
    }
    // Make sure we only have one gallerymanager per page
    if (!WBXGALLERY.GalleryManager.isInitialized) {
        WBXGALLERY.GalleryManager.init();
    }
    this.suppressHeaderFooter = suppressHeaderFooter;

    // load gallery's metadata
    var galleryMetadataFeedUrl = WBXGALLERY.GalleryManager.baseUrl + "/cgalleryfeed/" + this.code + "?format=json&callback=WBXGALLERY.GalleryManager.gallery.galleryMetadataFeedHandler";
    var galleryStyleUrl = WBXGALLERY.GalleryManager.baseUrl + "/api/cgallery/1.0.1/assets/cgallery.css";
    WBXGALLERY.GalleryManager.loadScript(galleryMetadataFeedUrl);
    if (WBXGALLERY.GalleryManager.useClientStyleLoad) WBXGALLERY.GalleryManager.loadStyle(galleryStyleUrl);
}

WBXGALLERY.GalleryManager.Gallery.prototype.addUserContextParam = function(name, value) {
    this.usrCtxParams.push({ name: name, value: value });
}

WBXGALLERY.GalleryManager.Gallery.prototype.galleryMetadataFeedHandler = function(data) {
    this.galleryMetadata = data;
    WBXGALLERY.GalleryManager.gallery.parentDiv.innerHTML = "";

    var cgCanvas = this.parentDiv;
    WBXGALLERY.GalleryManager.utils.addClass(cgCanvas, this.galleryMetadata.theme);

    var cgBody = document.createElement("DIV");
    WBXGALLERY.GalleryManager.utils.addClass(cgBody, "cg-body");
    WBXGALLERY.GalleryManager.utils.addClass(cgBody, this.galleryMetadata.layout);
    var cgPush = document.createElement("DIV");
    WBXGALLERY.GalleryManager.utils.addClass(cgPush, "cg-push");

    var cgNav = document.createElement("DIV"); // UL for navigation will go in here
    cgNav.className = "cg-nav";

    var cgMain = document.createElement("DIV");
    cgMain.className = "cg-main";

    var cgContent = document.createElement("DIV");
    cgContent.className = "cg-content";

    var cgTitle = document.createElement("DIV");
    cgTitle.className = "cg-title";

    var cgH2 = document.createElement("H2");
    cgH2.innerHTML = "&nbsp;";

    var cgTools = document.createElement("DIV");
    cgTools.className = "cg-tools";

    cgTitle.appendChild(cgH2);
    cgTitle.appendChild(cgTools);

    var cgView = document.createElement("DIV");
    cgView.className = "cg-view";

    var cgPagination = document.createElement("DIV");
    cgPagination.className = "cg-pagination";

    var cgPagesort = document.createElement("DIV");
    cgPagesort.className = "cg-pagesort";

    cgPagination.appendChild(cgPagesort);
    var cgP = document.createElement("P");
    cgPagination.appendChild(cgP);

    cgContent.appendChild(cgTitle);
    cgContent.appendChild(cgView);
    cgContent.appendChild(cgPagination);
    cgMain.appendChild(cgContent);
    cgBody.appendChild(cgNav);
    cgBody.appendChild(cgMain);

    if (!this.suppressHeaderFooter) {
        var cgHdr = document.createElement("DIV");
        cgHdr.className = "cg-hdr";
        cgHdr.innerHTML = this.galleryMetadata.headerHtml;
        cgCanvas.appendChild(cgHdr);
    }

    cgCanvas.appendChild(cgBody);

    if (!this.suppressHeaderFooter) {
        var cgFtr = document.createElement("div");
        cgFtr.className = "cg-ftr";
        WBXGALLERY.GalleryManager.utils.addClass(cgFtr, this.galleryMetadata.theme);
        cgFtr.innerHTML = this.galleryMetadata.footerHtml;
        var cgBadge = document.createElement("DIV");
        WBXGALLERY.GalleryManager.utils.addClass(cgBadge, "cg-badge");
        var badgeLink = document.createElement("A");
        badgeLink.title = "Powered by Widgetbox";
        badgeLink.target = "_blank";
        badgeLink.href = "http://www.widgetbox.com/?wbx.refer=1";
        var badgeImg = document.createElement("IMG");
        badgeImg.width = "101";
        badgeImg.height = "26";
        badgeImg.border = "0";
        badgeImg.className = "cg-badge-img";
        badgeImg.alt = "Powered by Widgetbox";
        badgeImg.src = WBXGALLERY.GalleryManager.baseUrl + "/api/cgallery/1.0/assets/powered-wbx-light.png";
        badgeLink.appendChild(badgeImg);
        cgBadge.appendChild(badgeLink);
        cgFtr.appendChild(cgBadge);
        cgCanvas.appendChild(cgFtr);
    }
    WBXGALLERY.GalleryManager.loadScript(WBXGALLERY.GalleryManager.baseUrl + "/cgalleryfeed/" + this.code + "/?format=json&callback=WBXGALLERY.GalleryManager.gallery.galleryFeedHandler");
}
WBXGALLERY.GalleryManager.Gallery.prototype.galleryFeedHandler = function(data) {

    if (!data.isLite) {
        //render sort
        var cgPagesort = this.getCGElement("DIV", "cg-pagesort");
        var sortLabel = document.createElement("LABEL");
        sortLabel.setAttribute("for", "s");
        sortLabel.innerHTML = "Sort by";
        var sortSelect = document.createElement("select");
        sortSelect.setAttribute("name","s");
        sortSelect.setAttribute("id","wbx-cg-sort");
        sortSelect.setAttribute("onchange","WBXGALLERY.GalleryManager.gallery.onSortChange(this.options[this.selectedIndex])");

        sortSelect.options[0] = new Option('Most Popular','SUBSCRIPTIONS');
        sortSelect.options[1] = new Option('Hot Right Now','HOTNESS_QUOTIENT');
        sortSelect.options[2] = new Option('Newest','PUBLISHED_ON');
        sortSelect.options[3] = new Option('Top Rated','TOP_RATED');
        cgPagesort.appendChild(sortLabel);
        cgPagesort.appendChild(sortSelect);

        //render search
        var cgTools = this.getCGElement("DIV", "cg-tools");
        var cgForm = document.createElement("FORM");
        cgForm.onsubmit = function() { return WBXGALLERY.GalleryManager.gallery.onSearch(); };
        cgForm.action = "#";
        var cgSearchLabel = document.createElement("LABEL");
        cgSearchLabel.innerHTML = "Search";
        var cgSearchInput = document.createElement("INPUT");
        cgSearchInput.className = "cg-search";
        cgForm.appendChild(cgSearchLabel);
        cgForm.appendChild(cgSearchInput);
        cgTools.appendChild(cgForm);
    }
    WBXGALLERY.GalleryManager.gallery.renderCats(data);
}

WBXGALLERY.GalleryManager.Gallery.prototype.renderCats = function(data) {
    this.allCategories = data.categories;
    var ul = document.createElement("ul");
    var feedListUrl = this.dfltCategorySrc;

    for (var i = 0; i < data.categories.length; i++) {
        var cat = data.categories[i];
        var li = document.createElement("li");
        var a = document.createElement("a");

        a.setAttribute("feed", cat.feedListUrl);
        a.setAttribute("href", "javascript:void('0')");
        a.innerHTML = cat.name;
        var sortBy = cat.dfltSortBy;
        var catUrl = cat.feedListUrl;
        this.setCategoryOnClick(a, data, sortBy, catUrl);
        li.appendChild(a);
        ul.appendChild(li);

        if (feedListUrl == null) {
            feedListUrl = cat.feedListUrl;
        }
    };

    this.getCGElement("DIV", "cg-nav").appendChild(ul);
    this.dfltCategorySrc = feedListUrl;
    this.loadCategory(this.dfltCategorySrc, this.page);
}
WBXGALLERY.GalleryManager.Gallery.prototype.setCategoryOnClick = function(a, data, sortBy, catUrl) {
    // setting the onclick event in a separate funtion due to a weird issue with scoping in for loop;
    a.onclick = function(event) {
        if (!data.isLite) {
            WBXGALLERY.GalleryManager.gallery.sortBy = sortBy;
            var opts = document.getElementById('wbx-cg-sort').options;
            for (var i = 0; i < opts.length; i++) {
                if (opts[i].value ==  sortBy) {
                    opts[i].selected = true;
                }
            }
        }
        WBXGALLERY.GalleryManager.gallery.loadCategory(catUrl);
        return false;
    };
}

WBXGALLERY.GalleryManager.Gallery.prototype.loadCategory = function(src, page, searchQuery, loading) {
    if (!loading) {
        this.showLoadingWidgetsIndicator();
        var gallery = this;
        setTimeout(function() {
            gallery.loadCategory(src, page, searchQuery, true);
        }, 50);
        return;
    }
    this.searchQuery = searchQuery;
    var loader = document.createElement("script");
    this.currentCategorySrc = src;

    var cgPagesort = this.getCGElement("DIV", "cg-pagesort");
    if (this.searchQuery) {
        var searchParam = searchQuery.replace(/ /g, '+');
        src = WBXGALLERY.GalleryManager.baseUrl + '/cgalleryfeed/' + this.code + '/search/' + searchParam;
        if (cgPagesort) cgPagesort.style.visibility = "hidden";
    } else {
        if (cgPagesort) cgPagesort.style.visibility = "visible";
    }
    var additionalParams = "";
    if (this.widgetsDisplayed) additionalParams += "&m=" + this.widgetsDisplayed;
    if (this.sortBy) additionalParams += "&s=" + this.sortBy;
    if (page) additionalParams += "&p=" + page;

    if (src != null) {
        var gallerySrc = src.replace('/cgalleryfeed/', '/cgallery/');
        if (additionalParams.length > 1) gallerySrc = gallerySrc + "?" + additionalParams.substring(1);
        this.currentHomeUrl = gallerySrc; // save this for use by back buttons etc.
    }
    var feedFormatParams = "";
    feedFormatParams += "&format=json";
    feedFormatParams += "&callback=WBXGALLERY.GalleryManager.gallery.contentFeedHandler";
    additionalParams += feedFormatParams;

    var selectedCateogryFeedUrl = (this.currentCategorySrc != null && this.currentCategorySrc.indexOf("?") > 0) ? this.currentCategorySrc.substring(0, this.currentCategorySrc.indexOf("?")) : this.currentCategorySrc;
    if (src != null && src.indexOf("?") > 0) src = src.substring(0, src.indexOf("?")); // remove query string
    if (additionalParams.length > 1) src = src + "?" + additionalParams.substring(1); // append new query string if needed


    var existingHeadScript = document.getElementById("categoryHeadScript");
    if (existingHeadScript) document.getElementsByTagName("head")[0].removeChild(existingHeadScript);

    loader.setAttribute("src", src);
    loader.id = "categoryHeadScript";
    document.getElementsByTagName("head")[0].appendChild(loader);

    var cgNav = this.getCGElement("DIV", "cg-nav");
    var navbarLinks = cgNav.getElementsByTagName("A");

    for (var i = 0; navbarLinks != null && i < navbarLinks.length; i++) {
        var navbarLink = navbarLinks[i];
        if (navbarLink.getAttribute("feed") == selectedCateogryFeedUrl) {
            navbarLink.className = "active";
        } else {
            navbarLink.className = "";
        }
    }
    this.refreshContentTitle();
}
WBXGALLERY.GalleryManager.Gallery.prototype.setThumbNailClick = function(thumbImg, widgetId) {
    thumbImg.onclick = function() {
        WBXGALLERY.GalleryManager.gallery.viewDetails(widgetId);
    }
}
WBXGALLERY.GalleryManager.Gallery.prototype.contentFeedHandler = function(data) {
    var cgView = this.getCGElement("DIV", "cg-view");

    if (data.widgets == null || data.widgets.length == 0) {
        cgView.innerHTML = "<br /><center>No widgets to display.</center>";
    } else {
        cgView.innerHTML = "";
        var itemUl = document.createElement("UL");
        itemUl.className = this.galleryMetadata.viewOptions;

        for (var i = 0; i < data.widgets.length; i++) {
            var widget = data.widgets[i];
            var widgetId = widget.id;
            var widgetLi = document.createElement("LI");

            var widgetLink = document.createElement("A");
            widgetLink.href = "javascript:WBXGALLERY.GalleryManager.gallery.viewDetails(\'" + widgetId + "\')";

            var thumbDiv = document.createElement("DIV");
            thumbDiv.className = "cg-thumb";

            var thumbImg = document.createElement("IMG");
            thumbImg.src = widget.thumbUrl;
            thumbImg.width = "96";
            thumbImg.alt = "Icon";
            this.setThumbNailClick(thumbImg, widgetId)
            thumbDiv.appendChild(thumbImg);
            widgetLink.appendChild(thumbDiv);

            var widgetName = document.createElement("H3");
            widgetName.innerHTML = widget.name;
            widgetLink.appendChild(widgetName);

            // additional metadata
            var cgDevname = document.createElement("P");
            cgDevname.className = "cg-devname";
            var devText = document.createTextNode("by ");
            var devSpan = document.createElement("SPAN");
            devSpan.innerHTML = widget.developerName;
            cgDevname.appendChild(devText);
            cgDevname.appendChild(devSpan);
            widgetLink.appendChild(cgDevname);

            var cgDesc = document.createElement("P");
            cgDesc.className = "cg-desc";
            cgDesc.innerHTML = widget.description;
            widgetLink.appendChild(cgDesc);

            var cgAttrib = document.createElement("DIV");
            cgAttrib.className = "cg-attrib";
            var cgRatingbar = document.createElement("SPAN");
            cgRatingbar.className = "cg-ratingbar";
            var ratingSpan = document.createElement("SPAN");
            var ratingPercent = (widget.avgUserRating / 5) * 100;
            ratingSpan.style.width = ratingPercent + "%";
            cgRatingbar.appendChild(ratingSpan);
            var cgInstalls = document.createElement("P");
            cgInstalls.className = "cg-installs";
            var installsText = (parseInt(widget.subscriptionCountTotal) == 1) ? " install" : " installs";
            cgInstalls.innerHTML = widget.subscriptionCountTotal + installsText;
            cgAttrib.appendChild(cgRatingbar);
            cgAttrib.appendChild(cgInstalls);
            widgetLink.appendChild(cgAttrib);

            widgetLi.appendChild(widgetLink);
            itemUl.appendChild(widgetLi);
        };

        cgView.appendChild(itemUl);
    }
    this.renderPagination(data, WBXGALLERY.GalleryManager.baseUrl + '/cgalleryfeed' + data.request);
}

WBXGALLERY.GalleryManager.Gallery.prototype.renderPagination = function(data, src) {
    var cgPagination = this.getCGElement("DIV", "cg-pagination");
    var p = cgPagination.getElementsByTagName("P")[0];
    p.innerHTML = "";
    var firstLink;
    var prevLink;
    var nextLink;
    var lastLink;
    var maxPage;
    var firstPage;

    if (data.page < 7) {
        firstPage = 1;
        maxPage = 7;
    } else {

        firstPage = parseInt(data.page) - 3;
        maxPage = parseInt(data.page) + 3;
    }

    if (maxPage > data.pages) {
        maxPage = data.pages;
    }

    var pagesText = document.createElement("span");
    pagesText.className = "ext";

    pagesText.innerHTML = "<strong>Pages: </strong>" + data.pages + "  -";
    p.appendChild(pagesText);


    if (data.page == 1) {
        firstLink = document.createElement("span");
        firstLink.innerHTML = "&laquo; First";
        prevLink = document.createElement("span");
        prevLink.innerHTML = "&lsaquo; Prev";
    } else {
        firstLink = document.createElement("a");
        firstLink.setAttribute("href", "javascript:void('0')");
        firstLink.onclick = function(event) {
            WBXGALLERY.GalleryManager.gallery.loadCategory(src, 1);
        }
        firstLink.innerHTML = "&laquo; First";

        prevLink = document.createElement("a");
        prevLink.setAttribute("href", "javascript:void('0')");
        prevLink.onclick = function(event) {
            WBXGALLERY.GalleryManager.gallery.loadCategory(src, parseInt(data.page) - 1);
        }
        prevLink.innerHTML = "&lsaquo; Prev";
    }

    p.appendChild(firstLink);
    p.appendChild(prevLink);

    for (var i = firstPage; i <= maxPage; i++) {

        if (i == data.page) {
            var el = document.createElement("em");
            el.innerHTML = i;
            p.appendChild(el);
        } else {
            var pageToLoad = i;
            var a = document.createElement("a");
            a.setAttribute("href", "javascript:void('0')");
            this.setPageNumberOnClick(a, src, pageToLoad);
            a.innerHTML = i;
            p.appendChild(a);
        }
    }

    if (data.page == maxPage) {
        nextLink = document.createElement("span");
        nextLink.innerHTML = "Next &rsaquo;";
        lastLink = document.createElement("span");
        lastLink.innerHTML = "Last &raquo;";
    } else {
        nextLink = document.createElement("a");
        nextLink.setAttribute("href", "javascript:void('0')");
        nextLink.onclick = function(event) {
            WBXGALLERY.GalleryManager.gallery.loadCategory(src, parseInt(data.page) + 1);
        }
        nextLink.innerHTML = "Next &rsaquo;";

        lastLink = document.createElement("a");
        lastLink.setAttribute("href", "javascript:void('0')");
        lastLink.onclick = function(event) {
            WBXGALLERY.GalleryManager.gallery.loadCategory(src, parseInt(data.pages));
        }
        lastLink.innerHTML = "Last &raquo;";
    }

    p.appendChild(nextLink);
    p.appendChild(lastLink);

}

WBXGALLERY.GalleryManager.Gallery.prototype.setPageNumberOnClick = function (a, src, pageToLoad) {
    a.onclick = function(event) {
        WBXGALLERY.GalleryManager.gallery.loadCategory(src, pageToLoad);
    }
}
WBXGALLERY.GalleryManager.Gallery.prototype.viewDetails = function (widgetId, renderDiv) {
    // build a URL for the details page including any special parameters it may need

    var detailsUrl = WBXGALLERY.GalleryManager.baseUrl + '/cgallery/' + WBXGALLERY.GalleryManager.gallery.code + '/widget/' + widgetId;
    var queryString = "";
    if (this.isPreview) queryString += "&preview=true";
    for (var i = 0; i < this.usrCtxParams.length; i++) {
        var usrCtxParam = this.usrCtxParams[i];
        queryString += "&" + usrCtxParam.name + "=" + usrCtxParam.value;
    }
    if (this.galleryMetadata.targetUrl) queryString += "&targetUrl=" + escape(this.galleryMetadata.targetUrl);
    if (this.enableBackButton) queryString += "&r=" + escape(this.currentHomeUrl);
    //if (this.detailsViewMode == "LIGHTBOX") queryString += "&bdOnly=true";
    if (queryString.length > 1)  {
        detailsUrl += "?" + queryString.substring(1);
    }
    switch (this.detailsViewMode) {
        case("DIV") :
            if (renderDiv) {
                renderDiv["detailsFrame"].src = '/cgallery/'+ this.code +'/widget/' + widgetId;
            } else {
                var detailsFrame = document.createElement("iframe");

                detailsFrame.id = "detailsFrame";
                detailsFrame.src = '/cgallery/'+ this.code +'/widget/' + widgetId;
                detailsFrame.height = 525;
                detailsFrame.width = 1000;

                renderDiv.appendChild(detailsFrame)
            }
            break;
        case("SELF"):
            window.location.href = detailsUrl;
            break;
        case("LIGHTBOX"):
        default:
            WBXGALLERY.GalleryManager.showFrame(detailsUrl);
            break;
    }

}

WBXGALLERY.GalleryManager.Gallery.prototype.onSortChange = function (newSort) {
    WBXGALLERY.GalleryManager.gallery.sortBy = newSort.value;
    WBXGALLERY.GalleryManager.gallery.loadCategory(WBXGALLERY.GalleryManager.gallery.currentCategorySrc);
}

WBXGALLERY.GalleryManager.Gallery.prototype.onSearch = function () {
    var cgTools = this.getCGElement("DIV", "cg-tools");
    var searchField = cgTools.getElementsByTagName("INPUT")[0];
    var searchQuery = searchField.value;
    WBXGALLERY.GalleryManager.gallery.loadCategory(WBXGALLERY.GalleryManager.gallery.currentCategorySrc, 0, searchQuery);
    return false;
}

WBXGALLERY.GalleryManager.Gallery.prototype.refreshContentTitle = function () {
    var contentTitle = "";
    if (this.searchQuery != null) {
        contentTitle = "Search Results for " + this.searchQuery;
    } else {
        for (var i = 0; i < this.allCategories.length; i++) {
            var cat = this.allCategories[i];
            if (this.currentCategorySrc == cat.feedListUrl) {
                 contentTitle = cat.name;
            }
        }
    }
    var cgTitle = this.getCGElement("DIV", "cg-title");
    var titleEl = cgTitle.getElementsByTagName("H2")[0];
    titleEl.innerHTML = contentTitle;
}
WBXGALLERY.GalleryManager.Gallery.prototype.setViewOption = function (viewOption, refresh) {
    this.galleryMetadata.viewOptions = viewOption;
    if (refresh) {
        // update the actual gallery markup
        var cgView = this.getCGElement("DIV", "cg-view");
        var cgUl = cgView.getElementsByTagName("UL")[0];
        if (cgUl) cgUl.className = this.galleryMetadata.viewOptions;
    }
}
WBXGALLERY.GalleryManager.Gallery.prototype.setLayout = function (layout, refresh) {
    this.galleryMetadata.layout = layout;
    if (refresh) {
        // update the actual gallery markup
        var cgBody = (this.parentDiv && this.parentDiv.childNodes.length > 0) ? this.parentDiv.childNodes[1] : null;
        if (cgBody) {
            cgBody.className = "cg-body";
            WBXGALLERY.GalleryManager.utils.addClass(cgBody, this.galleryMetadata.layout);
        }
    }
}
WBXGALLERY.GalleryManager.Gallery.prototype.setTheme = function (theme, refresh) {
    this.galleryMetadata.theme = theme;
    if (refresh) {
        // update the actual gallery markup
        if (this.parentDiv) {
            this.parentDiv.className = "cg-canvas";
            WBXGALLERY.GalleryManager.utils.addClass(this.parentDiv, this.galleryMetadata.theme);
        }
        var cgFtr = this.getCGElement("DIV", "cg-ftr");
        cgFtr.className = "cg-ftr";
        if (cgFtr) {
            cgFtr.className = "cg-ftr";
            WBXGALLERY.GalleryManager.utils.addClass(cgFtr, this.galleryMetadata.theme);
        }
    }
}
WBXGALLERY.GalleryManager.Gallery.prototype.setTitle = function (title, refresh) {
    this.galleryMetadata.title = title;
    if (refresh) {
        // update the actual gallery markup
        var header = this.getCGElement("DIV", "cg-hdr");
        if (header) header.innerHTML = this.galleryMetadata.title;
    }
}
WBXGALLERY.GalleryManager.Gallery.prototype.refreshCategories = function () {
    var cgNav = this.getCGElement("DIV", "cg-nav");
    cgNav.innerHTML = "";
    var loadingImg = document.createElement("IMG");
    loadingImg.src = WBXGALLERY.GalleryManager.cdnUrl + "/images/wdgt-loader.gif";
    loadingImg.alt = "Loading...";
    cgNav.appendChild(loadingImg);
    var d = new Date();
    var catagoriesUrl = WBXGALLERY.GalleryManager.baseUrl + "/cgalleryfeed/" + this.code + "/?format=json";
    catagoriesUrl += "&callback=WBXGALLERY.GalleryManager.gallery.refreshCategoriesCallback";
    catagoriesUrl += "&timestamp=" + d.getMilliseconds();
    WBXGALLERY.GalleryManager.loadScript(catagoriesUrl);
}
WBXGALLERY.GalleryManager.Gallery.prototype.refreshCategoriesCallback = function (data) {
    var cgNav = this.getCGElement("DIV", "cg-nav");
    cgNav.innerHTML = "";
    this.dfltCategorySrc = null;
    this.renderCats(data);
}