var page4 = Class.create(abstractOrderPage, {
		
		initialize: function($super, container, controller){
			$super(container, controller);
			this.instID = 'page4.' + parseInt(Math.random()*1000000);
		},
		
		showPage : function(){
			this.pageContainer.show();
		},
		
		start:function(){
			if (this.formContainer) this.formContainer.remove();
			if (this.imageContainer) this.imageContainer.remove();
			
			this.errorDiv = new Element('div', {className:'error'});
			$('uploader').insert(this.errorDiv);

			
			this.formContainer = new Element('div', {className:'flashUploadContainer'});
			$('uploader').insert(this.formContainer);
			
			this.imageContainer = new Element('div', {className:'uploadedImages'});
			$('uploader').insert(this.imageContainer);
			
			var button = new Element('button', {id:this.instID+"startUploadButton"}).update("Upload");
			this.fsUploadProgress = new Element('div', {id:this.instID+'fsUploadProgress', className:'swfUploadStatus'});
			this.fsQueue = new Element('div', {id:this.instID+'fsUploadQueue', className:'swfUploadQueue'});
			var cancelButton = new Element('button', {id:this.instID+"cancelUploadButton"}).update("cancel");
			
			this.formContainer.insert(button);
			this.formContainer.insert(this.fsUploadProgress);
			this.formContainer.insert(this.fsQueue);
			this.fsQueue.hide();
			
			// start/init swf-upload
			
			this.customSettings = {
					progress_target : this.instID+'fsUploadProgress',
					progressTarget :  this.instID+'fsUploadProgress',
					cancelButtonId : this.instID+"cancelUploadButton",
					upload_successful : false
				}; 
			this.swfu = new SWFUpload({
				// Backend settings
				upload_url : "/acceptBin.php",
				file_post_name: "image",
				post_params : { 
					"orderID" : this.controller.orderID
				}, 
				// Flash file settings
				file_size_limit : "200 MB",
				file_types : "*.jpg;*.jpeg;*.JPG;*.JPEG;*.avi;*.mpg;*.mp4;*.3gp;*.wmv;*.asf",			// or you could use something like: "*.doc;*.wpd;*.pdf",

				file_types_description : "Afbeeldingen en filmpjes",
				file_upload_limit : "25",
				file_queue_limit : "25",

				// Event Handler Settings (all my handlers are in the Handler.js file)
				file_dialog_start_handler : this.fileDialogStart.bind(this),
				file_queued_handler : this.fileQueued.bind(this),
				file_queue_error_handler : this.fileQueueError.bind(this),
				file_dialog_complete_handler : this.fileDialogComplete.bind(this),
				upload_start_handler : this.uploadStart.bind(this),
				upload_progress_handler : this.uploadProgress.bind(this),
				upload_error_handler : this.uploadError.bind(this),
				upload_success_handler : this.uploadSuccess.bind(this),
				upload_complete_handler : this.uploadComplete.bind(this),

				// Button Settings
				button_image_url : "/images/upload_wide.png",
				button_placeholder_id : this.instID+"startUploadButton",
				button_width: 250,
				button_height: 22,
				
				// Flash Settings
				flash_url : "/js/3rdparty/swfupload/swfupload.swf", 

				custom_settings : this.customSettings,
				
				// Debug settings
				debug: false
//				debug_handler : this.debugHandle.bind(this)
			});	
			this.loadImages();
		},
		
		debugHandle : function(msg){
			if (window.console) console.log(msg, this.swfu)
		},
		
		fileDialogStart : function(){
		},

		
		fileQueued : function(file) {
			try {
				this.fsQueue.show();
//				/this.fsUploadProgress.update('Bestand wordt gecontroleerd...')
				this.addFileToQueue(file);
			} catch (ex) {
				if (window.console) console.log(ex);
			}

		},
		
		addFileToQueue : function(file){
			var filename = '<span class="swfUploadFileName">' + file.name + " (" + file.size +" bytes)</span>";
			var l = new Element('div', {className:"swfUploadFile", id:this.instID+"_" + file.index}).update(filename);
			
			var progressContainer = new Element('div', {className:"swfUploadProgressContainer"});
			//id:this.instID+"_" + file.index + "_progress"}
			var progressBar = new Element('div', {className:"swfUploadProgressBar", id:this.instID+"_" + file.index + "_progress"}).update("");
			progressContainer.insert(progressBar)
			l.insert(progressContainer);
			
			this.fsQueue.insert(l)
		},
		
		fileQueueError : function (file, errorCode, message) {
			this.debug('fileQueueError');
			try {
				if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
					this.fsUploadProgress.update("Er zijn teveel bestanden tegelijk gekozen");
					return;
				}

				switch (errorCode) {
				case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
					this.fsUploadProgress.update("Het bestand is te groot (max. 2 mb).");
					this.debug("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
					break;
				case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
					this.fsUploadProgress.update("Het bestand is leeg.");
//					progress.setStatus("Cannot upload Zero Byte files.");
					this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
					break;
				case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
					this.fsUploadProgress.update("Dat is geen geldig bestand.");
					this.debug("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
					break;
				case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
					this.fsUploadProgress.update(("Je hebt teveel bestanden tegelijk gekozen, je mag  " +  message + " bestanden tegelijk kiezen."));
					break;
				default:
					if (file !== null) {
						this.fsUploadProgress.update("Onbekende error");
					}
					if (window.console) console.log("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
					break;
				}
			} catch (ex) {
				if (window.console) console.log(ex);
		    }
		},
		
		fileDialogComplete : function(numFilesSelected, numFilesQueued) {
			try {
				this.swfu.startUpload();
			} catch (ex)  {
				if (window.console) console.log(ex);
			}
		},
		
		uploadStart : function(file) {
			try {
				/* I don't want to do any file validation or anything,  I'll just update the UI and return true to indicate that the upload should start */
//				this.fsUploadProgress.update("Bezig met uploaden");
//				$(this.instID+"startUploadButton").hide();
			}
			catch (ex) {
				if (window.console) console.log(ex);
			}
			
			return true;
		},
		
		uploadProgress : function(file, bytesLoaded, bytesTotal) {
			try {
				var percent = Math.ceil((bytesLoaded / bytesTotal) * 250);
				var progress = $(this.instID+"_" + file.index + "_progress")
				progress.setStyle('width:' + percent + "px;");
			} catch (ex) {
				if (window.console) console.log(ex);
			}
		},
		
		uploadError : function(file, errorCode, message) {
			try {
				switch (errorCode) {
				case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
					this.fsUploadProgress.update("Upload fout: " + message);
					this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);
					break;
				case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
					//progress.setStatus("Configuration Error");
					this.fsUploadProgress.update("Configuratie fout ");
					this.debug("Error Code: No backend file, File name: " + file.name + ", Message: " + message);
					break;
				case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
					this.fsUploadProgress.update("Uploaden mislukt");
					this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
					break;
				case SWFUpload.UPLOAD_ERROR.IO_ERROR:
					this.fsUploadProgress.update("Er is een server error opgetreden");
					this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);
					break;
				case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
					this.fsUploadProgress.update("Er is een beveiligings error opgetreden");
					this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);
					break;
				case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
					this.fsUploadProgress.update("Bestand is te groot");
					this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
					break;
				case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
					this.fsUploadProgress.update("Upload-accept-bestand niet gevonden");
					this.debug("Error Code: The file was not found, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
					break;
				case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
					this.fsUploadProgress.update("Validatie mislukt");
					this.debug("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
					break;
				case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
					if (this.swfu.getStats().files_queued === 0) {
//						document.getElementById(this.customSettings.cancelButtonId).disabled = true;
					}
					this.fsUploadProgress.update("Upload afgebroken");
					break;
				case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
					this.fsUploadProgress.update("Upload gestopt");
					break;
				default:
					this.fsUploadProgress.update("Onbekende error: " + error_code);
					this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
					break;
				}
			} catch (ex) {
		        this.debug(ex);
		    }
		},
		
		debug : function(msg){
			if (window.console) console.log(msg);
		},
		
		uploadSuccess : function(file, serverData) {
			try {
			} catch (ex) {
				this.debug(ex);
			}
		},

		uploadComplete : function(file) {
			try {
				if (this.swfu.getStats().files_queued === 0) {
					this.fsQueue.update("");
					this.fsQueue.hide();
					this.fsUploadProgress.update("");
					this.loadImages();
				} else {
					var progress = $(this.instID+"_" + file.index + "_progress");
					$(progress.parentNode).setStyle('border:none;');
					$(progress.parentNode).update(' <span class="swfUploadFinished">gereed</span> ');
					this.swfu.startUpload();
				}
			} catch (ex) {
				this.debug(ex);
			}

		},
		
		loadImages : function(){
			var wpsRPC = new wps.rpc;
			wpsRPC.debug=true;
			wpsRPC.createCall('order', this.drawImages.bind(this));
			wpsRPC.call('getOrderJSON', 'orderID='+this.controller.orderID);			
		},
		
		drawImages : function(req){
			this.imageContainer.update('');
			var images = req.responseJSON.media;
			var i = 0;
			$A(images).each(
				(function(img){
					var div = new Element('div', {className:'uploadedImg'});
					var del = new Element('img', {src:'/images/del_icon.png',id:img.id, text:"Verwijder afbeelding", className:'delImage'});
					div.insert(del);
					if ( (img.file.toLowerCase().indexOf('jpg') > -1) || (img.file.toLowerCase().indexOf('jpeg') > -1) ){
						var elem = new Element('img', {src:'/include/lib/makeThumb.php?width=100&id='+img.id+"&orderID=" + this.controller.orderID,id:img.id});
					}else{
						var elem = new Element('img', {src:'/images/video.png' ,id:img.id});
					}
					div.insert(elem);
					
					del.metaData = img;
					div.metaData = img;
					elem.metaData = img;
					this.imageContainer.insert(div);
					del.observe('click', this.removeImage.bind(this));
					i++;
					if (i == 7){
						this.imageContainer.insert('<br style="clear:both"/>');
						i = 0;
					}
				}).bind(this)
			)
				
		},
		
		removeImage : function(e){
			var elem = e.element();
			var img = elem.metaData;
			
			var wpsRPC = new wps.rpc;
			wpsRPC.debug=true;
			wpsRPC.createCall('order', this.drawImages.bind(this));
			wpsRPC.call('removeMedia', 'orderID='+this.controller.orderID, 'mediaID='+ img.id);
			
		},
		
		validate : function(){
			if ($$('.uploadedImg').length < minPhotos){
				this.errorDiv.update("Je hebt nog geen of te weinig afbeeldingen geupload (minimale aantal is "+minPhotos+")");
				return false;
			}
			if ($$('.uploadedImg').length > maxPhotos){
				this.errorDiv.update("Je hebt teveel afbeeldingen geupload, verwijder enkele afbeeldingen (maximale aantal is "+maxPhotos+")");
				return false;
			}
			return true;
		},

		save : function(callBack){
			// create new Order;
			
			var wpsRPC = new wps.rpc;
			wpsRPC.debug=true;
			wpsRPC.createCall('order', callBack);
			wpsRPC.call('updateOrder', 'orderID='+this.controller.orderID, 'ORDER_page_index='+ (this.controller.pageIdx));			
		}
		

	})