$(document).ready(function(){
    // get the data
    $.getJSON("/tc/agentListingsJson.do", function(data){
        // Loop thought the results
        $.each(data.prop, function(i,item){
            // draw the html 
            // first build each section in chunks    
            var imgtag = '<img src="/tc/imsv.img?mlsnum=' + item.mlsnum + '&idx=1&size=0" alt="an image" />';
            var heading = '<b>$' + addCommas(item.listprice) + '</b>';
            if(item.municipality !== undefined){
                heading += '<br />' + item.municipality;
            }
            $("<div/>").html(
                '<a href="/tc/showProperty.do?mlsnum='+ item.mlsnum + '">'
                + imgtag 
                + heading
                + '</a>'
            ).appendTo("#items");
        });
        // start the slideshow
            // initialize scrollable 
        $("div.scrollable").scrollable({
            size: 1,
            vertical:true,
            items: '#items',  
            hoverClass: 'hover',
            loop: true,
            interval: 8000,
            speed: 3000,
            // when seek starts make items little transparent
            onBeforeSeek: function() { 
                this.getItems().fadeTo(300, 0.7);         
              },
            // when seek ends resume items to full transparency 
            onSeek: function() { 
                this.getItems().fadeTo(300, 1); 
            } 
        });
    });
});

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}