//displays information about a user
function User (id, user, gear, menuWidget, myTrailbehind) {  
  this.div = gel(id);
  this.user = user; 
  this.gear = gear;
  this.menu = menuWidget; 
  this.my_trailbehind = myTrailbehind;
  this.tripViewer; 
}


//appends the HTML to this.div
User.prototype.renderHTML = function() {
  user = this.user;
  var uDiv = dec('div');
  var h1 = dec('h1');
  if (this.my_trailbehind == 'True') {
    h1.appendChild(dct('My TrailBehind'));
  } else {
    h1.appendChild(dct(this.user.name + '\'s TrailBehind'));
  }  
  uDiv.appendChild(h1);

  if (user.summary != "None") {
    uDiv.appendChild(dct(user.summary));
  } else {
    if (this.my_trailbehind == 'True') {
      var a = dec('a')
      a.className = 'jLink';
      var self = this;
      a.onclick = function() { showUserTab(self) };
      a.appendChild(dct('Create'));
      uDiv.appendChild(a)
      uDiv.appendChild(dct(' a short description of yourself.'));
    }
  }
  var ol = dec('ul');
  var li = dec('li');
  li.appendChild(dct('Journal '));
  a = dec('a');
  a.className = 'jLink';
  var self = this;
  a.onclick = function () {self.showJournal()}
  a.appendChild(dct('(' + (user.report_count) + ' reports)'));
  li.appendChild(a);
  ol.appendChild(li);
  if (this.my_trailbehind == 'True') {
    var li = dec('li');
    a = dec('a');
    a.href = '/user/' + user.username;
    a.appendChild(dct('Public Profile'));
    li.appendChild(a);
    ol.appendChild(li);
  }
  var li = dec('li');
  li.appendChild(dct('Logbook '));
  a = dec('a');
  a.className = 'jLink';
  var self = this;
  a.onclick = function () {self.showLogbook()}
  a.appendChild(dct('(' + user.trip_count + ' trips)'))
  li.appendChild(a);
  ol.appendChild(li);
  uDiv.appendChild(ol);
  //fix this at some point
  li.style.display = 'none';
  
  if (this.my_trailbehind == 'False' && this.gear.length == 0) {
    //console.log('no gear'); 
  } else {
    var div = dec('div');
    var h1 = dec('h1');
    h1.appendChild(dct('Favorite Gear'));
    div.appendChild(h1);
   
    if (this.gear.length == 0) {
      a = dec('a')
      a.appendChild(dct('Add'))
      a.onclick = function() {showGearTab()} 
      a.className = 'jLink'
      div.appendChild(a);
      div.appendChild(dct(' some gear to your profile.'));
      div.appendChild(dec('br'));
      div.appendChild(dec('br'));
    } else {
      var ul = dec('ul');
      for (i=0; i< this.gear.length; i++) {
        gear = this.gear[i];
        var li = dec('li');
        var a = dec('a');
        a.id = 'gear' + gear.id;
        a.className = 'jLink';
        var self = this;
        a.onclick = function () {self.showGear(this)};
        if (gear.color) {
          a.appendChild(dct(gear.color + ' '));
        } 
        if (gear.brand) {
          a.appendChild(dct(gear.brand + ' '));
        } 
        if (gear.type) {
          a.appendChild(dct(gear.type + ' '));
        } 
        li.appendChild(a);
        ul.appendChild(li)
      }
      div.appendChild(ul)
    }
    uDiv.appendChild(div)
  }
  //h1 = dec('h1')
  //if (this.my_trailbehind == 'True') {
  //  h1.appendChild(dct('My Comment Thread'))
  //} else {
  //  h1.appendChild(dct(this.user.name + '\'s Comment Thread'))
  //}  
  //uDiv.appendChild(h1)
  rac(this.div)
  this.div.appendChild(uDiv)
}


//shows the full information about a piece of gear when clicked
User.prototype.showGear = function(a) {
  li = a.parentNode;
  //console.log(a.id.substring(4,a.id.length))
  //console.log(this.gear)
  for (var i=0;i<this.gear.length;i++) {
    if (a.id.substring(4,a.id.length) == this.gear[i].id) { 
      gear = this.gear[i]
    }
  }
  if (!li.childNodes[1]) { 
    li.appendChild(dec('br'))
    if (gear.model != 'None') {
      var div = dec('div');
      div.appendChild(dct('Model: ' + gear.model))
      li.appendChild(div);
    }
    if (gear.maker) {
      li.appendChild(dct(' made by '))
      var a = dec('a');
      a.href='#';
      a.appendChild(dct(gear.maker))
      li.appendChild(a);
    } 
    if (gear.report && gear.report.text) {
      div = dec('div');
      div.appendChild(dct('Why I like them: ' + gear.report.text))
      li.appendChild(div)
    }
    div = dec('div');
    if (gear.date_purchased != 'None') {
      div.appendChild(dct('Purchased on ' + gear.date_purchased))
    }
    if (gear.low_price != 'None' && gear.high_price != 'None' ) {
      div.appendChild(dct('for $' + gear.low_price + '-$' + gear.high_price))
    } else if (gear.low_price != 'None' ) {
      div.appendChild(dct('for $' + gear.low_price))   
    } else if (gear.high_price != 'None' ) {
      div.appendChild(dct('for $' + gear.high_price))   
    }

    li.appendChild(div)
 } else {
    rac(li);
    var a = dec('a');
    a.id = 'gear' + gear.id;
    a.className = 'jLink';
    var self = this;
    a.onclick = function () {self.showGear(this)};
    a.appendChild(dct(gear.color + ' ' + gear.brand + ' ' + gear.type))
    li.appendChild(a)
 }
}


