diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/data/SlideExternalLinkRepository.java b/vspace/src/main/java/edu/asu/diging/vspace/core/data/SlideExternalLinkRepository.java
new file mode 100644
index 000000000..a05960bbd
--- /dev/null
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/data/SlideExternalLinkRepository.java
@@ -0,0 +1,17 @@
+package edu.asu.diging.vspace.core.data;
+
+import java.util.List;
+
+import org.javers.spring.annotation.JaversSpringDataAuditable;
+import org.springframework.data.repository.PagingAndSortingRepository;
+import org.springframework.stereotype.Repository;
+
+import edu.asu.diging.vspace.core.model.ISlideExternalLink;
+import edu.asu.diging.vspace.core.model.impl.SlideExternalLink;
+
+@Repository
+@JaversSpringDataAuditable
+public interface SlideExternalLinkRepository extends PagingAndSortingRepository<SlideExternalLink, String> {
+
+    public List<ISlideExternalLink> findBySlide_Id(String slideId);
+}
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/factory/IExternalLinkFactory.java b/vspace/src/main/java/edu/asu/diging/vspace/core/factory/IExternalLinkFactory.java
index c45dcc27d..bebdbd1c1 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/core/factory/IExternalLinkFactory.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/factory/IExternalLinkFactory.java
@@ -7,4 +7,4 @@ public interface IExternalLinkFactory {
 
     IExternalLink createExternalLink(String title, ISpace space);
 
-}
+}
\ No newline at end of file
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/model/IExternalLink.java b/vspace/src/main/java/edu/asu/diging/vspace/core/model/IExternalLink.java
index 7da4c79c8..885256577 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/core/model/IExternalLink.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/model/IExternalLink.java
@@ -12,4 +12,4 @@ public interface IExternalLink extends ILink<ExternalLinkValue> {
 
     void setExternalLink(String externalLink);
 
-}
+}
\ No newline at end of file
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/model/ILink.java b/vspace/src/main/java/edu/asu/diging/vspace/core/model/ILink.java
index 20a4c19a6..4527926d1 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/core/model/ILink.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/model/ILink.java
@@ -9,4 +9,4 @@ public interface ILink<T extends IVSpaceElement> extends IVSpaceElement{
     T getTarget();
 
     void setTarget(T target);
-}
+}
\ No newline at end of file
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/model/ISlide.java b/vspace/src/main/java/edu/asu/diging/vspace/core/model/ISlide.java
index 59985eee6..591fed56f 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/core/model/ISlide.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/model/ISlide.java
@@ -15,4 +15,8 @@ public interface ISlide extends IVSpaceElement {
     IImageBlock getFirstImageBlock();
     
     ITextBlock getFirstMatchedTextBlock(String searchTerm);
+    
+    List<ISlideExternalLink> getExternalLinks();
+
+    void setExternalLinks(List<ISlideExternalLink> externalLinks);
 }
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/model/ISlideExternalLink.java b/vspace/src/main/java/edu/asu/diging/vspace/core/model/ISlideExternalLink.java
new file mode 100644
index 000000000..0011c49aa
--- /dev/null
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/model/ISlideExternalLink.java
@@ -0,0 +1,20 @@
+package edu.asu.diging.vspace.core.model;
+
+public interface ISlideExternalLink{
+    
+    String getId();
+    
+    void setId(String id);
+    
+    ISlide getSlide();
+
+    void setSlide(ISlide slide);
+
+    String getExternalLink();
+
+    void setExternalLink(String externalLink);
+    
+    String getLabel();
+    
+    void setLabel(String label);
+}
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/model/impl/Slide.java b/vspace/src/main/java/edu/asu/diging/vspace/core/model/impl/Slide.java
index 350de758e..c9c7cc537 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/core/model/impl/Slide.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/model/impl/Slide.java
@@ -1,5 +1,6 @@
 package edu.asu.diging.vspace.core.model.impl;
 
+import java.util.ArrayList;
 import java.util.Collections;
 import java.util.Comparator;
 import java.util.List;
@@ -19,6 +20,7 @@
 import com.fasterxml.jackson.annotation.JsonIgnore;
 
 import edu.asu.diging.vspace.core.model.IContentBlock;
+import edu.asu.diging.vspace.core.model.ISlideExternalLink;
 import edu.asu.diging.vspace.core.model.IImageBlock;
 import edu.asu.diging.vspace.core.model.IModule;
 import edu.asu.diging.vspace.core.model.ISequence;
@@ -45,6 +47,10 @@ public class Slide extends VSpaceElement implements ISlide {
     @ManyToMany(mappedBy = "slides", targetEntity = Sequence.class)
     private List<ISequence> sequence;
 
+    @JsonIgnore
+    @OneToMany(mappedBy = "slide", targetEntity = SlideExternalLink.class, cascade = CascadeType.ALL)
+    private List<ISlideExternalLink> externalLinks;
+
     /*
      * (non-Javadoc)
      * 
@@ -86,6 +92,30 @@ public void setModule(IModule module) {
         this.module = module;
     }
 
+    /*
+     * (non-Javadoc)
+     * 
+     * @see edu.asu.diging.vspace.core.model.impl.ISlide#getExternalLinks()
+     */
+    @Override
+    public List<ISlideExternalLink> getExternalLinks() {
+        if (externalLinks == null) {
+            externalLinks = new ArrayList<ISlideExternalLink>();
+        }
+        return externalLinks;
+    }
+
+    /*
+     * (non-Javadoc)
+     * 
+     * @see edu.asu.diging.vspace.core.model.impl.ISlide#setExternalLinks(java.util.
+     * List)
+     */
+    @Override
+    public void setExternalLinks(List<ISlideExternalLink> externalLinks) {
+        this.externalLinks = externalLinks;
+    }
+
     /*
      * (non-Javadoc)
      * 
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/model/impl/SlideExternalLink.java b/vspace/src/main/java/edu/asu/diging/vspace/core/model/impl/SlideExternalLink.java
new file mode 100644
index 000000000..892fe9733
--- /dev/null
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/model/impl/SlideExternalLink.java
@@ -0,0 +1,72 @@
+package edu.asu.diging.vspace.core.model.impl;
+
+import javax.persistence.Entity;
+import javax.persistence.GeneratedValue;
+import javax.persistence.Id;
+import javax.persistence.JoinColumn;
+import javax.persistence.ManyToOne;
+
+import org.hibernate.annotations.GenericGenerator;
+import org.hibernate.annotations.Parameter;
+
+import edu.asu.diging.vspace.core.model.ISlideExternalLink;
+import edu.asu.diging.vspace.core.model.ISlide;
+
+@Entity
+public class SlideExternalLink extends VSpaceElement implements ISlideExternalLink {
+    
+    @Id 
+    @GeneratedValue(generator = "extlinkslide_id_generator")
+    @GenericGenerator(name = "extlinkslide_id_generator", 
+        parameters = @Parameter(name = "prefix", value = "EXLS"), 
+        strategy = "edu.asu.diging.vspace.core.data.IdGenerator")
+    private String id;
+
+    @ManyToOne(targetEntity=Slide.class)
+    @JoinColumn(name="slide_id", nullable=false)
+    private ISlide slide;
+  
+    private String externalLink;
+    
+    private String label;
+        
+    @Override
+    public String getId() {
+        return id;
+    }
+    
+    @Override
+    public void setId(String id) {
+        this.id = id;
+    }
+    
+    @Override
+    public ISlide getSlide() {
+        return slide;
+    }
+
+    @Override
+    public void setSlide(ISlide slide) {
+        this.slide = slide;
+    }
+
+    @Override
+    public String getExternalLink() {
+        return externalLink;
+    }
+
+    @Override
+    public void setExternalLink(String externalLink) {
+        this.externalLink = externalLink;
+    }
+    
+    @Override
+    public String getLabel() {
+        return label;
+    }
+
+    @Override
+    public void setLabel(String label) {
+        this.label = label;
+    }
+}
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/services/IExternalLinkManager.java b/vspace/src/main/java/edu/asu/diging/vspace/core/services/IExternalLinkManager.java
index 7f7e0a84d..ceddbd672 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/core/services/IExternalLinkManager.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/services/IExternalLinkManager.java
@@ -19,4 +19,6 @@ IExternalLinkDisplay updateLink(String title, String id, float positionX, float
             String linkLabel, String linkId, String linkDisplayId, DisplayType displayType, byte[] linkImage,
             String imageFilename,ExternalLinkDisplayMode howToOpen)
             throws SpaceDoesNotExistException, LinkDoesNotExistsException, ImageCouldNotBeStoredException;
+
+   
 }
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/services/ISlideExternalLinkManager.java b/vspace/src/main/java/edu/asu/diging/vspace/core/services/ISlideExternalLinkManager.java
new file mode 100644
index 000000000..a77fcf27c
--- /dev/null
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/services/ISlideExternalLinkManager.java
@@ -0,0 +1,14 @@
+package edu.asu.diging.vspace.core.services;
+
+import edu.asu.diging.vspace.core.model.ISlideExternalLink;
+
+public interface ISlideExternalLinkManager {
+
+    ISlideExternalLink getLink(String externalLinkID);
+    
+    ISlideExternalLink createExternalLink(String title, String url, String slideId);
+
+    ISlideExternalLink updateExternalLink(String title, String url, String id);
+    
+    void deleteLink(String linkId);
+}
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/services/ISlideManager.java b/vspace/src/main/java/edu/asu/diging/vspace/core/services/ISlideManager.java
index 4982390b3..1f82d8440 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/core/services/ISlideManager.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/services/ISlideManager.java
@@ -9,7 +9,6 @@
 import edu.asu.diging.vspace.core.model.ISlide;
 import edu.asu.diging.vspace.core.model.display.SlideType;
 import edu.asu.diging.vspace.core.model.impl.Sequence;
-import edu.asu.diging.vspace.core.model.impl.Slide;
 import edu.asu.diging.vspace.web.staff.forms.SlideForm;
 
 public interface ISlideManager {
@@ -18,7 +17,7 @@ public interface ISlideManager {
 
     ISlide createSlide(IModule module, SlideForm slideForm, SlideType type);
 
-    void updateSlide(Slide slide);
+    ISlide updateSlide(ISlide slide);
 
     IBranchingPoint createBranchingPoint(IModule module, SlideForm slideForm, SlideType type);
 
@@ -30,5 +29,5 @@ public interface ISlideManager {
 
     List<Sequence> getSlideSequences(String slideId, String moduleId);
     
-    Page<ISlide> findByNameOrDescription(Pageable requestedPage,String searchText);
+    Page<ISlide> findByNameOrDescription(Pageable requestedPage,String searchText);    
 }
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/ExternalLinkManager.java b/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/ExternalLinkManager.java
index 33cd4fb4a..b9002df3f 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/ExternalLinkManager.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/ExternalLinkManager.java
@@ -10,14 +10,11 @@
 
 import edu.asu.diging.vspace.core.data.ExternalLinkDisplayRepository;
 import edu.asu.diging.vspace.core.data.ExternalLinkRepository;
-import edu.asu.diging.vspace.core.data.ImageRepository;
 import edu.asu.diging.vspace.core.exception.ImageCouldNotBeStoredException;
 import edu.asu.diging.vspace.core.exception.LinkDoesNotExistsException;
 import edu.asu.diging.vspace.core.exception.SpaceDoesNotExistException;
 import edu.asu.diging.vspace.core.factory.IExternalLinkDisplayFactory;
 import edu.asu.diging.vspace.core.factory.IExternalLinkFactory;
-import edu.asu.diging.vspace.core.factory.IImageFactory;
-import edu.asu.diging.vspace.core.file.IStorageEngine;
 import edu.asu.diging.vspace.core.model.IExternalLink;
 import edu.asu.diging.vspace.core.model.ISpace;
 import edu.asu.diging.vspace.core.model.display.DisplayType;
@@ -36,7 +33,7 @@ public class ExternalLinkManager extends LinkManager<IExternalLink, ExternalLink
 
     @Autowired
     private ISpaceManager spaceManager;
-
+    
     @Autowired
     private ExternalLinkRepository externalLinkRepo;
 
@@ -49,15 +46,6 @@ public class ExternalLinkManager extends LinkManager<IExternalLink, ExternalLink
     @Autowired
     private IExternalLinkDisplayFactory externalLinkDisplayFactory;
 
-    @Autowired
-    private IImageFactory imageFactory;
-
-    @Autowired
-    private ImageRepository imageRepo;
-
-    @Autowired
-    private IStorageEngine storage;
-
     @Override
     public List<IExternalLinkDisplay> getLinkDisplays(String spaceId) {
         return externalLinkDisplayRepo.findExternalLinkDisplaysForSpace(spaceId);
@@ -158,4 +146,4 @@ public IExternalLinkDisplay updateLink(String title, String id, float positionX,
         return externalLinkDisplay;
     }
 
-}
+}
\ No newline at end of file
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/LinkManager.java b/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/LinkManager.java
index 9bf7870fe..9a4c2c7af 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/LinkManager.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/LinkManager.java
@@ -27,7 +27,7 @@ public abstract class LinkManager<L extends ILink<T>, T extends IVSpaceElement,
 
     @Autowired
     private ISpaceManager spaceManager;
-
+  
     @Autowired
     private IImageFactory imageFactory;
 
@@ -51,7 +51,7 @@ public U createLink(String title, String id, float positionX, float positionY, i
         return updateLinkAndDisplay(link, displayLink);
 
     }
-
+    
     @Override
     public U updateLink(String title, String id, float positionX, float positionY, int rotation, String linkedId,
             String linkLabel, String linkId, String linkDisplayId, DisplayType displayType, byte[] linkImage,
@@ -90,7 +90,7 @@ public void deleteLink(String linkId) {
     protected abstract L getLink(String linkId);
 
     protected abstract L createLinkObject(String title, String id);
-
+   
     protected abstract T getTarget(String linkedId);
 
     protected abstract U createDisplayLink(L link);
@@ -101,7 +101,7 @@ protected void validateSpace(String id) throws SpaceDoesNotExistException {
             throw new SpaceDoesNotExistException();
         }
     }
-
+    
     protected void setDisplayProperties(ILinkDisplay linkDisplay, String id, float positionX, float positionY,
             int rotation, DisplayType displayType, byte[] linkImage, String imageFilename)
             throws ImageCouldNotBeStoredException {
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/ModuleManager.java b/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/ModuleManager.java
index f7bb2510d..48f19d5a3 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/ModuleManager.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/ModuleManager.java
@@ -5,7 +5,6 @@
 import java.util.List;
 import java.util.Optional;
 
-
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
@@ -22,8 +21,8 @@
 import edu.asu.diging.vspace.core.model.ISequence;
 import edu.asu.diging.vspace.core.model.ISlide;
 import edu.asu.diging.vspace.core.model.impl.Module;
-import edu.asu.diging.vspace.core.model.impl.ModuleLink;
 import edu.asu.diging.vspace.core.services.IModuleManager;
+import edu.asu.diging.vspace.core.services.ISlideManager;
 
 @Transactional
 @Service
@@ -43,7 +42,7 @@ public class ModuleManager implements IModuleManager {
     private SequenceRepository sequenceRepo;
     
     @Autowired
-    private SlideManager slideManager;
+    private ISlideManager slideManager;
     
     @Autowired
     private ModuleLinkDisplayRepository moduleLinkDisplayRepo;
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/SlideExternalLinkManager.java b/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/SlideExternalLinkManager.java
new file mode 100644
index 000000000..472ba3e26
--- /dev/null
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/SlideExternalLinkManager.java
@@ -0,0 +1,78 @@
+package edu.asu.diging.vspace.core.services.impl;
+
+import java.util.Optional;
+
+import javax.transaction.Transactional;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import edu.asu.diging.vspace.core.data.SlideExternalLinkRepository;
+import edu.asu.diging.vspace.core.model.ISlideExternalLink;
+import edu.asu.diging.vspace.core.model.ISlide;
+import edu.asu.diging.vspace.core.model.impl.SlideExternalLink;
+import edu.asu.diging.vspace.core.services.ISlideExternalLinkManager;
+import edu.asu.diging.vspace.core.services.ISlideManager;
+
+@Transactional
+@Service
+/**
+ * This class contains CRUD methods for managing the external links
+ * (ISlideExternalLink) associated with module slides only
+ * 
+ * @author Julian Ophals
+ */
+public class SlideExternalLinkManager
+        implements ISlideExternalLinkManager {
+
+    @Autowired
+    private ISlideManager slideManager;
+
+    @Autowired
+    private SlideExternalLinkRepository externalLinkRepo;
+
+    @Override
+    public ISlideExternalLink getLink(String externalLinkID) {
+        Optional<SlideExternalLink> externalLink = externalLinkRepo.findById(externalLinkID);
+        if (externalLink.isPresent()) {
+            return externalLink.get();
+        }
+        return null;
+    }
+
+    @Override
+    public void deleteLink(String linkId) {
+        ISlideExternalLink link = getLink(linkId);
+        externalLinkRepo.delete((SlideExternalLink) link);
+    }
+
+    /**
+     * This method is used to create a link to an external web address that will
+     * be displayed on the associated slide; this method does NOT save the newly 
+     * created external link
+     * @param   label   the hyperlink text
+     * @param   url     the full web address of the external link        
+     * @param   slideId the id of the slide in which the link will be created
+     * @return  IExternalLinkSlide  returns the external link that was created 
+     */ 
+    @Override
+    public ISlideExternalLink createExternalLink(String label, String url, String slideId) {
+        ISlide slide = slideManager.getSlide(slideId);
+        ISlideExternalLink externalLink = new SlideExternalLink();
+        externalLink.setExternalLink(url);
+        externalLink.setLabel(label);
+        externalLink.setSlide(slide);
+        return externalLink;
+    }
+
+    @Override
+    public ISlideExternalLink updateExternalLink(String label, String url, String id) {
+        ISlideExternalLink externalLink = getLink(id);
+        if (externalLink != null) {
+            externalLink.setExternalLink(url);
+            externalLink.setLabel(label);
+            externalLinkRepo.save((SlideExternalLink) externalLink);
+        }
+        return externalLink;
+    }
+}
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/SlideManager.java b/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/SlideManager.java
index fefd99c1e..106c457ba 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/SlideManager.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/core/services/impl/SlideManager.java
@@ -6,6 +6,8 @@
 import java.util.Optional;
 import java.util.stream.Collectors;
 
+import javax.transaction.Transactional;
+
 import org.apache.commons.collections.CollectionUtils;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -32,6 +34,7 @@
 import edu.asu.diging.vspace.core.services.ISlideManager;
 import edu.asu.diging.vspace.web.staff.forms.SlideForm;
 
+@Transactional
 @Service
 public class SlideManager implements ISlideManager {
 
@@ -113,8 +116,8 @@ public IChoice getChoice(String choiceId) {
     }
 
     @Override
-    public void updateSlide(Slide slide) {
-        slideRepo.save((Slide) slide);
+    public ISlide updateSlide(ISlide slide) {
+        return slideRepo.save((Slide) slide);
     }
 
     @Override
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/web/exhibit/view/ExhibitionSlideController.java b/vspace/src/main/java/edu/asu/diging/vspace/web/exhibit/view/ExhibitionSlideController.java
index 8965c7539..5ef80e7ae 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/web/exhibit/view/ExhibitionSlideController.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/web/exhibit/view/ExhibitionSlideController.java
@@ -23,11 +23,10 @@
 import edu.asu.diging.vspace.core.model.ISpace;
 import edu.asu.diging.vspace.core.model.impl.BranchingPoint;
 import edu.asu.diging.vspace.core.model.impl.SequenceHistory;
-
-import edu.asu.diging.vspace.core.services.IExhibitionAboutPageManager;
 import edu.asu.diging.vspace.core.services.IExhibitionManager;
 import edu.asu.diging.vspace.core.services.IModuleManager;
 import edu.asu.diging.vspace.core.services.ISequenceManager;
+import edu.asu.diging.vspace.core.services.ISlideManager;
 import edu.asu.diging.vspace.core.services.ISpaceManager;
 import edu.asu.diging.vspace.core.services.impl.ModuleOverviewManager;
 import edu.asu.diging.vspace.core.services.impl.SlideManager;
@@ -40,7 +39,7 @@ public class ExhibitionSlideController {
     private IModuleManager moduleManager;
 
     @Autowired
-    private SlideManager slideManager;
+    private ISlideManager slideManager;
 
     @Autowired
     private ISequenceManager sequenceManager;
@@ -56,7 +55,7 @@ public class ExhibitionSlideController {
     
     @Autowired
     private IExhibitionManager exhibitManager;
-
+    
     @RequestMapping(value = {
         "/exhibit/{spaceId}/module/{moduleId}/sequence/{sequenceId}/slide/{slideId}",
         "/preview/{"+ExhibitionConstants.PREVIEW_ID+"}/{spaceId}/module/{moduleId}/sequence/{sequenceId}/slide/{slideId}"
@@ -144,6 +143,7 @@ public String slide(Model model, @PathVariable("slideId") String slideId,
         model.addAttribute("currentNumOfSlide", slideIndex + 1);
         model.addAttribute("spaceId", spaceId);
         model.addAttribute("spaceName", spaceManager.getSpace(spaceId).getName());
+        model.addAttribute("slideExternalLinkList", currentSlide.getExternalLinks());
         return "exhibition/module";
     }
 
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/web/staff/AddExternalLinkController.java b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/AddExternalLinkController.java
index daa3bb8da..660735218 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/web/staff/AddExternalLinkController.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/AddExternalLinkController.java
@@ -23,7 +23,6 @@
 import edu.asu.diging.vspace.core.model.display.IExternalLinkDisplay;
 import edu.asu.diging.vspace.core.services.IExternalLinkManager;
 import edu.asu.diging.vspace.core.services.ISpaceManager;
-import edu.asu.diging.vspace.core.services.impl.ExternalLinkManager;
 
 @Controller
 public class AddExternalLinkController {
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/web/staff/AddSlideExternalLinkController.java b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/AddSlideExternalLinkController.java
new file mode 100644
index 000000000..266c5410e
--- /dev/null
+++ b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/AddSlideExternalLinkController.java
@@ -0,0 +1,54 @@
+package edu.asu.diging.vspace.web.staff;
+
+import java.io.IOException;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RequestParam;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+
+import edu.asu.diging.vspace.core.exception.SlideDoesNotExistException;
+import edu.asu.diging.vspace.core.model.ISlideExternalLink;
+import edu.asu.diging.vspace.core.model.ISlide;
+import edu.asu.diging.vspace.core.services.ISlideExternalLinkManager;
+import edu.asu.diging.vspace.core.services.ISlideManager;
+
+@Controller
+public class AddSlideExternalLinkController {
+    
+    @Autowired
+    private ISlideManager slideManager;
+
+    @Autowired
+    private ISlideExternalLinkManager slideExternalLinkManager;
+    
+    @RequestMapping(value = "/staff/module/{moduleId}/slide/{id}/externallink", method = RequestMethod.POST)
+    public ResponseEntity<String> createSlideExternalLink(@PathVariable("id") String slideId, @PathVariable("moduleId") String moduleId, 
+            @RequestParam("externalLinkLabel") String label, @RequestParam("url") String externalLink)
+            throws NumberFormatException, SlideDoesNotExistException, IOException {
+
+        ISlide slide = slideManager.getSlide(slideId);
+        
+        if (slide == null) {
+            return new ResponseEntity<>("{'error': 'Slide could not be found.'}", HttpStatus.NOT_FOUND);
+        }
+
+        ISlideExternalLink slideExternalLink = slideExternalLinkManager.createExternalLink(label, externalLink, slideId);
+        slide.getExternalLinks().add(slideExternalLink);
+        slideManager.updateSlide(slide);
+        ObjectMapper mapper = new ObjectMapper();
+        ObjectNode linkNode = mapper.createObjectNode();
+        linkNode.put("label", slideExternalLink.getLabel());
+        linkNode.put("id", slide.getExternalLinks().get(slide.getExternalLinks().size() - 1).getId());
+        linkNode.put("url", slideExternalLink.getExternalLink());
+ 
+        return new ResponseEntity<>(mapper.writeValueAsString(linkNode), HttpStatus.OK);
+    }
+}
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/web/staff/DeleteSlideLinkController.java b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/DeleteSlideLinkController.java
new file mode 100644
index 000000000..6115af56b
--- /dev/null
+++ b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/DeleteSlideLinkController.java
@@ -0,0 +1,25 @@
+package edu.asu.diging.vspace.web.staff;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+
+import edu.asu.diging.vspace.core.services.ISlideExternalLinkManager;
+
+@Controller
+public class DeleteSlideLinkController {
+
+    @Autowired
+    private ISlideExternalLinkManager slideExternalLinkManager;
+    
+    @RequestMapping(value = "/staff/module/{id}/slide/{slideId}/externallink/{linkId}", method = RequestMethod.DELETE)
+    public ResponseEntity<String> deleteSlideExternalLink(@PathVariable("id") String moduleId, @PathVariable("slideId") String slideId, @PathVariable("linkId") String linkId) {
+        slideExternalLinkManager.deleteLink(linkId);
+        return new ResponseEntity<String>(HttpStatus.OK);
+    }
+
+}
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/web/staff/EditExternalLinkController.java b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/EditExternalLinkController.java
index 13ea564fa..61c9353b3 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/web/staff/EditExternalLinkController.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/EditExternalLinkController.java
@@ -19,7 +19,6 @@
 import edu.asu.diging.vspace.core.model.display.IExternalLinkDisplay;
 import edu.asu.diging.vspace.core.services.IExternalLinkManager;
 import edu.asu.diging.vspace.core.services.ISpaceManager;
-import edu.asu.diging.vspace.core.services.impl.ExternalLinkManager;
 
 @Controller
 public class EditExternalLinkController extends EditSpaceLinksController {
@@ -29,7 +28,7 @@ public class EditExternalLinkController extends EditSpaceLinksController {
 
     @Autowired
     private IExternalLinkManager externalLinkManager;
-
+    
     @RequestMapping(value = "/staff/space/link/external/{id}", method = RequestMethod.POST)
     public ResponseEntity<String> createExternalLink(@PathVariable("id") String id, @RequestParam("x") String x,
             @RequestParam("y") String y, @RequestParam("externalLinkLabel") String title,
@@ -59,6 +58,5 @@ public ResponseEntity<String> createExternalLink(@PathVariable("id") String id,
         return success(display.getExternalLink().getId(), display.getId(), display.getPositionX(),
                 display.getPositionY(), display.getRotation(), display.getExternalLink().getExternalLink(), title,
                 displayType, null, null);
-
     }
 }
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/web/staff/EditSlideExternalLinkController.java b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/EditSlideExternalLinkController.java
new file mode 100644
index 000000000..d4ad84d06
--- /dev/null
+++ b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/EditSlideExternalLinkController.java
@@ -0,0 +1,57 @@
+package edu.asu.diging.vspace.web.staff;
+
+import java.io.IOException;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RequestParam;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+
+import edu.asu.diging.vspace.core.exception.LinkDoesNotExistsException;
+import edu.asu.diging.vspace.core.exception.SlideDoesNotExistException;
+import edu.asu.diging.vspace.core.model.ISlideExternalLink;
+import edu.asu.diging.vspace.core.services.ISlideExternalLinkManager;
+import edu.asu.diging.vspace.core.services.ISlideManager;
+
+@Controller
+public class EditSlideExternalLinkController {
+
+    @Autowired
+    private ISlideManager slideManager;
+
+    @Autowired
+    private ISlideExternalLinkManager externalLinkManager;
+
+    @RequestMapping(value = "/staff/module/{moduleId}/slide/{slideId}/link/external/{id}", method = RequestMethod.POST)
+    public ResponseEntity<String> editExternalLink(@PathVariable("id") String id,
+            @PathVariable("slideId") String slideId, @RequestParam("externalLinkLabel") String title,
+            @RequestParam("url") String externalLink)
+            throws SlideDoesNotExistException, IOException, LinkDoesNotExistsException, NumberFormatException {
+
+        if (slideManager.getSlide(slideId) == null) {
+            return new ResponseEntity<>("{'error': 'Slide could not be found.'}", HttpStatus.NOT_FOUND);
+        }
+        ISlideExternalLink link = externalLinkManager.updateExternalLink(title, externalLink, id);
+        return success(link.getId(), link.getExternalLink(), title);
+    }
+    
+    private ResponseEntity<String> success(String id, String url, String label) throws IOException{
+        ObjectMapper mapper = new ObjectMapper();
+        ObjectNode linkNode = mapper.createObjectNode();
+        linkNode.put("id", id);
+        linkNode.put("label", label);
+        if(url!=null) {
+            linkNode.put("url", url);
+        }
+        return new ResponseEntity<>(mapper.writeValueAsString(linkNode), HttpStatus.OK);
+    }
+
+
+}
diff --git a/vspace/src/main/java/edu/asu/diging/vspace/web/staff/SlideController.java b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/SlideController.java
index 5ed7fbeb9..d3df4f348 100644
--- a/vspace/src/main/java/edu/asu/diging/vspace/web/staff/SlideController.java
+++ b/vspace/src/main/java/edu/asu/diging/vspace/web/staff/SlideController.java
@@ -1,12 +1,15 @@
 package edu.asu.diging.vspace.web.staff;
 
 import java.security.Principal;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 import javax.transaction.Transactional;
 
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
@@ -38,17 +41,17 @@ public class SlideController {
     private IContentBlockManager contentBlockManager;
 
     @RequestMapping("/staff/module/{moduleId}/slide/{id}")
-    public String listSlides(@PathVariable("id") String id, @PathVariable("moduleId") String moduleId, Model model) {
-
-        ISlide slide = slideManager.getSlide(id);
+    public String listSlides(@PathVariable("id") String slideId, @PathVariable("moduleId") String moduleId, Model model) {
+        ISlide slide = slideManager.getSlide(slideId);
         model.addAttribute("module", moduleManager.getModule(moduleId));
         model.addAttribute("slide", slide);
-        model.addAttribute("slideSequences", slideManager.getSlideSequences(id, moduleId));
-        List<IContentBlock> slideContents = contentBlockManager.getAllContentBlocks(id);
+        model.addAttribute("externalLinks", slide.getExternalLinks());
+        model.addAttribute("slideSequences", slideManager.getSlideSequences(slideId, moduleId));
+        List<IContentBlock> slideContents = contentBlockManager.getAllContentBlocks(slideId);
         model.addAttribute("slideContents", slideContents);
         model.addAttribute("contentCount",
                 slideContents.size() > 0 ? slideContents.get(slideContents.size() - 1).getContentOrder() : 0);
-        if (slideManager.getSlide(id) instanceof BranchingPoint) {
+        if (slideManager.getSlide(slideId) instanceof BranchingPoint) {
             model.addAttribute("choices", ((IBranchingPoint) slide).getChoices());
         }
         return "staff/modules/slides/slide";
@@ -62,4 +65,12 @@ public ResponseEntity<List<IContentBlock>> getAllContentBlocks(Model model,
         List<IContentBlock> slideContents = contentBlockManager.getAllContentBlocks(slideId);
         return new ResponseEntity<List<IContentBlock>>(slideContents, HttpStatus.OK);
     }
+
+    @RequestMapping(value = "/staff/module/{moduleId}/slide/{id}/links", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
+    public ResponseEntity<Map<String, Object>> showSlideLinks(@PathVariable("id") String slideId, Model model) {
+        Map<String, Object> responseData = new HashMap<String, Object>();
+        ISlide slide = slideManager.getSlide(slideId);
+        responseData.put("externalLinks", slide.getExternalLinks());
+        return new ResponseEntity<>(responseData, HttpStatus.OK);
+    }
 }
diff --git a/vspace/src/main/resources/exhibitionLanguages.properties b/vspace/src/main/resources/exhibitionLanguages.properties
index 492b3ab2e..ccbc75cac 100644
--- a/vspace/src/main/resources/exhibitionLanguages.properties
+++ b/vspace/src/main/resources/exhibitionLanguages.properties
@@ -119,7 +119,7 @@
   { "code": "na", "label": "Nauru" },
   {
     "code": "nb",
-    "label": "Bokmål, Norwegian; Norwegian Bokmål"
+    "label": "Bokmål, Norwegian; Norwegian Bokmål"
   },
   { "code": "nd", "label": "Ndebele, North; North Ndebele" },
   { "code": "ne", "label": "Nepali" },
@@ -184,7 +184,7 @@
   { "code": "uz", "label": "Uzbek" },
   { "code": "ve", "label": "Venda" },
   { "code": "vi", "label": "Vietlabelse" },
-  { "code": "vo", "label": "Volapük" },
+  { "code": "vo", "label": "Volapük" },
   { "code": "wa", "label": "Walloon" },
   { "code": "wo", "label": "Wolof" },
   { "code": "xh", "label": "Xhosa" },
diff --git a/vspace/src/main/webapp/WEB-INF/views/exhibition/module.html b/vspace/src/main/webapp/WEB-INF/views/exhibition/module.html
index f30770549..dcc9d59c3 100644
--- a/vspace/src/main/webapp/WEB-INF/views/exhibition/module.html
+++ b/vspace/src/main/webapp/WEB-INF/views/exhibition/module.html
@@ -25,7 +25,6 @@
 .text {
     font-size: 11px;
 }
-
 .imgFullScreen:hover .tooltiptext {
     visibility: visible;
 }
@@ -56,6 +55,14 @@
     background: rgba(0, 0, 0, 0.6);
 }
 
+.Group_8_Class {
+    display: block;
+}
+
+.slide_container {
+	display: grid;
+	align-items:center;
+
 .biblioDiv {
     border: 1px solid lightgray;
     border-radius: 8px;
@@ -89,6 +96,15 @@
     margin-bottom: 8px;
 }
 
+.list-group-item-action {
+    color: var(--primary) !important;
+}
+
+.list-group-item-action:hover {
+    background-color: var(--primary) !important;
+    color: white !important;
+}
+
 </style>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
 <script th:inline="javascript">       
@@ -116,7 +132,7 @@
 		{
 			$(".exitfullscreen").remove();
 			$(".imgFullScreen").show();
-			$("#Module_1").css('overflow-y','hidden')
+			$("#Module_1").css('overflow-y','visible')
 			if (document.exitFullscreen) {
 			    document.exitFullscreen();
 			  } else if (document.webkitExitFullscreen) { /* Safari */
@@ -147,7 +163,7 @@
                 </button>
             </a>
         </div>
-        <div th:if="${showAlert != true}" id="Module_1" class="Module_1_Class">
+        <div th:if="${showAlert != true}" id="Module_1" class="Module_1_Class" style="min-height: 100vh; overflow-y: visible; padding-bottom: 100px;">
         <div th:if="${showAlert != true}" style="padding-top: 4%; padding-bottom: 1%; background-color: white; position: relative; z-index: 100; top: 5.5%; width: 100%; display: flex;">
             <h3 class="textDiv">[[${module.name}]]</h3>
             <p class="slideNumberClass">Slide [[${currentNumOfSlide}]]/[[${numOfSlides}]]</p>
@@ -162,7 +178,7 @@ <h3 class="textDiv">[[${module.name}]]</h3>
                </div>
            </a>
             <a th:if="${!#strings.isEmpty(nextSlide)}" th:href= "${isExhPreview == null OR isExhPreview == false}?@{'/exhibit/'+${spaceId}+'/module/'+${module.id}+'/sequence/'+${currentSequenceId}+'/slide/'+${nextSlide}}:@{'/preview/'+${previewId}+'/'+${spaceId}+'/module/'+${module.id}+'/sequence/'+${currentSequenceId}+'/slide/'+${nextSlide}}">
-               <div class="slideshow_next slideshow_next_Class" style="position: fixed; z-index:110; right: 11%; top: 40.3%;">
+               <div class="slideshow_next slideshow_next_Class" style="position: fixed; z-index:110; right: 11%; top: 40.3%;"> 
                     <button class="btn circle-btn-slide-nav">
                          <span class="icon-chevron-right slide-nav"></span>
                          <span class="tooltiptext">Next slide</span>
@@ -211,8 +227,9 @@ <h3 class="textDiv">[[${module.name}]]</h3>
 
          <div style="position: relative;top: 6.5%;">
             <h3 style="text-align:center;">[[${currentSlideCon.name}]]</h3>
+            <div class="slide_container">
             <div th:id="blocks" class="Group_8_Class" th:each="contents: ${currentSlideCon.contents}">
-                <img th:if="${contents['class'].simpleName ==  'ImageBlock'}" th:id="${contents.id}" class="imgDiv" th:src="@{'/api/image/'+${contents.image.id}}" style="max-width:57%">
+                <img th:if="${contents['class'].simpleName ==  'ImageBlock'}" th:id="${contents.id}" class="imgDiv" th:src="@{'/api/image/'+${contents.image.id}}" style="max-width:57%; max-height: 650px;">
                 <div th:if="${contents['class'].simpleName ==  'TextBlock'}" th:id="${contents.id}" class="textDiv">[(${contents.htmlRenderedText()})]</div>
                 <div th:if="${contents['class'].simpleName ==  'BiblioBlock'}" th:id="${contents.id}" class="biblioDiv">
                 	<h4>Title: [(${contents.getBiblioTitle()})]</h4>
@@ -549,13 +566,19 @@ <h5 class="modal-title">Module Map</h5>
                         function openSlide (d){
                             window.open([[@{/exhibit/}]]+spaceId+'/module/'+moduleId+'/sequence/'+d.sequenceId+'/slide/'+d.slideId, "_self");
                         }
-
-             </script>
-             </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+             		</script>
+             		</div>
+                	</div>
+             	</div>
+          	</div>
+       	</div>
+     	</div>
+   		</div>
+   				<div th:if="${slideExternalLinkList != null and !#lists.isEmpty(slideExternalLinkList)}" style="margin:auto; width: 57%; padding: 30px 0 80px 0; background-color: white; z-index: 1; position: relative;">
+   					<h5 style="margin-bottom: 15px;">External Resources:</h5>
+	     			<div th:each="link: ${slideExternalLinkList}" style="margin-bottom: 8px; line-height: 1.5;"> -
+	      				<a style="text-decoration: underline; color:var(--primary); display: inline-block;" th:href="@{${link.getExternalLink()}}" th:target="_blank">[[${link.getLabel()}]]</a>
+	     			</div>
+    			</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/vspace/src/main/webapp/WEB-INF/views/exhibition/space.html b/vspace/src/main/webapp/WEB-INF/views/exhibition/space.html
index 041bf1fed..2884e881e 100644
--- a/vspace/src/main/webapp/WEB-INF/views/exhibition/space.html
+++ b/vspace/src/main/webapp/WEB-INF/views/exhibition/space.html
@@ -1,3 +1,4 @@
+
 <html layout:decorate="~{layouts/main}">
 <head>
 <style>
@@ -723,4 +724,4 @@ <h3 class="spaceName">
         </div>
     </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/vspace/src/main/webapp/WEB-INF/views/staff/modules/slides/slide.html b/vspace/src/main/webapp/WEB-INF/views/staff/modules/slides/slide.html
index d1708279e..e49a7189a 100644
--- a/vspace/src/main/webapp/WEB-INF/views/staff/modules/slides/slide.html
+++ b/vspace/src/main/webapp/WEB-INF/views/staff/modules/slides/slide.html
@@ -1,5 +1,6 @@
 <html layout:decorate="~{layouts/main_staff}">
     <head>
+        <link th:href="@{/resources/extra/Home.css}" type="text/css" rel="stylesheet">
         <link rel="stylesheet"
             href="https://unpkg.com/easymde/dist/easymde.min.css">
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
@@ -34,9 +35,99 @@
 			color: var(--primary) !important;
 			background: transparent;
 			}
-            .tooltip {
-                z-index: 0;
-            }
+			
+			.Info_cz_Class .tooltiptext {
+			    visibility: hidden;
+			    width: 120px;
+			    color: white;
+			    text-align: center;
+			    font-size: 12px;
+			    padding: 3px 0;
+			    border-radius: 6px;
+			    position: absolute;
+			    z-index: 1;
+			    left: -38px;
+			    top: 31px;
+			    background: rgba(0, 0, 0, 0.6);
+			}
+			
+			.Info_cz_Class:hover .tooltiptext {
+			    visibility: visible;
+			}
+			
+			#space {
+			    max-width: max-content;
+			    max-height: max-content;
+			}
+			
+			.alert {
+				padding: 20px;
+		  		background-color: #f44336;
+		  		color: white;
+		  		width: 100%;
+			  	left: 0;
+			  	position: absolute;
+			  	display:none;
+			}
+			
+			.closebtn {
+				margin-left: 15px;
+				color: white;
+				font-weight: bold;
+				float: right;
+				font-size: 22px;
+				line-height: 20px;
+				cursor: pointer;
+				transition: 0.3s;
+				padding: 0;
+				border: none;
+				background: none;
+			}
+			
+			.closebtn:hover {
+				color: black;
+			}
+			
+			#Ext_Links_Module_Slide1 {
+				text-align: left;
+				display: inline-block;
+				margin: auto 20px;
+			}
+
+			div.settings {
+				display: grid;
+    			grid-template-columns: 1fr 3fr;
+    			grid-gap: 5px;
+    			margin-top: 10px;
+			}
+			
+			div.settings label {
+				text-align: right;
+			}
+			
+			#Ext_Links_Module_Slide2 {
+				background: white;
+				padding: 25px;
+				text-align: left;
+				display: block;
+				margin: 15px;
+				margin-top: 40px;
+				margin-bottom: 20px;
+				margin-right: -15px;
+			    margin-left: -15px;
+			    top: 0px;
+			    overflow: visible;
+			    border-radius: 5px;
+			}
+			
+			.imgDiv {
+				display: inline-block;
+			}
+			
+			.deleteExternalLink {
+				width: auto;
+			}
+          
         </style>
         <script th:inline="javascript">
             $(function () {
@@ -53,6 +144,9 @@
             var currentSpaceId;
             var addVideoClk=0;
             var editVideoClk=0;
+            var selectedModuleLinkId;
+            var selectedSpaceLinkId;
+            var selectedTextBlockId;
             var currentBlockId;
             var currentRefId;
             
@@ -67,6 +161,8 @@
             	  else sticky.removeClass('fixed');
             });
             
+            
+            
             function createImageBlock(reader, width) {
                 var imageblock = $('<div id="current" class="valueDiv tab row"><img src="#" style="imgDiv tab row"/><input type="hidden" id="deleteImageId" /><a class="btn deleteImage" href="javascript:;" style="position: absolute; right:64px;"><i style="color: var(--error);" class="fas fa-trash-alt"></i></a></div>');
                 imageblock.find('img').attr('src', reader.result);
@@ -220,7 +316,6 @@
                     }
                 });
             }
-
             
             var originalTextHtml = {};
 
@@ -450,7 +545,7 @@
                     $("#addImgAlert").show();
                 }
             }
-                
+               
             function uploadImage() {
                 var imgBlockID = $("#uploadImage").data('value');
                 var file = $('#file')[0].files[0];
@@ -722,6 +817,57 @@
                     }
                 });
             }
+          
+          function updateContentOrder(jsonObj,token){
+            		$.ajax({
+            		 // ------------- adjusting content order of blocks if their position changed after dragging ----------
+	            		url: "[(@{'/staff/module/'+${module.id}+'/slide/'+${slide.id}+'/blocks/order/update'})]",
+	            		type: 'POST',
+	            		beforeSend: function(){
+		            		$(".loader").remove();
+		            		$('#contOrdUpdStatus').empty();
+		            		$('#contOrdUpdStatus').append($('<div class="loader" style="font-size: 30px;display: none; text-align: center;"><i class="icon-spinner" aria-hidden="true">Saving...</i></div>'));
+		            		$(".loader").show();
+	            		},
+	            		complete: function(){
+		            		$(".loader").hide();
+		            		timeout = null;
+	            		},
+	            		cache       : false,
+	            		contentType: 'application/json; charset=utf-8',
+	            		processData :false,
+	            		headers:{
+	            			'X-CSRF-Token':token
+	            		},
+	            		data: JSON.stringify(jsonObj),
+	            		success: function(data) {
+		            		$(".save").remove();
+		            		for(let i=0;i<data.length;i++) {
+			            		$('#'+data[i].id).attr('data-position',data[i].contentOrder);
+		            		} 
+		            		var successDiv = $('<div style="width: 100%;height: 50px;" class="save alert alert-success alert-dismissible fade show" role="alert">');
+		            		successDiv.append('<p>Successfully Saved.</p>');
+		            		successDiv.append('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>');
+		            		successDiv.append('</div>');
+		            		$('#contOrdUpdStatus').empty();
+		            		$('#contOrdUpdStatus').append(successDiv);
+	            		},
+	            		error: function(data) {
+		            		$(".errInSave").remove();
+		            		var errorDiv = $('<div style="width: 100%;height: 50px;" class="errInSave alert alert-danger alert-dismissible fade show" role="alert">');
+		            		errorDiv.append('<p>We are sorry but something went wrong. Please try again later.</p>');
+		            		errorDiv.append('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>');
+		            		errorDiv.append('</div>');
+		            		$('#contOrdUpdStatus').empty();
+		            		$('#contOrdUpdStatus').append(errorDiv);
+	            		}
+            		});
+        		}
+           	
+            [# th:if="${#strings.equals(slide['class'].simpleName,'BranchingPoint')}"]
+        		$('#addChoice').show();
+        		$('#choiceSpace').show();
+        	[/]
             
             $(document).on("click", "[data-action='edit-video']", function(e) {
                 addVideoClk = 0;
@@ -863,13 +1009,13 @@
             		$('#imageId').prop("disabled",true);
             		$('#file').prop("disabled",false);
             		
-            	  });
+            	});
             	
             	$('#chooseFromExisting').click(function() {
             		$('#file').val('');
             		$('#file').prop("disabled",true);
             		$('#imageId').prop("disabled",false);
-            	  });
+            	});
             	var timeout=null;
             	$('#slideSpace').sortable({
 	            	update: function(event,ui) {
@@ -896,58 +1042,85 @@
 		            	}
 	            	}
             	});
