/***
    OxUI Documentation
***/
var app =  {};
$(function() {
    app.$body = $('body');
    app.$document = $(document);
    app.$window = $(window);

    app.$ui = {};
    app.docs = getDocsJSON();
    app.$ui.actionList = constructList();
    app.$ui.actionInfo = Ox.Container().css({padding: '8px'});
            

    var $main = new Ox.SplitPanel({
        elements: [
            {
                element: app.$ui.actionList,
                size: 160
            },
            {
                element: app.$ui.actionInfo
            }
        ],
        orientation: 'horizontal'
    });

    $main.appendTo(app.$body);
});

function constructList() {
    return new Ox.TextList({
        columns: [
                {
                    align: "left",
                    id: "name",
                    operator: "+",
                    title: "Name",
                    unique: true,
                    visible: true,
                    width: 140
                },
        ],
        columnsMovable: false,
        columnsRemovable: false,
        id: 'actionList',
        request: function(data, callback) {
            var items = [];
            app.docs.forEach(function(v) {
              items.push({'name': v.name});
            });
            items.sort(function(a, b) { if(a.name < b.name) { return -1 } else if( a.name == b.name) { return 0 }else { return 1 } })
            if(!data.keys) {
                var result = {'data': {'items': items.length}};
            } else {
                var result = {'data': {'items': items}};
            }
            Ox.print("items", items);
            callback(result);
        },
        sort: [
            {
                key: "name",
                operator: "+"
            }
        ]
    }).bindEvent({
       select: function(event, data) {
           var info = $('<div>');
           var ids = data.ids;
           ids.forEach(function(v) {
             var docObj = getObjectByName(app.docs, v);
             var html = getDocHtml(docObj);
             info.append(html);
           });            
            app.$ui.actionInfo.html(info);
       }
    });
}

function getDocHtml(doc) {
  var wrapper = $('<div>');
  var title = $('<h2>').html(doc.name).appendTo(wrapper);
  var $options = $('<div>').html("Options: ").css({'marginBottom': '20px'}).appendTo(wrapper);
  Ox.keys(doc.options).forEach(function(k) {
    var $option = $('<div>');
    var optionKey = $('<b>').html(k + ": ").appendTo($option);
    var optionVal = $('<span>').html(typeof doc.options[k]).appendTo($option);
    $('<span>').html(' <b>' + doc.options[k].toString() + '</b>').appendTo($option);
    $option.appendTo($options);
  });
  var methods = Ox.keys(doc.methods);
  if (methods.length > 0) {
    var $methods = $('<div>').html("Methods: <br>").appendTo(wrapper);
    methods.forEach(function(m) {
        var $m = $('<div>').appendTo($methods);
        var f = $('<pre>').html(doc.methods[m]).hide();
        var title = m;
        var options = /function \((.*?)\)/.exec(doc.methods[m]);
        if(options) {
            title = title + '('+options[1]+')';
        }
        var lable = new Ox.Label({
                                title: title, 
                                width: 190
                            })
                            .css({'float': 'left', 'margin-right': '4px'})
                            .addClass("margin")
                            .appendTo($m);
        var b = new Ox.Button({
            title: [
                {id: "one", title: "expand"},
                {id: "two", title: "collapse"},
            ],
            type: "image"
        })
          .addClass("margin")
          .appendTo($m)
          .click(function() { f.toggle()});
      f.appendTo($m);
    });
  }
  var $functionString = $('<pre>').html(doc.functionString).appendTo(wrapper);
  return wrapper;
}

function getObjectByName(obj, name) {
  var ret = false;
  obj.forEach(function(o) {
    if (o.name == name) {
      ret = o;
    }
  });
  return ret;
}

function getDocsJSON() {
  var ret = [],
    keys = Ox.keys(Ox);
  keys.forEach(function(v) {
    if (doc = getDoc(v)) {
      ret.push(doc);
    } else {
      $.noop();
    }    
  });
  return ret;

  function getDoc(key) {
    var standardElement = new Ox.Element();
    var standardMethods = Ox.filter(Ox.keys(standardElement), function(m) { return typeof standardElement[m] === 'function' });
    var firstLetter = key.substring(0,1);
    if (firstLetter != firstLetter.toUpperCase() || typeof Ox[key] != 'function') {
      return false;
    }
    try {
      var o = new Ox[key]();
    }
    catch(err) {
      return false;
    }
    if ('options' in o && typeof o['options'] == 'function') {
      var functionString = Ox[key].toString();
      var opts = o.options();
      var _methods = Ox.filter(Ox.keys(o), function(m) { return (functionString.indexOf('that.'+m+' =') > -1 && typeof o[m] === 'function')});
      var methods = {};
      $.each(_methods, function(i, m) { methods[m] = o[m].toString() });
    }
    else {
      return false;
    }
    return {
      'name': key,
      'options': opts,
      'methods': methods,
      'functionString': functionString
    }
  }
}