$(document).ready( function() {
	
	var canvas = $('#canvas'),
		cropper,
		uploadForm = $('#upload-form'),
		uploadFrame = $('#upload-frame');
	
	
	// Show file picker when clicking on the canvas
	canvas.click( function(event) {
		if( $(event.target).is(canvas) ) uploadForm.find('INPUT[type=file]').trigger('click');
	});
	
	
	function waitForFile() {
		// Trigger upload when file is selected
		uploadForm.find('INPUT[name=image]').change( function() {
			if( uploadForm.hasClass('busy') ) return;
			uploadForm.addClass('busy').trigger('submit');
			$(this).parent().html($(this).parent().html());
			waitForFile();
		});
	}
	waitForFile();
	
	
	// Handle upload
	uploadFrame.load( function() {
		uploadForm.removeClass('busy');
		try {
			var r = $.parseJSON(window.frames['upload-frame'].document.body.innerHTML);
		} catch(e) {
			return;
		}
		
		if( r.status === 'success' ) {
			// Load image and cropper
			if( cropper ) cropper.destroy();
			
			
			
			canvas.html('').animate({
				width: r.image.width,
				height: r.image.height
			}, 500);
			$('<img />')
				.load( function() {
					cropper = $.Jcrop('#preview', {
						aspectRatio: 1,
						bgColor: 'black',
						minSize: [16, 16],
						setSelect: [0, 0, Math.min(r.image.width, r.image.height) / 2, Math.min(r.image.width, r.image.height) / 2]
					});
				})
				.attr('id', 'preview')
				.attr('src', r.image.url)
				.appendTo(canvas);
				$('#clear-image').show();
		} else {
			$.notification(r.errorMessage)
		}
		
	});
	
	
	// Handle download
	$('.png A, .ico A').click( function(event) {
		
		var a = $(this),
			li = a.parent();
		
		event.preventDefault();
		
		if( !cropper ) $.notification('Upload an image');
		if( !cropper || li.hasClass('busy') ) return;
		
		li.addClass('busy');
		
		$.post('/src/ajax/favikon.ajax.php', {
			cmd: 'crop',
			type: a.attr('data-type'),
			crop: cropper.tellSelect()
		}, function(r) {
			li.removeClass('busy');
			if( r.status === 'success' ) {
				location.href = r.url;
			} else {
				$.notification(r.errorMessage);
			}
		}, 'json');
		
	});
	
	
	// Handle clear
	$('#clear-image').click( function(event) {
		event.preventDefault();
		if( cropper ) cropper.destroy();
		cropper = null;
		$(this).hide();
		$.post('/src/ajax/favikon.ajax.php', { cmd: 'clear' });
		canvas.animate({
				width: '400px',
				height: '400px'
			}, 500)
			.find('IMG').effect('explode')
	});
	
	
	
	
	
	//
	// Wanderers
	//
	if( $.browser.msie ) $('#play, #play-bubble').remove();
	
	// Show play bubble after a few moments
	setTimeout( function() {
		$('#play-bubble').fadeIn();
	}, 10000);
	
	$('#play').click( function(event) {
		
		event.preventDefault();
		
		var a = $(this);
		
		$('#play-bubble').fadeOut( function() {
			$(this).remove();
		});
		
		if( wanderers.count() === 0 ) {
			// Game on
			if( a.hasClass('busy') ) return;
			a.addClass('busy');
			wanderers.start();
			$.post('/src/ajax/favikon.ajax.php', {
				cmd: 'get-favikons',
				count: 30
			}, function(r) {
				a.removeClass('busy');
				$.notification('Hover to destroy!');
				for( var i in r.favikons ) {
					wanderers.create(r.favikons[i]);
				}
			}, 'json');
		} else {
			// Game off
			wanderers.stop();
		}
	});
	
	var wanderers = {
		
		audioLoaded: false,
		startTime: null,
		
		getRandomX: function() {
			return Math.floor(Math.random() * ($(window).width() - 16));
		},
		
		getRandomY: function() {
			return Math.floor(Math.random() * ($(window).height() - 16));
		},
		
		getTime: function() {
			return Math.ceil(parseInt(new Date().getTime() - wanderers.startTime) / 1000);
		},
		
		count: function() {
			return $('.wanderer').length;
		},
		
		create: function(src) {
			var image = $('<img class="wanderer" />');
			image
				.attr('src', src)
				.width(32)
				.height(32)
				.css({
					display: 'none',
					position: 'absolute',
					top: wanderers.getRandomY(),
					left: wanderers.getRandomX()
				})
				.appendTo('BODY')
				.load( function() {
					$(this).fadeIn( function() {
						wanderers.move(image);
					})
				})
				.error( function() {
					$(this).remove();
				})
				.mouseover( function() {
					wanderers.playSound('destroy');
					$('BODY').stop(true, true).effect('highlight', { color: '#F66' }, 1000);
					$(this).hide('explode', function() {
						$(this).remove();
						setTimeout( function() {
							if( wanderers.count() === 0 ) {
								wanderers.playSound('win');
								$.notification('Thank you for saving Favikon in just ' + wanderers.getTime() + ' seconds!');
								wanderers.stop();
							}
						}, 250);
					}, 1000);
				});
		},
		
		move: function(img) {
			img.stop(true, true).animate({
				top: wanderers.getRandomY() - 16,
				left: wanderers.getRandomX() - 16
			}, Math.floor(Math.random() * 3000) + 2000, 'easeInOutBack', function() {
				wanderers.move($(this));
			});
		},
		
		playSound: function(soundEffect) {
			
			switch( soundEffect ) {
				case 'start':
					$('#sound-warning')[0].play();
					break;
				case 'destroy':
					if( Math.floor(Math.random() * 4) === 0 ) {
						$('#sound-uppercut')[0].play();
					} else {
						$('#sound-jab')[0].play();
					}
					break;
				case 'win':
					$('#sound-tada')[0].play();
					break;
			}
		},
		
		start: function() {
			if( !wanderers.audioLoaded ) {
				// Preload audio files
				$('BODY').append('<audio id="sound-warning" src="/src/audio/warning.wav" preload="auto" style="display: none;"></audio>');
				$('BODY').append('<audio id="sound-jab" src="/src/audio/jab.wav" preload="auto" style="display: none;"></audio>');
				$('BODY').append('<audio id="sound-uppercut" src="/src/audio/uppercut.wav" preload="auto" style="display: none;"></audio>');
				$('BODY').append('<audio id="sound-tada" src="/src/audio/tada.wav" preload="auto" style="display: none;"></audio>');
			}
			$('BODY').addClass('game-on')
			$('.wanderer').remove();
			wanderers.startTime = new Date().getTime();
			wanderers.playSound('start');
		},
		
		stop: function() {
			wanderers.startTime = null;
			$('.wanderer').fadeOut('fast', function() {
				$(this).remove();
				$('BODY').removeClass('game-on');
			});
		}
		
	};
	
	
});