(function($) {
	
	
	var imageCache = [];
	// Arguments are image paths relative to the current page.
	
	$.preloadImages = function() {
		var argsLen = arguments.length;
		
		for(var i = argsLen; i--;) {
			var cacheImage = new Image();
			cacheImage.src = arguments[i];
			imageCache.push(cacheImage);
		}
	}
	
	
	$.fn.onImagesLoad = function(completeHandler) {
		return this.each(function() {
			
			var imgs = (this.tagName.toLowerCase() === 'img') ? $(this) : $('img', this);
			var context = this;
			var i = 0;
			
			var done = function() {
				if(typeof completeHandler === 'function' ) {
					completeHandler(context);
				}
			};
			
			if(imgs.length) {
				imgs.each(function() {
					var img = this;
					
					var checkLoaded = function(e) {
						if((img.complete) || (img.readyState == 'complete' && e.type == 'readystatechange')) {
							if(++i === imgs.length) {
								done();
							}
						}
						else if(img.readyState === undefined) { // dont for IE
							$(img).attr('src', $(img).attr('src')); // re-fire load event
						}
					};
					
					$(img).bind('load readystatechange', function(e) {
						checkLoaded(e);
					});
					
					checkLoaded({type:'readystatechange'}); // bind to 'load' event...
				});
			} else {
				done();
			}
		});
	};
	
})(jQuery);



