function clearTempImages()
{
	//Check if temp image exist or not
	if(document.getElementById('tmpRemoveImage') != null)
	{
		//Remove temp image
		document.getElementById('tmpRemoveImage').parentNode.removeChild(document.getElementById('tmpRemoveImage'));
	}
	//Check if temp image exist or not
	if(getElement('tmpAddImage') != null)
	{	
		//Remove temp image
		getElement('tmpAddImage').parentNode.removeChild(getElement('tmpAddImage'));
	}

}
/*
**Display remove image after hovered tag
*/
function showActionRemove(tag, book_id)
{
	clearTempImages();

	//create new temp image
	var imgRemove = document.createElement('img');
	imgRemove.setAttribute('src', LIVING_SITE_URL + '/img/remove_tag.png');
	imgRemove.setAttribute('id', 'tmpRemoveImage');
	imgRemove.onclick = function(){
		removeThisTag(tag.id, book_id);
	}
	
	imgRemove.setAttribute('class','tempTagImage');
	
	//insert after current tag
	insertAfter(imgRemove, tag);
}

/*
**Display add image after hovered tag
*/
function showActionAdd(tag, book_id)
{
	clearTempImages();
	
	//create new temp image
	var imgAdd = document.createElement('img');
	imgAdd.setAttribute('src', LIVING_SITE_URL+'/img/agree_tag.png');
	imgAdd.id ='tmpAddImage';
	imgAdd.onclick = function(){
		agreeThisTag(tag.id, book_id);
	};
	imgAdd.setAttribute('class','tempTagImage');
	//insert after curent tag
	insertAfter(imgAdd, tag);
}

/*
**Agree with current tag
*/
function agreeThisTag(tagId, book_id)
{
	if (!book_id) book_id = document.getElementById('book_id').value;
	new Request({
    url: LIVING_SITE_URL + '/tags/addExistTag',
		method: 'get',
		data:{bookId:book_id, tagId:tagId.split('_')[1]},
		evalScripts: true,
		onComplete: function(){
			// Special tag type for booklists - triggers a list reload when tag added
			if(tagId.split('_')[0] == 'booklist')
			{
				// Update the tags list
				new Request({
          url: LIVING_SITE_URL+"/books/getTagsList/"+book_id+"/"+ new Date().getTime(),
          method: 'get',
          onComplete: function(data){
              $('tags'+book_id).set('html', this.response['text']);
              endWait();
            }
        }).send();
			} else {
				getElement(tagId).onmouseover = function(){
					showActionRemove(getElement(tagId));
				};
        try {
            $('containerUser').getElement('p').dispose();
        } catch (e) {}
				getElement('containerUser').appendChild(getElement(tagId));
				removeTempAddImage();
			}
		}
	}).send();
}

/*
**Remove current tag
*/
function removeThisTag(tagId, book_id)
{
	if (!book_id) book_id = document.getElementById('book_id').value;
	var	tagContent = "";
	if(getElement(tagId).getElementsByTagName('a')[0].getElementsByTagName('span')[0])
	{
			var tmpDiv = document.createElement('div');
			tmpDiv.appendChild(getElement(tagId).getElementsByTagName('a')[0].getElementsByTagName('span')[0].cloneNode(true));
	 		tagContent = getElement(tagId).getElementsByTagName('a')[0].innerHTML.replace(tmpDiv.innerHTML, getElement('tagValueId').value);
	}
	else 
	{
		tagContent = getElement(tagId).getElementsByTagName('a')[0].innerHTML;
	}
	if(confirm(MSG_CONFIRM_REMOVE + ' ('+ tagContent+ ')')) {
		new Request({
      url: LIVING_SITE_URL + '/tags/removeTag',
			method: 'post',
			data:{bookId:book_id, tagId:tagId.split('_')[1]},
			evalScripts: true,
			onComplete: function(data){
				if(tagId.split('_')[0] == 'friend')
				{
					//getElement(tagId).setAttribute('onmouseover', 'showActionAdd(this)');
					getElement(tagId).onmouseover = function(){
						showActionAdd(getElement(tagId));
					};
					getElement('containerFriend').appendChild(getElement(tagId));
				}
				if(tagId.split('_')[0] == 'other') {
					getElement(tagId).onmouseover = function(){
						showActionAdd(getElement(tagId));
					};
					getElement('containerOther').appendChild(getElement(tagId));
				}
				if(tagId.split('_')[0] == 'user') {
					var span = getElement(tagId);
          var parent = span.parentNode;
          parent.removeChild(span);
				}
				
				// Special tag type for booklists - triggers a list reload when tag removed
				if(tagId.split('_')[0] == 'booklist') {
					// Update the tags list
					new Request({
            url: LIVING_SITE_URL+"/books/getTagsList/"+book_id+"/"+ new Date().getTime(),
            method: 'get',
            onComplete: function(data){
              $('tags'+book_id).set('html', this.response['text']);
              endWait();
            }
          }).send();
				}
        removeTempDeleteImage();
			}
		}).send();
	}
}

