function colorPickerHelper(prefix) {
	
	this.prefix = prefix;
}

colorPickerHelper.prototype.init = function() {
	
	this.initLayout();
	this.initEvents();
}

colorPickerHelper.prototype.initLayout = function() {

	this.container = $('#' + this.prefix + 'container');
	this.pallete = $('#' + this.prefix + 'pallete');
	this.colorInput = $('#' + this.prefix + 'input');
	
	this.closeButton = $('#' + this.prefix + 'close-button');
}

colorPickerHelper.prototype.initEvents = function() {
	
	var self = this;
	
	self.initPallete();
	self.initSlider();
	
	self.closeButton.click(function() {
		self.hide();
	});
}

colorPickerHelper.prototype.initPallete = function() {
	
	var self = this;
	
	$.farbtastic(self.pallete.selector, function(color) {
		self.onColor(color);
	})	
	
	self.colorInput.keyup(function() {
			
		var color = $(this).val();
		
		$(this).css({});
		$.farbtastic(self.pallete.selector).setColor(color);
	})
}

colorPickerHelper.prototype.initSlider = function() {
	
	var self = this;
	
	$('#' +  self.prefix + 'slider').slider({
		
		value: self.opacity,
		min: 0,
		max: 100,
		step:1,
		
		slide: function(event, ui) {
			self.onOpacity(ui.value);
		},
	});
	
	self.highlightOpacityLabel(self.opacity);
}

colorPickerHelper.prototype.onColor = function(color) {
	
	this.highlightColorInput(color);
	this.colorCallBack(hex_to_rgba_css(color));
}

colorPickerHelper.prototype.onOpacity = function(opacity) {
	
	this.highlightOpacityLabel(opacity);
	this.opacityCallBack(opacity/100);
}

colorPickerHelper.prototype.highlightColorInput = function(color) {
	
	this.colorInput
		.val(color)
		.css({backgroundColor: color});
}

colorPickerHelper.prototype.highlightOpacityLabel = function(label) {
	$('#' + this.prefix + 'opacity').text(label + '%');
}

colorPickerHelper.prototype.setColor = function(color) { 
	
	color = rgba_to_hex_css(color);
	
	this.highlightColorInput(color);
	$.farbtastic(this.pallete.selector).setColor(color);
}

colorPickerHelper.prototype.setOpacity = function(opacity) {
	
	opacity = parseInt(opacity*100);
	
	$('#' +  this.prefix + 'slider').slider('option', 'value', opacity);
	this.highlightOpacityLabel(opacity);
}

colorPickerHelper.prototype.show = function() {
	this.container.removeClass('hidden');
}

colorPickerHelper.prototype.hide = function() {
	this.container.addClass('hidden');
}