User.prototype.showLogbook = function() {
  this.menu.addBasicTab('Logbook', 'tripsListId')
  this.menu.refresh();
  tripWidget = new TripWidget('tripsListId', this.menu)
  tripWidget.trips = this.trips;
  tripWidget.tripsTableHTML = tripWidget.makeTripsListHTML();
  tripWidget.initDiv();
  this.menu.tabs['Logbook'].show()
}

User.prototype.showJournal = function() {
  var tab = this.menu.addBasicTab('Journal', 'reportsId')
  tab.action = function() {
    //gel('navId').style.display = 'none';
    reportList.renderHTML('All')
  }
  this.menu.refresh();
  reportList = new ReportList('reportsId', map)
  reportList.user = true;
  reportList.getUserReports(this.user.id)
  reportList.renderHTML('All')
  this.menu.tabs['Journal'].show()
}

function ControlPanel(id) {
  this.div = gel(id);
}

ControlPanel.prototype.renderHTML = function() {
  cDiv = dec('div')
  h1 = dec('h1')
  h1.appendChild(dct('Controls'))
  cDiv.appendChild(h1)
  ol = dec('ol')
  li = dec('li')
  a = dec('a')
  a.appendChild(dct('File Reports & Upload Data'))
  a.href = '/upload/upload_gps';
  li.appendChild(a)
  ol.appendChild(li)
  li = dec('li')
  a = dec('a')
  a.appendChild(dct('Add Gear'))
  a.onclick = function() {showGearTab()} 
  a.className = 'jLink'
  li.appendChild(a)
  ol.appendChild(li)
  li = dec('li')
  a = dec('a')
  a.appendChild(dct('Edit profile information'))
  a.onclick = function() { showUserTab(self) };
  a.className = 'jLink'
  li.appendChild(a)
  ol.appendChild(li)
  cDiv.appendChild(ol)
  rac(this.div)
  this.div.appendChild(cDiv)
}


//add a Reports Tab to the page's menu widget and show the tab
function showUserTab(user)  {
  map.menu.addBasicTab('Edit','userFormId');
  map.menu.refresh();
  gForm = new UserForm('userFormId',user);
  map.menu.tabs['Edit'].show()
}


//a form for submitting gear
function UserForm (id, user) {
  this.div = gel(id)
  this.user = user;
  this.renderHTML();
}


//render the form to this.div
UserForm.prototype.renderHTML = function() {
  rac(this.div)  
  var userDiv = dec('div');
  userDiv.className = 'UserForm';
  var h1 = dec('h1');
  h1.appendChild(dct('Edit Your Profile'));
  userDiv.appendChild(h1);
  var form = dec('form');
  form.action = '/user/mytrailbehind/save'
  form.method = 'POST'
  form.appendChild(dec('br'));
  form.appendChild(dct('Email '));
  var input = dec('input');
  input.type = 'text';
  input.name = 'userEmail';
  if (this.user.user.email == "None") {
    input.onfocus = clearInitialValue;
    input.value = "john.doe@gmail.com"
  } else {
    input.value = this.user.user.email;
    input.style.color = 'black'
  }
  form.appendChild(input);
  form.appendChild(dec('br'));
  var input = dec('textarea');
  input.name = 'userSummary';
  input.className = "required" 
  if (this.user.user.summary == 'None') {
    input.onfocus = clearInitialValue;
    input.value = "Enter an interesting blurb about yourself, focusing on your outdoor activities."
  } else {
    input.value = this.user.user.summary;
    input.style.color = 'black'
  }
  input.style.marginTop = "5px";
  input.style.marginBottom = "5px";
  form.appendChild(input);
  form.appendChild(dec('br'));
  input = dec('input');
  input.className = 'save';
  input.type = 'submit';
  input.value = 'Save Overview';
  form.appendChild(input);
  userDiv.appendChild(form);
  this.div.appendChild(userDiv);
  attachToForms();  
}