-
-            	function updateContentOrder(jsonObj,token){
-	            		$.ajax({
-	            		 // ------------- adjusting content order of blocks if their position changed after dragging ----------
-		            		url: "[(@{'/staff/module/'+${module.id}+'/slide/'+${slide.id}+'/blocks/order/update'})]",
-		            		type: 'POST',
-		            		beforeSend: function(){
-			            		$(".loader").remove();
-			            		$('#contOrdUpdStatus').empty();
-			            		$('#contOrdUpdStatus').append($('<div class="loader" style="font-size: 30px;display: none; text-align: center;"><i class="icon-spinner" aria-hidden="true">Saving...</i></div>'));
-			            		$(".loader").show();
-		            		},
-		            		complete: function(){
-			            		$(".loader").hide();
-			            		timeout = null;
-		            		},
-		            		cache       : false,
-		            		contentType: 'application/json; charset=utf-8',
-		            		processData :false,
-		            		headers:{
-		            			'X-CSRF-Token':token
-		            		},
-		            		data: JSON.stringify(jsonObj),
-		            		success: function(data) {
-			            		$(".save").remove();
-			            		for(let i=0;i<data.length;i++) {
-				            		$('#'+data[i].id).attr('data-position',data[i].contentOrder);
-			            		} 
-			            		var successDiv = $('<div style="width: 100%;height: 50px;" class="save alert alert-success alert-dismissible fade show" role="alert">');
-			            		successDiv.append('<p>Successfully Saved.</p>');
-			            		successDiv.append('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>');
-			            		successDiv.append('</div>');
-			            		$('#contOrdUpdStatus').empty();
-			            		$('#contOrdUpdStatus').append(successDiv);
-		            		},
-		            		error: function(data) {
-			            		$(".errInSave").remove();
-			            		var errorDiv = $('<div style="width: 100%;height: 50px;" class="errInSave alert alert-danger alert-dismissible fade show" role="alert">');
-			            		errorDiv.append('<p>We are sorry but something went wrong. Please try again later.</p>');
-			            		errorDiv.append('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>');
-			            		errorDiv.append('</div>');
-			            		$('#contOrdUpdStatus').empty();
-			            		$('#contOrdUpdStatus').append(errorDiv);
-		            		}
-	            		});
-            		}
-                [# th:if="${#strings.equals(slide['class'].simpleName,'BranchingPoint')}"]
-            		$('#addChoice').show();
-            		$('#choiceSpace').show();
-            	[/]
             	
-            
+            	function hideLinkInfoTabs(){
+               	    $("#editExternalLinkInfo").hide();
+               	    $("#editSpaceLinkInfo").hide();
+               	    $("#editModuleLinkInfo").hide();
+               	    $("#editTextBlockInfo").hide();
+               	    $("#createExternalLinkAlert").hide();
+               	    $("#createSpaceLinkAlert").hide();
+               	    $("#createModuleLinkAlert").hide();
+               	    $("#errorMsg").text("");
+               	}
+              
+              function showExternalLinks(externalLink) {
+           		   var externalLinkMainDiv = $('<div id="'+ externalLink["id"] +'" style="margin-top: 15px;"><div class="link_headers">Name: '+ externalLink["label"] +'</div><div>URL:</br><a style="text-decoration: underline; color:blue; overflow: hidden;text-overflow: ellipsis;display:inline-block;" href="'+ externalLink["url"] +'">'+ externalLink["url"]+ '</a></div><a class="btn deleteExternalLink col-md-1" style="text-align: left; padding-left: 0;" href="javascript:;"><span class="icon-trash error" style="text-align: left;"></span></a><a class="btn editExternalLink col-md-1" style="text-align: left; padding-left: 0;" href="javascript:;"><span class="icon-edit" style="text-align: left;"></span></a></div>');
+                	   var externalLinkFormDiv = $('<div id="'+ externalLink["id"] +'form"> - <a style="text-decoration: underline; color:blue;" href="'+ externalLink["url"] +'">'+ externalLink["label"] +'</a></div>');
+                    externalLinkMainDiv.find('.deleteExternalLink').attr("data-link-id", externalLink["id"]);
+                    externalLinkMainDiv.find('.editExternalLink').attr("data-link-id", externalLink["id"]);
+                    externalLinkMainDiv.find('.editExternalLink').attr("data-label", externalLink["label"]);
+                    externalLinkMainDiv.find('.editExternalLink').attr("data-url", externalLink["url"]);
+
+                    $('#Ext_Links_Module_Slide2').append(externalLinkMainDiv);
+                    $('#Ext_Links_Module_Slide1').append(externalLinkFormDiv);
+                }
+              
+              
+               	function displayForms(formToShow){
+               	    $("#space").css("display", "-webkit-box");
+               	    $(formToShow).css("display", "flex");
+               	    modalBgImageHeight = parseInt($("#bgImage").css("height"));
+               	    modalBgImageWidth = parseInt($("#bgImage").css("width"));
+               	}
+               	
+               	function resetHighlighting() {
+               	    // reset icon links
+               	    $('[data-link-id]').css("color", "red");
+
+               	    // reset alert links
+               	    $('div[data-link-id]').removeClass("alert-warning");
+               	    $('div[data-link-id]').addClass("alert-primary");
+
+               	    // reset image links
+               	    $('img[data-link-id]').css("border-width", "0");
+               	}
+               	
+                function getTextArea(x,y) {
+                  var posX = $("#bgImage").position().left;
+                  var posY = $("#bgImage").position().top;
+                  var text = $('<span id="text"><textarea id="textB" name="textBlock" type="textarea" class="textBlock" style="resize:both; background: rgba(0, 0, 0, 0.4);"></textarea></span>');
+                  text.css('position', 'absolute');
+                  text.css('left', x + posX);
+                  text.css('top', y);
+                  $("#space").append(text);
+		       	    
+		       	    var textB = $('#textB')[0],
+		       	    tHeight = textB.clientHeight,
+		       	    tWidth = textB.clientWidth;
+		       	    
+		       	    var height = modalBgImageHeight;
+		       	    var width = modalBgImageWidth;
+		       	    
+		       	    $("#textBoxWidthID").val(tWidth);
+		       	    $("#textBoxHeightID").val(tHeight);
+		       	    textB.onmouseup = function (e) {
+		       	        if (tHeight !== textB.clientHeight || tWidth !== textB.clientWidth ) {
+		       	            tHeight = textB.clientHeight;
+		       	            tWidth = textB.clientWidth;
+		       	            let percentileHeight = (tHeight*100)/height;
+		       	            let percentileWidth = (tWidth*100)/width;
+		       	            $("#textBoxWidthID").val(percentileWidth);
+		       	            $("#textBoxHeightID").val(percentileHeight);
+		       	            $("#textContentID").val(textB.value);
+		       	        }
+		       	    };
+		       	    var percentileHeight = (tHeight*100)/height;
+		       	    var percentileWidth = (tWidth*100)/width;
+		       	    $("#textBoxWidthID").val(percentileWidth);
+		       	    $("#textBoxHeightID").val(percentileHeight);
+		       	    $("#textContentID").val(textB.value);
+			    }
                 //-------- edit contentblock description --------
             
                 $("#submitDescription").hide();
@@ -1100,6 +1273,145 @@
                     addVideoClk =1;
                     editVideoClk=0;
                 });
