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;
}