$(function(){
	
	var count = 0;
	var width = 220;
	var height = 0;
	var tags = [];
	var current = 0;
	
	$("#bookmark")
		.find("div.block")
			.find("div")
				.each(function(){
					var id = $(this).attr('id').split('_')[1];
					tags.push({tag:id, loaded:false});
					$(this).css({position:'absolute', top:'0px', left:width*count-1, width:180});
					var block = $(this).parent();
					block.width(block.width()+width);
					var h = $(this).height();
					if (h > height) height = h;
					count++;
				})
				.end()
			.height(height)
			.end()
		.find("div.container")
			.css({width:"439px", overflow:"hidden", height:height})
			.end()
		.find('.navigation')
			.css({display:"block"})
			.find("div")
				.each(function(){
					$(this).css({cursor:"pointer"});
					if($(this).hasClass("left")){
						$(this).click(function(){
							if (current > 0)
								slide(--current);
						});
					}
					else if($(this).hasClass("right")){
						$(this).click(function(){
							if (current < count - 2)
								slide(++current);
						});
					}
				})
				.end()
			.end()
		.end()
	.end();
	
	function slide(i){
		var target = -(width * current);
		$("#bookmark div.block")
			.stop()
			.animate({left:target}, 600)
			.end()
		.end();
		loadBookmark(tags[i+1]);
	}
	
	function loadBookmark(obj){
		if (obj.loaded) return;
		obj.loaded = true;
		var tag = obj.tag;
		$('#bm_'+tag).append('<p>now loading...</p>');
		$.getJSON('http://feeds.delicious.com/v2/json/tricointeractive/'+tag+'?count=15&callback=?',
			function(data){
				$('#bm_'+tag)
					.find('p')
						.remove()
						.end()
					.append('<ul>')
					.find('ul')
						.css('display', 'none')
						.fadeIn('slow')
					.end();
					
				if (!data.length){
					$('#bm_'+tag).find('ul')
						.append('<li>no data</li>')
						.end()
					.end();
				}
				else{
					$.each(data, function(i, item){
						$('#bm_'+tag).find('ul')
							.append('<li><a href="'+item.u+'" target="_blank">'+item.d+'</a></li>');
					});
					if ($('#bm_'+tag).height() > height)
					{
						height = $('#bm_'+tag).height();
						$('#bookmark div.block').height(height);
						$('#bookmark div.container').height(height);
					}	
				}
			});
	}
	
	loadBookmark(tags[0]);
	loadBookmark(tags[1]);
});