/*
This files contains fully functional sample GUI for cobrowse application. All the style related information for this ui
to work is available in cbe.css
*/

var _toolbarCreated = false; 

function createUI() {

        var _winMinimized = false;

       
		var cbePassPhraseModelDiv = $(
           '<div class="modal fade" id="cbePassPhraseModelDiv" data-backdrop="false" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;">' +
				'<div class="modal-dialog">' +
				'<div class="modal-content logoutConfirmation-modal">' +
                '<div class="modal-header">' +
                  '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                   '<h3 class="modal-title" id="logoutConfirmationModalLabel">Avaya Web Co-browsing</h3>' +
               '</div>' +
                '<div class="modal-body">' +
                   '<span id="cbePassPhraseModalTitle" class="well-sm label-success" style="font-size:14px;">Placeholder for message</span>' +
                   '<br><br>' +
                   '<p id="cbePassPhraseModalMsg" style="font-size:14px;">Placeholder for message</p>' +
                '</div>' +
                '<div class="modal-footer">' +
					'<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>');
		var cbeAgentStausDiv = $(
           '<div class="modal fade" id="cbeAgentStausDiv" data-backdrop="false" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;">' +
				'<div class="modal-dialog">' +
				'<div class="modal-content">' +
                '<div class="modal-header">' +
                   '<h3 class="modal-title">Avaya Web Co-browsing</h3>' +
               '</div>' +
                '<div class="modal-body">' +
                   
                   '<p style="font-size:14px;">It seems the agent has left the cobrowse session, wait for few minutes or choose to end the session.</p>' +
                '</div>' +
                '<div class="modal-footer">' +
					'<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>');
	
        var cbeToolbar = $('<div id="cbeToolbar" class="cbe-container cbe-dock-BR ui-draggable"></div>');

        //UI Header
        var cbeHeader = $(
            '<div id="cbeHeaderDiv" class="cbe-header" style="display: none;cursor:move;">' +
                '<div class="cbe-spinner-head"></div>' +
                '<div id="cbeState" class="cbe-icon-status cbe-icon-grey"></div>' +
                '<span id="cbeStatusText"></span><span id="cbeAgentName"></span>' +
                '<div id="cbeMinimize" class="cbe-icon cbe-header-button cbe-icon-minimize"></div>' +
                '</div>');

        var preStartDiv = $(
            '<div id="cbePreStartDiv" class="cbe-info" style="display: none; margin: 5px;cursor:move;">' +
                //'<span id="cbePreStartMsg" style="padding: 10px; font-size: 14px; color: #bd362f;">Avaya Web Co-browsing!</span><br>' +
                '<div style="float: left; padding: 5px;">' +
                '<div id="cbePreJoinBtn" class="cbe-btn cbe-btn-XL" title="Join a Co-browse Session using Key" >Join &bull; </div>' +
                '<div id="cbePreRequestBtn" class="cbe-btn cbe-btn-XL" title="Request for a Co-browse Session" >Request </div>' +
                '</div>' +
                '<div style="float: left; padding: 10px; font-size: 11px; color: #802420;">' +
                '<span> &copy; 2016, Avaya Inc. All Rights Reserved</span>' +
                '</div>' +
                '</div>');

        //JOIN Cobrowse UI
        var startDiv = $(
            '<div id="cbeStartDiv" class="cbe-info do-not-drag-me">' +
                '<div id="cbeJoinMode" style="padding: 5px; display: none;">' +
                '<input id="cbeCustName" maxlength="30" class="cbe-input" type="text" placeholder="Your name" onClick="focus()"></input>' +
                '<input id="cbeCustEmailIdJoinMode" class="cbe-input" type="text" placeholder="Your emailid" onClick="focus()"></input>' +
                '<input id="cbeSessionKey" class="cbe-input" type="text" placeholder="SESSION KEY" onClick="focus()"></input>' +
				'<div style= "display: block;">'+

                '<select id="Joinlang_selection">'+
			    '<option selected="selected" value="en_US">English</option>'+
                '<option value="de">Deutsch</option>'+
                '<option value="fr">French</option>'+
                '<option value="zh_CN">Chinese</option>'+
                '<option value="es">Spanish</option>'+
				'<option value="it">Italian</option>'+
				'<option value="ja">Japanese</option>'+
				'<option value="ko">Korean</option>'+
				'<option value="pt_BR">Portuguese</option>'+
				'<option value="ru">Russian</option>'+
                                '<option value="ar_SA">Arabic</option>'+
                                '<option value="zh_TW">Traditional Chinese</option>'+
                '</select>'+
                '</div>'+
                '<input type="checkbox" value="on" id="joinsessionchkcustconsent" checked>'+'Allow to save personal information'+
                '<div id="cbeJoinBtn" class="cbe-btn cbe-btn-big">Start</div>' +
	        '<div id="cbeCancelBtn1" class="cbe-btn cbe-btn-big">Cancel</div>'+
                '</div>' +
                '<div id="cbeRequestMode" style="padding: 5px; display: none;">' +
                '<span style=" padding: 0px; font: 15px; font-weight: bolder"></span>' +
                '<input id="cbeCustNameReqMode" class="cbe-input" type="text" placeholder="Your name" style="float: left" onClick="focus()"></input>' +
                '<span style=" padding: 0px; font: 15px; font-weight: bolder"></span>' +
                '<input id="cbeCustEmailIdReqMode" class="cbe-input" type="text" placeholder="Your emailid" style="float: left" onClick="focus()"></input>' +
		'<div style= "display: block;">'+
                '<select id="lang_selection">'+
		'<option selected="selected" value="en_US">English</option>'+
                '<option value="de">Deutsch</option>'+
                '<option value="fr">French</option>'+
                '<option value="zh_CN">Chinese</option>'+
                '<option value="es">Spanish</option>'+
		'<option value="it">Italian</option>'+
		'<option value="ja">Japanese</option>'+
		'<option value="ko">Korean</option>'+
		'<option value="pt_BR">Portuguese</option>'+
		'<option value="ru">Russian</option>'+
                '<option value="ar_SA">Arabic</option>'+
                '<option value="zh_TW">Traditional Chinese</option>'+
                '</select>'+
                '</div>'+
                '<input type="checkbox" value="on" id="reqsessionchkcustconsent" checked>'+'Allow to save personal information'+
                '<div id="cbeRequestBtn" class="cbe-btn cbe-btn-big" title="Request for a Co-browse Session" >Request </div>' +
                '<div id="cbeCancelBtn2" class="cbe-btn cbe-btn-big">Cancel</div>' +
                '<br><br>'+
                '</div>' +
                '<div id="cbeWaitForAgentDiv" style="padding: 5px; display: none;">' +
                '<span id="cbeWaitCustName" style=" padding: 5px; font-size: 15px; font-weight: normal; color:cornflowerblue ">Hello Customer!</span>' +
                '<br><br>'+
                '<span id="cbeWaitKeyMsg" style="font: 12px; font-weight: normal; color: #802420">Key Msg</span>' +
                '<br><br>'+
                '<span id="cbeWaitMsg" style=" padding: 0px; font: 12px; font-weight: normal">Please wait while CSO Join the session</span>' +
                '<br><br>'+
                '<div id="cbeWaitCancelBtn" class="cbe-btn cbe-btn-big" title="Cancel" >Cancel</div>' +
                '<br><br>'+
                '</div>' +
                '</div>');

       
		var errorDiv = $(
            '<div id="cbeErrorDiv" class="cbe-error" style="display:none;">' +
                '<div id="cbeErrMsg">Invalid AuthKey or Error occured </div>' +
                '<div id="cbeRetryBtn" class="cbe-btn cbe-btn-small">Retry</div>' +
                '<div id="cbeCancelBtn" class="cbe-btn cbe-btn-small">Cancel</div>' +
                '</div>');

        var cbeInProgressDiv = $(
            '<div id="cbeInProgressDiv" class="cbe-info" style="display:none;word-wrap:break-word;">' +
                '<span id="cbeCustInfo" style=" padding: 5px; font-size: 15px; font-weight: bolder;word-wrap:break-word;">Hello Customer!</span>' +
                '<div id="cbeLiveStatus" style="margin:5px;"></div>'+
				'<div id="cbeKey" style="margin:5px;"></div>'+
                '<div style="padding: 5px; margin-bottom:5px;">' +
                    '<div id="cbeRevokeBtn" class="cbe-btn-revoke" title="Take the control back" style="display: none;">Revoke Control</div>'+
                    '<div id="cbePauseBtn" class="cbe-btn cbe-btn-small" title="Pause Cobrowsing">Pause</div>' +
                    '<div id="cbeResumeBtn" class="cbe-btn-revoke" title="Resume Cobrowsing">Resume</div>' +
                    '<div id="cbeStopBtn" class="cbe-btn cbe-btn-small" title="Stop Cobrowsing">Stop</div>' +
                '</div>' +
                '<br><br>'+
            '</div>');
		var cbeLogoutModelDiv = $(
           '<div class="modal fade" id="cbeLogoutModelDiv" data-backdrop="false" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;">' +
				'<div class="modal-dialog">' +
				'<div class="modal-content logoutConfirmation-modal">' +
                '<div class="modal-header">' +
                   '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                   '<h3 class="modal-title" id="logoutConfirmationModalLabel">Avaya Web Co-browsing</h3>' +
               '</div>' +
                '<div class="modal-body">' +
                   '<span id="logoutConfirmationModalTitle" class="well-sm label-success" style="font-size:14px;">Placeholder for message</span>' +
                   '<br><br>' +
                   '<p id="logoutConfirmationModalMsg" style="font-size:14px;">Placeholder for message</p>' +
                '</div>' +
                '<div class="modal-footer">' +
                    '<button type="button" class="btn btn-primary" id="confirmLogout">Ok</button>' +
					'<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>');
	
	var cbeSessionCloseDiv = $(
           '<div class="modal" id="cbeSessionCloseDiv" data-backdrop="false" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;">' +
				'<div class="modal-dialog">' +
				'<div class="modal-content logoutConfirmation-modal">' +
                '<div class="modal-header">' +
                   '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                   '<h3 class="modal-title" id="SessionClosedConfirmationModalLabel">Avaya Web Co-browsing</h3>' +
               '</div>' +
                '<div class="modal-body">' +
                   '<span id="sessionCloseConfirmationModalTitle" class="well-sm label-success" style="font-size:14px;">Placeholder for message</span>' +
                   '<br><br>' +
                   '<p id="sessionCloseConfirmationModalMsg" style="font-size:14px;">Placeholder for message</p>' +
                '</div>' +
                '<div class="modal-footer">' +
                    '<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>');
	

        //Agent Requesting Control
        var cbeRequestDiv = $(
            '<div id="cbeRequestDiv" class="cbe-request" style="display:none;">' +
                '<div style="margin-right: 2px; margin-top: 3px; margin-left: 10px;">Agent would like to control your web page, please respond</div>' +
                    '<div style="padding: 2px;">' +
                        '<div id="cbeAllowBtn" class="cbe-btn cbe-btn-small">Allow</div>' +
                        '<div id="cbeDenyBtn" class="cbe-btn cbe-btn-small">Deny</div>' +
                    '</div>' +
            '</div>');

        //Generic Progress DIV
        var cbeProgressDiv = $(
            '<div id="cbeProgressDiv" class="cbe-info" style="display: none; margin: 5px; height: 60px; overflow: auto">' +
                '<div class="cbe-spinner"></div>' +
                '<div style="float: left; padding: 5px;">' +
                    '<span id="cbeProgressMsg" style="font-size: 14px;"> Progress..... </span>'+
                '</div>' +
                '<div style="padding: 8px;">' +
                    '<div id="cbeProgressCloseBtn" class="cbe-btn cbe-btn-small">Close</div>' +
                '</div>' +
            '</div>');
        
        
        var cbeInactiveModal = $(
                '<div class="modal fade" id="inactiveModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" hidden="true">' +
    			'<div class="modal-dialog">' +
                '<div class="modal-content inactive-modal">' +
                 '<div class="modal-header"> ' +
                  '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                        '<h3 class="modal-title" id="inactiveModalLabel">Avaya Web Co-browsing</h3>' +
                    '</div>' +
                    '<div class="modal-body">' +
                        '<span id="inactiveModalTitle" class="well-sm label-success">Placeholder for message</span>' +
                        '<br><br>' +
                        '<p id="inactiveModalMsg">"Do you want to continue? "</p>' +
                    '</div>' +

                    '<div class="modal-footer">' +
                        '<button type="button" class="btn btn-primary" id="avContinue" data-dismiss="modal">Yes</button>' +
    					'<button type="button" class="btn btn-primary" id="avClose" data-dismiss="modal">No</button>' +
    					'<br><br>' +
    					'<div id="warningMsg"></div>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>'
    		);
    		
        var cbeInactiveMessageModal = $('<div class="modal fade" id="inactiveMessageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> ' +
                '<div class="modal-dialog">' +
                    '<div class="modal-content">' +
                        '<div class="modal-header">' +
                            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                            '<h3 class="modal-title" id="inactiveMessageModalLabel">Avaya Web Co-browsing</h3>' +
                        '</div>' +
                        '<div class="modal-body">'+
                            '<span id="inactiveMessageModalTitle" class="well-sm label-success">Placeholder for message</span>' +
                            '<br><br>' +
                            '<p id="inactiveMessageModalMsg">Session closed due to inactive Timeout</p>' +
                        '</div>' +

                        '<div class="modal-footer">' +
        				     '<button type="button" class="btn btn-primary" id="avInactiveMessageClose" data-dismiss="modal">Close</button>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>' );	

        var annotateToolbar = $('<div id="feature-controls" class="featureControls" features="show">'+
					'<div id= "divMarkerControl" class="markerFeatureControl" showcolor = "true">'+
							'<div id = "divEnablemarker" class = "divMakerElements" markerMode="none">'+
								'<button id="btnMarker" type = "button" class="enablemarker" title = "Enable marker" markerMode="none"></button>'+
							'</div>'+
							'<div id= "divMarkerColorSelection" class = "grpMakerColors">' +
								'<button id = "redMarkerCol" type = "button" class="red-marker" val="#FF3C3C" title = "red marker "></button>'+
								'<button id = "blueMarkerCol" typre = "button" class="blue-marker" val="#A3CEDC" title = "blue "></button>'+
								'<button id = "greenMarkerCol" type = "button" class="green-marker" val = "#50FF50" title = "green marker"></button>'+
							'</div>'+
							'<div id= "divClearMarkers" class = "divMakerElements">' +
								'<button id = "clearMarkers" type = "button" class="clear-marker" val="#FF3C3C" title = "clear all markers "></button>'+
							'</div>'+
							'<div id= "divhidemarkers" class = "divMakerElements">' +
								'<button id = "hideMarkers" type = "button" class="hide-marker hideAgentMarkersClass" val="#FF3C3C" title = "hide/unhide agent markers "/>'+
							'</div>'+
                                                        '<div id= "divhideSelfmarkers" class = "divMakerElements">' +
                                                                '<button id = "hideSelfMarkers" type = "button" class="hide-marker hideSelfMarkersClass" title = "hide/unhide customer markers "></button>'+
							'</div>'+
					'</div>'+
					'<div id="annotate-controls" class="annotate-controls" mode="none" showing="false">'+		
									'<button id="toggler" type = "button" class="annotate"></button>'+
									'<button id = "freehand" type = "button" class="mode-draw" title = "draw freehand"></button>'+
									'<button id = "shapeRec" type = "button" class="mode-draw-rec" title="draw rectangle"></button>'+
									'<button id = "shapeCir" type = "button" class="mode-draw-circle" title="draw circle"></button>'+
									'<button id = "removeAll" type = "button" class="clearAll" title = "clear all annotations"></button>'+
									'<button id = "unhide" type = "button" class="agentHide" title = "hide/unHide agent annotations" ></button>'+
                                                                        '<button id = "selfHideBtn" type = "button" class="selfHide" title = "hide/unHide customer annotations" ></button>'+
                                                                        '<br>'+
								'<div id= "colorselect" class = "grpElements">' +
									'<button id = "imgRedCol" type = "button" class="red-color-marker" val="red" title = "red color"></button>'+
									'<button id = "imgBlueCol" typre = "button" class="blue-color-marker" val="blue" title = "blue color"></button>'+
									'<button id = "imgGreenCol" type = "button" class="green-color-marker" val = "green" title = "green color"></button>'+
								'</div>'+
								'<div id= "clrChoice" class = "colorChoiceDiv" style="background-color:red;">' +
								'</div>'+
									'&nbsp;&nbsp;&nbsp;&nbsp;'+
								'<div id= "selectSize" class = "grpElements" >'+
									'<button id = "annotationSizeSmall" type = "button" class="font_small" val="5" title = "small"></button>'+
									'&nbsp;'+
									'<button id = "annotationSizeMedium" type = "button" class="font_medium" val="7" title = "medium"></button>'+
									'&nbsp;'+
									'<button id = "annotationSizeLarge" type = "button" class="font_large" val = "11" title = "large"></button>'+
								'</div>'+
					'</div>'+
		'</div>');
        //Disclaimer TEXT
        var cbeDisclaimerDiv = $('<div id="cbeDisclaimerDiv" class="cbe-disclaimer">' +'Disclaimer Text.... ' +'</div>');
        cbeToolbar.append(cbeHeader, $('<div id="cbeMainSubDiv"></div>').append(preStartDiv, cbeProgressDiv, startDiv,cbeInProgressDiv,errorDiv,cbeRequestDiv,cbeDisclaimerDiv,cbeLogoutModelDiv,cbePassPhraseModelDiv , cbeInactiveModal,cbeInactiveMessageModal,cbeSessionCloseDiv,cbeAgentStausDiv));
        cbeToolbar.hide();
        $('body').append(cbeToolbar);
		$('#cbeToolbar').draggable({ 
			opacity: 0.7, 
			containment: "window", 
			cancel: ".do-not-drag-me", 
			scroll: false, 
			axis: "x,y", 
			distance: 10
		});
		
		if(!_toolbarCreated){
			$('body').append(annotateToolbar);
		}
                
        //Min/Max Customer UI
        $("#cbeHeaderDiv").click(function(){
            if(_winMinimized) {
                _winMinimized = false;
                $("#cbeMainSubDiv").show();
		//override height attribute to cbeToolbar set by jquery draggable
		$("#cbeToolbar").css('height','auto');
                $("#cbeMinimize").removeClass('cbe-icon-maximize').addClass('cbe-icon-minimize');
            }else{
                _winMinimized = true;
                $("#cbeMainSubDiv").hide();
		//override height attribute to cbeToolbar set by jquery draggable
		$("#cbeToolbar").css('height','auto');
                $("#cbeMinimize").removeClass('cbe-icon-minimize').addClass('cbe-icon-maximize');
            }
        });

        $("#cbeSessionKey").keydown(function(event) {
            if (event.which == 13) {
                event.preventDefault();
                $("#cbeJoinBtn").click();
            }
        });

        $("#cbeCustNameReqMode").keydown(function(event) {
            if (event.which == 13) {
                event.preventDefault();
                $("#cbeRequestBtn").click();
            }
        });
    };
