<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ExcelBook | Wijmo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- jQuery/Angular/Bootstrap -->
    <script src="http://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />

	<!-- JSZip library -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

    <!-- Wijmo -->
    <script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script>
	<script src="scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
	<script src="scripts/vendor/wijmo.grid.filter.min.js" type="text/javascript"></script>
	<script src="scripts/vendor/wijmo.grid.sheet.min.js" type="text/javascript"></script>
	<script src="scripts/vendor/wijmo.grid.xlsx.min.js" type="text/javascript"></script>
	<script src="scripts/vendor/wijmo.xlsx.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.chart.min.js" type="text/javascript"></script>
    <link href="styles/vendor/wijmo.min.css" rel="stylesheet" />
	<link href="styles/vendor/wijmo.theme.office.min.css" rel="stylesheet" />

	<!-- Wijmo-Angular interop -->
	<script src="scripts/vendor/wijmo.angular.min.js" type="text/javascript"></script>

    <!-- app scripts and styles -->
    <link rel="stylesheet" href="styles/app.css" type="text/css" />
    <link rel="stylesheet" href="styles/ribbon.css" type="text/css" />
	<link rel="stylesheet" href="styles/cellStyles.css" type="text/css" />
    <script src="scripts/wijmo.grid.sheet.chart/ChartEngine.js"></script>
    <script src="scripts/wijmo.grid.sheet.chart/_ChartUndoAction.js"></script>
	<script src="scripts/app.js" type="text/javascript"></script>
	<script src="scripts/initExcelbook.js" type="text/javascript"></script>
	<script src="scripts/services/dataService.js" type="text/javascript"></script>
	<script src="scripts/controllers/basicController.js" type="text/javascript"></script>