function showActionRemoveCat(elem) {
	//Check if temp image exist or not
	if(document.getElementById('tmpRemoveImage') != null) {
		//Remove temp image
		document.getElementById('tmpRemoveImage').parentNode.removeChild(document.getElementById('tmpRemoveImage'));
	}
	//create new temp image
	var imgRemove = document.createElement('img');
	imgRemove.setAttribute('src', LIVING_SITE_URL + '/img/remove_tag.png');
	imgRemove.setAttribute('id', 'tmpRemoveImage');
	imgRemove.onclick = function(){
		removeThisCat(elem.id);
	}
	
	imgRemove.setAttribute('class','tempTagImage');
	imgRemove.style.positon = "absolute";
	//insert after current tag
	insertAfter(imgRemove, elem);
}

function removeThisCat(catId)
{
	var	catContent = "";
	if(getElement(catId).getElementsByTagName('a')[0].getElementsByTagName('span')[0])
	{
			var tmpDiv = document.createElement('div');
			tmpDiv.appendChild(getElement(catId).getElementsByTagName('a')[0].getElementsByTagName('span')[0].cloneNode(true));
	 		catContent = getElement(catId).getElementsByTagName('a')[0].innerHTML.replace(tmpDiv.innerHTML, getElement('tagValueId').value);
	}
	else 
	{
		catContent = getElement(catId).getElementsByTagName('a')[0].innerHTML;
	}
	if(confirm(MSG_CONFIRM_REMOVE + ": "+ catContent))
	{
		var book_id = document.getElementById('book_id').value;
		new Request({
      url: LIVING_SITE_URL + '/tags/removeCategory',
			method: 'post',
			data:{bookId:book_id, catId:catId.split('_')[1]},
			evalScripts: true,
			onComplete: function(data){        
        getElement(catId).parentNode.removeChild(getElement(catId));
        removeTempDeleteImage();
	    }
		}).send();
	}
}

function removeTempDeleteImage()
{
	//Remove temp image
	if(getElement('tmpRemoveImage') != null)
	{
		getElement('tmpRemoveImage').parentNode.removeChild(getElement('tmpRemoveImage'));
	}
}

function removeTempAddImage()
{
	//Remove temp image
	if(getElement('tmpAddImage') != null)
	{
	//	alert(getElement('tmpAddImage').previousSibling.innerHTML);
		//getElement('tmpAddImage').previousSibling.innerHTML += '     ';
		getElement('tmpAddImage').parentNode.removeChild(getElement('tmpAddImage'));
	}
}

function addNewTag()
{
  var tag = $('tagValueId');
	if(trim(tag.value) == tag.defaultValue || trim(tag.value) == "") {
		alert(MSG_TAG_REQUIRED);
		return;
	}

	var book_id = document.getElementById('book_id').value;
	new Request({
    url: LIVING_SITE_URL + '/tags/addNewTag',
		method: 'post',
		data:{bookId:book_id, txtTag: trim(tag.value)},
		evalScripts: true,
		onComplete: function(data){
			endWait();
			if(data == 'categoryexist') {
				alert(MSG_CONFIRM_EXIST_CATEGORY);
				return;
			}
			if(data == 'systemCategory') {
				alert(MSG_CONFIRM_EXIST_CATEGORY);
				return;
			}
			if(data == 'exist') {
				alert(ERR_TAG_EXIST);
				return;
			}
			if(data == 'friend') {
				alert(MSG_TAG_IN_FRIEND);
				return;
			}
			if(data == 'other') {
				alert(MSG_TAG_IN_OTHER);
				return;
			}
			if(data.split('_')[0] == 'cat') {
				removeTempSpan();
				var	objSpan = document.createElement('span');
			 	
			 	objSpan.setAttribute('type', 'category');
			 	objSpan.innerHTML = "<a href=\"javascript:find_books_by_tag('"+trim(tag.value)+"')\">"+ trim(tag.value) +"</a> ";
				getElement('containerCategory').appendChild(objSpan);
				tag.value = tag.defaultValue;
				objSpan.id = data;
				objSpan.onmouseover = function(){
					showActionRemoveCat(objSpan);
				};
				return;
			}
		 	var	objSpan = document.createElement('span');
		 	objSpan.id = 'user_' + data;
		 	objSpan.onmouseover = function(){
		 		showActionRemove(objSpan);
		 	};
      var msg = $('containerUser').getElement('p');
      if (msg !== null) {
        msg.dispose();
      }
		 	objSpan.innerHTML = "<span name='blank'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><a href=\"javascript:find_books_by_tag('"+trim(tag.value)+"')\">"+ trim(tag.value) +"</a> ";
			getElement('containerUser').appendChild(objSpan);
			tag.value = '';
			removeTempSpan();
		}
	}).send();
	wait();
}

