//
// Designed an developed by Raph D'Amico in 2012
//
// Particular inspiration and props to:
//    Gianfranco Attasi's awesome CSS reflections demo (http://attasi.com/labs/ipad/)
//    Mike Matas' beautifully subtle portfolio site (http://www.mikematas.com/)
//    Atle Mo's subtle patterns (http://subtlepatterns.com)
//
////////////////////////////////////////////////////////////////////////////////////////


// Globals (yeah, I know)
var DEBUG = false; 
var zoomedIn = false;
var rotateSceneDelay = 1000 * (1/60);
var mobileItemWidth = 340;
if (Modernizr.csstransforms3d === true ) { var fullItemWidth = 760; }
else { var fullItemWidth = 300; }

var lastMouseMove = { pageX: 400, pageY: 400 };
var DOMCache = {};

////////////////////////////////////////////////////////////////////////////////
////////////////////////////// UTILITY FUNCTIONS ///////////////////////////////
////////////////////////////////////////////////////////////////////////////////

var consoleLog = function(log) {
	if (DEBUG === true) {
		console.log(log);
	}
}

var processPortfolio = function(aItems, aOrder) {
	var output = {};
	var length = aOrder.length;
	for (var i=0; i<length; i++) {
		output[ aOrder[i] ] = aItems[ aOrder[i] ];
	}
	return output;
}

var portfolio_items = processPortfolio(portfolio_items_all, portfolio_items_order);
var carouselMax = portfolio_items_order.length - 1;
//window.myScroll;

