(function($) {
	var setupHelper = function(event, $item) {
		// $item - element ktory przeciagamy
		return $item.clone().css({
			width: $item.width() + 'px',
			height: $item.height() + 'px'
		});
	};


	var setupPlaceholder = function(event, ui) {
		if(ui.sender){
            //console.log("przeniesienie do innej kolumny");
			var w = ui.element.width();
			ui.placeholder.width(w);
		}
		else {
            //console.log("zmiana w tej samej kolumnie");
			var w = ui.element.width();
			ui.placeholder.width(w);
		}
	};


	/*
     * Zapisuje w jakiej kolejnosci znajduja sie panele w poszczegolnych
     * divach.
     * 
     * Tworzy stringa w foramcie:
     * #id_pierwszego_diva:#id_pierwszego_panelu/#id_2_diva:#id_2_panelu,#id_3_panelu/#id_3_diva:
     * i zapisuje go w ciastku.
	 */
	var savePanelsPositions = function(event, ui) {
		var cookie = '';
		$(ui.options.connectWith.toString()).each(function(idx, place) {
			cookie += '#' + place.id + ':';
			$(ui.options.items, place).each(function(idx, panel) {
				cookie += '#' + panel.id + ',';
			});
			if (cookie.substr(cookie.length-1, cookie.length) == ',') {
				cookie = cookie.substr(0, cookie.length-1) + '/';
            }
			else {
				cookie += '/';
            }
		});
		cookie = cookie.substr(0, cookie.length-1);

		$.cookie('panels_positions', cookie, { expires: 365 });
		//console.log(cookie);
	}


	/*
	 * Odczytuje kolejnosc paneli z ciastka i przywraca ich pozycje.
     * Jesli sa jakies nowe panele (takie ktore nie byly zapisane w
     * ciastku) to pozostana one na gorze diva, a przywrocone panele
     * beda pod nimi.
	 */
	var restorePanelsPositions = function() {
		//wczytanie ciastka do places
		var places = $.cookie('panels_positions');
		//console.log(places);
		if (places === null) {
			return false;
        }

		places = places.split('/');
		$.each(places, function(idx, place) {
			var placeAndPanels = place.split(':');
			var placeId = placeAndPanels[0];
			var panelsIds = placeAndPanels[1].split(',');
			//console.log(placeId, panelsIds);

			$.each(panelsIds, function(idx, panel) {
				if (panel != "") {
					$(panel).appendTo(placeId);
                }
            });
		});
	};



	$(document).ready(function() {
		var dropPlaces = ['.ui_sortable_place'];
		var $dropPlaces = $(dropPlaces.toString());
		var saveCookieDelayTimer = null;

		$dropPlaces.sortable({
			items:  '.ui_sortable_panel',
			handle: '> .panelHeader',
			cancel: 'a.button',
			dropOnEmpty: true,
			cursor: 'move',
			connectWith: dropPlaces,
			opacity: 0.8,
			revert: true,
			placeholder: 'ui_sortable_placeholder',

			helper: setupHelper,
			start: function(event, ui) {
				//console.info('sortable start callback');
				if (saveCookieDelayTimer) {
					clearTimeout(saveCookieDelayTimer);
                }
			},
			sort: function(event, ui) {
				//console.info('sortable sort callback');
			},
			change: function(event, ui) {
				//console.info('sortable change callback');
				setupPlaceholder(event, ui);
			},
			update: function(event, ui) {
				//console.info('sortable update callback');
			},
			stop: function(event, ui) {
				saveCookieDelayTimer = setTimeout(function () {
					savePanelsPositions(event, ui);
				}, 2000);
			}
		}); // sortable() end


		// przywracanie pozycji paneli
		restorePanelsPositions();

	}); // ready() end
})(jQuery);