</head>
<body ng-controller="basicController" ng-keydown="hidePopup($event)">
    <div class="excelbook" style="width:100%; height: 100%; position: relative">
		<div class="row title"><a href="default.htm">&lt; Return to sample home</a></div>
        <!-- the ribbon markup -->    
        <div class="row ribbon-container">        
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="btn-group">
						<div class="btn btn-default btn-large no-border">
							<span class="glyphicon glyphicon-open"></span>
                            <span class="text">Load</span>
							<input type="file" class="upload"
								onchange="angular.element(this).scope().importExcel(this)"
								accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel.sheet.macroEnabled.12" />
						</div>
                        <button class="btn btn-default btn-large no-border" ng-click="exportExcel()">
                            <span class="glyphicon glyphicon-save"></span>
                            <span class="text">Save</span>
                        </button>
						<div class="btn btn-default btn-large no-border" ng-click="newFile()">
							<span class="glyphicon glyphicon-file"></span>
                            <span class="text">New</span>
						</div>
                    </div>
                </div>
                <div class="panel-footer text-center">File</div>
            </div>
            <div class="panel panel-default">
                <div class="panel-body">
					<div class="btn-group btn-group-h">
						<button type="button" class="btn btn-default btn-small" title="Undo" ng-disabled="!(ctx.undoStack && ctx.undoStack.canUndo)" ng-click="undo()">
							<span  class="glyphicon glyphicon-share-alt flip"></span>
							<span class="text">Undo</span>
						</button>
						<button type="button" class="btn btn-default btn-small" title="Redo" ng-disabled="!(ctx.undoStack && ctx.undoStack.canRedo)" ng-click="redo()">
							<span  class="glyphicon glyphicon-share-alt"></span>
							<span class="text">Redo</span>
						</button>
					</div>
                    <!--<div class="btn-group">
                        <button type="button" class="btn btn-default btn-large no-border">
                            <span class="paste ribbon-icon"></span>
                            <span class="text">Paste</span>
                        </button>
                        <div class="btn-group-vertical">
                            <button type="button" class="btn btn-default btn-small no-border">
                                <span class="cut ribbon-icon"></span>
                                <span class="text">Cut</span>
                            </button>
                            <button type="button" class="btn btn-default btn-small no-border">
                                <span class="copy ribbon-icon"></span>
                                <span class="text">Copy</span>
                            </button>
                        </div>                    
                    </div>-->    
                </div>
                <div class="panel-footer text-center">Undo / Redo</div>
            </div>
			<div class="panel panel-default">
                <div class="panel-body">
                    <div class="btn-group-vertical">
						<wj-combo-box
							style="width:120px"
							control="ctx.cboFontName"
							items-source="ctx.fonts"
							selected-index="10"
							display-member-path="name"
							selected-value-path="value"
							is-editable="false">
						</wj-combo-box>
						<wj-combo-box
							style="width:60px"
							control="ctx.cboFontSize"
							items-source="ctx.fontSizeList"
							selected-index="5"
							display-member-path="name"
							selected-value-path="value"
							is-editable="false">
						</wj-combo-box>
						<div class="btn-group btn-group-h">
                            <button type="button" class="btn btn-default btn-small {{ctx.selectionFormatState.isBold ? 'active' : ''}}" title="Bold" ng-click="applyBoldStyle()">
                                <span class="glyphicon glyphicon-bold"></span>
                                <span class="text">Bold</span>
                            </button>
                            <button type="button" class="btn btn-default btn-small {{ctx.selectionFormatState.isItalic ? 'active' : ''}}" title="Italic" ng-click="applyItalicStyle()">
                                <span class="glyphicon glyphicon-italic"></span>
                                <span class="text">Italic</span>
                            </button>
                            <button type="button" class="btn btn-default btn-small {{ctx.selectionFormatState.isUnderline ? 'active' : ''}}" title="Underline" ng-click="applyUnderlineStyle()">
                                <span class="underline ribbon-icon"></span>
                                <span class="text">Underline</span>
                            </button>
							<button type="button" class="btn btn-default btn-small" title="Fill Color" ng-click="showColorPicker($event, true)">
                                <span class="glyphicon glyphicon-text-background"></span>
                                <span class="text">Fill</span>
                            </button>
							<button type="button" class="btn btn-default btn-small" title="Font Color" ng-click="showColorPicker($event, false)">
                                <span class="glyphicon glyphicon-text-color"></span>
                                <span class="text">Font</span>
                            </button>
                        </div>
					</div>
				</div>
				<div class="panel-footer text-center">Font</div>
			</div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="btn-group-vertical">
                        <div class="btn-group btn-group-h">
                            <button type="button" class="btn btn-default btn-small {{ctx.selectionFormatState.textAlign === 'left' ? 'active' : ''}}" title="Left" ng-click="applyCellTextAlign('left')">
                                <span class="glyphicon glyphicon-align-left"></span>
                                <span class="text">Left</span>
                            </button>
                            <button type="button" class="btn btn-default btn-small {{ctx.selectionFormatState.textAlign === 'center' ? 'active' : ''}}" title="Center" ng-click="applyCellTextAlign('center')">
                                <span class="glyphicon glyphicon-align-center"></span>
                                <span class="text">Center</span>
                            </button>
                            <button type="button" class="btn btn-default btn-small {{ctx.selectionFormatState.textAlign === 'right' ? 'active' : ''}}" title="Right" ng-click="applyCellTextAlign('right')">
                                <span class="glyphicon glyphicon-align-right"></span>
                                <span class="text">Right</span>
                            </button>
							
							<button type="button" class="btn btn-default btn-small" title="{{ctx.selectionFormatState.isMergedCell ? 'UnMerge' : 'Merge'}}" ng-disabled="ctx.selectedTable != null" ng-click="mergeCells()" style="clear:both;">
                                <span class="glyphicon glyphicon-th-large"></span>
                                <span class="text">merge</span>
                            </button>
                        </div>
                        <div class="btn-group btn-group-h" style="display:none;">
                            <button type="button" class="btn btn-default btn-small" title="Top" ng-click="applyCellVerticalAlign('top')">
                                <span class="top ribbon-icon"></span>
                                <span class="text">Top</span>
                            </button>
                            <button type="button" class="btn btn-default btn-small" title="Middle" ng-click="applyCellVerticalAlign('middle')">
                                <span class="middle ribbon-icon"></span>
                                <span class="text">Middle</span>
                            </button>
                            <button type="button" class="btn btn-default btn-small" title="Bottom" ng-click="applyCellVerticalAlign('bottom')">
                                <span class="bottom ribbon-icon"></span>
                                <span class="text">Bottom</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="panel-footer text-center">Alignment</div>
            </div>
            <div class="panel panel-default" style="display:none">
                <div class="panel-body">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-large no-border">
                            <span class="print ribbon-icon"></span>
                            <span class="text">Print</span>
                        </button>
                        <div class="btn-group-vertical">
                            <button type="button" class="btn btn-default btn-small no-border">
                                <span class="pagewidth ribbon-icon"></span>
                                <span class="text">Page Width</span>
                            </button>
                            <button type="button" class="btn btn-default btn-small no-border">
                                <span class="singlepage ribbon-icon"></span>
                                <span class="text">Single Page</span>
                            </button>
                            <button type="button" class="btn btn-default btn-small no-border">
                                <span class="selection ribbon-icon"></span>
                                <span class="text">Selection</span>
                            </button>
                        </div>                    
                    </div>                
                </div>
                <div class="panel-footer text-center">Print</div>
            </div>
            <div class="panel panel-default" style="display:none">
                <div class="panel-body">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-large no-border">
                            <span class="group ribbon-icon"></span>
                            <span class="text">Group</span>
                        </button>
                        <button type="button" class="btn btn-default btn-large no-border">
                            <span class="ungroup ribbon-icon"></span>
                            <span class="text">Ungroup</span>
                        </button>
                        <div class="btn-group-vertical">
                            <button type="button" class="btn btn-default btn-small no-border">
                                <span class="showdetail ribbon-icon"></span>
                                <span class="text">Show Detail</span>
                            </button>
                            <button type="button" class="btn btn-default btn-small no-border">
                                <span class="hidedetail ribbon-icon"></span>
                                <span class="text">Hide Detail</span>
                            </button>
                        </div>                    
                    </div>
                </div>
                <div class="panel-footer text-center">Group</div>
            </div>        
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-large no-border" ng-click="freeze()">
                            <span class="glyphicon glyphicon-list"></span>
                            <span class="text">{{ctx.flexSheet.frozenRows !== 0 || ctx.flexSheet.frozenColumns !== 0 ? 'Unfreeze' : 'Freeze'}}</span>
                        </button>
                        <div class="btn-group-vertical" style="display:none">
                            <div class="checkbox">
                            <label>
                                <input type="checkbox" /> Gridlines 
                            </label>
                            </div>
                            <div class="checkbox">
                            <label>
                                <input type="checkbox" /> Headings 
                            </label>
                            </div>
                            <select class="form-control input-sm">
                                <option>Blue</option>
                                <option>Silver</option>
                                <option>Black</option>
                            </select>
                        </div>                    
                    </div>                
                </div>
                <div class="panel-footer text-center">View</div>
            </div>
			<div class="panel panel-default">
				<div class="panel-body">
					<button type="button" class="btn btn-default btn-large no-border" data-toggle="modal" data-target="#excelStyle">
						<span class="glyphicon glyphicon-pencil"></span>
						<span class="text">Styles</span>
					</button>
				</div>
				<div class="panel-footer text-center">Styles</div>
			</div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-large no-border" data-toggle="modal" data-target="#excelSort">
                            <span class="glyphicon glyphicon-sort-by-attributes"></span>
                            <span class="text">Sort</span>
                        </button>
                        <button type="button" class="btn btn-default btn-large no-border" ng-click="showFilter()">
                            <span class="glyphicon glyphicon-filter"></span>
                            <span class="text">Filter</span>
                        </button>                    
                    </div>
                </div>
                <div class="panel-footer text-center">Editing</div>
            </div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-large no-border" ng-click="showChartTypes($event)">
                            <span class="glyphicon glyphicon-stats"></span>
                            <span class="text">Insert Chart</span>
                        </button>
                    </div>
                </div>
                <div class="panel-footer text-center">Charts</div>
            </div>
            <div class="panel panel-default" ng-show="ctx.selectedTable != null">
                <div class="panel-body">
                    <div class="btn-group-vertical form-check">
                        <div>
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.showHeaderRow">
                                Header Row
                            </label>
                        </div>
                        <div>
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.showTotalRow">
                                Total Row
                            </label>
                        </div>
                        <div>
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.showBandedRows">
                                Banded Rows
                            </label>
                        </div>
                    </div>
                    <div class="btn-group-vertical form-check">
                        <div>
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.alterFirstColumn">
                                First Column
                            </label>
                        </div>
                        <div>
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.alterLastColumn">
                                Last Column
                            </label>
                        </div>
                        <div>
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" ng-model="ctx.selectedTable.showBandedColumns">
                                Banded Columns
                            </label>
                        </div>
                    </div>
                    <div class="btn-group-vertical form-check" style="display:none">
                        <div>
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox">
                                Filter Button
                            </label>
                        </div>
                    </div>
                    <div class="btn-group-vertical">
                        <wj-combo-box 
                            control="ctx.cboTableStyles"
                            items-source="ctx.tableStyleNames"
                            is-editable="false">
                        </wj-combo-box>
                    </div>
                </div>
                <div class="panel-footer text-center">Table Style Options</div>
            </div>
        </div>
        <!-- the boxes -->
        <div class="top-boxes row">
            <div class="col-sm-1 col-xs-2">{{ctx.selection.position}}</div>
            <div class="col-sm-1 col-xs-2 fn-label text-right">fx</div>
            <div class="col-sm-10 col-xs-8 fn-box" >
                <input type="text" class="form-control" ng-model="ctx.selection.content" ng-keydown="updateSelectionContent($event)" ng-keyup="showFunctionList($event)" ng-focus="pendingCellEditAction()" />
            </div>
        </div>
        <!-- the grid --> 
        <div class="row" id="flexsheetContainer">
			<wj-flex-sheet control="ctx.flexSheet" initialized="initialized(s)">
				<wj-sheet name="Country" items-source="ctx.data"></wj-sheet>
				<wj-sheet name="Report" row-count="25" column-count="13"></wj-sheet>
				<wj-sheet name="Formulas" row-count="530" column-count="12"></wj-sheet>
                <wj-sheet name="Table" row-count="40" column-count="13"></wj-sheet>
			</wj-flex-sheet>
        </div>

        <!-- the status bar -->
        <div class="row status text-right" style="padding-right:10px">Ready</div>
    </div>
	<wj-color-picker style="display:none;position:fixed;z-index:100" control="ctx.colorPicker"></wj-color-picker>
    <wj-list-box style="display:none;position:fixed;z-index:100" control="ctx.lbChartTypes" items-source="ctx.chartTypes"></wj-list-box>
	<!-- Sort Dialog -->
	<ng-include src="'templates/sortDialog.htm'"></ng-include>
	<!-- cell style Dialog -->
	<ng-include src="'templates/cellStyleDialog.htm'"></ng-include>
    <script src="http://cdn.wijmo.com/wijmo.sample.toolbar.js" type="text/javascript"></script>
</body>
</html>