$.scrollItems = false;

$(document).ready(function () {
	
	$.getJSON('/portfolio/work_list.json', function(json){
		
		$items = $('#banner .items');
		$project_prototype = $items.find('.item:first').clone(true);
		
		$items.empty();
		
		$scroller = $('div#banner div.inner');
		$scroller.scrollable({
			size: 1,
			speed: 900
		});
		
		api = $scroller.scrollable();
		
		$(json).each(function(i, project_data){
			
			$project = $project_prototype.clone(true);
			
			$project.find('h3').text(project_data.client_name);
			
			$project.find('div.overlay a').attr('href', project_data.detail_url);
			
			$image = $project.find('img.detail');
			$image.attr('src', project_data.detail_image);
			$image.attr('alt', project_data.client_name);
			
			$link = $project.find('.location a');
			$link.attr('href', project_data.detail_url);
			$link.text('More information about this project...');
			
			$next_project_link = $project.find('a.next-project');
			$next_project_link.attr('href', project_data.detail_url);
			$next_project_link.bind('click', {'api': api}, function(e){
				e.data.api.next();
				return false;
			});
			
			$description = $project.find('p.description');
			$description.empty();
			$description.html(project_data.description);
			$continue_link = $('<a />');
			$continue_link.text('Continue…');
			$continue_link.attr('href', project_data.detail_url);
			$description.find('p:last').append($continue_link);
			
			$task_list = $project.find('ul.tasks');
			$task_list.empty();
			$(project_data.tasks).each(function(i, task){
				$task = $('<li />');
				$task.addClass(task['css_class']);
				//$task_link = $('<a>');
				//$task_link.text(task['name']);
				//$task.append($task_link);
				$task.text(task['name']);
				$task_list.append($task);
			});
			
			$items.append($project);
			
		});
		
		$last_item = $("<div class=\"more-info item\"><h3>Want to find out how we can help you?</h3><a class=\"contact-us\" href=\"/contact\">Contact Us</a><p>You can also look through our <a href=\"/portfolio\">portfolio</a>, see <a href=\"/how-we-work\">how we work</a>, learn more <a href=\"/about-us\">about us</a> or read <a href=\"/blog\">things we write</a>.</p></div>");
		$items.append($last_item);
		
	});
	
});