/**
 * @author Samuel Richardson
 */

$(function(){

	portfolioDisplay = {
		
		// options
		speedAnimate: 1000, /* speed to open the portfolio display */
		speedCycle: 1000, /* speed to cycle the next/previous item */
		
		// constants
		index: 0, /* set item index to 0 */
		$portfolio: $('#portfolio'),
		$portfolioTab: $('#header .navigation li.portfolio'),
		$spinner: $('#portfolio .spinner'),
		heightClosed: 30, /* height of the open portfolio, should match stylesheet */
		heightOpen: 376, /* height of the open portfolio */
		offsetHeight: 356, /* height of each preview image (including margin) */
		index: 0,
		indexTotal: 0,
		JSONdata: null,
		
		init: function() {
			portfolioDisplay.bindEvents();
		},
		
		bindEvents: function() {
			
			/* open close portfolio */
			portfolioDisplay.$portfolioTab.toggle(
				function() { portfolioDisplay.openPortfolio(); },
				function() { portfolioDisplay.closePortfolio(); }
			);
			
			/* previous item */
			portfolioDisplay.$portfolio.find('.controls li.previous').click( function(){
				portfolioDisplay.updateIndex(-1);
				return false;
			});
			
			/* next item */
			portfolioDisplay.$portfolio.find('.controls li.next').click( function(){
				portfolioDisplay.updateIndex(1);
				return false;
			});
			
		},
		
		transitionPreview: function() {
			index = index * portfolioDisplay.offsetHeight;
			portfolioDisplay.$portfolioItemsPreview.animate({top: -index}, {
				"duration": portfolioDisplay.speedCycle,
				"queue": false
			});
		},
		
		openPortfolio: function() {
			portfolioDisplay.loadJSON();
			
			// animate panel open
			portfolioDisplay.$portfolio.animate({height: portfolioDisplay.heightOpen + 'px'}, portfolioDisplay.speedAnimate, function() {
							
				/* slide out items panel */
				portfolioDisplay.$portfolio.find('.detail').animate({right:'0px'}, portfolioDisplay.speedAnimate);
				
				/* fade in items */
				portfolioDisplay.$portfolio.find('.preview').fadeIn(portfolioDisplay.speedAnimate);
				
			});
			
		},
		
		closePortfolio: function() {
			
			/* fade out items */
			portfolioDisplay.$portfolio.find('.preview').fadeOut(portfolioDisplay.speedAnimate);
			
			/* slide out items panel */
			portfolioDisplay.$portfolio.find('.detail').animate({right:'-300px'}, portfolioDisplay.speedAnimate ,function() {
			
				// animate closed
				portfolioDisplay.$portfolio.animate({height: portfolioDisplay.heightClosed}, portfolioDisplay.speedAnimate);
			});
	
		},
		
		updateIndex: function(amount) {
			portfolioDisplay.index += amount;
			
			// check bounding
			if (portfolioDisplay.index < 0) {
				portfolioDisplay.index = 0;
			}
			else if (portfolioDisplay.index > portfolioDisplay.indexTotal) {
				portfolioDisplay.index = portfolioDisplay.indexTotal;
			}
			else { portfolioDisplay.animateIndex();
			}
		},
		
		animateIndex: function() {
			animateDistance = portfolioDisplay.index * portfolioDisplay.offsetHeight;
			animateDistance = -animateDistance + 'px';
			portfolioDisplay.$portfolio.find('.preview').animate({top: animateDistance}, portfolioDisplay.speedCycle);
			portfolioDisplay.renderInfoDetail();
		},
		
		renderInfoDetail: function() {
			portfolioDisplay.$portfolio.find('.detail .info').find('h3').html(portfolioDisplay.JSONdata.portfolio.items[portfolioDisplay.index].title);
			portfolioDisplay.$portfolio.find('.detail .info').find('p').html(portfolioDisplay.JSONdata.portfolio.items[portfolioDisplay.index].about);
			url = portfolioDisplay.JSONdata.portfolio.items[portfolioDisplay.index].url;
			portfolioDisplay.$portfolio.find('.detail .info').find('p').append('<br /><br /><a href="' + url + '">' + url + '</a>');
		},
		
		loadJSON: function() {
			if (!portfolioDisplay.JSONdata) {
				portfolioDisplay.$spinner.fadeIn('medium');
				$.getJSON('/wp-content/themes/richardson/js/JSON/portfolio.js', function(json){
					portfolioDisplay.$spinner.fadeOut('medium');
					portfolioDisplay.renderSelectorHTML(json);
					portfolioDisplay.JSONdata = json;
					portfolioDisplay.renderInfoDetail();
				});
			}
		},
		
		renderSelectorHTML: function(json) {
			htmlOutput = '';
			$.each(json.portfolio.items,function(i,item) {
				htmlOutput += '<li><img src="' + item.image + '" alt="Image Alt Text">';
			});
			portfolioDisplay.$portfolio.find('.preview ul').html(htmlOutput);
			
			// update total index
			portfolioDisplay.indexTotal = json.portfolio.items.length - 1;
		}
		
	};

});