﻿/// <reference Name="MicrosoftAjax.js" />
/// <reference Name="MicrosoftAjaxTimer.js" />
/// <reference path="Timer.js" />
/// <reference path="Utilities.js" />

Type.registerNamespace("ServerTransformed");

ServerTransformed.VideoContentView = function(xamlCanvas)
{
    this._controller = xamlCanvas;
    this._contentViewport = this._controller.content.FindName("ContentViewport");
    this._videoPlayer1 = this._controller.content.FindName("VideoPlayer1");
    this._videoPlayer2 = this._controller.content.FindName("VideoPlayer2");
    this._animationFadeIn = this._controller.content.FindName("fadeIn");
    this._animationFadeOut = this._controller.content.FindName("fadeOut");
    
//    this._videoPlayer1.Stop();
//    this._videoPlayer2.Stop();
//    this._videoPlayer1.Opacity = 0;
//    this._videoPlayer2.Opacity = 0;
    
    this._interval = 100;
    this._onTickHandler = Function.createDelegate(this, this._paint);
    this._progressBarWidth = 423;
    this._progressButtonStart = 60;
    this._mouseDownPosition = 0;
    this._mouseDownValue = -1;
    this._progressButtonCenter = 4;
    
    this._exitHandler = Function.createDelegate(this, this._exit);
    
}

