if (!window.VideoPlayer)
	window.VideoPlayer = {};

VideoPlayer.Scene = function() 
{
}

VideoPlayer.Scene.prototype =
{
	handleLoad: function(control, userContext, rootElement) 
	{
        this.rootCanvas = rootElement;
        
        // Find UI elements
        this.mediaElement = this.rootCanvas.findName("mediaElement");
        this.playPauseButton = this.rootCanvas.findName("PlayPauseButton");
        this.muteButton = this.rootCanvas.findName("MuteButton");
        this.expandCollapseButton = this.rootCanvas.findName("ExpandCollapse");
        this.progressRect = this.rootCanvas.findName("progressRect");
        this.progressContainer = this.rootCanvas.findName("progressContainer");
        this.downloadRect = this.rootCanvas.findName("downloadRect");
        this.collapse = this.rootCanvas.findName("collapse");
        this.timer = this.rootCanvas.findName("timer");
        
        // Hook media element events
        this.mediaElement.addEventListener("mediaOpened", Sys.Silverlight.createDelegate(this, this.mediaOpened));
        this.mediaElement.addEventListener("mediaEnded", Sys.Silverlight.createDelegate(this, this.mediaEnded));
        this.mediaElement.addEventListener("currentStateChanged", Sys.Silverlight.createDelegate(this, this.mediaStateChanged));
        
        // Hook button handlers
        this.expandCollapseButton.addEventListener("mouseEnter", Sys.Silverlight.createDelegate(this, this.expandCollapseButtonEnter));
        this.expandCollapseButton.addEventListener("mouseLeave", Sys.Silverlight.createDelegate(this, this.expandCollapseButtonLeave));
        this.expandCollapseButton.addEventListener("mouseLeftButtonDown", Sys.Silverlight.createDelegate(this, this.expandCollapseButtonDown));
        this.expandCollapseButton.addEventListener("mouseLeftButtonUp", Sys.Silverlight.createDelegate(this, this.expandCollapseButtonUp));
        
        this.playPauseButton.addEventListener("mouseEnter", Sys.Silverlight.createDelegate(this, this.playPauseButtonEnter));
        this.playPauseButton.addEventListener("mouseLeave", Sys.Silverlight.createDelegate(this, this.playPauseButtonLeave));
        this.playPauseButton.addEventListener("mouseLeftButtonDown", Sys.Silverlight.createDelegate(this, this.playPauseButtonDown));
        this.playPauseButton.addEventListener("mouseLeftButtonUp", Sys.Silverlight.createDelegate(this, this.playPauseButtonUp));
        
        this.muteButton.addEventListener("mouseEnter", Sys.Silverlight.createDelegate(this, this.muteButtonEnter));
        this.muteButton.addEventListener("mouseLeave", Sys.Silverlight.createDelegate(this, this.muteButtonLeave));
        this.muteButton.addEventListener("mouseLeftButtonDown", Sys.Silverlight.createDelegate(this, this.muteButtonDown));
        this.muteButton.addEventListener("mouseLeftButtonUp", Sys.Silverlight.createDelegate(this, this.muteButtonUp));
        
        // Hook animation events
        this.collapse.addEventListener("completed", Sys.Silverlight.createDelegate(this, this.collapseCompleted));
        this.timer.addEventListener("completed", Sys.Silverlight.createDelegate(this, this.timerCompleted));
        
        // Set state variabls
        this.collapsed = false;
        this.muted = false;
        this.currentProgress = null;
        
        // Set the mediaElement's source
        this.mediaElement.source = "http://channel9.msdn.com/playground/wpfe/sleekvideoplayer/assets/fabrikam.wmv";
	},
	
	mediaOpened: function(sender, eventArgs) 
	{
		// Start progress timer
        this.timer.begin(); 
	},
	
	mediaEnded: function(sender, eventArgs) 
	{
	    // If we're at the end of the video, reset the UI state
	    this.mediaElement.stop();
        this.rootCanvas.findName("pauseIcon").opacity = 0;    
        this.rootCanvas.findName("playIcon").opacity = 1; 
	},
	
	mediaStateChanged: function(sender, eventArgs) 
	{
		if (this.mediaElement.currentState == "Playing") {
		    this.rootCanvas.findName("pauseIcon").opacity = 1;    
            this.rootCanvas.findName("playIcon").opacity = 0;
		}
		else if (this.mediaElement.currentState == "Paused") {
		    this.rootCanvas.findName("pauseIcon").opacity = 0;    
            this.rootCanvas.findName("playIcon").opacity = 1;
		}
	},
	
	collapseCompleted: function(sender, eventArgs) 
	{
		this.rootCanvas.findName("clippingCanvas").clip = "M0,7C0,3.68629150101524,3.68629150101524,0,7,0L314,0C317.313708498985,0,320,3.68629150101524,320,7L320,74C320,77.3137084989848,317.313708498985,80,314,80L7,80C3.68629150101524,80,0,77.3137084989848,0,74z"; 
	},
	
	timerCompleted: function(sender, eventArgs) 
	{
        // Set the progress and download UI basd on state
        this.downloadRect.width = (this.progressContainer.width - 1.8) * this.mediaElement.downloadProgress;
        this.progressRect.width = (this.progressContainer.width - 1.8) * (this.mediaElement.position.seconds / this.mediaElement.naturalDuration.seconds);
        this.currentProgress = this.mediaElement.position.seconds;
        
        // Restart the timer animation
        this.timer.begin();
	},
	
	expandCollapseButtonEnter: function(sender, eventArgs) 
	{
        this.rootCanvas.findName("expandCollapseScale").scaleX = 1.1;
        this.rootCanvas.findName("expandCollapseScale").scaleY = 1.1;
	},
	
	expandCollapseButtonLeave: function(sender, eventArgs) 
	{
        this.rootCanvas.findName("expandCollapseScale").scaleX = 1;
        this.rootCanvas.findName("expandCollapseScale").scaleY = 1; 
	},
	
	expandCollapseButtonDown: function(sender, eventArgs) 
	{
        this.rootCanvas.findName("expandCollapseScale").scaleX = .9;
        this.rootCanvas.findName("expandCollapseScale").scaleY = .9;
	},
	
	expandCollapseButtonUp: function(sender, eventArgs) 
	{
        this.rootCanvas.findName("expandCollapseScale").scaleX = 1.1;
        this.rootCanvas.findName("expandCollapseScale").scaleY = 1.1;
        if (this.collapsed) {
            this.rootCanvas.findName("clippingCanvas").clip = "M0,7C0,3.68629150101524,3.68629150101524,0,7,0L314,0C317.313708498985,0,320,3.68629150101524,320,7L320,234C320,237.313708498985,317.313708498985,240,314,240L7,240C3.68629150101524,240,0,237.313708498985,0,234z";
            this.collapsed = false;
            this.rootCanvas.findName("collapse").stop();
            this.rootCanvas.findName("expand").begin();
            
            this.rootCanvas.findName("collapseIcon").opacity = 1;
            this.rootCanvas.findName("expandIcon").opacity = 0;
        }else {
            this.collapsed = true;        
            this.rootCanvas.findName("expand").stop();
            this.rootCanvas.findName("collapse").begin();
            
            this.rootCanvas.findName("collapseIcon").opacity = 0;
            this.rootCanvas.findName("expandIcon").opacity = 1;
        }
	},
	
	
	playPauseButtonEnter: function(sender, eventArgs) {
        this.rootCanvas.findName("playPauseButtonBackground").fill = "#FF888888";
    },

    playPauseButtonLeave: function(sender, eventArgs) {
        this.rootCanvas.findName("playPauseButtonBackground").fill = "#FF686868";
    },

    playPauseButtonDown: function(sender, eventArgs) {
        this.rootCanvas.findName("playPauseButtonBackground").fill = "#FF888888";
    },

    playPauseButtonUp: function(sender, eventArgs) {
        this.rootCanvas.findName("playPauseButtonBackground").fill = "#FF484848";
        
        if (this.mediaElement.currentState == "Playing") {
            this.mediaElement.pause();
        }
        else {
            this.mediaElement.play();
        }
    },
    
	muteButtonEnter: function(sender, eventArgs) {
        this.rootCanvas.findName("muteButtonBackground").fill = "#FF888888";
    },

    muteButtonLeave: function(sender, eventArgs) {
        this.rootCanvas.findName("muteButtonBackground").fill = "#FF686868";
    },

    muteButtonDown: function(sender, eventArgs) {
        this.rootCanvas.findName("muteButtonBackground").fill = "#FF888888";
    },

    muteButtonUp: function(sender, eventArgs) {
         this.rootCanvas.findName("muteButtonBackground").fill = "#FF484848";
        
        if (this.muted) {
            this.muted = false;
            this.mediaElement.isMuted = 0;
            this.rootCanvas.findName("muteIcon").opacity = 0;
        }
        else {
            this.muted = true;
            this.mediaElement.isMuted = 1;
            this.rootCanvas.findName("muteIcon").opacity = 0.6;
        }
    }
}