/**
 * ServiceHome
 * 
 * @author Marco Saßmannshausen <ms@servicehome.net>
 * 
 * @license GPL 2.x >
 */

/**
 * AttributeColorChooser
 * *********************
 * 
 * Substitute option-Selectboxes by customized version and show an graphical option chooser.
 * 
 * @param options_to_manage_array option-ids to manage
 * @param no_popup_option_ids_array option-ids with no graphical popup
 */
function AttributeColorChooser(options_to_manage_array, no_popup_option_ids_array) {
	this.dlg = null;
	this.option_id = null;
	this.options_ar = options_to_manage_array;
	this.name = "AttributeColorChooser";
	
	this.no_popup_option_ids_array = no_popup_option_ids_array;
};

/**
 * Enable / Setup
 */
AttributeColorChooser.prototype.enableColorChooser = function() {
	// hide the default attrib selector fields (SELECTBOX)
	var max = this.options_ar.length;
	for (i=0; i<max; i++) {
		var select_ref = jQuery('select[name=id\\[' + this.options_ar[i] + '\\]]');
		select_ref.hide();
		
		var button = jQuery(".chooser_bt_"+this.options_ar[i]);
		button.show();
		
		var optionDisplayBox = jQuery("#display_"+this.option_id);
		optionDisplayBox.show();
	}
	
	this.width = "590px";
	this.height = "450";
	
	this.max_height = "300";
	
	this.min_width = "400";
	this.max_width = "600";

	this.dlg = jQuery("#color_dialog");
	this.dlg.dialog( {
		// width : this.width,
		modal: true,
		autoOpen: false,
		closeText: "schließen"
		// width: this.width,
		// maxHeight: this.max_height,
		// maxWidth: this.max_width,
		// minWidth: this.min_width
	});
	
	var pid_field = jQuery("input[name=products_id]");
	this.master_pid = pid_field.val();
	
	var selected = this.getSelectedOptionValueIds();
	selected = jQuery(selected);
	var self = this;
	selected.each(function (index, value) {
		if (index > 0) {
			var element = jQuery("<a/>");
			element.attr("value", value);
			element.attr("filetype", "png");

			var test = jQuery("select[name^=id\\["+index+"]").find(":selected").text();
			element.attr("valueLabel", test);
			self.option_id = index;
			
			self.selectColor(element);
		}
	});
};

/**
 * Select a color and display the according thumbnail-image.
 * 
 * @param option_value_id_holder
 * @return
 */
AttributeColorChooser.prototype.selectColor = function (option_value_id_holder) {
	var holder = jQuery(option_value_id_holder);
	var option_value_id = holder.attr("value");
	var filetype = holder.attr("filetype");
	var value_label = holder.attr("valuelabel");

	if (this.option_id != null) {
		var select_ref = jQuery("select[name=id\\[" + this.option_id + "\\]]");
		select_ref.val(option_value_id);
		select_ref.trigger("change"); // fire event
		
		var optionDisplayBox = jQuery("#display_"+this.option_id);
		var update_html = "";
		if (this.option_id == 1 && (option_value_id > 0) ) {
			  var path = "/images/attribute_images/"+this.option_id+"_"+option_value_id+"."+filetype;
			  var image_tag = '<img onclick="chooser.showDialog('+this.option_id+', \''+this.option_label+'\');" src="'+path+'">';
			  update_html = image_tag;
		} else {
			var text_value = ""+value_label;
			update_html = '<div style="" class="drop_down_textfield">'+text_value+'</div>';
		}
		optionDisplayBox.html(update_html);
	}
	
	this.dlg.dialog("close");
};

/**
 * 
 * @return an array of option => attrib-id
 */
AttributeColorChooser.prototype.getSelectedOptionValueIds = function () {
	var listing = new Array();
	var selectboxes = jQuery("select[name^='id']");
	selectboxes.each(function (data) {
		var select = jQuery(this);
		var NUMBER_REGEX = /([0-9]+)/;
		var container_name = select.attr("name");

		NUMBER_REGEX.exec(container_name);
		var option_id = RegExp.$1;

		listing[option_id] = select.val();
	});
	
	return listing;
};


/**
 * Call ajax-method to fetch the images to display.
 * 
 * @param option_id
 * @return
 */
