window.addEventListener(
  'DOMContentLoaded', function() {
    notes.run();
}, false);


// simple WebSql app
var notes = (function() {
    'use strict';
    return {
        db: '',
        // default options
        cache: {
            db_name: 'dbNotes',
            db_table: 'notes',
            db_version: '0.1',
            db_description: 'A Database of Events',
            db_not_support: 'WebSQL is not supported by your browser!',
            db_valid_form: 'You must enter a something!',
            db_error: 'db not found, your browser does not support web sql!'
        },
        // run notes
        run: function() {
            var self = this;
            // check support
            if (window.openDatabase) {
                // open database
                this.db = openDatabase(self.cache.db_name, self.cache.db_version, self.cache.db_description, 1024 * 1024);
                // create table
                this.db.transaction(function(t) {
                    t.executeSql('CREATE TABLE IF NOT EXISTS ' + self.cache.db_table + '(id INTEGER PRIMARY KEY ASC, date TEXT, hour TEXT, title TEXT, description TEXT)');
                });
            } else {
                // not support
                qS('#dbEvents').innerHTML = '<div class="info">' +
                    '<h3>Not Support</h3><p>' + self.cache.db_not_support + '</p>' +
                    '</div>';
            }

            // Hide preloader on load
            var loader = setTimeout(function() {
                qS('.preloader').classList.add('loaded');
                clearTimeout(loader);
            }, 2000);
            // footer info
            this.showInfoHeader();
            // show envets
            this.outputEvents();
            // init functions
            this.fns();

        },
        fns: function() {
            var self = this;
            // open modal
            qS('#modal_open').addEventListener('click', function(e) {
                self.showOrhide(e);
            }, false);
            // close modal
            qS('#modal_close').addEventListener('click', function(e) {
                self.showOrhide(e);
            }, false);
            // add event and hide modal
            qS('#dbAdd').addEventListener('click', function(e) {
                e.preventDefault();
                self.addEvent();
            }, false);
            // add event and hide modal
            qS('#dbRefresh').addEventListener('click', function(e) {
                e.preventDefault();
                self.refresh(100);
            }, false);
            // delete event and hide modal
            qS('#dbDel').addEventListener('click', function(e) {
                e.preventDefault();
                // confirm before drop
                if (self.confirm('Are you sure') === true) {
                    // drop data
                    self.drop();
                    // remove class
                    qS('.modal-overlay').classList.remove('show');
                    // show info
                    qS('#dbEvents').innerHTML = '<div class="info"><h3>Clear Database....</h3><p>The Database now is empty <br>Refresh to create.</p></div>';
                }
            }, false);

        },
        // modal function
        showOrhide: function(e) {
            var modal = qS('.modal-overlay');
            e.preventDefault();
            if (modal.classList.contains('show')) {
                modal.classList.remove('show');
            } else {
                modal.classList.add('show');
            }
        },
        // confirm fn
        confirm: function(msg) {
            var data = confirm(msg + " ?");
            return data;
        },
        // refresh on delete
        refresh: function(time) {
            var t = setTimeout(function() {
                window.location = window.location;
                clearTimeout(t);
            }, time);
        },
  
        // delete
        drop: function() {
            var self = this;
            self.db.transaction(function(tx) {
                tx.executeSql('DROP TABLE ' + self.cache.db_table, [], self.outputEvents(), function onError(tx, error) {
                    qS('#dbEvents').innerHTML = '<p class="error">Error: ' + error.message + '</p>';
                });
            });
        },
        // add event
        addEvent: function() {
            var self = this;
            if (this.db) {
                var d = new Date(),
                    date = d.getDate() + '/' + d.getMonth() + '/' + d.getFullYear(),
                    hour = _getHour(),
                    title = qS('#dbTitle').value,
                    desc = qS('#dbDescription').value;
                // if not empty values
                if (title !== '' && desc !== '') {
                    self.db.transaction(function(tx) {
                        tx.executeSql('INSERT INTO ' + self.cache.db_table + '(date,hour,title,description) VALUES (?,?,?,?)', [date, hour, title, desc]);
                        self.outputEvents();
                        qS('#dbForm').reset();
                        qS('.modal-overlay').classList.remove('show');
                    });
                } else {
                    alert(self.cache.db_valid_form);
                }
            } else {
                // not support
                qS('#dbEvents').innerHTML = '<div class="info">' +
                    '<h3>Error</h3><p>' + this.cache.db_error + '</p>' +
                    '</div>';
            }
        },
        // update events
        updateEvents: function(transaction, results) {
            var self = this,
                result = qS('#dbEvents'),
                a, html = '',
                out = '';
            result.innerHTML = '';
            for (a = 0; a < results.rows.length; a++) {
                var row = results.rows.item(a);
                out += JSON.stringify(row, undefined, 2) + ',\n';
                html += '<li><a class="eventDel" href="javascript:void(0);" onclick="notes.deleteEvent(' + row.id + ');">&times;</a><h3>' + row.title + '</h3><div class="eventDate"><span class="in-left">' + row.date + '</span><span class="in-right">' + row.hour + '</span></div><div class="eventDesc" contenteditable  onkeyup="notes.updateEvent(' + row.id + ',this)">' + row.description +
                    '</div></li>';
            }
            if(html === ''){
      result.innerHTML = '<div class="info">'+'<h3>Empty Database</h3><p>Add New note in Database</p>'+'</div>';
            }else{
              result.innerHTML = html;
            }

            // render to json
            qS('#dbCode').addEventListener('click', function() {
                out = out.replace(/,\s*$/, "");
                if (typeof out !== 'undefined') {
                    qS('.modal-content').innerHTML = '<pre>[' + out + ']</pre>';
                    qS('.modal-overlay').classList.add('show');
                }
            });
        },
        // update event
        updateEvent: function(id, el) {
            var self = this;
            this.db.transaction(function(tx) {
                tx.executeSql('UPDATE ' + self.cache.db_table + ' SET description = ? WHERE id = ?', [el.textContent, id], null, function() {
                  qS('#dbEvents').innerHTML = '<div class="info">'+'<h3>Error</h3><p>'+self.cache.db_error+'</p>'+'</div>';
                });
            });
        },
        // show events in html
        outputEvents: function() {
            var self = this;
            if (this.db) {
                this.db.transaction(function(tx) {
                    tx.executeSql('SELECT * FROM ' + self.cache.db_table, [], self.updateEvents);
                });
            } else {
                // not support
                qS('#dbEvents').innerHTML = '<div class="info">' +
                    '<h3>Error</h3><p>' + this.cache.db_error + '</p>' +
                    '</div>';
            }
        },
        // delete event
        deleteEvent: function(id) {
            var self = this;
            if (this.db) {
                if (this.confirm('Are you sure') === true) {
                    self.db.transaction(function(t) {
                        t.executeSql('DELETE FROM ' + self.cache.db_table + ' WHERE id=?', [id], self.outputEvents());
                    });
                }
            } else {
                // not support
                qS('#dbEvents').innerHTML = '<div class="info">' +
                    '<h3>Error</h3><p>' + this.cache.db_error + '</p>' +
                    '</div>';
            }
        },
        // show tips
        showInfoHeader: function(){
          var element = qS('#footer_info');

          var tip_1 = '<p><b class="tip">Note: </b>You can see the code pressing the button <i class="fa fa-code"></i>.</p>';
          var tip_2 = '<p><b class="tip">Note: </b>pressing the button <i class="fa fa-trash"></i> and clear Database</p>';
          var tip_3 = '<p><b class="tip">Note: </b>pressing the button <i class="fa fa-refresh"></i> and refresh window</p>';
          var tip_4 = '<p><b class="tip">Note: </b>You can edit content of notes, just click in note and edit.</p>';

        var arr = [tip_1,tip_2,tip_3,tip_4];
          element.innerHTML = tip_1;
        setInterval(function(){
          var rand = arr[Math.floor(Math.random() * arr.length)];
          element.innerHTML = rand;
        },5000);

        }

    };

    function qS(e) {
        return document.querySelector(e);
    }

    function addZero(i) {
      if (i < 10) {
          i = "0" + i;
      }
      return i;
    }

    function _getHour() {
        var d = new Date(),
            h = addZero(d.getHours()),
            m = addZero(d.getMinutes()),
            result = h + ":" + m;
        return result;
    }
})();