(function ($) {
    
    $.widget("qusion.layout", {
        options: {
            customScroll: true
        },
        _create: function() {
            var self = this, element = this.element;

            element
                .uniqueId()
                .attr({
                    role: "layout",
                    tabIndex: 0
                });

            self.classes = self._allClasses();

            setTimeout(function() {
                self.refresh();
            }, 20);

            element.find('[data-col]').hover(function() {
                $(this).addClass('hover', 1000);
            }, function() {
                $(this).removeClass('hover');
            });

            $(window).bind('resize', function() {
                self.refresh();
            });
        },
        refresh: function() {
            var self = this, options = self.options, element = this.element;

            //var scrolling = element.find('.scroll-y');
            //if (options.customScroll === true) {
            //    self.scrollApi = scrolling.jScrollPane().data('jsp');
            //}

            //if (self.scrollApi)
            //    self.scrollApi.reinitialise();

            //// TODO; These are the hacks for jScrollPane problem with boxing
            //scrolling.css({ width: '' });
            //scrolling.find('.jspPane').css({ width: '100%' });
        },
        _allClasses: function() {
            var classes = "";
            var separator = "";
            for (var i = 0; i <= 12; i++) {
                classes += separator + "q-col-" + i;
                separator = " ";
            }

            return classes;
        },
        slide: function(key, value) {
            var self = this, element = this.element;
            element.find('[data-col="' + key + '"]')
                .removeClass(self.classes)
                .addClass('q-col-' + value);

            setTimeout(function() {
                self.refresh();
            }, 20);
        }
    });
})(jQuery);