$.when( $.ready ).then(function() {

    
    

    $( "#sortable" ).sortable({
        stop: function (event, ui) {
            var idsInOrder = $("#sortable").sortable('toArray', {
                attribute: 'data-id'
            });
            $.post(
                '/order',
                { order:idsInOrder }
            );
        }
    
    });
    $("#sortable").sortable("disable");

    
    $('.color-picker').each( function( i, elem ) {
        var hueb = new Huebee( elem, {
          // options
        });
     });
    $('#app').on('click', '#config-button', function(e) {
        e.preventDefault();
        var app = $('#app');
        var active = (app.hasClass('header'));
        app.toggleClass('header');
        if(active) {
            $('.add-item').hide();
            $('#app').removeClass('sidebar');
            $("#sortable").sortable("disable")
        } else {
            $("#sortable").sortable("enable")
            setTimeout(
                function() 
                {
                  $('.add-item').fadeIn();
                }, 350);
    
        }
    }).on('click', '#add-item', function(e) {
        e.preventDefault();
        var app = $('#app');
        var active = (app.hasClass('sidebar'));
        app.toggleClass('sidebar');
        
    });
    $('#pinlist').on('click', 'a', function(e) {
        e.preventDefault();
        var current = $(this);
        var id = current.data('id');
        $.get('items/pintoggle/'+id+'/true', function(data) {
            var inner = $(data).filter('#sortable').html();
            $('#sortable').html(inner);
            current.toggleClass('active');
        });
    });
    
});