// Video Paths References
    var video1 = "media/NavPt2_TheScenario.wmv";
    var video2 = "media/NavPt3_TheCall.wmv";
    var video3 = "media/NavPt4_WhatsHappening.wmv";
    var video4 = "media/NavPt5_RoleTailored.wmv";
    var video5 = "media/NavPt6_BackToTheCall.wmv";
    var video6 = "media/NavPt7_TheResults.wmv";

// Number of videos
var numberOfVideos = 6;

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

VideoPlayer.Scene = function() {}

VideoPlayer.Scene.prototype =
{
	handleLoad: function(plugIn, userContext, rootElement) {
	
    // Storing elements 
		
		// Silverlight Plugin
		this.plugIn = plugIn;

		// Root element
		this.playerUI = rootElement;
		
	    // Starts Preload-Ani
        this.playerUI.findName("Preload_Ani").Begin();
		
		// Loading text
        this.loadingText = this.playerUI.findName("LoadingTextBlock");
            
		// Media Element
		this.mediaElement = this.playerUI.findName("Media");
        
        // Download Progress Rectangle Width
        this.orgProgressRectWidth = this.playerUI.findName("DownloadProgressRect").Width;
		
		// Download Volume Bar Height
        this.orgVolumeBarHeight = this.playerUI.findName("VolumeBar").Height;
		
        // One-Sec Timer Updater
        this.timer = this.playerUI.findName("Timer");
        
        // Size of rootCanvas
        this.rootCanvasWidth = this.playerUI.FindName("rootCanvas").Width;
        this.rootCanvasHeight = this.playerUI.FindName("rootCanvas").Height;
        
        // Preloader screen fade out
        this.PreloadingScreenFadeOut = this.playerUI.findName("PreloadingScreenFadeOut");
        
        // Progress Thumb
        this.progressThumb = this.playerUI.findName("ProgressThumb");
        
        // Volume Thumb
        this.VolumeThumb = this.playerUI.findName("VolumeThumb");
        
        // Control Canvas
        this.controlCanvas = this.playerUI.findName("ControlCanvas");
        
        // Full Screen Button
        this.FullScreenButton = this.playerUI.findName("FullScreenButton");
        
        // Volume Slider Canvas
        this.VolumeSliderCanvas = this.playerUI.findName("VolumeSliderCanvas");
		
    // Create buttons
        new button(rootElement.findName("PlayPauseButton"), rootElement.findName("PlayPauseButtonFill"), "#FF0B802B", "#FF0C5420", Silverlight.createDelegate(this, this.playPauseButtonClicked));
        new button(rootElement.findName("MuteButton"), rootElement.findName("MuteButtonFill"), "#00000000", "#FF0C5420", Silverlight.createDelegate(this, this.muteButtonClicked));
        new button(rootElement.findName("FullScreenButton"), rootElement.findName("FullScreenButtonFill"), "#FF0B802B", "#FF0C5420", Silverlight.createDelegate(this, this.fullScreenButtonClicked));
       
    // Event handlers
		
		//Preloading screen fade out event handler
		this.PreloadingScreenFadeOut.addEventListener("completed", Silverlight.createDelegate(this, this.onCompletedPreloadingScreenFadeOut));
		
		// FULL SCREEN event handler		
        this.plugIn.content.onFullScreenChange = Silverlight.createDelegate(this, this.fullScreenChanged);
        
		// MEDIA event handlers		
		this.mediaElement.addEventListener("currentStateChanged", Silverlight.createDelegate(this, this.currentStateChanged));
		this.mediaElement.addEventListener("downloadProgressChanged", Silverlight.createDelegate(this, this.downloadProgressChanged));
        this.mediaElement.addEventListener("MediaOpened", Silverlight.createDelegate(this, this.mediaLoaded));
        this.mediaElement.addEventListener("MediaEnded", Silverlight.createDelegate(this, this.mediaEnded));
        
		// PROGRESS THUMB handlers		
        this.progressThumb.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this, this.thumbButtonDown));
		this.progressThumb.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.thumbButtonUp));
		this.progressThumb.addEventListener("mouseMove", Silverlight.createDelegate(this, this.thumbMouseMove));
		
		// VOLUME BUTTON handlers		
		this.playerUI.findName("MuteAndSlider").addEventListener("MouseEnter", Silverlight.createDelegate(this, this.SliderCanvasOn));
        this.playerUI.findName("MuteAndSlider").addEventListener("MouseLeave", Silverlight.createDelegate(this, this.SliderCanvasOff));
		
		// VOLUME THUMB handlers		
        this.VolumeThumb.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this, this.volumeThumbButtonDown));
		this.VolumeThumb.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.volumeThumbButtonUp));
		this.VolumeThumb.addEventListener("mouseMove", Silverlight.createDelegate(this, this.volumeThumbMouseMove));
		
		this.controlCanvas.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.controlCanvasMouseEnter));
		this.controlCanvas.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.controlCanvasMouseLeave));
		
		// TIMER event handler		
		this.timer.addEventListener("completed", Silverlight.createDelegate(this, this.timerTick));
        
        // Navigation Points event handlers
        for (i = 1; i <= numberOfVideos; i++)
            this.playerUI.FindName("pt" + i + "Canvas").addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this, this["Pt" + i + "Pressed"]));
        
        
	// Init
	    
	    // Variable to track mouse click on Progress Thumb	
		this.isMouseDown = false;
		
		// Variable to track mouse click on Progress Thumb	
		this.isMouseDownVolume = false;
		
		this.previousState = "";
		this.mediaElement.BufferingTime = "0:0:30";
		
		// Set the initial volume		
	    this.mediaElement.volume = 1;
	    
        // Hides Loading Screen
        this.playerUI.findName("Preload_Ani").Stop();
        this.playerUI.findName("PreloadingScreenFadeOut").Begin();
        
        // Starts buffering the first video
        this.mediaElement.source = video1;
        this.mediaLoaded(this.mediaElement, "");
    },
    
    controlCanvasMouseEnter: function(sender, args) {
        var doc = document.getElementById("SilverlightPlugIn");
        
	    doc.content.findName("ControlsFadeIn").Begin();
    },
	
	controlCanvasMouseLeave: function(sender, args) {
        var doc = document.getElementById("SilverlightPlugIn");
	    
	    doc.content.findName("ControlsFadeOut").Begin();
    },
     
