/**
 * jquery.autocomplete-with-id.js v1.0
 * jQuery iPhone-like switch button
 * @author Antonio Veracruz Development <development@antonio-veracruz.com>
 *
 * Copyright (c) Antonio Veracruz Development  - released under MIT License {{{
 *
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:

 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.

 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.

 * }}}
 */

/*
 * Meant to be used on a <input type="checkbox">, this widget will replace the receiver element with an iPhone-style
 * switch button with two states: "on" and "off".
 * Labels of the states are customizable, as are their presence and position. The receiver element's "checked" attribute
 * is updated according to the state of the switch, so that it can be used in a <form>.
 *
 */

(function ($) {

	$.widget("sylightsUI.containerManagement", {

		options: {
			url: null,
			data_type: "json",
			method: "get",

			show_labels: true,
			placeholder: "",
			hint: "",
			value_property: "id",
			label_property: "name",

			clear: true,
			clear_after: null,
			css_text_container: null,
			css_label_container: null

		},

		_create: function () {
			this._initControl();
			this._initPluginEvents();
		},


		_initControl: function () {

			var gallery = $(gallery_css);
			var tray = $(tray_css);
			var management_url_add = $(url_css + "[type='add']").first().attr('href');
			var management_url_remove = $(url_css + "[type='remove']").first().attr('href');

			//alert("URL ADD CSS: " + url_css+"[type='add']\r\nURL ADD: " + management_url_add + "\r\nURL REMOVE: " + management_url_remove);

			$("li", gallery).draggable({
				cancel: "a.ui-icon",
				revert: "invalid",
				cursor: "move",
				helper: "clone"
			});

			tray.droppable({
				accept: gallery_css + " > li",
				drop: function (event, ui) {
					//alert("URL Add: " + management_url_add);
					makeAjaxCall(management_url_add, {
						method: 'post',
						dataType: 'json',
						data: {entry_id: ui.draggable.attr('entry-id')},
						success: function (data) {
							if (data.status == "management_ok") {
                            ui.draggable.fadeOut(function () {
                                tray.append(ui.draggable);
                                ui.draggable.fadeIn();
                                ui.draggable.append(" --- <a href=\"javascript:managementRemoveItem( '" + management_url_remove + "', '" + tray_css + "', " + ui.draggable.attr('entry-id') + " );\"> </a>");
                            });
                        }
                        else {
                            showFancyMessage(data.message);
                        }
                    },
                    error: function () {
                        showFancyMessage();
                    }
                });
            }
        });



			// Call refresh to update labels text and visibility
			self._refresh();
		},

		_refresh: function () {
			var self = this;

			//alert("Label: " + this.label + "; Placeholder: " + this.placeholer );
			if (self.editMode)
			{
				// edit mode
				self.text_container.val(self.label);
				self.label_container.hide();
				self.text_container.show();
				self.text_container.focus();
			}
			else
			{
				//label mode
				self.label_container.html(self.label || self.placeholder);
				self.text_container.hide();
				self.label_container.show();
			}
		},


		_initEvents: function () {
			var self = this;
		},


		_initPluginEvents: function () {
			var self = this;

			self.label_container.click(function () {
				self.editMode = true;
				self._refresh();
			});


			self.text_container.focusout(
				function(){
					new_text_value = self.text_container.val().trim();
					if ( new_text_value == ""){
						self.value = null;
						self.label = null;
						self.id_container.val("");
					}
					self.editMode = false;
					self._refresh()
				}
			);

			self.text_container.autocomplete({
				delay: 0,
				source: function (request, response) {

					var ajax_params = {};
					ajax_params[self.search_property] = request.term;

					if (this.parent_container != null) {
						ajax_params[this.parent_container.attr('property-name')] = this.parent_container.attr('value');
					}
					$.ajax({
						url: self.options.url,
						dataType: "json",
						data: ajax_params,
						beforeSend: function (xhr) {
							xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
						},
						success: function (data) {
							//alert(jQuery.toJSON(data));
							if (data.status == 2) {
								//console.log("Autocompelete Result: " + $.toJSON(data.data));
								response($.map(data.data, function (item) {
									//console.log("Label Property: " + self.options.label_property);
									//console.log("Value Property: " + self.options.value_property);
									return {
										label: item[self.options.label_property],
										value: item[self.options.value_property]
									}
								}));
							}
						}

					});
				},
				//minLength: 2,
				select: function (event, ui) {
					self.value = ui.item.value;
					self.label = ui.item.label;
					self.id_container.val(self.value);
					self.text_container.val(self.label);

					self.editMode = false; // label model
					self._refresh();

					return false;
				},
				open: function () {
					self.menu_is_open = true;
				},
				close: function () {
					self.menu_is_open = false;
				}
			});
		},


		_setDefaultValue: function(){
			var self = this;
			self.id_container.val(self.defaultValue);
			self.label = self.defaultLabel;
			self.value = self.defaultValue;
		},

		_nullifyValue: function(){
			var self = this;
			self.id_container.val(null);
			self.label = null;
			self.value = null;
		}

	});

})(jQuery);