var arrVendors;
function ox(arr) {
    arrVendors = arr;
    var html = '';
    for (var i = 0; i < arrVendors.length; i++) {
        var v = arrVendors[i];
        html += '<div class=\"vendor\"><a href=\"\" vendorID=\"' + v.vendorID + '\" index=\"' + i + '\">' + v.company + '</a></div>';
        html += '<div class=\"vendorinfo\" id=\"sub' + i + '\"></div>';
    }
    $('#dOX').html(html);
    $('.vendor a').toggle(function(e) {
        var idx = $(this).attr('index');
        var vendor = arrVendors[idx];
        var html = '<table><tr><td>';
        if (vendor.photo) {
            html += '<img src=\"http://managemymarket.com/imgproxy.aspx?maxh=200&maxw=200&img=uploads/vendorfiles/' + vendor.photo + '&hires=1\" />';
        } else {
            html += '<img src=\"http://managemymarket.com/images/stock_vendor.jpg\" />';
        }
        html += '</td>';
        html += '<td><b>' + vendor.company + '</b><br />' + vendor.city + ', ' + vendor.state + '<br />';
        html += vendor.phone1;
        if (vendor.website) html += '<br /><a target=\"_blank\" href=\"http://' + vendor.website + '\">' + vendor.website + '</a>';
        html += '</tr>';
        html += '<tr><td colspan=\"2\"><i>' + vendor.description + '</i></td></tr>';
        html += '</table>';
        $('#sub' + idx).html(html).show();
    }, function(e) {
        var idx = $(this).attr('index');
        $('#sub' + idx).hide();
    });
}