function init_file_dropzone(parameter_name) {
    Dropzone.options.myGreatDropzone = { // camelized version of the `id`
    paramName: parameter_name, // The name that will be used to transfer the file
    maxFilesize: 6  };  // MB
}
// init_file_dropzone("staffpicupload")






// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//   VISUAL EFFECTS
//



function fade_message() {
    var a_dom = document.querySelector('#alert');
    TinyAnimate.animateCSS(a_dom, 'opacity', '', 1.0, 0.0, 750, 'easeInOutQuart', function() {
    });
}

function alert_message(msg,color='yellow') {
    var a = $('#alert')
    a.text(msg)
    a.css('background-color',color)
    var a_dom = document.querySelector('#alert');
    TinyAnimate.animateCSS(a_dom, 'opacity', '', 0.0, 1.0, 500, 'easeInOutQuart', function() {
        setTimeout( fade_message, 2500 )
    });

    //a.css('visibility','visible')
}





// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//   FORM COMPONENTS
//


// TODO these should know if they're modifying the current user or someone else. 



// A single text style question
const TQuestion = Vue.component('field', {
  props: [ 'table', 'qid', 'question', 'answer', 'placeholder', 'targetid', ],
  data: function () {
    return { "a":this.answer } },
  watch: { 
    "answer": function(val,Oldval) { this.a = val },
    "a": function (val, oldVal) { 
        this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid]) },  },
  template: `<div class="pure-control-group"><label v-if="this.question" :for="this.qid" class="question">{{ question }}</label>
        <input :id="this.qid" type="text" class="form-control" v-model="a" :placeholder="placeholder" /></div>`, 
})

// A single INLINE text style question
const TIQuestion = Vue.component('ifield', {
  props: [ 'table', 'qid', 'question', 'answer', 'placeholder', 'myclass', 'targetid', ],
  data: function () {
    return { "a":this.answer } },
  watch: { 
    "answer": function(val,Oldval) { this.a = val },
    "a": function (val, oldVal) { 
        this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid]) },  },
  template: `<input :id="this.qid" type="text" v-model="a" :placeholder="placeholder" :class="this.myclass" />`, 
})

// A single checkbox
const Checkbox = Vue.component('checkbox', {
  props: [ 'table', 'qid', 'question', 'answer', 'targetid',  ],
  data: function () {
    return { "a":this.answer } },
  watch: { 
    "answer": function(val,Oldval) { this.a = val },
    "a": function (val, oldVal) { 
        var newVal = 0
        if (val==true) { newVal = 1 }
        this.$root.events.trigger('changed',[this.qid,this.table, newVal, this.targetid])  }, },
  template: `<div class="pure-controls">
        <label :for="this.qid" class="question pure-checkbox">
        <input :id="this.qid" type="checkbox" class="form-control" v-model="a" />
        {{ question }}</label></div>` 
})

// A single long format text question
const TAQuestion = Vue.component('tfield', {
  props: [ 'table', 'qid', 'question', 'answer', 'targetid',  ],
  data: function () {
    return { "a": this.answer } },
  watch: { 
    "a": function (val, oldVal) { 
      this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid])  },
    "answer": function (val, oldVal) { this.a = val }, 
  },
  template: `<div class="pure-control-group"><label :for="this.qid" class="question">{{ question }} </label>
        <textarea :id="this.qid" v-model="a"></textarea></div>` })



// Select menu
const SelMenu = Vue.component('selectmenu', {
  props: [ 'table', 'qid', 'question', 'answer', 'menu', 'labelfield', 'targetid',  ],
  data: function () {
    return { "a": this.answer } },
  watch: { 
    "a": function (val, oldVal) { 
      this.$root.events.trigger('changed',[this.qid,this.table, val, this.targetid])  },
    "answer": function (val, oldVal) { this.a = val }, 
  },
  template: `<select :id="this.qid" v-model="a" class="pure-input-1-12">
    <option v-for="o in this.$root[menu]" :value="o.id">{{o[labelfield]}}</option>
  </select>` })






// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//   ONE LINE OF THE STAFF DIR LISTING
//
const StaffLine = Vue.component('staff_line', {
    props: [ 's', 'i' ],
    //data: function() { return {  } },
    methods: {
        nope: function() { return 1; },
        odd: function(i) { if (i % 2 ==0) { return "even" } return "odd" },
        bio: function() { return "bio.php?p=" + this.s.id },
        gtitle: function() { if (this.s.gtitle) {return _.findWhere(this.$root.titles_menu, {id:this.s.gtitle}).name}; return "" },
        gdept1: function() { if (this.s.dept1) {return _.findWhere(this.$root.depts_menu, {id:this.s.dept1}).name}; return "" },
        grole: function() { if (this.s.role) {return _.findWhere(this.$root.roles_menu, {id:this.s.role}).descr}; return "" },
        swapedit: function() { console.log("edit " + this.s.first_name + " " + this.s.last_name)
            this.$emit('swapout', this.s.id) }
    },    
    template: `<div><div :class="odd(i) + ' pure-g'">
        <div class="pure-u-1-24"></div>
        <div class="pure-u-1-4">{{s.first_name}} {{s.last_name}}</div>
        <div class="pure-u-1-6">{{s.department}}</div>
        <div class="pure-u-1-6">{{s.email}}</div>
        <div class="pure-u-1-6">{{s.phone_number}}</div>
        <div class="pure-u-1-6">{{s.room}}</div>
        <div class="pure-u-1-24 clicky" v-on:click="swapedit"><span class="pure-button button-inlist">edit</span></div>
    </div><div :class="odd(i) + ' pure-g'">
        <div class="pure-u-1-24"></div>
        <div class="pure-u-1-4 subtle">{{gtitle()}}</div>
        <div class="pure-u-1-6 subtle">{{gdept1()}}</div>
        <div class="pure-u-1-6 subtle">{{grole()}}</div>
        <div class="pure-u-1-6 subtle">
        Published: <span v-if="s.status!=0">Yes</span><span v-else>No</span><br />
        personnel_ext: <span v-if="s.ext_id!=null">Yes</span><span v-else>No</span><br />
        c_users: <span v-if="s.c_users_id_ext!=null || s.conf_id!=null">Yes</span><span v-else>No</span>
        </div>
        <div class="pure-u-1-6 subtle"></div>
        <div class="pure-u-1-24 subtle"></div>
    </div></div>
    `
});



//
//
//   STAFF DIR LISTING
//
//   ONE LINE - BUT EDITING!
//
const StaffLineEdit = Vue.component('staff_line_edit', {
    props: [ 's', 'i' ],
    //data: function() { return {  } },
    methods: {
        nope: function() { return 1; },
        odd: function(i) { if (i % 2 ==0) { return "even" } return "odd" },
        bio: function() { return "bio.php?p=" + this.s.id },
        done: function() { this.$emit('done_edit') },
        
    },    //v-lazy-container="{ selector: 'img' }"
    template: `<form class="pure-form">
    <div :class="odd(i) + ' pure-g'">
        <div class="pure-u-1-24"><img :src="'//www.gavilan.edu/staff/' + s.dir_pic_path" width="25" height="auto" /></div> 
        <div class="pure-u-1-4">
            <ifield myclass="double" table="personnel" qid="first_name" :answer="s.first_name" :targetid="s.id" placeholder="First Name"></ifield>
            <ifield myclass="double" table="personnel" qid="last_name" :answer="s.last_name" :targetid="s.id" placeholder="Last Name"></ifield>
        </div>
        <div class="pure-u-1-6">
            <ifield table="personnel" qid="department" :answer="s.department" :targetid="s.id" placeholder="Department"></ifield>
        </div>
        <div class="pure-u-1-6">
            <ifield table="personnel" qid="email" :answer="s.email" :targetid="s.id" placeholder="Email"></ifield>
        </div>
        <div class="pure-u-1-6">
            <ifield table="personnel" qid="phone_number" :answer="s.phone_number" :targetid="s.id" placeholder="Phone Number"></ifield>
        </div>
        <div class="pure-u-1-6">
            <ifield table="personnel" qid="room" :answer="s.room" :targetid="s.id" placeholder="Room"></ifield>
        </div>
        <div class="pure-u-1-24 clicky" v-on:click="done"><span class="pure-button button-inlist-action">done</span></div>
    </div>
    <div :class="odd(i) + ' pure-g'">
        <div class="pure-u-1-24"></div>
        <div class="pure-u-1-4">
            <selectmenu table="personnel_ext" qid="gtitle" :answer="s.gtitle" menu="titles_menu" :targetid="s.ext_id" labelfield="name"></selectmenu>
        </div>
        <div class="pure-u-1-6">
            <selectmenu table="personnel_ext" qid="dept1" :answer="s.dept1" menu="depts_menu" :targetid="s.ext_id" labelfield="name"></selectmenu>
        </div>
        <div class="pure-u-1-6">
            <selectmenu table="personnel_ext" qid="role" :answer="s.role" menu="roles_menu" :targetid="s.ext_id" labelfield="descr"></selectmenu>
        </div>
        <div class="pure-u-1-6">
        </div>
        <div class="pure-u-1-62">
        </div>
    </div>
    </form>
    `
});





// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//    STAFF DIR LISTING MAIN CONTAINER
// 
const DirList = Vue.component('dirlist', {
  data: function () {
    return { "personnel":[], sortby:'last_name', search:'', reversed: false,
             components: {n:StaffLine, e: StaffLineEdit }, editing: -1,    }  },
  mounted: function() { 
        var self = this;
        this.$root.fetch_menus();
        
        fetch('dir_api.php?a=list', { method: 'GET' }).then(function (response) {
            // The API call was successful!
            if (response.ok) {
                response.json().then( function(r2) { 
                    self.personnel = r2; 
                    _.each( self.personnel, function(x) { 
                    if (x.dir_photo_path==null) { x.dir_photo_path='images_sm/nobody.jpg' } 
                    x.searchable = x.first_name.toLowerCase() + ' ' + x.last_name.toLowerCase()
                    if (x.department) { x.searchable += ' ' + x.department.toLowerCase() }
                    } )
                    //if (self.user.use_dir_photo == "0") { self.user.use_dir_photo = false }
                    //if (self.user.general_photo_release == "0") { self.user.general_photo_release = false }
                    // pause half a second for the children to get populated before registering update events...
                    setTimeout(function() { 
                        //self.active = true; 
                        // fancier text editors...
                        //pell.init( { element: document.getElementById('bio2'), onChange: function(h) { console.log(h) } } )
                    }, 1600); 
                } )
            } else { return Promise.reject(response) }
        }).then(function (data) {
        }).catch(function (err) { console.warn('Something went wrong.', err); });
  },
  methods: {
      setsort: function(ss) { 
        if (this.sortby == ss) { this.reversed = ! this.reversed }
        else { 
            this.reversed = false
            this.sortby = ss
        }
      },
      swapme: function(x) { 
        this.editing = x
      },
      done_edit: function(id) { 
        this.editing = -1
      },
      am_editing: function(id) { 
        if (id == this.editing) { return StaffLineEdit }
        return StaffLine
      },
  },
  computed: {
      filtered: function() {
          var ff = this.personnel
          var self = this
          if (this.search) { 
            var ss = self.search.toLowerCase()
            ff = ff.filter(function(x) { return x.searchable.includes(ss) }) }
            
          ff = _.sortBy(ff, function(x) { 
              if (x[self.sortby]) {
                    var s = x[self.sortby]; 
                    return s.trim().toLowerCase() }
              return '' })
          if (this.reversed) {
              ff.reverse()
          }
          return ff
      }
  },
  watch: { 
  },
  template: `<div class="">
            <div class="pure-g pure-form">
                <div class="pure-u-1-24"></div>
                <div class="pure-u-3-4"><b>Filter: </b><input type="text" v-model="search" name="dirfilter" class="double" /></div>
            </div> 
            <br />
            <div class="pure-g pure-form">
                <div class="pure-u-1-24">&nbsp;</div>
            </div> 
            <div class="pure-g pure-form">
                <div class="pure-u-1-24"></div>
                <div v-on:click="setsort('last_name')" class="pure-u-1-4 clicky"><b>Name</b></div>
                <div v-on:click="setsort('department')" class="pure-u-1-6 clicky"><b>Dept</b></div>
                <div v-on:click="setsort('email')" class="pure-u-1-6 clicky"><b>Email</b></div>
                <div class="pure-u-1-6"><b>Phone</b></div>
                <div v-on:click="setsort('room')" class="pure-u-1-6 clicky"><b>Room</b></div>
            </div>
            <!-- <staff_line_edit :s="this.$root.user" :i="0" :key="'staff_000'"></staff_line_edit> -->
            <component :is="am_editing(p.id)" v-on:swapout="swapme" v-on:done_edit="done_edit" v-for="p,i in filtered" :s="p" :i="i" :key="'staff_'+p.id + '_' + i"></component>
            </div>` })







// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//    ACTIVITIES LIST MAIN CONTAINER
// 
const ActivityList = Vue.component('activitylist', {
  data: function () {
    return { activities:[], sortby:'title', reversed:false, editing: -1,    }  },
  mounted: function() { 
        var self = this;
        this.$root.fetch_menus();
        
        fetch('dir_api.php?a=get/sessions', { method: 'GET' }).then(function (response) {
            // The API call was successful!
            if (response.ok) {
                response.json().then( function(r2) { 
                    self.activities = r2; 
                    _.each( self.activities, function(x) {
                    x.searchable = x.title.toLowerCase() + ' ' + x.desc.toLowerCase()
                    //if (x.department) { x.searchable += ' ' + x.department.toLowerCase() }
                    } )
                    //if (self.user.use_dir_photo == "0") { self.user.use_dir_photo = false }
                    //if (self.user.general_photo_release == "0") { self.user.general_photo_release = false }
                    // pause half a second for the children to get populated before registering update events...
                    setTimeout(function() { 
                        //self.active = true; 
                        // fancier text editors...
                        //pell.init( { element: document.getElementById('bio2'), onChange: function(h) { console.log(h) } } )
                    }, 1600); 
                } )
            } else { return Promise.reject(response) }
        }).then(function (data) {
        }).catch(function (err) { console.warn('Something went wrong.', err); });
  },
  methods: {
      setsort: function(ss) { 
        if (this.sortby == ss) { this.reversed = ! this.reversed }
        else { 
            this.reversed = false
            this.sortby = ss
        }
      },
      swapme: function(x) { 
        this.editing = x
      },
      done_edit: function(id) { 
        this.editing = -1
      },
      am_editing: function(id) { 
        return 0;
      },
  },
  computed: {
      filtered: function() {
          var ff = this.activities
          var self = this
          if (this.search) { 
            var ss = self.search.toLowerCase()
            ff = ff.filter(function(x) { return x.searchable.includes(ss) }) }
            
          ff = _.sortBy(ff, function(x) { 
              if (x[self.sortby]) {
                    var s = x[self.sortby]; 
                    return s.trim().toLowerCase() }
              return '' })
          if (this.reversed) {
              ff.reverse()
          }
          return ff
      }
  },
  watch: { 
  },
  template: `<div class="">
            <div class="pure-g pure-form">
                <div class="pure-u-1-24"></div>
                <div class="pure-u-3-4"><b>Filter: </b><input type="text" v-model="search" name="dirfilter" class="double" /></div>
            </div> 
            <br />
            <div class="pure-g pure-form">
                <div class="pure-u-1-24">&nbsp;</div>
            </div> 
            <div class="pure-g pure-form">
                <div class="pure-u-1-24"></div>
                <div v-on:click="setsort('last_name')" class="pure-u-1-4 clicky"><b>Name</b></div>
                <div v-on:click="setsort('department')" class="pure-u-1-6 clicky"><b>Dept</b></div>
                <div v-on:click="setsort('email')" class="pure-u-1-6 clicky"><b>Email</b></div>
                <div class="pure-u-1-6"><b>Phone</b></div>
                <div v-on:click="setsort('room')" class="pure-u-1-6 clicky"><b>Room</b></div>
            </div>
            <!-- <staff_line_edit :s="this.$root.user" :i="0" :key="'staff_000'"></staff_line_edit> -->
            <component :is="am_editing(p.id)" v-on:swapout="swapme" v-on:done_edit="done_edit" v-for="p,i in filtered" :s="p" :i="i" :key="'staff_'+p.id + '_' + i"></component>
            </div>` })











// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//    VERY SIMPLE CALENDAR
// 
const MyCal = Vue.component('mycal', {
  data: function () {
    return { today:new Date(), currentMonth:0, currentYear:0, selectYear:'', selectMonth:'', 
             months:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
             activities:[],
             by_date: {},
             editing: -1,    }  },
  mounted: function() { 
        var self = this
        this.currentYear = this.today.getFullYear()
        this.currentMonth = this.today.getMonth()
        this.selectYear = this.currentYear
        this.selectMonth = this.currentMonth
        
        fetch('dir_api.php?a=get/sessions', { method: 'GET' }).then(function (response) {
            if (response.ok) {
                response.json().then( function(r2) { 
                    self.activities = r2
                    _.each( self.activities,  function(x) { 
                        var dd = new Date(x.starttime); 
                        var [m,d,y] = [dd.getMonth(), dd.getDate(), dd.getFullYear()]      //  months start at 0....
                        var d_string = d + "-" + m + "-" + y
                        if (self.by_date[d_string]) { self.by_date[d_string].push(x) }
                        else { self.by_date[d_string] = [x, ] } } )
                    self.$forceUpdate()
                } )
            } else { return Promise.reject(response) }
        }).then(function (data) {
        }).catch(function (err) { console.warn('Something went wrong.', err); }); 
  },
  methods: {
    thisDay: function(i,j) {
        var dayOfMonth = ((7*(i-1))+j)-this.firstDay()
        return dayOfMonth
    },
    eventsThisDay: function(i,j) {
        var dayOfMonth = ((7*(i-1))+j)-this.firstDay()
        var d_string = dayOfMonth + "-" + this.selectMonth + "-" + this.selectYear
        var day_text = ''
        
        if (this.by_date[d_string]) {
            evts = _.filter( this.by_date[d_string], function(x) { console.log(x); return x.typeId!="101" } )
            console.log(evts)
            return evts
        }
        return []
    },
    cleanTime: function(e) {
        var dd = new Date(e.starttime); 
        var [h,m] = [dd.getHours(), dd.getMinutes()]  
        var ampm = 'am'
        if (h > 12) { h -= 12; ampm = 'pm' }
        if (m == 0) { m = '' }
        else { m = ':' + m }
        return h + m + ampm
    },
    daysInMonth: function() {
        return 32 - new Date(this.selectYear, this.selectMonth, 32).getDate()
    },
    firstDay: function() {
        return (new Date(this.selectYear, this.selectMonth)).getDay()
    },
    next: function() {
        this.selectYear = (this.selectYear === 11) ? this.selectYear + 1 : this.selectYear;
        this.selectMonth = (this.selectMonth + 1) % 12;
    },
    previous: function() {
        this.selectYear = (this.selectYear === 0) ? this.selectYear - 1 : this.selectYear;
        this.selectMonth = (this.selectMonth === 0) ? 11 : this.selectMonth - 1;
    },
  },
  computed: {
  },
  watch: { 
  },
  template: `<div class="calendar">
            <h2>{{months[selectMonth] + " " + selectYear}}
            <div class="btn_container">
            <div class="btn_float">
                <button class="pure-button" v-on:click="previous">Previous</button>
                <button class="pure-button" v-on:click="next">Next</button>
            </div>
            </div>
            </h2>
            <table>
            <thead>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
            </thead>

            <tbody id="calendar-body">
                <tr v-for="i in 6"  v-if="(((7*(i-1)))-firstDay() < daysInMonth()+1)">
                    <td v-for="j in 7">
                        <span v-if="( ((7*(i-1))+j)-firstDay() > 0)  &&  (((7*(i-1))+j)-firstDay() < daysInMonth()+1)">
                        <div class="do_month">{{  thisDay(i,j)  }}</div>
                        <div class="cal_evt" v-for="ev in eventsThisDay(i,j)">{{cleanTime(ev)}} {{ ev.title }}</div>
                        </span>
                    </td>
                </tr>
            </tbody>
            </table>
            <!--<label for="month">Jump To: </label>
            <select class="pure-input-1-12" name="month" id="month" v-model="selectMonth">
                <option v-for="m in 12" :value="m-1">{{months[m-1]}}</option>
            </select>
            <label for="year"></label>
            <select class="pure-input-1-12" name="year" id="year" v-model="selectYear">
                <option v-for="i in 5" :value="2018+i">{{2018+i}}</option>
            </select>-->
            </div>` })










// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//   AJAX POST UPDATES TO API
//

function post_update(table,cols,vals,id=0) {
    action = "nothing"
    if (table=="personnel") { action = "update" }
    if (table=="personnel_ext") { action = "update_xt" }
    if (table=="webpages") { action = "update_web" }
    var idstr = ""
    if (id) { idstr = "&id=" + id }
    
    console.log("a="+action+"&cols="+cols+"&vals="+vals+idstr)
    
    fetch('dir_api.php', { 
        method: 'POST', 
        headers: new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }), 
        body: "a="+action+"&cols="+cols+"&vals="+vals+idstr,
    }).then(function (response) {
        // The API call was successful!
        if (response.ok) {
            response.json().then( function(r2) { 
                //  display success alert
                alert_message('Saved.')

            } )
        } else { return Promise.reject(response) }
    }).then(function (data) {
    }).catch(function (err) { alert_message("Couldn't save!",pink); console.warn('Something went wrong.', err); });
}

