var Thumbsort = function(ele, onUpdate, props) {
	this.props = props || {tag:'div',constraint:false,dropOnEmpty:true,overlap:'horizontal',handle:'img',xbtn:true,enabled:true};
	if (onUpdate)
		this.props.onUpdate = onUpdate;

	this.wrap = $(ele);
	this.ele=ele;
	this.children = this.wrap.childNodes;
}

Thumbsort.prototype = {
	counter:0,
	prepend: function(thumb) {
		this.wrap.insertBefore(thumb,this.wrap.firstChild);

	},
	append: function(thumb) {
		this.wrap.appendChild($(thumb));
		if (this.makeSortable) {
			this.makeSortable();
		}
		//Sortable.create(this.wrap, this.props);
	},
	remove: function(thumb) {
		this.wrap.removeChild($(thumb));
	},
	onChange: function(ele) {

	},
	makeSortable: function() {
		Sortable.create(this.ele, this.props);
	},
	add: function(id,fileid,caption, extraClass) {
		var thumb = document.createElement('div');
		var img = document.createElement('img');
		var txt = document.createElement('input');
		txt.setAttribute('type','text');

		var url = this.imagePath + id;
		img.setAttribute('src',url);
		img.className='thumb';
		thumb.className="thumbframe " + extraClass;
		thumb.style.display='none';
		this.counter++;
		thumb.id='thumb_'+this.counter;
		fileid = fileid||id;
		thumb.setAttribute("fileid",fileid);
		thumb.fileid=fileid;
		thumb.caption=caption||"";
		thumb.img = img;
		thumb.title=caption||"";
		if (this.makeSortable)
			img.style.cursor='move';
		txt.value=thumb.caption;
		txt.className='caption';
		thumb.appendChild(txt);

		if (this.props.xbtn) {
			var x = document.createElement('div');
			x.className='xbtn';
			x.onmousedown=function(){thumbs.remove(this.parentNode);thumbs.onChange(thumb);};
			thumb.appendChild(x);
		}

		thumb.appendChild(img);
		var thumbs = this;
		if (this.props.enabled) {
			txt.onchange=function() {
				thumb.caption=this.value;
				thumbs.onChange(thumb);
			};
		} else {
			txt.disabled=true;
		}


		if (this.append)
			this.append(thumb);
		else if (this.prepend)
			this.prepend(thumb);

		if (Effect)
		{
			var doit = function() {Effect.Appear(thumb,{duration:1.5}); }
			setTimeout(doit, 30*this.counter );
		}
		else
			thumb.style.display='';

		return thumb;
	}
}