var Combobox = FNX.include('combobox/combobox');

var example2 = new Combobox({
    trigger: '#triggerId2',
    element: '#popup2',
    align: {
        baseXY: [0, 0]
    }
});

// 订阅事件
example2.after('show', function(){
    console.log('example2 is shown');
}).after('hide', function(){
    console.log('example2 is hidden');
});

var Combobox = FNX.include('combobox/combobox');

var example3 = new Combobox({
    trigger: '#triggerId3',
    triggerType: 'click',
    align: {
        baseXY: [0, -80]
    },
    element: '#popup3'
});

var Combobox = FNX.include('combobox/combobox');

var example4 = new Combobox({
    trigger: '#triggerId4',
    align: {
        selfXY: [-10,-10],
        baseXY: [0,20]
    },
    template: '<div class="ui-popup fn-hide"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>'
});

example4.after('show', function(){
    $('#triggerId4').text('三秒后改变浮层位置');
    window.setTimeout(function() {
        example4.set('align', { baseXY: [0, -115] });
    }, 3000);
});

var Combobox = FNX.include('combobox/combobox');

var example5 = new Combobox({
    trigger: '#triggerId5',
    triggerType: 'focus',
    element: '#popup5',
    align: {
        baseXY: [0, '100%+12']
    }
});
example5.element.find('a').click(function(e) {
    e.preventDefault();
    example5.get('trigger').val($(this).text());
    example5.hide();
});

var Combobox = FNX.include('combobox/combobox');

new Combobox({
    trigger: '#triggerId6',
    element: '#popup6'
}).show();

var Combobox = FNX.include('combobox/combobox');

new Combobox({
    trigger: '#triggerId7',
    element: '#popup7',
    align: {
        baseElement: '#other-element'
    }
});

var Combobox = FNX.include('combobox/combobox');

var popup = new Combobox({
    trigger: '#triggerId9',
    element: '#popup9',
    triggerType: 'click'
});
popup.after('show', function() {
    var that = this;
    // 先隐藏
    this.element.hide();

    // 然后异步显示，这里也可以是一段 Ajax 的回调
    setTimeout(function() {
        that.element.fadeIn();
    }, 1000);
});