var evt = { 
    clear_tables: function() { 
        var self = this
        _.each( this.tables, function(x) { self[x] = [] } )
        this.data = {}
        this.target_ids = {}   },
    send_update: function() { 
        var self = this
        //console.log("Sending update... (not really)") 
        _.each( this.tables, function(x) {
            if (self[x].length) { 
                var cols = ""
                var vals = ""
                _.each(self[x], function(y) {
                    if (cols.length) { cols += "," }
                    if (vals.length) { vals += "," }
                    cols += y 
                    if (typeof self.data[y] == "string") { 
                        re = /,/g
                        vals += encodeURIComponent(self.data[y].replace(re,'[CMA]') ) }
                    else { vals += self.data[y]  }
                })
                //console.log("table: " + x + " Columns: " + cols + ".. Vals: " + vals)
                var edit_other = 0
                if (self.target_ids[x]) { edit_other = self.target_ids[x] }
                post_update(x, cols, vals, edit_other)
            }
        } ) },
    info: "what am I?" ,
    data: {},
    target_ids: {},
    tables: ['personnel','personnel_ext','webpages','welcomepages','conf_sessions','conf_hosts',
    'pers_departments','pers_committees','pers_titles'],
}




// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//   INITIALIZE THE APP
//

evt.clear_tables()            
MicroEvent.mixin(evt);

var app = new Vue({ 
  el: '#dir_editor',
  data: { events: evt, 
    msg: 'hello', active: false,
    user: {'last_name':'', 'first_name':'', 'department':'', 'extension':'', 'phone_number':'', 'email':'',
            'staff_type':'', 'room':'', 'status':'', 'user_id':'', 'password':'', 'time_created':'', 'time_updated':'', 
            'id':'', 'web_on':'', use_dir_photo:0, general_photo_release:0,
            officehours:'', title:'', picture:'', education:'', bio:'', courses:'', personal_page:'', changed:''             },
    filter: [],
    roles_menu: [],
    depts_menu: [],
    titles_menu: [],
    committees_menu: [],
    menus_fetched: false,
  },
  watch: { },
  methods: { 
    fetch_menus: function() {
        if (! this.menus_fetched) {
            var self = this;
            fetch('dir_api.php?a=menus', { method: 'GET' }).then(function (response) {
                // The API call was successful!
                if (response.ok) {
                    response.json().then( function(r2) { 
                        self.depts_menu = r2.departments; 
                        self.roles_menu = r2.roles; 
                        self.titles_menu = r2.titles; 
                        self.committees_menu = r2.committees; 
                        self.menus_fetched = true;
                    } )
                } else { return Promise.reject(response) }
            }).then(function (data) {
            }).catch(function (err) { console.warn('Something went wrong.', err); });
        }


        
    },
  },
  computed: {  },
  mounted: function() { 
        var self = this;
        fetch('dir_api.php', { method: 'GET' }).then(function (response) {
            // The API call was successful!
            if (response.ok) {
                response.json().then( function(r2) { 
                    self.user = r2; 
                    if (self.user.use_dir_photo == "0") { self.user.use_dir_photo = false }
                    if (self.user.general_photo_release == "0") { self.user.general_photo_release = false }
                    // pause half a second for the children to get populated before registering update events...
                    setTimeout(function() { 
                        self.active = true; 
                        // fancier text editors...
                        //pell.init( { element: document.getElementById('bio2'), onChange: function(h) { console.log(h) } } )
                    }, 1600); 
                } )
            } else { return Promise.reject(response) }
        }).then(function (data) {
        }).catch(function (err) { console.warn('Something went wrong.', err); });
  }
})


// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
// 
//   SIMPLE EVENTS
//

var update_fxn = _.debounce( function() {
    alert_message('saving...','lightgreen')
    evt.send_update(); evt.clear_tables(); }, 1300 )

evt.bind('changed', function(dat) { 
    if (app.active) { 
        var column = dat[0]
        var table = dat[1]
        var value = dat[2]
        var target = dat[3]
        console.log(dat)
        this.data[column] = value
        if (!this[table].includes(column) ) {this[table].push(column)}
        if (target) { this.target_ids[table] = target }
        update_fxn() }
});










//
//
//   MISC
//
//

//
//     <img :src="'//www.gavilan.edu/staff/' + s.dir_photo_path" width="25" height="auto" />
//     v-lazy-container="{ selector: 'img' }"
//