//
//  DocumentViewerToolbarView.js
//  CoverPage
//
//  Created by Richard Anaya on 1/9/2013.
//  Copyright (c) 2014 Evernote. All rights reserved.
//

var DocumentViewerToolbarView = function(resources){
    this.resources = resources;
};

DocumentViewerToolbarView.prototype.showUI = function() {
    //right toolbar
    $encpJquery(document.body).append('<div class="documentViewerToolbar"><div class="documentViewerExitButton"></div><div class="documentViewerLaserButton"></div><div class="documentViewerMonitorButton"></div></div>');
    $encpJquery('.documentViewerToolbar').hide();
    this.boundOnMouseMove = _.bind(this.onMouseMove,this);
    document.addEventListener('mousemove', this.boundOnMouseMove);
    $encpJquery('.documentViewerMonitorButton').click(_.bind(this.onMonitorButtonClicked,this));
    $encpJquery('.documentViewerLaserButton').click(_.bind(this.onLaserButtonClicked,this));
    $encpJquery('.documentViewerExitButton').click(_.bind(this.onExitButtonClicked,this));

    //laser toolbar
    this.isLaserToolbarShow = false;
    $encpJquery(document.body).append('<div class="documentViewerLaserToolbar"><div class="documentViewerBlueLaserButton"></div><div class="documentViewerYellowLaserButton"></div><div class="documentViewerRedLaserButton"></div><div class="documentViewerDefaultLaserButton"></div></div>');
    $encpJquery(".documentViewerLaserToolbar").hide();

    this.cursorChangeRequested = new Signal();
    this.zoomOutRequested = new Signal();
    this.zoomInRequested = new Signal();
    this.fillScreenRequested = new Signal();
    this.actualSizeRequested = new Signal();
    this.exitRequested = new Signal();
    this.changeMonitorRequested = new Signal();
    this.showCursorRequested = new Signal();
    this.hideCursorRequested = new Signal();
    $encpJquery('.documentViewerBlueLaserButton').click(_.bind(this.onCursorChangeClick,this,"blue"));
    $encpJquery('.documentViewerYellowLaserButton').click(_.bind(this.onCursorChangeClick,this,"yellow"));
    $encpJquery('.documentViewerRedLaserButton').click(_.bind(this.onCursorChangeClick,this,"red"));
    $encpJquery('.documentViewerDefaultLaserButton').click(_.bind(this.onCursorChangeClick,this,"default"));

    //left toolbar
    $encpJquery(document.body).append('<div class="documentViewerToolbarImage"><div class="documentViewerZoomOutButton"></div><div class="documentViewerZoomInButton"></div><div class="documentViewerFillScreenButton"></div><div class="documentViewerActualSizeButton"></div></div>');
    $encpJquery('.documentViewerZoomOutButton').click(_.bind(this.onZoomOutButtonClicked,this));
    $encpJquery('.documentViewerZoomInButton').click(_.bind(this.onZoomInButtonClicked,this));
    $encpJquery('.documentViewerFillScreenButton').click(_.bind(this.onFillScreenButtonClicked,this));
    $encpJquery('.documentViewerActualSizeButton').click(_.bind(this.onActualSizeButtonClicked,this));
    this.enabled = true;


    var _this = this;
    $encpJquery(document).keydown(function(e){
        if(!_this.enabled) return;

        if(e.keyCode == 27){
            _this.onExitButtonClicked();
        }
        else if(e.keyCode == 80 && e.ctrlKey){
            _this.forceVisible = true;
            window.setTimeout(function(){
                _this.forceVisible = false;
            },3000);
            _this.onLaserButtonClicked();
            _this.onMouseMove({cursorX:0,cursorY:0});
            e.preventDefault();
        }
        else if((e.keyCode == 187 || e.keyCode == 107) && e.ctrlKey){
            _this.onZoomInButtonClicked();
            e.preventDefault();
        }
        else if((e.keyCode == 189 || e.keyCode == 109) && e.ctrlKey){
            _this.onZoomOutButtonClicked();
            e.preventDefault();
        }
        else if(e.keyCode == 49 && e.ctrlKey){
            _this.onActualSizeButtonClicked();
            e.preventDefault();
        }
        else if(e.keyCode == 48 && e.ctrlKey){
            _this.onFillScreenButtonClicked();
            e.preventDefault();
        }
        else if(e.keyCode == 83 && e.ctrlKey){
            _this.onMonitorButtonClicked();
            e.preventDefault();
        }
        else if(e.keyCode == 49 && e.ctrlKey){
            _this.onCursorChangeClick("blue");
            e.preventDefault();
        }
        else if(e.keyCode == 50 && e.ctrlKey){
            _this.onCursorChangeClick("yellow");
            e.preventDefault();
        }
        else if(e.keyCode == 51 && e.ctrlKey){
            _this.onCursorChangeClick("red");
            e.preventDefault();
        }
        else if(e.keyCode == 52 && e.ctrlKey){
            _this.onCursorChangeClick("default");
            e.preventDefault();
        }
    });

    $encpJquery('.documentViewerExitButton').hover(_.bind(this.showToolTip,this,this.resources.PresentTooltipExitDocViewer,this.resources.PresentTooltipExitDocViewerCmd), _.bind(this.hideToolTip,this));
    $encpJquery('.documentViewerLaserButton').hover(_.bind(this.showToolTip,this,this.resources.PresentTooltipCursorTypes,this.resources.PresentTooltipCursorTypesCmd), _.bind(this.hideToolTip,this));
    $encpJquery('.documentViewerMonitorButton').hover(_.bind(this.showToolTip,this,this.resources.PresentTooltipChangeScreen,this.resources.PresentTooltipChangeScreenCmd), _.bind(this.hideToolTip,this));
    $encpJquery('.documentViewerBlueLaserButton').hover(_.bind(this.showToolTip,this,this.resources.PresentTooltipBlueLaserPointer,this.resources.PresentTooltipBlueLaserPointerCmd), _.bind(this.hideToolTip,this));
    $encpJquery('.documentViewerYellowLaserButton').hover(_.bind(this.showToolTip,this,this.resources.PresentTooltipYellowLaserPointer,this.resources.PresentTooltipYellowLaserPointerCmd), _.bind(this.hideToolTip,this));
    $encpJquery('.documentViewerRedLaserButton').hover(_.bind(this.showToolTip,this,this.resources.PresentTooltipRedLaserPointer,this.resources.PresentTooltipRedLaserPointerCmd), _.bind(this.hideToolTip,this));
    $encpJquery('.documentViewerDefaultLaserButton').hover(_.bind(this.showToolTip,this,this.resources.PresentTooltipArrowPointer,this.resources.PresentTooltipArrowPointerCmd), _.bind(this.hideToolTip,this));

    $encpJquery('.documentViewerFillScreenButton').hover(_.bind(this.showImageToolTip,this,this.resources.PresentTooltipFillScreen,this.resources.PresentTooltipFillScreenCmd), _.bind(this.hideImageToolTip,this));
    $encpJquery('.documentViewerZoomOutButton').hover(_.bind(this.showImageToolTip,this,this.resources.PresentTooltipZoomOut,this.resources.PresentTooltipZoomOutCmd), _.bind(this.hideImageToolTip,this));
    $encpJquery('.documentViewerZoomInButton').hover(_.bind(this.showImageToolTip,this,this.resources.PresentTooltipZoomIn,this.resources.PresentTooltipZoomInCmd), _.bind(this.hideImageToolTip,this));
    $encpJquery('.documentViewerActualSizeButton').hover(_.bind(this.showImageToolTip,this,this.resources.PresentTooltipActualSize,this.resources.PresentTooltipActualSizeCmd), _.bind(this.hideImageToolTip,this));

    $encpJquery(document.body).append('<div class="documentViewerToolbarTooltip"><span class="documentViewerToolbarTooltipKeyShortcut"></span><span class="documentViewerToolbarTooltipDescription"></span></div>');
    $encpJquery('.documentViewerToolbarTooltip').get(0).onselectstart = function () { return false; }
    this.hideToolTip();
    $encpJquery(document.body).append('<div class="documentViewerToolbarImageTooltip"><span class="documentViewerToolbarTooltipKeyShortcut"></span><span class="documentViewerToolbarTooltipDescription"></span></div>');
    $encpJquery('.documentViewerToolbarImageTooltip').get(0).onselectstart = function () { return false; }
    this.hideImageToolTip();
    /*$encpJquery(document.body).append('<div class="documentViewerFilename"><center><div class="documentViewerFilenameCenteredBlock"></div></center></div>');
    $encpJquery('.documentViewerFilename').get(0).onselectstart = function () { return false; }
    $encpJquery('.documentViewerFilenameCenteredBlock').get(0).onselectstart = function () { return false; }
    this.hideFileName();*/
    this.wasHidden = false;
    this.wasHidden2 = false;
};

