var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
spread.options.enableAccessibility = true;

var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 3 });
var sheet = spread.getActiveSheet();
spread.commandManager().register('openColumnContextMenu', function (workbook, options) {
    var host = workbook.getHost(), sheet = spread.getActiveSheet();
    var activeColIndex = sheet.getActiveColumnIndex();
    var colHeaderRect = sheet.getCellRect(0, activeColIndex, -1);
    var pointerEvent = new PointerEvent("contextmenu", {
        bubbles: true,
        cancelable: true,
        view: window,
        clientX: colHeaderRect.x + colHeaderRect.width / 2 + host.offsetLeft,
        clientY: colHeaderRect.y + colHeaderRect.height / 2 + host.offsetTop,
        button: 2
    });
    host.dispatchEvent(pointerEvent);
}, 49, true, true, false, false);//ctrl+shift+1

$(document).ready(function () {
    // initializing Spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
    // Get the activesheet
    var sheet = spread.getSheet(0);
    //enable accessibility
    spread.options.enableAccessibility = true;
    spread.suspendPaint();
    //set focus
    spread.focus();
    //change the commands related to Tab key, Shift key with Tab key
    var commands = spread.commandManager();
    //TAB
    commands.register("moveToNextCellThenControl", GC.Spread.Sheets.Commands.moveToNextCellThenControl, GC.Spread.Commands.Key.tab, false, false, false, false);
    //SHIFT+TAB
    commands.register("moveToPreviousCellThenControl", GC.Spread.Sheets.Commands.moveToPreviousCellThenControl, GC.Spread.Commands.Key.tab, false, true, false, false);
    //set default row height and column width
    sheet.defaults.rowHeight = 50;
    sheet.defaults.colWidth = 150;
    //set default horizontal alignment and vertical alignment
    var defaultStyle = sheet.getDefaultStyle();
    defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
    defaultStyle.rowHeight = 50;
    defaultStyle.colWidth = 150;
    sheet.setDefaultStyle(defaultStyle);
    //bind data source
    sheet.setDataSource(dataSource);
    // get another sheet 1
    var sheet = spread.getSheet(1);
    //prepare data for chart
    sheet.setValue(0, 1, "Q1");
    sheet.setValue(0, 2, "Q2");
    sheet.setValue(0, 3, "Q3");
    sheet.setValue(1, 0, "Mobile Phones");
    sheet.setValue(2, 0, "Laptops");
    sheet.setValue(3, 0, "Tablets");
    for (var r = 1; r <= 3; r++) {
        for (var c = 1; c <= 3; c++) {
            sheet.setValue(r, c, parseInt(Math.random() * 100));
        }
    }
    //add columnClustered chart
    var c1 = chart_columnClustered = sheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 300, 300, 300, "A1:D4");
    c1.alt("This is a column chart");
    var chartArea = c1.chartArea();
    chartArea.border.color = "rgba(20, 119, 167, 1)";
    chartArea.border.width = 2;
    c1.chartArea(chartArea);
    // add mango picture
    var p1 = sheet.pictures.add("p1", "mango.jpg", 500, 50, 200, 200);
    p1.alt("This is a mango image");
    p1.borderColor("rgba(20, 119, 167, 1)");
    p1.borderWidth(2);
    p1.borderStyle("solid");
    // add cloud shape
    var sp1 = sheet.shapes.add("sp1", GC.Spread.Sheets.Shapes.AutoShapeType.cloud, 250, 50, 200, 200);
    sp1.alt("This is a cloud shape");
    spread.resumePaint();
    //bind events to set alternative text
    function setAltText(collection, altText) {
        var success = false;
        collection.forEach(function (obj) {
            if (obj.isSelected()) {
                obj.alt(altText);
                success = true;
            }
        });
        return success;
    }
    var alternativeText = document.getElementById("alternativeText");
    document.getElementById("setAlternativeText").addEventListener("click", function () {
        var altText = alternativeText.value;
        var success = setAltText(sheet.pictures.all(), altText);
        if (success) {
            return;
        }
        success = setAltText(sheet.charts.all(), altText);
        if (success) {
            return;
        }
        setAltText(sheet.shapes.all(), altText);
    });
    spread.bind(GC.Spread.Sheets.Events.PictureChanged, function (event, args) {
        if (args.propertyName === "isSelected" && args.picture.isSelected()) {
            alternativeText.value = args.picture.alt();
        }
    });
    spread.bind(GC.Spread.Sheets.Events.FloatingObjectChanged, function (event, args) {
        var floatingObject = args.floatingObject;
        if (floatingObject && floatingObject instanceof GC.Spread.Sheets.Charts.Chart) {
            if (args.propertyName === "isSelected" && floatingObject.isSelected()) {
                alternativeText.value = floatingObject.alt();
            }
        }
    });
    spread.bind(GC.Spread.Sheets.Events.ShapeChanged, function (event, args) {
        if (args.propertyName === "isSelected" && args.shape.isSelected()) {
            alternativeText.value = args.shape.alt();
        }
    });
});