Step 2

Move all the JavaScript code to separate files. So now it will be:

<div id="CategoriesViewContainer" class="categoriesViewContainer">

    <div id="CategoriesViewInner" class="categoriesViewInner">

...     

         <input type="image" name="ctl00$MainContent$Categories$ctl03" class="functionButton deleteCategoryButton" OBJECTID="6c45226c-0152-4e12-826e-4d3733c241cb" src="../Resources/Icons/64x64/_blank.png" alt="Del" onclick="return confirm(&#39;Are you sure want to delete a category Universe?&#39;);" />

         <input type="submit" name="ctl00$MainContent$Categories$ctl04" value="Universe" class="categoryButton romamaColor0" OBJECTID="6c45226c-0152-4e12-826e-4d3733c241cb" />

         <input type="image" name="ctl00$MainContent$Categories$ctl05" class="functionButton editCategoryButton" OBJECTID="6c45226c-0152-4e12-826e-4d3733c241cb" src="../Resources/Icons/64x64/_blank.png" alt="Edit" />

There is still onclick handler, but it will also go at some point.

What I want is that when the user hovers the category button the control buttons appear, like delete button:

What I did first was this code in my ASP.Net code behind class:

for (int i = 0; i < categories.Count; i++)

{

       var category = categories[i];

       Panel categoryPanel = new Panel();

...

       Categories.ContentTemplateContainer.Controls.Add(categoryPanel);

       var deleteButton = new ImageButton();

       deleteButton.ID = "deleteCategory" + i;

       ...

       categoryPanel.Controls.Add(deleteButton);

       var categoryCtrl = new Button();

...

       categoryPanel.Controls.Add(categoryCtrl);

categoryPanel.Attributes.Add(

"onmouseover", String.Format(@"$get(""deleteCategory{0}"").src=""../Resources/Icons/64x64/circle-delete.png"" ", i));

categoryPanel.Attributes.Add(

"onmouseout", String.Format(@"$get(""deleteCategory{0}"").src=""../Resources/Icons/64x64/_blank.png"" ", i));

}

And as a result, this was added to my page:

<div onmouseover=" $get(&quot;deleteCategory0&quot;).src=&quot;../Resources/Icons/64x64/circle-delete.png&quot; "

onmouseout=" $get(&quot;deleteCategory0&quot;).src=&quot;../Resources/Icons/64x64/_blank.png&quot; ">

Quite a simple thing.

Now what I had to do in pure JavaScript added in the separate file:

1. Handle onload event.

addEvent(window, "load", initialize);

this required writing this addEvent function:

function addEvent(eTarget, sEvent, fHandler)

{

    // Standard event registration method

    if (eTarget.addEventListener)

    {

        eTarget.addEventListener(sEvent, fHandler, false);

    }

    // IE8 and earlier

    else if (eTarget.attachEvent)

    {

        eTarget.attachEvent("on" + sEvent, fHandler);

    }

}

2. Find all category panels and bind their events to delete buttons:

function bindEventHandlersToCategories() 

{

    if (document.getElementsByClassName)

    {

        var categoryPanels = document.getElementsByClassName("categoryPanel");

        for (var i = 0; i < categoryPanels.length; i++)

        {

            var categoryPanel = categoryPanels[i];

            var deleteButtons = categoryPanel.getElementsByClassName("deleteCategoryButton");

            bindDeleteCategoryButtonsOnCategoryEvents(categoryPanel, deleteButtons);

        }

    }

    // IE 8

    else if (document.querySelectorAll)

    {

        var categoryPanels = document.querySelectorAll(".categoryPanel");

        for (var i = 0; i < categoryPanels.length; i++)

        {

            var categoryPanel = categoryPanels[i];

            var deleteButtons = categoryPanel.querySelectorAll('.deleteCategoryButton')

            bindDeleteCategoryButtonsOnCategoryEvents(categoryPanel, deleteButtons);

        }

    }

    // IE 7 and older

    else 

    {

        var categoryPanels = getElementsByClassName("categoryPanel");

        for (var i = 0; i < categoryPanels.length; i++)

        {

            var categoryPanel = categoryPanels[i];

            var deleteButtons = getElementsByClassName("deleteCategoryButton", categoryPanel);

            bindDeleteCategoryButtonsOnCategoryEvents(categoryPanel, deleteButtons);

        }

    }

}

function bindDeleteCategoryButtonsOnCategoryEvents(categoryPanel, deleteButtons)

{

    for (var i = 0; i < deleteButtons.length; i++)

    {

        addEvent(categoryPanel, "mouseover", function ()

        {

            var button = deleteButtons[i];

            return function ()

            {

                button.src = "../Resources/Icons/64x64/circle-delete.png";

            }

        } ());

        addEvent(categoryPanel, "mouseout", function ()

        {

            var button = deleteButtons[i];

            return function ()

            {

                button.src = "../Resources/Icons/64x64/_blank.png";

            }

        } ());

    }

}

function getElementsByClassName(sClassNamesToFind, eParent)

{

    // Define search scope

    var eStartElement = eParent;

    if (!eStartElement)

    {

        eStartElement = document;

    }

    var aClassNamesToFind = sClassNamesToFind.split(/\s+/);

    var aSelectedElements = new Array();

    for (var i = 0; i < eStartElement.all.length; i++)

    {

        var eElement = eStartElement.all[i];

        var sElementClassName = eElement.className;

        var bInclude = true;

        for (var j = 0; j < aClassNamesToFind.length; j++)

        {

            var oPattern = new RegExp("\\b" + aClassNamesToFind[j] + "\\b");

            if (sElementClassName.search(oPattern) == -1)

            {

                bInclude = false;

            }

        }

        if (bInclude)

        {

            aSelectedElements.push(eElement);

        }

    }

    return (aSelectedElements)

}

Somehow I feel it is too complicated.

Forget about this and start learning jQuery? Is this what I should do?