var PortfolioControls = {
	initialize: function (json) {
		var _self = this;
		this.data = json;
		this.length = json.length;
		$('#slides > ul').html();
		if ( this.length >0 ) {
			var i = 0;
			var l = this.length;
			var html = '';
			for (i; i<l; i++) {
				var id = this.data[i].id;
				var image=this.data[i].images[0];
				var title=this.data[i].caption;
				if (this.data[i].caption==undefined){
					title=this.data[i].title;
				}
				html += '<li><a href="#" class="slide-image" id="'+ id +'"><img src="'+ image +'" height="110"  width="110" /><div id="image-nav"></div><div class="slide-caption">' +  title + '</div></a></li>';
			}
			$('#slides > ul').html(html);
			$('#slides').css('width',128*i);
		}
		
		$('#slides').delegate('li a', 'click', function (ev) {
			_self.update($(this).attr('id'));
			return false;
		});
		
		$('.image-tgl').live('click',function(ev){
			var url=$(this).attr('rel');
			$('#main-image > img').fadeOut(100,function(){
				$('#main-image > img').attr('src',url);
				$('#main-image > img').fadeIn(200);
			})
			$('.image-tgl.active').removeClass('active');
			$(this).addClass('active');
		});
		
	},
	update: function (id) {
		var _self = this;
		$('#slides li a .active').removeClass('active');
		$('#slides #' + id).addClass('active');
		DetailsPanel.update(id);
	},
	first: function(){
		var id=$('#slides ul > li a').attr('id');
		this.update(id);
	}
};