//-- updated for jQuery 1.4

	var Details = function (parent, $container, subnav) {
    	var _ = {};
		var pli = [];
        
        var init = function () {
        	$container.empty().append(
            	$('<div />', { css: { textAlign: 'center', clear: 'both' } }).append(
            		$('<img />', {
                		src: 'img/loader.gif',
	                    css: { margin: '100px auto' }
                    })
                )
            );
        	$.getJSON(
            	'/services/details/' + subnav,
                function ( json ) {
                	config.data = json;
                    render.init();
                    pli.push(new Image());
                    pli[pli.length-1].src = 'img/loader.gif';
                }
            );
        };
        
        var render = {
        	init: function () {
            	$container.empty()
                	.append( render.breadcrumb() )
                    .append( render.heading() )
                    .append( render.details() );
            },
            heading: function () {
            	var style = {
                	backgroundImage: 'url(' + config.tout + ')'
                };
                return $('<h1 />', {
                	'class': 'head_tout',
                    css: style,
                    text: config.data.text
                });
            },
            breadcrumb: function () {
            	return $('<a />', {
                	href:		'#/portfolio',
                    'class':	'breadcrumb',
                    html:		'&laquo; Return to Portfolio'
                });
            },
            details: function () {
            	return $('<div />', { id: 'work_desc' })
                	.append( render.left() )
                    .append( render.right() );
            },
            left: function () {
            	return $('<div />', { 'class': 'left' })
                	.append( render.defaultImage() )
                    .append( render.thumbnailGallery() );
            },
            right: function () {
            	var ret = $('<div />', { 'class': 'right' });
                var sect = config.data;
                
                if (sect.desc)
                	for (var cv = 0; cv < sect.desc.length; cv++)
                    	ret.append( $('<p />', { text: sect.desc[cv] }) );
                        
                if (sect.link)		ret.append( render.link_list(	sect.link,		'Link'					) );
                if (sect.sites)		ret.append( render.link_list(	sect.sites,		'Sites'					) );
                if (sect.sections)	ret.append( render.list(		sect.sections,	'Sections worked on'	) );
                if (sect.agency)	ret.append( render.link_list(	sect.agency,	'Agency'				) );
                if (sect.credits)	ret.append( render.link_list(	sect.credits,	'Credits'				) );
                
                return ret;
            },
            link_list: function (links, title) {
            	var links = $.makeArray(links);
            	var ret = $('<p />');
                ret.append( $('<span />', { 'class': 'desc_head', text: title + ':' }) );
                for ( var cv = 0; cv < links.length; cv++ ) {
                	ret.append( $('<span />').append( $('<a />', links[cv]) ) );
                }
                return ret;
            },
            list: function (sect, title) {
            	var ret = $('<p />');
                ret.append( $('<span />', { 'class': 'desc_head', text: title + ':' }) );
                for (var cv = 0; cv < sect.length; cv++)
                	ret.append( $('<span />', { text: sect[cv] }) );
                return ret;
            },
            defaultImage: function () {
            	return $('<div />', { id: 'main_image_container', css: { backgroundImage: 'url(' + get.image(0) + ')' } })
                	.append( $('<img />', { id: 'main_image', 'src': get.image(0) } ) )
                	.append( config.$loader );
            },
            thumbnailGallery: function () {
            	var ret = $('<div />', { id: 'gallery_container' });
                for (var cv = 0; cv < config.data.images.length; cv++)
                	ret.append( $('<img />', {
                    	'class': 'thumb inactive',
                        'src': get.thumbnail(cv),
                        css: { opacity: 1 },
                        mouseover: events.thumbOver,
                        mouseout: events.thumbOut,
                        click: events.thumbClick
                    }) );
                return ret;
            }
        };
		
		var config = {
			data: {},
			tout:		'img/portfolio/touts/' + subnav + '.jpg',
            $loader:	$('<div />', { id: 'loader', html: '&nbsp;', css: { opacity: 0 } })
		};
        
        var get = {
			thumbnail:	function (id) {
				return	'img/portfolio/details/' + subnav + '/small/' + config.data.images[id];
			},
			image:		function (id) {
            	return 'img/portfolio/details/' + subnav + '/mid/' + config.data.images[id];
			}
		};
        
        var events = {
        	thumbOver: function () {
				$(this).removeClass('inactive').stop().animate({opacity:1},{duration:250,easing:'none'});
				$('.thumb.inactive').stop().animate({opacity:.5},{duration:250,easing:'none'});
            },
            thumbOut: function () {
				$(this).addClass('inactive');
				$('.thumb.inactive').stop().animate({opacity:1},{duration:250,easing:'none'});
            },
            thumbClick: function () {
				if (!_.stopClicks) {
					_.stopClicks = true;
					JQ('#loader').stop().animate({opacity:1},{duration:250,easing:'none'});
					var img = JQ(this).attr('src').replace(/\/small\//g, '/mid/');
					JQ('#main_image').css({opacity:0}).attr( 'src', img ).load(function () {
						JQ('#loader').stop().animate({opacity:0},{duration:250,easing:'none'});
						JQ('#main_image').stop().animate(
							{opacity:1},
							{
								duration:500,
								easing:'none',
								complete:function () {
									JQ('#main_image_container').css({backgroundImage:'url('+JQ('#main_image').attr('src')+')'});
									_.stopClicks = false;
								}
							}
						);
					});
				}
            }
        };
		
		init();
        
        return _;
	};