
Ox.ItfBoxCommented = function(options, self) {
  var self = self || {};
  var that = new Ox.Element(options, self)
    .defaults({
      'title': '',
      'extraButtons': []
    })
    .options(options);
  var title = self.options.title; 
  var $titlebar = new Ox.Bar({
          orientation: 'horizontal',
          size: 18
      })
//      .dblclick(dblclickTitlebar)
      .appendTo(that);


  var $title = new Ox.Element()
      .addClass('OxTitle')
      .html(title/*.toUpperCase()*/)
      .appendTo($titlebar);


  var $search = new Ox.Input({
    'placeholder': 'Search',
  })
  .css({'width': '128px', 'marginLeft': 'auto', 'marginRight': 'auto'})
  .appendTo(that)
  .hide()
  .bindEvent("submit", function(value) {
    app.$ui[options.boxId].$loading.start();
    $list.options("request", function(data, callback) {
      app.$ui[options.boxId].$loading.stop();
      return app.api.find(getQueryParams(data), callback);
    });
  });


  that.search = function(word) {
    $search.options("value", word);
    $search.triggerEvent("submit");
  }

  var $buttons = new Ox.Element().appendTo($title).css({'position': 'absolute', 'top': '1px', 'right': '1px'});



  var $additionalButtons = self.options.extraButtons;
  if ($additionalButtons.length > 0) {
    $additionalButtons.appendTo($buttons);
  }

  var $addBtn = new Ox.Button({
    id: options.id + "AddItem",
    style: 'symbol',
    title: 'add',
    type: 'image',
    tooltip: 'Add'
  })
  .appendTo($buttons)
  .bindEvent("click", function() {
    app.$ui[options.boxId].$loading.start();
    app.api.getAddItemForm({
      'module': that.options("module"),
      'model': that.options("model")
    }, function(response) {
      app.$ui[options.boxId].$loading.stop();
      var form = response.data.form;
      var $content = new Ox.Element();
      var $items = [];
      for (var i=0; i<form.length; i++) {
        var field = form[i];
        switch (field.widget) {
          case 'select':
         //   alert(field.label);
            var $input = new Ox.Select({
              'items': field.choices,
              'label': field.label,
              'id': field.name,
              'width': 256
            });
            //$items.push($input);
            break;

          case 'textarea':
            var $input = new Ox.Input({
              'type': field.widget,
              'id': field.name,
              'label': field.label,
              'width': 384,
              'height': 200,
              'labelWidth': 128
            });
            $items.push($input);
            break;

          default: 
          //  alert("default: " + field.label);
            var $input = new Ox.Input({
              'type': field.widget,
              'id': field.name,
              'label': field.label,
              'labelWidth': 128,
              'width': 384
            });
            $items.push($input);
        }
     //   $items.push($input);
      }
      Ox.print("items", $items);
      var $form = new Ox.Form({
        'id': 'AddItem' + that.options("model"),
        'items': $items,
        'submit': function(data, callback) {
          data['model'] = that.options("model");
          data['module'] = that.options("module");
          app.api.addItem(data, function(result) {
            alert(JSON.stringify(result));
          });
        } 
      }).appendTo($content);
      var d = new Ox.Dialog({
        buttons: [
          new Ox.Button({
            'id': 'SubmitItem' + that.options("model"),
            'size': 'medium',
            'title': 'Submit'
          }).bindEvent("click", function() { $form.submit(); }),
          new Ox.Button({
            'id': 'cancel',
            'title': 'Cancel',
          }).bindEvent("click", function() { d.close(); })        
        ],
        content: $content,
        width: 600,
        height: 500,
        title: 'Add Best Practice'
      }).open();            
    });    
  });

  var $infoBtn = new Ox.Button({
    id: options.id + "InfoBtn",
    style: 'symbol',
    title: 'info',
    type: 'image',
    tooltip: 'More info about ' + options.title 
  })
    .appendTo($buttons)
    .bindEvent("click", function() {
      var info = options.info;
      var d = new Ox.Dialog({
        buttons: [
          new Ox.Button({
            id: 'cancel',
            title: 'Close',
            })
            .bindEvent("click", function() { d.close(); })
        ],
        content: new Ox.Element().html(info),
        title: options.title
      })
      .open();
    });

  var $searchBtn = new Ox.Button({
          id: options.id + 'SearchBtn',
          style: 'symbol',
          title: 'find',
          type: 'image',
          tooltip: 'Search'
      })      
      .bindEvent("click", function() {
        if ($search.is(":visible")) {
          $search.slideUp();
        } else {
          $search.slideDown();
          $search.focus();
        }
      })
      .appendTo($buttons);
 

  var $menuBtn = new Ox.Button({
    id: options.id + 'MenuBtn',
    style: 'symbol',
    title: 'collapse',
    type: 'image',
    tooltip: 'Show Menu'
  }).appendTo($buttons);

  that.$loading = new Ox.LoadingIcon().appendTo($buttons);

  var $menu = new Ox.Menu({
    id: options.id + 'Menu',
    element: $menuBtn,
    items: [
      {
        id: 'SortBy',
        title: 'Sort By',
        items: [
          {
            'group': 'sortGroup', 
            'min': 1, 
            'max': 1,
            items: [
              {'id': 'sort_added_descending', title: 'Added (Descending)', checked: true},
              {'id': 'sort_added_ascending', title: 'Added (Ascending)'},
              {'id': 'sort_title_ascending', title: 'Title (Ascending)'},
              {'id': 'sort_title_descending', title: 'Title (Descending)'},
            ]
          }
        ]
      },
      {id: 'Test2', title: 'Menu Item 2'}
    ]
  })
  .bindEvent("change", function(e, data) {
    if (data.id === 'sortGroup') {
      var checked = data.checked[0];
      var checkedId = checked.id;
      var checkedField = checkedId.split("_")[1];
      var operator = checkedId.split("_")[2] == "ascending" ? "+" : "-";      
      $list.sortList(checkedField, operator);
    }
  });

//  var $menu = new Ox.Menu({
//    id: options.id + 'Menu',
//    element: $menuBtn,
//    items:  [
//          {
//            'group': 'sortGroup', 
//            'min': 1, 
//            'max': 1,
//            items: [
//              {'id': 'sortTitleAscending', title: 'Title (Ascending)', checked: true},
//              {'id': 'sortTitleDescending', title: 'Title (Descending)'},
//              {'id': 'sortTitleAscendingFoo', title: 'Title (Ascending)'},
//              {'id': 'sortTitleDescendingFoo', title: 'Title (Descending)'},
//            ]
//          }
//        ]
//      },
//      {id: 'Test2', title: 'Menu Item 2'}
//    ] 
//  })
//  .bindEvent("change", function() {
//    alert("foo");
//  });

//  
  
  $menuBtn.bindEvent("click", function() {
    $menu.showMenu();
  });

  function getQueryParams(data) {
//    Ox.print("SEARCHVAL", $search.val());
    return $.extend(data, {
      'search': $search.value() == 'Search' ? '' : $search.value(),
      'model': options.model,
      'module': options.module
    });
  }

  var $listContainer = that.$listContainer = new Ox.Element()
    .appendTo(that)
    .css({position: 'relative', height: '90%'});

  var listOptions = $.extend(options, {
      'width': 256,
//      'itemHeight': 16,
//      'itemWidth': 250,
//      'orientation': 'horizontal',
      'items': function(data, callback) {
        return app.api.find(getQueryParams(data), callback)
      },
      'id': options.id + 'List',
      'boxId': options.id,
      

/*
      'construct': function(data) {
        var $a = $('<a />').attr("href", "/" + options.module.toLowerCase() + "/" + data.id).text(data.title); 
        var $item = $('<div />').addClass('OxTarget').append($a);
        return $item;
      },
*/
      'max': 1,
      'columns': [
        {
          align: 'left',
          id: 'title',
          operator: '-',
          unique: false,
          visible: true,
          width: 256
        },
        {
          id: 'id',
          visible: false,
          unique: true  
        }
      ],
      'sort': [
        {
          key: 'added',
          operator: '-'
        }
      ]        
    });

  var $list = that.$list = new Ox.ItfList(listOptions)
    .appendTo($listContainer);

  return that;   
}


