var ImageMarkManager = new Object();
        
        ImageMarkManager.markers = [];
        ImageMarkManager.markerCount = 0;        
        ImageMarkManager.selectedMarker = "";
        
        ImageMarkManager.markerContainerCss = "marker_container";
        ImageMarkManager.markerContainerHoverCss = "marker_hover";
        ImageMarkManager.noteContainer = "notes_container";
        ImageMarkManager.markerWidth = 12;
        ImageMarkManager.markerHeight = 13;
        ImageMarkManager.imgPath = "images/";
        
        ImageMarkManager.registerMarker = function(marker){                              
            ImageMarkManager.markers[marker.xId] = marker;
            marker.display(); /* Now show marker */
        };  
                        
        ImageMarkManager.generateRandomMarkerId = function(){
            ImageMarkManager.markerCount++;
            var mId = "mrkr_" + ImageMarkManager.markerCount;
            return mId;
        };
        
        ImageMarkManager.findMarker = function(xId){
            return ImageMarkManager.markers[xId];
        };   
        
        ImageMarkManager.cancelMarker = function(xId){            
            var id = (xId) ? xId : ImageMarkManager.selectedMarker;
             var marker = ImageMarkManager.findMarker(id);
            if (xId){
                marker.cancelMarker(false);
            }else{
               marker.cancelMarker(true);
            };            
            marker = null;
        };
        
        ImageMarkManager.saveMarker = function(xId){               
            var id, marker;
            window.focus();
            if (xId){ /* existing marker note */
                id = xId;
                marker = ImageMarkManager.findMarker(id);
                var noteEdit = DomObj.getById(marker.noteEditId);
                if (noteEdit.value == ""){
                    alert("Please enter a note before proceeding");
                    noteEdit.focus();
                    return;
                };                
                PageMethods.SaveNote(marker.id, noteEdit.value);
                marker.closeNoteEdit();
            }else{ /* new marker and note */
                var note = DomObj.getById("new_note_text");
                   if (note.value == ""){
                        alert("Please enter a note before proceeding");
                        note.focus();
                        return;
                   };
                id = ImageMarkManager.selectedMarker;
                marker = ImageMarkManager.findMarker(id);
                /* Make Ajax call to save info */
                PageMethods.SaveNewMarker(marker.xId, marker.div, marker.xLoc, marker.yLoc, note.value, ImageMarkManager.drawNote, ImageMarkManager.saveError);
            };           
            
            marker = null;
        };
        
        ImageMarkManager.drawNote = function(result){
            var id = ImageMarkManager.selectedMarker;
            var marker = ImageMarkManager.findMarker(id);            
            marker.writeNewNote(result.Id, result.MarkerNote);            
            marker = null;
        };
        
        ImageMarkManager.saveError = function(error){            
            var timedOut = error.get_timedOut();
            if (timedOut){
                DomObj.trace("Save timed out.");
            }else { /* This is an error */
                DomObj.trace("Error occurred: " + error.error.get_message());	         
            };
        };
        
        ImageMarkManager.saveMarkerLocation = function(xId, x, y){            
            var marker = ImageMarkManager.findMarker(xId);
                marker.xLoc = x;
                marker.yLoc = y;
                ImageMarkManager.markers[xId] = marker; /* resave client side */
                /* Now save server side */
                PageMethods.UpdateMarkerLocation(marker.id, marker.xLoc, marker.yLoc);                
        };
        
        ImageMarkManager.editMarker = function(xId){
            var marker = ImageMarkManager.findMarker(xId);
            marker.editMarker();
        };
        
        ImageMarkManager.deleteMarker = function(xId){
            var marker = ImageMarkManager.findMarker(xId);            
            marker.deleteMarker();
            marker = null;        
        };
        
        ImageMarkManager.markImage = function(e){            
            var theEvent = new Evt(e);
            var div = theEvent.evtSource.parentNode;
            var dim = DomObj.getElementWidthAndHeight(div);
            var coords = DomObj.getElementTopAndLeftCoord(div);                        
            var minX = coords.x; var minY = coords.y;            
            var maxX = parseInt(dim.w);// - parseInt(minX);
            var maxYOffset = (document.all) ? 2 : 6;
            var bw = DomObj.getBrowserArea(); 
            var maxY = (parseInt(dim.h) - maxYOffset); // - parseInt(minY);            
            //DomObj.trace("Image Left: " + minX + " Image Top: " + minY + " mouseClick Left: " + theEvent.mouseX + " mouseClick Top: " + theEvent.mouseY);
            var browserTop = (DomObj.isIE) ? bw.topEdge : 0; 
            var popupLeft = parseInt(coords.x) + parseInt(dim.w) + 12; 
            var popupTop = parseInt(coords.y);
            var actualImageClickLocX = theEvent.mouseX; //((theEvent.mouseX-minX) >= 0) ? (theEvent.mouseX-minX) : 0;
            var actualImageClickLocY = theEvent.mouseY + browserTop; //((theEvent.mouseY-minY) >= 0) ? (theEvent.mouseY-minY) : 0;
            /* Now determine exactly where to place the image on the container */
            var imageLocation = ImageMarkManager.adjustProximity(actualImageClickLocX, actualImageClickLocY, minX, maxX, minY, maxY);
            /* create a new ImageMarker object*/
            var imageMarker = new ImageMarker(div.id, imageLocation.xLeft, imageLocation.xTop);                                   
            /* register the new ImageMarker with the manager */
            ImageMarkManager.registerMarker(imageMarker);
            /* Now show the editable note */
            imageMarker.showCreateNote(popupLeft, popupTop); 
        };  
        
        /* First call new ImageMarker then call this function */
        ImageMarkManager.markImageAndDisplayNote = function(marker){
            /* register the new ImageMarker with the manager */
            ImageMarkManager.registerMarker(marker);
            /* Now show related note */
            marker.addNote();            
        };
        
        /* Added by Abel to support read only mode */
        ImageMarkManager.markImageAndDisplayNoteReadOnly = function(marker){
            /* register the new ImageMarker with the manager */
            ImageMarkManager.registerMarker(marker);
            /* Now show related note */
            marker.addNoteReadOnly();            
        };
                
        /* This function repositions the marker from the edges of the image */
        ImageMarkManager.adjustProximity = function(mouseX, mouseY, minX, maxX, minY, maxY){
            var xMarkerWidth = ImageMarkManager.markerWidth;
            var xMarkerHeight = ImageMarkManager.markerHeight;  
            var bw = DomObj.getBrowserArea();          
            var topBrowserEdge = (DomObj.isIE) ? bw.topEdge : 0;    
            //DomObj.trace("topBrowserEdge: " + topBrowserEdge);        
            var trueMinY = (minY + xMarkerHeight);    
            var trueMaxY = (minY + maxY);                              
            var xMarkerLeft = mouseX - minX - 6; /* 6 is needed because of the invisible div */
            var mrkImgYOffset = (document.all) ? 4 : 2;
            var xMarkerTop = mouseY - minY - mrkImgYOffset;          
            //DomObj.trace("Mouse Y: " + mouseY + " True minY: " + trueMinY);// + "mouseY + xMarkerHeight: " + (mouseY + xMarkerHeight) + " max Y: " + maxY + " Set Marker Top: " + (maxY - xMarkerHeight));
            //DomObj.trace("mouseY + xMarkerHeight: " + (mouseY + xMarkerHeight));
            //DomObj.trace("Max Y: " + maxY);
            if (mouseY < trueMinY){/* too close to the top? */                                         
                xMarkerTop = (mouseY - minY - 2);               
            }else if (mouseY + xMarkerHeight > trueMaxY){ /* too close to the bottom? */                 
              xMarkerTop = (maxY - xMarkerHeight);                
            };            
            if (mouseX - minX < xMarkerWidth){ /* too close to left? */
                xMarkerLeft = mouseX - minX;                
            }else if (mouseX + xMarkerWidth > (maxX+minX)){ /* Is it too near the right? */
                xMarkerLeft = (maxX - xMarkerWidth);
            };
            //DomObj.trace(" Min Y: " + minY +  " Max Y " + maxY + "Mouse Y: " + mouseY + " X Market Top: " + xMarkerTop); 
            return {xLeft: xMarkerLeft, xTop: xMarkerTop }
        }; 
       
       
                
        
        function ImageMarker(imageDivContainer, x, y, id, noteText){
            this.xId = ImageMarkManager.generateRandomMarkerId(); /* This random num used by the X marker on the image */
            if (id){          
                this.setIds(id);                
            }            
            this.div = imageDivContainer;
            this.xLoc = x;
            this.yLoc = y;   
            this.noteText = noteText || null;
            this.setDivWidthAndHeight(); /* Set the div width the same as the image */    
        };
        
        
        
        ImageMarker.prototype.setIds = function(id){            
            this.id = id;
            this.noteId = "notes_marker_" + this.id;
            this.noteDisplayId = "notes_marker_display_" + this.id;
            this.noteDisplayContentId = "notes_marker_display_content_" + this.id;
            this.noteContentId = "note_marker_content_edit_" + this.id;
            this.noteEditId = "notes_marker_editor_" + this.id;            
        };
        
        ImageMarker.prototype.display = function(){
            var container = DomObj.createWithAttribs("div", { className: ImageMarkManager.markerContainerCss,
                                                              id: this.xId });            
            var containedImg = DomObj.createWithAttribs("img", {   id: ("x_img_" + this.xId),															       
															       src: ImageMarkManager.imgPath + "xmarker.png",															         
															       width: ImageMarkManager.markerWidth,
															       height: ImageMarkManager.markerHeight,
															       onmouseover: this.highlightMarker(),
															       onmouseout: this.unHighlightMarker()															       
															       });//															       
            var attachImg = DomObj.ac(container, containedImg); /*attach this image to the div */            
            var dummyDiv = DomObj.create("div"); /* DOM browsers need this placeholder for some reason??	*/
            var attachToDummy = DomObj.ac(dummyDiv, container);
            var attachToImageContainer = DomObj.ac(DomObj.getById(this.div), attachToDummy); /* now append it to the main image div */
            /* Now move the image it's proper location on the image */
            //DomObj.trace("left x: " + this.xLoc + " top y: " + this.yLoc);
            container.style.left = this.xLoc.toString() + "px";
            //DomObj.trace("container left: " + container.style.left);
            container.style.top = this.yLoc.toString() + "px";
            //DomObj.trace("Marker loc in image:" + container.style.top);
            container.style.visibility = "visible";
            this.setDrag(container);
            
        };
        
        ImageMarker.prototype.setDrag = function(dragObject){            
            var image = DomObj.getById(this.div).childNodes[0]; 
            var dimensions = DomObj.getElementWidthAndHeight(image);
            var imgOffsetX = (document.all) ? 14 : 13;
            var imgOffsetY = (document.all) ? 17 : 14;
            var maxX =  (dimensions.w-imgOffsetX); // dimensions.w
            var maxY = (dimensions.h-imgOffsetY); // dimensions.h
            Drag.init(dragObject, null, 0, maxX, 0, maxY);  
            dragObject.onDragEnd = function(x, y) { 
                ImageMarkManager.saveMarkerLocation(this.id, x, y);
            };
            
            dragObject = image = dimensions = null;
        };
        
        ImageMarker.prototype.showCreateNote = function(left, top){
            ImageMarkManager.selectedMarker = this.xId;   
            this.unRegisterClick(); /* Turn off click events on image */                    
            var newNote = DomObj.getById("new_note_div");
            newNote.style.left = left + "px";
            newNote.style.top = top + "px";
            newNote.style.visibility = "visible";
            var theHandle = DomObj.getById("marker_new_title_handle");
            var theRoot = DomObj.getById("new_note_div");
            Drag.init(theHandle, theRoot);
            var newNoteTextArea = DomObj.getById("new_note_text");
            newNoteTextArea.value = "";
            newNoteTextArea.focus(); 
        };        
        
        ImageMarker.prototype.addNote = function(noteText){
            if (noteText){ this.noteText = noteText; };
            var noteHtml = "";
            noteHtml += "<div id='" + this.noteDisplayId + "'>";
            noteHtml += "<div class=\"note_marker_title\">";
            noteHtml += "<a href=\"#\" onclick=\"ImageMarkManager.editMarker('" + this.xId + "');return false;\">Edit</a>";
            noteHtml += "&nbsp; &nbsp;";
            noteHtml += "<a href=\"#\" onclick=\"ImageMarkManager.deleteMarker('" + this.xId + "');return false;\">Delete</a>";
            noteHtml += "</div>";
            noteHtml += "<div id=\"" + this.noteDisplayContentId + "\" class='note_marker_content'>";
            noteHtml += this.noteText;
            noteHtml += "</div>";            
            noteHtml += "</div>";
            
            noteHtml += "<div id=\"" + this.noteContentId + "\" style=\"display:none;\">";
            noteHtml += "<div class=\"note_marker_title\">";
            noteHtml += "<a href=\"#\" onclick=\"ImageMarkManager.cancelMarker('" + this.xId + "');return false;\">Cancel</a>";
            noteHtml += "&nbsp; &nbsp;";
            noteHtml += "<a href=\"#\" onclick=\"ImageMarkManager.saveMarker('" + this.xId + "');return false;\">Save</a>";
            noteHtml += "</div>";
            noteHtml += "<div class=\"note_marker_content\">";
            noteHtml += "<textarea id=\"" + this.noteEditId + "\" class=\"note_marker_editable\">" + this.noteText + "</textarea>";
            noteHtml += "</div>";        
            noteHtml += "</div>";            
            
            /*
            <div id="notes_marker_1" class="note_marker">
                <div id="notedisplay">
                    <div class="note_marker_title">
                            <a href="#" onclick="edit(1);">Edit</a> &nbsp;  <a href="#" onclick="delete(1);return false;">Delete</a>
                    </div>
                    <div class="note_marker_content">Hello There...</div>
                </div>
            </div>    
            <div id="noteEdit">
                    <div class="note_marker_title">
                            <a href="#" onclick="delete(1);">Cancel</a> &nbsp;  <a href="#" onclick="save(1);return false;">Save</a>
                    </div>
                    <div class="note_marker_content"><textarea id="editstuff" class="note_marker_editable"></textarea></div>
                </div>        
            */
            var noteDiv = DomObj.createWithAttribs("div", { className: "note_marker",
                                                            id: this.noteId,
                                                            innerHTML: noteHtml }); 
            var noteContainer = DomObj.getById(ImageMarkManager.noteContainer);                                                
            var container = DomObj.ac(noteContainer, noteDiv);            
            noteDiv = noteContainer = container = null;    
        };
        
        ImageMarker.prototype.addNoteReadOnly = function(noteText){
            if (noteText){ this.noteText = noteText; };
            var noteHtml = "";
            noteHtml += "<div id='" + this.noteDisplayId + "'>";
            noteHtml += "<div class=\"note_marker_title\">";
            /* commented out for readonly mode 
            noteHtml += "<a href=\"#\" onclick=\"ImageMarkManager.editMarker('" + this.xId + "');return false;\">Edit</a>";
            */
            noteHtml += "&nbsp;";
            /*
            noteHtml += "<a href=\"#\" onclick=\"ImageMarkManager.deleteMarker('" + this.xId + "');return false;\">Delete</a>";
            */
            noteHtml += "</div>";
            noteHtml += "<div id=\"" + this.noteDisplayContentId + "\" class='note_marker_content'>";
            noteHtml += this.noteText;
            noteHtml += "</div>";            
            noteHtml += "</div>";
            
            noteHtml += "<div id=\"" + this.noteContentId + "\" style=\"display:none;\">";
            noteHtml += "<div class=\"note_marker_title\">";
            noteHtml += "<a href=\"#\" onclick=\"ImageMarkManager.cancelMarker('" + this.xId + "');return false;\">Cancel</a>";
            noteHtml += "&nbsp; &nbsp;";
            noteHtml += "<a href=\"#\" onclick=\"ImageMarkManager.saveMarker('" + this.xId + "');return false;\">Save</a>";
            noteHtml += "</div>";
            noteHtml += "<div class=\"note_marker_content\">";
            noteHtml += "<textarea id=\"" + this.noteEditId + "\" class=\"note_marker_editable\">" + this.noteText + "</textarea>";
            noteHtml += "</div>";        
            noteHtml += "</div>";            
            
            /*
            <div id="notes_marker_1" class="note_marker">
                <div id="notedisplay">
                    <div class="note_marker_title">
                            <a href="#" onclick="edit(1);">Edit</a> &nbsp;  <a href="#" onclick="delete(1);return false;">Delete</a>
                    </div>
                    <div class="note_marker_content">Hello There...</div>
                </div>
            </div>    
            <div id="noteEdit">
                    <div class="note_marker_title">
                            <a href="#" onclick="delete(1);">Cancel</a> &nbsp;  <a href="#" onclick="save(1);return false;">Save</a>
                    </div>
                    <div class="note_marker_content"><textarea id="editstuff" class="note_marker_editable"></textarea></div>
                </div>        
            */
            var noteDiv = DomObj.createWithAttribs("div", { className: "note_marker",
                                                            id: this.noteId,
                                                            innerHTML: noteHtml }); 
            var noteContainer = DomObj.getById(ImageMarkManager.noteContainer);                                                
            var container = DomObj.ac(noteContainer, noteDiv);            
            noteDiv = noteContainer = container = null;    
        };
        
        ImageMarker.prototype.cancelMarker = function(isNew){
            if (confirm("Are you sure you want to cancel?")){
                if (!isNew){
                    DomObj.getById(this.noteEditId).value = DomObj.getById(this.noteDisplayContentId).innerHTML;
                    this.switchContent(true, false);
                    this.reRegisterClick();
                }else{
                    /* hide new note popup and remove X */
                    this.hidePopup();
                    this.removeMarker();
                };                
                ImageMarkManager.selectedMarker = "";
            };
        };
        
        ImageMarker.prototype.editMarker = function(){  
            this.unRegisterClick();          
            this.switchContent(false, true);
            DomObj.getById(this.noteEditId).focus();                 
        };
        
        
        ImageMarker.prototype.switchContent = function(hideEdit, hideDisplay){
            var noteEdit = DomObj.getById(this.noteContentId);
            noteEdit.style.display = (hideEdit) ? "none" : "block";
            var noteDisplay = DomObj.getById(this.noteDisplayId);
            noteDisplay.style.display = (hideDisplay) ? "none" : "block";                      
            noteEdit = noteDisplay = null;          
        };
        
        
        ImageMarker.prototype.writeNewNote = function(id, noteText){
            this.setIds(id);              
            /* hide popup, show New contained Div in display mode */ 
            this.addNote(noteText);
            this.newNote = false; /* this is now an old note */            
            this.hidePopup();        
        };
        
        ImageMarker.prototype.closeNoteEdit = function(){                            
            /* show the div in display mode and hide edit mode */ 
            this.reRegisterClick();
            DomObj.getById(this.noteDisplayContentId).innerHTML = DomObj.getById(this.noteEditId).value;
            this.switchContent(true, false);                      
        };
        
        ImageMarker.prototype.hidePopup = function(){
            this.reRegisterClick();
            var note = DomObj.getById("new_note_text");
            note.value = "";        
            note.blur();            
            var newNote = DomObj.getById("new_note_div");
            newNote.style.visibility = "hidden";
            newNote = null;
        };
        
        ImageMarker.prototype.removeMarker = function(){            
            var rmvMarker = DomObj.removeElementFromPageFlow(this.xId);
            rmvMarker = null;               
        };
        
        ImageMarker.prototype.highlightMarker = function(){
            var _this = this;
            return function(){
                var markerDiv = DomObj.getById(_this.xId);
                markerDiv.className = ImageMarkManager.markerContainerHoverCss;            
                var noteDiv = DomObj.getById(_this.noteId);
                if (noteDiv){
                    noteDiv.style.backgroundColor = "#ffff99";
                };
            };
        };
        
        ImageMarker.prototype.unHighlightMarker = function(){
            var _this = this;
            return function(){
                var markerDiv = DomObj.getById(_this.xId);
                markerDiv.className = ImageMarkManager.markerContainerCss;            
                var noteDiv = DomObj.getById(_this.noteId);
                if (noteDiv){
                    noteDiv.style.backgroundColor = "#fff";
                };
            };
        };
        
        ImageMarker.prototype.deleteMarker = function(){            
                if (confirm("Are you sure you want to delete this marker?")){
                    PageMethods.DeleteMarker(this.id);
                    var rmvMarker = DomObj.removeElementFromPageFlow(this.noteId);
                    rmvMarker = null;
                    this.removeMarker();
                    this.reRegisterClick();
                };                   
        };
        
        ImageMarker.prototype.setDivWidthAndHeight = function(){            
            var image = DomObj.getById(this.div).childNodes[0];            
            DomObj.setElemDimensions(this.div, null, null, parseInt(image.width), parseInt(image.height));            
        };
        
        ImageMarker.prototype.reRegisterClick = function(){
            var img = DomObj.getById(this.div).childNodes[0]; 
            Evt.addEventListener(img, "click", ImageMarkManager.markImage, false);
        };
        
        ImageMarker.prototype.unRegisterClick = function(){             
            var img = DomObj.getById(this.div).childNodes[0]; 
            Evt.removeEventListener(img, "click", ImageMarkManager.markImage, false);
        };