var shitBrowser		=  $.browser.opera || ($.browser.msie && $.browser.version.indexOf('7.')>-1);


var iPhoneAdroid = ((navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)));


// drag bar width
var dragBarWidth	= 820 / $('#projects > .master').size();

var infoWindow	= $('#info-window');

var infoButton	= $('a#info');

// variable to store info window showing
var infoIsVisible	= false;

// var for animating arrows
var arrowsAnimating = false;

var buttonCentre = parseFloat($('a#previous').css("height")) * 0.5;


/* Pause videos
 ------------------------------------------------- */
function pauseVideos() {
	
	$('.video-switch').each(function () { 
		
		var elemId		= $(this).attr('id').replace('linkto-', 'video-');
		
		$f($('#' + elemId)[0]).api('pause');
		
	});
	
}

/* Change the page height
 ------------------------------------------------- */

function forceFullHeight() {
	

	$('section#info-window').css({
		'height' : $(document).height()
	});

}

/* Set Cover
 ------------------------------------------------- */
function setCover(){

	// Timing variables
	var initialDelay 	= 600;
	var fadeOutSpeed 	= 400;
	
	var pagewidth 		= parseFloat($(window).width());
	var pageheight 		= parseFloat($(document).height());
	var bodyheight 		= parseFloat($("#allContent").height());

	// make sure cover is stretched to screen size
	$('#cover').css({ 
	 	height:pageheight,
	 	width:pagewidth
	});
	
	// hide all but image
	$(".hideAtStart").css({opacity:0});
	
	// animate it out and then remove it from dom
	$('#cover').stop().delay(initialDelay).animate({ 
	 	opacity:0,
	 	width:pagewidth
	}, fadeOutSpeed, function(){
		$('.hideAtStart').delay().animate({ 
		 	opacity:1,
		}, 700);
		$("#cover").css({display:"none"});
				
	});
	
}


/* Hiding the info window
 ------------------------------------------------- */

function hideInfoWindow() {
	
	infoButton.removeClass('on');
	
	infoWindow.fadeOut(250);
	
	infoIsVisible	= false;
	
}


/* showing the info window
 ------------------------------------------------- */


function showInfoWindow() {
	
	infoButton.addClass('on');
	
	infoIsVisible	= true;
	
	infoWindow.css('display', 'table').fadeIn(100);
}


function returnArrows() {
	
		
	// animate the arrows back to the centre
   	$('a#previous span').stop().animate({ 
   		top: buttonCentre
   	}, 350, "easeInOutSine", function(){
		arrowsAnimating = false;
	});
   	
	$('a#next span').stop().animate({ 
   		top: buttonCentre
   	}, 350, "easeInOutSine",	function(){
			arrowsAnimating = false;
	});
	
}

/* Arrow positioning
 ------------------------------------------------- */
var centerPos	= $(window).height() / 2;

function arrowPos(e) {
	
	// ARROW FOLLOW MOUSE 
	
	// Navigation function looks for exit and animates arrows back to orignal pos
	var topMargin			= parseFloat($('nav#arrows a#previous').css("margin-top")) ;
	var buttonHeight		= parseFloat($('nav#arrows a#previous').css("height")) ;
	var mousey				= e.pageY - topMargin;
	var mousex				= e.pageX;
	var pagewidth			= parseFloat($(document).width());
	var buttonWidth			= parseFloat($('a#previous').css("width")) - 2;
	var mouseYOffset		= 0;
	
	if (mousex <= buttonWidth && mousex > 1 && (mousey - mouseYOffset) > 0 && (mousey) < buttonHeight) {
	 	// hovering over the previous button	
	 	$('a#previous span').stop().css({ 
	 		top: mousey - mouseYOffset
	 	});
	}
	

	
	if (mousex >= (pagewidth - buttonWidth) && mousex <=  (pagewidth - 1)  && (mousey - mouseYOffset) > 0 && (mousey) < buttonHeight) {
	 	// hovering over the previous button	
	 	$('a#next span').stop().css({ 
	 		top: mousey - mouseYOffset
	 	});
	}
	
	// force return arrow
	if ((mousey - mouseYOffset) < 0) {
		
		if (!arrowsAnimating) {			
			arrowsAnimating = true;
			returnArrows();
		}
	}

}

$(window).load(function () {
	
		
		forceFullHeight();
		setCover();
	
});


