var SEARCH_QUERY_INIT_VALUE = 'Zoeken';

$(function() {
	initSearchQuery();
	
	Cufon.now();

	Cufon.replace('#main-menu a', {
		fontFamily: 'KievitOT-Medium',
		fontSize: '13px',
		fontWeight: 'bold'
	});
	
	Cufon.replace('.header', {
		fontFamily: 'KievitOT-Regular',
		fontSize: '20px'
	});
	
	Cufon.replace('#categories .box-title', {
		fontFamily: 'KievitOT-Light',
		fontSize: '15px'
	});
	
	Cufon.replace('#projects .box-title', {
		fontFamily: 'KievitOT-Light',
		fontSize: '13px'
	});

	Cufon.replace('.content h1', {
		fontFamily: 'KievitOT-Light',
		fontSize: '20px'
	});
	
	// Create caption images for img elements follewed immediately by an h6 element.
	$('.content img').each(function() {
		var img = $(this);
		var next = img.parent().next();
		if (next.is('h6')) {
			var image = $('<div class="image"></div>');
			image.insertAfter(img);
			image.append(img);
			var caption = $('<p class="caption""><span></span></p>');
			caption.find('span').html(next.html());
			image.append(caption);
			next.remove();
		}
	});
});

function initSearchQuery() {
	var query = $('#search-query');
	query.closest('form').submit(function() {
		if (query.val() == SEARCH_QUERY_INIT_VALUE) {
			query.val('');
		}
		return true;
	});
	if (query.val() == SEARCH_QUERY_INIT_VALUE) {
		query.addClass('default-value');
	}
	function focus() {
		if (query.val() == SEARCH_QUERY_INIT_VALUE) {
			query.val('');
			query.removeClass('default-value');
		}
	}
	function blur() {
		if (query.val() == '') {
			query.val(SEARCH_QUERY_INIT_VALUE);
			query.addClass('default-value');
		}
	}
	query.focus(focus).blur(blur);
}

var IMAGE_VIEWER_INTERVAL = 3000;
var PANE_VISIBLE_CLOSED = 23;

var ImageViewer = {
	init: function() {
		var self = this;
		
		this._viewer = $('#image-viewer');
		
		this._isNewImages = true;
		
		//var isFirst = true;
		function load() {
			if (self._loadCallback) {
				self._loadCallback();
				self._loadCallback = null;
			}
			
			//if (jQuery.browser != 'msie' && isFirst) {
			//	isFirst = false;
			//	return;
			//}
			self.fadeOver();
		}
		
		this._queue = [];
		
		this._pane = $('.pane', this._viewer);
		this._paneContent = $('.content', this._pane);
		this._paneTitle = $('.title', this._pane);
		this._paneText = $('.text', this._pane);
		this._paneButton = $('.button', this._pane);
		this._paneButton.click(function() {
			self.togglePane();
		});
		
		this._firstImage = $('img', this._viewer);
		this._firstImage.load(load);
		this._firstImage.css('z-index', 2);
		this._firstImage.addClass('first');
		
		this._isFirstInFront = true;
		
		this._secondImage = $(document.createElement('img'));
		this._secondImage.load(load);
		this._secondImage.css('z-index', 1);
		this._secondImage.insertAfter(this._firstImage);
		this._secondImage.addClass('second');
		
		this._navControls = $('#nav-controls');
		this._navControls.show();
		
		this._imageTitle = $('#image-title');
		
		this._playControl = $('#play-control');
		this._pauzeControl = $('#pauze-control');
		
		this._playControl.click(function() {
			self.play();
		});
		this._pauzeControl.click(function() {
			self.pauze();
		});
		
		this._imageOptions = $('#image-options');
		
		this._hasCommand = false;
	},

	load: function(images, loadCallback) {
		this._loadCallback = loadCallback;
		
		this._isNewImages = true;
		
		this._images = images;
		this._count = this._images.length;
		
		this._imageOptions.find('li').remove();
		
		var self = this;
		$.each(images, function(index) {
			var li = $(document.createElement('li'));
			li.click(function() {
				self.pauze();
				self.addCommand(function() {
					self.show(index);
				});
			});
			li.text(index + 1);
			self._imageOptions.append(li);
		});
		
		this._projectImages = $('li', this._imageOptions);
		
		this.show(0);
		this.play();
	},
	
	setPane: function(title, text) {
		var self = this;
		this._paneContent.fadeOut('fast', function() {
			self._paneTitle.text(title);
			self._paneText.text(text);
			self._paneContent.fadeIn('fast');
		});
	},
	
	isPaneOpen: function() {
		return this._pane.hasClass('open');
	},
	
	togglePane: function() {
		var isOpen = this.isPaneOpen();
		if (isOpen) {
			var left = this._pane.width() - PANE_VISIBLE_CLOSED;
			this._pane.animate({left: '-' + left + 'px'});
		}
		else {
			this._pane.animate({left: '0px'});
		}
		this._pane.toggleClass('open', !isOpen);
	},
	
	nextCommand: function() {
		this._hasCommand = this._queue.length > 0;
		if (this._hasCommand) {
			var command = this._queue.pop();
			command();
		}
	},
	
	addCommand: function(command) {
		var self = this;
		this._queue.push(command);
		if (!this._hasCommand) {
			this.nextCommand();
		}
	},
	
	play: function() {
		clearTimeout(this._handle);
		this._playControl.addClass('active');
		this._pauzeControl.removeClass('active');
		var self = this;
		this._handle = setInterval(
			function() {
				self.addCommand(function() {
					self.next();
				});
			},
			IMAGE_VIEWER_INTERVAL
		);
	},
	
	pauze: function() {
		this._playControl.removeClass('active');
		this._pauzeControl.addClass('active');
		clearTimeout(this._handle);
	},
	
	next: function() {
		this.show(this._current == (this._count - 1) ? 0 : this._current + 1);
	},
	
	show: function(index) {
		if (this._current == index && !this._isNewImages) {
			this.nextCommand();
			return;
		}
		
		this._isNewImages = false;
		
		this._current = index;
		
		var element = this._isFirstInFront ? this._secondImage : this._firstImage;
		var image = this._images[this._current];
		if (element.attr('src') == image.image) {
			this.fadeOver();
		}
		else {
			element.attr('src', image.image);
		}
		
		this._projectImages.removeClass('active');
		this._projectImages.eq(this._current).addClass('active');
	},
	
	fadeOver: function() {
		var self = this;
		if (this._isFirstInFront) {
			this._firstImage.fadeOut(function() {
				self._firstImage.css('z-index', 1);
				self._secondImage.css('z-index', 2);
				self._firstImage.show();
				self._isFirstInFront = false;
				self.nextCommand();
			});
			this._imageTitle.fadeOut('fast', function() {
				self._imageTitle.text(self._images[self._current].title);
				self._imageTitle.fadeIn('fast');
			});
		}
		else {
			this._secondImage.fadeOut(function() {
				self._secondImage.css('z-index', 1);
				self._firstImage.css('z-index', 2);
				self._secondImage.show();
				self._isFirstInFront = true;
				self.nextCommand();
			});
			this._imageTitle.fadeOut('fast', function() {
				self._imageTitle.text(self._images[self._current].title);
				self._imageTitle.fadeIn('fast');
			});
		}
	}
};