/*
Ox.ItfList = function(options, self) {
  var self = self || {};
  var opts = $.extend({
    'scrollbarVisible': true,
    'hasComments': true
  }, options);
  var that = new Ox.TextList(opts, self);
  that.bindEvent("select", function(e, data) {
    if (data.ids.length === 0) {
      app.$ui.previewBox.$content.html('');
      return;
    }
    app.$ui[options.boxId].$loading.start();
//    debugger;
    app.api.preview({
      model: opts.model,
      module: opts.module,
      id: data.ids[0]
    }, function(response) {
//      alert(JSON.stringify(response.data.data));
      app.$ui[options.boxId].$loading.stop();
//      var data = add_newlines(response['data']);
      var html = $.tmpl(response['template'], response['data']);
      app.$ui.previewBox.$content.html(html);
    }); 
  });
  that.bindEvent("open", function(e, data) {
//    alert(JSON.stringify(data));
    app.$ui[opts.boxId].$loading.start();
    app.api.info({
      model: opts.model,
      module: opts.module,
      id: data.ids[0] 
    }, function(response) {
      app.$ui[opts.boxId].$loading.stop();
      var html = $.tmpl(response['template'], response['data']);
      var content = new Ox.Element().append(html);
      var commentForm = ITF.CommentForm(opts, response['commentForm']).appendTo(content);
      var comments = _getComments(response['comments']).appendTo(content);
//      alert(html);
      var d = new Ox.Dialog({
        buttons: [
          new Ox.Button({
            id: 'cancel',
            title: 'Close',
            })
            .bindEvent("click", function() { d.close(); })
        ],
        'content': content,
        title: options.title + ": " + response.data.title,
        width: 800,
        height: 500
      })
      .open();
//      alert(response);      
    });
  });
  return that;
}
*/

