$(document).ready(function() {
	
	FundImageUpload.init();
	
});

FundImageUpload = {
	init: function () {
		var self = this;
		
		this.phase = FundImageUpload.Phases.START;

		this.form = $('#fundform-step2');
		this.form.submit(function (e) {
			self.getCropValues();
		});

		this.firstName = $('#firstname');
		this.uploadHeading = $('#upload-heading');
		this.infoText = $('#picture-upload p');

		// Change text of heading when user changes the name
		this.firstName.change(function () {
			self.uploadHeading.text('Ladda upp en bild på ' + self.firstName.val());
		});

		// Set up Flash based file upload
		this.fileUpload = $("#picturefile input");
		this.fileUpload.uploadify({
			'uploader'		 : '/js/uploadify.swf',
			'script'		 : FundImageUpload.uploadifyScriptPath || '',
			'cancelImg'		 : '/i/star.png',
			'hideButton'	 : true,
			'wmode'			 : 'transparent',
			'width'			 : 500,
			'auto'			 : true,
			'multi'			 : false,
			'fileDesc'		 : 'Bildfiler (jpg, jpeg, gif, png, bmp)',
			'fileExt'		 : '*.jpg;*.jpeg;*.gif;*.png;*.bmp',
			'sizeLimit'		 : 10485760,
			// Event handlers
			onSelect: function (event, queueID, fileObj) {
				self.resetForNewImage();
				this.phase = FundImageUpload.Phases.UPLOAD;
			},
			onProgress: function (event, queueID, fileObj, data) {
				self.updateProgressBar(data.percentage);
			},
			onComplete: function (event, queueID, fileObj, response, data) {
				var image = JSON.parse(response);
				if (typeof image == 'object' && image.path) {
					self.setupImageCrop(image);
				} else {
					self.onError();
				}
			},
			onError: function (event, queueID, fileObj, errObj) {
				self.onError();
			}
		});
		this.fileUpload.css('display', 'block');
	},
	onError: function () {
		this.removeProgressBar();
		this.setInfoText('Det gick tyvärr inte att ladda upp din bild. Försök igen eller prova med en annan bild.', true); //TODO: mer hjälpfullt meddelande?
	},
	setInfoText: function (text, isError) {
		var errClass = 'warning';
		this.infoText.text(text);
		isError ? this.infoText.addClass(errClass) : this.infoText.removeClass(errClass);
	},
	resetForNewImage: function () {
		// Reset stuff based on phase
		switch (this.phase) {
			case FundImageUpload.Phases.CROP:
				this.crop.destroy();
				this.previewImage.remove();
			case FundImageUpload.Phases.UPLOAD:
				this.removeProgressBar();
			case FundImageUpload.Phases.START:
				this.setInfoText('Bilden kommer att placeras i en ram som bestäms utifrån det tema du väljer längre ned. När du valt en bild kan du beskära den så den bättre passar i ramen.');
				this.createProgressBar();
			break;
			default:
		}
	},
	createProgressBar: function () {
		this.progressBar = {};
		this.progressBar.wrapper = $('<div class="progressbar"></div>');
		this.progressBar.bar = $('<div class="bar"></div>');
		this.progressBar.overlay = $('<div class="overlay"></div>');
		this.progressBar.wrapper.append(this.progressBar.bar).append(this.progressBar.overlay);
		this.fileUpload.parent().after(this.progressBar.wrapper);
		this.updateProgressBar(0);
	},
	updateProgressBar: function (value) {
		this.progressBar.bar.css('left', -460 + 460 * (value/100));
	},
	removeProgressBar: function () {
		if (this.progressBar) {
			this.progressBar.wrapper.remove();
		}
	},
	setupImageCrop: function (image) {
		if (image.width > 210 && image.height > 140) {
			this.setInfoText('Välj ut ett område genom att flytta den lilla rektangeln. Dra i rektangelns hörn för att ändra storleken.');
			this.previewImage = $('<img src="' + image.path + '" alt="" width="' + image.width +'" height="' + image.height + '"/>');
			this.infoText.after(this.previewImage);
			this.crop = $.Jcrop(this.previewImage, {
				aspectRatio: 210 / 140,
				minSize    : [210, 140],
				setSelect  : [0, 0, 210, 140]
			});
			this.phase = FundImageUpload.Phases.CROP;
		} else {
			// Image is smaller than the cropped image will be
			this.removeProgressBar();
			this.setInfoText('Bilden du valt är tyvärr för liten. Minsta mått är 210 × 140 pixlar. Prova med en större bild.', true);
		}
	},
	getCropValues: function () {
		var selection;
		if (this.crop) {
			selection = this.crop.tellSelect();
			this.form.append(
				'<input type="hidden" name="x" value="' + selection.x + '"/>' +
				'<input type="hidden" name="y" value="' + selection.y + '"/>' +
				'<input type="hidden" name="x2" value="' + selection.x2 + '"/>' +
				'<input type="hidden" name="y2" value="' + selection.y2 + '"/>' +
				'<input type="hidden" name="w" value="' + selection.w + '"/>' +
				'<input type="hidden" name="h" value="' + selection.h + '"/>' + 
				'<input type="hidden" name="filedata" value="' + this.previewImage.attr('src') + '"/>');
		}
	}
};

FundImageUpload.Phases = {
	START: 0,
	UPLOAD: 1,
	CROP: 2
};

FundImageUpload.uploadifyScriptPath = '/Pages/MinnesfondUploadImage.ashx';