$(function() {
	// creates the selected variable
	// we are going to be storing the selected objects in here
	var selected = $([]), offset = {top:0, left:0};
	// console.log will outout
	// Object length=0 prevObject=Object jquery=1.2.6
/*	console.log("This is the value of selected when it is created " +selected + ""); */

	// initiate the selectable id to be recognized by UI
	$("#main").selectable();

	// declare draggable UI and what we are going to be doing on start
	$("#main a.folder").draggable({
		start: function(ev, ui) {
			$(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
			/*console.log("The value of 'this' currently is: "+this); */

			selected = $(".ui-selected").each(function() {
				var el = $(this);
				/* console.log("The value of el is: "+el); */
				el.data("offset", el.offset());
			});
		/*	console.log("The new value of selected is now "+selected); */
			offset = $(this).offset();
		/*	console.log("The value of top value is "+offset.top+" and the left value is "+offset.left); */
		},
		drag: function(ev, ui) {
			// create two new variables
			// dt and dl, subract the ui.position and the offset position
			var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
			/* console.log("The value of dt is "+dt+" and is equal to "+ui.position.top+" - "+offset.top); */
			/*  console.log("The value of dl is "+dl+" and is equal to "+ui.position.left+" - "+offset.left); */
			/*  console.log("The value of ui.position.top is "+ui.position.top); */
			/*  console.log("The value of ui.position.left is "+ui.position.left); */
			/*  console.log("The value of offset.top is "+offset.top); */
			/*  console.log("The value of offset.left is "+offset.left); */
			
			// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
			selected.not(this).each(function() {
				// create the variable for we don't need to keep calling $("this")
				// el = current element we are on
				// off = what position was this element at when it was selected, before drag
				var el = $(this), off = el.data("offset");
				el.css({top: off.top, left: off.left + dl});
			});

		},
		stop: function(ev, ui){
		}
	});
	
});