DocumentViewerToolbarView.prototype.onZoomOutButtonClicked = function(){
    this.zoomOutRequested.dispatch()
};

DocumentViewerToolbarView.prototype.onZoomInButtonClicked = function(){
    this.zoomInRequested.dispatch()
};

DocumentViewerToolbarView.prototype.onFillScreenButtonClicked = function(){
    this.fillScreenRequested.dispatch()
};

DocumentViewerToolbarView.prototype.onActualSizeButtonClicked = function(){
    this.actualSizeRequested.dispatch()
};

DocumentViewerToolbarView.prototype.onCursorChangeClick = function(color){
    if (color === 'blue') Analytics.reportEvent('presentation_mode', 'tools', 'pointer_blue');
    else if (color === 'red') Analytics.reportEvent('presentation_mode', 'tools', 'pointer_pink');
    else if (color === 'yellow') Analytics.reportEvent('presentation_mode', 'tools', 'pointer_green');
    else if (color === 'default') Analytics.reportEvent('presentation_mode', 'tools', 'pointer_mouse');

    $encpJquery('.documentViewerLaserButton').css('background-image','url(images/cursor_'+color+'_icon.svg), url(images/cursor_disclosure_arrow_icon.svg)');
    this.hideLaserPointers();
    this.cursorChangeRequested.dispatch(color)
};

