Update tabs after delete

[cyfirst]

Hi,
I am adding and deleting tacs via client code as documented in various examples.  I have two issues that I could use some help with.
1. I use the CreateCloseImage function to add an image to the tab.  Is there a way to define an image for when the tab is active or inactive (i.e. on mouseover )? 
2. When I delete a tab and its associated pageview and then add a new tab, I get the pageview that was just removed. 

 for (j = 0; i < 5 && j < selectedItems.length; i++, j++) {
              //create an new page view
              pageView = new Telerik.Web.UI.RadPageView();
              pageView.set_id(("DocView" + i));

              multiPage.trackChanges();
              multiPage.get_pageViews().add(pageView);

              multiPage.commitChanges();

              tabStripItem = new Telerik.Web.UI.RadTab();
              tabStripItem.set_text("new tab");

              tabStripItem.set_pageViewID("DocView" + i);
              tabStripItem.set_selected();

              tabStrip.trackChanges();
              tabStrip.get_tabs().add(tabStripItem);
              AttachCloseImage(tabStripItem, "Images/delete.gif");

              tabStrip.commitChanges();

              tabStrip.set_selectedIndex(i);
          }
      }

 function CreateCloseImage(closeImageUrl) {
        debugger
            var closeImage = document.createElement("img");
            closeImage.src = closeImageUrl;
            closeImage.style.marginTop = "2px";
            closeImage.style.position = "relative";
            closeImage.style.border = "none";
            closeImage.style.right = "-10px";
            closeImage.alt = "Close this tab";
            return closeImage;

        }

        function AttachCloseImage(tab, closeImageUrl) {
            var closeImage = CreateCloseImage(closeImageUrl);
            closeImage.AssociatedTab = tab;
            closeImage.onclick = function(e) {
                if (!e) e = event;
                if (!e.target) e = e.srcElement;

                deleteTab(tab);

                e.cancelBubble = true;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }

                return false;
            }
            tab.get_innerWrapElement().appendChild(closeImage);
        }

        function deleteTab(tab) {
            var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
            var pageView = tab.get_pageView();
            var tabToSelect = tab.get_nextTab();
            var multiPage = $find("<%= RadMultiPage1.ClientID %>");

            if (!tabToSelect)
                tabToSelect = tab.get_previousTab();
            tabStrip.trackChanges();

            multiPage.trackChanges();

            tabStrip.get_tabs().remove(tab);
            multiPage.get_pageViews().remove(pageView);

            if (tabToSelect)
                tabToSelect.set_selected(true);

            multiPage.commitChanges();
            tabStrip.commitChanges();
        }

So what is happening is if I remove tab2/pageView2 and then add a new tab2/pageView2, the contents of the first pageView is shown and I don't know where the new pageView is.

Thanks for your assistance.

[cyfirst]

Hi,
I have solved my second issue with getting the wrong pageview but I haven't found a solution for changing the image on the tab that is created via the CreateCloseImage function.  I want to be able to have the image be gey when the tab is created and red when the user does a mouseover (just like the tabs in IE or FF).  Can anyone help me with this?
Thanks,

[Vesko]

Have you tried to hook on the onmouseover event of the image? Just like you did with the onclick event. Then you should just change the src attribute of the image.

[cyfirst]

Thanks!  That was what I needed to do.