$(document).ready(function() {
	$('#q').get(0).focus();
	
	// set size on load to fix Firefox refresh
	setSize($('#size').val());
	
	// preload images
	var img = [
		'size-large.png',
		'size-medium.png',
		'size-small.png',
		'size-large-set.png',
		'size-medium-set.png',
		'size-small-set.png'
	];
	for(var i = 0; i < img.length; i++) {
		$('<img>').attr('src', img[i]);
	}
	
	$('#size-large').click(function(){ setSize('large'); return false; });
	$('#size-medium').click(function(){ setSize('medium'); return false; });
	$('#size-small').click(function(){ setSize('small'); return false; });
});

function search(page) {
	if(!page)
		page = 1;
	page = parseInt(page, 10);
	//$('#prev').css('display', 'none');
	//$('#next').css('display', 'none');
	$('#pages').html('');
	$('#results').html('');
	$('#error').text('');
	var q = $.trim($('#q').val());
	if(q.length == 0) {
		$('#error').text('Bitte gib einen Suchbegriff ein.');
		return;
	}
	$('#load').css('display', 'block');
	$.getJSON('?d=1&q=' + encodeURIComponent(q) + '&page=' + page + '&size=' + $('#size').val(), function(resp) {
		
		if(resp.error) {
			$('#load').css('display', 'none');
			$('#error').text(resp.error);
		} else if(resp.results == 0) {
			$('#load').css('display', 'none');
			$('#error').text('Es wurden keine Bilder gefunden.');
		} else {
		
			Preloader.clean();
			$.each(resp.items, function(i, item) {
		  	Preloader.add(item.url);
		  	var div = $('<div>')
		  		.addClass('item')
		  		.attr('id', 'img'+i)
					.css('display', 'none');
		  	var a = $('<a>')
					.attr('href', 'http://www.amazon.de/dp/'+item.asin+'/ref=nosim?tag=osorde-21')
					.attr('target', '_blank')
					.addClass('img')
					.appendTo(div);
				$('<img>')
					.attr('src', item.url)
					.appendTo(a);
				var ii = $('<div>')
					.addClass('iteminfo');
				$('<div>')
					.addClass('title')
					.text(item.title)
					.appendTo(ii);
				$('<div>')
					.addClass('artist')
					.text(item.artist)
					.appendTo(ii);
				ii.appendTo(div);
				div.appendTo($('#results'));
			});
			
			Preloader.onFinish(function() {
				$('#load').css('display', 'none');
				
				$('#results > .item').each(function(i) {
					Fader(this.id).fadein(200);
				});
				
				var pages = $('#pages');
				pages.css('display', 'none');
				if(page > 1 && resp.pages > 1) {
					//$('#prev a').attr('name', 'p'+(page-1)).click(setPage);
					//$('#prev').css('display', 'block');
					//Fader('prev').fadein(200);
					$('<a>').attr('href', '#').attr('name', 'p'+(page-1)).text('zurück').click(setPage).appendTo(pages);
				}
				var pstart = ((page - 4 > 0) ? (page - 4) : 1);
				var pend = ((resp.pages - page > 4) ? (page + 4) : resp.pages);
				for(var i = pstart; i <= pend; i++) {
					if(page == i) {
						$('<span>').addClass('selected').text(i).appendTo(pages);
					} else {
						$('<a>').attr('href', '#').attr('name', 'p'+i).text(i).click(setPage).appendTo(pages);
					}
				}
				if(page < resp.pages) {
					//$('#next a').attr('name', 'p'+(parseInt(page,10)+1)).click(setPage);
					//$('#next').css('display', 'block');
					//Fader('next').fadein(200);
					$('<a>').attr('href', '#').attr('name', 'p'+(parseInt(page,10)+1)).text('weiter').click(setPage).appendTo(pages);
				}
				$('<span>').text(' ('+resp.pages+')').appendTo(pages);
				
				Fader('pages').fadein(200);
				
			});
			Preloader.load();
			
		}
	});
}
function setPage() {
	var p = $(this).attr('name').substr(1);
	search(p);
	return false;
}
function setSize(size) {
	$('#size').val(size);
	$('#size-large').attr('src', 'size-large' + (size == 'large' ? '-set' : '') + '.png');
	$('#size-medium').attr('src', 'size-medium' + (size == 'medium' ? '-set' : '') + '.png');
	$('#size-small').attr('src', 'size-small' + (size == 'small' ? '-set' : '') + '.png');
	if($.trim($('#q').val()).length != 0) {
		search();
	}
}
function Fader(el, display) {
	if(typeof el == 'string')
		this.el = document.getElementById(el);
	else
		this.el = el;
	this.display = display ? display : '';
	this.ms = 200;
	this.runs = 20;
	this.setOpacity = function(opacity) {
		this.el.style.opacity = this.el.style.MozOpacity = this.el.style.KhtmlOpacity = opacity/100;
		this.el.style.filter = 'alpha(opacity='+opacity+')';
	};
	this.fade = function(more, opacity) {
		var o = more ? opacity + 100 / this.runs : opacity - 100 / this.runs;
		this.setOpacity(o);
		if(more && o < 100 || !more && o > 0) {
			window.setTimeout('Fader("'+this.el.id+'", "'+this.display+'").fade('+(more?'true':'false')+', '+o+');', this.ms / this.runs);
		}
		if(!more && o <= 0) {
			this.el.style.display = 'none';
		}
	};
	this.fadein = function(ms) {
		if(ms && ms > 0) this.ms = ms;
		this.setOpacity(0);
		this.el.style.display = this.display;
		window.setTimeout('Fader("'+this.el.id+'", "'+this.display+'").fade(true, 0);', this.ms / this.runs);
	};
	this.fadeout = function(ms) {
		if(ms && ms > 0) this.ms = ms;
		this.setOpacity(100);
		window.setTimeout('Fader("'+this.el.id+'", "'+this.display+'").fade(false, 100);', this.ms / this.runs);
	};
	return this;
}

var Preloader = {
	callbacks: [],
	images: [],
	loadedImages: [],
	imagesLoaded: 0,
	
	clean: function() {
		$('#state').text('');
		this.images = [];
		this.loadedImages = [];
		this.imagesLoaded = 0;
		this.callbacks = [];
	},
	add: function(image) {
		if(typeof image == 'string')
			this.images.push(image);
		if(typeof image == 'array' || typeof image == 'object') {
			for(var i = 0; i < image.length; i++) {
				this.images.push(image[i]);
			}
		}
	},
	onFinish: function(func) {
		this.callbacks.push(func);
	},
	load: function() {
		$('#state').text('0 / '+this.images.length);
		for(var i = 0; i < this.images.length; i++) {
			this.loadedImages[i] = new Image();
			var fn = function() {
				Preloader.checkFinished.apply(Preloader)
			};
			this.loadedImages[i].onload = fn;
			this.loadedImages[i].onerror = fn;
			this.loadedImages[i].onabort = fn;
			this.loadedImages[i].src = this.images[i];
		}
	},
	checkFinished: function() {
		this.imagesLoaded++;
		$('#state').text(this.imagesLoaded+' / '+this.images.length);
		if(this.imagesLoaded == this.images.length)
			this.fireFinish();
	},
	fireFinish: function() {
		for(var i = 0; i < this.callbacks.length; i++) {
			this.callbacks[i]();
		}
		this.clean();
	}
};