function getElement(id)
{
	return document.getElementById(id);
}

function loadPageAllTagsFriend(bookid) {
	new Request({
    url: LIVING_SITE_URL + '/tags/listAllTagsByFriend/' + bookid,
		method: 'post',		
		evalScripts: true,
		onComplete: function(data){
		 	document.getElementById('containerFriend').innerHTML = data;
		 	document.getElementById('viewAllTagsFriend').innerHTML = '';
		}
	}).send();
}

function loadPageAllTagsOther(bookid)
{
	new Request({
    url: LIVING_SITE_URL + '/tags/listAllTagsByOther/' + bookid,
		method: 'post',		
		evalScripts: true,
		onComplete: function(data){
		 	document.getElementById('containerOther').innerHTML = data;
		 	document.getElementById('viewAllTagsOther').innerHTML = '';
		}
	}).send();
}

function insertAfter(newElement,targetElement) {
	  //target is what you want it to go after. Look for this elements parent.
	  var parent = targetElement.parentNode;
	  //if the parents lastchild is the targetElement...
	  if(parent.lastchild == targetElement) {
	  //add the newElement after the target element.
	  parent.appendChild(newElement);
	  } else {
	  // else the target has siblings, insert the new element between the target and it's next sibling.
	  parent.insertBefore(newElement, targetElement.nextSibling);
	  }

}

function trim (str) 
{
    return str.replace(/^\s+|\s+$/g, '');
}
//Catch when user press enter
function submitEnter(event)
{
	if(event.keyCode == 13)
	{
		addNewTag();
	}
}

function removeTempImg(e) {
	if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;
	// Mouseout took place when mouse actually left layer
	
	removeTempDeleteImage();
	removeTempAddImage();
}


/*
**Function for search and hight light text
*/
function highlightText(txtKey, e)
	{
		//Remove all highlight
		removeTempSpan();
		//Get all elements that have tag span
		arrSpan = document.getElementsByTagName('span');
		if(txtKey.value == "")
		{
			var agt=navigator.userAgent.toLowerCase();
			if ( (parseInt(navigator.appVersion)==4) &&(agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)&& (agt.indexOf('compatible') == -1) ) {
				return;
				}
		}
		//check each span
		for(i=0;i<arrSpan.length; i++)
		{
			if(arrSpan[i].getAttribute('class') != "highlight" && arrSpan[i].getElementsByTagName("a")[0] != null)
			{
			
				// Because the content element can contain special charater, if we use property innerHTML, some special will convert into entity character (&-> &amp;)
				// So we must use dom model to resolve this problem by calling the firstNode.nodeValue to get text of element node  
				// if node exist then process it
				if(arrSpan[i].getElementsByTagName("a")[0].firstChild) {
					if(arrSpan[i].getElementsByTagName("a")[0].innerText)						
						arrSpan[i].getElementsByTagName("a")[0].innerHTML = (arrSpan[i].getElementsByTagName("a")[0].innerText.replace(new RegExp("("+txtKey.value+")","i") , "<span class='highlight'>$1</span>"));
					else 
						arrSpan[i].getElementsByTagName("a")[0].innerHTML = (arrSpan[i].getElementsByTagName("a")[0].firstChild.nodeValue.replace(new RegExp("("+txtKey.value+")","i") , "<span class='highlight'>$1</span>"));
				}
				
			}
		}
	}
/*
**Remove highlight
*/
function removeTempSpan()
{
		arrSpan = document.getElementsByTagName('span');
		for(i=0;i<arrSpan.length; i++)
		{
			if(arrSpan[i].getAttribute('class') == "highlight")
			{
				var tmpDiv = document.createElement('div');
				tmpDiv.appendChild(arrSpan[i].cloneNode(true));
				
				//arrSpan[i].parentNode.innerHTML= arrSpan[i].parentNode.innerHTML.replace(new RegExp(tmpDiv.innerHTML,"gi"), arrSpan[i].innerHTML);
				arrSpan[i].parentNode.innerHTML= arrSpan[i].parentNode.innerHTML.replace(tmpDiv.innerHTML, arrSpan[i].innerHTML);
				
			}
	}
}