(function($){
	function updateUpDown(sortable) {
		$('dl:not(.ui-sortable-helper)', sortable)
			.removeClass('first').removeClass('last')
			.find('.up, .down').removeClass('disabled').end()
			.filter(':first').addClass('first').find('.up').addClass('disabled').end().end()
			.filter(':last').addClass('last').find('.down').addClass('disabled').end().end();
	};
	
	function moveUpDown() {
		var link = $(this),
			dl = link.parents('dl'),
			prev = dl.prev('dl'),
			next = dl.next('dl');
	
		if(link.is('.up') && prev.length > 0)
			dl.insertBefore(prev);
	
		if(link.is('.down') && next.length > 0)
			dl.insertAfter(next);
	
		updateUpDown(dl.parent());
	};
	
	function addControls() {
		$(this).append('<span class="options"><a class="up">up</a><a class="down">down</a></span>')
			.find('a.up, a.down').bind('click', moveUpDown);
		updateUpDown($(this).parents(".ui-sortable:first"));
	}
	
	var counter = 1;
	function addItem() {
		var linkz = [
		     '<a href="extjs.htm" target="_top">EXT.js</a> - the first review of a major AJAX/JavaScript framework',
             '<a href="jsframeworks.htm" target="_top">JavaScript/AJAX Frameworks</a> - <span class="hilite">new</span> first overview and comparison with Flash, Java',
             '<a href="linksjs.htm" target="_top">JavaScript Links</a> - <span class="hilite">completely updated</span> set of JavaScript/AJAX links',
              '<a href="clouddev.htm" target="_top">Cloud Computing</a> - <span class="hilite">new</span>  Why Cloud Computing is taking off everywhere',
              '<a href="clouddev2.htm" target="_top">Cloud Development</a> - <span class="hilite">new</span>  how Cloud Development springs out of,  but differs from Web 2',
               '<a href="cloudapps.htm" target="_top">Cloud Applications</a>  - <span class="hilite">new</span> 3 Cloud Apps and their technologies delivering big IT innovations',
               '<a href="jsimage.htm" target="_top">JS Image</a> - <span class="hilite">new</span>  routines that demo simple but effective image manipulations in JavaScript',
               '<a href="jsimage2.htm" target="_top">JS Image 2</a> -<span class="hilite">new</span> more JavaScript image manipulation routines',
               '<a href="flashcs4.htm" target="_top">Flash Pro CS4</a> - <span class="hilite">new</span>  Overview sees lots of new goodies for Flash Designers',
               '<a href="flex3ing.htm" target="_top">Flex 3</a> - <span class="hilite">new</span>  Flex and FlexBuilder continue to improve',
               '<a href="linksflash.htm" target="_top">Flash Links</a> - <span class="hilite">as good as new</span> completely revised Flash links',
               '<a href="flashcs4.htm" target="_top">Gumbo/Thermo</a> - <span class="hilite">new</span>  first look at Flex4/FlexBuilder 4 and Flash Catalyst betas'];
		var sortable = $(this).parents('.ui-sortable:first');
		var options = '<span class="options"><a class="up">up</a><a class="down">down</a></span>';
		var tpl = '<dl class="sort"><dt>{name}' + options + '</dt><dd>{desc}</dd></dl>';
		var html = tpl.replace(/{name}/g, 'No ' + counter + ' in Popularity').replace(/{desc}/g, 
					(counter > 12)? ' No more links' : linkz[counter-1]);
		counter += 1;
		sortable.append(html).sortable('refresh').find('a.up, a.down').bind('click', moveUpDown);
		updateUpDown(sortable);
	};
	
	function emptyTrashCan(item) {
		item.remove();
	};
	
	function sortableChange(e, ui) {
		if(ui.sender){
			var w = ui.element.width();
			ui.placeholder.width(w);
			ui.helper.css("width",ui.element.children().width());
		}
	};
	
	function sortableUpdate(e, ui) {
		if(ui.element[0].id == 'trashcan'){
			emptyTrashCan(ui.item);
		} else {
			updateUpDown(ui.element[0]);
			if(ui.sender)
				updateUpDown(ui.sender[0]);
		}
	};
	
	$(document).ready(function(){
		var els = ['#header', '#footer', '#trashcan'];
		var $els = $(els.toString());
		
		$('h2', $els.slice(0,-1)).append('<span class="options"><a class="add">add</a></span>');
		$('dt', $els).each(addControls);
		//$('dt', $els).append('<span class="options"><a class="up">up</a><a class="down">down</a></span>');
		
		$('a.add').bind('click', addItem);
		//$('a.up, a.down').bind('click', moveUpDown);
		
		$els.each(function(){
			updateUpDown(this);
		});
		
		$els.sortable({
			items: '> dl',
			handle: 'dt',
			cursor: 'move',
			//cursorAt: { top: 2, left: 2 },
			//opacity: 0.8,
			//helper: 'clone',
			appendTo: 'body',
			//placeholder: 'clone',
			//placeholder: 'placeholder',
			connectWith: els,
			start: function(e,ui) {
				ui.helper.css("width", ui.item.parent().width());
			},
			change: sortableChange,
			update: sortableUpdate
		}).bind("sortreceive", function(e, ui) {
			$(ui.item).removeClass('ui-draggable').find('dt').each(addControls);
		});
		$('#components > dl').draggable({
			connectToSortable: $els.not("#trashcan"),
			helper: 'clone',
			handle: 'dt'
		})
	});
	
	$(window).bind('load',function(){
		setTimeout(function(){
			// fixes the weird scrolling in IE while killing the fade
			$(document.body).css("height", "auto")
			$('#overlay').fadeOut(function(){
				$(this).remove();
			});
		}, 500);
	});
})(jQuery);