var DetailsPanel={
	initialize: function () {
		var _self = this;
	},
	
	update: function(id){
		var portfolio=PortfolioModel.getPortfolioContent(id);
		var caption=portfolio.caption;
		if (caption==undefined){
			caption=portfolio.title;
		}
		if (portfolio.title!=''){
			$('#modal * .section-title').html("Project");
		}else{
			$('#modal * .section-title').html("");
		}
		$('#modal * #project-title').html(portfolio.title);
		$('#modal * .section-subtitle').html("Client");
		$('#modal * #project-subtitle').html(portfolio.client);
		$('#modal * #section-content').html(portfolio.description);
		$('#modal * #logo').html('<img src="' + portfolio.client_logo + '" alt="" />')
		var imgs=portfolio.images;
		var img_html='';
		for(var i=0;i<imgs.length;i++) {
			if (i==0){
			img_html+="<li><a class='image-tgl active' href='#' rel='"+ imgs[i] +"'></a></li>";
			}else{
				img_html+="<li><a href='#' class='image-tgl' rel='"+ imgs[i] +"'></a></li>";
			}
		}
		img_html="<ul>"+img_html+"</ul>";
		Cufon.refresh('p');
		Cufon.refresh('#section-content')
		$('#modal * #main-image').animate({'opacity':0},200,function(){
				$('#modal * #main-image').html('<img src="' + portfolio.images[0] + '" alt="" width="380" height="380" /><div id="image-nav">'+img_html+'</div><div id="caption">'+ caption +'&nbsp;</div>')
				$('#modal * #main-image').animate({'opacity':1},200);
		});
		
	}
	
}