<%@ Page language="C#" MasterPageFile="~masterurl/Custom.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document"  %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register tagprefix="WebControls" namespace="Microsoft.SharePoint.Publishing.WebControls" assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
	<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
	<script type="text/javascript" src="/_layouts/15/sp.js"></script>

	<!-- Add your CSS styles to the following file -->
	<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/Anywhere365/Content/css/fabric.components.min.css%>" runat="server" />
	<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/Anywhere365/Content/css/fabric.min.css%>" runat="server" />

	<!-- Add your JavaScript to the following file -->
	<SharePoint:ScriptLink ID="ScriptLink1" language="javascript" name="~sitecollection/Style Library/Anywhere365/Content/js/jquery-1.9.1.min.js" runat="server" />
    <SharePoint:ScriptLink ID="ScriptLink2" language="javascript" name="~sitecollection/Style Library/Anywhere365/Content/js/moment.min.js" runat="server" />
    <SharePoint:ScriptLink ID="ScriptLink3" language="javascript" name="~sitecollection/Style Library/Anywhere365/Content/js/portal/chart.js" runat="server" />
	<SharePoint:ScriptLink ID="ScriptLink4" language="javascript" name="~sitecollection/Style Library/Anywhere365/Content/js/portal/circles.js" runat="server" />
	<SharePoint:ScriptLink ID="ScriptLink5" language="javascript" name="~sitecollection/Style Library/Anywhere365/Content/js/portal/excanvas.js" runat="server" />
	<SharePoint:ScriptLink ID="ScriptLink6" language="javascript" name="~sitecollection/Style Library/Anywhere365/Content/js/portal/html5-canvas-bar-graph.js" runat="server" />

	<script type="text/javascript">
		var scriptLoadList = [];
		var scriptLoad1 = { type: "js", src: "./Style%20Library/Anywhere365/Content/js/portal/portal_data.js" };
		var scriptLoad2 = { type: "js", src: "./Style%20Library/Anywhere365/Content/js/portal/portal.js" };
		var scriptLoad3 = { type: "js", src: "./Style%20Library/Anywhere365/Content/js/translate.js" };
		scriptLoadList.push(scriptLoad1);
		scriptLoadList.push(scriptLoad2);
		scriptLoadList.push(scriptLoad3);

        $(window).load(function ()
        {
			$(".se-pre-con").fadeOut("slow");
		});
	</script>

	<style>
		#sideNavBox {
			display: none;
		}

		#contentRow {
			margin-left: -200px;
		}

		.ms-dialog #contentRow {
			margin-left: 0;
		}

		#DeltaPlaceHolderMain {
			margin-right: -18px !important;
			margin-left: -18px !important;
		}

		.no-js #loader {
			display: none;
		}

		.js #loader {
			display: block;
			position: absolute;
			left: 100px;
			top: 0;
		}
	</style>
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server"></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
	<div class="se-pre-con"></div>
	<div id="infographics">
		<div class="firstRow">
			<div id="totalAgents" class="doughnutChart">
				<h3></h3>
				<div class="canvas-holder">
					<span id="countTotalAgents"></span>
					<canvas id="chart-area1" width="20" height="20" />
				</div>
				<ul id="chart-label1" class="chart-labels"></ul>
			</div>
			<div id="outboundDialer" class="doughnutChart">
				<h3></h3>
				<div class="canvas-holder">
					<span id="countOutboundDialer"></span>
					<canvas id="chart-area2" width="20" height="20" />
				</div>
				<ul id="chart-label2" class="chart-labels"></ul>
			</div>
			<div id="recordings">
				<div id="recordingTotals">
					<h3></h3>
					<div class="columnChart">
						<div class="columnChart_img_ig_recordings"></div>
						<div class="columnChart_caption">
							<figcaption id="valueOfGraph1"></figcaption>
						</div>
						<div class="ig-columnchart" id="ig-columnChart-1"></div>
					</div>
				</div>
				<div id="recordingSettings">
					<div id="recordingSettings_column1">
						<span id="callRecordingLabel" class="recordingSettingsDetails"></span>
						<span id="inboundCallRecordingLabel" class="recordingSettingsDetails"></span>
						<span id="outboundCallRecordingLabel" class="recordingSettingsDetails"></span>
						<span id="internalCallRecordingLabel" class="recordingSettingsDetails"></span>
					</div>
					<div id="recordingSettings_column2">
						<span id="callRecordingIcon"></span>
						<span class="recordingSettingsDetails" id="callRecording"> </span>
						<span id="inboundCallRecordingIcon"></span>
						<span class="recordingSettingsDetails" id="inboundCallRecording"> </span>
						<span id="outboundCallRecordingIcon"></span>
						<span class="recordingSettingsDetails" id="outboundCallRecording"></span>
						<span id="internalCallRecordingIcon"></span>
						<span class="recordingSettingsDetails" id="internalCallRecording"></span>
					</div>
				</div>
			</div>
		</div>
		<div class="secondRow">
			<div id="skillsPerAgent" class="doughnutChart">
				<h3></h3>
				<div class="canvas-holder">
					<span id="countSkillsPerAgent"></span>
					<canvas id="chart-area3" width="20" height="20" />
				</div>
				<ul id="chart-label3" class="chart-labels"></ul>
			</div>
			<div id="uccInfo">
				<div id="businesshoursLabelid">
					<h3 id="businesshoursLabel"></h3>
					<span id="businesshours"></span>
				</div>
				<div id="holidaysLabelid">
					<h3 id="holidaysLabel"></h3>
					<span id="holidays"></span>
					<span id="daysRemaining"></span>
				</div>
			</div>
			<div id="missedCallsVoicemails">
				<div id="missedCalls">
					<h3></h3>
					<div class="columnChart">
						<div class="columnChart_img_ig_missedcallstoday"></div>
						<div class="columnChart_caption">
							<figcaption id="valueOfGraph2"></figcaption>
						</div>
						<div class="ig-columnchart" id="ig-columnChart-2"></div>
					</div>
				</div>
				<div id="voicemails">
					<h3></h3>
					<div class="columnChart">
						<div class="columnChart_img_ig_voicemails"></div>
						<div class="columnChart_caption">
							<figcaption id="valueOfGraph3"></figcaption>
						</div>
						<div class="ig-columnchart" id="ig-columnChart-3"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="ShowHideInfographics">
		<span id="arrow-up"></span>
		<span id="arrow-down"></span>
	</div>

	<div class="ms-Grid anywhere365">
		<div class="ms-Grid-row rij1 ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12 ms-u-xl12 ms-u-xxl12 ms-u-xxxl4">
			<div class="overview-items-anywhere365 ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg6 ms-u-xl6 ms-u-xxl3 ms-u-xxxl6 block">
				<div class="anywhere365-ucc userrole-ucc" id="userrole-ucc">
					<div class="item-header item-header-userrole" id="item-header-userrole">
						<span class="item-header-text"></span>
						<span class="item-header-arrow right-arrow" id="userrole-ucc">&nbsp;</span>
						<span class="arrow-up" id="userrole-arrow-up"></span>
						<span class="arrow-down" id="userrole-arrow-down"></span>
					</div>
					<div class="item-label item-container item-icon-agents">
						<span class="item-text">
							<a href="#"></a>
						</span>
						<span class="item-count" id="agentsCount"></span>
					</div>
					<div class="item-label item-icon-supervisors">
						<span class="item-text">
							<a href="#"></a>
						</span>
						<span class="item-count" id="supervisorsCount"></span>
					</div>
					<!--<div class="item-label item-icon-trainertrainee">
						<span class="item-text">
							<a href="#"></a>
						</span>
						<span class="item-count" id="trainerTraineeCount"></span>
					</div>-->
					<div class="item-label item-icon-voicemailagents">
						<span class="item-text">
							<a href="#"></a>
						</span>
						<span class="item-count" id="voicemailAgentsCount"></span>
					</div>
					<div class="item-label item-icon-skillsperagent">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
				</div>
			</div>
			<div class="overview-items-anywhere365 ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg6 ms-u-xl6 ms-u-xxl3 ms-u-xxxl6 block">
				<div class="anywhere365-ucc userinput-ucc" id="userinput-ucc">
					<div class="item-header item-header-userinput" id="item-header-userinput">
						<span class="item-header-text"></span>
						<span class="item-header-arrow right-arrow" id="userinput-ucc">&nbsp;</span>
						<span class="arrow-up" id="userinput-arrow-up"></span>
						<span class="arrow-down" id="userinput-arrow-down"></span>
					</div>
					<div class="item-label item-icon-reasoncodes">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-callclassifications">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
				</div>
			</div>
			<div class="overview-items-anywhere365 ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg6 ms-u-x6 ms-u-xxl3 ms-u-xxxl6 block">
				<div class="anywhere365-ucc dialogueintelligence-ucc" id="dialogueintelligence-ucc">
					<div class="item-header item-header-dialogueintelligence" id="item-header-dialogueintelligence">
						<span class="item-header-text"></span>
						<span class="item-header-arrow right-arrow" id="dialogueintelligence-ucc">&nbsp;</span>
						<span class="arrow-up" id="dialogueintelligence-arrow-up"></span>
						<span class="arrow-down" id="dialogueintelligence-arrow-down"></span>						
					</div>
					<div class="item-label item-icon-callsummary">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-missedcallstoday">
						<span class="item-text">
							<a href="#"></a>
						</span>
						<span class="item-count" id="missedCallsTodayCount"></span>
					</div>
					<!--<div class="item-label item-icon-reports">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-notifications">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>-->
				</div>
			</div>
			<div class="overview-items-anywhere365 ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg6 ms-u-xl6 ms-u-xxl3 ms-u-xxxl6 block">
				<div class="anywhere365-ucc uccconfig-ucc" id="uccconfig-ucc">
					<div class="item-header item-header-uccconfig" id="item-header-uccconfig">
						<span class="item-header-text"></span>
						<span class="item-header-arrow right-arrow" id="uccconfig-ucc">&nbsp;</span>
						<span class="arrow-up" id="uccconfig-arrow-up"></span>
						<span class="arrow-down" id="uccconfig-arrow-down"></span>							
					</div>
					<div class="item-label item-icon-endpoints">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-pluginAttributes">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-pluginSettings">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-pluginFlowSettings">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>					
				</div>
			</div>
		</div>

		<div class="ms-Grid-row rij2 ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12 ms-u-xl12 ms-u-xxl12 ms-u-xxxl8">
			<div class="overview-items-anywhere365 ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg6 ms-u-xl6 ms-u-xxl3 ms-u-xxxl3 block">
				<div class="anywhere365-ucc uccgeneral-ucc" id="uccgeneral-ucc">
					<div class="item-header item-header-uccgeneral" id="item-header-uccgeneral">
						<span class="item-header-text"></span>
						<span class="item-header-arrow right-arrow" id="uccgeneral-ucc">&nbsp;</span>
						<span class="arrow-up" id="uccgeneral-arrow-up"></span>
						<span class="arrow-down" id="uccgeneral-arrow-down"></span>								
					</div>
					<div class="item-label item-icon-settings">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-businesshours">
						<span class="item-text">
							<a href="#"> </a>
						</span>
					</div>
					<div class="item-label item-icon-holidays">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<!--<div class="item-label item-icon-rolebasedsecurity">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-versionmanagement">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>-->
					<div class="item-label item-icon-timerjobs">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
				</div>
			</div>
			<div class="overview-items-anywhere365 ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg6 ms-u-xl6 ms-u-xxl3 ms-u-xxxl3 block">
				<div class="anywhere365-ucc actions-ucc" id="actions-ucc">
					<div class="item-header item-header-actions" id="item-header-actions">
						<span class="item-header-text"></span>
						<span class="item-header-arrow right-arrow" id="actions-ucc">&nbsp;</span>
						<span class="arrow-up" id="actions-arrow-up"></span>
						<span class="arrow-down" id="actions-arrow-down"></span>								
					</div>
					<div class="item-label item-icon-skill">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<!--<div class="item-label item-icon-chatskill">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>-->
					<div class="item-label item-icon-availabilityskill">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-countdownskill">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
                    <div class="item-label item-icon-countdownavailabilityskill">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
                    <div class="item-label item-icon-escapemaxqueuesizeskill">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-forwardskill">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<!--<div class="item-label item-icon-chatforwardskill">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>-->
				</div>
			</div>
			<div class="overview-items-anywhere365 ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg6 ms-u-xl6 ms-u-xxl3 ms-u-xxxl3 block">
				<div class="anywhere365-ucc dialoguemanagement-ucc" id="dialoguemanagement-ucc">
					<div class="item-header item-header-dialoguemanagement" id="item-header-dialoguemanagement">
						<span class="item-header-text"></span>
						<span class="item-header-arrow right-arrow" id="dialoguemanagement-ucc">&nbsp;</span>
						<span class="arrow-up" id="dialoguemanagement-arrow-up"></span>
						<span class="arrow-down" id="dialoguemanagement-arrow-down"></span>							
					</div>
					<div class="item-label item-icon-ivr">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>-->
					<div class="item-label item-icon-qualitymonitoring">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-promptsconfig">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<!--<div class="item-label item-icon-chatquestions">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>-->
					<div class="item-label item-icon-outbounddialercalls">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-inboundrouting">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-uccrouting">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
				</div>
			</div>
			<div class="overview-items-anywhere365 ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg6 ms-u-xl6 ms-u-xxl3 ms-u-xxxl3 block">
				<div class="anywhere365-ucc contentmanagement-ucc" id="contentmanagement-ucc">
					<div class="item-header item-header-contentmanagement" id="item-header-contentmanagement">
						<span class="item-header-text"></span>
						<span class="item-header-arrow right-arrow" id="contentmanagement-ucc">&nbsp;</span>
						<span class="arrow-up" id="contentmanagement-arrow-up"></span>
						<span class="arrow-down" id="contentmanagement-arrow-down"></span>							
					</div>
					<div class="item-label item-icon-audiofiles">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-playlists">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
					<div class="item-label item-icon-recordings">
						<span class="item-text">
							<a href="#"></a>
						</span>
						<span class="item-count" id="recordingsCount"></span>
					</div>
					<div class="item-label item-icon-voicemails">
						<span class="item-text">
							<a href="#"></a>
						</span>
						<span class="item-count" id="voicemailsCount"></span>
					</div>
					<div class="item-label item-icon-screenrecordinginbound">
						<span class="item-text">
							<a href="#"></a>
						</span>
                        <span class="item-count" id="inboundScreenRecordingsCount"></span>
					</div>
					<div class="item-label item-icon-screenrecordingoutbound">
						<span class="item-text">
							<a href="#"></a>
						</span>
                        <span class="item-count" id="outboundScreenRecordingsCount"></span>
					</div>
					<div class="item-label item-icon-retentionpolicy">
						<span class="item-text">
							<a href="#"></a>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</asp:Content>