//Globals
var SelectedCategoryCanvasIndex;




//
function RootCanvasLoaded(sender)
{

    // Center TextBlocks
    sender.findName( "WelcomeTextBlock" )["Canvas.Left"] = (640 - sender.findName( "WelcomeTextBlock" ).ActualWidth) / 2;
    sender.findName( "CatagoriesHeaderTextBlock" )["Canvas.Left"] = (640 - sender.findName( "CatagoriesHeaderTextBlock" ).ActualWidth) / 2;

}



//
function CategoriesContainer_CanvasLoaded(sender)
{

	var plugin = sender.getHost();

    var CategoriesXamlContent = document.getElementById("CategoriesXamlContent").innerHTML;
	var newCanvas = plugin.content.createFromXaml( CategoriesXamlContent, false );			
	plugin.content.findName("CategoriesContainer").children.add(newCanvas);
    
    


    // Highlight top slice
    //SelectedCategoryCanvasIndex = NumCategorySlices - 1;
    //sender.findName( "Label" + SelectedCategoryCanvasIndex ).Foreground = "White";
    //sender.findName( "ImageMask" + SelectedCategoryCanvasIndex ).Opacity = 0;


    // Highlight selected/starting category
    SelectedCategoryCanvasIndex = StartingCategoryIndex;
    

    // Update categories 
    UpdateCategoriesContainer( sender );



    // Start timer
    //sender.findName("timerStoryboard").begin();

}



//
function timerStoryboardFinished( sender, eventArgs )
{   
    // Increment selected index
    SelectedCategoryCanvasIndex++;
    
    if( SelectedCategoryCanvasIndex >= NumCategorySlices )
    {
        SelectedCategoryCanvasIndex = 0;
    }


    // Update categories 
    UpdateCategoriesContainer( sender );


    // Restart timer
    sender.findName("timerStoryboard").begin();

} 




function UpdateCategoriesContainer( sender )
{

    var SelectedCanvas = "CategoryCanvas" + SelectedCategoryCanvasIndex;


    var NextPosition = 0;
    //var NextPositionText = "";
    var CurrentLeft = 0;

    
    for( var i=0; i<NumCategorySlices; i++ )
    {
    
        var thisCategoryCanvas = "CategoryCanvas" + i;
        
        
        // Does this canvas need to move?
        CurrentLeft = sender.findName( thisCategoryCanvas )["Canvas.Left"];
        //sender.findName("msgTextBlock").text = "CurrentLeft=" + CurrentLeft; 

        // If current left is zero, skip move (SL bug?)
        if( CurrentLeft != 0 )
        {

            if( CurrentLeft == NextPosition )
            {
                // Skip if already at target location
                //NextPositionText += "No move:" + i + ";  ";
            }
            else
            {
                // Canvas needs to move
                
                //sender.findName( thisImageCanvas )["Canvas.Left"] = NextPosition;
                
                CategoryCanvas_Move_Animation( sender, thisCategoryCanvas, CurrentLeft, NextPosition, ( i == SelectedCategoryCanvasIndex ) );

                //NextPositionText += "Move:" + i + ":" + ( NextPosition ) + ";  ";
            }
        
        }
        
                
        // Is this the current canvas?
        if( i == SelectedCategoryCanvasIndex )
        {
            sender.findName( "Label" + i ).Foreground = "White";
            //sender.findName( "ImageMask" + i ).Opacity = 0;
        
            NextPosition += IndividualCategoryCanvasWidth;
            //NextPositionText += "Index:" + i + ";  ";
        }
        else
        {
            sender.findName( "Label" + i ).Foreground = "#FF778899";
            //sender.findName( "ImageMask" + i ).Opacity = .25;
        
            NextPosition += CategorySliceWidth;
            //NextPositionText += "Index:" + i + ";  ";
        }
        
    }

    //sender.findName("msgTextBlock").text = NextPositionText;    


}




function CategoryCanvas_Move_Animation( pSender, pObject, pFrom, pTo, pSelected )
{   

	// Retrieve the Storyboard resource.
    var myStoryboard = pSender.findName( pObject + "_Move");

    // Retrieve the Move DoubleAnimation.
    var myMoveDoubleAnimation = pSender.findName( pObject + "_Move_DoubleAnimation");

    // Retrieve the Move ColorAnimation.
    var myMoveColorAnimation = pSender.findName( pObject + "_Move_ColorAnimation");


    // If the Storyboard is running and you try to change
    // properties of its animation objects programmatically, 
    // an error will occur.
    myStoryboard.stop();


    //    
    myMoveDoubleAnimation["Storyboard.TargetName"] = pObject;
    myMoveDoubleAnimation.From = pFrom;
    myMoveDoubleAnimation.To = pTo;

    //    
    //myMoveColorAnimation["Storyboard.TargetName"] = pObject;
    if( pSelected )
        myMoveColorAnimation.To = "White";
    else
        myMoveColorAnimation.To = "#FF778899";


    // Begin the animation.
    myStoryboard.begin();



//    var myClipStoryboard = pSender.findName( pObject + "WipeDown");
//    myClipStoryboard.Stop();
//    myClipStoryboard.Begin();

    
    //pSender.findName("msgTextBlock").text = pObject + " : " + pLeft;    

}




function CategoriesContainer_MouseEnter(sender, mouseEventArgs)
{

    // Stop timer
    sender.findName("timerStoryboard").stop();

}


function CategoriesContainer_MouseLeave(sender, mouseEventArgs)
{   

    // Re-highlight selected/starting category
    SelectedCategoryCanvasIndex = StartingCategoryIndex;


    //var setTimeoutString = "ResetCategoriesContainer('" + sender + "')";
    //alert( "" + setTimeoutString );

    //
    //setTimeout("ResetCategoriesContainer('" + sender + "')", 1250);
    //setTimeout("ResetCategoriesContainer(sender)", 1250);
    
    // Start delay timer
    sender.findName("ResetCategoriesContainerTimerStoryboard").begin();
    
}


function ResetCategoriesContainer(sender, eventArgs)
{   

    // Update categories 
    UpdateCategoriesContainer( sender );


    // Start timer
    //sender.findName("timerStoryboard").begin();

} 






function CategoryCanvas_MouseEnter(sender, mouseEventArgs)
{

    // Stop timer
    //sender.findName("timerStoryboard").stop();


    SelectedCategoryCanvasIndex = sender.name.charAt(14);

    sender.findName("CategoryCanvas" + SelectedCategoryCanvasIndex + "_MouseEnter").begin();
    
        
    UpdateCategoriesContainer( sender );
    
}




function CategoryCanvas_MouseLeave(sender, mouseEventArgs)
{   

    SelectedCategoryCanvasIndex = sender.name.charAt(14);

    sender.findName("CategoryCanvas" + SelectedCategoryCanvasIndex + "_MouseLeave").begin();


    // Start timer
    //sender.findName("timerStoryboard").begin();

} 



function CategoryCanvas_LeftButtonDown(sender, mouseEventArgs)
{

	window.location = "SelectWorks.aspx?Category=" + sender.findName( "Label" + SelectedCategoryCanvasIndex ).Text;	

}