jQuery(document).ready(function() {

	jQuery('#nav-main > ul > ul').hide();

	jQuery('#nav-main ul > li').hover(function(){
		jQuery('ul', this).show().parent().addClass('item-hovered');
	},function(){
		jQuery('ul', this).hide().parent().removeClass('item-hovered');
	});
	
	jQuery('ul.nav-inline').each(function() {
			jQuery('li:first', this).addClass('first');
			jQuery('li:last', this).addClass('last');
			jQuery('li:last:lt(2)', this).addClass('before-last');
	});
	
    jQuery('.box-header h4').hover(function() {
		jQuery(this).addClass('hovered');
    }, function() {
		jQuery(this).removeClass('hovered');
    });

	jQuery('.box-header h4').click(function(){
		var $box = jQuery(this).parent();
		$box.next('.box-content').slideToggle(200).parent().toggleClass('closed');
	});
});

(function($){
	var updateUpDown = function(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();
	};
	
	var moveUpDown = function(){
		var link = $(this),
			dl = link.parents('.box'),
			prev = dl.prev('.box'),
			next = dl.next('.box');
	
		if(prev.length > 0)
			dl.insertBefore(prev);
	
		updateUpDown(dl.parent());
	};
	
	var addItem = function(){
		var sortable = $(this).parent();
		var options = '<ul class="nav-inline"><li><a href="#">Configure</a></li></ul>';
		var tpl = '<div class="box"><div class="box-header"><h4>{name}</h4> ' + options + '</div><div class="box-content"><div class="box-content-inside"><p>{desc}</p></div></div></div>';
		var html = tpl.replace(/{name}/g, 'Name').replace(/{desc}/g, 'Description');
	
		sortable.append(html).sortable('refresh')
		updateUpDown(sortable);
	};
	
	var emptyTrashCan = function(item){
		item.remove();
	};
	
	var sortableChange = function(e, ui){
		if(ui.sender){
			var w = ui.element.width();
			ui.placeholder.width(w);
			ui.helper.css("width",ui.element.children().width());
		}
	};
	
	var sortableUpdate = function(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 = ['#wrap-content-left', '#wrap-content-center', '#wrap-content-right'];
		var $els = $(els.toString());
		
		/* $els.prepend('<a href="#" class="add add-box">Add</a>');
		$('a.add').bind('click', addItem); */
		
		$els.each(function(){
			updateUpDown(this);
		});
		
		$els.sortable({
			items: '> .box',
			handle: '.box-header',
			cursor: 'move',
			cursorAt: { top: 2, left: 50 },
			opacity: 0.8,
			//helper: 'clone',
			appendTo: 'body',
			placeholder: 'box-placeholder',
			revert: true,
			connectWith: els,
			start: function(e,ui) {
				ui.helper.css("width", ui.item.width());
			},
			change: sortableChange,
			update: sortableUpdate
		});
	});
})(jQuery);