$().ready(function() {	
	onScrollSeek = function(i) {
		switch(i) {
			case 1:
				$("#top_container").animate({backgroundColor: "#444851"}, 1500);
				break;
			case 2:
				$("#top_container").animate({backgroundColor: "#241a08"}, 1500);
				break;		
			case 3:
				$("#top_container").animate({backgroundColor: "#1f1f1f"}, 1500);
				break;
			case 4:
				$("#top_container").animate({backgroundColor: "#35203b"}, 1500);
				break;
			default:
				$("#top_container").animate({backgroundColor: "#231f20"}, 1500);
				break;
		}
	}
	$('.thumbs div').width($(document).width());
	
	$(window).resize(function(){
      $('.thumbs div').width($(document).width());
    });
	
	$(".scrollable").scrollable({
		size:  1,
		items: '.thumbs',  
		prev:  '.prev',
		next:  '.next',
		navi:  '.navi',
        loop:  true,
        speed: 1000,
        onBeforeSeek: onScrollSeek
	});	
	
	// work page
	if($('body').hasClass('work_top')){
		
		$('#clientList').before('\
			<ul id="filterNav">\
				<li><a href="#" data-sort="all">All</a></li>\
				<li><a href="#" data-sort="iphone">iPhone</a></li>\
				<li><a href="#" data-sort="ipad">iPad</a></li>\
				<li><a href="#" data-sort="android">Android</a></li>\
			</ul>\
		');
			
		/* removed temporarily, or possibly permanently from filters
		 * 
		 * <li><a href="#" data-sort="web">Web</a></li>\
		 * <li><a href="#" data-sort="mobile">Mobile</a></li>\
		 *
		 */
	
		// set height so scroll bar doesn't appear then disappear
		$('#clientList').css({
			height: $('#clientList').height()
		})
					

		// create a list to pull
		var cloneList = [];
		$('#clientList li').each(function(){
			cloneList.push($(this));
			$(this).remove();
		})
		
		$('#filterNav a').live('click', function(e){
			
			var $clicked = $(this);
			var $clickedSort = $clicked.attr('data-sort');
			$('#filterNav li').removeClass('selected');
			$clicked.parents('li:first').addClass('selected');
			
			if($clickedSort == 'all'){
				$(cloneList).each(function(){
					$('#clientList').append($(this))
				});
				$('#clientList li').show();	
			} else {
				$(cloneList).each(function(){
					if(($(this).attr('data-sort')).indexOf($clickedSort) >= 0){
						$(this).appendTo('#clientList');
					} else {
						$(this).remove();
					}
				})
			}
			$('#clientList li').hide()
			var timeout = 0;
			$('#clientList li').each(function(){
				timeout += 50;
				$(this).clearQueue().css({opacity: 1}).delay(timeout).fadeIn();
			});
			e.preventDefault();
		});
		// click the first to initialize
		$('#filterNav a:first').click();
	}
});