// One-Sec Tick event (Endless Loop, when Media is playing)	 
    timerTick: function(sender, eventArgs) {
        if ((this.mediaElement.currentState != "Closed" || this.mediaElement.currentState != "Opening")) {
            var thumb = sender.findName("ProgressThumb");
            var thumbFill = sender.findName("ProgressThumbFill").Width;
			
            // Position the playback progress thumb
            if (!this.isMouseDown && (this.mediaElement.naturalDuration.seconds != 0)) {
                thumb["Canvas.Left"] = (this.mediaElement.position.seconds / this.mediaElement.naturalDuration.seconds) * (this.orgProgressRectWidth - thumbFill);
            }
            
            // Set playback progress textblock
            // Process the position of the media into an hours:minutes:seconds string to be presented.
            var positionString = this.calculateTimeString(this.mediaElement.position.Seconds);
            var durationString = this.calculateTimeString(this.mediaElement.naturalDuration.Seconds);
            var timeLabel = sender.findName("TimeLabel");
            
            timeLabel.text = positionString + " / " + durationString;
            
            if (this.mediaElement.currentState == "Playing")
                this.timer.begin();
        }
    },
    
    // Shrink the download rect from the right to reveal download progress
	downloadProgressChanged: function(sender, eventArgs) {
        var progressRect = sender.findName("DownloadProgressRect");
		progressRect.width = this.orgProgressRectWidth - this.mediaElement.downloadProgress * this.orgProgressRectWidth;
        progressRect["Canvas.Left"] = this.orgProgressRectWidth - progressRect.width;
	},
    
    // Process the seconds into an minutes:seconds string
    calculateTimeString: function(seconds) {
        var datetime = new Date(0, 0, 0, 0, 0, seconds)
        var minutes = datetime.getMinutes();
        var seconds = datetime.getSeconds();
        
        if (seconds < 10)
            seconds = "0" + seconds;
        
        if (minutes < 10)
            minutes = "0" + minutes;
        
        return minutes + ":" + seconds;
    },
    
