var editImg = new Class({
	
	Implements: Options,
    options: {
		// container
		img			: '',
		upDir		: 'upload/user/',
		str			: '',
		handlewin	: 'confirm_delete_box',
		delid		: '',
		editId		: false
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.hideWindow();
		if (this.options.editId){
			this.initContainer();
		}
	},
	
	initContainer: function (){
		if (typeof $('userimg').value == 'undefined'){
			return;
		}
		$('userimg').value = this.options.img;
		this.options.delid = '';
		if (this.options.img == ''){
			this.options.imgAr = [];
			$('uploaded_img_list').innerHTML = this.options.str;
			$('uploadimg').setStyle('display','');
			return;
		}
		//gbUpload.hideSubmit('none');
		//alert (gbUpload.options.openhandle);
		$('uploadimg').setStyle('display','none');
		
		this.options.imgAr = this.options.img.split('|');
		this.options.imgAr.each(function (item, i){
			this.options.str += '<div class="img_list_el"><div class="img_delete_btn" id="ar'+i+'"><p title="delete image">X</p></div><div class="img_list_el_img" style="background: url('+this.options.upDir+'thumb_'+item+') no-repeat center center;"><div class="hidden_filename" style="display:none;">'+item+'</div></div></div>';
		}, this);
		$('uploaded_img_list').innerHTML = this.options.str;
		this.options.str = '';
		
		
		
		// ok, abbrechen
		$('confirm_delete_btn_no').addEvent('click', function(){
			edIt.hideWindow();
		});
		$('confirm_delete_btn_yes').addEvent('click', function(){
			edIt.delImg();
			edIt.hideWindow();
		});
		
		// sort
		/*
		this.sortableImgs = new Sortables('uploaded_img_list', { // handle: element selector !! //revert: { duration: 500, transition: 'elastic:out' }
			clone:true, 
			handle: '.img_list_el_img',
			onStart: function(el){
				this.clone.setStyles({
					opacity: 0.5
				}); // watch out for IE and png...
			},
			
			onSort: function(el){
				$(el).setStyle('border', '1px solid #cccccc');
			},
			
			onComplete: function(el){
				edIt.updateForm();
			}
			
		});
		*/
		//this.higlightFirst();
		
		// delete
		$$('.img_delete_btn').each(function (el, i){
			$(el).addEvent('click', function(){
				edIt.options.delid = this.id.slice(2);
				edIt.showWindow();
			});
		}, this);
	},
	
	higlightFirst: function(){
		totalimg = $$('.img_list_el');
		totalimg.each(function(el, i){
			$(el).setStyle('border', '1px solid #cccccc');
			if (i == 0){
				$(el).setStyle('border', '1px solid #DF061D');
			}
		},this);
	},
	
	updateForm: function (){
		totalimg = $$('.img_list_el');
		newAr = [];
		totalimg.each(function(el, i){
			newAr.push(el.getElements('div.hidden_filename')[0].get('text'));
		},this);
		this.options.img = newAr.join('|');
		this.initContainer();
	},
	
	showWindow: function (){
		$(this.options.handlewin).setStyle('display','');
	},
	
	hideWindow: function (){
		this.options.delid = '';
		$(this.options.handlewin).setStyle('display','none');
	},
	
	delImg: function (){
		if (this.options.delid == ''){
			return ;
		}
		newAr = [];
		for (i=0; i<this.options.imgAr.length; i++){
			if (i != this.options.delid){
				newAr.push(this.options.imgAr[i]);
			}
		}
		if ($('slogantxt') && $('slogantxt').get('html').length > 0){
			$('slogantxt').set('html', '');
		}
		this.options.img = newAr.join('|');
		this.initContainer();
	}
});
editImg.implement(new Options);