$(document).ready(function() {

	$("#zoom_out").click(function() { app.zoom_out(); });
	$(".portfolio_back").live("click", function()    { app.carousel.shiftCarouselItem(-1); });
	$(".portfolio_forward").live("click", function() { app.carousel.shiftCarouselItem(+1); });
	
	// if (mobile === true) {
		//consoleLog('aaa');
		//window.myScroll = new iScroll('text', { vScroll: true, vScrollbar: true });
	// };
	
	////////////////////////////////////////////////////////////////////////////////
	////////////////////////////// BACKBONE VIEWS //////////////////////////////////
	////////////////////////////////////////////////////////////////////////////////

	window.ItemDetailText = Backbone.View.extend({
		el: '#section_heading_text',
		template: _.template($('#section_heading-template').html()),
		events: {
			"click #zoom_in": 'zoom_in'
		},

		initialize: function(){
			_.bindAll(this, 'render');
			// if (mobile === true) {
			// 	this.myScroll = new iScroll('section_heading_container', { vScroll: true, vScrollbar: true });
			// };
		},

		zoom_in: function(){			
			app.zoom_in();
		},

		reset: function() {
			// if (mobile === true) {
			// 	if ( this.myScroll ) {
			// 		window.myScroll.scrollTo(0, 0, 200);
			// 		window.myScroll.refresh();
			// 	}
			// 	else {
			// 		consoleLog('no scrolled found');
			// 	}
			// }
		},

		render: function(aItemCode) {
			var portfolio_item = portfolio_items[aItemCode];
			var renderedContent = this.template({'portfolio_item': portfolio_item});			
			$(this.el).html(renderedContent);
			//if (mobile === true) { window.myScroll.refresh() };
			return this;
		}

	});

	window.Carousel = Backbone.View.extend({
		el: '#content_plane',
		className: 'carousel_item',
		template: _.template($('#carousel_item-template').html()),
		events: {
    		"click .carousel_item"	: "handleClick"
    	},

		initialize: function(){
			_.bindAll(this, 
				'render',
				'handleClick',
				'zoomIntoCarouselItem',
				'zoomOutOfCarouselItem',
				'shiftCarouselItem',
				'navigateCarouselItem',
				'returnWrappedCarouselIndex',
				'changeCarouselItem'
			);
			this.detail = new ItemDetailText();
			this.contents = portfolio_items;
			this.selected = -1;
			this.max = _.size(this.contents) - 1;
			this.render();

			return this;
		},

		render: function() {
			var renderedContent = this.template({'carousel_items': this.contents});
			$(this.el).html(renderedContent);

			var self = this;
			$(document).keydown(function(e) {
				e.preventDefault();
				if ( e.which === 37 || e.which === 65 || e.which === 74) { // Left arrow
					self.navigateCarouselItem(self.selected-1);
				} 
				else if ( e.which === 39 || e.which === 68 || e.which === 75) { // Right arrow
					self.navigateCarouselItem(self.selected+1);
				}
			});
			return this;
		},

		findItemOrderByCode: function(aItemCode) {
			if (_.isUndefined(aItemCode) === true ) {
				consoleLog('No item code supplied, returning the first item')
				return 0;
			} 
			else {
				if ( _.isUndefined(this.contents[aItemCode]) === false ) {
					return _.indexOf(portfolio_items_order, aItemCode);
					//return this.contents[aItemCode].order;
				}
				else {
					consoleLog('item not found in portfolio_items array');
					return 0;
				}
			}			
		},

		findItemCodeByOrder: function(aItemOrder) {
			var itemOrderToFind = aItemOrder;
			return portfolio_items_order[itemOrderToFind];
			//var foundItem = _.find(this.contents, function(item) { return item.order === itemOrderToFind });
			//return foundItem.code;
		},

		handleClick: function(e) {
			//consoleLog(e);	
			var numberClicked = e.currentTarget.id.match(/\d+/) * 1;
			var itemCode = this.findItemCodeByOrder(numberClicked);
			if (numberClicked === this.selected) {
				app.navigate("portfolio/"+itemCode+"/detail", true);
			} 
			else {
				app.navigate("portfolio/"+itemCode, true);
			}
		},

		zoomIntoCarouselItem: function(aItemNumber) {
			$('#container').removeClass('zoomed_out').addClass('zoomed_in');
			zoomedIn = true;
			resetScene();
			this.detail.reset();			
		},

		zoomOutOfCarouselItem: function(aItemNumber) {
			$('#container').addClass('zoomed_out').removeClass('zoomed_in');
			this.detail.reset();
			zoomedIn = false;
		},

		unfocus: function() {
			this.zoomOutOfCarouselItem(this.selected);
			this.changeCarouselItem(3);
			$('#carousel_3').removeClass('active').addClass('inactive');
			this.selected = -1;
		},

		shiftCarouselItem: function(aShift) {
			var currentItem = this.selected;
			this.navigateCarouselItem(currentItem + aShift);
		},

		navigateCarouselItem: function(aNewValue) {
			var itemToNavigateTo = this.returnWrappedCarouselIndex(aNewValue);
			var itemCode = this.findItemCodeByOrder(itemToNavigateTo);
			if ( zoomedIn === true ) {
				app.navigate('portfolio/'+itemCode+'/detail', true);	
			}
			else {
				app.navigate('portfolio/'+itemCode, true);
			}
		},

		returnWrappedCarouselIndex: function(aNewValue) {  
			if (aNewValue > this.max) {
				return 0;
			}
			else if (aNewValue < 0) {
				return this.max;
			}
			else {
				return aNewValue;
			}
		},

		changeCarouselItem: function(aNewItemNumber) {

			var itemNumber = this.returnWrappedCarouselIndex(aNewItemNumber);
			var curItem = $('#carousel_'+itemNumber);
			
			if (sexyCarousel === true) {
				var itemWidth = fullItemWidth;
			}
			else {
				var itemWidth = mobileItemWidth;
			}

			if (Modernizr.csstransforms3d === true ) {
				$('#content_plane').css({'-webkit-transform': 'translate3d(' + (-itemWidth*itemNumber) + 'px, 0px, 0px)'});
			}
			else {
				$('#content_plane').css({'margin-left': (-itemWidth*itemNumber) + 'px' });				
			}

			$('#carousel_'+ this.selected).removeClass('active').addClass('inactive');
			curItem.removeClass('inactive').addClass('active');
			
			try {
				$( "#slider" ).slider( "value" , itemNumber );
			}	
			catch(err) {
				consoleLog("Slider not working properly. Seems to be an IE error with jquery", err);
			}	
				
			var itemCode = this.findItemCodeByOrder(itemNumber);	
			this.detail.render(itemCode);
				
			this.selected = itemNumber * 1;
			rotateScene();
		}

	});

	window.App = Backbone.Router.extend({
		routes: {
			''						: 'home',
			'portfolio'				: 'portfolio',
			'portfolio/:item'		: 'portfolio',
			'portfolio/:item/detail': 'portfolioItemDetail',
			'resume/'				: 'resume',
		},
		initialize: function() {
			_.bindAll(this, 
				'home', 
				'portfolio',
				'portfolioItemDetail',
				'resume',
				'zoom_in',
				'zoom_out'
			);
			setupVFX();
			this.carousel = new Carousel();

			var self = this;
			$( "#slider" ).slider({
				value: 0,
				min: 0,
				max: this.carousel.max,
				animate: true,
				step: 1,
				slide: function( event, ui ) {
					self.carousel.navigateCarouselItem(ui.value);
				}
			});
				
		},		
		home: function() {

			//if ( mobile === true ) { window.myScroll.refresh(); }

			this.carousel.unfocus();
			$('#intro').show();
			$('#resume').hide();
			$('#shadow').hide();
			$('#section_heading_container').hide();
		},
		portfolio: function(aItem) {

			// if ( mobile === true ) { window.myScroll.refresh(); }

			$('#intro').hide();
			$('#resume').hide();
			$('#shadow').show();
			$('#section_heading_container').show();

			if ( _.isEmpty(aItem) ) {
				consoleLog(this.carousel.selected);
				if (this.carousel.selected === -1 ) {
					this.carousel.selected = this.carousel.max + 1;
				}
				var itemNumber = this.carousel.selected;
				consoleLog(this.carousel.selected);
				var itemCode = this.carousel.findItemCodeByOrder(itemNumber);
				app.navigate("portfolio/"+itemCode, true);
			}
			else {
				var itemNumber = this.carousel.findItemOrderByCode(aItem);				
			}

			//var aItem = aItem || 0;
			if (zoomedIn === true) {
				this.carousel.zoomOutOfCarouselItem(itemNumber);
			}
			if (itemNumber !== this.carousel.selected ) {
				this.carousel.changeCarouselItem(itemNumber);
			}
			
			$('#title').addClass('grid_3').removeClass('grid_12');
			$('#tagline').addClass('grid_3').removeClass('grid_6 push_6');

		},
		portfolioItemDetail: function(aItem) {

			//if ( mobile === true ) { window.myScroll.refresh(); }

			$('#intro').hide();
			$('#resume').hide();
			$('#shadow').show();
			$('#section_heading_container').show();

			var itemNumber = this.carousel.findItemOrderByCode(aItem);
			this.carousel.zoomIntoCarouselItem(itemNumber);
			if (itemNumber !== this.carousel.selected) {
				this.carousel.changeCarouselItem(itemNumber);
			}

			$('#title').addClass('grid_12').removeClass('grid_3');
			$('#tagline').addClass('grid_6 push_6').removeClass('grid_3');			

		},
		resume: function() {
			//if ( mobile === true ) { window.myScroll.refresh(); }
			this.carousel.unfocus();			
			$('#intro').hide();			
			$('#resume').show();
			$('#shadow').hide();
			$('#section_heading_container').hide();			
		},
		zoom_in: function() {
			var itemCode = this.carousel.findItemCodeByOrder(this.carousel.selected);
			app.navigate("portfolio/"+itemCode+"/detail", true);	
		},
		zoom_out: function() {
			var itemCode = this.carousel.findItemCodeByOrder(this.carousel.selected);
			this.navigate("portfolio/"+itemCode, true);
		}

	});
	
	// window.iScrolling = function(aX, aY) {
		
	// 	var startThreshold = 100;
	// 	var endThreshold = 270;
	// 	var vignetteOpacity = 0.5 * ( Math.max(0, Math.min(endThreshold, -aY) - startThreshold ) / startThreshold )
	// 	consoleLog(aY, vignetteOpacity);
	// 	DOMCache.vignette2.style.opacity = vignetteOpacity;
	// };

	var darkenBackground = function(e) {
		consoleLog(e.currentTarget.scrollY);
		var startThreshold = 100;
		var endThreshold = 270;
		var vignetteOpacity = 0.5 * ( Math.max(0, Math.min(endThreshold, e.currentTarget.scrollY) - startThreshold ) / startThreshold )
		DOMCache.vignette2.style.opacity = vignetteOpacity;
	}
	var throttledDarkenBackground = _.throttle(darkenBackground, rotateSceneDelay);	
	$(window).scroll(throttledDarkenBackground);
	
	window.app = new App();
	Backbone.history.start();

});

