CodingForums.com - JQuery Gridster with HTML/Javascript Windows 8 Store App

I decided to create my first windows store app with html/javascript and since you cannot do drag and drop with javascript and listview i have looked for alternatives. Windows store apps support jquery so I found Gridster. It is a jquery plugin to display stuff in a grid with draggable reordering. Each item can be resized as well. I want to use this in my windows store app. Here is a fiddle of the code i inputted into blend, into the html page

Code:

var layout;

var grid_size = 100;

var grid_margin = 5;

var block_params = {

    max_width: 6,

    max_height: 6

};

$(function() {



layout = $('.layouts_grid ul').gridster({

    widget_margins: [grid_margin, grid_margin],

    widget_base_dimensions: [grid_size, grid_size],

    serialize_params: function($w, wgd) {

        return {

            x: wgd.col,

            y: wgd.row,

            width: wgd.size_x,

            height: wgd.size_y,

            id: $($w).attr('data-id'),

            name: $($w).find('.block_name').html(),

        };

    },

    min_rows: block_params.max_height

}).data('gridster');



$('.layout_block').resizable({

    grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],

    animate: false,

    minWidth: grid_size,

    minHeight: grid_size,

    containment: '#layouts_grid ul',

    autoHide: true,

    stop: function(event, ui) {

        var resized = $(this);

        setTimeout(function() {

            resizeBlock(resized);

        }, 300);

    }

});



$('.ui-resizable-handle').hover(function() {

    layout.disable();

}, function() {



    layout.enable();

});



function resizeBlock(elmObj) {



    var elmObj = $(elmObj);

    var w = elmObj.width() - grid_size;

    var h = elmObj.height() - grid_size;



    for (var grid_w = 1; w > 0; w -= (grid_size + (grid_margin * 2))) {



        grid_w++;

    }



    for (var grid_h = 1; h > 0; h -= (grid_size + (grid_margin * 2))) {



        grid_h++;

    }



    layout.resize_widget(elmObj, grid_w, grid_h);

}

});

The js references and css can be seen in the source here (where i got the code)

http://jsfiddle.net/maxgalbu/UfyjW/show

I got it working and can drag the boxes around and reorder and resize them...my issue now is how to get it to expand horizontal instead of vertically..the more stuff i put into it, they all go to the bottom. I would like it to expand to the right as new items get added (like the start menu)...it would be perfect if i could turn the grid counter clockwise and keep the items the same orientation..but i know it may not be that easy

i have tried changing some values in the script (in the above code sample) in the html and got some more columns for the boxes to snap to..but eventually they all just revert to snapping to the bottom of one of the first columns...do i have to edit the referenced js files? There's like 4 of them, which one?