/**
 * @fileOverview Unlogo
 * @version 0.1
 */

/*jslint nomen: true, debug: true, evil: false, onevar: false, browser: true, plusplus: false, undef: true */
/*global window: true, jQuery: true */

/**
 * Shortcut for window.console.log
 */
function pr(s) {
	if (window.console && window.console.log) {
		window.console.log(s);
	}
}

(function ($) {
	
	/**
	 * Extracts settings for classnames of a jQuery object
	 *
	 * <div id="mySettingTest" class="more mysetting-key-value mysetting-key2-value-2-width-dashes"></div>
	 *
	 * @example $.classNameSettings('#mySettingTest', 'mysetting')
	 * @return array containing settings for example
	 * settings['key'] = value
	 * settings['key-2'] = value-2-width-dashes
	 */
	$.classNameSettings = function (obj, prefix) {
	
		var settings = {};
		prefix = prefix + "-";
		$($(obj).first().attr('class').split(' ')).each(function (i, className) {
			if (className.indexOf(prefix) === 0) {
				var value = className.replace(prefix, '');
				var setting = value.split('-');
				var settingKey = setting.shift();
				settings[settingKey] = setting.join('-');
			}
		});
		return settings;
	};
	
	$.fn.tagselect = function (options) {
		var defaultSettings = {
			'selected-tags' : 'selected-tags',
			'tag': '<span class="tag">$txt</span>',
			'messages' : 'messages',
			'message-max' : 'You can select at max 3 Logos.',
			'max' : 3
		};
		options = $.extend(defaultSettings, options);
		
		return this.each(function () {
			var tagselect = $(this);
			options = $.extend(options, $.classNameSettings(tagselect, 'eui-tagselect'));
			
			var selectedTags = null;
			var messages = null;
			if(tagselect.find(options['selected-tags']).size() == 0) {
				selectedTags = $('<div class="' + options['selected-tags'] +'"> </div>');
				tagselect.append(selectedTags);
				pr(selectedTags);
			}
			if(tagselect.find(options['selected-tags']).size() == 0) {
				messages = $('<div class="' + options['messages'] +'"> </div>');
				tagselect.append(messages);
			}
			
			var checked = tagselect.find(':checked');
			
			tagselect.find('input:checkbox').change(function() {
				$(this).blur();
				update();
			});
			
			tagselect.find('div.checkbox').hover(function() {
				$(this).toggleClass('hover');
			});
			
			function update() {
				var checked = tagselect.find(':checked');
				
				tagselect.find('input:checkbox').each(function() {
					if($(this).attr('checked')) {
						$(this).parent('div').addClass('selected');
					} else {
						$(this).parent('div').removeClass('selected');
					}
				});
				
				messages.html(' ');
				if(checked.size() == options['max']) {
					tagselect.find('div.checkbox').not('.selected').addClass('disabled');
					tagselect.find('input:checkbox').not(':checked').attr('disabled', 'disabled');
					messages.html(options['message-max']);
				} else if(checked.size() >= options['max']) {
					tagselect.find('div.checkbox').removeClass('disabled');
					tagselect.find('input:checkbox').removeAttr('disabled').removeAttr('checked');
				} else {
					tagselect.find('div.checkbox').removeClass('disabled');
					tagselect.find('input:checkbox').removeAttr('disabled');
				}
				
				var h = '';
				var labels = [];
				checked.each(function(){
					labels.push($(this).parent('div').find('label').text());
					h += $(this).parent('div').find('label').text();
					h += ' ';
				});
				h += ' ';
				selectedTags.html(labels.join(', '));
				
			}
			
			update();
			
		});
	}
	
	function ready() {
		$('body').addClass('has-js');
		$('.eui-tagselect').tagselect();
	}
	
	$(document).ready(ready);
	
}(jQuery));