////////////////////////////////////////////////////////////////////////////////
////////////////////////////// VISUAL EFFECTS //////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

function setupVFX() {
	// Cache elements to move using rotate scene
	DOMCache.content_window = document.getElementById('content_window');
	DOMCache.shadow 		= document.getElementById('shadow');
	DOMCache.vignette2 		= document.getElementById('vignette2');

	var throttledRotateScene = _.throttle(rotateScene, rotateSceneDelay);
	$(document).mousemove(throttledRotateScene);

}

function resetScene() {
	DOMCache.content_window.style.webkitTransform = 'rotateX(0deg) rotateY(0deg)';
}

function rotateScene(e) {

	lastMouseMove = e || lastMouseMove;
	var e = lastMouseMove;

	var horizontal = e.pageX / $(document).width();
	var vertical = e.pageY / $(document).height();
	
	if (zoomedIn === false && sexyCarousel === true) {

		if ( Modernizr.csstransforms3d === true ) {
			DOMCache.content_window.style.webkitTransform = 'rotateX(' + (-((vertical-1) * 3)) + 'deg) rotateY(' + (((horizontal-0.9) * 10)) + 'deg)';
			DOMCache.shadow.style.webkitTransform = 'rotateX(' + (25 + (vertical * 15)) + 'deg) rotateY(' + (((horizontal-0.9) * -10)) + 'deg) skewX(-5deg) translateY(' + (vertical * -10) + 'px)';
		}
		else {
			consoleLog("CSS 3d transforms not supported.")
		}

		$('.active .bigItem').css({ 'background-position': ((horizontal) * -50) + 'px ' + (-vertical * 50) + 'px', });
		$('.active .specular').css({
			'background-position': (-400 - ( horizontal * 200 )) + 'px ' + (-vertical * 300) + 'px',
			'opacity': 1 - (horizontal * .45) - (vertical * .45)
		});
		
	}

}