Annotating image viewer items

var div = document.getElementById('image');


                var options = new lt.Controls.ImageViewerCreateOptions(div);
                options.useElements = true;

                var verticalLayout = new lt.Controls.ImageViewerVerticalViewLayout();
                verticalLayout.columns = 2;

                options.viewLayout = verticalLayout;

                var imageViewer = new lt.Controls.ImageViewer(options);
                
                imageViewer.restrictScroll = false;
                imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
                imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center;

                imageViewer.interactiveModes.beginUpdate();
                for (var i = 0; i < $scope.interactiveModes.length; i++) {
                    var mode= $scope.interactiveModes[i];
                    mode.isEnabled = false;
                    if (mode.name == 'SelectItems') {
                        (mode).selectionMode = lt.Controls.ImageViewerSelectionMode.single;
                    }
                    imageViewer.interactiveModes.add(mode);
                }

                imageViewer.interactiveModes.endUpdate();
                imageViewer.interactiveModes.enableByIndex(0);

                _imageViewer = imageViewer;

                addItemsToImageViewer(4);
                _imageViewer.zoom(lt.Controls.ControlSizeMode.fitWidth, 1, _imageViewer.defaultZoomOrigin);

}
 var addItemsToImageViewer= function(itemCount, atIndex)
            {
                _imageViewer.beginTransform();

                for (var i = 0; i < itemCount; i++) {
                    var item = new lt.Controls.ImageViewerItem();
                    var url = window.location.origin+config.BaseUrl+'/'+fileName[i];
                    item.url = url;
                    if (!isNaN(atIndex)) {
                        _imageViewer.items.insert(atIndex, item);
                    } else {
                        _imageViewer.items.add(item);
                    }
                }
                _imageViewer.endTransform();
            };

 window.onload = function () {

            var interactiveModes = [
            new lt.Annotations.JavaScript.AutomationInteractiveMode(),
            new lt.Controls.ImageViewerPanZoomInteractiveMode(),
            new lt.Controls.ImageViewerNoneInteractiveMode(),
            new lt.Controls.ImageViewerCenterAtInteractiveMode(),
            new lt.Controls.ImageViewerZoomToInteractiveMode(),
            new lt.Controls.ImageViewerSelectItemsInteractiveMode()
            ];

            var imageViewerDiv = document.getElementById("imageViewerDiv");
            var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
            createOptions.useElements = true;
            var imageViewer = new lt.Controls.ImageViewer(createOptions);
            imageViewer.beginTransform();
            var item = new lt.Controls.ImageViewerItem();
            item.url = "http://localhost:58137/Images/Default/default.jpg";
            //imageViewer.imageUrl = "Images/Default/default.jpg"; //the image is loaded properly this way and can annotate 
            imageViewer.items.add(item);
            imageViewer.endTransform();
           

            imageViewer.interactiveModes.beginUpdate();
            for (var i = 0; i < interactiveModes.length; i++) {
                var mode = interactiveModes[i];
                mode.isEnabled = false;
                if (mode.name == 'SelectItems') {
                    (mode).selectionMode = lt.Controls.ImageViewerSelectionMode.single;
                }
                imageViewer.interactiveModes.add(mode);
            }

            imageViewer.interactiveModes.endUpdate();
            imageViewer.interactiveModes.enableByIndex(0);

            var renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
            var manager = new lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
            manager.createDefaultObjects();
            manager.editObjectAfterDraw = false;

            var automationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
            automationControl.imageViewer = imageViewer;

            var automation = new lt.Annotations.Automation.AnnAutomation(manager, automationControl);
            imageViewer.itemChanged.add(function (sender, e) {
                var container = automation.container;
                container.size = container.mapper.sizeToContainerCoordinates(imageViewer.imageSize);
                manager.currentObjectId = lt.Annotations.Core.AnnObject.freehandObjectId;
            });
            automation.active = true;
            imageViewer.autoCreateCanvas = true;
        };