// item picker


var Picker = Class.create();

Picker.prototype = {
  
  initialize: function() {
  	this.selectedItem = null;
	},
  
  setClassToHandle: function(cssClassName) {
  	this.classUnselected = cssClassName;
  	this.classSelected = cssClassName + "Selected";
  	this.initHandlers();
	},
	
	setValues: function(values) {
		this.values = values;
  },
  
  setChangeCallback: function(callback) {
  	this.changeCallback = callback;
  },
  
  initHandlers: function() {
  	// get all elements by css name and set their onclick handler
  	var items = document.getElementsByClassName(this.classUnselected);
  	for (i = 0; i < items.length; i++) {
  		items[i].picker = this;
  		Event.observe(items[i], "click", this.pickHandler, false);
  	}
	},
  
  selectValue: function(value) {
  	for (var v in this.values) {
  		if (this.values[v] == value) {
  			this.pick($(v));
  		}
    }
  },
  
  getSelectedValue: function() {
  	if (this.selectedItem == null) {
  		return null;
  	}
  	return this.values[this.selectedItem];
  },
	
	pickHandler: function(event) {
		Event.stop(event);
		var clickedEl = Event.element(event);
		while (!clickedEl.picker) {
			clickedEl = clickedEl.up();
		};
		clickedEl.picker.pick(clickedEl);
	},
	
	pick: function(el) {
		var itemId = el.getAttribute('id');
		if (this.selectedItem == itemId) {
			return;
	  }
	  if (this.selectedItem != null) {
	  	this.doDeselect(this.selectedItem);
	  }
	  this.doSelect(itemId);
	  this.selectedItem = itemId;
	  if (this.changeCallback) {
	  	this.changeCallback();
	  }
  },
  
  doSelect: function(itemId) {
  	$(itemId).removeClassName(this.classUnselected);
  	$(itemId).addClassName(this.classSelected);
  },
  
  doDeselect: function(itemId) {
  	$(itemId).removeClassName(this.classSelected);
  	$(itemId).addClassName(this.classUnselected);
  }
}