$(document).ready(function () {
	
	
	if (!iPhoneAdroid) {
		
	/* info button entering/leaving
	 ------------------------------------------------- */


	infoButton.mouseenter(function(e){
		infoButton.addClass('over');
	});
	infoButton.mouseleave(function(e){
		infoButton.removeClass('over');
	});

	/* Navigation arrows
	 ------------------------------------------------- */

	$('nav#arrows').mouseenter(function (e) {

		arrowPos(e, this);

	});

	$('nav#arrows').mouseleave(function (e) {

		arrowPos(e, this);
		returnArrows();

	});
	
	
	
	/* Position body
	 ------------------------------------------------- */
	
	function positionPage(){
		
		var pagewidth		= parseFloat($(window).width());
		var pageheight		= parseFloat($(window).height());
		var bodyheight		= parseFloat($("#allContent").height());
		
		var paddingAdjust	= -16;
		
		var padding			= ((pageheight - bodyheight) * 0.5) + paddingAdjust;
		
		// postition all content in vertical centre
		$('#allContent').css({ 
		 	paddingTop:padding,
		 	width:pagewidth
		});
		// position nav buttons in vertical centre
		$('nav#arrows a#previous, nav#arrows a#next').css({ 
		 	// marginTop:padding,
		});
		
		
		$('#projects').css({ 
		 	width:pagewidth
		});
		$('.slide').css({ 
		 	width:pagewidth
		});
	}
		
	/* Grid show/hide
	 ------------------------------------------------- */

	$('a#show-grid').toggle(function() {

		$('#grid').show();
		return false;

	}, function() {

		$('#grid').fadeOut(250);

		return false;

	});
	
	
	/* Project slideshow
	 ------------------------------------------------- */
	
	var projects	= $('#projects');
	
	var pagewidth 	= parseFloat($(window).width());
	
	// if there's a project hash, go to that
	var hash 	= window.location.hash;
	
	if (projects.length > 0) {
		
		projects.cycle({
			fx: 'scrollHorz',
			speed: 350,
			easing: 'easeInOutCubic',
			slideExpr: '.slide',
			next: '#next, img.click-for-next',
			prev: '#previous',
			slideResize:   0,
			fit:           1,
			width: pagewidth,
			before: function(currSlideElement, nextSlideElement) {
				
				/* Hide the video
				 ------------------------------------------------- */
				pauseVideos();
				
				/* If this is a master slide, do all this guff
				 ------------------------------------------------- */
				
				if (($(nextSlideElement).hasClass('master')) || ($(nextSlideElement).hasClass('laster'))) {
					
					// move the scroller
					if ($(nextSlideElement).hasClass('master')) {
						
						var slideIndex	 		= $(nextSlideElement).index('.master');
						
					}
					
					if ($(nextSlideElement).hasClass('laster')) {
						
						var slideIndex	 		= $(nextSlideElement).index('.laster');
						
					}
					
					

					$('#scroller a').stop().animate({ 
						'margin-left': dragBarWidth * slideIndex,
						easing: 'easeInOutCubic'
					}, 250);

					// set the hashtag
					window.location.hash	= $(nextSlideElement).attr('id').replace('-slide', '').replace('-1', '').replace('-2', '').replace('-3', '').replace('-4', '').replace('-5', '');
					
				}
			}
		});
    
		projects.cycle('pause');
	
	}

	if (hash) {
		
		projects.cycle($(hash + '-1').index());
	
	}

	
	
	/* Scroller
	 ------------------------------------------------- */
	
	$('#scroller a').css({
		'width': dragBarWidth
	});
	
	$(document).bind('keydown', function(e) {
			
		
	    if (e.keyCode === 37) {
			
			// move the slideshow
			projects.cycle('prev');
			
			$('a#previous span').stop().animate({ 
				'margin-left': '-2px',
				easing: 'easeInOutCubic'
			}, 150);
			
			$('a#previous span').animate({ 
				'margin-left': '0px',
				easing: 'easeInOutCubic'
			}, 150);
		
		} else if (e.keyCode === 39) {
			
			projects.cycle('next');
			
			$('a#next span').stop().animate({ 
				'margin-left': '2px',
				easing: 'easeInOutCubic'
			}, 150);
			
			$('a#next span').animate({ 
				'margin-left': '0px',
				easing: 'easeInOutCubic'
			}, 150);
			
		} else if (e.keyCode == 27) {
			
			hideInfoWindow();
		
		} else if (e.keyCode == 73) {

			if (infoIsVisible) {
				
				hideInfoWindow();	
				
			} else {
				
				showInfoWindow();
				
			}
		}

	});
	
	/* Info button
	 ------------------------------------------------- */
	
	$('#info-window').bind('touchstart click', function(e) {
		
		if (e.target.nodeName === 'A') {
			
			return true; 	
			
		} else {
			
			hideInfoWindow();

			return false;
			
		}
		
	});
	
	// hiding the info window
	infoButton.bind('touchstart click', function(e) {
		
		pauseVideos();
		
		showInfoWindow();
		
		return false;

	});
	
	returnArrows();	
	
	positionPage();
	
	// Reposition and scale on window resize
	
	$(window).resize(function() {
			
		positionPage();	
		
		forceFullHeight();
		
		returnArrows();
	
	});


	/* Video switching link
	----------------------------------------------- */
	
	$('a.video-switch').bind('touchstart click', function(e) {
		
		var vimeoId		= $(this).attr('id').replace('linkto-', '');
		 
		var color		= $(this).attr('data-color').replace('#', '');

		// 16:9 formatting
		
		var width		= 820;
	
		var height		= Math.round((width / 16) * 9);	
		
		var marginTop	= 20;
		
		
		// add the vimeo
		$('span', this).append('<iframe id="video-'+vimeoId+'" class="vimeo" src="http://player.vimeo.com/video/' + vimeoId + '?title=0&amp;api=1&amp;&amp;player_id=video-' + vimeoId + '&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;color='+ color +'" width="' + width + '" height="'+ height +'" style="margin-top:' + marginTop + 'px" frameborder="0"></iframe>');
		
		// remove the image
		$('img', this).hide();
	
		return false;
	});
	

	/* iPad gestures
	----------------------------------------------- */
	
	//Assign handlers to the simple direction handlers.
	var swipeOptions = {
		swipe:swipe,
		threshold:50
	}
	
	$(function (){			
		//Enable swiping...
		$("body").swipe(swipeOptions);
	
	});
	
	//Swipe handlers.
	//The only arg passed is the original touch event object			
	function swipe(event, direction)
	{
 		if (direction == "right") {
			
			projects.cycle('prev');
			
		} else {
			
			projects.cycle('next');
		
		}
	}
	
	} // eof if iphone
	
});

/* Arrow positioning 
 ------------------------------------------------- */

$(document).mousemove(function(e){
	
     arrowPos(e);

});