+              
+              $("#addExternalLinkButton").click(function(e) {
+           	   $('#errorAlert')[0].style.display = "none";
+                  hideLinkInfoTabs();
+                  displayForms("#createExternalLinkAlert");
+              });
+
+              $(document).on("click", ".editExternalLink", function(e) {
+       			  externalLink = {};
+       			  externalLink["id"] = $(this).attr("data-link-id");
+                  externalLink["label"] = $(this).attr("data-label");
+                  externalLink["url"] = $(this).attr("data-url");
+                  $(".externalLinkIdEdit").attr('data-link-id', $(this).attr("data-link-id"));
+       		      displayForms("#editExternalLinkInfo");
+         	  });
+               
+              $("#editExternalLinkBtn").click(function(e) {
+            	  e.preventDefault();
+                  $("#space").scrollTop(0);
+                  var linkId = $(".externalLinkIdEdit").attr('data-link-id');
+                  var form = $("#editExternalLinkForm");
+                  var formData = new FormData(form[0]);
+                  $.ajax({
+                      type: "POST",
+                      url: "[(@{'/staff/module/'+${module.id}+'/slide/'+${slide?.id}+'/link/external/'})]"+linkId+'?[(${_csrf.parameterName})]=[(${_csrf.token})]',
+                      cache: false,
+                      contentType : false,
+                      processData : false,
+                      enctype: 'multipart/form-data',
+                      data: formData,
+                      beforeSend: function () {
+                          $(".saveLoader").show();
+                      },
+                      complete: function () {
+                          $(".saveLoader").hide();
+                      },
+                      success: function(data) {
+                    	  var linkData = JSON.parse(data);
+                          hideLinkInfoTabs();
+                          $("#space").css("display", "none");
+                   	      $('#'+ externalLink["id"]).remove();
+                	      $('#'+ externalLink["id"] +'form').remove();
+                          showExternalLinks(linkData);;
+                      }
+                  });
+               });
+				
+               const closeButton = document.createElement('button');
+               closeButton.textContent = 'x';
+               closeButton.classList.add('closebtn');
+               $("#createExternalLinkBtn").click(function(e) {
+                   e.preventDefault();
+                   $("#space").scrollTop(0);
+                   var externalLink = $(".externalLink").val();
+                   var externalLinkLabel = $(".externalLinkLabel").val();
+                   if (externalLinkLabel == undefined || externalLinkLabel == "") {
+                	   $("#errorAlert")[0].style.display = "block";
+                	   $("#errorAlert")[0].textContent = "Please enter a label for this external link.";
+                	   $("#errorAlert")[0].appendChild(closeButton);
+                       $("#space").scrollTop($('#space')[0].scrollHeight);
+                       return;
+                   }
+                   if (externalLink == undefined || externalLink == "") {
+                	   $("#errorAlert")[0].style.display = "block";
+                	   $("#errorAlert")[0].textContent = "Please provide the link to the external link.";
+                	   $("#errorAlert")[0].appendChild(closeButton);
+                       $("#space").scrollTop($('#space')[0].scrollHeight);
+                       return;
+                   }
+                   var form = $("#createExternalLinkForm");
+                   var formData = new FormData(form[0]);
+                   $.ajax({
+                       type: "POST",
+                       url: "[(@{'/staff/module/'+${module.id}+'/slide/'+${slide.id}+'/externallink?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
+                       cache       : false,
+                       contentType : false,
+                       processData : false,
+                       enctype: 'multipart/form-data',
+                       data: formData,
+                       beforeSend: function () {
+                           $(".saveLoader").show();
+                           },
+                      	complete: function () {
+                           $(".saveLoader").hide();
+                           },
+                       success: function(data) {
+                           var linkData = JSON.parse(data);
+                           $("#createExternalLinkAlert").hide();
+                           form[0].reset();
+                           $("#space").css("display", "none");
+                           showExternalLinks(linkData);
+                       }
+                   });
+               });
+               
+               $(document).on("click", ".deleteExternalLink", function(e) {
+            	   $("#confirmDeleteLinkAlert").show();
+               	   $(".deleteExternalLinkAlert").attr('data-link-id', $(this).attr("data-link-id"));
+               });
+               
+           	   $(".deleteExternalLinkAlert").on("click", function(e) {
+            	    e.preventDefault();
+              	    $("#confirmDeleteImageAlert").find('input').remove();
+              		$("#confirmDeleteChoiceBlockAlert").find('input').remove();
+              		$("#confirmDeleteTextAlert").find('input').remove();
+              		$("#confirmDeleteLinkAlert").hide();
+               		var linkId = $(this).attr("data-link-id");
+                    $.ajax({
+                    	url: "[(@{'/staff/module/'+${module.id}+'/slide/'+${slide.id}+'/externallink/'})]"+ linkId + '?[(${_csrf.parameterName})]=[(${_csrf.token})]',
+                        method: "DELETE",
+                        beforeSend: function () {
+                        	$(".saveLoader").show();
+                        },
+                      	complete: function () {
+                        	$(".saveLoader").hide();
+                        },
+                        success:function(data) {
+               		        $('#' + linkId).remove();
+               		    	$('#' + linkId + "form").remove();
+                            hideLinkInfoTabs();
+                        }
+                    });
+               });
+
+               // ------------- adjust links on background image (e.g. when inputs are changed) ------------
+               
+               $("#externalLinkImage").change(function() {
+                   if (this.files && this.files[0]) {
+                       externalLinkIconReader.readAsDataURL(this.files[0]);
+                   }
+               });
+               
+               $(".cancelExternalLinkBtn").click(function() {
+                   $("#space").scrollTop(0);
+                   $("#undefined").remove();
+                   $("#space").hide();
+                   $("#createExternalLinkAlert").hide();
+                   $("#editExternalLinkInfo").hide();
+               });
                 
                 $("#uploadImage").click(function(e) {
                     e.preventDefault();
@@ -1158,7 +1470,7 @@
                     imageInput.val(imageId);
                     $('#confirmDeleteImageAlert .modal-footer').append(imageInput);
                 });
-            	
+            
              	// Delete Video Click Handler
                 $(document).on("click", "[data-action='delete-video']", function(e) {
                     $("#confirmDeleteVideoAlert .modal-footer input[type='hidden']").remove();
@@ -2044,10 +2356,10 @@
                    }
                    if(addVideoClk==0 && editVideoClk==1){
                        $("#saveVideo").html("Update Video");  
-                       if ($("#videoTitle").val() && !$("#videoFile").val()) {
+                       if ($("#videoTitle").val() && !$("#videoLink").val()) {
     						$("#saveVideo").prop('disabled', false);
     					}
-                       if (!$("#videoTitle").val() && $("#videoFile").val()) {
+                       if (!$("#videoTitle").val() && $("#videoLink").val()) {
     						$("#saveVideo").prop('disabled', true);
     					}
                    }
@@ -2529,7 +2841,7 @@
              $(document).on('mouseenter', '.referenceDivStaff', onMouseEnter);
              $(document).on('mouseleave', '.referenceDivStaff', onMouseLeave);
              $(document).on('dblclick', '.referenceDivStaff', referenceBlockDoubleClick);
-                
+
 	            $("#submitSpaceBlock").on("click", function(e){
 		            e.preventDefault();
 		            // ------------- editting text content blocks ------------
@@ -2612,10 +2924,11 @@
                     $("#selectedImage").empty();
                     $("#selectedImage").append('<img width="200px" src="' + tbaseUrl + image.id + '" class="img-thumbnail" />');
                     return $image;
-                }
-            });
-            
-            $(window).on('load', function () {	
+                };
+           
+            $(window).on('load', function () {
+            	hideLinkInfoTabs();
+                $("#space").css("display", "none");
             	var divWindow = $(".valueDiv");
             	$('[data-action="delete-text"]').css('position', 'absolute');
             	$('[data-action="delete-text"]').css('right', '0');
@@ -2668,10 +2981,15 @@
                     $("#addVideoAlert").show();
             	}
             });
+        });
         </script>
     </head>
     <body>
         <div class="main-content" layout:fragment="content">
+	        <div id="errorMsg" class="alert customWindow">
+    	        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
+    	        Error Message
+    	    </div>
             <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a th:href="@{/staff/dashboard}">Dashboard</a>
@@ -2716,6 +3034,8 @@ <h2><span style="color: var(--dark-grey)">Slide:</span> [[${slide.name}]]
             +&nbsp;<span class="icon-book-open-alt"></span></button>&nbsp;
                 <button type="button" id="addVideo" class="btn pill-btn" data-toggle="tooltip" title="Add Video" data-placement="top">
                 +&nbsp;<span class="icon-video"></span></button>&nbsp;
+                <button type="button" id="addExternalLinkButton" class="btn pill-btn" data-toggle="tooltip" title="Add External Link" data-placement="top">
+                +&nbsp;<span class="fa fa-external-link-alt"></span></button>&nbsp;
                 <button type="button" id="addChoice" style="display: none;" class="btn pill-btn" data-toggle="tooltip" title="Add Sequence Choice" data-placement="top">
                 +&nbsp;<span class="icon-checkmark"></span></button>
             <p style="margin-top: 1rem;">Double Click on a Block to Edit it</p>
@@ -2836,6 +3156,31 @@ <h6>Are you sure you want to delete this
                     </div>
                 </div>
             </div>
+            <div id="confirmDeleteLinkAlert" class="modal" tabindex="-1"
+                role="dialog" th:draggable="true">
+                <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title">Confirm Delete</h5>
+                            <button type="button" class="close"
+                                data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                        <div class="modal-body">
+                            <h6>Are you sure you want to delete this
+                                external link?
+                            </h6>
+                        </div>
+                        <div class="modal-footer">
+                            <button id="cancelDeleteLink" type="reset"
+                                class="btn light">Cancel</button>
+                            <button type="submit"
+                                class="btn btn-primary deleteExternalLinkAlert">Delete</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <!-- Delete Video Modal -->
             <div id="confirmDeleteVideoAlert" class="modal"
                 tabindex="-1" role="dialog" th:draggable="true">
@@ -3051,6 +3396,9 @@ <h6>
                     </div>
                 </div>
             </div>
+            
+            
+        
             <div id="addVideoAlert" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
 				<div class="modal-dialog" role="document" draggable="true">
 					<div class="modal-content">
@@ -3478,6 +3826,8 @@ <h6>You are not logged in, please login.</h6>
                     </div>
                 </div>
             </div>
+            
+            
             <div id="addChoiceAlert" class="modal" tabindex="-1"
                 role="dialog">
                 <div class="modal-dialog" role="document">
@@ -3521,6 +3871,79 @@ <h5 class="modal-title">Select from the
                     </div>
                 </div>
             </div>
+            
+           	<div id="space" class="link-modal">
+	           	<div id="Ext_Links_Module_Slide1"> External Resources
+		     		<div th:if="${externalLinks}" th:each="link: ${externalLinks}" th:id="${link.getId()}+'form'"> -
+		      			<a style="text-decoration: underline; color:blue;" th:href="@{${link.getExternalLink()}}">[[${link.getLabel()}]]</a>
+		     		</div>
+	     		</div>     	
+	        	<div id="createExternalLinkAlert" style="z-index: 1;">
+			        <div class="divider"></div>
+				        <form id="createExternalLinkForm" style="z-index: 1;">
+				            <div role="alert" style="display: block;">
+			                    <div class = "saveLoader" style="font-size: 30px; display: none; text-align: center;">
+			                        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+			                    </div>
+		            			<h5 class="alert-heading">Create New External Link</h5>
+				                <span>Please fill out each field and then click
+				                   "Create External Link".</span>
+				                <div class="settings">
+			                		<label class="extLinkLabel">Label</label>
+			                		<input class="form-control-sm externalLinkLabel" type="text" style="background: var(--base-grey)" name="externalLinkLabel">
+				                 
+			                		<label class="extLinkLabel">External Link</label>
+			                		<input class="form-control-sm externalLink" type="text" style="background: var(--base-grey)" name="url">	
+				                </div>               
+				                <p class="mt-5 text-center">
+				                    <button type="reset" class="btn btn-light cancelExternalLinkBtn btn-sm">Cancel</button>
+				                    <button id="createExternalLinkBtn" type="submit" class="btn primary-btn btn-sm">Create External Link</button>
+				                </p>
+				                <div id="errorAlert" class="alert customWindow"></div>
+				            </div>
+				        </form>
+					</div>
+		        
+			        <div id="editExternalLinkInfo" style="z-index: 1;">
+			            <div class="divider"></div>
+			            <form id="editExternalLinkForm" style="z-index: 1;">
+			                <div role="alert" style="display: block;">
+			                    <div class = "saveLoader" style="font-size: 30px; display: none; text-align: center;">
+			                        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+			                    </div>
+		                            <h5 class="alert-heading" id="externalLinkInfoLabelEdit"> Modify External Link:
+		                            </h5>
+		                            <span>Please fill out each field and then click "Save External Link".</span>
+			                    <input hidden name="externalLinkIdEdit"
+			                        class="externalLinkIdEdit"/>
+			                        
+			                    <div class="settings">
+			                		<label class="extLinkLabel">Label</label>
+			                		<input class="form-control-sm externalLinkLabelEdit" type="text" style="background: var(--base-grey)" name="externalLinkLabel">
+				                 
+			                		<label class="extLinkLabel">External Link</label>
+			                		<input class="form-control-sm externalLinkURLEdit" type="text" style="background: var(--base-grey)" name="url">	
+				                </div>
+			                    <p class="mt-5 text-center">
+			                        <button type="reset" class="btn btn-light cancelExternalLinkBtn btn-sm">Cancel</button>
+			                        <button id="editExternalLinkBtn" type="reset" class="btn primary-btn btn-sm">Save External Link</button>
+			                    </p>
+			                    
+			                </div>
+			            </form>
+			        </div>
+		        </div>		        
+		        <div id="main-space">
+	                <div th:each="contents: ${slideContents}">
+	                    <div th:attr="data-position=${contents.contentOrder}" th:id="${contents.id}" class="valueDiv tab row" th:if="${#strings.equals(contents['class'].simpleName,'ImageBlock')}">
+	                        <img id="main-bgImage" th:id="${contents.id}" class="imgDiv" th:src="@{'/api/image/'+${contents.image.id}}"/>
+	                        <input type="hidden" id="deleteImageId" th:value="${contents.id}">
+	                        <a class="btn deleteImage col-md-1" href="javascript:;" style="position:absolute; right:25px;">
+	                        <span class="icon-trash error"></span>
+	                        </a>
+	                    </div>
+	                </div>
+                </div>
          <div id="slideSpace">
             <div th:each="contents: ${slideContents}">
             
diff --git a/vspace/src/main/webapp/WEB-INF/views/staff/spaces/space.html b/vspace/src/main/webapp/WEB-INF/views/staff/spaces/space.html
index b6f5f2073..04275b850 100644
--- a/vspace/src/main/webapp/WEB-INF/views/staff/spaces/space.html
+++ b/vspace/src/main/webapp/WEB-INF/views/staff/spaces/space.html
@@ -3,12 +3,13 @@
 <head>
 <link rel="stylesheet" type="text/css" id="applicationStylesheet"
     th:href="@{/resources/extra/Home.css}" />
+<link th:href="@{/resources/boostrap-colorpicker/dist/css/bootstrap-colorpicker.css}" rel="stylesheet">
 
 <script th:src="@{'/resources/extra/space.js'}"></script>
-<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
-<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
-<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
-<script th:src="@{/assets/bootstrap-colorpicker/js/bootstrap-colorpicker.js}"></script>
+<script th:src="@{/resources/jquery/jquery-ui.min.js}"></script>
+<script th:src="@{/resources/bootstrap-4.1.2/assets/js/popper.min.js}"></script>
+<script th:src="@{/resources/bootstrap-4.1.2/js/bootstrap.min.js}"></script>
+<script th:src="@{/resources/boostrap-colorpicker/dist/js/bootstrap-colorpicker.js}"></script>
 <style type="text/css">
 
 .right-aligned {
@@ -245,1613 +246,1661 @@
 		    var externalLinkImageUrl = [[@{/api/image/default/link/external/}]];
 		    externalLink = $('<div id="'+spanId+link.externalLink.id+'" data-linkTarget="'+link.externalLink.externalLink+'" data-linkType="'+link.type+'"  data-howToOpen="'+ link.howToOpen+'" data-linkLabel="'+link.externalLink.name+'" class="externalLink-'+link.externalLink.id+' imageLink Info_cz_Class" data-link-id="'+link.externalLink.id+'"><img src="'+externalLinkImageUrl+'" width="30" height="30" border-radius = "50%"/><p class="label-'+link.externalLink.id+'" data-link-id="'+link.externalLink.id+'"><span class="tooltiptext">'+link.externalLink.name+'</span></p></div>');	
 		}
-		setLinkPosition(externalLink,link,false,isModal,true, posX, posY, posXModal, posYModal);
-		$(divId).append(externalLink);
-		if(spanId === "externallinkId-"){
-			$('#'+spanId+link.externalLink.id).css('cursor', 'pointer');
-			$('#'+spanId+link.externalLink.id).click(function(e) {
-				var linkData = $('#'+spanId+link.externalLink.id).data();
-				makeExternalLinksEditable(linkData["linklabel"],link.externalLink.id,linkData["linktarget"],link.positionX,link.positionY,link.id,linkData["linktype"],linkData["howtoopen"]);
-			});
+	    }
+	    if(isModuleLink && link.link.module.moduleStatus!=null && link.link.module.moduleStatus=="UNPUBLISHED"){
+	    	var unpublishedModuleElement = $('<span data-link-id="unpublished-'+link.link.id+'" class="icon-warning secondary unpublishedSpaceClass unpublishedClass-'+link.link.id+'"></span>')
+	        unpublishedModuleElement.css('position', 'absolute');
+	    	unpublishedModuleElement.css('left', link.positionX + positionX + displaceUnpublishedOnX);
+	    	unpublishedModuleElement.css('top', link.positionY + positionY - displaceUnpublishedOnY);
+	    	unpublishedModuleElement.css('transform', 'rotate('+link.rotation+'deg)');
+	    	unpublishedModuleElement.css('font-size', "24px");
+	        if(isModal){
+	            $("#space").append(unpublishedModuleElement);
+	        }else{
+	            $("#main-space").append(unpublishedModuleElement);
+	        }
+	    }
+	    if(!isTextBlock){
+	        var linkId = isExternalLink ? link.externalLink.id : link.link.id;
+	        setLabelPosition(link,linkId,positionX,positionY);
+	    }
+	}
+	function setLabelPosition(link,id, positionX, positionY){
+		$(".label-"+id).css({
+		    'left': link.positionX + positionX - displaceLableOnX,
+		    'top': link.positionY + positionY + displaceLableOnY,
+		    'color': 'red'
+		}); 
+	}
+	
+	function generateSpaceLinks(link,spanId,divId,isModal, posX, posY, posXModal, posYModal){
+	    if(link != null){
+	        var spaceLink;
+	        if(link.type == "ALERT"){
+	            spaceLink = $('<span id="'+spanId+link.link.id+'" class="alert alertLink alert-primary spaceLink-'+link.link.id+'" role="alert" data-link-id="'+link.link.id+'" data-linkTarget="'+link.link.targetSpace?.id+'" data-linkRotation="'+link.rotation+'" data-linkType="'+link.type+'" data-linkLabel="'+link.link.name+'"><p class="label-'+link.link.id+'">'+link.link.name+'</p></span>');
+	        }
+	        else if(link.type == "IMAGE" && link.image != null){
+	            var spaceImageURL = [[@{/api/image/}]]+link.image.id;
+	            spaceLink = $('<img id="'+spanId+link.link.id+'" class="spaceLink-'+link.link.id+' imageLink" data-link-id="'+link.link.id+'" data-linkTarget="'+link.link.targetSpace?.id+'" data-linkRotation="'+link.rotation+'" data-linkType="'+link.type+'" data-linkLabel="'+link.link.name+'" src="'+spaceImageURL+'" />');
+	        }
+	        else{
+	            spaceLink = $('<span id="'+spanId+link.link.id+'" data-link-id="'+link.link.id+'" data-linkTarget="'+link.link.targetSpace?.id+'" data-linkRotation="'+link.rotation+'" data-linkType="'+link.type+'" data-linkLabel="'+link.link.name+'" class="spaceLink-'+link.link.id+' Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-move Icon_awesome_info_staff_c"></span><p class="label-'+link.link.id+'" data-link-id="'+link.link.id+'"><span class="tooltiptext">'+link.link.name+'</span></p></span>');
+	        }
+	        setLinkPosition(spaceLink,link,true,isModal,false, posX, posY, posXModal, posYModal, false);
+	        $(divId).append(spaceLink);
+	        
+	        if(spanId === "spacelinkId-"){
+	            $('#'+spanId+link.link.id).css('cursor', 'pointer');
+	            $('#'+spanId+link.link.id).click(function(e) {
+	                var linkData = $('#'+spanId+link.link.id).data();
+	                makeSpaceLinksEditable(linkData["linklabel"], link.link.id, linkData["linkrotation"] ,linkData["linktarget"],link.positionX,link.positionY,link.id,linkData["linktype"]);
+	            });
+	        }
+	    }
+	}
+	
+	function generateModuleLinks(link,spanId,divId,isModal, posX, posY, posXModal, posYModal){
+	    if(link != null){
+	    	console.log('LINK: ', link);
+	        var moduleLink;
+	        if(link.type=="ALERT"){
+	            moduleLink = $('<div class="alert alert-primary alertLink moduleLink-'+link.link.id+'" id="'+spanId+link.link.id+'" role="alert" data-link-id="'+link.link.id+'" data-linkTarget="'+link.link.module.id+'" data-linkRotation="'+link.rotation+'" data-linkType="'+link.type+'" data-linkLabel="'+link.link.name+'"><p class="label-'+link.link.id+'">'+link.link.name+'</p></div>');
+	        }
+	        else if(link.type=="IMAGE" && link.image != null){
+	            var moduleImageURL = [[@{/api/image/}]]+link.image.id;
+	            moduleLink = $('<img id="'+spanId+link.link.id+'" class="moduleLink-'+link.link.id+' imageLink" data-link-id="'+link.link.id+'" data-linkTarget="'+link.link.module.id+'" data-linkRotation="'+link.rotation+'" data-linkType="'+link.type+'" data-linkLabel="'+link.link.name+'" src="' + moduleImageURL+'" />');
+	        }
+	        else{
+	            moduleLink = $('<span id="'+spanId+link.link.id+'" data-link-id="'+link.link.id+'" data-linkTarget="'+link.link.module.id+'" data-linkRotation="'+link.rotation+'" data-linkType="'+link.type+'" data-linkLabel="'+link.link.name+'" class="moduleLink-'+link.link.id+' Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-info Icon_awesome_info_staff_m"></span><p class="label-'+link.link.id+'" data-link-id="'+link.link.id+'"><span class="tooltiptext">'+link.link.name+'</span></p></span>');
+	        }
+	        setLinkPosition(moduleLink,link,false,isModal,false, posX, posY, posXModal, posYModal,true);
+	        $(divId).append(moduleLink);
+			console.log('DIV ID: ', $(divId));
+	        if(spanId === "modulelinkId-"){
+	            $('#'+spanId+link.link.id).css('cursor', 'pointer');
+	            $('#'+spanId+link.link.id).click(function(e) {
+	                var linkData = $('#'+spanId+link.link.id).data();
+	                makeModuleLinksEditable(linkData["linklabel"], link.link.id,linkData["linkrotation"],linkData["linktarget"],link.positionX,link.positionY,link.id, linkData["linktype"]);
+	            });
+	        }
+	    }
+	}
+	
+	function generateExternalLinks(link,spanId,divId,isModal, posX, posY, posXModal, posYModal){
+		if(link != null){
+			var externalLink;
+			if(link.type=="IMAGE" && link.image != null){
+				var imageURL = [[@{/api/image/}]]+link.image.id;
+				externalLink = $('<img id="'+spanId+link.externalLink.id+'" data-linkTarget="'+link.externalLink.externalLink+'" data-linkType="'+link.type+'"  data-howToOpen="'+ link.howToOpen+'" data-linkLabel="'+link.externalLink.name+'" class="externalLink-'+link.externalLink.id+' imageLink" data-link-id="'+link.externalLink.id+'" src="'+imageURL+'" />');
+			}else{
+				externalLink = $('<span id="'+spanId+link.externalLink.id+'" data-link-id="'+link.externalLink.id+'" data-linkTarget="'+link.externalLink.externalLink+'" data-linkType="'+link.type+'"  data-howToOpen="'+ link.howToOpen+'" data-linkLabel="'+link.externalLink.name+'" class="externalLink-'+link.externalLink.id+' Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-ext-link Icon_awesome_info_staff_e"></span><p class="label-'+link.externalLink.id+'" data-link-id="'+link.externalLink.id+'"><span class="tooltiptext">'+link.externalLink.name+'</span></p></span>');
+			}
+			setLinkPosition(externalLink,link,false,isModal,true, posX, posY, posXModal, posYModal);
+			$(divId).append(externalLink);
+			if(spanId === "externallinkId-"){
+				$('#'+spanId+link.externalLink.id).css('cursor', 'pointer');
+				$('#'+spanId+link.externalLink.id).click(function(e) {
+					var linkData = $('#'+spanId+link.externalLink.id).data();
+					makeExternalLinksEditable(linkData["linklabel"],link.externalLink.id,linkData["linktarget"],link.positionX,link.positionY,link.id,linkData["linktype"],linkData["howtoopen"]);
+				});
+			}
 		}
 	}