// Media Events 
	
	// When Media Loads in the MediaElement
	mediaLoaded: function(sender, args)	{
	    // Highlighting layer bubbles
	    for (i = 1; i <= numberOfVideos; i++)
	        this["navText" + i] = this.playerUI.findName("Vid" + i + "Bubble");
	    
	    // Highlighting layer bubbles
	    for (i = 1; i <= numberOfVideos; i++)
	        this["nav" + i + "Off"] = this.playerUI.findName("pt" + i + "Off");	    
	    
	    // Reference to currentVid Text
	    for (i = 1; i <= numberOfVideos; i++)
	        this["currentImage" + i] = this.playerUI.findName("CurrentVid" + i);
	    
	    // Hides all highlighing layers
	    for (i = 1; i <= numberOfVideos; i++) {
	        this["navText" + i].Opacity = .2;
	        this["nav" + i + "Off"].Opacity = 1;
	        this["currentImage" + i].Opacity = 0;
	    }
	    
	    switch (sender.Source) {
	        case video1:
	            videoNumber = 1;
	            break;
	        case video2:
	            videoNumber = 2;
	            break;
	        case video3:
	            videoNumber = 3;
	            break;
	        case video4:
	            videoNumber = 4;
	            break;
	        case video5:
	            videoNumber = 5;
	            break;
	        case video6:
	            videoNumber = 6;
	            break;
	        case video7:
	            videoNumber = 7;
	            break;
	        case video8:
	            videoNumber = 8;
	            break;
	    }
		
		// Turn on highlight layer
        this["navText" + videoNumber].Opacity = 1;
        this["nav" + videoNumber + "Off"].Opacity = 0;
        this["currentImage" + videoNumber].Opacity = 1;
		
        this.mediaElement.Play();
	},
		
    // When Media's State changed between Playing/Plaused/Stopped
    currentStateChanged: function(sender, args) {
        if (this.mediaElement.currentState == "Playing") {
            this.playerUI.findName("PauseIcon").Opacity = 1;
            this.playerUI.findName("PlayIcon").Opacity = 0;
            this.playerUI.findName("BufferingScreen").Opacity = 0;
            this.playerUI.findName("Buffering_Ani").Stop();
        }
        else if (this.mediaElement.currentState == "Paused" || this.mediaElement.currentState == "Stopped") {
            this.playerUI.findName("PauseIcon").Opacity = 0;
            this.playerUI.findName("PlayIcon").Opacity = 1;
        }
        
        if (this.mediaElement.currentState == "Buffering") {   
            this.playerUI.findName("Buffering_Ani").Begin();
            this.playerUI.findName("BufferingScreen").Opacity = 1;
            this.previousState = "Buffering";        
        }
        else if((this.mediaElement.currentState != "Buffering") && (this.previousState == "Buffering")) {
            this.mediaElement.Play(); 
            this.previousState = ""; 
            this.playerUI.findName("Buffering_Ani").Stop();
            this.playerUI.findName("BufferingScreenFadeOut").Begin();
        }
        
        // Process one timer tick event to reset the position thumb
        this.timer.begin();
    },
    
	// When Media Ends in the MediaElement
	mediaEnded: function(sender, args) {
	    // Switches the source of the Media to the next media besides on the 8th
	    for (i = 1; i <= numberOfVideos; i++) {
	        if (sender.Source == window["video6"])
	            break;
	        else if(sender.Source == window["video" + i]) {
	            sender.Source = window["video" + (i+1)];
	            PlayMedia();
	            break;
	        }
	    }
	},