ServerTransformed.VideoContentView.prototype = 
{
    add_exitHandler: function(handler) { this.get_events().addHandler("exit", handler); },
    remove_exitHandler: function(handler) { this.get_events().removeHandler("exit", handler); },
    
    add_videoEndedHandler: function(handler) { this.get_events().addHandler("videoEnded", handler); },
    remove_videoEndedHandler: function(handler) { this.get_events().removeHandler("videoEnded", handler); },
    
    add_xamlLoadedHandler: function(handler) { this.get_events().addHandler("xamlLoaded", handler); },
    remove_xamlLoadedHandler: function(handler) { this.get_events().removeHandler("xamlLoaded", handler); },
    
    add_animationEndedHandler: function(handler) { this.get_events().addHandler("animationEnded", handler); },
    remove_animationEndedHandler: function(handler) { this.get_events().removeHandler("animationEnded", handler); },
    
    add_backBtnClickHandler: function(handler) { this.get_events().addHandler("backClick", handler); },
    remove_backBtnClickHandler: function(handler) { this.get_events().removeHandler("backClick", handler); },
    
    add_positionChangeRequest: function(handler) { this.get_events().addHandler("positionChangeRequest", handler); },
    remove_positionChangeRequest: function(handler) { this.get_events().removeHandler("positionChangeRequest", handler); },
    
    add_trackEventHandler: function(handler) { this.get_events().addHandler("trackEvent", handler); },
    remove_trackEventHandler: function(handler) { this.get_events().removeHandler("trackEvent", handler); },
    
    get_mainVideo: function() { return this._mainVideo.Source; },
    set_mainVideo: function(videoURL)
    {
        this._bigPlayButton.Opacity = "0";
        this._smallPlayButton.Opacity = "0";
        this._smallPauseButton.Opacity = "1";
        this._mainVideo.Stop();
        this._mainVideo.AutoPlay = "True";
        this._playing = true;
        this._mainVideo.Source = videoURL;
        this._progressButton["Canvas.Left"] = this._progressButtonStart;
        this._playTime.Text = "00:00:00";
        this._raiseEvent("trackEvent", {verb:"Play"});
        this._updateTimer = $create(ServerTransformed.Timer, {interval:this._interval, enabled:true}, {tick:this._onTickHandler}, null, null);
        
        if((this._mainVideo.BufferingProgress == 0) &&
            (this._mainVideo.DownloadProgress == 1))
        {
            this._progressBar.Width = 433;
            this._mainVideo.removeEventListener("BufferingProgressChanged", "this._bufferingProgressChangedDelegate");
        }
    },
    
    set_currentAnimation: function(value)
    {
        var currentAnim = this._controller.content.FindName(value)
        this._animationEndedDelegate = Function.createDelegate(this, this._animationEnded);
        currentAnim.addEventListener("Completed", this._animationEndedDelegate);
        try
        {
            currentAnim.Stop();
            currentAnim.Begin();
        }
        catch(ex)
        {
            Sys.Debug.trace(ex.message);
        }
    },
    
    set_pageXAML: function(value)
    {
        this._contentViewport.children.Clear();
        this._contentViewport.children.Add(value);
        
        
        this.add_exitHandler(this._exitHandler);
        
        this._videoEndedDelegate = Function.createDelegate(this, this._videoEnded);
        
        this._mainVideo = this._controller.content.FindName("Main_Video");
        this._videoLink1 = this._controller.content.FindName("Video1");
        this._videoLink2 = this._controller.content.FindName("Video2");
        this._videoLink3 = this._controller.content.FindName("Video3");
        this._videoLink4 = this._controller.content.FindName("Video4");
        this._videoLink5 = this._controller.content.FindName("Video5");
        this._videoLink1Video = this._controller.content.FindName("Video1_Video");
        this._videoLink2Video = this._controller.content.FindName("Video2_Video");
        this._videoLink3Video = this._controller.content.FindName("Video3_Video");
        this._videoLink4Video = this._controller.content.FindName("Video4_Video");
        this._videoLink5Video = this._controller.content.FindName("Video5_Video");
        this._bigPlayButton = this._controller.content.FindName("Large_Play");
        this._smallPlayButton = this._controller.content.FindName("Play_Btn");
        this._smallPauseButton = this._controller.content.FindName("Pause_btn");
        this._progressButton = this._controller.content.FindName("Progress_Scrub");
        this._playTime = this._controller.content.FindName("Time");
        this._shareButton = this._controller.content.FindName("Share_text");
        this._downloadClick = this._controller.content.FindName("Download_text");
        this._progressBar = this._controller.content.FindName("Progress_Bar");
        
        this._progressButtonMouseDownDelegate = Function.createDelegate(this, this._progressButtonMouseDown);
        this._progressButton.addEventListener("MouseLeftButtonDown", this._progressButtonMouseDownDelegate);
        this._progressButtonMouseUpDelegate = Function.createDelegate(this, this._progressButtonMouseUp);
        this._progressButton.addEventListener("MouseLeftButtonUp", this._progressButtonMouseUpDelegate);
        this._progressButtonMouseMoveDelegate = Function.createDelegate(this, this._progressButtonMouseMove);
        this._progressButton.addEventListener("MouseMove", this._progressButtonMouseMoveDelegate);
        this._progressBarMouseDownDelegate = Function.createDelegate(this, this._progressBarMouseDown);
        this._progressBar.addEventListener("MouseLeftButtonDown", this._progressBarMouseDownDelegate);
        
        this._playPauseClickDelegate = Function.createDelegate(this, this._togglePlay);
        this._bigPlayButton.addEventListener("mouseleftbuttonup", this._playPauseClickDelegate);
        this._smallPlayButton.addEventListener("mouseleftbuttonup", this._playPauseClickDelegate);
        this._smallPauseButton.addEventListener("mouseleftbuttonup", this._playPauseClickDelegate);
        
        this._bufferingProgressChangedDelegate = Function.createDelegate(this, this._bufferingProgressChanged);
        this._mainVideo.addEventListener("BufferingProgressChanged", this._bufferingProgressChangedDelegate);
        
        this._mainVideoEndedDelegate = Function.createDelegate(this, this._mainVideoEnded);
        this._mainVideo.addEventListener("mediaended", this._mainVideoEndedDelegate);
        
        this._shareBtnClickDelegate = Function.createDelegate(this, this._shareBtnClick);
        this._shareButton.addEventListener("mouseleftbuttonup", this._shareBtnClickDelegate);
        this._buildShareLinks(this._controller.content.FindName("Share"));
        
        this._thumbnailHoverDelegate = Function.createDelegate(this, this._thumbnailHover);
        this._videoLink1.addEventListener("mouseenter", this._thumbnailHoverDelegate);
        this._videoLink2.addEventListener("mouseenter", this._thumbnailHoverDelegate);
        this._videoLink3.addEventListener("mouseenter", this._thumbnailHoverDelegate);
        this._videoLink4.addEventListener("mouseenter", this._thumbnailHoverDelegate);
        this._videoLink5.addEventListener("mouseenter", this._thumbnailHoverDelegate);
        
        this._thumbnailOutDelegate = Function.createDelegate(this, this._thumbnailOut);
        this._videoLink1.addEventListener("mouseleave", this._thumbnailOutDelegate);
        this._videoLink2.addEventListener("mouseleave", this._thumbnailOutDelegate);
        this._videoLink3.addEventListener("mouseleave", this._thumbnailOutDelegate);
        this._videoLink4.addEventListener("mouseleave", this._thumbnailOutDelegate);
        this._videoLink5.addEventListener("mouseleave", this._thumbnailOutDelegate);
        
        this._thumbnailClickDelegate = Function.createDelegate(this, this._thumbnailClick);
        this._videoLink1.addEventListener("MouseLeftButtonUp", this._thumbnailClickDelegate);
        this._videoLink2.addEventListener("MouseLeftButtonUp", this._thumbnailClickDelegate);
        this._videoLink3.addEventListener("MouseLeftButtonUp", this._thumbnailClickDelegate);
        this._videoLink4.addEventListener("MouseLeftButtonUp", this._thumbnailClickDelegate);
        this._videoLink5.addEventListener("MouseLeftButtonUp", this._thumbnailClickDelegate);
        
        this._videoThumbnailRepeatDelegate = Function.createDelegate(this, this._videoThumbnailRepeat);
        this._videoLink1Video.addEventListener("MediaEnded", this._videoThumbnailRepeatDelegate);
        this._videoLink2Video.addEventListener("MediaEnded", this._videoThumbnailRepeatDelegate);
        this._videoLink3Video.addEventListener("MediaEnded", this._videoThumbnailRepeatDelegate);
        this._videoLink4Video.addEventListener("MediaEnded", this._videoThumbnailRepeatDelegate);
        this._videoLink5Video.addEventListener("MediaEnded", this._videoThumbnailRepeatDelegate);
        
        this._downloadClickHandler = Function.createDelegate(this, this._downloadLinkClicked);
        this._downloadClick.addEventListener("MouseLeftButtonUp", this._downloadClickHandler);
        
        this._progressBar.Width = 1;
        this._progressButton["Canvas.Left"] = this._progressButtonStart;
        this._playTime.Text = "00:00:00";
        
        this._raiseEvent("xamlLoaded");
    },
    
    set_Volume: function(value) { this._mainVideo.Volume = value; },
    
    get_currentPosition: function() { return this._progressButton["Canvas.Left"]; },
    set_currentPosition: function(value)
    {
        if(value > this._progressBarWidth + this._progressButtonStart)
        {
            value = this._progressBarWidth + this._progressButtonStart;
        }
        if (value <= this._progressButtonStart)
        {
            value = this._progressButtonStart;
        }
        
        this._progressButton["Canvas.Left"] = value;
        
        this._set_VideoPosition(value);
    },
    
    _progressButtonMouseDown: function(sender, eventArgs)
    {
        sender.captureMouse();
        this._mouseDownValue = this.get_currentPosition();
        this._mouseDownPosition = eventArgs.getPosition(null).x;
    },
    
    _progressButtonMouseUp: function(sender, eventArgs)
    {
        sender.releaseMouseCapture();
        this._mouseDownValue = -1;
    },
    
    _progressButtonMouseMove: function(sender, eventArgs)
    {
        if(this._mouseDownValue != -1)
        {
            var newValue = this._mouseDownValue + (eventArgs.getPosition(null).x - this._mouseDownPosition);
            this._raiseEvent("positionChangeRequest", {"newValue":newValue});
        }
    },
    
    _progressBarMouseDown: function(sender, eventArgs)
    {
        var coordinate = eventArgs.getPosition(null).x - 112;
        coordinate -= this._progressBar["Canvas.Left"] + (this._progressBar.StrokeThickness * 2);
        var newValue = coordinate - this._progressButtonCenter;
        this._raiseEvent("positionChangeRequest", {"newValue":newValue});
    },
    
    _downloadLinkClicked: function(sender, eventArgs)
    {
        window.open(this._mainVideo.Source);
        this._raiseEvent("trackEvent", {verb:"Download"});
    },
    
    _buildHyperlink: function(linkCanvas)
    {
        var clickFunction = Function.createDelegate(this, this._shareLinkClicked);
        linkCanvas.addEventListener("MouseLeftButtonUp", clickFunction);
    },
    
    _shareLinkClicked: function(sender, eventArgs)
    {
        var URL = ServerTransformed.Utilities.URLLookup(sender.name.split('_')[0], "www.serverunleashed.com", "Windows Server 2008");
        window.open(URL);
        this._shareBtnClick(sender, eventArgs);
        this._raiseEvent("trackEvent", {verb:"Share"});
    },
    
    _buildShareLinks: function(shareCanvas)
    {
        for(var i = 0; i < shareCanvas.children.count; i++)
        {
            var linkCanvas = shareCanvas.children.GetItem(i);
            if(linkCanvas.toString() == "Canvas")
            {
                this._buildHyperlink(linkCanvas);
            }
        }
    },
    
    _thumbnailHover: function(sender, eventArgs)
    {
        var name = sender.name;
        var videoName = name + "_Video";
        var imageName = name + "_Image";
        var video = sender.GetHost().content.FindName(videoName);
        var image = sender.GetHost().content.FindName(imageName);
        image.Opacity = "0";
        video.Play();
    },
    
    _thumbnailOut: function(sender, eventArgs)
    {
        var name = sender.name;
        var videoName = name + "_Video";
        var imageName = name + "_Image";
        var video = sender.GetHost().content.FindName(videoName);
        var image = sender.GetHost().content.FindName(imageName);
        video.Stop();
        image.Opacity = "1";
    },
    
    _videoThumbnailRepeat: function(sender, eventArgs)
    {
        if(sender.CurrentState.toString() == "Paused")
        {
            sender.Stop();
            sender.Play();
        }
    },
    
    _thumbnailClick: function(sender, eventArgs)
    {
        var videoPath = "";
        switch(sender.name)
        {
            case "Video1":
                videoPath = ServerTransformed.Res.URL["rodeo"];
                break;
            case "Video2":
                videoPath = ServerTransformed.Res.URL["imitator"];
                break;
            case "Video3":
                videoPath = ServerTransformed.Res.URL["command"];
                break;
            case "Video4":
                videoPath = ServerTransformed.Res.URL["crouching"];
                break;
            case "Video5":
                videoPath = ServerTransformed.Res.URL["exerciser"];
                break;
            default:
                videoPath = "";
                break;
        }
        if((this._mainVideo.source != videoPath) && (videoPath != ""))
        {
            this._progressButton.releaseMouseCapture();
            this._mouseDownValue = -1;
            this._togglePlay(sender, eventArgs);
            this.set_mainVideo(videoPath);
        }
    },
    
    _shareBtnClick: function(sender, eventArgs)
    {
        if(this._isShareOpen)
        {
            this._controller.content.FindName("Share_Default").Begin();
            this._isShareOpen = false;
            this._controller.content.FindName("Share").Visibility = "Collapsed";
        }
        else
        {
            this._controller.content.FindName("Share").Visibility = "Visible";
            this._controller.content.FindName("Share_Opening").Begin();
            this._isShareOpen = true;
        }
    },
    
    _bufferingProgressChanged: function(sender, eventArgs)
    {
        if (sender.BufferingProgress != 0)
            this._progressBar.Width = (433 * sender.BufferingProgress);
        else
        {
            this._progressBar.Width = 433;
            this._mainVideo.removeEventListener("BufferingProgressChanged", "this._bufferingProgressChangedDelegate");    
        }
    },
    
    _set_VideoPosition: function(value)
    {
        var percentCompleted = (value-this._progressButtonStart)/this._progressBarWidth;
        var newValue = this._mainVideo.NaturalDuration.Seconds * percentCompleted;
        this._mainVideo.Position = ServerTransformed.Utilities.ConvertSecondsToTimeCode(newValue);
        this._updateCurrentTime();
    },
    
    _mainVideoEnded: function(sender, eventArgs)
    {
        this._raiseEvent("trackEvent", {verb:"Complete"});
        this._togglePlay(sender, eventArgs);
    },
    
    _togglePlay: function(sender, eventArgs)
    {
        if(this._playing)
        {
            this._playing = false;
            
            if(this._updateTimer)
            {
                this._updateTimer.set_enabled(false);
                this._updateTimer = null;
            }
            
            this._mainVideo.Pause();
            this._bigPlayButton.Opacity = "1";
            this._smallPlayButton.Opacity = "1";
            this._smallPauseButton.Opacity = "0";
        }
        else
        {
            if (Math.ceil(this._mainVideo.Position.Seconds) >= Math.floor(this._mainVideo.NaturalDuration.Seconds))
            {
                this._progressButton["Canvas.Left"] = 60;
                this._playTime.Text = "00:00:00";
                this._mainVideo.Stop();
            }
            
            // VV - added 3/4/2008
            // sorry for the UGLY hack, we can discuss a better solution for this
            var mouse = eventArgs.getPosition(null);
            if((this._mainVideo.Position.Seconds < 0.01) && (mouse.x < 650))
            {
                this._raiseEvent("trackEvent", {verb:"Play"});
            }
            
            // VV - old code, commented out
            /*if(Math.floor(this._mainVideo.Position.Seconds) <= 1)
            {
                this._raiseEvent("trackEvent", {verb:"Play"});
            }*/
            
            this._playing = true;
    
            this._updateTimer = $create(ServerTransformed.Timer, {interval:this._interval, enabled:true}, {tick:this._onTickHandler}, null, null);
            
            this._mainVideo.Play();
            this._bigPlayButton.Opacity = "0";
            this._smallPlayButton.Opacity = "0";
            this._smallPauseButton.Opacity = "1";
        }
    },
    
    _paint: function(sender, eventArgs)
    {
        if(this._mouseDownValue == -1)
            this._progressButton["Canvas.Left"] = (438 * (this._mainVideo.Position.Seconds/(this._mainVideo.NaturalDuration.Seconds + 1))) + 60;
        
        this._updateCurrentTime();
    },
    
    _updateCurrentTime: function()
    {
        var currentTime = Math.ceil(this._mainVideo.Position.Seconds);

        this._playTime.Text = ServerTransformed.Utilities.ConvertSecondsToTimeCode(currentTime);
    },
    
    playVideo: function(url, args)
    {
        this._videoPlayer2.Opacity = 1;
        
        var player = this._videoPlayer2;
        
        if(args == Sys.EventArgs.Empty)
        {
            this._contentViewport.Opacity = 0;
            this._videoEndedDelegateID = player.addEventListener("mediaended", this._videoEndedDelegate);
            player.AutoPlay = "true";
        }
        else
        {
            player.removeEventListener("mediaended", this._videoEndedDelegateID);
            player.addEventListener("mediaended", Function.createDelegate(this, this._exit));
            player.addEventListener("mediaended", args);
            player.AutoPlay = "false";
        }
                
        player.Source = url;
        this._videoPlayer1.Pause();
    },
    
    stopVideo: function()
    {
        this._mainVideo.Stop();
    },
    
    _animationEnded: function(sender, eventArgs) 
    { 
        sender.removeEventListener("Completed", "this._animationEndedDelegate");
        this._raiseEvent("animationEnded"); 
    },
    
    _videoEnded: function(sender, eventArgs)
    {
        sender.removeEventListener("mediaended", "this._videoEndedDelegate");
        sender.AutoPlay = "false";
        sender.Pause();
        sender.Opacity = 0;
        this._contentViewport.Opacity = 1;
        this._raiseEvent("videoEnded");
    },
    
    playExitVideo: function()
    {
        this._contentViewport.Children.GetItem(0).Visibility = "Collapsed";
        var player = this._videoPlayer2;
        player.Play();
    },
    
    _exit: function(sender, eventArgs)
    {
        if(this._updateTimer)
        {
            this._updateTimer.set_enabled(false);
            this._updateTimer = null;
        }
        
        this.remove_exitHandler(this._exitHandler);
        
        this._videoPlayer2.Opacity = 0;
        this._videoPlayer2.Stop();
        this._raiseEvent("exit");
    },
    
    dispose: function()
    {
        this._exit(this, Sys.EventArgs.Empty);
    },
    
    get_events: function()
    {
        if(!this._events)
        {
            this._events = new Sys.EventHandlerList();
        }
        return this._events;
    },
    
    _raiseEvent: function(eventName, eventArgs)
    {
        var handler = this.get_events().getHandler(eventName);
        
        if(handler)
        {
            if(!eventArgs) eventArgs = Sys.EventArgs.Empty;
            handler(this, eventArgs);
        }
    }
}

ServerTransformed.VideoContentView.registerClass("ServerTransformed.VideoContentView");