-}
-
-function generateTextBlock(block,spanId,divId,isModal, posX, posY, posXModal, posYModal, imageHeight, imageWidth){
-    let textColorPicker = document.querySelector("#textColorID");
-    let borderColorPicker = document.querySelector("#borderColorID");
-    let textEditColorPicker = document.querySelector("#textColorIDEdit");
-    let borderEditColorPicker = document.querySelector("#borderColorIDEdit");
-	
-    //adding event listeners for adding new text block
-    textColorPicker.addEventListener("input", changeTextColor, false);
-    borderColorPicker.addEventListener("input", changeBorderColor, false);
-	
-    //adding event listeners while editing existing text block
-    textEditColorPicker.addEventListener("input", changeTextAreaOnEditTextColor, false);
-    borderEditColorPicker.addEventListener("input", changeTextAreaOnEditBorderColor, false);
-	
-    if(block != null){
-        var height = (block.height*imageHeight)/100;
-        var width = (block.width*imageWidth)/100;
-        var textBlock = $('<span id="'+spanId+block.spaceTextBlock.id+'" data-link-id="'+block.spaceTextBlock.id+'" data-blockId="'+block.id+'" data-text="'+block.spaceTextBlock.text+'" data-width="'+block.width+'"  data-height="'+block.height+'" class="textBlockClass spaceLink-'+block.spaceTextBlock.id+'"><textarea class="textBlock" style="height:'+height+'px; width:'+width+'px; resize:none; background: rgba(0, 0, 0, 0.4); color:'+block.textColor+'; border-color: '+block.borderColor+';" readonly type="textarea">'+block.spaceTextBlock.text+'</textarea></span>');
-        setLinkPosition(textBlock,block,false,isModal,false, posX, posY, posXModal, posYModal, true);
-        $(divId).append(textBlock);
-        if(spanId === "textBlockId-"){
-            $('#'+spanId+block.spaceTextBlock.id).css('cursor', 'pointer');
-            $('#'+spanId+block.spaceTextBlock.id).click(function(e) {  
-                var blockData = $('#'+spanId+block.spaceTextBlock.id).data();
-                makeTextBlockEditable(blockData["blockid"],blockData["linkId"],blockData["text"],block.positionX,block.positionY,blockData["width"],blockData["height"], block.textColor, block.borderColor);
-            });
-        }
-        
-        if(block.spaceTextBlock.id === selectedTextBlockId) {
-        	var textModalBlock = $("#textModalBlockId-"+selectedTextBlockId).find("textarea")[0];
-        	
-        	tHeight = textModalBlock.clientHeight;
-        	tWidth = textModalBlock.clientWidth;
-            
-            var height = modalBgImageHeight;
-            var width = modalBgImageWidth;
-            textModalBlock.style["resize"] = "both";
-            textModalBlock.onmouseup = function (e) {
-	            if (tHeight !== textModalBlock.clientHeight || tWidth !== textModalBlock.clientWidth ) {
-	                tHeight = textModalBlock.clientHeight;
-	                tWidth = textModalBlock.clientWidth;
-	                let percentileHeight = (tHeight*100)/height;
-	                let percentileWidth = (tWidth*100)/width;
-	                $("#textBoxWidthIDEdit").val(percentileWidth);
-	                $("#textBoxHeightIDEdit").val(percentileHeight);
-	                $("#textContentIDForEdit").val(textModalBlock.value);
-	            }
-            };
-        }
-    }
-}
-
-function drawLinks(){
-    $(".Info_cz_Class").remove();
-    $(".imageLink").remove();
-    $(".alertLink").remove();
-    $(".ellipse_class").remove();
-    $(".unpublishedSpaceClass").remove();
-    $(".textBlockClass").remove();
-    $(".deletedSpaceClass").remove();
-    
-    $.ajax({
-        type: "GET",
-        url: "[(@{'/staff/space/'+${space?.id}+'/links'})]",
-        cache       : false,
-        contentType : false,
-        processData : false,
-        beforeSend: function () {
-            $("#loader").show();
-            },
-       	complete: function () {
-            $("#loader").hide();
-            },
-        success: function(data) {
-            var spaceLinks = data['spaceLinks'];
-            var externalLinks = data['externalLinks'];
-            var moduleLinks = data['moduleLinks'];
-            var textBlocks = data['textBlocks'];
-            
-            var posXModal = $("#bgImage").position().left;
-            var posYModal = $("#bgImage").position().top;
-            var posX = $("#main-bgImage").position().left;
-            var posY = $("#main-bgImage").position().top;
-            
-            spaceLinks.forEach(function(link,index){
-                var spanId= "spacelinkModalId-";
-                var divId = "#space"
-                generateSpaceLinks(link,spanId,divId,true, posX, posY, posXModal, posYModal);
-            })
-            spaceLinks.forEach(function(link,index){
-                var spanId= "spacelinkId-";
-                var divId = "#main-space";
-                generateSpaceLinks(link,spanId,divId,false, posX, posY, posXModal, posYModal);
-            })
-            
-            moduleLinks.forEach(function(link,index){
-                var spanId= "moduleModallinkId-";
-                var divId = "#space";
-                generateModuleLinks(link,spanId,divId,true, posX, posY, posXModal, posYModal);
-            })
-            moduleLinks.forEach(function(link,index){
-                var spanId= "modulelinkId-";
-                var divId = "#main-space";
-                generateModuleLinks(link,spanId,divId,false, posX, posY, posXModal, posYModal);
-            })
-            
-            externalLinks.forEach(function(link,index){
-                var spanId= "externalModallinkId-";
-                var divId = "#space";
-                generateExternalLinks(link,spanId,divId,true, posX, posY, posXModal, posYModal);
-            })
-            
-            externalLinks.forEach(function(link,index){
-                var spanId= "externallinkId-";
-                var divId = "#main-space";
-                generateExternalLinks(link,spanId,divId,false, posX, posY, posXModal, posYModal);
-            })
-            
-            textBlocks.forEach(function(block,index){
-                var spanId= "textModalBlockId-";
-                var divId = "#space";
-                var imageHeight = modalBgImageHeight;
-                var imageWidth = modalBgImageWidth;
-                generateTextBlock(block,spanId,divId,true, posX, posY, posXModal, posYModal, imageHeight, imageWidth);
-            })
-            
-            textBlocks.forEach(function(block,index){
-                var spanId= "textBlockId-";
-                var divId = "#main-space";
-                var imageHeight = parseInt($("#main-bgImage").css("height"));
-                var imageWidth = parseInt($("#main-bgImage").css("width"));
-                generateTextBlock(block,spanId,divId,false, posX, posY, posXModal, posYModal, imageHeight, imageWidth);
-            })
-        }
-    });
-}
-
-//--------- show links functions --------------
-function showTextBlock(textBlock, show){
-    $("#textB").remove();
-    $("#text").remove();
-    var posX = $("#bgImage").position().left;
-    var posY = $("#bgImage").position().top;
-    var imageHeight = modalBgImageHeight;
-    var imageWidth = modalBgImageWidth;
-    var textArea = $("<textarea class='textBlock' type='textarea'></textarea>");
-    textArea.css('width', (textBlock["width"]*imageWidth)/100);
-    textArea.css('height', (textBlock["height"]*imageHeight)/100);
-    textArea.css('resize', 'both');
-    textArea.text(textBlock["text"]);
-    var spaceTextBlock;
-    spaceTextBlock = $('<span class="textBlockClass spaceLink-' + textBlock["id"] + '" data-link-id="' + textBlock["id"] + '"></span>');
-    spaceTextBlock.css('position', 'absolute');
-    spaceTextBlock.css('left', textBlock["x"] + posX);
-    spaceTextBlock.css('top', textBlock["y"] + posY);
-    spaceTextBlock.css('font-size', "12px");
-
-    if (textBlock["id"]) {
-        spaceTextBlock.attr("data-link-id", textBlock["id"]);
-        spaceTextBlock.css('cursor', 'pointer');
-        spaceTextBlock.click(function(e) {
-            makeTextBlockEditable(textBlock["displayId"], textBlock["id"], textBlock["text"], textBlock["x"], textBlock["y"], textBlock["width"], textBlock["height"]);
-        });
-    }
-    spaceTextBlock.append(textArea);
-    $("#space").append(spaceTextBlock);
-}
-
-function showTextBlockEdit(textBlock){
-    textBlock["x"]=storeX;
-    textBlock["y"]=storeY;
-    var selectedClass = '#textModalBlockId-'+selectedTextBlockId;
-    var selectedTextArea = "#textModalBlockId-"+selectedTextBlockId+" .textBlock";
-    var posX = $("#bgImage").position().left;
-    var posY = $("#bgImage").position().top;
-    var imageHeight = modalBgImageHeight;
-    var imageWidth = modalBgImageWidth;
-    $(selectedClass).css('left', textBlock["x"]+posX);
-    $(selectedClass).css('top', textBlock["y"]);
-    $(selectedTextArea).css('width', (textBlock["width"]*imageWidth)/100);
-    $(selectedTextArea).css('height', (textBlock["height"]*imageHeight)/100);   
-    $(selectedTextArea).text(textBlock["text"]);
-    $(selectedClass).css('color', textBlock["textColor"]);
-    $(selectedClass).css('border-color', textBlock["borderColor"]);
-}
-
-function showSpaceLink(spaceLink, show, x, y) {
-    $("#space_label").remove();
-    $("#link").remove();
-    $("#undefined").remove();
-    var posX = $("#bgImage").position().left;
-    var posY = $("#bgImage").position().top;
-    var space_label = $("<p id='space_label' class='tooltiptext'></p>");
-    space_label.text(spaceLink["spaceLinkLabel"]);
-
-    var link;
-    if (spaceLink["type"] == "ALERT") {
-        link = $('<div id="link" class="alert alert-primary alertLink spaceLink-"' + spaceLink["id"] + '" role="alert" data-link-id="' + spaceLink["id"] + '"><p>'+spaceLink["spaceLinkLabel"]+'</p></div>');
-    } else if(spaceLink["type"] == "IMAGE" && linkIcon) {
-        link = $('<div id="link" class="spaceLink-' + spaceLink["id"] + '" data-link-id="' + spaceLink["id"] + '"><img src="' + linkIcon + '"></div>');
-    } else {
-        $(space_label).css({
-            'font-size': "12px",
-            'transform': 'rotate(0deg)',
-            'color': 'grey'
-        });
-        link = $('<span id="' + spaceLink["id"] +'" data-link-id="' + spaceLink["id"] + '" class="spaceLink-' + spaceLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-move Icon_awesome_info_staff_c "></span></div></span>');
-    }
-    if(show) {
-        var unpublishedSpaceElement;
-        if(spaceLink["linkedSpaceStatus"]=="UNPUBLISHED"){
-            unpublishedSpaceElement=$('<span data-link-id = "unpublished-' + spaceLink["id"] + '" class="icon-warning secondary fa-lg unpublishedSpaceClass unpublishedClass-' + spaceLink["id"] + '" style="color: var(--secondary);"></span>')
-            unpublishedSpaceElement.css('position', 'absolute');
-            unpublishedSpaceElement.css('left', x + posX + displaceUnpublishedOnX);
-            unpublishedSpaceElement.css('top', y + posY - displaceUnpublishedOnY);
-            unpublishedSpaceElement.css('transform', 'rotate(' +$('#spaceLinkRotation').val()+ 'deg)');
-            unpublishedSpaceElement.css('font-size', "24px");
-        }else{
-            $('[data-link-id="unpublished-' + spaceLink["id"] + '"]').remove();
-        } 
-        link.css('top', spaceLink["y"] + posY);
-    } else {
-    	link.css('top', spaceLink["y"]);
-    }
-
-    link.css('position', 'absolute');
-    link.css('left', spaceLink["x"] + posX);
-    link.css('color', 'rgba(128,128,128,1)');
-    link.css('transform', 'rotate(' +$('#spaceLinkRotation').val()+ 'deg)');
-    link.css('font-size', "12px");
-    if (spaceLink["id"]) {
-        link.attr("class", spaceLink["id"]);
-        link.css('cursor', 'pointer');
-        link.css('color', 'rgba(128,128,128,1)');
-        link.click(function(e) {
-            makeSpaceLinksEditable(spaceLink["spaceLinkLabel"], spaceLink["id"], spaceLink["rotation"], spaceLink["linkedSpace"], spaceLink["x"], spaceLink["y"], spaceLink["displayId"], spaceLink["type"]);
-        });
-
-        space_label.attr("data-link-id", spaceLink["id"]);
-        space_label.attr("class", "tooltiptext label-"+spaceLink["id"]);
-        space_label.css('cursor', 'pointer');
-        space_label.click(function(e) {
-            makeSpaceLinksEditable(spaceLink["spaceLinkLabel"], spaceLink["id"], spaceLink["rotation"], spaceLink["linkedSpace"], spaceLink["x"], spaceLink["y"], spaceLink["displayId"], spaceLink["type"]);
-        });
-    }
-
-    $("#space").append(link);
-    $("#space").append(unpublishedSpaceElement);
-    $("#link").append(space_label);
-}
-
-function showModuleLink(moduleLink, show, x, y) {
-    $("#module_label").remove();
-    $("#link").remove();
-    $("#undefined").remove();
-    var posX = $("#bgImage").position().left;
-    var posY = $("#bgImage").position().top;
-    var module_label = $("<p id='module_label' class='tooltiptext'></p>");
-    module_label.text(moduleLink["moduleLinkLabel"]);
-
-    var link;
-    if (moduleLink["type"] == "ALERT") {
-        link = $('<div id="link" class="alert alert-primary alertLink moduleLink-"' + moduleLink["id"] + '" role="alert" data-link-id="' + moduleLink["id"] + '"><p>'+moduleLink["moduleLinkLabel"]+'</p></div>');
-    } else if(moduleLink["type"] == "IMAGE" && moduleLinkIcon) {
-        link = $('<div id="link" class="spaceLink-' + moduleLink["id"] + '" data-link-id="' + moduleLink["id"] + '"><img src="' + moduleLinkIcon + '"></div>');
-    } else{ 
-        $(module_label).css({
-            'position': 'absolute',
-            'font-size': "10px",
-            'transform': 'rotate(0deg)',
-            'color': 'red'
-        });
-        link = $('<span id="' + moduleLink["id"] +'" data-link-id="' + moduleLink["id"] + '" class="moduleLink-' + moduleLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-info Icon_awesome_info_staff_m"></span></div></span>');
-    } 
-    if(show) {
-        link.find("div").css('fill', 'red');
-        link.css('top', moduleLink["y"] + posY);
-    } else {
-    	link.css('top', moduleLink["y"]);
-    }
-    link.css('position', 'absolute');
-    link.css('left', moduleLink["x"] + posX);
-    link.css('color', 'red');
-    link.css('transform', 'rotate(' +$('#moduleLinkRotation').val()+ 'deg)');
-    link.css('font-size', "12px");
-
-    if (moduleLink["id"]) {
-        link.attr("data-link-id", moduleLink["id"]);
-        link.css('cursor', 'pointer');
-        link.click(function(e) {
-            makeModuleLinksEditable(moduleLink["moduleLinkLabel"], moduleLink["id"], moduleLink["rotation"], moduleLink["linkedModule"], moduleLink["x"], moduleLink["y"], moduleLink["displayId"], moduleLink["type"]);
-        });
-        module_label.attr("data-link-id", moduleLink["id"]);
-        module_label.css('cursor', 'pointer');
-        module_label.attr("class", "tooltiptext label-"+moduleLink["id"]);
-        module_label.click(function(e) {
-            makeModuleLinksEditable(moduleLink["moduleLinkLabel"], moduleLink["id"], moduleLink["rotation"], moduleLink["linkedModule"], moduleLink["x"], moduleLink["y"], moduleLink["displayId"], moduleLink["type"]);
-        });
-    }
-
-    $("#space").append(link);
-    $("#link").append(module_label);
-}
-
-function showModuleLinkEdit(moduleLink, show, posX, posY) {
-    moduleLink["x"]=storeX;
-    moduleLink["y"]=storeY;
-    var selectedLinkClass = '#moduleModallinkId-'+selectedModuleLinkId;
-    var selectedLabelClass = '.label-'+selectedModuleLinkId;
-    updateLinkProperties(selectedLinkClass,selectedLabelClass,moduleLink["rotation"],posX,posY,moduleLink["moduleLinkLabel"]);
-}
-
-
-function showSpaceLinkEdit(spaceLink, show, posX, posY) {
-    spaceLink["x"]=storeX;
-    spaceLink["y"]=storeY;
-    var selectedLinkClass = '#spacelinkModalId-'+selectedSpaceLinkId;
-    var selectedLabelClass = '.label-'+selectedSpaceLinkId;
-    var selectedUnpublishedIconClass = '.unpublishedClass-'+selectedSpaceLinkId;
-    if(show) {
-        var unpublishedSpaceElement;
-        if(spaceLink["linkedSpaceStatus"]=="UNPUBLISHED"){
-            unpublishedSpaceElement=$('<span data-link-id = "unpublished-' + spaceLink["id"] + '" class="icon-warning secondary unpublishedSpaceClass unpublishedClass-' + spaceLink["id"] + '></span>')
-            unpublishedSpaceElement.css('position', 'absolute');
-            unpublishedSpaceElement.css('left', posX + displaceUnpublishedOnX);
-            unpublishedSpaceElement.css('top', posY - displaceUnpublishedOnY);
-            unpublishedSpaceElement.css('transform', 'rotate(' +spaceLink["rotation"]+ 'deg)');
-            unpublishedSpaceElement.css('font-size', "24px");
-            $("#space").append(unpublishedSpaceElement);
-        }else{
-            $('[data-link-id="unpublished-' + spaceLink["id"] + '"]').remove();
-        }    
-    }
-    $(selectedUnpublishedIconClass).css({ 'transform': 'rotate(' + parseInt(spaceLink["rotation"]) + 'deg)'});
-    $(selectedUnpublishedIconClass).css({ 'position': 'absolute'});
-    $(selectedUnpublishedIconClass).css({ 'left': posX + displaceUnpublishedOnXModal});
-    $(selectedUnpublishedIconClass).css({ 'top': posY - displaceUnpublishedOnYModal});
-    updateLinkProperties(selectedLinkClass,selectedLabelClass,spaceLink["rotation"],posX,posY,spaceLink["spaceLinkLabel"]);
-}
-
-function showExternalLinkEdit(externalLink, show, posX, posY) {
-    externalLink["x"]=storeX;
-    externalLink["y"]=storeY;
-    var selectedLinkClass = '#externalModallinkId-'+selectedExternalLinkId;
-    var selectedLabelClass = '.label-'+selectedExternalLinkId;
-    updateLinkProperties(selectedLinkClass,selectedLabelClass,externalLink["rotation"],posX,posY,externalLink["externalLinkLabel"]);
-}
-
-function updateLinkProperties(selectedLinkClass,selectedLabelClass,rotation,x,y,linkLabel, show){
-    var posX, posY;
-    if(show) {
-        posX = $("#main-bgImage").position().left;
-        posY = $("#main-bgImage").position().top;
-    }
-    else{
-        posX = $("#bgImage").position().left;
-        posY = 0
-    }
-    $(selectedLinkClass).css({ 'transform': 'rotate(' + rotation + 'deg)'});
-    $(selectedLinkClass).css({ 'position': 'absolute'});
-    $(selectedLinkClass).css({ 'left': x + posX});
-    $(selectedLinkClass).css({ 'top': y + posY});
-    $(selectedLabelClass+' span').remove();
-    $(selectedLabelClass).append('<span class = "tooltiptext" style="fill: grey;">' + linkLabel + '</span>');
-    feather.replace();    
-}
-
-function hideLinkInfoTabs(){
-    $("#editExternalLinkInfo").hide();
-    $("#editSpaceLinkInfo").hide();
-    $("#editModuleLinkInfo").hide();
-    $("#editTextBlockInfo").hide();
-    $("#createExternalLinkAlert").hide();
-    $("#createSpaceLinkAlert").hide();
-    $("#createModuleLinkAlert").hide();
-    $("#errorMsg").text("");
-    $('#errorAlert').hide();
-}
-
-function showExternalLinks(externalLink, show, x, y) {
-    $("#ext_label").remove();
-    $("#link").remove();
-    $("#undefined").remove();
-    var posX = $("#bgImage").position().left;
-    var posY = $("#bgImage").position().top;
-    var ext_label = $("<p id='ext_label' class='tooltiptext'></p>");
-    ext_label.text(externalLink["externalLinkLabel"]);
-
-    var link;
-    if(externalLink["type"] == "IMAGE" && externalLinkIcon) {
-        link = $('<div id="link" data-link-id="' + externalLink["id"] + '"><img src="' + externalLinkIcon + '"></div>');
-    } else {
-        $(ext_label).css({
-            'position': 'absolute',
-            'font-size': "12px",
-            'transform': 'rotate(0deg)',
-            'color': 'blue'
-        });
-        link = $('<span id="' + externalLink["id"] +'" data-link-id="' + externalLink["id"] + '"  class="externalLink-' + externalLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-ext-link Icon_awesome_info_staff_e"></span></div></span>');
-    }
-    
-    if(show) {
-        link.css('top', externalLink["y"] + posY);
-    } else {
-    	link.css('top', externalLink["y"]);
-    }
-
-    link.css('position', 'absolute');
-    link.css('left', externalLink["x"] + posX);
-    link.css('color', 'blue');
-    link.css('font-size', "12px");
-
-    if (externalLink["id"]) {
-		link.attr("data-link-id", externalLink["id"]);
-		link.css('cursor', 'pointer');
-		link.attr('href', externalLink["url"]);
-		link.click(function(e) {
-			makeExternalLinksEditable(externalLink["externalLinkLabel"], externalLink["id"], externalLink["externalLinkURL"], externalLink["x"], externalLink["y"], externalLink["displayId"], externalLink["type"],externalLink["howToOpen"],externalLink["tabOpen"]);
-		});
-		
-		ext_label.attr("data-link-id", externalLink["id"]);
-		ext_label.css('cursor', 'pointer');
-		ext_label.attr("class", "label-"+externalLink["id"]);
-		ext_label.click(function(e) {
-			makeExternalLinksEditable(externalLink["externalLinkLabel"], externalLink["id"], externalLink["externalLinkURL"], externalLink["x"], externalLink["y"], externalLink["displayId"], externalLink["type"],externalLink["howToOpen"],externalLink["tabOpen"]);
-		});
-    }
-
-    $("#space").append(link);
-    $("#link").append(ext_label);
-    $("#external-link").remove();
-
-}
-
-//--------- Utility functions -------------
-function createSpaceLinkInfo() {
-    var info = {};
-    info["x"] = storeX;
-    info["y"] = storeY;
-    info["rotation"] = $("#spaceLinkRotation").val();
-    info["linkedSpace"] = $("#linkedSpace").val();
-    info["spaceLinkLabel"] = $("#spaceLinkLabel").val();
-    info["type"] = $("#type").val();
-    return info;
-}
-
-function createExternalLinkInfo() {
-	var info = {};
-	info["x"] = storeX;
-	info["y"] = storeY;
-	info["tabOpen"] = $("#extTabOpen").val();
-	info["type"] = $("#extType").val();
-	info["externalLinkLabel"] = $("#externalLinkLabel").val();
-	info["externalLinkURL"] = $("#externalLink").val();
-	return info;
-}
-
-function createModuleLinkInfo() {
-    var info = {};
-    info["x"] = storeX;
-    info["y"] = storeY;
-    info["rotation"] = $("#moduleLinkRotation").val();
-    info["linkedModule"] = $("#linkedModule").val();
-    info["moduleLinkLabel"] = $("#moduleLinkLabel").val();
-    info["type"] = $("#moduleType").val();
-    return info;
-}
-
-function createTextBlockInfo() {
-    var info = {};
-    info["x"] = storeX;
-    info["y"] = storeY;
-    info["text"] = $("#textContentID").val();
-    info["height"] = $("#textBoxHeightID").val();
-    info["width"] = $("#textBoxWidthID").val();
-    info["textColor"] = $("#textColorID").val();
-    info["borderColor"] = $("#borderColorID").val();
-    return info;
-}
-
-function editTextBlockInfo() {
-    var info = {};
-    info["x"] = storeX;
-    info["y"] = storeY;
-    info["text"] = $("#textContentIDForEdit").val();
-    info["height"] = $("#textBoxHeightIDEdit").val();
-    info["width"] = $("#textBoxWidthIDEdit").val();
-    info["textColor"] = $("#textColorIDEdit").val();
-    info["borderColor"] = $("#borderColorIDEdit").val();
-    return info;
-}
-
-function editModuleLinkInfo() {
-    var info = {};
-    info["x"] = storeX;
-    info["y"] = storeY;
-    info["rotation"] = $("#moduleLinkRotationEdit").val();
-    info["linkedModule"] = $("#moduleLinkIdEdit").val();
-    info["moduleLinkLabel"] = $("#moduleLinkLabelEdit").val();
-    info["type"] = $("#moduleTypeEdit").val();
-    return info;
-}
-
-function editSpaceLinkInfo() {
-    var info = {};
-    info["x"] = storeX;
-    info["y"] = storeY;
-    info["rotation"] = $("#spaceLinkRotationEdit").val();
-    info["linkedSpace"] = $("#spaceLinkIdEdit").val();
-    info["spaceLinkLabel"] = $("#spaceLinkLabelEdit").val();
-    info["type"] = $("#typeSpaceEdit").val();
-    return info;
-}
-
-function editExternalLinkInfo() {
-	var info = {};
-	info["x"] = storeX;
-	info["y"] = storeY;
-	info["tabOpen"] = $("#extTabOpenEdit").val();
-	info["type"] = $("#extTypeEdit").val();
-	info["externalLinkLabel"] = $("#externalLinkLabelEdit").val();
-	info["externalLinkURL"] = $("#externalLinkURLEdit").val();
-	return info;
-}
-
-function makeSpaceLinksEditable(spaceLinkName, spaceLinkId, rotation, selectedSpaceId, posXEdit, posYEdit, displayLinkId, linkType) {
-    $("#spaceLinkInfoLabel").text(spaceLinkName);
-    $("#spaceLinkId").val(spaceLinkId);
-    selectedSpaceLinkId=spaceLinkId;
-    storeX=posXEdit;
-    storeY=posYEdit;
-    $("#spaceLinkInfoLabel").text(spaceLinkName);
-    $("#spaceLinkDisplayId").val(displayLinkId);
-    $("#spaceLinkInfoLabelEdit").text(spaceLinkName);
-    $("#spaceLinkLabelEdit").val(spaceLinkName);
-    $("#spaceLinkId").val(spaceLinkId);
-    $("#spaceLinkIdValueEdit").val(spaceLinkId);
-    $("#spaceLinkRotationEdit").val(rotation);
-    $("#typeSpaceEdit option:selected").prop('selected', false);
-    $('#typeSpaceEdit option[value="'+linkType+'"]').prop("selected", true);
-    $("#spaceLinkIdEdit option:selected").prop('selected', false);
-    $('#spaceLinkIdEdit option[value="'+selectedSpaceId+'"]').prop("selected", true);
-    if(linkType != "IMAGE"){
-    	resetHighlighting(); 
-    }
-    $('[data-link-id="' + spaceLinkId + '"]').css("color", "var(--secondary)");
-    $('img[data-link-id="' + spaceLinkId + '"]').css("border", "solid 1px #c1bb88");
-    $('[data-link-id="unpublished-' + spaceLinkId + '"]').css("color", "var(--secondary)");
-
-    $("#bgImage").on("click", function(e){
-        e.preventDefault();
-        var posX = $(this).position().left;
-        var posY = $(this).position().top;
-        storeX = e.pageX  - $(this).offset().left;
-        storeY = e.pageY  - $(this).offset().top + 25;
-        showSpaceLinkEdit(editSpaceLinkInfo(),false, storeX,storeY);
-    });
-    hideLinkInfoTabs();
-    displayForms("#editSpaceLinkInfo");
-}
-function displayForms(formToShow){
-    drawLinks();
-    $("#space").css("display", "-webkit-box");
-    $(formToShow).css("display", "flex");
-    modalBgImageHeight = parseInt($("#bgImage").css("height"));
-    modalBgImageWidth = parseInt($("#bgImage").css("width"));
-}
-
-function makeModuleLinksEditable(moduleLinkName, moduleLinkId, rotation, selectedModuleId, posXEdit, posYEdit, displayLinkId, linkType) {
-    selectedModuleLinkId=moduleLinkId;
-    storeX=posXEdit;
-    storeY=posYEdit;
-    $("#moduleLinkInfoLabel").text(moduleLinkName);
-    $("#moduleLinkDisplayId").val(displayLinkId);
-    $("#moduleLinkInfoLabelEdit").text(moduleLinkName);
-    $("#moduleLinkLabelEdit").val(moduleLinkName);
-    $("#moduleLinkId").val(moduleLinkId);
-    $("#moduleLinkIdValueEdit").val(moduleLinkId);
-    $("#moduleLinkRotationEdit").val(rotation);
-    $("#moduleTypeEdit option:selected").prop('selected', false);
-    $('#moduleTypeEdit option[value="'+linkType+'"]').prop("selected", true);
-    $("#moduleLinkIdEdit option:selected").prop('selected', false);
-    $('#moduleLinkIdEdit option[value="'+selectedModuleId+'"]').prop("selected", true);
-    resetHighlighting();     
-    $('[data-link-id="' + moduleLinkId + '"]').css("color", "#c1bb88");
-    $('div[data-link-id="' + moduleLinkId + '"]').removeClass("alert-primary");
-    $('div[data-link-id="' + moduleLinkId + '"]').addClass("alert-warning");
-    $('img[data-link-id="' + moduleLinkId + '"]').css("border", "solid 1px #c1bb88");
-
-    $("#bgImage").on("click", function(e){
-        e.preventDefault();
-        var posX = $(this).position().left;
-        var posY = $(this).position().top;  
-        storeX = e.pageX - $(this).offset().left;
-        storeY = e.pageY - $(this).offset().top + 25;
-        showModuleLinkEdit(editModuleLinkInfo(), false, storeX,storeY);
-    });
-    hideLinkInfoTabs();
-    displayForms("#editModuleLinkInfo");
-}
-
-function makeExternalLinksEditable(linkName, linkId, externalLinkURL, posXEdit, posYEdit, displayLinkId, linkType,tabOpenType) {
-    selectedExternalLinkId=linkId;
-    storeX=posXEdit;
-    storeY=posYEdit;
-    $("#externalLinkInfoLabel").text(linkName);
-    $("#externalLinkId").val(linkId);
-    $("#externalLinkDisplayId").val(displayLinkId);
-    $("#externalLinkInfoLabelEdit").text(linkName);
-    $("#externalLinkLabelEdit").val(linkName);
-    $("#externalLinkIdValueEdit").val(linkId);
-    $("#externalLinkURLEdit").val(externalLinkURL);
-    $('#extTypeEdit option[value="'+linkType+'"]').prop("selected", true);
-    $('#extTabOpenEdit option[value="'+tabOpenType+'"]').prop("selected",true);
-    
-    resetHighlighting();
-
-    $('[data-link-id="' + linkId + '"]').css("color", "#c1bb88");
-    $('div[data-link-id="' + linkId + '"]').removeClass("alert-primary");
-    $('div[data-link-id="' + linkId + '"]').addClass("alert-warning");
-    $('img[data-link-id="' + linkId + '"]').css("border", "solid 1px #c1bb88");
-
-    $("#bgImage").on("click", function(e){
-        e.preventDefault();
-        var posX = $(this).position().left;
-        var posY = $(this).position().top;    
-        storeX = e.pageX - $(this).offset().left;
-        storeY = e.pageY - $(this).offset().top + 25;
-        showExternalLinkEdit(editExternalLinkInfo(), false, storeX,storeY);
-    });
-    hideLinkInfoTabs();
-    displayForms("#editExternalLinkInfo");
-}
-
-function makeTextBlockEditable(blockDisplayId,blockId,text,posX,posY,width,height, textColor, borderColor){
-    selectedTextBlockId=blockId;
-    storeX=posX;
-    storeY=posY;
-    $("#textBlockId").val(blockId);
-    $("#textBlockXEdit").val(posX);
-    $("#textBlockYEdit").val(posY);
-    $("#textBlockDisplayId").val(blockDisplayId);
-    $("#textBoxWidthIDEdit").val(width);
-    $("#textBoxHeightIDEdit").val(height);
-    $("#textContentIDForEdit").val(text);
-    $("#textColorIDEdit").val(textColor);
-    $("#borderColorIDEdit").val(borderColor);
-    resetHighlighting();
-    $("#bgImage").on("click", function(e){
-        e.preventDefault();
-        var posX = $(this).position().left;
-        var posY = $(this).position().top;    
-        storeX = e.pageX - $(this).offset().left;
-        storeY = e.pageY - $(this).offset().top + 25;
-        showTextBlockEdit(editTextBlockInfo());
-    });
-    hideLinkInfoTabs();
-    displayForms("#editTextBlockInfo");
-}
-
-function resetHighlighting() {
-    // reset icon links
-    $('[data-link-id]').css("color", "red");
-
-    // reset alert links
-    $('div[data-link-id]').removeClass("alert-warning");
-    $('div[data-link-id]').addClass("alert-primary");
-
-    // reset image links
-    $('img[data-link-id]').css("border-width", "0");
-}
-
-function getTextArea(x,y) {
-    var posX = $("#bgImage").position().left;
-    var posY = $("#bgImage").position().top;
-    var text = $('<span id="text"><textarea id="textB" name="textBlock" type="textarea" class="textBlock" style="resize:both; background: rgba(0, 0, 0, 0.4);"></textarea></span>');
-    text.css('position', 'absolute');
-    text.css('left', x + posX);
-    text.css('top', y);
-    $("#space").append(text);
-    
-    var textB = $('#textB')[0],
-    tHeight = textB.clientHeight,
-    tWidth = textB.clientWidth;
-    
-    var height = modalBgImageHeight;
-    var width = modalBgImageWidth;
-    
-    $("#textBoxWidthID").val(tWidth);
-    $("#textBoxHeightID").val(tHeight);
-    textB.onmouseup = function (e) {
-        if (tHeight !== textB.clientHeight || tWidth !== textB.clientWidth ) {
-            tHeight = textB.clientHeight;
-            tWidth = textB.clientWidth;
-            let percentileHeight = (tHeight*100)/height;
-            let percentileWidth = (tWidth*100)/width;
-            $("#textBoxWidthID").val(percentileWidth);
-            $("#textBoxHeightID").val(percentileHeight);
-            $("#textContentID").val(textB.value);
-        }
-    };
-    var percentileHeight = (tHeight*100)/height;
-    var percentileWidth = (tWidth*100)/width;
-    $("#textBoxWidthID").val(percentileWidth);
-    $("#textBoxHeightID").val(percentileHeight);
-    $("#textContentID").val(textB.value);
-}
-
-$(function(){
-    $("#deleteSpace").click(function(){
-        var spaceId = "${space?.id}";
-        checkSpaceLinkPresent('[(${space?.id})]', '[(@{'/staff/'})]', '[('?'+${_csrf.parameterName}+'='+${_csrf.token})]',$('#headerSpaceValue'));
-    });
-
-        $( document ).ready(function() {
-            onPageReady($("#deleteSpace"), $('#confirm-space-delete'));
-            if ($("div#outgoingLinks a").length < 2) {
-                $("#noLinksOnSpace").show()
-            }
-            if ($("div#incomingLinks a").length < 2) {
-                $("#noLinksToSpace").show()
-            }
-        });
-
-        // -------- buttons that open modals (e.g. to create space links) ------
-
-        $("#addTextBlock").click(function(e){
-            hideLinkInfoTabs();
-            $("#changeBgImgAlert").hide();
-            $("#bgImage").off("click");
-            $("#bgImage").on("click", function(e){
-                e.preventDefault();
-                $("#external-arrow").remove();
-                $("#space_label").remove();
-                $("#link").remove();
-                $("#text").remove();
-                var posX = $(this).position().left;
-                var posY = $(this).position().top;    
-                storeX = e.pageX - $(this).offset().left;
-                storeY = e.pageY - $(this).offset().top + 25;
-                getTextArea(storeX,storeY);
-            });
-            hideLinkInfoTabs();
-            displayForms("#addTextFormInfo");
-        });
-
-        $("#addSpaceLinkButton").click(function(e) {
-            $("#createExternalLinkAlert").hide();
-            $("#changeBgImgAlert").hide();
-            $("#bgImage").off("click");
-            $("#bgImage").on("click", function(e){
-                e.preventDefault();
-                $("#external-arrow").remove();
-                $("#space_label").remove();
-                $("#link").remove();
-                var icon;
-                var posX = $(this).position().left;
-                var posY = $(this).position().top;    
-                storeX = e.pageX - $(this).offset().left;
-                storeY = e.pageY - $(this).offset().top + 25;
-                showSpaceLink(createSpaceLinkInfo(), false, storeX, storeY);
-            });
-            hideLinkInfoTabs();
-            displayForms("#createSpaceLinkAlert");
-        });
-
-        $("#addModuleLinkButton").click(function(e) {
-            $("#createModuleLinkAlert").hide();
-            $("#bgImage").off("click");
-            $("#bgImage").on("click", function(e){
-                e.preventDefault();
-                $("#external-arrow").remove();
-                $("#module_label").remove();
-                $("#link").remove();
-                var icon;
-                var posX = $(this).position().left;
-                var posY = $(this).position().top;    
-                storeX = e.pageX - $(this).offset().left;
-                storeY = e.pageY - $(this).offset().top + 25;
-                showModuleLink(createModuleLinkInfo(), false, storeX, storeY);
-            });
-            hideLinkInfoTabs();
-            displayForms("#createModuleLinkAlert");
-        }); 
-
-        $("#addExternalLinkButton").click(function(e) {
-            $("#createSpaceLinkAlert").hide();
-            $("#changeBgImgAlert").hide();
-            $("#bgImage").off("click");
-            $("#bgImage").on("click", function(e){
-                e.preventDefault();
-                $("#link").remove();
-                $("#external-arrow").remove();
-                $("#ext_label").remove();
-                var icon;
-                var posX = $(this).position().left
-                var posY = $(this).position().top;
-                storeX = e.pageX - $(this).offset().left;
-                storeY = e.pageY - $(this).offset().top + 25;
-                showExternalLinks(createExternalLinkInfo(), false, storeX, storeY);
-            });
-            hideLinkInfoTabs();
-            displayForms("#createExternalLinkAlert");
-        });
-
-        $('#changeBgImgButton').click(function(file) {
-            $("#createSpaceLinkAlert").hide();
-            $("#createExternalLinkAlert").hide();
-            drawLinks();
-            $("#changeBgImgAlert").show();          
-        });
-
-
-        // ----------- submit buttons (e.g. to create space links) ------------------
-
-        $("#addTextBlockBtn").click(function(e) {
-            e.preventDefault();
-            $("#space").scrollTop(0);
-            if (storeX == undefined || storeY == undefined) {
-                $("#errorMsg").text("Please click on the image to specify where the new block should be located.")
-                $('#errorAlert').show();
-                return;
-            }
-
-            $("#addTextX").val(storeX);
-            $("#addTextY").val(storeY - 25);
-
-            var form = $("#addTextForm");
-            var formData = new FormData(form[0]);
-
-            var textBlockInfo = createTextBlockInfo();
-
-            $.ajax({
-                type: "POST",
-                url: "[(@{'/staff/space/'+${space.id}+'/textblock?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
-                cache       : false,
-                contentType : false,
-                processData : false,
-                enctype: 'multipart/form-data',
-                data: formData, 
-                beforeSend: function () {
-                    $(".saveLoader").show();
-                    },
-               	complete: function () {
-                    $(".saveLoader").hide();
-                    },
-                success: function(data) {
-                    var linkData = JSON.parse(data);
-                    $("#bgImage").off("click");
-                    textBlockInfo["id"] = linkData["id"];
-                    textBlockInfo["displayId"]=linkData["displayId"];
-                    textBlockInfo["x"]=linkData["x"];
-                    textBlockInfo["y"]=linkData["y"];
-                    showTextBlock(textBlockInfo, true);
-                    $("#errorMsg").text("");
-                    $('#errorAlert').hide();
-                    $("#addTextFormInfo").hide();
-                    $("#space").css("display", "none");
-                    form[0].reset();
-                    drawLinks();
-                }
-            });
-        });
-        
-        $("#editTextBlockBtn").click(function(e) {
-            e.preventDefault();
-            $("#space").scrollTop(0);
-            var blockId = $("#textBlockId").val();
-            if (storeX == undefined || storeY == undefined) {
-                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
-                $('#errorAlert').show();
-                return;
-            }
-            var linkedTextBlock = $("#textBlockId").val();
-            $("#textBlockXEdit").val(storeX);
-            $("#textBlockYEdit").val(storeY - 25);
-            var form = $("#editTextBlockForm");
-            var formData = new FormData(form[0]);
-            var textBlockInfo = editTextBlockInfo();
-            $.ajax({
-                type: "POST",
-                url: "[(@{'/staff/space/link/textblock/'+${space.id}+'?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
-                cache: false,
-                contentType : false,
-                processData : false,
-                enctype: 'multipart/form-data',
-                data: formData,
-                success: function(data) {
-                    var linkData = JSON.parse(data);
-                    $("#bgImage").off("click");
-                    textBlockInfo["id"] = linkData["id"];
-                    textBlockInfo["text"]=linkData["textContent"];
-                    textBlockInfo["x"]=linkData["x"];
-                    textBlockInfo["y"]=linkData["y"];
-                    textBlockInfo["height"]=linkData["height"];
-                    textBlockInfo["width"]=linkData["width"];
-                    textBlockInfo["textColor"] = linkData["textColor"];
-                    showTextBlockEdit(textBlockInfo);
-                    hideLinkInfoTabs();
-                    $("#space").css("display", "none");
-                    selectedTextBlockId=undefined;
-                    drawLinks();
-                }
-            });
-        });
-
-        $("#createSpaceLinkBtn").click(function(e) {
-            e.preventDefault();
-            $('#errorAlert').hide();
-            $("#space").scrollTop(0);
-            var label = $("#spaceLinkLabel").val();
-            var spaceName = $("#linkedSpace option:selected").text();
-            var type = $("#type option:selected").text();
-
-            if (label == undefined || label == "") {
-                $("#errorMsg").text("Please fill the Label field before submitting.")
-                $('#errorAlert').show();
-                return;
-            }
-            if (spaceName == undefined || spaceName == "Choose...") {
-                $("#errorMsg").text("Please select a space in Linked Space dropdown.")
-                $('#errorAlert').show();
-                return;
-            }
-            
-            if (type == undefined || type == "Choose...") {
-                $("#errorMsg").text("Please select a link type in Type dropdown.")
-                $('#errorAlert').show();
-                return;
-            }
-
-            if (storeX == undefined || storeY == undefined) {
-                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
-                $('#errorAlert').show();
-                return;
-            }
-
-            $("#spaceLinkX").val(storeX);
-            $("#spaceLinkY").val(storeY - 25);
+	
+	function generateTextBlock(block,spanId,divId,isModal, posX, posY, posXModal, posYModal, imageHeight, imageWidth){
+	    if(block != null){
+	        var height = (block.height*imageHeight)/100;
+	        var width = (block.width*imageWidth)/100;
+	        var textBlock = $('<span id="'+spanId+block.spaceTextBlock.id+'" data-link-id="'+block.spaceTextBlock.id+'" data-blockId="'+block.id+'" data-text="'+block.spaceTextBlock.text+'" data-width="'+block.width+'"  data-height="'+block.height+'" class="textBlockClass spaceLink-'+block.spaceTextBlock.id+'"><textarea class="textBlock" style="height:'+height+'px; width:'+width+'px; resize:none; background: rgba(0, 0, 0, 0.4); color:'+block.textColor+'; border-color: '+block.borderColor+';" readonly type="textarea">'+block.spaceTextBlock.text+'</textarea></span>');
+	        setLinkPosition(textBlock,block,false,isModal,false, posX, posY, posXModal, posYModal, true);
+	        $(divId).append(textBlock);
+	        if(spanId === "textBlockId-"){
+	            $('#'+spanId+block.spaceTextBlock.id).css('cursor', 'pointer');
+	            $('#'+spanId+block.spaceTextBlock.id).click(function(e) {  
+	                var blockData = $('#'+spanId+block.spaceTextBlock.id).data();
+	                makeTextBlockEditable(blockData["blockid"],blockData["linkId"],blockData["text"],block.positionX,block.positionY,blockData["width"],blockData["height"], block.textColor, block.borderColor);
+	            });
+	        }
+	        
+	        if(block.spaceTextBlock.id === selectedTextBlockId) {
+	        	var textModalBlock = $("#textModalBlockId-"+selectedTextBlockId).find("textarea")[0];
+	        	
+	        	tHeight = textModalBlock.clientHeight;
+	        	tWidth = textModalBlock.clientWidth;
+	            
+	            var height = modalBgImageHeight;
+	            var width = modalBgImageWidth;
+	            textModalBlock.style["resize"] = "both";
+	            textModalBlock.onmouseup = function (e) {
+		            if (tHeight !== textModalBlock.clientHeight || tWidth !== textModalBlock.clientWidth ) {
+		                tHeight = textModalBlock.clientHeight;
+		                tWidth = textModalBlock.clientWidth;
+		                let percentileHeight = (tHeight*100)/height;
+		                let percentileWidth = (tWidth*100)/width;
+		                $("#textBoxWidthIDEdit").val(percentileWidth);
+		                $("#textBoxHeightIDEdit").val(percentileHeight);
+		                $("#textContentIDForEdit").val(textModalBlock.value);
+		            }
+	            };
+	        }
+	    }
+	}
+	
+	function drawLinks(){
+	    $(".Info_cz_Class").remove();
+	    $(".imageLink").remove();
+	    $(".alertLink").remove();
+	    $(".ellipse_class").remove();
+	    $(".unpublishedSpaceClass").remove();
+	    $(".textBlockClass").remove();
+	    $(".deletedSpaceClass").remove();
+	    
+	    $.ajax({
+	        type: "GET",
+	        url: "[(@{'/staff/space/'+${space?.id}+'/links'})]",
+	        cache       : false,
+	        contentType : false,
+	        processData : false,
+	        beforeSend: function () {
+	            $("#loader").show();
+	            },
+	       	complete: function () {
+	            $("#loader").hide();
+	            },
+	        success: function(data) {
+	            var spaceLinks = data['spaceLinks'];
+	            var externalLinks = data['externalLinks'];
+	            var moduleLinks = data['moduleLinks'];
+	            var textBlocks = data['textBlocks'];
+	            
+	            var posXModal = $("#bgImage").position().left;
+	            var posYModal = $("#bgImage").position().top;
+	            var posX = $("#main-bgImage").position().left;
+	            var posY = $("#main-bgImage").position().top;
+	            
+	            spaceLinks.forEach(function(link,index){
+	                var spanId= "spacelinkModalId-";
+	                var divId = "#space"
+	                generateSpaceLinks(link,spanId,divId,true, posX, posY, posXModal, posYModal);
+	            })
+	            spaceLinks.forEach(function(link,index){
+	                var spanId= "spacelinkId-";
+	                var divId = "#main-space";
+	                generateSpaceLinks(link,spanId,divId,false, posX, posY, posXModal, posYModal);
+	            })
+	            
+	            moduleLinks.forEach(function(link,index){
+	                var spanId= "moduleModallinkId-";
+	                var divId = "#space";
+	                generateModuleLinks(link,spanId,divId,true, posX, posY, posXModal, posYModal);
+	            })
+	            moduleLinks.forEach(function(link,index){
+	                var spanId= "modulelinkId-";
+	                var divId = "#main-space";
+	                generateModuleLinks(link,spanId,divId,false, posX, posY, posXModal, posYModal);
+	            })
+	            
+	            externalLinks.forEach(function(link,index){
+	                var spanId= "externalModallinkId-";
+	                var divId = "#space";
+	                generateExternalLinks(link,spanId,divId,true, posX, posY, posXModal, posYModal);
+	            })
+	            
+	            externalLinks.forEach(function(link,index){
+	                var spanId= "externallinkId-";
+	                var divId = "#main-space";
+	                generateExternalLinks(link,spanId,divId,false, posX, posY, posXModal, posYModal);
+	            })
+	            
+	            textBlocks.forEach(function(block,index){
+	                var spanId= "textModalBlockId-";
+	                var divId = "#space";
+	                var imageHeight = modalBgImageHeight;
+	                var imageWidth = modalBgImageWidth;
+	                generateTextBlock(block,spanId,divId,true, posX, posY, posXModal, posYModal, imageHeight, imageWidth);
+	            })
+	            
+	            textBlocks.forEach(function(block,index){
+	                var spanId= "textBlockId-";
+	                var divId = "#main-space";
+	                var imageHeight = parseInt($("#main-bgImage").css("height"));
+	                var imageWidth = parseInt($("#main-bgImage").css("width"));
+	                generateTextBlock(block,spanId,divId,false, posX, posY, posXModal, posYModal, imageHeight, imageWidth);
+	            })
+	        }
+	    });
+	}
+	
+	//--------- show links functions --------------
+	function showTextBlock(textBlock, show){
+	    $("#textB").remove();
+	    $("#text").remove();
+	    var posX = $("#bgImage").position().left;
+	    var posY = $("#bgImage").position().top;
+	    var imageHeight = modalBgImageHeight;
+	    var imageWidth = modalBgImageWidth;
+	    var textArea = $("<textarea class='textBlock' type='textarea'></textarea>");
+	    textArea.css('width', (textBlock["width"]*imageWidth)/100);
+	    textArea.css('height', (textBlock["height"]*imageHeight)/100);
+	    textArea.css('resize', 'both');
+	    textArea.text(textBlock["text"]);
+	    var spaceTextBlock;
+	    spaceTextBlock = $('<span class="textBlockClass spaceLink-' + textBlock["id"] + '" data-link-id="' + textBlock["id"] + '"></span>');
+	    spaceTextBlock.css('position', 'absolute');
+	    spaceTextBlock.css('left', textBlock["x"] + posX);
+	    spaceTextBlock.css('top', textBlock["y"] + posY);
+	    spaceTextBlock.css('font-size', "12px");
+	
+	    if (textBlock["id"]) {
+	        spaceTextBlock.attr("data-link-id", textBlock["id"]);
+	        spaceTextBlock.css('cursor', 'pointer');
+	        spaceTextBlock.click(function(e) {
+	            makeTextBlockEditable(textBlock["displayId"], textBlock["id"], textBlock["text"], textBlock["x"], textBlock["y"], textBlock["width"], textBlock["height"]);
+	        });
+	    }
+	    spaceTextBlock.append(textArea);
+	    $("#space").append(spaceTextBlock);
+	}
+	
+	function showTextBlockEdit(textBlock){
+	    textBlock["x"]=storeX;
+	    textBlock["y"]=storeY;
+	    var selectedClass = '#textModalBlockId-'+selectedTextBlockId;
+	    var selectedTextArea = "#textModalBlockId-"+selectedTextBlockId+" .textBlock";
+	    var posX = $("#bgImage").position().left;
+	    var posY = $("#bgImage").position().top;
+	    var imageHeight = modalBgImageHeight;
+	    var imageWidth = modalBgImageWidth;
+	    $(selectedClass).css('left', textBlock["x"]+posX);
+	    $(selectedClass).css('top', textBlock["y"]);
+	    $(selectedTextArea).css('width', (textBlock["width"]*imageWidth)/100);
+	    $(selectedTextArea).css('height', (textBlock["height"]*imageHeight)/100);   
+	    $(selectedTextArea).text(textBlock["text"]);
+	    $(selectedClass).css('color', textBlock["textColor"]);
+	    $(selectedClass).css('border-color', textBlock["borderColor"]);
+	}
+	
+	function showSpaceLink(spaceLink, show, x, y) {
+	    $("#space_label").remove();
+	    $("#link").remove();
+	    $("#undefined").remove();
+	    var posX = $("#bgImage").position().left;
+	    var posY = $("#bgImage").position().top;
+	    var space_label = $("<p id='space_label' class='tooltiptext'></p>");
+	    space_label.text(spaceLink["spaceLinkLabel"]);
+	
+	    var link;
+	    if (spaceLink["type"] == "ALERT") {
+	        link = $('<div id="link" class="alert alert-primary alertLink spaceLink-"' + spaceLink["id"] + '" role="alert" data-link-id="' + spaceLink["id"] + '"><p>'+spaceLink["spaceLinkLabel"]+'</p></div>');
+	    } else if(spaceLink["type"] == "IMAGE" && linkIcon) {
+	        link = $('<div id="link" class="spaceLink-' + spaceLink["id"] + '" data-link-id="' + spaceLink["id"] + '"><img src="' + linkIcon + '"></div>');
+	    } else {
+	        $(space_label).css({
+	            'font-size': "12px",
+	            'transform': 'rotate(0deg)',
+	            'color': 'grey'
+	        });
+	        link = $('<span id="' + spaceLink["id"] +'" data-link-id="' + spaceLink["id"] + '" class="spaceLink-' + spaceLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-move Icon_awesome_info_staff_c "></span></div></span>');
+	    }
+	    if(show) {
+	        var unpublishedSpaceElement;
+	        if(spaceLink["linkedSpaceStatus"]=="UNPUBLISHED"){
+	            unpublishedSpaceElement=$('<span data-link-id = "unpublished-' + spaceLink["id"] + '" class="icon-warning secondary fa-lg unpublishedSpaceClass unpublishedClass-' + spaceLink["id"] + '" style="color: var(--secondary);"></span>')
+	            unpublishedSpaceElement.css('position', 'absolute');
+	            unpublishedSpaceElement.css('left', x + posX + displaceUnpublishedOnX);
+	            unpublishedSpaceElement.css('top', y + posY - displaceUnpublishedOnY);
+	            unpublishedSpaceElement.css('transform', 'rotate(' +$('#spaceLinkRotation').val()+ 'deg)');
+	            unpublishedSpaceElement.css('font-size', "24px");
+	        }else{
+	            $('[data-link-id="unpublished-' + spaceLink["id"] + '"]').remove();
+	        } 
+	        link.css('top', spaceLink["y"] + posY);
+	    } else {
+	    	link.css('top', spaceLink["y"]);
+	    }
+	
+	    link.css('position', 'absolute');
+	    link.css('left', spaceLink["x"] + posX);
+	    link.css('color', 'rgba(128,128,128,1)');
+	    link.css('transform', 'rotate(' +$('#spaceLinkRotation').val()+ 'deg)');
+	    link.css('font-size', "12px");
+	    if (spaceLink["id"]) {
+	        link.attr("class", spaceLink["id"]);
+	        link.css('cursor', 'pointer');
+	        link.css('color', 'rgba(128,128,128,1)');
+	        link.click(function(e) {
+	            makeSpaceLinksEditable(spaceLink["spaceLinkLabel"], spaceLink["id"], spaceLink["rotation"], spaceLink["linkedSpace"], spaceLink["x"], spaceLink["y"], spaceLink["displayId"], spaceLink["type"]);
+	        });
+	
+	        space_label.attr("data-link-id", spaceLink["id"]);
+	        space_label.attr("class", "tooltiptext label-"+spaceLink["id"]);
+	        space_label.css('cursor', 'pointer');
+	        space_label.click(function(e) {
+	            makeSpaceLinksEditable(spaceLink["spaceLinkLabel"], spaceLink["id"], spaceLink["rotation"], spaceLink["linkedSpace"], spaceLink["x"], spaceLink["y"], spaceLink["displayId"], spaceLink["type"]);
+	        });
+	    }
+	
+	    $("#space").append(link);
+	    $("#space").append(unpublishedSpaceElement);
+	    $("#link").append(space_label);
+	}
+	
+	function showModuleLink(moduleLink, show, x, y) {
+	    $("#module_label").remove();
+	    $("#link").remove();
+	    $("#undefined").remove();
+	    var posX = $("#bgImage").position().left;
+	    var posY = $("#bgImage").position().top;
+	    var module_label = $("<p id='module_label' class='tooltiptext'></p>");
+	    module_label.text(moduleLink["moduleLinkLabel"]);
+	
+	    var link;
+	    if (moduleLink["type"] == "ALERT") {
+	        link = $('<div id="link" class="alert alert-primary alertLink moduleLink-"' + moduleLink["id"] + '" role="alert" data-link-id="' + moduleLink["id"] + '"><p>'+moduleLink["moduleLinkLabel"]+'</p></div>');
+	    } else if(moduleLink["type"] == "IMAGE" && moduleLinkIcon) {
+	        link = $('<div id="link" class="spaceLink-' + moduleLink["id"] + '" data-link-id="' + moduleLink["id"] + '"><img src="' + moduleLinkIcon + '"></div>');
+	    } else{ 
+	        $(module_label).css({
+	            'position': 'absolute',
+	            'font-size': "10px",
+	            'transform': 'rotate(0deg)',
+	            'color': 'red'
+	        });
+	        link = $('<span id="' + moduleLink["id"] +'" data-link-id="' + moduleLink["id"] + '" class="moduleLink-' + moduleLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-info Icon_awesome_info_staff_m"></span></div></span>');
+	    } 
+	    if(show) {
+	        link.find("div").css('fill', 'red');
+	        link.css('top', moduleLink["y"] + posY);
+	    } else {
+	    	link.css('top', moduleLink["y"]);
+	    }
+	    link.css('position', 'absolute');
+	    link.css('left', moduleLink["x"] + posX);
+	    link.css('color', 'red');
+	    link.css('transform', 'rotate(' +$('#moduleLinkRotation').val()+ 'deg)');
+	    link.css('font-size', "12px");
+	
+	    if (moduleLink["id"]) {
+	        link.attr("data-link-id", moduleLink["id"]);
+	        link.css('cursor', 'pointer');
+	        link.click(function(e) {
+	            makeModuleLinksEditable(moduleLink["moduleLinkLabel"], moduleLink["id"], moduleLink["rotation"], moduleLink["linkedModule"], moduleLink["x"], moduleLink["y"], moduleLink["displayId"], moduleLink["type"]);
+	        });
+	        module_label.attr("data-link-id", moduleLink["id"]);
+	        module_label.css('cursor', 'pointer');
+	        module_label.attr("class", "tooltiptext label-"+moduleLink["id"]);
+	        module_label.click(function(e) {
+	            makeModuleLinksEditable(moduleLink["moduleLinkLabel"], moduleLink["id"], moduleLink["rotation"], moduleLink["linkedModule"], moduleLink["x"], moduleLink["y"], moduleLink["displayId"], moduleLink["type"]);
+	        });
+	    }
+	
+	    $("#space").append(link);
+	    $("#link").append(module_label);
+	}
+	
+	function showModuleLinkEdit(moduleLink, show, posX, posY) {
+	    moduleLink["x"]=storeX;
+	    moduleLink["y"]=storeY;
+	    var selectedLinkClass = '#moduleModallinkId-'+selectedModuleLinkId;
+	    var selectedLabelClass = '.label-'+selectedModuleLinkId;
+	    updateLinkProperties(selectedLinkClass,selectedLabelClass,moduleLink["rotation"],posX,posY,moduleLink["moduleLinkLabel"]);
+	}
+	
+	
+	function showSpaceLinkEdit(spaceLink, show, posX, posY) {
+	    spaceLink["x"]=storeX;
+	    spaceLink["y"]=storeY;
+	    var selectedLinkClass = '#spacelinkModalId-'+selectedSpaceLinkId;
+	    var selectedLabelClass = '.label-'+selectedSpaceLinkId;
+	    var selectedUnpublishedIconClass = '.unpublishedClass-'+selectedSpaceLinkId;
+	    if(show) {
+	        var unpublishedSpaceElement;
+	        if(spaceLink["linkedSpaceStatus"]=="UNPUBLISHED"){
+	            unpublishedSpaceElement=$('<span data-link-id = "unpublished-' + spaceLink["id"] + '" class="icon-warning secondary unpublishedSpaceClass unpublishedClass-' + spaceLink["id"] + '></span>')
+	            unpublishedSpaceElement.css('position', 'absolute');
+	            unpublishedSpaceElement.css('left', posX + displaceUnpublishedOnX);
+	            unpublishedSpaceElement.css('top', posY - displaceUnpublishedOnY);
+	            unpublishedSpaceElement.css('transform', 'rotate(' +spaceLink["rotation"]+ 'deg)');
+	            unpublishedSpaceElement.css('font-size', "24px");
+	            $("#space").append(unpublishedSpaceElement);
+	        }else{
+	            $('[data-link-id="unpublished-' + spaceLink["id"] + '"]').remove();
+	        }    
+	    }
+	    $(selectedUnpublishedIconClass).css({ 'transform': 'rotate(' + parseInt(spaceLink["rotation"]) + 'deg)'});
+	    $(selectedUnpublishedIconClass).css({ 'position': 'absolute'});
+	    $(selectedUnpublishedIconClass).css({ 'left': posX + displaceUnpublishedOnXModal});
+	    $(selectedUnpublishedIconClass).css({ 'top': posY - displaceUnpublishedOnYModal});
+	    updateLinkProperties(selectedLinkClass,selectedLabelClass,spaceLink["rotation"],posX,posY,spaceLink["spaceLinkLabel"]);
+	}
+	
+	function showExternalLinkEdit(externalLink, show, posX, posY) {
+	    externalLink["x"]=storeX;
+	    externalLink["y"]=storeY;
+	    var selectedLinkClass = '#externalModallinkId-'+selectedExternalLinkId;
+	    var selectedLabelClass = '.label-'+selectedExternalLinkId;
+	    updateLinkProperties(selectedLinkClass,selectedLabelClass,externalLink["rotation"],posX,posY,externalLink["externalLinkLabel"]);
+	}
+	
+	function updateLinkProperties(selectedLinkClass,selectedLabelClass,rotation,x,y,linkLabel, show){
+	    var posX, posY;
+	    if(show) {
+	        posX = $("#main-bgImage").position().left;
+	        posY = $("#main-bgImage").position().top;
+	    }
+	    else{
+	        posX = $("#bgImage").position().left;
+	        posY = 0
+	    }
+	    $(selectedLinkClass).css({ 'transform': 'rotate(' + rotation + 'deg)'});
+	    $(selectedLinkClass).css({ 'position': 'absolute'});
+	    $(selectedLinkClass).css({ 'left': x + posX});
+	    $(selectedLinkClass).css({ 'top': y + posY});
+	    $(selectedLabelClass+' span').remove();
+	    $(selectedLabelClass).append('<span class = "tooltiptext" style="fill: grey;">' + linkLabel + '</span>');
+	    feather.replace();    
+	}
+	
+	function hideLinkInfoTabs(){
+	    $("#editExternalLinkInfo").hide();
+	    $("#editSpaceLinkInfo").hide();
+	    $("#editModuleLinkInfo").hide();
+	    $("#editTextBlockInfo").hide();
+	    $("#createExternalLinkAlert").hide();
+	    $("#createSpaceLinkAlert").hide();
+	    $("#createModuleLinkAlert").hide();
+	    $("#errorMsg").text("");
+	    $('#errorAlert').hide();
+	}
+	
+	function showExternalLinks(externalLink, show, x, y) {
+	    $("#ext_label").remove();
+	    $("#link").remove();
+	    $("#undefined").remove();
+	    var posX = $("#bgImage").position().left;
+	    var posY = $("#bgImage").position().top;
+	    var ext_label = $("<p id='ext_label' class='tooltiptext'></p>");
+	    ext_label.text(externalLink["externalLinkLabel"]);
+	
+	    var link;
+	    if(externalLink["type"] == "IMAGE" && externalLinkIcon) {
+	        link = $('<div id="link" data-link-id="' + externalLink["id"] + '"><img src="' + externalLinkIcon + '"></div>');
+	    } else {
+	        $(ext_label).css({
+	            'position': 'absolute',
+	            'font-size': "12px",
+	            'transform': 'rotate(0deg)',
+	            'color': 'blue'
+	        });
+	        link = $('<span id="' + externalLink["id"] +'" data-link-id="' + externalLink["id"] + '"  class="externalLink-' + externalLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-ext-link Icon_awesome_info_staff_e"></span></div></span>');
+	    }
+	    
+	    if(show) {
+	        link.css('top', externalLink["y"] + posY);
+	    } else {
+	    	link.css('top', externalLink["y"]);
+	    }
+	
+	    link.css('position', 'absolute');
+	    link.css('left', externalLink["x"] + posX);
+	    link.css('color', 'blue');
+	    link.css('font-size', "12px");
+	
+	    if (externalLink["id"]) {
+			link.attr("data-link-id", externalLink["id"]);
+			link.css('cursor', 'pointer');
+			link.attr('href', externalLink["url"]);
+			link.click(function(e) {
+				makeExternalLinksEditable(externalLink["externalLinkLabel"], externalLink["id"], externalLink["externalLinkURL"], externalLink["x"], externalLink["y"], externalLink["displayId"], externalLink["type"],externalLink["howToOpen"],externalLink["tabOpen"]);
+			});
 			
-            var form = $("#createSpaceLinkForm");
-            var label = $("#spaceLinkLabel").val();
-            var spaceName = $("#linkedSpace option:selected").text();
-            var spaceId = $("#linkedSpace option:selected").val(); 
-            var formData = new FormData(form[0]);
-            var spaceLinkInfo = createSpaceLinkInfo();
-            $.ajax({
-                type: "POST",
-                url: "[(@{'/staff/space/'+${space?.id}+'/spacelink?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
-                cache       : false,
-                contentType : false,
-                processData : false,
-                enctype: 'multipart/form-data',
-                data: formData,
-                beforeSend: function () {
-                    $(".saveLoader").show();
-                    },
-               	complete: function () {
-                    $(".saveLoader").hide();
-                    },
-                success: function(data) {
-                    var linkData = JSON.parse(data);
-                    $("#bgImage").off("click");
-                    spaceLinkInfo["id"] = linkData["id"];
-                    spaceLinkInfo["displayId"]=linkData["displayId"];
-                    spaceLinkInfo["x"]=linkData["x"];
-                    spaceLinkInfo["y"]=linkData["y"];
-                    spaceLinkInfo["linkedSpaceStatus"]=linkData["linkedSpaceStatus"];
-                    showSpaceLink(spaceLinkInfo, true);
-                    $("#space_label").attr("id","");
-                    $("#link").attr("id","");
-                    $("#createSpaceLinkAlert").hide();  
-                    $("#errorMsg").text("");
-                    $('#errorAlert').hide();
-                    $("#noLinksOnSpace").hide();
-                    $("."+linkData["id"]).remove();
-                    form[0].reset();
-                    var newSpaceLinkURL = [[@{|/staff/space/|}]]+spaceId;
-                    $("#outgoingLinks").append("<a href="+newSpaceLinkURL+" style='padding: .25rem .25rem;' class='list-group-item' id="+linkData["id"]+">"+label+"  &nbsp;-> &nbsp;"+spaceName+"</a>");
-                    if (spaceName == "${space?.name}") {
-                        $("#noLinksToSpace").hide();
-                        $("div#incomingLinks").append("<a href="+newSpaceLinkURL+" style='padding: .25rem .25rem;' class='list-group-item' id="+linkData["id"]+">"+spaceName+"</a>");
-                    }
-                    $("#space").css("display", "none");
-                    linkIcon=null;
-                    drawLinks();
-                }
-            });
-        });
-
-        $("#createModuleLinkBtn").click(function(e) {
-            e.preventDefault();
-            $("#space").scrollTop(0);
-            $('#errorAlert').hide();
-            
-            if (storeX == undefined || storeY == undefined) {
-                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
-                $('#errorAlert').show();
-                return;
-            }
-
-            var linkedModules = $("#linkedModule").val();
-            var moduleLabel = $("#moduleLinkLabel").val();
-            var type = $("#moduleType option:selected").text();
-            
-            if (moduleLabel == undefined || moduleLabel == "") {
-                $("#errorMsg").text("Please enter the label for module.")
-                $('#errorAlert').show();
-                return;
-            }
-
-            if (linkedModules == undefined || linkedModules == "Choose...") {
-                $("#errorMsg").text("Please select linked modules.")
-                $('#errorAlert').show();
-                return;
-            }
-            
-            if (type == undefined || type == "Choose...") {
-                $("#errorMsg").text("Please select a link type in Type dropdown.")
-                $('#errorAlert').show();
-                return;
-            }
-
-            $("#moduleLinkX").val(storeX);
-            $("#moduleLinkY").val(storeY - 25);
-
-            var form = $("#createModuleLinkForm");
-            var formData = new FormData(form[0]);
-
-            var moduleLinkInfo = createModuleLinkInfo();
-
-            $.ajax({
-                type: "POST",
-
-                url: "[(@{'/staff/space/'+${space?.id}+'/modulelink?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
-                cache       : false,
-                contentType : false,
-                processData : false,
-                enctype: 'multipart/form-data',
-                data: formData,
-                beforeSend: function () {
-                    $(".saveLoader").show();
-                    },
-               	complete: function () {
-                    $(".saveLoader").hide();
-                    },
-                success: function(data) {
-                    var linkData = JSON.parse(data);
-                    $("#bgImage").off("click");
-                    moduleLinkInfo["id"] = linkData["id"];
-                    moduleLinkInfo["displayId"]=linkData["displayId"];
-                    moduleLinkInfo["x"]=linkData["x"];
-                    moduleLinkInfo["y"]=linkData["y"];
-                    showModuleLink(moduleLinkInfo, true);
-                    $("#module_label").attr("id","");
-                    $("#link").attr("id","");
-                    $("#createModuleLinkAlert").hide();
-                    $("#errorMsg").text("");
-                    $('#errorAlert').hide();
-                    $("."+linkData["id"]).remove();
-                    form[0].reset();
-                    $("#space").css("display", "none");
-                    moduleLinkIcon=null;
-                    drawLinks();
-                }
-            });
-        });
-        $("#editModuleLinkBtn").click(function(e) {
-            e.preventDefault();
-            var linkId = $("#moduleLinkIdEdit").val();
-            if(storeX == undefined || storeY == undefined){
-                $("#errorMsg").text("Please click on the image to specify where the new link should be located.");
-                $('#errorAlert').show();
-                return;    
-            }
-            $("#space").scrollTop(0);
-            var linkedModules = $("#moduleLinkIdEdit").val();
-            $("#moduleLinkXEdit").val(storeX);
-            $("#moduleLinkYEdit").val(storeY - 25);
-            var form = $("#editModuleLinkForm");
-            var formData = new FormData(form[0]);
-            var moduleLinkInfo = editModuleLinkInfo();
-            $.ajax({
-                type: "POST",
-                url: "[(@{'/staff/space/link/module/'+${space?.id}+'?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
-                cache: false,
-                contentType: false,
-                processData: false,
-                enctype: 'multipart/form-data',
-                data: formData,
-                beforeSend: function () {
-                    $(".saveLoader").show();
-                    },
-               	complete: function () {
-                    $(".saveLoader").hide();
-                    },
-                success: function(data){
-                    var linkData = JSON.parse(data);
-                    $("#bgImage").off("click");
-                    moduleLinkInfo["id"] = linkData["id"];
-                    moduleLinkInfo["displayId"]=linkData["displayId"];
-                    moduleLinkInfo["x"]=linkData["x"];
-                    moduleLinkInfo["y"]=linkData["y"];
-                    $('#linkRotation-'+selectedModuleLinkId).val(linkData["rotation"]);
-                    $('#linkLabel-'+selectedModuleLinkId).val(linkData["label"]);
-                    $('#linkType-'+selectedModuleLinkId).val(linkData["dislpayType"]);
-                    $('#moduleLinkTarget-'+selectedModuleLinkId).val(linkData["linkedId"]);
-                    showModuleLinkEdit(moduleLinkInfo, true);
-                    hideLinkInfoTabs();
-                    $("#space").css("display", "none");
-                    selectedModuleLinkId=undefined;
-                    drawLinks();
-                }
-            });
-        });
-
-        $("#editSpaceLinkBtn").click(function(e) {
-            e.preventDefault();
-            var linkId = $("#spaceLinkIdEdit").val();
-            if (storeX == undefined || storeY == undefined) {
-                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
-                $('#errorAlert').show();
-                return;    
-            }
-            $("#space").scrollTop(0);
-            var linkedSpace = $("#spaceLinkIdEdit").val();
-            $("#spaceLinkXEdit").val(storeX);
-            $("#spaceLinkYEdit").val(storeY - 25);
-            
-
-            var form = $("#editSpaceLinkForm");
-            var formData = new FormData(form[0]);
-            var spaceLinkInfo = editSpaceLinkInfo();
-            $.ajax({
-                type: "POST",
-                url: "[(@{'/staff/space/link/space/'+${space?.id}+'?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
-                cache: false,
-                contentType : false,
-                processData : false,
-                enctype: 'multipart/form-data',
-                data: formData,
-                beforeSend: function () {
-                    $(".saveLoader").show();
-                    },
-               	complete: function () {
-                    $(".saveLoader").hide();
-                    },
-                success: function(data) {
-                    var linkData = JSON.parse(data);
-                    $("#main-bgImage").off("click");
-                    spaceLinkInfo["id"] = linkData["id"];
-                    spaceLinkInfo["displayId"]=linkData["displayId"];
-                    spaceLinkInfo["x"]=linkData["x"];
-                    spaceLinkInfo["y"]=linkData["y"];
-                    spaceLinkInfo["linkedSpaceStatus"]=linkData["linkedSpaceStatus"];
-                    showSpaceLinkEdit(spaceLinkInfo, true);
-                    $('#linkRotation-'+selectedSpaceLinkId).val(linkData["rotation"]);
-                    $('#linkLabel-'+selectedSpaceLinkId).val(linkData["label"]);
-                    $('#linkType-'+selectedSpaceLinkId).val(linkData["dislpayType"]);
-                    $('#linkTarget-'+selectedSpaceLinkId).val(linkData["linkedId"]);
-                    hideLinkInfoTabs();
-                    $("#space").css("display", "none");
-                    selectedSpaceLinkId=undefined;
-                    drawLinks();
-                }
-            });
-        });
-
-        $("#editExternalLinkBtn").click(function(e) {
-            e.preventDefault();
-            $("#space").scrollTop(0);
-            var linkId = $("#externalLinkIdEdit").val();
-            if (storeX == undefined || storeY == undefined) {
-                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
-                $('#errorAlert').show();
-                return;
-            }
-            var linkedSpace = $("#externalLinkIdEdit").val();
-            $("#externalLinkXEdit").val(storeX);
-            $("#externalLinkYEdit").val(storeY - 25);
-            var form = $("#editExternalLinkForm");
-            var formData = new FormData(form[0]);
-            var externalLinkInfo = editExternalLinkInfo();
-            $.ajax({
-                type: "POST",
-                url: "[(@{'/staff/space/link/external/'+${space?.id}+'?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
-                cache: false,
-                contentType : false,
-                processData : false,
-                enctype: 'multipart/form-data',
-                data: formData,
-                beforeSend: function () {
-                    $(".saveLoader").show();
-                    },
-               	complete: function () {
-                    $(".saveLoader").hide();
-                    },
-                success: function(data) {
-                    var linkData = JSON.parse(data);
-                    $("#bgImage").off("click");
-                    externalLinkInfo["id"] = linkData["id"];
-                    externalLinkInfo["displayId"]=linkData["displayId"];
-                    externalLinkInfo["x"]=linkData["x"];
-                    externalLinkInfo["y"]=linkData["y"];
-                    $('#linkLabel-'+selectedExternalLinkId).val(linkData["label"]);
-                    $('#linkType-'+selectedExternalLinkId).val(linkData["dislpayType"]);
-                    $('#externalLinkTarget-'+selectedExternalLinkId).val(linkData["url"]);
-                    showExternalLinkEdit(editExternalLinkInfo, true);
-                    hideLinkInfoTabs();
-                    $("#space").css("display", "none");
-                    selectedExternalLinkId=undefined;
-                    drawLinks();
-                }
-            });
-        });
-
-        $("#createExternalLinkBtn").click(function(e) {
-            e.preventDefault();
-            $("#space").scrollTop(0);
-            var payload = {};
-
-            if (storeX == undefined || storeY == undefined) {
-                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
-                $('#errorAlert').show();
-                return;
-            }
-
-            var externalLink = $("#externalLink").val();
-            var externalLinkLabel = $("#externalLinkLabel").val();
-            var type = $("#extType option:selected").text();
-
-            if (externalLink == undefined || externalLink == "") {
-                $("#errorMsg").text("Please provide the link to the external link.")
-                $('#errorAlert').show();
-                return;
-            }
-
-            if (externalLinkLabel == undefined || externalLinkLabel == "") {
-                $("#errorMsg").text("Please enter a label for this external link.")
-                $('#errorAlert').show();
-                return;
-            }
-            
-            if (type == undefined || type == "Choose...") {
-                $("#errorMsg").text("Please select a link type in Type dropdown.")
-                $('#errorAlert').show();
-                return;
-            }
-            $("#externalLinkX").val(storeX);
-            $("#externalLinkY").val(storeY - 25);
-
-            var form = $("#createExternalLinkForm");
-            var formData = new FormData(form[0]);
-            var externalLinkInfo = createExternalLinkInfo();
-
-            $.ajax({
-                type: "POST",
-                url: "[(@{'/staff/space/'+${space?.id}+'/externallink?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
-                cache       : false,
-                contentType : false,
-                processData : false,
-                enctype: 'multipart/form-data',
-                data: formData,
-                beforeSend: function () {
-                    $(".saveLoader").show();
-                    },
-               	complete: function () {
-                    $(".saveLoader").hide();
-                    },
-                success: function(data) {
-                    var linkData = JSON.parse(data);
-                    $("#bgImage").off("click");
-                    externalLinkInfo["id"] = linkData["id"];
-                    externalLinkInfo["displayId"]=linkData["displayId"];
-                    externalLinkInfo["x"]=linkData["x"];
-                    externalLinkInfo["y"]=linkData["y"];
-                    showExternalLinks(externalLinkInfo, true);
-                    $("#ext_label").attr("id","");
-                    $("#link").attr("id","");
-                    $("#createExternalLinkAlert").hide();
-                    $("#errorMsg").text("");
-                    $('#errorAlert').hide();
-                    $("."+linkData["id"]).remove();
-                    form[0].reset();
-                    $("#external-arrow").attr("id","");
-                    $("#space").css("display", "none");
-                    externalLinkIcon=null;
-                    drawLinks();
-                }
-            });
-        });
-
-        // ------------- other buttons ------------
-        $("#deleteSpaceLinkButton").click(function() {
-            var linkId = $("#spaceLinkIdValueEdit").val();
-            $.ajax({
-                url: "[(@{'/staff/space/'+${space?.id}+'/spacelink/'})]"+ linkId + '?[(${_csrf.parameterName})]=[(${_csrf.token})]',
-                method: "DELETE",
-                beforeSend: function () {
-                    $(".saveLoader").show();
-                    },
-               	complete: function () {
-                    $(".saveLoader").hide();
-                    },
-                success:function(data) {
-                    $('[data-link-id="' + linkId + '"]').remove();
-                    $('[data-link-id="unpublished-' + linkId + '"]').remove();
-                    hideLinkInfoTabs();
-                    $('a#'+linkId).remove();
-                    if ($("div#outgoingLinks a").length < 2) {
-                        $("#noLinksOnSpace").show();
-                    }
-                    if ($("div#incomingLinks a").length < 2) {
-                        $("#noLinksToSpace").show();
-                    }
-                    $("#spaceLinkInfo").hide();
-                    $("#space").css("display", "none");
-                    drawLinks();
-                }
-            });
-        });
-
-
-        $("#deleteModuleLinkButton").click(function() {
-            var linkId = $("#moduleLinkIdValueEdit").val();
-            $.ajax({
-                url: "[(@{'/staff/space/'+${space?.id}+'/modulelink/'})]"+ linkId + '?[(${_csrf.parameterName})]=[(${_csrf.token})]',
-                method: "DELETE",
-                beforeSend: function () {
-                    $(".saveLoader").show();
-                    },
-               	complete: function () {
-                    $(".saveLoader").hide();
-                    },
-                success:function(data) {
-                    $('[data-link-id="' + linkId + '"]').remove();
-                    hideLinkInfoTabs();
-                    $("#space").css("display", "none");
-                    drawLinks();
-                }
-            });
-        });
-
-        $("#deleteExternalLinkButton").click(function() {
-            var linkId = $("#externalLinkIdValueEdit").val();
-            $.ajax({
-                url: "[(@{'/staff/space/'+${space?.id}+'/externallink/'})]"+ linkId + '?[(${_csrf.parameterName})]=[(${_csrf.token})]',
-                method: "DELETE",
-                beforeSend: function () {
-                    $(".saveLoader").show();
-                    },
-               	complete: function () {
-                    $(".saveLoader").hide();
-                    },
-                success:function(data) {
-                    $('[data-link-id="' + linkId + '"]').remove();
-                    hideLinkInfoTabs();
-                    $("#space").css("display", "none");
-                    drawLinks();
-                }
-            });
-        });
-        
-        $("#deleteTextBlockButton").click(function() {
-            var blockId = $("#textBlockId").val();
-            $.ajax({
-                url: "[(@{'/staff/space/'+${space.id}+'/textblock/'})]"+ blockId + '?[(${_csrf.parameterName})]=[(${_csrf.token})]',
-                method: "DELETE",
-                beforeSend: function () {
-                    $(".saveLoader").show();
-                    },
-               	complete: function () {
-                    $(".saveLoader").hide();
-                    },
-                success:function(data) {
-                    $('[data-link-id="' + blockId + '"]').remove();
-                    hideLinkInfoTabs();
-                    $("#space").css("display", "none");
-                    drawLinks();
-                }
-            });
-        });
-
-        $("#closeAlert").click(function() {
-            $('#errorAlert').hide();
-        });
-
-        // ------------- adjust links on background image (e.g. when inputs are changed) ------------
-        // external links
-        $(".extlink-target").change(function() {
-            var externalLink = {};
-            externalLink["x"] = storeX;
-            externalLink["y"] = storeY;
-            externalLink["externalLinkLabel"] = $("#externalLinkLabel").val();
-            externalLink["url"] = $("#externalLink").val();
-            externalLink["type"] = $("#extType").val();
-            showExternalLinks(externalLink);
-        });     
-
-        // space links
-        $('#spaceLinkRotation').change(function() {
-            $('#link').css('transform', 'rotate(' +$('#spaceLinkRotation').val()+ 'deg)');
-        });
-
-        $(".target").change(function() {
-            showSpaceLink(createSpaceLinkInfo());
-        }); 
-
-        $(".modulelink-target").change(function() {
-            showModuleLink(createModuleLinkInfo());
-        }); 
-
-        // link icons for space links
-
-        $('#moduleLinkRotation').change(function() {
-            $('#link').css('transform', 'rotate(' +$('#moduleLinkRotation').val()+ 'deg)');
-        });
-
-        $('#moduleLinkRotationEdit').change(function() {
-            $('#link').css('transform', 'rotate(' +$('#moduleLinkRotationEdit').val()+ 'deg)');
-        });
-
-        $(".modulelink-targetEdit").change(function() {
-            showModuleLinkEdit(editModuleLinkInfo());
-        }); 
-
-        $(".spacelink-targetEdit").change(function() {
-            showSpaceLinkEdit(editSpaceLinkInfo());
-        });
-
-        $(".externallink-targetEdit").change(function() {
-            showExternalLinkEdit(editExternalLinkInfo());
-        });
-
-
-        $("#spaceLinkImage").change(function() {
-            if (this.files && this.files[0]) {
-                linkIconReader.readAsDataURL(this.files[0]);
-            }
-        });
-        
-        $("#moduleLinkImage").change(function() {
-            if (this.files && this.files[0]) {
-                moduleLinkIconReader.readAsDataURL(this.files[0]);
-            }
-        });
-
-        $("#externalLinkImage").change(function() {
-            if (this.files && this.files[0]) {
-                externalLinkIconReader.readAsDataURL(this.files[0]);
-            }
-        });
-
-        // ------------ Cancel buttons -----------------
-
-        $(".cancelSpaceLinkBtn").click(function() {
-            storeX = null;
-            storeY = null;
-            linkIcon = null;
-            $("#space").scrollTop(0);
-            $("#link").remove();
-            $("#undefined").remove();
-            $("#space_label").remove();
-            $("#space").hide();
-            $("#createSpaceLinkAlert").hide(); 
-            $('#errorAlert').hide();
-            $("#bgImage").off("click");
-            drawLinks();
-        });
-
-        $(".cancelModuleLinkBtn").click(function() {
-            storeX = null;
-            storeY = null;
-            $("#space").scrollTop(0);
-            moduleLinkIcon=null;
-            $("#link").remove();
-            $("#undefined").remove();
-            $("#module_label").remove();
-            $("#space").hide();
-            $("#createModuleLinkAlert").hide();  
-            $('#errorAlert').hide();
-            $("#bgImage").off("click");
-            drawLinks();
-        }); 
-
-        $(".cancelExternalLinkBtn").click(function() {
-            storeX = null;
-            storeY = null;
-            $("#space").scrollTop(0);
-            externalLinkIcon=null;
-            $("#external-link").remove();
-            $("#undefined").remove();
-            $("div#link").remove();
-            $("#external-arrow").remove();
-            $("#ext_label").remove();
-            $("#space").hide();
-            $("#createExternalLinkAlert").hide();
-            $("#bgImage").off("click");
-            $('#errorAlert').hide();
-            drawLinks();
-        });
-        
-        $(".cancelAddTextBlockBtn").click(function() {
-            storeX = null;
-            storeY = null;
-            $("#space").scrollTop(0);
-            $("#textContentID").val(""); 
-            $("span#text").remove();
-            $("#space").hide();
-            $("#addTextFormInfo").hide();
-            $('#errorAlert').hide();
-            $("#bgImage").off("click");
-            drawLinks();
-        });
-
-        $("#cancelBgImgBtn").click(function() {
-        	$("#space").scrollTop(0);
-            drawLinks();
-            $("#file").val('');
-            $("#changeBgImgAlert").hide();
-        });
-
-        $("#closeEditModuleLinkInfo").click(function(e) {
-            e.preventDefault();
-            selectedModuleLinkId=undefined;
-            $("#moduleLinkInfoLabel").text("");
-            $("#moduleLinkId").val("");
-            resetHighlighting();
-            $("#space").hide();
-            $("#editModuleLinkInfo").hide();
-            drawLinks();
-        }); 
-
-        $("#closeEditSpaceLinkInfo").click(function(e) {
-            e.preventDefault();
-            selectedSpaceLinkId=undefined;
-            $("#spaceLinkInfoLabel").text("");
-            $("#spaceLinkId").val("");
-            resetHighlighting();
-            $("#space").hide();
-            $("#editSpaceLinkInfo").hide();
-            drawLinks();
-        }); 
-
-        $("#closeEditExternalLinkInfo").click(function(e) {
-            e.preventDefault();
-            selectedExternalLinkId=undefined;
-            $("#externalLinkInfoLabel").text("");
-            $("#externalLinkId").val("");
-            resetHighlighting();
-            $("#space").hide();
-            $("#editExternalLinkInfo").hide();
-            drawLinks();
-        });
-        
-        $("#closeEditTextBlockInfo").click(function(e) {
-            e.preventDefault();
-            selectedTextBlockId=undefined;
-            $("#textBoxHeightIDEdit").val("");
-            $("#textBoxWidthIDEdit").val("");
-            $("#textContentIDForEdit").val("");
-            resetHighlighting();
-            $("#space").hide();
-            $("#editTextBlockInfo").hide();
-            drawLinks();
-        });
-});
-
-function changeTextAreaOnEditBorderColor(){
-    var textModalBlock = $("#textModalBlockId-"+selectedTextBlockId).find("textarea");
-    changeStyle(textModalBlock,"borderColor",$("#borderColorIDEdit").val());
-}
-
-function changeTextAreaOnEditTextColor(){
-    var textModalBlock = $("#textModalBlockId-"+selectedTextBlockId).find("textarea");
-    changeStyle(textModalBlock,"color",$("#textColorIDEdit").val());
-}
-
-//called while adding new text blocks 
-function changeTextColor(){
-    changeStyle($("#textB"),"color",$("#textColorID").val());
-}
-
-function changeBorderColor(){
-    changeStyle($("#textB"),"borderColor",$("#borderColorID").val());
-}
-
-//function to change style property of an element
-function changeStyle(elementId, styleProperty, value) {
-    var element = $(elementId);
-    if (element.length === 0) {
-        return;
-    }
-    element[0].style[styleProperty] = value;
-}
+			ext_label.attr("data-link-id", externalLink["id"]);
+			ext_label.css('cursor', 'pointer');
+			ext_label.attr("class", "label-"+externalLink["id"]);
+			ext_label.click(function(e) {
+				makeExternalLinksEditable(externalLink["externalLinkLabel"], externalLink["id"], externalLink["externalLinkURL"], externalLink["x"], externalLink["y"], externalLink["displayId"], externalLink["type"],externalLink["howToOpen"],externalLink["tabOpen"]);
+			});
+	    }
+	
+	    $("#space").append(link);
+	    $("#link").append(ext_label);
+	    $("#external-link").remove();
+	
+	}
+	
+	//--------- Utility functions -------------
+	function createSpaceLinkInfo() {
+	    var info = {};
+	    info["x"] = storeX;
+	    info["y"] = storeY;
+	    info["rotation"] = $("#spaceLinkRotation").val();
+	    info["linkedSpace"] = $("#linkedSpace").val();
+	    info["spaceLinkLabel"] = $("#spaceLinkLabel").val();
+	    info["type"] = $("#type").val();
+	    return info;
+	}
+	
+	function createExternalLinkInfo() {
+		var info = {};
+		info["x"] = storeX;
+		info["y"] = storeY;
+		info["tabOpen"] = $("#extTabOpen").val();
+		info["type"] = $("#extType").val();
+		info["externalLinkLabel"] = $("#externalLinkLabel").val();
+		info["externalLinkURL"] = $("#externalLink").val();
+		return info;
+	}
+	
+	function createModuleLinkInfo() {
+	    var info = {};
+	    info["x"] = storeX;
+	    info["y"] = storeY;
+	    info["rotation"] = $("#moduleLinkRotation").val();
+	    info["linkedModule"] = $("#linkedModule").val();
+	    info["moduleLinkLabel"] = $("#moduleLinkLabel").val();
+	    info["type"] = $("#moduleType").val();
+	    return info;
+	}
+	
+	function createTextBlockInfo() {
+	    var info = {};
+	    info["x"] = storeX;
+	    info["y"] = storeY;
+	    info["text"] = $("#textContentID").val();
+	    info["height"] = $("#textBoxHeightID").val();
+	    info["width"] = $("#textBoxWidthID").val();
+	    info["textColor"] = $("#textColorID").val();
+	    info["borderColor"] = $("#borderColorID").val();
+	    return info;
+	}
+	
+	function editTextBlockInfo() {
+	    var info = {};
+	    info["x"] = storeX;
+	    info["y"] = storeY;
+	    info["text"] = $("#textContentIDForEdit").val();
+	    info["height"] = $("#textBoxHeightIDEdit").val();
+	    info["width"] = $("#textBoxWidthIDEdit").val();
+	    info["textColor"] = $("#textColorIDEdit").val();
+	    info["borderColor"] = $("#borderColorIDEdit").val();
+	    return info;
+	}
+	
+	function editModuleLinkInfo() {
+	    var info = {};
+	    info["x"] = storeX;
+	    info["y"] = storeY;
+	    info["rotation"] = $("#moduleLinkRotationEdit").val();
+	    info["linkedModule"] = $("#moduleLinkIdEdit").val();
+	    info["moduleLinkLabel"] = $("#moduleLinkLabelEdit").val();
+	    info["type"] = $("#moduleTypeEdit").val();
+	    return info;
+	}
+	
+	function editSpaceLinkInfo() {
+	    var info = {};
+	    info["x"] = storeX;
+	    info["y"] = storeY;
+	    info["rotation"] = $("#spaceLinkRotationEdit").val();
+	    info["linkedSpace"] = $("#spaceLinkIdEdit").val();
+	    info["spaceLinkLabel"] = $("#spaceLinkLabelEdit").val();
+	    info["type"] = $("#typeSpaceEdit").val();
+	    return info;
+	}
+	
+	function editExternalLinkInfo() {
+		var info = {};
+		info["x"] = storeX;
+		info["y"] = storeY;
+		info["tabOpen"] = $("#extTabOpenEdit").val();
+		info["type"] = $("#extTypeEdit").val();
+		info["externalLinkLabel"] = $("#externalLinkLabelEdit").val();
+		info["externalLinkURL"] = $("#externalLinkURLEdit").val();
+		return info;
+	}
+	
+	function makeSpaceLinksEditable(spaceLinkName, spaceLinkId, rotation, selectedSpaceId, posXEdit, posYEdit, displayLinkId, linkType) {
+	    $("#spaceLinkInfoLabel").text(spaceLinkName);
+	    $("#spaceLinkId").val(spaceLinkId);
+	    selectedSpaceLinkId=spaceLinkId;
+	    storeX=posXEdit;
+	    storeY=posYEdit;
+	    $("#spaceLinkInfoLabel").text(spaceLinkName);
+	    $("#spaceLinkDisplayId").val(displayLinkId);
+	    $("#spaceLinkInfoLabelEdit").text(spaceLinkName);
+	    $("#spaceLinkLabelEdit").val(spaceLinkName);
+	    $("#spaceLinkId").val(spaceLinkId);
+	    $("#spaceLinkIdValueEdit").val(spaceLinkId);
+	    $("#spaceLinkRotationEdit").val(rotation);
+	    $("#typeSpaceEdit option:selected").prop('selected', false);
+	    $('#typeSpaceEdit option[value="'+linkType+'"]').prop("selected", true);
+	    $("#spaceLinkIdEdit option:selected").prop('selected', false);
+	    $('#spaceLinkIdEdit option[value="'+selectedSpaceId+'"]').prop("selected", true);
+	    if(linkType != "IMAGE"){
+	    	resetHighlighting(); 
+	    }
+	    $('[data-link-id="' + spaceLinkId + '"]').css("color", "var(--secondary)");
+	    $('img[data-link-id="' + spaceLinkId + '"]').css("border", "solid 1px #c1bb88");
+	    $('[data-link-id="unpublished-' + spaceLinkId + '"]').css("color", "var(--secondary)");
+	
+	    $("#bgImage").on("click", function(e){
+	        e.preventDefault();
+	        var posX = $(this).position().left;
+	        var posY = $(this).position().top;
+	        storeX = e.pageX  - $(this).offset().left;
+	        storeY = e.pageY  - $(this).offset().top + 25;
+	        showSpaceLinkEdit(editSpaceLinkInfo(),false, storeX,storeY);
+	    });
+	    hideLinkInfoTabs();
+	    displayForms("#editSpaceLinkInfo");
+	}
+	function displayForms(formToShow){
+	    drawLinks();
+	    $("#space").css("display", "-webkit-box");
+	    $(formToShow).css("display", "flex");
+	    modalBgImageHeight = parseInt($("#bgImage").css("height"));
+	    modalBgImageWidth = parseInt($("#bgImage").css("width"));
+	}
+	
+	function makeModuleLinksEditable(moduleLinkName, moduleLinkId, rotation, selectedModuleId, posXEdit, posYEdit, displayLinkId, linkType) {
+	    selectedModuleLinkId=moduleLinkId;
+	    storeX=posXEdit;
+	    storeY=posYEdit;
+	    $("#moduleLinkInfoLabel").text(moduleLinkName);
+	    $("#moduleLinkDisplayId").val(displayLinkId);
+	    $("#moduleLinkInfoLabelEdit").text(moduleLinkName);
+	    $("#moduleLinkLabelEdit").val(moduleLinkName);
+	    $("#moduleLinkId").val(moduleLinkId);
+	    $("#moduleLinkIdValueEdit").val(moduleLinkId);
+	    $("#moduleLinkRotationEdit").val(rotation);
+	    $("#moduleTypeEdit option:selected").prop('selected', false);
+	    $('#moduleTypeEdit option[value="'+linkType+'"]').prop("selected", true);
+	    $("#moduleLinkIdEdit option:selected").prop('selected', false);
+	    $('#moduleLinkIdEdit option[value="'+selectedModuleId+'"]').prop("selected", true);
+	    resetHighlighting();     
+	    $('[data-link-id="' + moduleLinkId + '"]').css("color", "#c1bb88");
+	    $('div[data-link-id="' + moduleLinkId + '"]').removeClass("alert-primary");
+	    $('div[data-link-id="' + moduleLinkId + '"]').addClass("alert-warning");
+	    $('img[data-link-id="' + moduleLinkId + '"]').css("border", "solid 1px #c1bb88");
+	
+	    $("#bgImage").on("click", function(e){
+	        e.preventDefault();
+	        var posX = $(this).position().left;
+	        var posY = $(this).position().top;  
+	        storeX = e.pageX - $(this).offset().left;
+	        storeY = e.pageY - $(this).offset().top + 25;
+	        showModuleLinkEdit(editModuleLinkInfo(), false, storeX,storeY);
+	    });
+	    hideLinkInfoTabs();
+	    displayForms("#editModuleLinkInfo");
+	}
+	
+	function makeExternalLinksEditable(linkName, linkId, externalLinkURL, posXEdit, posYEdit, displayLinkId, linkType,tabOpenType) {
+	    selectedExternalLinkId=linkId;
+	    storeX=posXEdit;
+	    storeY=posYEdit;
+	    $("#externalLinkInfoLabel").text(linkName);
+	    $("#externalLinkId").val(linkId);
+	    $("#externalLinkDisplayId").val(displayLinkId);
+	    $("#externalLinkInfoLabelEdit").text(linkName);
+	    $("#externalLinkLabelEdit").val(linkName);
+	    $("#externalLinkIdValueEdit").val(linkId);
+	    $("#externalLinkURLEdit").val(externalLinkURL);
+	    $('#extTypeEdit option[value="'+linkType+'"]').prop("selected", true);
+	    $('#extTabOpenEdit option[value="'+tabOpenType+'"]').prop("selected",true);
+	    
+	    resetHighlighting();
+	
+	    $('[data-link-id="' + linkId + '"]').css("color", "#c1bb88");
+	    $('div[data-link-id="' + linkId + '"]').removeClass("alert-primary");
+	    $('div[data-link-id="' + linkId + '"]').addClass("alert-warning");
+	    $('img[data-link-id="' + linkId + '"]').css("border", "solid 1px #c1bb88");
+	
+	    $("#bgImage").on("click", function(e){
+	        e.preventDefault();
+	        var posX = $(this).position().left;
+	        var posY = $(this).position().top;    
+	        storeX = e.pageX - $(this).offset().left;
+	        storeY = e.pageY - $(this).offset().top + 25;
+	        showExternalLinkEdit(editExternalLinkInfo(), false, storeX,storeY);
+	    });
+	    hideLinkInfoTabs();
+	    displayForms("#editExternalLinkInfo");
+	}
+	
+	function makeTextBlockEditable(blockDisplayId,blockId,text,posX,posY,width,height, textColor, borderColor){
+	    selectedTextBlockId=blockId;
+	    storeX=posX;
+	    storeY=posY;
+	    $("#textBlockId").val(blockId);
+	    $("#textBlockXEdit").val(posX);
+	    $("#textBlockYEdit").val(posY);
+	    $("#textBlockDisplayId").val(blockDisplayId);
+	    $("#textBoxWidthIDEdit").val(width);
+	    $("#textBoxHeightIDEdit").val(height);
+	    $("#textContentIDForEdit").val(text);
+	    $("#textColorIDEdit").val(textColor);
+	    $("#borderColorIDEdit").val(borderColor);
+	    resetHighlighting();
+	    $("#bgImage").on("click", function(e){
+	        e.preventDefault();
+	        var posX = $(this).position().left;
+	        var posY = $(this).position().top;    
+	        storeX = e.pageX - $(this).offset().left;
+	        storeY = e.pageY - $(this).offset().top + 25;
+	        showTextBlockEdit(editTextBlockInfo());
+	    });
+	    hideLinkInfoTabs();
+	    displayForms("#editTextBlockInfo");
+	}
+	
+	function resetHighlighting() {
+	    // reset icon links
+	    $('[data-link-id]').css("color", "red");
+	
+	    // reset alert links
+	    $('div[data-link-id]').removeClass("alert-warning");
+	    $('div[data-link-id]').addClass("alert-primary");
+	
+	    // reset image links
+	    $('img[data-link-id]').css("border-width", "0");
+	}
+	
+	function getTextArea(x,y) {
+	    var posX = $("#bgImage").position().left;
+	    var posY = $("#bgImage").position().top;
+	    var text = $('<span id="text"><textarea id="textB" name="textBlock" type="textarea" class="textBlock" style="resize:both; background: rgba(0, 0, 0, 0.4);"></textarea></span>');
+	    text.css('position', 'absolute');
+	    text.css('left', x + posX);
+	    text.css('top', y);
+	    $("#space").append(text);
+	    
+	    var textB = $('#textB')[0],
+	    tHeight = textB.clientHeight,
+	    tWidth = textB.clientWidth;
+	    
+	    var height = modalBgImageHeight;
+	    var width = modalBgImageWidth;
+	    
+	    $("#textBoxWidthID").val(tWidth);
+	    $("#textBoxHeightID").val(tHeight);
+	    textB.onmouseup = function (e) {
+	        if (tHeight !== textB.clientHeight || tWidth !== textB.clientWidth ) {
+	            tHeight = textB.clientHeight;
+	            tWidth = textB.clientWidth;
+	            let percentileHeight = (tHeight*100)/height;
+	            let percentileWidth = (tWidth*100)/width;
+	            $("#textBoxWidthID").val(percentileWidth);
+	            $("#textBoxHeightID").val(percentileHeight);
+	            $("#textContentID").val(textB.value);
+	        }
+	    };
+	    var percentileHeight = (tHeight*100)/height;
+	    var percentileWidth = (tWidth*100)/width;
+	    $("#textBoxWidthID").val(percentileWidth);
+	    $("#textBoxHeightID").val(percentileHeight);
+	    $("#textContentID").val(textB.value);
+	}
+	
+	$(function(){
+	    $("#deleteSpace").click(function(){
+	        var spaceId = "${space?.id}";
+	        checkSpaceLinkPresent('[(${space?.id})]', '[(@{'/staff/'})]', '[('?'+${_csrf.parameterName}+'='+${_csrf.token})]',$('#headerSpaceValue'));
+	    });
+	
+	        $( document ).ready(function() {
+	            onPageReady($("#deleteSpace"), $('#confirm-space-delete'));
+	            if ($("div#outgoingLinks a").length < 2) {
+	                $("#noLinksOnSpace").show()
+	            }
+	            if ($("div#incomingLinks a").length < 2) {
+	                $("#noLinksToSpace").show()
+	            }
+	        });
+	
+	        // -------- buttons that open modals (e.g. to create space links) ------
+	
+	        $("#addTextBlock").click(function(e){
+	            hideLinkInfoTabs();
+	            $("#changeBgImgAlert").hide();
+	            $("#bgImage").off("click");
+	            $("#bgImage").on("click", function(e){
+	                e.preventDefault();
+	                $("#external-arrow").remove();
+	                $("#space_label").remove();
+	                $("#link").remove();
+	                $("#text").remove();
+	                var posX = $(this).position().left;
+	                var posY = $(this).position().top;    
+	                storeX = e.pageX - $(this).offset().left;
+	                storeY = e.pageY - $(this).offset().top + 25;
+	                getTextArea(storeX,storeY);
+	            });
+	            hideLinkInfoTabs();
+	            displayForms("#addTextFormInfo");
+	        });
+	
+	        $("#addSpaceLinkButton").click(function(e) {
+	            $("#createExternalLinkAlert").hide();
+	            $("#changeBgImgAlert").hide();
+	            $("#bgImage").off("click");
+	            $("#bgImage").on("click", function(e){
+	                e.preventDefault();
+	                $("#external-arrow").remove();
+	                $("#space_label").remove();
+	                $("#link").remove();
+	                var icon;
+	                var posX = $(this).position().left;
+	                var posY = $(this).position().top;    
+	                storeX = e.pageX - $(this).offset().left;
+	                storeY = e.pageY - $(this).offset().top + 25;
+	                showSpaceLink(createSpaceLinkInfo(), false, storeX, storeY);
+	            });
+	            hideLinkInfoTabs();
+	            displayForms("#createSpaceLinkAlert");
+	        });
+	
+	        $("#addModuleLinkButton").click(function(e) {
+	            $("#createModuleLinkAlert").hide();
+	            $("#bgImage").off("click");
+	            $("#bgImage").on("click", function(e){
+	                e.preventDefault();
+	                $("#external-arrow").remove();
+	                $("#module_label").remove();
+	                $("#link").remove();
+	                var icon;
+	                var posX = $(this).position().left;
+	                var posY = $(this).position().top;    
+	                storeX = e.pageX - $(this).offset().left;
+	                storeY = e.pageY - $(this).offset().top + 25;
+	                showModuleLink(createModuleLinkInfo(), false, storeX, storeY);
+	            });
+	            hideLinkInfoTabs();
+	            displayForms("#createModuleLinkAlert");
+	        }); 
+	
+	        $("#addExternalLinkButton").click(function(e) {
+	            $("#createSpaceLinkAlert").hide();
+	            $("#changeBgImgAlert").hide();
+	            $("#bgImage").off("click");
+	            $("#bgImage").on("click", function(e){
+	                e.preventDefault();
+	                $("#link").remove();
+	                $("#external-arrow").remove();
+	                $("#ext_label").remove();
+	                var icon;
+	                var posX = $(this).position().left
+	                var posY = $(this).position().top;
+	                storeX = e.pageX - $(this).offset().left;
+	                storeY = e.pageY - $(this).offset().top + 25;
+	                showExternalLinks(createExternalLinkInfo(), false, storeX, storeY);
+	            });
+	            hideLinkInfoTabs();
+	            displayForms("#createExternalLinkAlert");
+	        });
+	
+	        $('#changeBgImgButton').click(function(file) {
+	            $("#createSpaceLinkAlert").hide();
+	            $("#createExternalLinkAlert").hide();
+	            drawLinks();
+	            $("#changeBgImgAlert").show();          
+	        });
+	
+	
+	        // ----------- submit buttons (e.g. to create space links) ------------------
+	
+	        $("#addTextBlockBtn").click(function(e) {
+	            e.preventDefault();
+	            $("#space").scrollTop(0);
+	            if (storeX == undefined || storeY == undefined) {
+	                $("#errorMsg").text("Please click on the image to specify where the new block should be located.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	
+	            $("#addTextX").val(storeX);
+	            $("#addTextY").val(storeY - 25);
+	
+	            var form = $("#addTextForm");
+	            var formData = new FormData(form[0]);
+	
+	            var textBlockInfo = createTextBlockInfo();
+	
+	            $.ajax({
+	                type: "POST",
+	                url: "[(@{'/staff/space/'+${space.id}+'/textblock?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
+	                cache       : false,
+	                contentType : false,
+	                processData : false,
+	                enctype: 'multipart/form-data',
+	                data: formData, 
+	                beforeSend: function () {
+	                    $(".saveLoader").show();
+	                    },
+	               	complete: function () {
+	                    $(".saveLoader").hide();
+	                    },
+	                success: function(data) {
+	                    var linkData = JSON.parse(data);
+	                    $("#bgImage").off("click");
+	                    textBlockInfo["id"] = linkData["id"];
+	                    textBlockInfo["displayId"]=linkData["displayId"];
+	                    textBlockInfo["x"]=linkData["x"];
+	                    textBlockInfo["y"]=linkData["y"];
+	                    showTextBlock(textBlockInfo, true);
+	                    $("#errorMsg").text("");
+	                    $('#errorAlert').hide();
+	                    $("#addTextFormInfo").hide();
+	                    $("#space").css("display", "none");
+	                    form[0].reset();
+	                    drawLinks();
+	                }
+	            });
+	        });
+	        
+	        $("#editTextBlockBtn").click(function(e) {
+	            e.preventDefault();
+	            $("#space").scrollTop(0);
+	            var blockId = $("#textBlockId").val();
+	            if (storeX == undefined || storeY == undefined) {
+	                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	            var linkedTextBlock = $("#textBlockId").val();
+	            $("#textBlockXEdit").val(storeX);
+	            $("#textBlockYEdit").val(storeY - 25);
+	            var form = $("#editTextBlockForm");
+	            var formData = new FormData(form[0]);
+	            var textBlockInfo = editTextBlockInfo();
+	            $.ajax({
+	                type: "POST",
+	                url: "[(@{'/staff/space/link/textblock/'+${space.id}+'?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
+	                cache: false,
+	                contentType : false,
+	                processData : false,
+	                enctype: 'multipart/form-data',
+	                data: formData,
+	                success: function(data) {
+	                    var linkData = JSON.parse(data);
+	                    $("#bgImage").off("click");
+	                    textBlockInfo["id"] = linkData["id"];
+	                    textBlockInfo["text"]=linkData["textContent"];
+	                    textBlockInfo["x"]=linkData["x"];
+	                    textBlockInfo["y"]=linkData["y"];
+	                    textBlockInfo["height"]=linkData["height"];
+	                    textBlockInfo["width"]=linkData["width"];
+	                    textBlockInfo["textColor"] = linkData["textColor"];
+	                    showTextBlockEdit(textBlockInfo);
+	                    hideLinkInfoTabs();
+	                    $("#space").css("display", "none");
+	                    selectedTextBlockId=undefined;
+	                    drawLinks();
+	                }
+	            });
+	        });
+	
+	        $("#createSpaceLinkBtn").click(function(e) {
+	            e.preventDefault();
+	            $('#errorAlert').hide();
+	            $("#space").scrollTop(0);
+	            var label = $("#spaceLinkLabel").val();
+	            var spaceName = $("#linkedSpace option:selected").text();
+	            var type = $("#type option:selected").text();
+	
+	            if (label == undefined || label == "") {
+	                $("#errorMsg").text("Please fill the Label field before submitting.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	            if (spaceName == undefined || spaceName == "Choose...") {
+	                $("#errorMsg").text("Please select a space in Linked Space dropdown.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	            
+	            if (type == undefined || type == "Choose...") {
+	                $("#errorMsg").text("Please select a link type in Type dropdown.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	
+	            if (storeX == undefined || storeY == undefined) {
+	                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	
+	            $("#spaceLinkX").val(storeX);
+	            $("#spaceLinkY").val(storeY - 25);
+				
+	            var form = $("#createSpaceLinkForm");
+	            var label = $("#spaceLinkLabel").val();
+	            var spaceName = $("#linkedSpace option:selected").text();
+	            var spaceId = $("#linkedSpace option:selected").val(); 
+	            var formData = new FormData(form[0]);
+	            var spaceLinkInfo = createSpaceLinkInfo();
+	            $.ajax({
+	                type: "POST",
+	                url: "[(@{'/staff/space/'+${space?.id}+'/spacelink?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
+	                cache       : false,
+	                contentType : false,
+	                processData : false,
+	                enctype: 'multipart/form-data',
+	                data: formData,
+	                beforeSend: function () {
+	                    $(".saveLoader").show();
+	                    },
+	               	complete: function () {
+	                    $(".saveLoader").hide();
+	                    },
+	                success: function(data) {
+	                    var linkData = JSON.parse(data);
+	                    $("#bgImage").off("click");
+	                    spaceLinkInfo["id"] = linkData["id"];
+	                    spaceLinkInfo["displayId"]=linkData["displayId"];
+	                    spaceLinkInfo["x"]=linkData["x"];
+	                    spaceLinkInfo["y"]=linkData["y"];
+	                    spaceLinkInfo["linkedSpaceStatus"]=linkData["linkedSpaceStatus"];
+	                    showSpaceLink(spaceLinkInfo, true);
+	                    $("#space_label").attr("id","");
+	                    $("#link").attr("id","");
+	                    $("#createSpaceLinkAlert").hide();  
+	                    $("#errorMsg").text("");
+	                    $('#errorAlert').hide();
+	                    $("#noLinksOnSpace").hide();
+	                    $("."+linkData["id"]).remove();
+	                    form[0].reset();
+	                    var newSpaceLinkURL = [[@{|/staff/space/|}]]+spaceId;
+	                    $("#outgoingLinks").append("<a href="+newSpaceLinkURL+" style='padding: .25rem .25rem;' class='list-group-item' id="+linkData["id"]+">"+label+"  &nbsp;-> &nbsp;"+spaceName+"</a>");
+	                    if (spaceName == "${space?.name}") {
+	                        $("#noLinksToSpace").hide();
+	                        $("div#incomingLinks").append("<a href="+newSpaceLinkURL+" style='padding: .25rem .25rem;' class='list-group-item' id="+linkData["id"]+">"+spaceName+"</a>");
+	                    }
+	                    $("#space").css("display", "none");
+	                    linkIcon=null;
+	                    drawLinks();
+	                }
+	            });
+	        });
+	
+	        $("#createModuleLinkBtn").click(function(e) {
+	            e.preventDefault();
+	            $("#space").scrollTop(0);
+	            $('#errorAlert').hide();
+	            
+	            if (storeX == undefined || storeY == undefined) {
+	                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	
+	            var linkedModules = $("#linkedModule").val();
+	            var moduleLabel = $("#moduleLinkLabel").val();
+	            var type = $("#moduleType option:selected").text();
+	            
+	            if (moduleLabel == undefined || moduleLabel == "") {
+	                $("#errorMsg").text("Please enter the label for module.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	
+	            if (linkedModules == undefined || linkedModules == "Choose...") {
+	                $("#errorMsg").text("Please select linked modules.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	            
+	            if (type == undefined || type == "Choose...") {
+	                $("#errorMsg").text("Please select a link type in Type dropdown.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	
+	            $("#moduleLinkX").val(storeX);
+	            $("#moduleLinkY").val(storeY - 25);
+	
+	            var form = $("#createModuleLinkForm");
+	            var formData = new FormData(form[0]);
+	
+	            var moduleLinkInfo = createModuleLinkInfo();
+	
+	            $.ajax({
+	                type: "POST",
+	
+	                url: "[(@{'/staff/space/'+${space?.id}+'/modulelink?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
+	                cache       : false,
+	                contentType : false,
+	                processData : false,
+	                enctype: 'multipart/form-data',
+	                data: formData,
+	                beforeSend: function () {
+	                    $(".saveLoader").show();
+	                    },
+	               	complete: function () {
+	                    $(".saveLoader").hide();
+	                    },
+	                success: function(data) {
+	                    var linkData = JSON.parse(data);
+	                    $("#bgImage").off("click");
+	                    moduleLinkInfo["id"] = linkData["id"];
+	                    moduleLinkInfo["displayId"]=linkData["displayId"];
+	                    moduleLinkInfo["x"]=linkData["x"];
+	                    moduleLinkInfo["y"]=linkData["y"];
+	                    showModuleLink(moduleLinkInfo, true);
+	                    $("#module_label").attr("id","");
+	                    $("#link").attr("id","");
+	                    $("#createModuleLinkAlert").hide();
+	                    $("#errorMsg").text("");
+	                    $('#errorAlert').hide();
+	                    $("."+linkData["id"]).remove();
+	                    form[0].reset();
+	                    $("#space").css("display", "none");
+	                    moduleLinkIcon=null;
+	                    drawLinks();
+	                }
+	            });
+	        });
+	        $("#editModuleLinkBtn").click(function(e) {
+	            e.preventDefault();
+	            var linkId = $("#moduleLinkIdEdit").val();
+	            if(storeX == undefined || storeY == undefined){
+	                $("#errorMsg").text("Please click on the image to specify where the new link should be located.");
+	                $('#errorAlert').show();
+	                return;    
+	            }
+	            $("#space").scrollTop(0);
+	            var linkedModules = $("#moduleLinkIdEdit").val();
+	            $("#moduleLinkXEdit").val(storeX);
+	            $("#moduleLinkYEdit").val(storeY - 25);
+	            var form = $("#editModuleLinkForm");
+	            var formData = new FormData(form[0]);
+	            var moduleLinkInfo = editModuleLinkInfo();
+	            $.ajax({
+	                type: "POST",
+	                url: "[(@{'/staff/space/link/module/'+${space?.id}+'?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
+	                cache: false,
+	                contentType: false,
+	                processData: false,
+	                enctype: 'multipart/form-data',
+	                data: formData,
+	                beforeSend: function () {
+	                    $(".saveLoader").show();
+	                    },
+	               	complete: function () {
+	                    $(".saveLoader").hide();
+	                    },
+	                success: function(data){
+	                    var linkData = JSON.parse(data);
+	                    $("#bgImage").off("click");
+	                    moduleLinkInfo["id"] = linkData["id"];
+	                    moduleLinkInfo["displayId"]=linkData["displayId"];
+	                    moduleLinkInfo["x"]=linkData["x"];
+	                    moduleLinkInfo["y"]=linkData["y"];
+	                    $('#linkRotation-'+selectedModuleLinkId).val(linkData["rotation"]);
+	                    $('#linkLabel-'+selectedModuleLinkId).val(linkData["label"]);
+	                    $('#linkType-'+selectedModuleLinkId).val(linkData["dislpayType"]);
+	                    $('#moduleLinkTarget-'+selectedModuleLinkId).val(linkData["linkedId"]);
+	                    showModuleLinkEdit(moduleLinkInfo, true);
+	                    hideLinkInfoTabs();
+	                    $("#space").css("display", "none");
+	                    selectedModuleLinkId=undefined;
+	                    drawLinks();
+	                }
+	            });
+	        });
+	
+	        $("#editSpaceLinkBtn").click(function(e) {
+	            e.preventDefault();
+	            var linkId = $("#spaceLinkIdEdit").val();
+	            if (storeX == undefined || storeY == undefined) {
+	                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
+	                $('#errorAlert').show();
+	                return;    
+	            }
+	            $("#space").scrollTop(0);
+	            var linkedSpace = $("#spaceLinkIdEdit").val();
+	            $("#spaceLinkXEdit").val(storeX);
+	            $("#spaceLinkYEdit").val(storeY - 25);
+	            
+	
+	            var form = $("#editSpaceLinkForm");
+	            var formData = new FormData(form[0]);
+	            var spaceLinkInfo = editSpaceLinkInfo();
+	            $.ajax({
+	                type: "POST",
+	                url: "[(@{'/staff/space/link/space/'+${space?.id}+'?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
+	                cache: false,
+	                contentType : false,
+	                processData : false,
+	                enctype: 'multipart/form-data',
+	                data: formData,
+	                beforeSend: function () {
+	                    $(".saveLoader").show();
+	                    },
+	               	complete: function () {
+	                    $(".saveLoader").hide();
+	                    },
+	                success: function(data) {
+	                    var linkData = JSON.parse(data);
+	                    $("#main-bgImage").off("click");
+	                    spaceLinkInfo["id"] = linkData["id"];
+	                    spaceLinkInfo["displayId"]=linkData["displayId"];
+	                    spaceLinkInfo["x"]=linkData["x"];
+	                    spaceLinkInfo["y"]=linkData["y"];
+	                    spaceLinkInfo["linkedSpaceStatus"]=linkData["linkedSpaceStatus"];
+	                    showSpaceLinkEdit(spaceLinkInfo, true);
+	                    $('#linkRotation-'+selectedSpaceLinkId).val(linkData["rotation"]);
+	                    $('#linkLabel-'+selectedSpaceLinkId).val(linkData["label"]);
+	                    $('#linkType-'+selectedSpaceLinkId).val(linkData["dislpayType"]);
+	                    $('#linkTarget-'+selectedSpaceLinkId).val(linkData["linkedId"]);
+	                    hideLinkInfoTabs();
+	                    $("#space").css("display", "none");
+	                    selectedSpaceLinkId=undefined;
+	                    drawLinks();
+	                }
+	            });
+	        });
+	
+	        $("#editExternalLinkBtn").click(function(e) {
+	            e.preventDefault();
+	            $("#space").scrollTop(0);
+	            var linkId = $("#externalLinkIdEdit").val();
+	            if (storeX == undefined || storeY == undefined) {
+	                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	            var linkedSpace = $("#externalLinkIdEdit").val();
+	            $("#externalLinkXEdit").val(storeX);
+	            $("#externalLinkYEdit").val(storeY - 25);
+	            var form = $("#editExternalLinkForm");
+	            var formData = new FormData(form[0]);
+	            var externalLinkInfo = editExternalLinkInfo();
+	            $.ajax({
+	                type: "POST",
+	                url: "[(@{'/staff/space/link/external/'+${space?.id}+'?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
+	                cache: false,
+	                contentType : false,
+	                processData : false,
+	                enctype: 'multipart/form-data',
+	                data: formData,
+	                beforeSend: function () {
+	                    $(".saveLoader").show();
+	                    },
+	               	complete: function () {
+	                    $(".saveLoader").hide();
+	                    },
+	                success: function(data) {
+	                    var linkData = JSON.parse(data);
+	                    $("#bgImage").off("click");
+	                    externalLinkInfo["id"] = linkData["id"];
+	                    externalLinkInfo["displayId"]=linkData["displayId"];
+	                    externalLinkInfo["x"]=linkData["x"];
+	                    externalLinkInfo["y"]=linkData["y"];
+	                    $('#linkLabel-'+selectedExternalLinkId).val(linkData["label"]);
+	                    $('#linkType-'+selectedExternalLinkId).val(linkData["dislpayType"]);
+	                    $('#externalLinkTarget-'+selectedExternalLinkId).val(linkData["url"]);
+	                    showExternalLinkEdit(editExternalLinkInfo, true);
+	                    hideLinkInfoTabs();
+	                    $("#space").css("display", "none");
+	                    selectedExternalLinkId=undefined;
+	                    drawLinks();
+	                }
+	            });
+	        });
+	
+	        $("#createExternalLinkBtn").click(function(e) {
+	            e.preventDefault();
+	            $("#space").scrollTop(0);
+	            var payload = {};
+	
+	            if (storeX == undefined || storeY == undefined) {
+	                $("#errorMsg").text("Please click on the image to specify where the new link should be located.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	
+	            var externalLink = $("#externalLink").val();
+	            var externalLinkLabel = $("#externalLinkLabel").val();
+	            var type = $("#extType option:selected").text();
+	
+	            if (externalLink == undefined || externalLink == "") {
+	                $("#errorMsg").text("Please provide the link to the external link.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	
+	            if (externalLinkLabel == undefined || externalLinkLabel == "") {
+	                $("#errorMsg").text("Please enter a label for this external link.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	            
+	            if (type == undefined || type == "Choose...") {
+	                $("#errorMsg").text("Please select a link type in Type dropdown.")
+	                $('#errorAlert').show();
+	                return;
+	            }
+	            $("#externalLinkX").val(storeX);
+	            $("#externalLinkY").val(storeY - 25);
+	
+	            var form = $("#createExternalLinkForm");
+	            var formData = new FormData(form[0]);
+	            var externalLinkInfo = createExternalLinkInfo();
+	
+	            $.ajax({
+	                type: "POST",
+	                url: "[(@{'/staff/space/'+${space?.id}+'/externallink?'+${_csrf.parameterName}+'='+${_csrf.token}})]",
+	                cache       : false,
+	                contentType : false,
+	                processData : false,
+	                enctype: 'multipart/form-data',
+	                data: formData,
+	                beforeSend: function () {
+	                    $(".saveLoader").show();
+	                    },
+	               	complete: function () {
+	                    $(".saveLoader").hide();
+	                    },
+	                success: function(data) {
+	                    var linkData = JSON.parse(data);
+	                    $("#bgImage").off("click");
+	                    externalLinkInfo["id"] = linkData["id"];
+	                    externalLinkInfo["displayId"]=linkData["displayId"];
+	                    externalLinkInfo["x"]=linkData["x"];
+	                    externalLinkInfo["y"]=linkData["y"];
+	                    showExternalLinks(externalLinkInfo, true);
+	                    $("#ext_label").attr("id","");
+	                    $("#link").attr("id","");
+	                    $("#createExternalLinkAlert").hide();
+	                    $("#errorMsg").text("");
+	                    $('#errorAlert').hide();
+	                    $("."+linkData["id"]).remove();
+	                    form[0].reset();
+	                    $("#external-arrow").attr("id","");
+	                    $("#space").css("display", "none");
+	                    externalLinkIcon=null;
+	                    drawLinks();
+	                }
+	            });
+	        });
+	
+	        // ------------- other buttons ------------
+	        $("#deleteSpaceLinkButton").click(function() {
+	            var linkId = $("#spaceLinkIdValueEdit").val();
+	            $.ajax({
+	                url: "[(@{'/staff/space/'+${space?.id}+'/spacelink/'})]"+ linkId + '?[(${_csrf.parameterName})]=[(${_csrf.token})]',
+	                method: "DELETE",
+	                beforeSend: function () {
+	                    $(".saveLoader").show();
+	                    },
+	               	complete: function () {
+	                    $(".saveLoader").hide();
+	                    },
+	                success:function(data) {
+	                    $('[data-link-id="' + linkId + '"]').remove();
+	                    $('[data-link-id="unpublished-' + linkId + '"]').remove();
+	                    hideLinkInfoTabs();
+	                    $('a#'+linkId).remove();
+	                    if ($("div#outgoingLinks a").length < 2) {
+	                        $("#noLinksOnSpace").show();
+	                    }
+	                    if ($("div#incomingLinks a").length < 2) {
+	                        $("#noLinksToSpace").show();
+	                    }
+	                    $("#spaceLinkInfo").hide();
+	                    $("#space").css("display", "none");
+	                    drawLinks();
+	                }
+	            });
+	        });
+	
+	
+	        $("#deleteModuleLinkButton").click(function() {
+	            var linkId = $("#moduleLinkIdValueEdit").val();
+	            $.ajax({
+	                url: "[(@{'/staff/space/'+${space?.id}+'/modulelink/'})]"+ linkId + '?[(${_csrf.parameterName})]=[(${_csrf.token})]',
+	                method: "DELETE",
+	                beforeSend: function () {
+	                    $(".saveLoader").show();
+	                    },
+	               	complete: function () {
+	                    $(".saveLoader").hide();
+	                    },
+	                success:function(data) {
+	                    $('[data-link-id="' + linkId + '"]').remove();
+	                    hideLinkInfoTabs();
+	                    $("#space").css("display", "none");
+	                    drawLinks();
+	                }
+	            });
+	        });
+	
+	        $("#deleteExternalLinkButton").click(function() {
+	            var linkId = $("#externalLinkIdValueEdit").val();
+	            $.ajax({
+	                url: "[(@{'/staff/space/'+${space?.id}+'/externallink/'})]"+ linkId + '?[(${_csrf.parameterName})]=[(${_csrf.token})]',
+	                method: "DELETE",
+	                beforeSend: function () {
+	                    $(".saveLoader").show();
+	                    },
+	               	complete: function () {
+	                    $(".saveLoader").hide();
+	                    },
+	                success:function(data) {
+	                    $('[data-link-id="' + linkId + '"]').remove();
+	                    hideLinkInfoTabs();
+	                    $("#space").css("display", "none");
+	                    drawLinks();
+	                }
+	            });
+	        });
+	        
+	        $("#deleteTextBlockButton").click(function() {
+	            var blockId = $("#textBlockId").val();
+	            $.ajax({
+	                url: "[(@{'/staff/space/'+${space.id}+'/textblock/'})]"+ blockId + '?[(${_csrf.parameterName})]=[(${_csrf.token})]',
+	                method: "DELETE",
+	                beforeSend: function () {
+	                    $(".saveLoader").show();
+	                    },
+	               	complete: function () {
+	                    $(".saveLoader").hide();
+	                    },
+	                success:function(data) {
+	                    $('[data-link-id="' + blockId + '"]').remove();
+	                    hideLinkInfoTabs();
+	                    $("#space").css("display", "none");
+	                    drawLinks();
+	                }
+	            });
+	        });
+	
+	        $("#closeAlert").click(function() {
+	            $('#errorAlert').hide();
+	        });
+	
+	        // ------------- adjust links on background image (e.g. when inputs are changed) ------------
+	        // external links
+	        $(".extlink-target").change(function() {
+	            var externalLink = {};
+	            externalLink["x"] = storeX;
+	            externalLink["y"] = storeY;
+	            externalLink["externalLinkLabel"] = $("#externalLinkLabel").val();
+	            externalLink["url"] = $("#externalLink").val();
+	            externalLink["type"] = $("#extType").val();
+	            showExternalLinks(externalLink);
+	        });     
+	
+	        // space links
+	        $('#spaceLinkRotation').change(function() {
+	            $('#link').css('transform', 'rotate(' +$('#spaceLinkRotation').val()+ 'deg)');
+	        });
+	
+	        $(".target").change(function() {
+	            showSpaceLink(createSpaceLinkInfo());
+	        }); 
+	
+	        $(".modulelink-target").change(function() {
+	            showModuleLink(createModuleLinkInfo());
+	        }); 
+	
+	        // link icons for space links
+	
+	        $('#moduleLinkRotation').change(function() {
+	            $('#link').css('transform', 'rotate(' +$('#moduleLinkRotation').val()+ 'deg)');
+	        });
+	
+	        $('#moduleLinkRotationEdit').change(function() {
+	            $('#link').css('transform', 'rotate(' +$('#moduleLinkRotationEdit').val()+ 'deg)');
+	        });
+	
+	        $(".modulelink-targetEdit").change(function() {
+	            showModuleLinkEdit(editModuleLinkInfo());
+	        }); 
+	
+	        $(".spacelink-targetEdit").change(function() {
+	            showSpaceLinkEdit(editSpaceLinkInfo());
+	        });
+	
+	        $(".externallink-targetEdit").change(function() {
+	            showExternalLinkEdit(editExternalLinkInfo());
+	        });
+	
+	
+	        $("#spaceLinkImage").change(function() {
+	            if (this.files && this.files[0]) {
+	                linkIconReader.readAsDataURL(this.files[0]);
+	            }
+	        });
+	        
+	        $("#moduleLinkImage").change(function() {
+	            if (this.files && this.files[0]) {
+	                moduleLinkIconReader.readAsDataURL(this.files[0]);
+	            }
+	        });
+	
+	        $("#externalLinkImage").change(function() {
+	            if (this.files && this.files[0]) {
+	                externalLinkIconReader.readAsDataURL(this.files[0]);
+	            }
+	        });
+	
+	        // ------------ Cancel buttons -----------------
+	
+	        $(".cancelSpaceLinkBtn").click(function() {
+	            storeX = null;
+	            storeY = null;
+	            linkIcon = null;
+	            $("#space").scrollTop(0);
+	            $("#link").remove();
+	            $("#undefined").remove();
+	            $("#space_label").remove();
+	            $("#space").hide();
+	            $("#createSpaceLinkAlert").hide(); 
+	            $('#errorAlert').hide();
+	            $("#bgImage").off("click");
+	            drawLinks();
+	        });
+	
+	        $(".cancelModuleLinkBtn").click(function() {
+	            storeX = null;
+	            storeY = null;
+	            $("#space").scrollTop(0);
+	            moduleLinkIcon=null;
+	            $("#link").remove();
+	            $("#undefined").remove();
+	            $("#module_label").remove();
+	            $("#space").hide();
+	            $("#createModuleLinkAlert").hide();  
+	            $('#errorAlert').hide();
+	            $("#bgImage").off("click");
+	            drawLinks();
+	        }); 
+	
+	        $(".cancelExternalLinkBtn").click(function() {
+	            storeX = null;
+	            storeY = null;
+	            $("#space").scrollTop(0);
+	            externalLinkIcon=null;
+	            $("#external-link").remove();
+	            $("#undefined").remove();
+	            $("div#link").remove();
+	            $("#external-arrow").remove();
+	            $("#ext_label").remove();
+	            $("#space").hide();
+	            $("#createExternalLinkAlert").hide();
+	            $("#bgImage").off("click");
+	            $('#errorAlert').hide();
+	            drawLinks();
+	        });
+	        
+	        $(".cancelAddTextBlockBtn").click(function() {
+	            storeX = null;
+	            storeY = null;
+	            $("#space").scrollTop(0);
+	            $("#textContentID").val(""); 
+	            $("span#text").remove();
+	            $("#space").hide();
+	            $("#addTextFormInfo").hide();
+	            $('#errorAlert').hide();
+	            $("#bgImage").off("click");
+	            drawLinks();
+	        });
+	
+	        $("#cancelBgImgBtn").click(function() {
+	        	$("#space").scrollTop(0);
+	            drawLinks();
+	            $("#file").val('');
+	            $("#changeBgImgAlert").hide();
+	        });
+	
+	        $("#closeEditModuleLinkInfo").click(function(e) {
+	            e.preventDefault();
+	            selectedModuleLinkId=undefined;
+	            $("#moduleLinkInfoLabel").text("");
+	            $("#moduleLinkId").val("");
+	            resetHighlighting();
+	            $("#space").hide();
+	            $("#editModuleLinkInfo").hide();
+	            drawLinks();
+	        }); 
+	
+	        $("#closeEditSpaceLinkInfo").click(function(e) {
+	            e.preventDefault();
+	            selectedSpaceLinkId=undefined;
+	            $("#spaceLinkInfoLabel").text("");
+	            $("#spaceLinkId").val("");
+	            resetHighlighting();
+	            $("#space").hide();
+	            $("#editSpaceLinkInfo").hide();
+	            drawLinks();
+	        }); 
+	
+	        $("#closeEditExternalLinkInfo").click(function(e) {
+	            e.preventDefault();
+	            selectedExternalLinkId=undefined;
+	            $("#externalLinkInfoLabel").text("");
+	            $("#externalLinkId").val("");
+	            resetHighlighting();
+	            $("#space").hide();
+	            $("#editExternalLinkInfo").hide();
+	            drawLinks();
+	        });
+	        
+	        $("#closeEditTextBlockInfo").click(function(e) {
+	            e.preventDefault();
+	            selectedTextBlockId=undefined;
+	            $("#textBoxHeightIDEdit").val("");
+	            $("#textBoxWidthIDEdit").val("");
+	            $("#textContentIDForEdit").val("");
+	            resetHighlighting();
+	            $("#space").hide();
+	            $("#editTextBlockInfo").hide();
+	            drawLinks();
+	        });
+	});
 </script>
 <style>
 .Info_cz_Class .tooltiptext {
diff --git a/vspace/src/main/webapp/resources/extra/Home.css b/vspace/src/main/webapp/resources/extra/Home.css
index 6c9122895..e5c90caf1 100644
--- a/vspace/src/main/webapp/resources/extra/Home.css
+++ b/vspace/src/main/webapp/resources/extra/Home.css
@@ -677,13 +677,11 @@
 
 .link-modal {
 	display: none;
-	position: fixed;
 	top: 2.5%;
 	right: 2.5%;
 	left: 2.5%;
 	bottom: 0;
 	z-index: 9999;
-	overflow-y: scroll;
 	background: white;
 	padding: 25px;
 	border-radius: 10px;
diff --git a/vspace/src/main/webapp/resources/extra/Module_1.css b/vspace/src/main/webapp/resources/extra/Module_1.css
index 38f8c3ffb..2864d16c7 100644
--- a/vspace/src/main/webapp/resources/extra/Module_1.css
+++ b/vspace/src/main/webapp/resources/extra/Module_1.css
@@ -24,7 +24,7 @@
     font-size: larger;
 }
 
-.SLideshow_option_Class {
+.Slideshow_option_Class {
     position: absolute;
     width: 43.846px;
     height: 44px;
@@ -217,9 +217,10 @@ a, a:hover, a:focus {
 
 .textBlock{
     color: white;
-    font-size: 12px padding: 3px 0;
+    font-size: 12px;
+    padding: 3px 0;
     border-radius: 6px;
     position: absolute;
     z-index: 1;
     background: rgba(0, 0, 0, 0.6);
-}
\ No newline at end of file
+}
diff --git a/vspace/src/main/webapp/resources/extra/Module_1_slideshow_1.css b/vspace/src/main/webapp/resources/extra/Module_1_slideshow_1.css
index 8cb2cc8c0..7cb14739d 100644
--- a/vspace/src/main/webapp/resources/extra/Module_1_slideshow_1.css
+++ b/vspace/src/main/webapp/resources/extra/Module_1_slideshow_1.css
@@ -168,12 +168,7 @@ a, a:hover, a:focus {
 }
 
 .imgDiv {
-    position: relative;
-    max-width: 57%;
-    top: 0px;
     overflow: visible;
-    margin: 1%;
-    display: block;
 }
 
 .textDiv {
@@ -212,7 +207,7 @@ a, a:hover, a:focus {
 }
 
 .Mask_Group_9_Class {
-    position: realtive;
+    position: relative;
     width: 34px;
     height: 34px;
     left: 0px;