var neteditAjaxImgUpload = new Class({
	Implements: Options,
	
	options: {
		
    },
    
    initialize: function(options){
 
    	this.setOptions(options);
    	this.progressContainer = $('ajaxupload-progress');
    	if(this.progressContainer){
			var pb = new dwProgressBar({
				container: this.progressContainer,
				startPercentage: 0,
				speed:1000,
				boxID: 'dwProgressBox',
				percentageID: 'dwProgressPerc',
				displayID: 'dwProgressText',
				displayText: true
			});
			  
			this.pb = pb;
    	}
    	this.addEvents();
    	this.hideAllMenu();
    },
    
    addEvents: function(){
    	$(document.body).addEvent('click', function(e){
			this.hideAllLink(e);
		}.bind(this));
    
    	var containers = $$('.ajaximgupload-container');
		$each(containers, function(container, index){
			
			container.addEvent('mouseenter', function(e){
				this.showLink(e);
				return false;
			}.bind(this));
			
			container.addEvent('mouseleave', function(e){
				this.hideLink(e);
				return false;
			}.bind(this));
			
			var linksEdit = container.getElements('.ajaximgupload-edit');
			$each(linksEdit, function(link, index){
				link.addEvent('click', function(e){
					this.toggleMenu(e);
					return false;
				}.bind(this));
			}.bind(this));
			
			var linksUrl = container.getElements('.ajaximgupload-link');
			$each(linksUrl, function(link, index){
				link.addEvent('click', function(e){
					this.toggleInput(e);
					return false;
				}.bind(this));
			}.bind(this));
			
			var inputs = container.getElements('.ajaximgupload-input input');
			$each(inputs, function(input, index){
				this.updateImgByInput(input);
			
				input.addEvent('blur', function(e){
					this.changeInput(e);
					return false;
				}.bind(this));
				input.addEvent('change', function(e){
					this.changeInput(e);
					return false;
				}.bind(this));
			}.bind(this));
			
			var linksUpload = container.getElements('.ajaximgupload-upload');
			$each(linksUpload, function(linkUpload, index){
				this.addEventSwiffUploader(linkUpload);
			}.bind(this));
			
		}.bind(this));
    },
    
    showLoading: function(container){
    	var loadings = container.getElements('.ajaximgupload-loading');
    	$each(loadings, function(loading, index){
			loading.setStyle('display', 'block');
		});
    },
    
    hideLoading: function(container){
    	var loadings = container.getElements('.ajaximgupload-loading');
    	$each(loadings, function(loading, index){
			loading.setStyle('display', 'none');
		});
    },
    
    showLink: function(e){
    	var event = new Event(e);
		var img = $(event.target);
		var links = img.getElements('.ajaximgupload-edit');
		$each(links, function(link, index){
			link.setStyle('display', 'block');
		});
    },
    
    hideLink: function(e){
    	if(e != undefined){
	    	var event = new Event(e);
			var img = $(event.target);
			var links = img.getElements('.ajaximgupload-edit');
			$each(links, function(link, index){
				link.setStyle('display', 'none');
			});
			this.hideMenu(e);
    	}
    },
    
    hideAllLink: function(e){
    	var target = null;
    	if(e != undefined){
    		var event = new Event(e);
    		var target = $(event.target);
    		target = target.getParent();
    	}
    	if(target==null || target.get('class')!='ajaximgupload-input'){
	   		var links = $$('.ajaximgupload-edit');
	    	$each(links, function(link, index){
	    		link.setStyle('display', 'none');
	    	});
	    	
	    	this.hideAllMenu();
    	}
    },
    
    hideAllMenu: function(e){
    
   		var links = $$('.ajaximgupload-dropmenu');
    	$each(links, function(link, index){
    		link.setStyle('display', 'none');
    	});
    },
    
    toggleMenu: function(e){
    	var event = new Event(e);
		var link = $(event.target);
		var divs = link.getParent().getElements('.ajaximgupload-dropmenu');
		$each(divs, function(div, index){
			div.setStyle('left', link.getParent().getCoordinates().width+'px');
			if(div.getStyle('display')=='none'){
				div.setStyle('display', 'block');
    		}else{
    			div.setStyle('display', 'none');
    		}
		}.bind(this));
    },
    
    showMenu: function(e){
    	var event = new Event(e);
		var link = $(event.target);
		var divs = link.getParent().getElements('.ajaximgupload-dropmenu');
		$each(divs, function(div, index){
			div.setStyle('left', link.getParent().getCoordinates().width+'px');
			div.setStyle('display', 'block');
		}.bind(this));
		
    },
    
    hideMenu: function(e){
    	var event = new Event(e);
		var img = $(event.target);
		var divs = img.getElements('.ajaximgupload-dropmenu');
		$each(divs, function(div, index){
			div.setStyle('display', 'none');
		}.bind(this));
		
    },
    
    toggleInput: function(e){
    	var event = new Event(e);
    	var link = $(event.target);
    	var dropMenu = link.getParent().getParent();
    	var divs = dropMenu.getElements('.ajaximgupload-input');
    	$each(divs, function(div, index){
    		if(div.getStyle('display')=='none'){
				div.setStyle('display', 'block');
    		}else{
    			div.setStyle('display', 'none');
    		}
		}.bind(this));
    },
    
    updateImgByInput: function(input){
    	var d = new Date();
    	var value = input.get('value');
    	var parent = this;
		var container = input.getParent().getParent().getParent();
		this.showLoading(container);
		var myImage = Asset.image(value+'?'+d.getTime(), {
		    id: 'myImage',
		    title: 'myImage',
		    onLoad: function(){
		    	container.setStyle('background-image', 'url('+value+'?'+d.getTime()+')');
				container.highlight();
				parent.hideLoading(container);
		    },
		    onError: function(){
		    	container.setStyle('background-image', '');
				container.highlight();
		    	parent.hideLoading(container);
		    }
		});		
    },
    
    changeInput: function(e){
    	var event = new Event(e);
    	var input = $(event.target);
    	this.updateImgByInput(input);
    },
    
    addEventSwiffUploader: function(linkUpload){
    	var log = new Roar({
			container: $('log'),
			position: 'topRight',
			duration: 5000
		});
    
    	var url = linkUpload.get('href').replace(/\&/g,'&');
    	var linkUploadDef = linkUpload.get('html');
    	var parent = this;
    	var mySwiff = new Swiff.Uploader({
			path: 'js/libs/mootools-1.3/fancyupload/Swiff.Uploader.swf',
			url: url,
			verbose: true,
			queued: false,
			multiple: false,
			target: linkUpload,
			instantStart: true,
			fieldName: 'file_up',
			typeFilter: {
				'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
			},
			fileSizeMax: 2 * 1024 * 1024,
			onSelectSuccess: function(files) {
				if (Browser.Platform.linux) window.alert('Warning: Due to a misbehaviour of Adobe Flash Player on Linux,\nthe browser will probably freeze during the upload process.\nSince you are prepared now, the upload will start right away ...');
				log.alert('Caricamento iniziato', 'Uploading <em>' + files[0].name + '</em> (' + Swiff.Uploader.formatUnit(files[0].size, 'b') + ')');
				this.setEnabled(false);
				parent.progressContainer.setStyle('display','block');
				parent.pb.set( 0 );
			},
			onSelectFail: function(files) {
				log.alert('<em>' + files[0].name + '</em> non aggiunto!', 'Seleziona un file pi� piccolo di 2 Mb. (Error: #' + files[0].validationError + ')');
			},
			appendCookieData: true,
			onQueue: function(){
				if (!this.uploading) return;
				var size = Swiff.Uploader.formatUnit(this.size, 'b');
				this.target.set('html', this.percentLoaded + '% di ' + size);
				parent.pb.set( this.percentLoaded );				
			},
			onFileComplete: function(file) {
				try{
			
		 			var errorText = JSON.decode(file.response.text, true).error; // error
					if (file.response.error || errorText!='') {
						log.alert('Caricamento fallito', 'Uploading <em>' + this.fileList[0].name + '</em> fallito. (' + errorText + ')');
					} else {
						var md5 = JSON.decode(file.response.text, true).hash; // secure decode
						var path = JSON.decode(file.response.text, true).path;
						var name = JSON.decode(file.response.text, true).name;
		 
						log.alert('Immagine caricata con successo', 'file: <code>'+name+'</code>');
		 
						var inputs = this.target.getParent().getParent().getElements('.ajaximgupload-input input');
						$each(inputs, function(input, index){
							
							input.set('value', path+name);
							parent.updateImgByInput(input);
							parent.hideAllLink();
						});
					}
		 
					file.remove();
					this.setEnabled(true);
				}catch(e){
					alert(e);
				}
			},
			onComplete: function() {
				parent.progressContainer.setStyle('display','none');
				this.target.set('html', linkUploadDef);
			}
		}); 
    }
    
});

