//-- updated for jQuery 1.4

	var featured = function (parent, $container) {
		var _ = {};
		
		var init = function () {
        	
        	$container.empty().append(
            	$('<div />', { css: { textAlign: 'center', clear: 'both', margin: '100px auto' } })
                	.append( $('<img />', { src: 'img/loader.gif' }) )
            );
            
        	$.getJSON(
            	'/services/featured',
                function ( json ) {
                	config.touts = json;
                	utils.calc();
                    render.init();
                    events.init();
                }
            );
		};
		
		var utils = {
			calc: function () {
				config.items = config.touts.length;
				config.max_items = config.items - 3;
				config.total_size = config.items - config.tout_width;
			}
		};
		
		var render = {
			init: function () {
				$container.empty()
					.append( render.heading() )
					.append( config.$left_arrow )
					.append( render.viewport() )
					.append( config.$right_arrow );
			},
			heading: function () {
				return $('<div />', { 'class': 'heading', text: 'Featured Work' });
			},
			viewport: function () {
				var viewport = config.$viewport = $('<div />', { id: 'featured_work_viewport' });
				var inner = config.$inner = $('<div />', { id: 'featured_inner', css: { height: config.tout_height, width: (config.tout_width * config.touts.length) } });
				
				for (var cv = 0; cv < config.touts.length; cv++)
					inner.append( render.tout( config.touts[cv] ) );
				
				viewport.append( inner );
				return viewport;
			},
			tout: function (tout) {
				return $('<a />', {
					href: '#/portfolio/details/' + tout.url,
					id: tout.id,
					'class': 'featured_work',
					css: { backgroundImage: 'url(' + tout.img + ')' },
					text: tout.name,
					mouseover: events.featuredOver,
					mouseout: events.featuredOut,
				});
			}
		};
		
		var events = {
			init: function () {
				config.$viewport.mousewheel(function (event, delta) {
					if (delta < 0)
						events.next_item();
					else
						events.prev_item();
					return false;
				});
			},
			featuredOver: function () {
				$(this).removeClass('inactive').stop().animate({opacity:1},{duration:250,easing:'none'});
				$(this).siblings().stop().animate({opacity:.65},{duration:250,easing:'none'});
			},
			featuredOut: function () {
				$(this).addClass('inactive');
				$('.featured_work.inactive').stop().animate({opacity:1},{duration:250,easing:'none'});
			},
			prev_page: function () {
				if (!_.stop_animation && config.item != 0) {
					_.stop_animation = true;
					config.item -= 3;
					
					if (config.item < 0)
						config.item = 0;
					
					config.$inner.stop().animate({left: '-' + config.item * config.tout_width + 'px'}, {duration:750,easing:'bounceEaseOut',complete:function () {_.stop_animation=false;}});
					if (config.item == 0)
						config.$left_arrow.addClass('inactive').stop().animate({opacity:.25},{duration:250,easing:'none'});
						
					if (config.$right_arrow.hasClass('inactive'))
						config.$right_arrow.removeClass('inactive').stop().animate({opacity:1},{duration:250,easing:'none'});
				}
			},
			next_page: function () {
				if (!_.stop_animation && config.item != config.max_items) {
					_.stop_animation = true;
					config.item += 3;
					
					if (config.item > config.max_items)
						config.item = config.max_items;
						
					config.$inner.stop().animate({left: '-' + config.item * config.tout_width + 'px'}, {duration:750,easing:'bounceEaseOut',complete:function () {_.stop_animation=false;}});
					
					if (config.item == config.max_items)
						config.$right_arrow.addClass('inactive').stop().animate({opacity:.25},{duration:250,easing:'none'});
						
					if (config.$left_arrow.hasClass('inactive'))
						config.$left_arrow.removeClass('inactive').stop().animate({opacity:1},{duration:250,easing:'none'});
				}
			},
			next_item: function () {
				if (!_.stop_animation && config.item != config.max_items) {
					_.stop_animation = true;
					config.item += 1;
					
					if (config.item > config.max_items)
						config.item = config.max_items;
					
					config.$inner.stop().animate({left: '-' + config.item * config.tout_width + 'px'}, {duration:50,easing:'cubicEaseOut',complete:function () {_.stop_animation=false;}});
					
					if (config.item == config.max_items)
						config.$right_arrow.addClass('inactive').stop().animate({opacity:.25},{duration:250,easing:'none'});
					
					if (config.$left_arrow.hasClass('inactive'))
						config.$left_arrow.removeClass('inactive').stop().animate({opacity:1},{duration:250,easing:'none'});
				}
			},
			prev_item: function () {
				if (!_.stop_animation && config.item != 0) {
					_.stop_animation = true;
					config.item -= 1;
					
					if (config.item < 0)
						config.item = 0;
						
					config.$inner.stop().animate({left: '-' + config.item * config.tout_width + 'px'}, {duration:50,easing:'cubicEaseOut',complete:function () {_.stop_animation=false;}});
					
					if (config.item == 0)
						config.$left_arrow.addClass('inactive').stop().animate({opacity:.25},{duration:250,easing:'none'});
					
					if (config.$right_arrow.hasClass('inactive'))
						config.$right_arrow.removeClass('inactive').stop().animate({opacity:1},{duration:250,easing:'none'});
				}
			}
		};
		
		var config = {
			tout_width:		229,
			tout_height:	379,
			item:			0,
			$left_arrow:	$('<div />', { id: 'left_arrow', 'class': 'inactive', css: { opacity: 0.25 }, text: 'Next', click: events.prev_page }),
			$right_arrow:	$('<div />', { id: 'right_arrow', css: { opacity: 1 }, text: 'Previous', click: events.next_page })
		};
		
		init();
		
		return _;
	};