AttributeColorChooser.prototype.fetchElements = function (option_id) {
	
	// clear current content
	this.dlg.html("Bitte warten, Bilder werden geladen...");
	
	var selectedOptionsArray = this.getSelectedOptionValueIds();

	var scriptUrl = "/ajax_handler.php";
	var post_data = { action: "fetch_attributes",
					  'selected_options[]': selectedOptionsArray,
					  option: option_id, 
					  'master_id': this.master_pid
					};
	var ref = this;
	var success_handler = function (data, textStatus, XMLHttpRequest) {
		ref.dlg.html(data);
	};
	
	jQuery.post(scriptUrl, post_data, success_handler, "text");
};

/**
 * 
 */
AttributeColorChooser.prototype.displayDataSelector = function (option_id, options_label) {
	// TODO: show dropw-down selector
	
};

/**
 * Open the chooser dialog and fetch option images for the given option-id.
 * 
 * @param option_id
 * @return
 */
AttributeColorChooser.prototype.showDialog = function(option_id, options_label) {

	if (jQuery.inArray(option_id, this.no_popup_option_ids_array) != -1) {
		this.displayDataSelector(option_id, options_label);
		return;
	}

	if (this.dlg == null) {
		this.enableColorChooser();
	}
	
	this.option_id = option_id;
	this.option_label = options_label;
	
	this.dlg.dialog("option", "title", ""+options_label);
	this.dlg.dialog("option", "closeText", "schliessen [X]");
	this.dlg.dialog("option", "width", this.width);
	// this.dlg.dialog("option", "minWidth", this.min_width);
	this.dlg.dialog("option", "height", this.height);
	// this.dlg.dialog("option", "maxHeight", this.max_height);

	this.fetchElements(option_id);
	
	this.dlg.dialog("open");
};



/*******************************************************************************
 *** 								DROP DOWN								 ***
 ******************************************************************************/

/**
 * Create new drop-down helper.
 * 
 * @param select_ref
 * @display_ref
 * @param fireSelected function (index)
 */
function DropDownField(select_ref, display_ref, fireSelected) {
	this.holder = select_ref;
	this.display = display_ref;
	this.selectedCallback = fireSelected;
}

DropDownField.prototype.clickOccured = function (event) {
	//event.stopPropagation();
	event.stopImmediatePropagation();

	var self = jQuery(this);
	alert("index=" + self.attr("value"));
};

DropDownField.prototype.createList = function (entries, hrefs) {
  var list_ref = this.list = jQuery("<ul/>");
  list_ref.css("list-style-type", "none");
  list_ref.css("list-style-position", "inside");
  list_ref.css("margin", "0px");
  list_ref.css("padding", "0px");
  list_ref.css("borderRight", "1px solid black");
  list_ref.css("borderLeft", "1px solid black");
  list_ref.css("borderTop", "0px solid black");
  list_ref.css("borderBottom", "1px solid black");
  
  list_ref.addClass("list_hover");
  
  this.list.appendTo(this.display);
  
  var self = this;
  
  entries = jQuery(entries);
  entries.each(function (index, value) {
	  var li_entry = jQuery("<li/>");
	  
	  li_entry.css("margin", "0px");
	  li_entry.css("backgroundColor", "#FFF");
	  li_entry.css("textAlign", "right");
	  
	  var link = jQuery("<a/>");
	  link.text(value);
	  link.attr("value", value);
	  //link.attr("href", hrefs[index]);
	  link.css("display", "block");
	  link.css("paddingRight", "8px");
	  link.bind("click", self.clickOccured);
	  
	  li_entry.html(link);
	  
	  li_entry.appendTo(list_ref);
  });
};


DropDownField.prototype.enable = function() {
	//this.container = jQuery("<div/>");
	//this.container.css("width", width);
	//this.container.css("background-color", "white");
	//this.container.css("border", "1px solid black");
	//this.container.css("color", "#000");
	//this.container.css("display", "block");
	//this.container.css("zindex", "100");
	//this.container.css("position", "absolute");
	
	//this.container.html(this.createList(new Array("A", "B", "C"), new Array("http://www.heise.de", "http://www.servicehome.net", "http://www.google.de")));
	this.display.html(this.createList(new Array("A", "B", "C"), new Array("", "", "")));
	
	this.display.show();
	//this.container.appendTo(this.display);
};

// Anzeige der Listenelemten einer Select-Box in alternativer Weise
// 1. Übergabe der ID der selectbox
// 2. Funktion für den Anzeige-Trigger; ggf. mit Angabe einer Vorselektion
// 3. Callback Funktion, die die Auswahl des Kundne entegegen nimmt