DocumentViewerToolbarView.prototype.setCursorIcon = function(icon){
    $encpJquery('.documentViewerLaserButton').css('background-image','url(images/cursor_'+icon+'_icon.svg), url(images/cursor_disclosure_arrow_icon.svg)');
};

DocumentViewerToolbarView.prototype.showToolTip = function(description, shortcut){
    $encpJquery('.documentViewerToolbarTooltip').show();
    $encpJquery('.documentViewerToolbarTooltip .documentViewerToolbarTooltipDescription').html(description);
    $encpJquery('.documentViewerToolbarTooltip .documentViewerToolbarTooltipKeyShortcut').html(shortcut);
};

DocumentViewerToolbarView.prototype.hideImageToolTip = function(){
    $encpJquery('.documentViewerToolbarImageTooltip').hide();
};

DocumentViewerToolbarView.prototype.showImageToolTip = function(description, shortcut){
    $encpJquery('.documentViewerToolbarImageTooltip').show();
    $encpJquery('.documentViewerToolbarImageTooltip .documentViewerToolbarTooltipDescription').html(description);
    $encpJquery('.documentViewerToolbarImageTooltip .documentViewerToolbarTooltipKeyShortcut').html(shortcut);
};

DocumentViewerToolbarView.prototype.hideToolTip = function(){
    $encpJquery('.documentViewerToolbarTooltip').hide();
};

/*DocumentViewerToolbarView.prototype.displayFileName = function(description){
    $encpJquery('.documentViewerFilename .documentViewerFilenameCenteredBlock').html(description);
    var _this = this;
    if(!this.fileNameTimer){
        this.showFileName(description);
    }
    else {
        clearTimeout(this.fileNameTimer);
    }
    this.fileNameTimer = window.setTimeout(function(){
        _this.hideFileName();
        _this.fileNameTimer = null;
    },3000);
};

DocumentViewerToolbarView.prototype.showFileName = function(description){
    var fadeTime = 1000/6.0;
    $encpJquery('.documentViewerFilename').fadeIn(fadeTime);
    $encpJquery('.documentViewerFilename .documentViewerFilenameCenteredBlock').html(description);
};

DocumentViewerToolbarView.prototype.hideFileName = function(){
    var fadeTime = 1000/6.0;
    $encpJquery('.documentViewerFilename').fadeOut(fadeTime);
};*/

DocumentViewerToolbarView.prototype.showLaserPointers = function(){
    $encpJquery(".documentViewerLaserToolbar").fadeIn(1000/6.0);
    this.isLaserToolbarShow = true;
};

DocumentViewerToolbarView.prototype.hideLaserPointers = function(){
    $encpJquery(".documentViewerLaserToolbar").fadeOut(1000/6.0);
    this.isLaserToolbarShow = false;
};

DocumentViewerToolbarView.prototype.onMonitorButtonClicked = function(event){
    this.changeMonitorRequested.dispatch();
};

DocumentViewerToolbarView.prototype.onLaserButtonClicked = function(event){
    if(!this.isLaserToolbarShow){
        this.showLaserPointers();
    }
    else {
        this.hideLaserPointers();
    }
};

