/**
 * 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.autocompleteWithId", {

		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 () {

			if ($.controls == undefined || $.controls == null){
				$.controls = {}
			}


			var self = this;
			// Create our objects: two labels and the button
			self.id_container = self.element;
			self.label_container = $("<a>");

			self.text_container = $("<input>").attr("type", "text");
			self.text_container.attr("class", self.id_container.attr("class"));

			self.parent_container = $("#" + self.id_container.attr("parent"));
			self.search_property = self.id_container.attr("search-property") || "keyword";

			self.value = self.id_container.attr("value");
			self.label = self.id_container.attr("label");
			self.defaultValue = self.value;
			self.defaultLabel = self.label;
			self.placeholder = self.id_container.attr("placeholder");
			self.hint = self.id_container.attr("hint");
			self.property_name = self.id_container.attr("property-name");
			self.editMode = false;




			$.controls[self.id_container.attr("id")] = self;

			self.setDefault = function(){
				self._setDefaultValue();
				//console.log("Set Default OK");
				self._refresh();
				return false;
			};

			self.nullify = function(){
				self._nullifyValue();
				//console.log("Nullify OK");
				self._refresh();
				return false;
			};





			//alert("Label: " + self.label);

			// Insert the objects into the DOM
			self.text_container.insertAfter(self.id_container).hide();
			self.label_container.insertAfter(self.text_container);
			self.text_container.addClass(self.options.css_text_container);


			if (self.id_container.attr("url") != null) {
				self.options.url = self.id_container.attr("url");
			}
			if (self.id_container.attr("method") != null) {
				self.options.method = self.id_container.attr("method");
			}
			if (self.id_container.attr("placeholder") != null) {
				self.options.placeholder = self.id_container.attr("placeholder");
			}
			if (self.id_container.attr("hint") != null) {
				self.options.hint = self.id_container.attr("hint");
			}

			if (self.id_container.attr("value-property") != null) {
				self.options.value_property = self.id_container.attr("value-property");
				//console.log("Value Property: " + self.options.value_property);
			}
			if (self.id_container.attr("label-property") != null) {
				self.options.label_property = self.id_container.attr("label-property");
				//console.log("Label Property: " + self.options.label_property);
			}
			self.menu_is_open = false;

			

			// Insert a clearing element after the specified element if needed
			if (self.options.clear) {
				$("<div>").css({
					clear: "left"
				}).insertAfter(self.options.clear_after);
			}

			// 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);