// Events for the PLAYER BUTTONS

    // When PLAY/PAUSE button is clicked
    playPauseButtonClicked: function(sender, args) {
        // Pauses the current playing media
        if (this.mediaElement.currentState == "Playing")
            this.mediaElement.pause();
        
        // Plays the media from a paused state
        else if (this.mediaElement.currentState == "Paused")
            this.mediaElement.play();
        
        // Plays the media from a stopped state
        else
            this.mediaElement.play();
    },
    
    // When the MUTE button is clicked
    muteButtonClicked: function(sender, args) {
        var volumeThumbHeight = sender.findName("VolumeThumbFill").Height;
        
        this.mediaElement.isMuted = !this.mediaElement.isMuted;
        
        if (this.mediaElement.isMuted) {
            sender.findName("MuteIcon").Opacity = 0;
            this.VolumeThumb["Canvas.Top"] = (this.orgVolumeBarHeight - volumeThumbHeight);
        }
        else {
            sender.findName("MuteIcon").Opacity = 1;
            this.VolumeThumb["Canvas.Top"] = 0;
        }
    },

    // When the VOLUME slider is hovered over
    SliderCanvasOn: function(sender, args) {
        var doc = document.getElementById("SilverlightPlugIn");
        	    
	    doc.content.findName("VolumeSliderAniOn").Begin();
    },
    
    // When the VOLUME slider is hovered off
    SliderCanvasOff: function(sender, args) {
        var doc = document.getElementById("SilverlightPlugIn");
        	    
	    doc.content.findName("VolumeSliderAniOff").Begin();
    },
	
    // When the FULLSCREEN button is clicked
	fullScreenButtonClicked: function(sender, args) {
        this.plugIn.content.fullScreen = !this.plugIn.content.fullScreen;
    },
	
// RESIZING window event
	
	// When the window is switched between FULLSCREEN and NON-FULLSCREEN
    fullScreenChanged: function(sender, args) {
 	    var d = document.getElementById("SilverlightPlugIn");
	    
	    // Variables for the width and height of the Silverlight ROOT OBJECT
	    var sourceWidth = d.content.root.width;
	    var sourceHeight = d.content.root.height;
	    
	    // Variables for the width and height of the WEB BROWSER WINDOW
	    var targetWidth = d.content.actualWidth;
	    var targetHeight = d.content.actualHeight;
	    
	    var widthRatio = targetWidth / sourceWidth;
	    var heightRatio = targetHeight / sourceHeight;
	    
	    var scale = Math.min(heightRatio, widthRatio);
	      
	    // Adjusts the scale of the entire Silverlight Object   
	    var rootCanvasTransform = d.content.findName("rootCanvasTransform");
	    rootCanvasTransform.ScaleX = scale;
	    rootCanvasTransform.ScaleY = scale;
	    
	    // Centers the Silverlight Root Object horitalonally
	    var newWidth = sourceWidth * scale;
	    var diff = (targetWidth - newWidth);
	    var rootCanvasTranslate = d.content.findName("rootCanvasTranslate");
	    rootCanvasTranslate.X = diff / 2;
    },
	
// Events for the PROGRESS THUMB
    
    // When the Progress Thumb is PRESSED	
	thumbButtonDown: function(sender, args) {
	     this.initThumbX = args.GetPosition(sender).X;
	     this.isMouseDown = true;
	     sender.CaptureMouse();
	},
	
	// When the Progress Thumb is RELEASED
	thumbButtonUp: function(sender, args) {
	    // Sets the flag to false
	    this.isMouseDown = false;
	    
	    // Releases the Thumb
	    sender.ReleaseMouseCapture();
	    
		var thumbFill = sender.findName("ProgressThumbFill").Width;
		
	    // Updates the media's position based on where the Thumb was released at
	    this.pos = this.mediaElement.Position;
	    this.pos.Seconds = ( sender["Canvas.Left"] / (this.orgProgressRectWidth - thumbFill) ) * this.mediaElement.naturalDuration.seconds;
	    this.mediaElement.position = this.pos;
	    
	    // Set the current time
	    var positionString = this.calculateTimeString(this.mediaElement.position.Seconds);
        var durationString = this.calculateTimeString(this.mediaElement.naturalDuration.Seconds);
        var timeLabel = sender.findName("TimeLabel");
        timeLabel.text = positionString + " / " + durationString;
	},
	
	// When the Mouse is MOVING with the progression Thumb is PRESSED
	thumbMouseMove: function(sender, args) {
	    var thumbFillWidth = sender.findName("ProgressThumbFill").Width;
	
	    if (this.isMouseDown) {
	        // Shifts the Progress Thumb left and right
	        this.progressThumb["Canvas.Left"] +=  args.GetPosition(sender).X - this.initThumbX;
	        
	        // Limits how far the progress thumb can move
	        // Max Limit (Right Limit)
	        if(this.progressThumb["Canvas.Left"] > (this.orgProgressRectWidth - thumbFillWidth))
	            this.progressThumb["Canvas.Left"] = this.orgProgressRectWidth - thumbFillWidth;

	        // Min Limit (Left Limit)
	        else if(this.progressThumb["Canvas.Left"] < 0)
	            this.progressThumb["Canvas.Left"] = 0;
	    }
	},
	