DocumentViewerToolbarView.prototype.onExitButtonClicked = function(event){
    this.exitRequested.dispatch();
};

DocumentViewerToolbarView.prototype.isMouseInHitArea = function(x,y){
    if(this.forceVisible){
        return true;
    }
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;

    var toolBarX = windowWidth-70-40;
    var toolBarY = 65;
    var toolBarWidth = 40;
    var toolBarHeight = 160;
    var padding = 20;

    if(this.isLaserToolbarShow){
        if(x>toolBarX-padding && x < toolBarX+toolBarWidth+padding && y > toolBarY-padding && y < toolBarY+toolBarHeight+padding){
            return true;
        }
    }

    var outerHitBoxWidth = 350;
    var outerHitBoxHeight = 120;
    return (y<outerHitBoxHeight && x > (windowWidth-outerHitBoxWidth));
};

DocumentViewerToolbarView.prototype.isMouseInImageToolsHitArea = function(x,y){
    if(this.forceVisible){
        return true;
    }
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;

    var toolBarX = 70+40;
    var toolBarY = 65;
    var toolBarWidth = 40;
    var toolBarHeight = 160;
    var padding = 20;

    if(this.isLaserToolbarShow){
        if(x<toolBarX+padding && y > toolBarY-padding && y < toolBarY+toolBarHeight+padding){
            return true;
        }
    }

    var outerHitBoxWidth = 350;
    var outerHitBoxHeight = 120;
    return (y<outerHitBoxHeight && x < outerHitBoxWidth);
};

DocumentViewerToolbarView.prototype.isInRect = function(x,y,rx,ry,w,h){
    return (x>=rx && x<rx+w && y>=ry && y<ry+h);
};


DocumentViewerToolbarView.prototype.onMouseMove = function(event){
    var x = event.clientX;
    var y = event.clientY;

    var fadeTime = 1000/6.0;

    if(this.isMouseInHitArea(x,y) || this.isMouseInImageToolsHitArea(x,y)){
        $encpJquery('.documentViewerToolbar').css('top',0+"px");
        $encpJquery('.documentViewerLaserToolbar').css('top',65+"px");
        $encpJquery('.documentViewerToolbarTooltip').css('top',(0+20)+"px");

        $encpJquery('.documentViewerToolbar').css('right',"0px");
        $encpJquery('.documentViewerToolbar').fadeIn(fadeTime);

        if(this.isInRect(x,y,window.innerWidth-171,20,133,37) || (this.isLaserToolbarShow && this.isInRect(x,y,window.innerWidth-110,67,42,163)) ){
            this.hideCursorRequested.dispatch();
            this.wasHidden = true;
        }
        else {
            if(this.wasHidden){
                this.showCursorRequested.dispatch();
                this.wasHidden = false;
            }
        }


        $encpJquery('.documentViewerToolbarImage').css('top',0+"px");

        $encpJquery('.documentViewerToolbarImage').css('left',"0px");
        $encpJquery('.documentViewerToolbarImage').fadeIn(fadeTime);

        if(this.isInRect(x,y,20,20,163,42)){
            this.hideCursorRequested.dispatch();
            this.wasHidden2 = true;
        }
        else {
            if(this.wasHidden2){
                this.showCursorRequested.dispatch();
                this.wasHidden2 = false;
            }
        }
    }
    else {
        if(this.wasHidden){
            this.showCursorRequested.dispatch();
            this.wasHidden = false;
        }
        if(this.isLaserToolbarShow){
            this.hideLaserPointers();
        }
        $encpJquery('.documentViewerToolbar').fadeOut(fadeTime);

        if(this.wasHidden2){
            this.showCursorRequested.dispatch();
            this.wasHidden2 = false;
        }
        $encpJquery('.documentViewerToolbarImage').fadeOut(fadeTime);
    }


};

DocumentViewerToolbarView.prototype.removeUI = function() {
    this.enabled = false;
    document.removeEventListener('mousemove', this.boundOnMouseMove);
    $encpJquery('.documentViewerToolbar').remove();
    $encpJquery('.documentViewerLaserToolbar').remove();
    $encpJquery('.documentViewerToolbarImage').remove();
    $encpJquery('.documentViewerToolbarTooltip').remove();
    $encpJquery('.documentViewerToolbarImageTooltip').remove();
    //$encpJquery('.documentViewerFilename').remove();
};

DocumentViewerToolbarView.prototype.destroy = function() {
    this.removeUI();
};