DotNetNukeŽ Silverlight ToolBar

if (!window.ToolBar)
    window.ToolBar = {};
 
ToolBar.Page = function() 
{
}
// Set the size and number of buttons for the ToolBar
var ButtonSize = 55;
var NumberOfButtonsToShow = 4;
 
var ModuleID;
var ToolBar;
var ToolBarWindow;
var objBox = new Array(); 
var ToolbarBoxXAMLFile;
var CurrentLocation = 0;
var scrollPosition = 0;
var NumberOfButtons = 0;
var LeftButton;
var RightButton;
 
var storyboard;
var animation;
 
var ToolBarWidth = NumberOfButtonsToShow * ButtonSize;
 
ToolBar.Page.prototype =
{    
 
    handleLoad: function(control, userContext, rootElement) 
    {    
        // The Module ID is passed in the userContext
        ModuleID = userContext;
 
        // Set the number of buttons
        NumberOfButtons = eval('ToolbarPhotoArray_' + ModuleID).length - 1;
        
        // Set number of button to show
        NumberOfButtonsToShow = eval('NumberOfButtonsToShow_' + ModuleID);
        ToolBarWidth = NumberOfButtonsToShow * ButtonSize;
        
        // Location of Box.xaml
        ToolbarBoxXAMLFile = eval('ToolbarBoxXAMLFile_' + ModuleID);
        
        // Get a reference to the various XAML elements
        ToolBar = rootElement.findName("ToolBar");
        ToolBarWindow = rootElement.findName("ToolBarWindow");
        LeftButton = rootElement.findName("LeftButton");
        RightButton = rootElement.findName("RightButton");
        
        storyboard = rootElement.findName("Movebar");
        animation = rootElement.findName("animateToolbar");
        
            // Add the buttons to the Toolbar
            for(i = 0; i <= NumberOfButtons; i++)
            {
                objBox[i] = new box("box" + i, ToolBar, CurrentLocation, ToolbarBoxXAMLFile, eval('ToolbarPhotoArray_'+ ModuleID)[i], eval('ToolbarURLArray_'+ ModuleID)[i]);
                CurrentLocation = CurrentLocation + ButtonSize;
            }
 
        // Set the Clipping on the ToolBarWindow (Canvas)
        // This causes only a portion of the ToolBar (that is also on the ToolBarWindow Canvas) to show
        SetToolbarWindowClip(ToolBarWindow, ToolBarWidth);
        
        // Always hide the LeftButton on page load
        LeftButton.visibility = "Collapsed";
 
        // Hide the RightButton if it is not needed
        if (NumberOfButtons * ButtonSize <= (ToolBarWidth - 1))
        {
            RightButton.visibility = "Collapsed";
        }
        else
        {
             // Set the position of the RightButton
            RightButton["Canvas.Left"] = ToolBarWidth + (ButtonSize/2);
        }
        
        // Attach event handlers to Left and Right buttons
        LeftButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
        RightButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
    },
 
        handleMouseDown: function(sender, eventArgs)
        {          
            if(sender.Name == "LeftButton") // LeftButton
            {
                // Only advance Toolbar (scrollPosition) if it is not already at the the 
                // first Button
                if(scrollPosition != 0)
                {
                    // Move the scrollPosition
                    scrollPosition+=ButtonSize;
                    // If the LeftButton is clicked then the RightButton needs to show
                    RightButton.visibility = "Visible";
                    
                    // Do not show LeftButton if the first Button is showing
                    if(scrollPosition == 0)
                    {
                        LeftButton.visibility = "Collapsed";
                    }
                    else
                    {
                        LeftButton.visibility = "Visible";
                    }
                }
            }
            
            if(sender.Name == "RightButton") // RightButton
            {
                // Only advance Toolbar (scrollPosition) if there are Buttons to show
                if(scrollPosition >= -((NumberOfButtons * ButtonSize) - ToolBarWidth))
                {
                    // Move the scrollPosition
                    scrollPosition-=ButtonSize;
                    // If the RightButtonis clicked then the LeftButton needs to show
                    LeftButton.visibility = "Visible";
                    
                    // Do not show RightButton if the last Button is showing
                    if(scrollPosition == -(((NumberOfButtons + 1) * ButtonSize) - ToolBarWidth))
                    {
                        RightButton.visibility = "Collapsed";
                    }
                    else
                    {
                        RightButton.visibility = "Visible";
                    }
                }
            }
            
            // Move the ToolBar by setting it to the current scrollPosition
            animation.To = scrollPosition;
            storyboard.Begin();
        } 
 
}
 
function SetToolbarWindowClip(objToolBarWindow, dblToolBarWidth)
{
    // Since the RectangleGeometry cannot be edited visually in Expression Blend
    // It is ok to create it dynamically
    var xamlFragment;
    // Retrieve a reference to the plug-in.
    var plugin = objToolBarWindow.getHost();  
    // Define a XAML fragment for RectangleGeometry
    xamlFragment = '<RectangleGeometry Rect="0,0,xxx,100" />';
    // Set the width of the RectangleGeometry to ToolBarWidth
    xamlFragment = xamlFragment.replace("xxx", dblToolBarWidth);
    // Create the XAML fragment
    ToolBarClip = plugin.content.createFromXaml(xamlFragment);
    // Set the Clip of the ToolbarWindow (Canvas) to the XAML fragment
    objToolBarWindow.Clip = ToolBarClip;
}