$(function() {
	var data = null,
		current = null,
		detailBaseUrl = '/pages/portfolio-detail-data.php?project=',
		needsHashHelp = $.browser.msie && ($.browser.version < 8);
	
	var showProject = function(id) {
		if (!id) id = 'proton';
		current = id;
		
		if (!data) {
			data = {};
			$('#detail-page').remove().appendTo('#content-container');
                        
                        // Prebind events for detail page
                        $('#detail-page .toc').delegate('a', 'click', function() {
                            selectDetail($(this).data('detail-id'));
                        });
		}
	
		$.getJSON(detailBaseUrl + current, null, function(jsonData) {
			data[current] = jsonData;
			var tocContent = '';
			for (var i=0;i<jsonData.details.length;i++) {
				tocContent += '<li><a href="javascript:;" data-detail-id="' + i + '">' + jsonData.details[i].name + '</a>';
				if (jsonData.details[i].description)
					tocContent += '<p>' + jsonData.details[i].description + '</p>';
				tocContent += '</li>';
			}
			$('#detail-page .toc').html(tocContent);
			$('#detail-page h2').html('<strong>' + jsonData.project.name + '</strong> (' + jsonData.project.years + ')');
	
			var infoMarkup = '';
			if (jsonData.project.project_desc)
				infoMarkup += '<div><h4>The Product:</h4>' + jsonData.project['project_desc'] + '</div>';
			if (jsonData.project.work_desc)
				infoMarkup += '<div><h4>' + jsonData.project['category'] + ':</h4>' + jsonData.project['work_desc'] + '</div>';	
			$('#detail-page .info .project-info').html(infoMarkup);
			
			selectDetail(0);
	
			var c = $('#content');
			var d = $('#detail-page');
			if ($(document).scrollTop() > $('#wideHeader').height())
				d.css('top', $(document).scrollTop());
			else
				d.css('top', '');
	
			$('body').css('overflow-x', 'hidden');
			c.width(c.width());
			c.animate({
				left: -1000,
				opacity: 0
			});
			
			d.css('left', '1000px');
			d.animate({
					left: 0,
					opacity: 'show'
				},
				{
					complete: function() { $('body').css('overflow-x', 'auto'); }
				}
			);
		
		});
	};
	
	var selectDetail = function(idx) {
                // Show loading indicator
                var $loading = $('#detail-page .loading');
                var $currentImg = $('#detail-page .media img');
                
                if ($currentImg.length) {
                    var imgPos = $currentImg.position();
                    $loading.css({
                        left: imgPos.left + $currentImg.width()/2 - $loading.width()/2,
                        top: imgPos.top + $currentImg.height()/2 - $loading.height()/2
                    }).show();
                }

		var proj = data[current].project;
		var thisDetail = data[current].details[idx];
		var newImg = $('<img style="" src="/portfolio-data/full/' + thisDetail['file'] + '" />').load(function() {
                        $loading.fadeOut();
			$(this).fadeIn();
			$('#detail-page .media img:eq(1)').fadeOut(function() { $(this).remove() });
		});
		
		$('#detail-page .media').prepend(newImg);
		$('#detail-page .toc li.selected p').slideUp();
		$('#detail-page .toc li.selected').removeClass('selected');
		$('#detail-page .toc li:eq(' + idx + ')').addClass('selected');
		$('#detail-page .toc li.selected p').slideDown();
	};
	
	var ajaxPageLoad = function() {
		var hash = location.hash.replace(/^.*#/, '');
		if (hash && (hash != 'main')) {
			showProject(hash);
		}
		else {
			var c = $('#content');
			var d = $('#detail-page');
			$('body').css('overflow-x', 'hidden');
			c.animate({
				left: 0,
				opacity: 1
			});
			
			d.animate({
					left: 1000,
					opacity: 'hide'
				},
				{
					complete: function() { $('body').css('overflow-x', 'auto'); }
				}
			);
		}
	};
	
	var init = function() {
		$(window).bind('hashchange', ajaxPageLoad);
	
		$('a[href^=#]').bind('click', function(){ 
			console.log('bound');
			if (needsHashHelp) $('#slide-anchor').css('top', $(document).scrollTop());
			location.hash = $(this).attr('href');
			return false;
		});
		
		if (needsHashHelp) location.hash = 'main';
	};
	
	init();
});