             else
                 body.classList.add 'pinned-icons-colorless'
 
+    #
+    observers: ->
+        self = this # This object has to be stored in self because the callback function will create its own 'this'
+        atom.workspace.onDidAddPaneItem (event) ->
+            setTimeout (->
+                r = self.getPaneInformation document.querySelector('.tab-bar .tab.active'), event.index
+                r.pane.moveItem r.item, r.index
+            ), 1
+
 
     # Method to pin the active tab.
     pinActive: ->


    activate: (state) ->
        @setCommands()
        @setObservers()

        # Recover the serialized session or start a new serializable state.
        @PinnedTabsState =


    # Method that pins/unpins a tab given its element.
    pin: (e) ->
        #
        r = @getPaneInformation e

        # Calculate the new index for this tab based
        # on the amount of pinned tabs within this pane.
        if e.classList.contains 'pinned'
            # If the element has the element 'pinned', it
            # is currently being unpinned. So the new index
            # is one off when look at the amount of pinned
            # tabs, because it actually includes the tab
            # that is being unpinned.
            r.index -= 1

            # Removed one pinned tab from the state key for this pane.
            @PinnedTabsState.data[r.paneIndex] -= 1
        else
            # Initialize the state kye for this pane if needed.
            @PinnedTabsState.data[r.paneIndex] = 0 if @PinnedTabsState.data[r.paneIndex] == undefined

            # Add one pinned tab from the state key for this pane.
            @PinnedTabsState.data[r.paneIndex] += 1

        #
        r.pane.moveItem r.item, r.index

        # Finally, toggle the 'pinned' class on the tab after a
        # timout of 1 millisecond. This will ensure the animation
        # of pinning the tab will run.
        callback = -> e.classList.toggle 'pinned'
        setTimeout callback, 1


    #
    getPaneInformation: (e, i) ->
        #
        tabbar = e.parentNode
        pane = tabbar.parentNode
        axis = pane.parentNode

        #
        selectedIndex = i || Array.prototype.indexOf.call tabbar.children, e
        paneIndex = Array.prototype.indexOf.call axis.children, pane
        newIndex = e.parentNode.querySelectorAll('.pinned').length

        #
        pane = atom.workspace.getPanes()[paneIndex / 2]
        item = pane.itemAtIndex selectedIndex

        return {
            index: newIndex,
            pane: pane,
            paneIndex: paneIndex
            item: item
        };
