jquery-dynamic-content-menu.js

/**
 * See (http://jquery.com/).
 * @name $
 * @class
 * See the jQuery Library  (http://jquery.com/) for full details.  This just
 * documents the function and classes that are added to jQuery by this plug-in.
 */

/**
 * See (http://jquery.com/)
 * @name fn
 * @class
 * See the jQuery Library  (http://jquery.com/) for full details.  This just
 * documents the function and classes that are added to jQuery by this plug-in.
 * @memberOf $
 */

(function(factory) {
    if (typeof define === 'function' && define.amd && define.amd.jQuery) {
      // AMD. Register as anonymous module.
      define(['jquery'], factory);
    } else if (typeof module !== 'undefined' && module.exports) {
      // CommonJS Module
      factory(require("jquery"));
    } else {
      // Browser globals.
      factory(jQuery);
    }
  }(function($) {
    "use strict";
    
    //Constants
    var VERSION = "1.0.0",
        PLUGIN_NS = 'DynamicContentMenu',
        PLUGIN_NAME = 'dynamicContentMenu',
        pluginClassName = PLUGIN_NAME,
        // pluginClass = "." + pluginClassName,
        pluginFocusClassName = "active",
        pluginHideClassName = PLUGIN_NAME + "_hide",
        // pluginHideClass = "." + pluginHideClassName,
        headerClassName = PLUGIN_NAME + "__header",
        headerClass = "." + headerClassName,
        subheaderClassName = PLUGIN_NAME + "__subheader",
        subheaderClass = "." + subheaderClassName,
        itemClassName = PLUGIN_NAME + "__item",
        itemClass = "." + itemClassName,
        extendPageClassName = PLUGIN_NAME + "__extend-page",
        extendPageClass = "." + extendPageClassName;

    // PLUGIN CONSTRUCTOR
    // =======================
    var DynamicContentMenu = function (element, options) {
        this.options             = options;
        this.$element  = $(element);
        this._create(element);
    }

    DynamicContentMenu.DEFAULTS  = {
        // **context**: Accepts String: Any jQuery selector
        // The container element that holds all of the elements used to generate the table of contents
        context: "body",

        // **ignoreSelector**: Accepts String: Any jQuery selector
        // A selector to any element that would be matched by selectors that you wish to be ignored
        ignoreSelector: null,

        // **selectors**: Accepts an Array of Strings: Any jQuery selectors
        // The element's used to generate the table of contents.  The order is very important since it will determine the table of content's nesting structure
        selectors: "h1, h2, h3",

        // **showAndHide**: Accepts a boolean: true or false
        // Used to determine if elements should be shown and hidden
        showAndHide: true,

        // **showEffect**: Accepts String: "none", "fadeIn", "show", or "slideDown"
        // Used to display any of the table of contents nested items
        showEffect: "slideDown",

        // **showEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
        // The time duration of the show animation
        showEffectSpeed: "medium",

        // **hideEffect**: Accepts String: "none", "fadeOut", "hide", or "slideUp"
        // Used to hide any of the table of contents nested items
        hideEffect: "slideUp",

        // **hideEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
        // The time duration of the hide animation
        hideEffectSpeed: "medium",

        // **smoothScroll**: Accepts a boolean: true or false
        // Determines if a jQuery animation should be used to scroll to specific table of contents items on the page
        smoothScroll: true,

        // **smoothScrollSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
        // The time duration of the smoothScroll animation
        smoothScrollSpeed: "medium",

        // **scrollTo**: Accepts Number (pixels)
        // The amount of space between the top of page and the selected table of contents item after the page has been scrolled
        scrollTo: 0,

        // **showAndHideOnScroll**: Accepts a boolean: true or false
        // Determines if table of contents nested items should be shown and hidden while scrolling
        showAndHideOnScroll: true,

        // **highlightOnScroll**: Accepts a boolean: true or false
        // Determines if table of contents nested items should be highlighted (set to a different color) while scrolling
        highlightOnScroll: true,

        // **highlightOffset**: Accepts a number
        // The offset distance in pixels to trigger the next active table of contents item
        highlightOffset: 40,

        // **theme**: Accepts a string: "bootstrap", "jqueryui", or "none"
        // Determines if Twitter Bootstrap, jQueryUI, or Menu classes should be added to the table of contents
        theme: "material",

        // **extendPage**: Accepts a boolean: true or false
        // If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased
        extendPage: true,

        // **extendPageOffset**: Accepts a number: pixels
        // How close to the bottom of the page a user must scroll before the page is extended
        extendPageOffset: 100,

        // **history**: Accepts a boolean: true or false
        // Adds a hash to the page url to maintain history
        history: true,

        // **scrollHistory**: Accepts a boolean: true or false
        // Adds a hash to the page url, to maintain history, when scrolling to a DynamicContentMenu item
        scrollHistory: false,

        // **hashGenerator**: How the hash value (the anchor segment of the URL, following the
        // # character) will be generated.
        //
        // "compact" (default) - #CompressesEverythingTogether
        // "pretty" - #looks-like-a-nice-url-and-is-easily-readable
        // function(text, element){} - Your own hash generation function that accepts the text as an
        // argument, and returns the hash value.
        hashGenerator: "compact",

        // **highlightDefault**: Accepts a boolean: true or false
        // Set's the first DynamicContentMenu item as active if no other DynamicContentMenu item is active.
        highlightDefault: true
    };

    // _Create
    // -------
    //Constructs the plugin.  Only called once.
    DynamicContentMenu.prototype._create =  function(element) {

        var self = this;
        
        self.extendPageScroll = true;

        // Internal array that keeps track of all DynamicContentMenu items (Helps to recognize if there are duplicate DynamicContentMenu item strings)
        self.items = [];

        // Generates the HTML for the dynamic table of contents
        self._generateHtmlMenu();

        // Add theme
        self._addCSSTheme();

        // Adds CSS classes to the newly generated table of contents HTML
        self._addCSSClasses();

        self.webkit = (function() {

            for(var prop in window) {

                if(prop) {

                    if(prop.toLowerCase().indexOf("webkit") !== -1) {

                        return true;

                    }

                }

            }

            return false;

        }());

        // Adds jQuery event handlers to the newly generated table of contents
        self._setEventHandlers();
        
        // Binding to the Window load event to make sure the correct scrollTop is calculated
        $(window).on("load", function(e) {
            
            // Sets the active DynamicContentMenu item
            self._setActiveElement(true);
            
            // Once all animations on the page are complete, this callback function will be called
            $("html, body").promise().done(function() {

                setTimeout(function() {

                    self.extendPageScroll = false;

                },0);

            });

        });

    }

    // _generateHtmlMenu
    // ------------
    //      Generates the HTML for the dynamic table of contents
    DynamicContentMenu.prototype._generateHtmlMenu =  function() {

        // _Local variables_

        // Stores the plugin context in the self variable
        var self = this,

            // All of the HTML tags found within the context provided (i.e. body) that match the top level jQuery selector above
            firstElem,

            // Instantiated variable that will store the top level newly created unordered list DOM element
            ul,
            ignoreSelector = self.options.ignoreSelector;

            // If the selectors option has a comma within the string
            if(this.options.selectors.indexOf(",") !== -1) {

                // Grabs the first selector from the string
                firstElem = $(this.options.context).find(this.options.selectors.replace(/ /g,"").substr(0, this.options.selectors.indexOf(",")));

            }

            // If the selectors option does not have a comman within the string
            else {

                // Grabs the first selector from the string and makes sure there are no spaces
                firstElem = $(this.options.context).find(this.options.selectors.replace(/ /g,""));

            }

        if(!firstElem.length) {

            self.$element.addClass(pluginHideClassName);

            return;

        }

        self.$element.addClass(pluginClassName);
        
        // Loops through each top level selector
        firstElem.each(function(index) {
            
            //If the element matches the ignoreSelector then we skip it
            if($(this).is(ignoreSelector)) {
                return;
            }
            
            // Creates an unordered list HTML element and adds a dynamic ID and standard class name
            ul = $("<ul/>", {
                "id": headerClassName + index,
                "class": headerClassName
            }).
            // Appends a top level list item HTML element to the previously created HTML header
            append(self._nestElements($(this), index));
            
            // Add the created unordered list element to the HTML element calling the plugin
            self.$element.append(ul);

            // Finds all of the HTML tags between the header and subheader elements
            $(this).nextUntil(this.nodeName.toLowerCase()).each(function() {

                // If there are no nested subheader elemements
                if($(this).find(self.options.selectors).length === 0) {

                    // Loops through all of the subheader elements
                    $(this).filter(self.options.selectors).each(function() {

                        //If the element matches the ignoreSelector then we skip it
                        if($(this).is(ignoreSelector)) {
                            return;
                        }

                        self._appendSubheaders.call(this, self, ul);

                    });

                }

                // If there are nested subheader elements
                else {

                    // Loops through all of the subheader elements
                    $(this).find(self.options.selectors).each(function() {

                        //If the element matches the ignoreSelector then we skip it
                        if($(this).is(ignoreSelector)) {
                            return;
                        }

                        self._appendSubheaders.call(this, self, ul);

                    });

                }

            });

        });

    };

    DynamicContentMenu.prototype._setActiveElement = function(pageload) {

        var self = this,

            hash = window.location.hash.substring(1),

            elem = self.$element.find('li[data-unique="' + hash + '"]');

        if(hash.length) {

            // Removes highlighting from all of the list item's
            self.$element.find("." + self.focusClass).removeClass(self.focusClass);
            
            // Highlights the current list item that was clicked
            elem.addClass(self.focusClass);

            // If the showAndHide option is true
            if(self.options.showAndHide) {

                // Triggers the click event on the currently focused DynamicContentMenu item
                elem.click();

            }

        }

        else {

            // Removes highlighting from all of the list item's
            self.$element.find("." + self.focusClass).removeClass(self.focusClass);

            if(!hash.length && pageload && self.options.highlightDefault) {

                // Highlights the first DynamicContentMenu item if no other items are highlighted
                self.$element.find(itemClass).first().addClass(self.focusClass);

            }

        }

        return self;

    },

    // _nestElements
    // -------------
    //      Helps create the table of contents list by appending nested list items
    DynamicContentMenu.prototype._nestElements = function(self, index) {

        var arr, item, hashValue;

        arr = $.grep(this.items, function (item) {

            return item === self.text();

        });

        // If there is already a duplicate DynamicContentMenu item
        if(arr.length) {

            // Adds the current DynamicContentMenu item text and index (for slight randomization) to the internal array
            this.items.push(self.text() + index);

        }

        // If there not a duplicate DynamicContentMenu item
        else {

            // Adds the current DynamicContentMenu item text to the internal array
            this.items.push(self.text());

        }

        hashValue = this._generateHashValue(arr, self, index);

        // Appends a list item HTML element to the last unordered list HTML element found within the HTML element calling the plugin
        item = $("<li/>", {

            // Sets a common class name to the list item
            "class": itemClassName,

            "data-unique": hashValue

        }).append($("<a/>", {

            "text": self.text()

        }));

        // Adds an HTML anchor tag before the currently traversed HTML element
        self.before($("<div/>", {

            // Sets a name attribute on the anchor tag to the text of the currently traversed HTML element (also making sure that all whitespace is replaced with an underscore)
            "name": hashValue,

            "data-unique": hashValue

        }));

        return item;

    },

    // _generateHashValue
    // ------------------
    //      Generates the hash value that will be used to refer to each item.
    DynamicContentMenu.prototype._generateHashValue = function(arr, self, index) {

        var hashValue = "",
            hashGeneratorOption = this.options.hashGenerator;

        if (hashGeneratorOption === "pretty") {

            // prettify the text
            hashValue = self.text().toLowerCase().replace(/\s/g, "-");

            // fix double hyphens
            while (hashValue.indexOf("--") > -1) {
                hashValue = hashValue.replace(/--/g, "-");
            }

            // fix colon-space instances
            while (hashValue.indexOf(":-") > -1) {
                hashValue = hashValue.replace(/:-/g, "-");
            }

        } else if (typeof hashGeneratorOption === "function") {

            // call the function
            hashValue = hashGeneratorOption(self.text(), self);

        } else {

            // compact - the default
            hashValue = self.text().replace(/\s/g, "");

        }

        // add the index if we need to
        if (arr.length) { hashValue += ""+index; }

        // return the value
        return hashValue;

    },

    // _appendElements
    // ---------------
    //      Helps create the table of contents list by appending subheader elements

    DynamicContentMenu.prototype._appendSubheaders = function(self, ul) {

        // The current element index
        var index = $(this).index(self.options.selectors),

            // Finds the previous header DOM element
            previousHeader = $(self.options.selectors).eq(index - 1),

            currentTagName = +$(this).prop("tagName").charAt(1),

            previousTagName = +previousHeader.prop("tagName").charAt(1),

            lastSubheader;

        // If the current header DOM element is smaller than the previous header DOM element or the first subheader
        if(currentTagName < previousTagName) {

            // Selects the last unordered list HTML found within the HTML element calling the plugin
            self.$element.find(subheaderClass + "[data-tag=" + currentTagName + "]").last().append(self._nestElements($(this), index));

        }

        // If the current header DOM element is the same type of header(eg. h4) as the previous header DOM element
        else if(currentTagName === previousTagName) {

            ul.find(itemClass).last().after(self._nestElements($(this), index));

        }

        else {

            // Selects the last unordered list HTML found within the HTML element calling the plugin
            ul.find(itemClass).last().

            // Appends an unorderedList HTML element to the dynamic `unorderedList` variable and sets a common class name
            after($("<ul/>", {

                "class": subheaderClassName,

                "data-tag": currentTagName

            })).next(subheaderClass).

            // Appends a list item HTML element to the last unordered list HTML element found within the HTML element calling the plugin
            append(self._nestElements($(this), index));
        }

    },

    // _setEventHandlers
    // ----------------
    //      Adds jQuery event handlers to the newly generated table of contents
    DynamicContentMenu.prototype._setEventHandlers = function() {

        // _Local variables_

        // Stores the plugin context in the self variable
        var self = this,

            // Instantiates a new variable that will be used to hold a specific element's context
            $self,

            // Instantiates a new variable that will be used to determine the smoothScroll animation time duration
            duration;

        // Event delegation that looks for any clicks on list item elements inside of the HTML element calling the plugin
        this.$element.on("click." + PLUGIN_NS, "li", function(event) {

            if(self.options.history) {

                window.location.hash = $(this).attr("data-unique");

            }

            // Removes highlighting from all of the list item's
            self.$element.find("." + self.focusClass).removeClass(self.focusClass);

            // Highlights the current list item that was clicked
            $(this).addClass(self.focusClass);

            // If the showAndHide option is true
            if(self.options.showAndHide) {

                var elem = $('li[data-unique="' + $(this).attr("data-unique") + '"]');

                self._triggerShow(elem);

            }

            self._scrollTo($(this));

        });

        // Mouseenter and Mouseleave event handlers for the list item's within the HTML element calling the plugin
        this.$element.find("li").on({

            // Mouseenter event handler
            "mouseenter.DynamicContentMenu": function() {

                // Adds a hover CSS class to the current list item
                $(this).addClass(self.hoverClass);

                // Makes sure the cursor is set to the pointer icon
                $(this).css("cursor", "pointer");

            },

            // Mouseleave event handler
            "mouseleave.DynamicContentMenu": function() {

                if(self.options.theme !== "bootstrap") {

                    // Removes the hover CSS class from the current list item
                    $(this).removeClass(self.hoverClass);

                }

            }
        });

        // only attach handler if needed (expensive in IE)
        if (self.options.extendPage || self.options.highlightOnScroll || self.options.scrollHistory || self.options.showAndHideOnScroll)
        {
        // Window scroll event handler
            $(window).on("scroll.DynamicContentMenu", function() {

                // Once all animations on the page are complete, this callback function will be called
                $("html, body").promise().done(function() {

                    // Local variables

                    // Stores how far the user has scrolled
                    var winScrollTop = $(window).scrollTop(),

                        // Stores the height of the window
                        winHeight = $(window).height(),

                        // Stores the height of the document
                        docHeight = $(document).height(),

                        scrollHeight = $("body")[0].scrollHeight,

                        // Instantiates a variable that will be used to hold a selected HTML element
                        elem,

                        lastElem,

                        lastElemOffset,

                        currentElem;

                    if(self.options.extendPage) {

                        // If the user has scrolled to the bottom of the page and the last DynamicContentMenu item is not focused
                        if((self.webkit && winScrollTop >= scrollHeight - winHeight - self.options.extendPageOffset) || (!self.webkit && winHeight + winScrollTop > docHeight - self.options.extendPageOffset)) {

                            if(!$(extendPageClass).length) {

                                lastElem = $('div[data-unique="' + $(itemClass).last().attr("data-unique") + '"]');

                                if(!lastElem.length) return;

                                // Gets the top offset of the page header that is linked to the last DynamicContentMenu item
                                lastElemOffset = lastElem.offset().top;

                                // Appends a div to the bottom of the page and sets the height to the difference of the window scrollTop and the last element's position top offset
                                $(self.options.context).append($("<div />", {

                                    "class": extendPageClassName,

                                    "height": Math.abs(lastElemOffset - winScrollTop) + "px",

                                    "data-unique": extendPageClassName

                                }));

                                if(self.extendPageScroll) {

                                    currentElem = self.$element.find('li.active');

                                    self._scrollTo($('div[data-unique="' + currentElem.attr("data-unique") + '"]'));

                                }

                            }

                        }

                    }

                    // The zero timeout ensures the following code is run after the scroll events
                    setTimeout(function() {

                        // _Local variables_

                        // Stores the distance to the closest anchor
                        var closestAnchorDistance = null,

                            // Stores the index of the closest anchor
                            closestAnchorIdx = null,

                            // Keeps a reference to all anchors
                            anchors = $(self.options.context).find("div[data-unique]"),

                            anchorText;

                        // Determines the index of the closest anchor
                        anchors.each(function(idx) {
                            var distance = Math.abs(($(this).next().length ? $(this).next() : $(this)).offset().top - winScrollTop - self.options.highlightOffset);
                            if (closestAnchorDistance == null || distance < closestAnchorDistance) {
                                closestAnchorDistance = distance;
                                closestAnchorIdx = idx;
                            } else {
                                return false;
                            }
                        });

                        anchorText = $(anchors[closestAnchorIdx]).attr("data-unique");

                        // Stores the list item HTML element that corresponds to the currently traversed anchor tag
                        elem = $('li[data-unique="' + anchorText + '"]');

                        // If the `highlightOnScroll` option is true and a next element is found
                        if(self.options.highlightOnScroll && elem.length) {

                            // Removes highlighting from all of the list item's
                            self.$element.find("." + self.focusClass).removeClass(self.focusClass);

                            // Highlights the corresponding list item
                            elem.addClass(self.focusClass);

                        }

                        if(self.options.scrollHistory) {

                            if(window.location.hash !== "#" + anchorText) {

                                window.location.replace("#" + anchorText);

                            }
                        }

                        // If the `showAndHideOnScroll` option is true
                        if(self.options.showAndHideOnScroll && self.options.showAndHide) {
                            
                            self._triggerShow(elem, true);

                        }

                    }, 0);

                });

            });
        }

    },

    // Show
    // ----
    //      Opens the current sub-header
    DynamicContentMenu.prototype.show = function(elem, scroll) {

        // Stores the plugin context in the `self` variable
        var self = this,
            element = elem;

        // If the sub-header is not already visible
        if (!elem.is(":visible")) {

            // If the current element does not have any nested subheaders, is not a header, and its parent is not visible
            if(!elem.find(subheaderClass).length && !elem.parent().is(headerClass) && !elem.parent().is(":visible")) {

                // Sets the current element to all of the subheaders within the current header
                elem = elem.parents(subheaderClass).add(elem);

            }

            // If the current element does not have any nested subheaders and is not a header
            else if(!elem.children(subheaderClass).length && !elem.parent().is(headerClass)) {

                // Sets the current element to the closest subheader
                elem = elem.closest(subheaderClass);

            }

            //Determines what jQuery effect to use
            switch (self.options.showEffect) {

                //Uses `no effect`
                case "none":

                    elem.show();

                break;

                //Uses the jQuery `show` special effect
                case "show":

                    elem.show(self.options.showEffectSpeed);

                break;

                //Uses the jQuery `slideDown` special effect
                case "slideDown":
                
                    elem.slideDown(self.options.showEffectSpeed);

                break;

                //Uses the jQuery `fadeIn` special effect
                case "fadeIn":

                    elem.fadeIn(self.options.showEffectSpeed);

                break;

                //If none of the above options were passed, then a `jQueryUI show effect` is expected
                default:

                    elem.show();

                break;

            }

        }

        // If the current subheader parent element is a header
        if(elem.parent().is(headerClass)) {

            // Hides all non-active sub-headers
            self.hide($(subheaderClass).not(elem));

        }

        // If the current subheader parent element is not a header
        else {

            // Hides all non-active sub-headers
            self.hide($(subheaderClass).not(elem.closest(headerClass).find(subheaderClass).not(elem.siblings())));

        }

        // Maintains chainablity
        return self;

    },

    // Hide
    // ----
    //      Closes the current sub-header
    DynamicContentMenu.prototype.hide = function(elem) {

        // Stores the plugin context in the `self` variable
        var self = this;

        //Determines what jQuery effect to use
        switch (self.options.hideEffect) {

            // Uses `no effect`
            case "none":

                elem.hide();

            break;

            // Uses the jQuery `hide` special effect
            case "hide":

                elem.hide(self.options.hideEffectSpeed);

            break;

            // Uses the jQuery `slideUp` special effect
            case "slideUp":

                elem.slideUp(self.options.hideEffectSpeed);

            break;

            // Uses the jQuery `fadeOut` special effect
            case "fadeOut":

                elem.fadeOut(self.options.hideEffectSpeed);

            break;

            // If none of the above options were passed, then a `jqueryUI hide effect` is expected
            default:

                elem.hide();

            break;

        }

        // Maintains chainablity
        return self;
    };

    // _triggerShow
    // ------------
    //      Determines what elements get shown on scroll and click
    DynamicContentMenu.prototype._triggerShow = function(elem, scroll) {

        var self = this;

        // If the current element's parent is a header element or the next element is a nested subheader element
        if(elem.parent().is(headerClass) || elem.next().is(subheaderClass)) {

            // Shows the next sub-header element
            self.show(elem.next(subheaderClass), scroll);

        }

        // If the current element's parent is a subheader element
        else if(elem.parent().is(subheaderClass)) {

            // Shows the parent sub-header element
            self.show(elem.parent(), scroll);

        }

        // Maintains chainability
        return self;

    };

    // _addCSSTheme
    // --------------
    // Adds CSS classes theme
    DynamicContentMenu.prototype._addCSSTheme = function() {

        // If the user wants a material theme
         if(this.options.theme === "material") {
            this.$element.addClass("scod-theme-material");

        }

        //Maintains chainability
        return this;

    };

    // _addCSSClasses
    // --------------
    //      Adds CSS classes to the newly generated table of contents HTML
    DynamicContentMenu.prototype._addCSSClasses = function() {

        this.$element.find(headerClass + "," + subheaderClass).addClass("scod-flex-container");
        this.focusClass = pluginFocusClassName;
        //Maintains chainability
        return this;

    };

    // setOption
    // ---------
    //      Sets a single Menu option after the plugin is invoked
    DynamicContentMenu.prototype.setOption = function() {

        // Calls the jQueryUI Widget Factory setOption method
        $.Widget.prototype._setOption.apply(this, arguments);

    };

    // setOptions
    // ----------
    //      Sets a single or multiple Menu options after the plugin is invoked
    DynamicContentMenu.prototype.setOptions = function() {

        // Calls the jQueryUI Widget Factory setOptions method
        $.Widget.prototype._setOptions.apply(this, arguments);

    };

    // _scrollTo
    // ---------
    //      Scrolls to a specific element
    DynamicContentMenu.prototype._scrollTo = function(elem) {

        var self = this,
            duration = self.options.smoothScroll || 0,
            scrollTo = self.options.scrollTo,
            currentDiv = $('div[data-unique="' + elem.attr("data-unique") + '"]');

        if(!currentDiv.length) {

            return self;

        }

        // Once all animations on the page are complete, this callback function will be called
        $("html, body").promise().done(function() {

            // Animates the html and body element scrolltops
            $("html, body").animate({

                // Sets the jQuery `scrollTop` to the top offset of the HTML div tag that matches the current list item's `data-unique` tag
                "scrollTop": currentDiv.offset().top - ($.isFunction(scrollTo) ? scrollTo.call() : scrollTo) + "px"

            }, {

                // Sets the smoothScroll animation time duration to the smoothScrollSpeed option
                "duration": duration

            });

        });

        // Maintains chainability
        return self;

    };

    // PLUGIN DEFINITION
    // =======================
    function Plugin(option, _relatedTarget) {
        var self = this;
        
        return this.each(function () {
            var $this   = $(this);
            var instance    = $this.data(PLUGIN_NS);
            //Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop=""
            //Keep in mind that the target object (first argument) will be modified, and will also be returned from $.extend(). If, however, you want to preserve both of the original objects, you can do so by passing an empty object as the target:
            //typeof option == 'object' && option return option if typeof object
            var options = $.extend({}, DynamicContentMenu.DEFAULTS, $this.data(), typeof option == 'object' && option);
            
            if (!instance) $this.data(PLUGIN_NS, (instance = new DynamicContentMenu(this, options)));
            
            //only public method
            if (typeof option == 'string'){

                if ( !$.isFunction( instance[option] ) || option.charAt( 0 ) === "_" ) {
                    $.error( "no such method '" + option + "' for " + PLUGIN_NAME +
                        " plugin instance" );
                }

                //call if like $('#el').dynamicContentMenu('methodName', $(this));
                // instance[option](_relatedTarget);
                instance[option]( Array.prototype.slice.call( arguments, 1 ) );
            }
            
            else if ( !instance ) {
                $.error( 'Plugin must be initialised before using method: ' + option );
            }

            // else if (options.show) {
            //     data.show(_relatedTarget);
            // }
        });
    }

    var old = $.fn[ PLUGIN_NAME ];

    $.fn[ PLUGIN_NAME ]             = Plugin;
    $.fn[ PLUGIN_NAME ].Constructor = DynamicContentMenu;
  
  
    // PLUGIN NO CONFLICT
    // =================
  
    $.fn[ PLUGIN_NAME ].noConflict = function () {
      $.fn[ PLUGIN_NAME ] = old;
      return this
    }

}));