// Events for the VOLUME THUMB
    
    // When the Volume Thumb is PRESSED	
	volumeThumbButtonDown: function(sender, args) {
	     this.initVolumeThumbY = args.GetPosition(sender).Y;
	     this.isMouseDownVolume = true;
	     sender.CaptureMouse();
	},
	
	// When the Volume Thumb is RELEASED
	volumeThumbButtonUp: function(sender, args) {
	    // Sets the flag to false
	    this.isMouseDownVolume = false;
	    
	    // Releases the Thumb
	    sender.ReleaseMouseCapture();  
	},
	
	// When the Mouse is MOVING with the Volume Thumb is PRESSED
	volumeThumbMouseMove: function(sender, args) {
	    var volumeThumbHeight = sender.findName("VolumeThumbFill").Height;
	    
	    if (this.isMouseDownVolume) {
	        // Remove potential Mute state
	        if (this.mediaElement.isMuted) {
	            this.mediaElement.isMuted = false;
	            sender.findName("MuteIcon").Opacity = 1;
	        }
	    
	        // Shifts the Progress Thumb up and down
	        this.VolumeThumb["Canvas.Top"] +=  args.GetPosition(sender).Y - this.initVolumeThumbY;
	        
	        // Limits how far the progress thumb can move
	        // Max Limit (Top Limit)
	        if (this.VolumeThumb["Canvas.Top"] > (this.orgVolumeBarHeight - volumeThumbHeight))
	            this.VolumeThumb["Canvas.Top"] = this.orgVolumeBarHeight - volumeThumbHeight;

	        // Min Limit (Bottom Limit)
	        else if (this.VolumeThumb["Canvas.Top"] < 0)
	            this.VolumeThumb["Canvas.Top"] = 0;
	        
	        var volumeThumbHeight = sender.findName("VolumeThumb").Height;
	    
	        this.volumeLevel = 1 - (sender.findName("VolumeThumb")["Canvas.Top"] / (this.orgVolumeBarHeight - volumeThumbHeight));
    	    
	        this.mediaElement.volume = this.volumeLevel;
	    }
	},

// When the Preloading animation has completed
    onCompletedPreloadingScreenFadeOut: function(sender,args) {
        this.playerUI.findName("PreloadingScreen").Visibility = "Collapsed";
    }
}

for (i = 1; i <= numberOfVideos; i++) {
    // Events for when the navigation points are pressed
    VideoPlayer.Scene.prototype["Pt" + i + "Pressed"] = function(sender, args) {
        this.mediaElement.Opacity = 1;
        
        this.playerUI.findName("TimeLabel").Visibility = "Visible";
        this.playerUI.findName("ProgressBar").Visibility = "Visible";
        this.playerUI.findName("PlayPauseButton").Visibility = "Visible";
        this.playerUI.findName("VolumeControls").Visibility = "Visible";
	    
        var doc = document.getElementById("SilverlightPlugIn");
        var j = sender.name.charAt(2);
	    
	    this.mediaElement = doc.content.findName("Media");
        this.mediaElement.Source = window["video" + j];
        PlayMedia();
    }
}

// Resets the current Media to be at the beginning of the media and PLAYS it
function PlayMedia() {
   var doc = document.getElementById("SilverlightPlugIn");
   this.mediaElement = doc.content.findName("Media");
   
   this.pos = this.mediaElement.Position;
   this.pos.Seconds = 0;
   this.mediaElement.position = this.pos ;
   this.mediaElement.Play();	
}   

function onPlugInLoaded(sender, args) {
    ;
}