function _getComments(comments) {
  var that = new Ox.Element().addClass("OxCommentsWrapper")

  if (comments.length > 0) {
    var title = new Ox.Element("h4").html("Comments:").appendTo(that);
    for (var i=0; i<comments.length; i++) {
      var comment = comments[i];
      var $comment = new Ox.Element().addClass("OxCommentWrapper");
      var $user = new Ox.Element().addClass("OxCommentsPostedBy").html("posted by " + comment.name).appendTo($comment);
      var $commentBody = new Ox.Element().addClass("OxCommentBody").html("comment: " + comment.comment).appendTo($comment);
      $comment.appendTo(that);    
    }
  } else {
    var $nocomments = new Ox.Element().addClass("OxNoComments").html("No comments on this yet..").appendTo(that);
  } 
  return that; 
}

Ox.ItfCalendar = function(options, self) {
  var self = self || {};
  var that = new Ox.Element(options, self);
  var $titleBar = new Ox.Bar({
    'size': 'small'
  }).addClass('OxTitleBar').appendTo(that);
  var $title = new Ox.Element().html("Calendar").appendTo($titleBar);
  return that;
}

Ox.ItfPreview = function(options, self) {
  var self = self || {};
  var that = new Ox.Element(options, self);
  that.$content = new Ox.Element().appendTo(that);
  that.$loading = new Ox.LoadingIcon().appendTo(that);
  return that;
}

ITF.CommentForm = function(options, formData) {
  var that = new Ox.Element();
  var title = new Ox.Element("h4").html("Add Comment:").appendTo(that);
  var textarea = new Ox.Element("textarea")
                .css({'width': '450px', 'height': '200px', 'display': 'block', 'marginBottom': '3px'})
                .appendTo(that);
  var submitBtn = new Ox.Button({
    'id': 'commentFormSubmit',
    'title': 'Submit',
    'size': 'Large'
  }).bindEvent("click", function() {
    var data = $.extend({
      'id': options.id,
      'module': options.module,
      'model': options.model,
      'name': app.user.username,
      'email': app.user.email,
      'comment': textarea.val()
    }, formData);
    app.api.addComment(data, function(response) {
      alert(JSON.stringify(response));
    }); 
  }).appendTo(that);
  return that;
}

ITF.templates = {};

