$(window).resize(function()
{
    com_count = $('div.scrollable div.items div.slide').length;
    div_width = $('div.main').width();
    all_width = com_count * div_width;

    left_px = $('div.scrollable div.items').css("left").split("px");
    old_width_px = $('div.scrollable div.items div.slide').css("width").split("px");

    new_left = left_px[0] *  $('div.main').width() / old_width_px[0];

    $('div.scrollable div.items').css("width", all_width+"px");
    $('div.scrollable div.items').css("left", new_left+"px");

    for (i = 1; i <= com_count; i++)
    {
        $('div.scrollable div.items div.slide').eq(i-1).css("width", div_width+"px");

        div_com_width = div_width - 30;

        $('div.scrollable div.items div.slide div.com').eq(i-1).css("width", div_com_width+"px");
        $('div.scrollable div.items div.slide div.com').eq(i-1).css("margin-left", "30px");
    }

    recommended();
});

$(document).ready(function ()
{
    com_count = $('div.scrollable div.items div.slide').length;
    div_width = $('div.main').width();
    all_width = com_count * div_width;

    $('div.scrollable div.items').css("width", all_width+"px");
    $('div.scrollable div.items').css("left", 0+"px");

    for (i = 1; i <= com_count; i++)
    {
        $('div.scrollable div.items div.slide').eq(i-1).css("width", div_width+"px");

        div_com_width = div_width - 60;

        $('div.scrollable div.items div.slide div.com').eq(i-1).css("width", div_com_width+"px");
        $('div.scrollable div.items div.slide div.com').eq(i-1).css("margin-left", "30px");
    }

    $(".scrollable").scrollable({ circular: true, speed: 700 }).navigator("#navi").autoscroll({ autoplay: true, autopause: true, interval: 5000 });

    button_count = $(".scrollable #navi a").length;

    for (j = 1; j <= button_count; j++)
    {
        $(".scrollable #navi a").eq(j-1).text(j);
    }
});