$(function() {
	
	
	
	var projectContainerSelector	= '#project-list-container';
	var projectPagination			= null;
	var projectSlider				= null;
	var activeProjectURL			= '';
	
	var paginationSelector			= '.pagination';
	var paginationLinkSelector		= '.pagination-link';
	var paginationHomeSelector		= '.pagination-home';
	
	var projectPageInfoSelector		= '.project-info';
	var projectPageSliderSelector	= '.project-page-slider';
	var projectPageSelector			= '.project-page';
	var projectSliderSelector		= '.project-slider';
	var projectSelector				= '.project';
	var projectBackgroundSelector	= '.project-bg';
	
	var nextSelector				= '.next-page';
	var prevSelector				= '.prev-page';
	
	var pauseSlideshowSelector		= '.pause';
	var playSlideshowSelector		= '.play';
	
	
	var cache						= {};
	var animating					= false;
	var currentProject				= 0;
	var currentPage					= 0;
	var numProjects					= $(projectSelector).size();
	var numPages					= $(projectPageSelector).size();
	
	var paused						= false;
	var interval					= null;
	
	
	
	$(projectContainerSelector).addClass('loading');
	
	
	
	$(projectSelector).each(function(index, element) {
		var self = $(this);
		var background = self.find(projectBackgroundSelector);
		var imageSource = background.css('backgroundImage');
		
		self.css({
			opacity: 0
		});
		
		self.onImagesLoad(function() {
			if(index == currentProject) {
				$(projectContainerSelector).removeClass('loading');
				
				self.animate({
					opacity: 1
				});
				
				createProjectHandlers();
			}
		});
	});
	
	
	
	
	$(projectPageSelector).each(function(index, element) {
		var self = $(this);
		
		self.onImagesLoad(function() {
			if(index == currentPage) {
				createProjectInfoHandlers();
			}
		});
	});
	
	
	
	$(pauseSlideshowSelector).live('click', function()
	{
		$(this).removeClass('pause');
		$(this).addClass('play');
		$(this).attr('title', 'Play slideshow');
		
		paused = true;
		
		stopSlideshow();
	});
	
	
	$(playSlideshowSelector).live('click', function()
	{
		$(this).removeClass('play');
		$(this).addClass('pause');
		$(this).attr('title', 'Pause slideshow');
		
		paused = false;
		
		startSlideshow();
	});
	
	
	$('#email').text('enquiries@matthewkingston.com.au');
	
	
	$.preloadImages('../images/pause.gif', '../images/play.gif');
	
	
	
	function restoreContent() {
		
		$(paginationSelector).animate({opacity: 0}, 200);
		$(paginationSelector).queue(function(next) {
			projectPagination.css({opacity: 0});
			$(paginationSelector).replaceWith(projectPagination);
			projectPagination.animate({opacity: 1}, 200);
			projectPagination.queue(function(next) {
				createProjectHandlers();
				$(this).dequeue();
			});
			
			$(this).dequeue();
		});
		
		
		$(projectPageInfoSelector).animate({opacity: 0}, 200);
		$(projectPageInfoSelector).queue(function(next) {
			$(projectPageSliderSelector).css({left: '0px'});
			
			projectSlider.css({opacity: 0});
			$(projectSelector, projectSlider).css({opacity: 0});
			$(projectPageInfoSelector).replaceWith(projectSlider);
			
			projectSlider.css({opacity: 1});
			
			Cufon.refresh();
			
			$(this).dequeue();
		});
		
		
		numPages = 0;
		currentPage = 0;
		
	}
	
	
	
	
	
	function replaceContent(activeProjectURL) {
		var activeCache = cache[activeProjectURL];
		
		var pagination = activeCache.pagination;
		var info = activeCache.info;
		numPages = activeCache.numPages;
		
		
		$(paginationSelector).queue(function(next) {
			pagination.css({opacity: 0});
			$(paginationSelector).replaceWith(pagination);
			pagination.animate({opacity: 1}, 200);
			pagination.queue(function(next) {
				createProjectInfoHandlers();
				$(this).dequeue();
			});
			
			$(this).dequeue();
		});
		
		
		$(projectSliderSelector).queue(function(next) {
			$(projectSliderSelector).css({left: '0px'});
			$(projectPageSelector).stop().css({opacity: 1});
			info.css({opacity: 0});
			$(projectSliderSelector).replaceWith(info);
			info.animate({opacity: 1}, 200);
			
			Cufon.refresh();
			
			$(this).dequeue();
		});
		
	}
	
	
	
	
	
	
	function removeProjectHandlers() {
		
		
		stopSlideshow();
		
		
		
		var unbindPaginationLinkHandlers = function() {
			$(paginationSelector + " " + paginationLinkSelector).each(function() {
				var self = $(this);
				self.unbind('click');
				self.unbind('mouseover');
				self.unbind('mouseout');
			});
		}
		
		
		var unbindNextProjectLinkHandler = function() {
			$(nextSelector).each(function() {
				var self = $(this);
				self.unbind('click');
				self.unbind('mouseover');
				self.unbind('mouseout');
			});
		}
		
		
		var unbindPrevProjectLinkHandler = function() {
			$(prevSelector).each(function() {
				var self = $(this);
				self.unbind('click');
				self.unbind('mouseover');
				self.unbind('mouseout');
			});
		}
		
		
		var unbindProjectInfoLinkHandlers = function() {
			$(projectBackgroundSelector).each(function() {
				var self = $(this);
				self.unbind('click');
			});
		}
		
		
		unbindProjectInfoLinkHandlers();
		unbindPaginationLinkHandlers();
		unbindNextProjectLinkHandler();
		unbindPrevProjectLinkHandler();
		
		
		if(!projectPagination) {
			projectPagination = $(paginationSelector).clone();
		}
		
		if(!projectSlider) {
			projectSlider = $(projectSliderSelector).clone();
		}
		
		
		if(cache[activeProjectURL] != undefined) {
			
			replaceContent(activeProjectURL);
			
		} else {
			
			$(projectContainerSelector).addClass('loading');
			
			$(paginationSelector).animate({opacity: 0}, 200);
			$(projectSliderSelector).animate({opacity: 0}, 200);
			
			$.get(activeProjectURL, function(data) {
				var _pagination = $(paginationSelector, data);
				var _info = $(projectPageInfoSelector, data);
				var _pages = $(projectPageSelector, data).size();
				
				cache[activeProjectURL] = {
					pagination: _pagination,
					info: _info,
					numPages: _pages
				};
				
				replaceContent(activeProjectURL);
				
				$(projectContainerSelector).removeClass('loading');
			});
			
		}
	}
	
	
	
	
	
	function createProjectHandlers() {
		
		var bindProjectInfoLinkHandlers = function() {
			$(projectBackgroundSelector).each(function() {
				var self = $(this);
				
				self.bind('click', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					activeProjectURL = self.attr('href');
					
					removeProjectHandlers();
				});
			});
		}
		
		
		
		var highlightPaginationLink = function() {
			var paginationLinks = $(paginationSelector + " " + paginationLinkSelector);
			
			paginationLinks.data('active', false);
			paginationLinks.stop().animate({
				backgroundColor: '#202020'
			});
			
			paginationLinks.eq(currentProject).data('active', true);
			paginationLinks.eq(currentProject).stop().animate({
				backgroundColor: '#2391c1'
			});
		}
		
		
		
		var animateOutCurrentProject = function(direction) {
			var dir = (direction === 'left' || direction === 'right') ? direction : 'left';
			var proj = $(projectSelector).eq(currentProject);
			
			if(jQuery.browser.msie) {
				var pos = (dir == 'left' ? '-100%' : '100%');
				var dur = 1000;
				var props = {left: pos};
			} else {
				var pos = (dir == 'left' ? '-480px' : '480px');
				var dur = 300;
				var props = {left: pos, opacity: 0};
			}
			
			proj.stop();
			proj.removeClass('active');
			proj.animate(props, dur, function() {
				animating = false;
			});
		}
		
		
		
		
		var animateInCurrentProject = function(direction) {
			var dir = (direction === 'left' || direction === 'right') ? direction : 'left';
			var proj = $(projectSelector).eq(currentProject);
			
			if(jQuery.browser.msie) {
				var pos = (dir == 'left' ? '100%' : '-100%');
				var initProps = {left: pos, opacity: 1};
				var dur = 1000;
				var props = {left: '0%'};
			} else {
				var pos = (dir == 'left' ? '480px' : '-480px');
				var initProps = {left: pos, opacity: 0}
				var dur = 300;
				var props = {left: '0px', opacity: 1};
			}
			
			highlightPaginationLink();
			
			proj.addClass('active');
			proj.css(initProps);
			proj.stop();
			proj.animate(props, dur, function() {
				animating = false;
			});
			
			if(!paused)
			{
				stopSlideshow();
				startSlideshow();
			}
		}
		
		
		
		var bindPaginationLinkHandlers = function() {
			$(paginationSelector + " " + paginationLinkSelector).each(function(index, element) {
				var self = $(this);
				var projectLink = self.attr('href').match(/pr=([0-9]+)/);
				
				if(projectLink && projectLink[1]) {
					projectLink = parseInt(projectLink[1]);
					
					self.bind('click', function(e) {
						e.stopPropagation();
						e.preventDefault();
						
						if(!animating) {
							if(currentProject != projectLink && projectLink < numProjects && projectLink >= 0) {
								animating = true;
								var direction = projectLink > currentProject ? 'left' : 'right';
								animateOutCurrentProject(direction);
								currentProject = projectLink;
								highlightPaginationLink();
								animateInCurrentProject(direction);
							}
						}
					});
				}
				
				
				
				self.bind('mouseover', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					$(this).stop().animate({
						backgroundColor: '#2391c1'
					}, function() {
						Cufon.refresh();
					});
				});
				
				
				
				self.bind('mouseout', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					if($(this).data('active') != true) {
						$(this).stop().animate({
							backgroundColor: '#202020'
						}, function() {
							Cufon.refresh();
						});
					}
				});
				
			});
		}
		
		
		
		var bindNextProjectLinkHandler = function() {
			$(nextSelector).each(function() {
				var self = $(this);
				
				self.bind('click', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					if(!animating) {
						if(currentProject == (numProjects - 1)) {
							animating = true;
							animateOutCurrentProject('left');
							currentProject = 0;
							animateInCurrentProject('left');
						} else if(currentProject < (numProjects - 1)) {
							animating = true;
							animateOutCurrentProject('left');
							currentProject++;
							highlightPaginationLink();
							animateInCurrentProject('left');
						}
					}
				});
				
				
				self.bind('mouseover', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					$(this).stop().animate({
						backgroundColor: '#2391c1'
					});
				});
				
				
				self.bind('mouseout', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					if($(this).data('active') != true) {
						$(this).stop().animate({
							backgroundColor: '#202020'
						});
					}
				});
				
			});
		}
		
		
		
		var bindPrevProjectLinkHandler = function() {
			$(prevSelector).each(function() {
				var self = $(this);
				
				self.bind('click', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					if(!animating) {
						if(currentProject > 0) {
							animating = true;
							animateOutCurrentProject('right');
							currentProject--;
							highlightPaginationLink();
							animateInCurrentProject('right');
						}
					}
				});
				
				
				self.bind('mouseover', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					$(this).stop().animate({
						backgroundColor: '#2391c1'
					});
				});
				
				
				self.bind('mouseout', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					if($(this).data('active') != true) {
						$(this).stop().animate({
							backgroundColor: '#202020'
						});
					}
				});
				
			});
		}
		
		
		animateInCurrentProject();
		bindProjectInfoLinkHandlers();
		bindPaginationLinkHandlers();
		bindNextProjectLinkHandler();
		bindPrevProjectLinkHandler();
		
	}
	
	
	
	
	
	function removeProjectInfoHandlers() {
		
		
		var unbindHomeLinkHandler = function() {
			$(paginationHomeSelector).each(function() {
				var self = $(this);
				self.unbind('click');
			});
		}
		
		
		
		var unhighlightPaginationLinks = function() {
			var paginationLinks = $(paginationSelector + " " + paginationLinkSelector);
			
			paginationLinks.each(function(index, element) {
				$(this).stop().css({
					backgroundColor: '#202020'
				});
			});
		}
		
		
		var unbindPaginationLinkHandlers = function() {
			$(paginationSelector + " " + paginationLinkSelector).each(function() {
				var self = $(this);
				self.unbind('click');
				self.unbind('mouseover');
				self.unbind('mouseout');
			});
		}
		
		
		var unbindNextPageLinkHandler = function() {
			$(nextSelector).each(function() {
				var self = $(this);
				self.unbind('click');
				self.unbind('mouseover');
				self.unbind('mouseout');
			});
		}
		
		
		var unbindPrevPageLinkHandler = function() {
			$(prevSelector).each(function() {
				var self = $(this);
				self.unbind('click');
				self.unbind('mouseover');
				self.unbind('mouseout');
			});
		}
		
		
		unhighlightPaginationLinks();
		unbindHomeLinkHandler();
		unbindPaginationLinkHandlers();
		unbindNextPageLinkHandler();
		unbindPrevPageLinkHandler();
		
		restoreContent();
		
	}
	
	
	
	
	function createProjectInfoHandlers() {
		
		
		var bindHomeLinkHandler = function() {
			$(paginationHomeSelector).each(function() {
				var self = $(this);
				
				self.bind('click', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					activeProjectURL = '';
					
					removeProjectInfoHandlers();
				});
			});
		}
		
		
		var highlightPaginationLink = function() {
			var paginationLinks = $(paginationSelector + " " + paginationLinkSelector);
			
			paginationLinks.each(function(index, element) {
				$(this).data('active', false);
				
				$(this).stop().animate({
					backgroundColor: '#202020'
				});
				
				if(index == (currentPage + 1)) {
					$(this).data('active', true);
					
					$(this).stop().animate({
						backgroundColor: '#2391c1'
					});
				}
			});
		}
		
		
		var animateToCurrentPage = function() {
			$(projectPageSliderSelector).animate({
				left: (-(currentPage * 1100)) + 'px'
			}, 400, 'easeOutCubic', function() {
				animating = false;
			});
			
			/*
			$(projectPageSelector).stop().animate({
				opacity: .35
			});
			
			$(projectPageSelector).eq(currentPage).stop().animate({
				opacity: 1
			});
			*/
			
			highlightPaginationLink();
		}
		
		
		
		
		var bindPaginationLinkHandlers = function() {
			$(paginationSelector + " " + paginationLinkSelector).each(function(index, element) {
				var self = $(this);
				var pageLink = self.attr('href').match(/p=([0-9]+)/);
				
				if(pageLink && pageLink[1]) {
					pageLink = parseInt(pageLink[1]);
					
					self.bind('click', function(e) {
						e.stopPropagation();
						e.preventDefault();
						
						if(!animating) {
							if(currentPage != pageLink && pageLink < numPages && pageLink >= 0) {
								
								animating = true;
								currentPage = pageLink;
								
								animateToCurrentPage();
							}
						}
					});
				}
				
				
				
				self.bind('mouseover', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					$(this).stop().animate({
						backgroundColor: '#2391c1'
					});
				});
				
				
				
				self.bind('mouseout', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					if($(this).data('active') != true) {
						$(this).stop().animate({
							backgroundColor: '#202020'
						});
					}
				});
				
			});
		}
		
		
		
		var bindNextPageLinkHandler = function() {
			$(nextSelector).each(function() {
				var self = $(this);
				
				self.bind('click', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					if(!animating) {
						if(currentPage < (numPages - 1)) {
							animating = true;
							currentPage++;
							
							animateToCurrentPage();
						}
					}
				});
				
				
				self.bind('mouseover', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					$(this).stop().animate({
						backgroundColor: '#2391c1'
					});
				});
				
				
				self.bind('mouseout', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					if($(this).data('active') != true) {
						$(this).stop().animate({
							backgroundColor: '#202020'
						});
					}
				});
				
			});
		}
		
		
		
		var bindPrevPageLinkHandler = function() {
			$(prevSelector).each(function() {
				var self = $(this);
				
				self.bind('click', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					if(!animating) {
						if(currentPage > 0) {
							animating = true;
							currentPage--;
							
							animateToCurrentPage();
							
						}
					}
				});
				
				
				self.bind('mouseover', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					$(this).stop().animate({
						backgroundColor: '#2391c1'
					});
				});
				
				
				self.bind('mouseout', function(e) {
					e.stopPropagation();
					e.preventDefault();
					
					if($(this).data('active') != true) {
						$(this).stop().animate({
							backgroundColor: '#202020'
						});
					}
				});
				
			});
		}
		
		
		animateToCurrentPage();
		bindHomeLinkHandler();
		bindPaginationLinkHandlers();
		bindNextPageLinkHandler();
		bindPrevPageLinkHandler();
		
		
		
	}
	
	
	
	function stopSlideshow()
	{
		clearTimeout(interval);
	}
	
	
	
	function startSlideshow()
	{
		interval = setTimeout(function() {
			$(nextSelector).trigger('click');
		}, 5000);
	}
	
	
	
	
});