var FlagJS = FlagJS || {};

FlagJS.defaultIdentifier = ''
FlagJS.defaultCategory = '';
FlagJS.defaultLabel = 'Flag';
FlagJS.defaultConfirm = 'Thanks!';
FlagJS.defaultIcon = '/flagjs/flag.png';
FlagJS.defaultStylesheet = '/flagjs/flagjs.css';

FlagJS.widgetCounter = 0;

FlagJS.injectFlag = function(properties) {
	FlagJS.insertStylesheet();
	
	var where = document.getElementById(properties.where);
	FlagJS.setClass(where, 'flagjs-widget flagjs-widget-clickable');

	var elementIdentifier = FlagJS.widgetCounter++;
	
	var identifier = (properties.identifier !== undefined) ? properties.identifier : FlagJS.defaultIdentifier;
	var category = (properties.category !== undefined) ? properties.category : FlagJS.defaultCategory;
	var eventInfo = { 'identifier': identifier, 'category': category};
	
	FlagJS.setFlagClickEvent(where, elementIdentifier, eventInfo);

	var imageSrc = (properties.icon !== undefined) ? properties.icon : FlagJS.defaultIcon;
	var imageTag = FlagJS.createImageTag(elementIdentifier, imageSrc);
	where.appendChild(imageTag);

	var labelText = (properties.label !== undefined) ? properties.label : FlagJS.defaultLabel;
	var textTag = FlagJS.createTextTag(elementIdentifier, labelText);
	where.appendChild(textTag);
};

FlagJS.flagClicked = function(identifier, eventInfo) {
	var labelElementId = FlagJS.createElementIdentifier(identifier, 'text')
	var labelElement = document.getElementById(labelElementId);
	labelElement.innerHTML = FlagJS.defaultConfirm;
	
	FlagJS.removeFlagClickEvent(labelElement.parentNode);
	FlagJS.setClass(labelElement.parentNode, 'flagjs-widget');
	
	var registerClickImage = new Image;
	registerClickImage.src = '/flagjs/flagjs.php?id=' + encodeURIComponent(eventInfo.identifier) +
									'&cat=' + encodeURIComponent(eventInfo.category);
};

FlagJS.setFlagClickEvent = function(where, identifier, eventInfo) {
	where.onclick = function() { FlagJS.flagClicked(identifier, eventInfo) };
};

FlagJS.removeFlagClickEvent = function(where) {
	where.onclick = '';
};

FlagJS.setClass = function(element, cssClass) {
	element.className = cssClass;
};
		
FlagJS.createImageTag = function(identifier, imgSrc) {
	var img = document.createElement('img');
	img.setAttribute('src', imgSrc);
	img.setAttribute('id', FlagJS.createElementIdentifier(identifier, 'img'));
	img.setAttribute('class', 'flagjs-widget-icon');
	return img;
};

FlagJS.createTextTag = function(identifier, label) {
	var spanTag = document.createElement('span');
	spanTag.setAttribute('id', FlagJS.createElementIdentifier(identifier, 'text'));
	spanTag.setAttribute('class', 'flagjs-widget-label');
	spanTag.innerHTML = label;
	return spanTag;
};

FlagJS.createElementIdentifier = function(identifier, suffix) {
	return 'flagjs-' + identifier + '-' + suffix;
};

FlagJS.insertStylesheet = function() {
	if(document.getElementById('flagjs-style')) return;
	var cssTag = document.createElement('link');
	cssTag.setAttribute('id', 'flagjs-style');
	cssTag.setAttribute('type', 'text/css');
	cssTag.setAttribute('rel', 'stylesheet');
	cssTag.setAttribute('href', FlagJS.defaultStylesheet);
	document.getElementsByTagName('body')[0].appendChild(cssTag);
};