Subversion Repositories SmartDukaan

$(function(){
    /**
     * My Notes core method library
     **/
    var myNotes = {
        /**
         * Properties
         *  - notes: Object containing slideIds and corresponding notes as key-value pairs
         *  - defaultNoteText will be displayed if user has not saved a note on a slide
         **/
        notes: null,
        
        defaultNoteText: 'Click here to add notes',
        
        sanitize: function(str) {
            return str.replace(/\n/g, " ");
        },
                
        /**
         * getEntityId() will return Entity ID for the current product
         **/
        getEntityId: function() {
                return $('#product_id').val();
        },
        
        getSlideId: function(notesSectionElement)       {
                var cssClass = $(notesSectionElement).attr("class");
                
                idIndex = cssClass == 'mynotes-section' ? 1 : 3;
                return $(notesSectionElement).attr('id').split('-')[idIndex];
        },
        
        /**
         * setNotes(notes) will accept an object and set this.notes
         **/
        setNotes: function(notes)       {
                this.notes = notes;
        },

        getNoteForSlide: function(slideId)      {
                return this.notes.hasOwnProperty(slideId) ? this.notes[slideId] : null;
        },
        
        setNoteForSlide: function(slideId, note){
                this.notes[slideId] = note;
        },
        
        /**
         * populateNotes() will populate mynotes section on each slide with notes data
         **/
        populateNotes: function()       {
                        var notes = this.notes;
                        
                        $('.mynotes-section').each(function(){
                                var slideId = $(this).attr('id').split('-')[1];
                                
                                if(notes.hasOwnProperty(slideId) && $.trim(notes[slideId]) != "")       {
                                        
                                        $(this).children('div').html(notes[slideId]);
                                        $(this).children('textarea').val(notes[slideId]);
                                        
                                } else  {
                                        $(this).children('div').html(myNotes.defaultNoteText);
                                }
                        });
        },
        
        populateColorbox: function(){
                var notes = this.notes;
                        
                        $('.mynotes-colorbox-section').each(function(){
                                var slideId = $(this).attr('id').split('-')[3];
                                
                                if(notes.hasOwnProperty(slideId) && $.trim(notes[slideId]) != "")       {
                                        
                                        $(this).children('div').html(notes[slideId]);
                                        $(this).children('textarea').val(notes[slideId]);
                                        
                                } else  {
                                        $(this).children('div').html(myNotes.defaultNoteText);
                                }
                        });
        },
        
        /**
         * getNotes() will fetch user's notes for this entity (all slides) from sever
         * and populate the slides.
         **/
        getNotes: function()    {
                var entityId = this.getEntityId();
                
                jQuery.ajax({
                        type: "GET",
                        url: "/my-notes/" + entityId,
                        success: function(notesJSON)    {
                                var notes = eval(notesJSON);
                                myNotes.setNotes(notes);
                                myNotes.populateNotes();
                        }
                });
        },
        
        /**
         * saveNote() sends server request to save newly entered/modified note
         * for a particular slide
         **/
        saveNote: function(slideId, note)       {
                var entityId = this.getEntityId();

                jQuery.ajax({
                        type: "POST",
                        url: "/save-note/",
                        data: ({entity: entityId, slide: slideId, note: note}),
                        success: function(msg)  {
                                myNotes.setNoteForSlide(slideId, note);
                        }
                });
        }
    };
    /**
     * Loading user's notes for this product (entity) 
     **/
    myNotes.getNotes();

    
    /**
     ******************** Event Handlers **********************
     * When user clicks view pane, it will be transforms into a textarea
     * 
     * When textarea looses focus, a server request will be issued to add/update
     * note for that slide, if the note text is changed
     **/
    $('.mynotes-section div, .mynotes-colorbox-section div').click(function(){
        $(this).hide().siblings('textarea').show().focus();
    });
    
    $('.mynotes-section textarea, .mynotes-colorbox-section textarea').blur(function(){
        var slideId = myNotes.getSlideId($(this).parent());
        
        var text = $.trim($(this).val());
        
        if (text != "" && text != myNotes.defaultNoteText && text != myNotes.getNoteForSlide(slideId))  {
                var note = myNotes.sanitize(text);
                
                myNotes.saveNote(slideId, note);
                
                $(this).siblings('div').html(note).show();

        } else  {
                $(this).siblings('div').show();
        }
                $(this).hide();
    });
    
    $('#view-mynotes').click(function(){
        var mynotesColorbox = $('#mynotes-colorbox');
        
        $('#view-mynotes').colorbox({
                width:"670px",
                height:"485px",
                inline: true,
                href:"#mynotes-colorbox",
                
                onComplete: function(){
                        mynotesColorbox.show();
                        myNotes.populateColorbox();
                },
                onCleanup: function(){
                        mynotesColorbox.hide();
                }
        });
    });
});