/*
-----------------------------
------------ CSS ------------
-----------------------------
<style>
.ajaximgupload-container{
	position: relative;
	width:150px;
	height:100px;
	background-color: #999;
	background-position: center center;
	background-repeat: no-repeat;
	float: left;
}
.ajaximgupload-dropmenu {
    display: none;
    background: none repeat scroll 0 0 #FFFFFF;
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    color:#3B5998;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    padding: 5px 5px 0 6px;
    font-size: 11px;
    border:1px #3B5998 solid;
    margin:0px;
    z-index:100;
    overflow: visible;
}
.ajaximgupload-edit {
	display: none;
    background: url(imgs/16x16/edit.png) no-repeat center right #FFFFFF;
    height: 20px;
    padding: 5px 27px 0 6px;
    position: absolute;
    right: 0;
    top: 0;
    color:#3B5998;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 11px;
}
.ajaximgupload-upload{
	position: relative;
	background: url(imgs/16x16/upload.gif) no-repeat center left #FFFFFF;
	padding: 0px 0px 0px 25px;
	height: 20px;
	right: 0;
	top: 0;
}
.ajaximgupload-link{
	position: relative;
	background: url(imgs/16x16/rename.jpg) no-repeat center left #FFFFFF;
	padding: 0px 0px 0px 25px;
	height: 20px;
	right: 0;
	top: 0;
}
.ajaximgupload-input{
	display: none;
}
.ajaximgupload-loading{
	display: none;
}
</style>
*/

/*
-----------------------------
---------- ESEMPIO ----------
-----------------------------

<script>
window.addEvent("domready", function(){
	var myNeteditAjaxImgUpload = new neteditAjaxImgUpload();
});
</script>


<span class="ajaximgupload-container">
	<div class="ajaximgupload-loading"></div>
	<a href="#" class="ajaximgupload-edit">Modifica immagine</a>
	<div class="ajaximgupload-dropmenu">
		<div><a href="<?=dispatcher::urlAJAX(array('controller'=>'quiz','action'=>'upload'))?>" class="ajaximgupload-upload">Carica un immagine</a></div>
		<div><a href="#" class="ajaximgupload-link">Link da web</a></div>
		<div class="ajaximgupload-input"><input type="text" id="quiz[img]" name="quiz[img]" value="<?=$this->data['quiz']['img']?>"></div>
	</div>
</span>
*/