var OverlayPhoto = new Class({
	Implements: [Options, Events, Log],
	Extends: Overlay,
	
	options: {
		maxFileSize: 10,
		maxFilesUpload: 8
	},
	
	// Constants
	AUTO_HIDE_DELAY: 5000,

	// Variables
	eventId: null,
	form: null,
//	explanationMessage: null,
	photos: [],
	uploads: null,
	closeDelay: null,
	uploadSuccess: false,
	buttons: null,
	
	// Class instances
	uploader: null,
	
	initialize: function(eventId, options)
	{
		this.enableLog();
		this.log("OverlayPhoto::initialize()");
		
		this.eventId = eventId;
		
		this.setOptions(options);
		
		this.parent('photo', options);
	},

	reset: function()
	{
		this.log("OverlayPhoto::reset()");

		// Invoke parent
		this.parent();

		// Reset variables
		clearTimeout(this.closeDelay);
		
		// Success message
		this.successMessage.fx.set(0);
		this.successMessage.hide();
		
		// Form
		this.form.enable();
		
		// Reset uploads
		if(this.uploadSuccess)
		{
			this.uploader.fileList = [];
			this.photos = [];
			this.showState(0);
			this.uploads.empty();
			
			this.uploadSuccess = false;
		}
	},

	submit: function()
	{
		this.log("OverlayPhoto::submit()");
	},
	
	initilizeWindow: function()
	{
		this.log("OverlayPhoto::initilizeWindow()");
		
		// Invoke parent
		this.parent();

		// Window
		this.window = this.element.getElement('.window');

		this.uploads = this.element.getElement('.right .uploads');
		
		this.log("this.uploads: "+ this.uploads);

		// Form
		this.initForm();
	},

	/*
	 * Init form
	 */
	initForm: function()
	{
		this.log("OverlayPhoto::initForm()");

		// Success message
		this.successMessage = this.element.getElement('.success');
		this.successMessage.fx = new Fx.Tween(this.successMessage, {
			duration: 500,
			transition: Fx.Transitions.Quad.easeOut,
			property: 'opacity',
			link: 'cancel'
		});
		this.successMessage.fx.addEvent('start', function() {
			if(this.successMessage.getStyle('opacity').toInt() == 0)
			{
				this.successMessage.show();
			}
		}.bind(this));
		this.successMessage.fx.addEvent('complete', function() {
			if(this.successMessage.getStyle('opacity').toInt() == 0)
			{
				this.successMessage.hide();
			}
			else
			{
				
			}
		}.bind(this));
		this.successMessage.fx.set(0);


		// Buttons
		var uploadButton = this.element.getElement('.left .submit');
		
		this.buttons = this.element.getElement('.right .buttons');
		var addButton = this.buttons.getElement('.submit');
		var cancelButton = this.buttons.getElement('.cancel');
		
		// Hide add buttons
		this.hideButtons();

		// Add form
		var requestUrl = this.application.getConfig().requestPath.afterglow.photo.add;

		var handlers = {
			onRequest: function()
			{
				this.log("onRequest");

			}.bind(this),
			onSuccess: function(response)
			{
				this.log("response.success: "+ response.success);

				if(response.success)
				{
					this.log("succes!");

					this.form.disable();
					
					this.log("FIRE EVENT addPhoto: " + response.result);
					this.log("response.result.length: " + response.result.length);
					
					this.fireEvent('addPhotos', [response.result]);

					// Close popup
					this.closeDelay = this.close.delay(this.AUTO_HIDE_DELAY, this);

					// Success message
					this.successMessage.fx.start(1);
					
					this.uploadSuccess = true;
				}
				else
				{
					this.log("error!");

					this.form.enable();
				}
			}.bind(this),
			onFailure: function(xhr)
			{
				this.log("onFailure");

				this.form.enable();
			}.bind(this)
		};

		var options = {
			showLoader: true,
			allowStatus: true,
			formErrorMessage: {
				allow: true,
				container: this.element.getElement('.form-message-container'),
				allowClose: false
			}
		};

		
		var form = new JsonForm(this.element, requestUrl, handlers, options);
//		var form = new Form(this.element, options);

//		var errorElement = new FormElement(form, 'error', {});
//		errorElement.addValidation(Form.REGEX_NAME, 'Naam error');
//		form.addElement(errorElement);

		// Add buttons
		var submitButton = new FormSubmitButton(form, addButton, {showLoader: true});
		form.addButton(submitButton);

		// Save form
		this.form = form;
		this.form.addValue('event_id', this.eventId);
		
		// Cancel button
		cancelButton.addEvent('click', function(event) {
			event.preventDefault();

			this.log("cancel clicked");

			this.close();
		}.bind(this));

		/**
		 * Uploader instance
		 */
		this.uploader = new FancyUpload3.Attach(this.uploads, uploadButton, {
//			path: '../../swf/Swiff.Uploader.swf',
			path: 'swf/Swiff.Uploader.swf',
			url: this.application.getConfig().requestPath.afterglow.photo.upload, //'../../json/upload_photo.php',
			fileSizeMax: this.options.maxFileSize * 1024 * 1024,
			typeFilter: {'Images (*.jpg, *.jpeg, *.png)': '*.jpg; *.jpeg; *.png'},
			data: {'event_id': this.eventId},
			fileListMax: this.options.maxFilesUpload,

			verbose: true,

			onSelectFail: function(files) 
			{
//				files.each(function(file) 
//				{
//					this.log("onSelectFail(" + file['name'] + ")");
//					
//					this.log("file.validationErrorMessage: " + file.validationErrorMessage);
//					this.log("file.validationError: " + file.validationError);
//				}, this);
				
			}.bind(this),

			onFileSuccess: function(file) 
			{
				this.log("onFileSucces(" + file['name'] + ")");
				
//				for(var i in file)
//				{
//					this.log("file[" + i + "]: " + file[i]);
//				}
				
				var response = JSON.decode(file.response.text);
				
//				for(var i in response)
//				{
//					this.log("response[" + i + "]: " + response[i]);
//				}
				
				this.log("response: " + response);
				this.log("response['id']: " + response['id']);
				this.log("response['name']: " + response['name']);
				this.log("response['thumb']: " + response['thumb']);
				

				// Save photo in array
//				var photo = file['name'];
				this.photos.include(response['id']);
				
				this.form.addValue('photo_ids', this.photos.toString());
				
				this.log("this.photos: " + this.photos);
				
				this.showButtons();
				
			}.bind(this),

			onFileError: function(file) 
			{
//				for (var i in file)
//				{
//					console.log("file[" + i + "]: "+ file[i]);
//				}

				this.log("onFileError(" + file['name'] + ")");
				
			}.bind(this),

			onFileRequeue: function(file) 
			{
//				for (var i in file)
//				{
//					console.log("file[" + i + "]: "+ file[i]);
//				}
				
				this.log("onFileRequeue(" + file['name'] + ")");
				
				this.uploader.start();
			}.bind(this)

		});
		
		this.uploader.addEvent('select', function(event) {
			
			this.log("select!!!!!!!!!!!");
			
			this.showState(this.uploader.fileList.length);
			
		}.bind(this));
		
		this.uploader.addEvent('onSelectSuccess', function(event) {
			
			this.log("onSelectSuccess!!!!!!!!!!!");
			
			this.showState(this.uploader.fileList.length);
			
		}.bind(this));
		
		this.uploader.addEvent('fileRemove', function(event) {
			
			this.log("fileRemove!!!!!!!!!!!");
			
			this.showState(this.uploader.fileList.length);
			
		}.bind(this));
	},
	
	showState: function(uploads)
	{
		this.log("OverlayPhoto::showState(" + uploads + ")");
		
		if(uploads > 0)
		{
			this.element.getElement('.empty').hide();
			this.element.getElement('.upload-container').show();
		}
		else
		{
			this.element.getElement('.empty').show();
			this.element.getElement('.upload-container').hide();
			
			this.hideButtons();
		}
	},
	
	showButtons: function()
	{
		this.log("OverlayPhoto::showButtons()");
		
		this.buttons.show();
	},
	
	hideButtons: function()
	{
		this.log("OverlayPhoto::hideButtons()");
		
		this.buttons.hide();
	}
	
});