var HorizontalSortables = new Class({
	Implements : [Events,Options],
	options: {
		handle: '',
		onStart: $empty,
		onComplete: $empty,
		ghost: true,
		snap: 200
	},
 
	initialize: function(list, options){
		this.setOptions(options);
		this.list = $(list);
		this.handles = [];
		this.idle = true;
		this.bound = {
			start: [],
			move : this.move.bindWithEvent(this),
			end : this.end.bindWithEvent(this)
		};

		if (Browser.Engine.trident){
			this.list.getChildren().each(function(e){e.setStyle('position','relative')});
		}
		
		this.reinitialize();
	},
	
	reinitialize : function(){
		this.detach();
		this.elements = this.list.getChildren();
		this.elements.each(function(element,i){
			if (this.options.handle != '')
				this.handles[i] = element.getElement(this.options.handle) || element;
			else
				this.handles[i] = element;
		},this);
		this.attach();
	},
 
	attach: function(){
		this.handles.each(function(handle, i){
			this.bound.start[i] = this.start.bindWithEvent(this,this.elements[i]);
			handle.addEvent('mousedown', this.bound.start[i]);
		}, this);
	},
	 
	detach: function(){
		this.handles.each(function(handle, i){
			handle.removeEvent('mousedown', this.bound.start[i]);
		}, this);
	},
 
	start: function(event, element){
		if (event.rightClick || !this.idle) return false;
		event.stop();
		this.idle = false;

		this.active = $(element);
		if (Browser.Engine.trident) this.active.setStyle('position','relative');
		if(Browser.Engine.trident){
			$('main_container').setStyle('position','static');
			$('subcontainer').setStyle('position','static');
			$$('.navigation_topnav')[0].setStyle('position','static');
		}

		if (this.options.ghost){
			this.coordinates = this.list.getCoordinates(Browser.Engine.trident ? document.body : null);
			var position = this.active.getPosition(Browser.Engine.trident ? document.body :this.list);
			this.offset = {
				y : (event.page.x < position.x) ? 0 : event.page.y - position.y,
				x : (event.page.x < position.x) ? 0 : event.page.x - position.x
			}
		
			this.ghost = element.clone().setStyles({
				'position': 'absolute',
				'left': (event.page.x - this.offset.x),
				'top': (event.page.y - this.offset.y),
				'opacity':.8
			});
			this.list.adopt(this.ghost);
		}
		
		document.addEvent('mousemove', this.bound.move);
		document.addEvent('mouseup', this.bound.end);
		this.fireEvent('onStart', [element,event]);
	},
	
	check:function(pos){
		var coords,element;
		var children = this.list.getChildren();

// obj:Home 88 202 57 16 218 189 368
// obj:Media 145 202 65 16 218 189 368
// obj:Photos 210 202 70 16 218 189 368
// obj:Assignments 279 202 104 16 218 189 368
// obj:Coming Soon102 208 90 20 228 189 368
// obj:Coming Soon 383 202 111 16 218 189 368

		for (var i=0;i<children.length;i++){
			coords = children[i].getCoordinates(Browser.Engine.trident ? document.body : null);
			// new Log().log('<br />\nobj:'+children[i].innerText);
			// new Log().log(coords.left+" "+coords.top+" "+coords.width+" "+coords.height+" "+coords.bottom);
			// new Log().log('\n'+pos.x+" "+pos.y);
			coords.xmiddle=coords.left+(coords.width/2);
			coords.ymiddle=coords.top+(coords.height/2);
			
			// new Log().hud(coords.top+" < "+pos.y+" && "+coords.bottom+" > "+pos.y+" && "+coords.left+" < "+pos.x+" && "+coords.xmiddle+" > "+pos.x);
			if (coords.top < pos.y && coords.bottom > pos.y)
				if (coords.left < pos.x && coords.xmiddle > pos.x)
					return {element:children[i],'position':'before'};
				else if (coords.xmiddle < pos.x && coords.right > pos.x)
					return {element:children[i],'position':'after'};
		}
		if (coords.bottom<pos.y)
			return {element:children.getLast(),'position':'after'};
		return false;
	},
 
	move: function(event){
		event.stop();
		if (this.options.ghost) this.ghost.setStyles({
			'top':event.page.y-this.offset.y,
			'left':event.page.x-this.offset.x
		});
		
		var move = this.check(event.page);
		
		if (move){
			this.active.inject(move.element,move.position);
			this.fireEvent('onChange',[this.active,move.element]);
		}
		this.fireEvent('onMousemove',[this.active,event]);
	},
 
	serialize: function(converter){
		return this.list.getChildren().map(converter || function(el){
			return el.getProperty('id');
		}, this);
	},
 
	end: function(event){
		document.removeEvent('mousemove', this.bound.move);
		document.removeEvent('mouseup', this.bound.end);
		if (this.options.ghost){
			this.ghost.destroy();
		}
		
		this.fireEvent('onComplete', [this.active,event]);
		this.idle = true;
	}
 
});