$(document).ready(function(){
    $("div#sidebar").html(''+
        '<div id="customerInfo" class="p2">'+
            '<div id="msg">Click on a specific client to the left to read more about how we helped them.</div>'+
            '<div id="customerName"></div>'+
            '<div id="customerIndustry"></div>'+
            '<div id="customerWebsite"></div>'+
            '<div id="customerProject"></div>'+
        '</div>'
    );
    $("div.clients").hover(function(event){
        $(this).addClass('clients_active');
    }, function(event) {
        $(this).removeClass('clients_active');
    });
    $("div.clients").click(function(event){
        var id = $(this).attr('id');
        id = id.replace(/client/, "");
        $.ajax({
		type: "GET",
                dataType: "json",
		url: "/client/"+id+"/",
                success: displayClientInfo
        });
    });
    $("#customerInfo").fadeIn(4000);
});

displayClientInfo = function(json) {
        var obj = json[0].fields;
	$("div#customerInfo #msg").empty();
	$("div#customerName").html("<strong>Name:</strong>"+obj.name);
	$("div#customerLocation").html("<strong>Location:</strong>"+obj.location);
	$("div#customerIndustry").html("<strong>Industry:</strong>"+obj.industry);
        if(obj.website) {
		$("div#customerWebsite").html("<strong>Website:</strong><a href=\""+obj.website+"\">"+obj.website+"</a>");
        } else {
		$("div#customerWebsite").empty();
        }
	$("div#customerProject").html("<strong>Project:</strong>"+obj.project);
};