/**********************************************************************************
 ******************* JQuery imageComment plugin by EducDesign S.A. *********************
 **********************************************************************************
 Contributers	: Laurent Hever		***********************************************
 Date			: July 2010			***********************************************
 OLEFA Release	: 10.7				***********************************************
 **********************************************************************************
 **********************************************************************************/
jQuery.fn.extend({
	imageComment: function(pData){
		if(typeof(pData) == "undefined"){
			pData = new Object();
		}
		jQuery.__imageComment__setup(this,pData);
		return this;
	}
});

jQuery.extend({
	__imageComment__setup: function(caller, pData){
		/***************************************************************************
		**************** Start with drawing the imageComment editor *********************
		***************************************************************************/
		var editor =	'<div id="imageComment_holder"></div>'
					+	'<div id="imageComment_editor">'
					+		'<div id="imageComment_editor_header">'
					+			'<div id="imageComment_title"><h2>' + pData.image +'</h2>'
					+				'<div id="imageComment_close"><img src="/osr/icons/kde/crystalclear/64x64/actions/button_cancel.png" width="20" height="20" /></div>'
					+			'</div>'
					+		'</div>'
					+		'<div id="imageComment_editor_main">'
					+			'<div id="imageComment_main"><img id="imageComment_image" src="' + pData.image + '" /></div>'
					+			'<div id="imageComment_info"><h3><b>Image comments</b></h3><br /></div>'
					+			'<div id="imageComment_exif"></div>'
					+		'</div>'
					+	'</div>';
		jQuery('body').append(editor);
		//alert("Sign: " + pData.exifSign);
		var exif = '<div id="imageComment_exif_hide" class="imageComments_hidden"></div>';
		jQuery('#imageComment_exif').append(exif);
	
		/***************************************************************************
		************** Check if session ID is set and set rights *******************
		***************************************************************************/
		if(pData.userID == undefined){
			pData.userID = "";
			pData.editMode = 0;
			if(pData.read == ""){
				pData.viewMode = 1;
			}else{
				pData.viewMode = 0;
			}
		}else{
			if(pData.read == ""){
				pData.viewMode = 1;
			}else{
				pData.viewMode = 0;
			}
			
			if(pData.write == ""){
				pData.editMode = 1;
			}else{
				pData.editMode = 0;
			}
		}
		pData.width		=	50;
		pData.height	=	50;
		
		/***************************************************************************
		******************* If not defined, plugin will quit  **********************
		***************************************************************************/
		if(pData.image == undefined){
			pData.image = '';
		}
		
		/***************************************************************************
		*********** Define some default variables like ajax settings **************
		***************************************************************************/
		pData.node = {
			id			:	'',
			left		:	'',
			top			:	'',
			width		:	'',
			height		:	'',
			iWidth		:	'',
			iHeight		:	'',
			text		:	'',
			parsedText	:	'',
			userID		:	''
		};
		pData.nodes = new Array();
		pData.nodeCount = 0;
		pData.locked = 0;
		pData.mode = 'view';
		pData.currentID = 0;
		pData.keylist = new Array();
		pData.valuelist = new Array();
		pData.exifCount=0;
		pData.exifSign='+';
		pData.exifClass='imageComments_hidden';
		
		pData.ajaxType		= 'post';
		pData.ajaxHandler	= '/cgi-bin/apps/ajax/ImageComment';
		pData.ajaxDataType	= 'json';
		pData.ajaxTimeout	= 10000;
		
		pData.root = "#imageComment_main";
		
		pData.nodeInterface	= 		'<div class="imageComment_newNode"></div>'
								+		'<input type="text" value="" class="imageComment_editBox" />';
		
		pData.nodeControl = 	'<div id="node_control">'
							+		'<table>'
							+			'<tr>'
							+				'<td><input type="button" value="Add" class="node_add" /></td>'
							+				'<td><input type="button" value="Cancel" class="node_cancel" /></td>'
							+			'</tr>'
							+			'<tr>'
							+				'<td><input type="button" value="Delete" class="node_delete" style="display:none;" /></td>'
							+			'</tr>'
							+		'</table>'
							+	'</div>';
		jQuery(pData.root).append(pData.nodeControl);
		jQuery('body').append('<div id="imageComment_error"></div>');
		
		
		/*pData.nodeLayer	=	'<div id="node_layer"></div>';
		jQuery(pData.root).append(pData.nodeLayer);*/
		
		jQuery.__imageComment__loadNodes(pData);
		jQuery.__imageComment__initEvents(pData);
	},
	
	/************************************************************************************************************************
	 ********************************** Events which will be called after every action one more time ************************ 
	 ************************************************************************************************************************/
	__imageComment__initEvents:function(pData){
		
		jQuery('#imageComment_exif_hide').live('click', function(){
			if(jQuery(this).attr('class') == 'imageComments_hidden'){
				jQuery(this).find('span').remove();
				var content = '<span>-</span>';
				jQuery(this).append(content);
				jQuery('.exif_info_table').show();
				jQuery(this).attr('class','imageComments_show');
				pData.exifSign='-';
				pData.exifClass='imageComments_show';
			}else{
				jQuery(this).find('span').remove();
				var content = '<span>+</span>';
				jQuery(this).append(content);
				jQuery('.exif_info_table').hide();
				jQuery(this).attr('class','imageComments_hidden');
				pData.exifSign='+';
				pData.exifClass='imageComments_hidden';
			}
		});
		
		/************************************************* Events on the node *************************************************/
		jQuery('.imageComment_newNode').live('mouseenter', function(){
			if( (pData.mode == 'view') && (pData.viewMode == 1) && (pData.locked == 0) ){
				pData.locked = 1;
				var id = jQuery(this).parent().attr('id');
				pData.currentID = id.substr(5);
				jQuery.__imageComment__showNode(this, pData);
			}
		});
		
		jQuery('.node_holder').live('mouseleave', function(){
			var id = jQuery(this).attr('id');
			id = id.substr(5);
			pData.currentID = id;
			var obj = jQuery(this).find('.imageComment_newNode');
			jQuery.__imageComment__hideNode(obj, pData);
		});
		
		jQuery('.imageComment_newNode').live('click', function(){
			if( (pData.locked == 0) && (pData.mode == 'view') && (pData.editMode == 1) ){
				pData.locked = 1;
				pData.mode = 'edit';
				var id = jQuery(this).parent().attr('id');
				id = id.substr(5);
				pData.currentID = id;
				jQuery.__imageComment__modifyNode(this, pData);
			}
		});
		
		
		/*********************************************** Events on the image ************************************************/
		jQuery(pData.root).live('dblclick', function(e){
			if( (pData.mode == 'view') && (pData.locked == 0) && (pData.editMode == 1) ){
				pData.locked = 1;
				pData.mode = 'add';
				jQuery.__imageComment__addNewNode(pData, e);
			}
		});
		
		jQuery(pData.root).live('mouseenter', function(){
			if( (pData.mode == 'view') && (pData.viewMode == 1) && (pData.locked == 0) ){
				pData.locked = 1;
				jQuery.__imageComment__showAllNodes(pData);
			}
		});
		
		jQuery(pData.root).live('mouseleave', function(){
			if(pData.locked == 0){
				jQuery.__imageComment__hideAllNodes();
			}
		});
		
		/*********************************************** Mouse click events **************************************************/
		jQuery('.node_add').live('click', function(){
			if( (pData.locked == 1) && ( (pData.mode == 'add') || (pData.mode == 'edit') ) && (pData.editMode == 1) ){
				jQuery.__imageComment__storeNode(pData);
			}	
		});
		
		jQuery('.node_cancel').live('click', function(){
			if ( (pData.locked == 1) && ((pData.mode == 'edit')||(pData.mode == 'add')) && (pData.editMode == 1) ){
				jQuery.__imageComment__handleCancel(jQuery(this).parents().find('.imageComment_newNode').parent(), pData);
			}
		});
		
		jQuery('.node_delete').live('click', function(){
			var id = jQuery(this).parents().find('.imageComment_newNode').parent();
			jQuery.__imageComment__handleDelete(pData);
		});
		
		
		/*********************************************** Input on change event **************************************************/
		jQuery('.imageComment_editBox').live('change', function(){
			pData.node.text = jQuery(this).attr('value');
		});
		
		
		/************************************************* End add/view nodes *************************************************/
		jQuery('#imageComment_close').live('click', function(){
			jQuery('#imageComment_holder').remove();
			jQuery('#imageComment_editor').remove();
			jQuery('#imageComment_error').remove();
		});
		
		/************************************************* Events on the list *************************************************/
		jQuery('.imageComment_element').live('mouseenter', function(){
			var id = jQuery(this).attr('id');
			id = id.substr(21);
			
			jQuery(this).css({
				'opacity'	:	'1',
				'filter'	:	'alpha(opacity = 100)'
			});
			
			var object = jQuery('#node_' + id).find('.imageComment_newNode');
			if( (pData.viewMode == 1) && (pData.mode == 'view') ){
				pData.locked = 1;
				jQuery.__imageComment__showNode(object, pData);
			}
		});
		
		jQuery('.imageComment_element').live('mouseleave', function(){
			var id = jQuery(this).attr('id');
			id = id.substr(21);
			
			jQuery(this).css({
				'opacity'	:	'0.7',
				'filter'	:	'alpha(opacity = 70)'
			});

			jQuery.__imageComment__hideAllNodes(pData);
		});
		
		jQuery('.imageComment_element').live('click', function(){
			if( (pData.locked == 0) && (pData.mode == 'view') && (pData.editMode == 1) ){
				pData.locked = 1;
				pData.mode = 'edit';
				var id = jQuery(this).attr('id');
				id = id.substr(21);
				pData.currentID = id;
				jQuery.__imageComment__modifyNode(jQuery('#node_' + id).find('.imageComment_newNode'), pData);
			}
		});
		
	},
	
	__imageComment__generateError: function(mode, action, code, error){
		jQuery('#imageComment_error').children().remove();
		jQuery('#imageComment_error').fadeIn(2000);
		if(mode == 'get'){
			if(action == 'start'){
				jQuery('#imageComment_error').show();
				jQuery('#imageComment_error').append('<span>Loading comments ...</span>');
				jQuery('#imageComment_error>span').css({
					'backgroundColor'	:	'green'
				});
			}else{
				if(code == 0){
					jQuery('#imageComment_error').show();
					jQuery('#imageComment_error').append('<span>Comments loaded!</span>');
					jQuery('#imageComment_error>span').css({
						'backgroundColor'	:	'green'
					});
				}else{
					jQuery('#imageComment_error').show();
					jQuery('#imageComment_error').append('<span>' + error + '</span>');
					jQuery('#imageComment_error>span').css({
						'backgroundColor'	:	'red'
					});
				}
			}
		}else if(mode == 'add'){
			if(code == 0){
				jQuery('#imageComment_error').show();
				jQuery('#imageComment_error').append('<span>New node added!</span>');
				jQuery('#imageComment_error>span').css({
					'backgroundColor'	:	'green'
				});
			}else{
				jQuery('#imageComment_error').show();
				jQuery('#imageComment_error').append('<span>' + error + '</span>');
				jQuery('#imageComment_error>span').css({
					'backgroundColor'	:	'red'
				});
			}
		}else{
			if(code == 0){
				jQuery('#imageComment_error').show();
				jQuery('#imageComment_error').append('<span>Node updated!</span>');
				jQuery('#imageComment_error>span').css({
					'backgroundColor'	:	'green'
				});
			}else{
				jQuery('#imageComment_error').show();
				jQuery('#imageComment_error').append('<span>' + error + '</span>');
				jQuery('#imageComment_error>span').css({
					'backgroundColor'	:	'red'
				});
			}
		}
		
		jQuery('#imageComment_error').fadeOut(2000);
	},
	
	__imageComment__handleDelete: function(pData){
		pData.node = pData.nodes[pData.currentID];
		var ajaxData = {
				mode 		: 'delete',
				currentID	: pData.node.id,
				userID  	: pData.userID, 
				image		: pData.docroot + pData.image
			};
			
		jQuery.ajax({
			url: pData.ajaxHandler,
			type: pData.ajaxType,
			timeout: pData.ajaxTimeout,
			dataType: pData.ajaxDataType,
			data: ajaxData,
			beforeSend:	function(){
							var loader = jQuery('#node_' + pData.currentID).find('.imageComment_newNode');
							jQuery.__imageComment__ajaxLoadingShow(loader);
						},
			success:	function(json){
							jQuery.__imageComment__ajaxLoadingHide();
							jQuery.__imageComment__generateError('delete', 'stop', 0);
							if(json.status == 0){
								//Delete was successfully done
								jQuery('#node_control').hide();
								jQuery('.imageComment_editBox').hide();
								jQuery('.imageComment_newNode').parent().remove();
								jQuery('.imageComment_element').remove();
								jQuery('#imageComment_exif').children().remove();
								pData.nodeCount=0;
								jQuery.__imageComment__loadNodes(pData);
							}else{
								jQuery.__imageComment__generateError('delete', 'stop', 1, json.error);
							}
						},
				error:	function(XMLHttpRequest, textStatus, errorThrown){
							jQuery.__imageComment__generateError('add', 'delete', 1, errorThrown);
						}
		});
		
		pData.mode = 'view';
		pData.locked = 0;
	},
	
	__imageComment__handleCancel: function(caller, pData){
		if(pData.mode == 'edit'){
			jQuery('#node_' + pData.currentID).find('.imageComment_newNode').css({
				'opacity'	:	'0.5',
				'filter'	:	'alpha(opacity=50)'
			});
			
			jQuery('#node_' + pData.currentID).find('.imageComment_editBox').hide();
			
			jQuery('#node_control').hide();
		}else{
			jQuery('#node_-1').remove();
			jQuery('#node_control').hide();
		}
		
		pData.mode = 'view';
		pData.locked = 0;
	},
	
	//Modify an existing node text
	__imageComment__modifyNode: function(caller, pData){
		var id = jQuery(caller).parent().attr('id');
		id = id.substr(5);
		pData.node = pData.nodes[id];
		pData.currentID = id;
		
		jQuery('#node_layer').hide();
		
		jQuery(caller).parent().find('.imageComment_editBox').css({
			'display'	:	'block',
			'left'		:	pData.node.left,
			'top' 		:	(1 * pData.node.top) + (1 * pData.node.height),
			'marginTop'	:	'5px'
		});
		
		jQuery('#node_control').css({
			'display'	:	'block',
			'left'		:	pData.node.left,
			'top' 		:	(1 * pData.node.top) + (1 * pData.node.height) + (1 * 35),
			'marginTop'	:	'7px'
		});
		
		jQuery(caller).parent().find('.imageComment_editBox').attr('value', pData.node.text);
		
		jQuery('.node_delete').show();
	},
	
	__imageComment__loadNodes: function(pData){
		var ajaxData = {
				mode 	: 'get',
				userID	: pData.userID,
				image	: pData.docroot + pData.image
			};
			
			jQuery.ajax({
				url: pData.ajaxHandler,
				type: pData.ajaxType,
				timeout: pData.ajaxTimeout,
				dataType: pData.ajaxDataType,
				data: ajaxData,
				beforeSend: function(){
								jQuery.__imageComment__generateError('get', 'start');
								jQuery.__imageComment__ajaxLoadingShow(pData.root);
							},
				success:	function(json){
								jQuery.__imageComment__ajaxLoadingHide();
								
								pData.nodes = new Array();
								
								pData.keylist = json.keylist;
								pData.valuelist = json.valuelist;
								pData.exifCount = json.exifCount;
								jQuery.__imageComment__generateExifInfo(pData);
								
								if(json.error == 1){
									jQuery.__imageComment__generateError('get', 'stop', 1, 'No comments available');
								}else{
									
									var nodeList = json.nodeList;
									for(var count= 0 ; count < nodeList.count; count++){
										var node = nodeList[count];
										//Find the container which corresponds to the image
										var imageWidth="0px";
										var imageHeight="0px";
										var object = jQuery('#imageComment_image');
										imageWidth = object[0].clientWidth;
										imageHeight = object[0].clientHeight;
										var widthRatio = 	(1 * imageWidth) / (1 * node.imageWidth);
										var heightRatio = 	(1 * imageHeight) / (1 * node.imageHeight);
										
										var myNode={
												id			:	node.id,
												userID		:	node.userID,
												user		:	node.user,
												left		:	node.left * widthRatio,
												top			:	node.top * heightRatio,
												width		:	node.width * widthRatio,
												height		:	node.height * heightRatio,
												text		:	node.text,
												parsedText	:	node.parsedText,
												iWidth		:	imageWidth,
												iHeight		:	imageHeight
										};
										pData.nodes.push(myNode);
										pData.nodeCount++;
									}
								}
								jQuery.__imageComment__generateError('get', 'stop', 0, 0);
								jQuery.__imageComment__appendNodes(pData);
							},
					error:	function(XMLHttpRequest, textStatus, errorThrown){
								jQuery.__imageComment__generateError('get', 'stop', 1, errorThrown);
							}
			});
	},
	
	__imageComment__appendNodes: function(pData){
		var i = 0;
		var nodeInfo = '<table width="100%" cellspacing="0">';
		while (i < pData.nodeCount){
			pData.node = pData.nodes[i];
			var newInterface = '<div id="node_' + i +'" class="node_holder">' + pData.nodeInterface + "</div>";
			jQuery(pData.root).append(newInterface);
			
			jQuery('#node_' + i).find('.imageComment_newNode').css({
				'position'	:	'absolute',
				'opacity'	:	'0',
				'filter'	:	'alpha(opacity=0)',
				'left'		:	pData.node.left,
				'top'		:	pData.node.top,
				'width'		:	pData.node.width,
				'height'	:	pData.node.height
			});
			
			jQuery('#node_' + i).find('.imageComment_editBox').hide();
			if(i%2 == 0){
				nodeInfo = nodeInfo + '<tr class="imageComment_element element_odd" id="imageComment_element_' + i + '"><td>' + pData.node.text + '<b> by ' + pData.node.user + '</b></span></td></tr>';
			}else{
				nodeInfo = nodeInfo + '<tr class="imageComment_element element_even" id="imageComment_element_' + i + '"><td>' + pData.node.text + '<b> by ' + pData.node.user + '</b></span></td></tr>';
			}
			
			if(pData.editMode == 1){
				jQuery.__imageComment__positioning(jQuery('#node_' + i).find('.imageComment_newNode'), pData);
			}
			
			i++;
		}
		nodeInfo = nodeInfo + '</table>';
		jQuery('#imageComment_info').append(nodeInfo);
		
		if(pData.exifClass == 'imageComments_show'){
			jQuery('.exif_info_table').show();
		}else{
			jQuery('.exif_info_table').hide();
		}
		
		pData.locked = 0;
		pData.mode = 'view';
		
		//jQuery.__imageComment__initEvents(pData);
	},
	
	__imageComment__hideAllNodes: function(){
		jQuery('.imageComment_newNode').css({
			'opacity'	:	'0',
			'filter'	:	'alpha(opacity=0)'
		});
		
		jQuery('#node_layer').remove();
	},
	
	__imageComment__hideNode: function(caller, pData){
		jQuery.__imageComment__showAllNodes(pData);
		jQuery('#node_layer').fadeOut(1000, function(){
			jQuery('#node_layer').remove();
		});

	},
	
	__imageComment__showAllNodes: function(pData){
		jQuery('.imageComment_newNode').css({
			'opacity'	:	'0.3',
			'filter'	:	'alpha(opacity=30)'
		});
		
		if(pData.mode == 'view'){
			pData.locked = 0;
		}
	},
	
	__imageComment__showNode: function(caller, pData){
		jQuery('.imageComment_newNode').each(function(){
			jQuery(this).css({
				'opacity'	: '0',
				'filter'	: 'alpha(opacity=0)'
			});
		});
		
		var id = jQuery(caller).parent().attr('id');
		id = id.substr(5);

		if(id > -1){
			pData.node = pData.nodes[id];
			jQuery(caller).css({
				'opacity'	:	'0.5',
				'filter'	:	'alpha(opacity=50)'
			});
			jQuery('#node_' + id).append('<div id="node_layer"></div>');
			jQuery('#node_layer').css({
				'position'	:	'absolute',
				'display'	:	'block',
				'left'		:	pData.node.left,
				'top'		:	(1 * pData.node.top) + (1 * pData.node.height),
				'width'		:	pData.node.width - 10,
				'marginTop'	:	'5px'
			});
			
			var text = '<p class="node_text">' + pData.node.parsedText + '</p>';
			jQuery('#node_layer').find('.node_text').remove();
			jQuery('#node_layer').append(text);
		}
		pData.locked = 0;
	},
	
	__imageComment__positioning: function(caller, pData){
		jQuery(caller)
		.resizable({
			containment		:jQuery('#imageComment_image'),
			start			:function(){
								if(pData.mode == 'edit'){
									jQuery(this).parent().find('.imageComment_editBox').hide();
									jQuery('#node_control').hide();
								}
								jQuery('#node_layer').remove();
							},
			stop			:function(){
								jQuery.__imageComment__updateNode(this, pData);
							}
							
								
		})
		.draggable({
			containment		:jQuery('#imageComment_image'),
			start			:function(){
								if(pData.mode == 'edit'){
									jQuery(this).parent().find('.imageComment_editBox').hide();
									jQuery('#node_control').hide();
								}
								jQuery('#node_layer').remove();
							},
			stop			:function(){
								jQuery.__imageComment__updateNode(this, pData);
							}
			});
		//jQuery.__imageComment__initEvents(pData);
	},
	
	__imageComment__storeNode: function(pData){
		if(pData.node.id == -1){
			pData.node.text = jQuery('#node_-1').find('.imageComment_editBox').attr('value');
			//Store a new node
			var ajaxData = {
					mode 		: 'add',
					userID  	: pData.node.userID,
					top			: pData.node.top,
					left		: pData.node.left,
					height		: pData.node.height,
					width		: pData.node.width,
					text		: pData.node.text,
					iWidth		: pData.node.iWidth,
					iHeight		: pData.node.iHeight,
					image		: pData.docroot + pData.image,
				};

				jQuery.ajax({
					url			: 		pData.ajaxHandler,
					type		: 		pData.ajaxType,
					timeout		:		pData.ajaxTimeout,
					dataType	: 		pData.ajaxDataType,
					data		: 		ajaxData,
					beforeSend	:		function(){
											jQuery('.imageComment_editBox').hide();
											jQuery('#node_control').hide();
											var loader = jQuery('#node_-1').find('.imageComment_newNode');
											jQuery.__imageComment__ajaxLoadingShow(loader);
										},
					success		: 		function(json){
											jQuery.__imageComment__ajaxLoadingHide();
											jQuery('#node_-1').find('.imageComment_newNode').css({
												'opacity'				:	'0.3',
												'filter'				:	'alpha(opacity=30)',
												'backgroundColor'		:	'#FFFFFF'
											});
											if(json.status == 0){
												pData.node.id = json.nodeID;
												pData.nodes.push(pData.node);
												jQuery('#node_-1').attr('id', 'node_' + pData.nodeCount);
												pData.nodeCount++;
												
												jQuery.__imageComment__generateError('add', 'stop', 0);
											}else{
												jQuery.__imageComment__generateError('add', 'stop', 1, json.error);
											}
											pData.locked = 0;
											pData.mode = 'view';
											
											jQuery('#node_control').hide();
											jQuery('.imageComment_editBox').hide();
											jQuery('.imageComment_newNode').parent().remove();
											jQuery('.imageComment_element').remove();
											jQuery('#imageComment_exif').children().remove();
											pData.nodeCount = 0;
											jQuery.__imageComment__loadNodes(pData);
										},
					error		:		function(XMLHttpRequest, textStatus, errorThrown){
											jQuery.__imageComment__generateError('add', 'stop', 1, errorThrown);
										}
				});
		}else{
			//Update an existing node
			var ajaxData = {
					mode 		: 'update',
					id			: pData.node.id,
					userID  	: pData.node.userID,
					top			: pData.node.top,
					left		: pData.node.left,
					height		: pData.node.height,
					width		: pData.node.width,
					text		: pData.node.text,
					iWidth		: pData.node.iWidth,
					iHeight		: pData.node.iHeight,
					image		: pData.docroot + pData.image,
				};

				jQuery.ajax({
					url			: 		pData.ajaxHandler,
					type		: 		pData.ajaxType,
					timeout		:		pData.ajaxTimeout,
					dataType	: 		pData.ajaxDataType,
					data		: 		ajaxData,
					beforeSend	:		function(){
											jQuery('.node_holder').find('.imageComment_editBox').hide();
											jQuery('#node_control').hide();
											var loader = jQuery('#node_' + pData.currentID).find('.imageComment_newNode');
											jQuery.__imageComment__ajaxLoadingShow(loader);
										},
					success		: 		function(json){
											jQuery.__imageComment__ajaxLoadingHide();
											jQuery('#node_-1').find('.imageComment_newNode').css({
												'opacity'				:	'0.3',
												'filter'				:	'alpha(opacity=30)',
												'backgroundColor'		:	'#FFFFFF'
											});
											if(json.status == 0){
												jQuery.__imageComment__generateError('update', 'stop', 0);
												jQuery('#node_control').hide();
												jQuery('.imageComment_editBox').hide();
												jQuery('.imageComment_newNode').parent().remove();
												jQuery('.imageComment_element').remove();
												jQuery('#imageComment_exif').children().remove();
												pData.nodeCount = 0;
												jQuery.__imageComment__loadNodes(pData);
											}else{
												jQuery.__imageComment__generateError('update', 'stop', 1, errorThrown);
											}
											pData.locked = 0;
											pData.mode = 'view';
										}
				});
		}
	},
	
	__imageComment__updateNode: function(caller, pData){
		var id = jQuery(caller).parent().attr('id');
		id = id.substr(5);
		var object = jQuery('#imageComment_image');
		imageWidth = object[0].clientWidth;
		imageHeight = object[0].clientHeight;
		
		pData.node.left 		= caller.offsetLeft;
		pData.node.top			= caller.offsetTop;
		pData.node.width		= caller.clientWidth;
		pData.node.height		= caller.clientHeight;
		pData.node.id			= pData.nodes[id].id;
		pData.node.iWidth		= imageWidth;
		pData.node.iHeight		= imageHeight;
		pData.node.userID		= pData.userID;

		if( (pData.mode == 'edit') || (pData.mode == 'add') ){
			jQuery(caller).parent().find('.imageComment_editBox').css({
				'display'	:	'block',
				'left'		:	pData.node.left,
				'top' 		:	(1 * pData.node.top) + (1 * pData.node.height),
				'marginTop'	:	'5px'
			});
			
			jQuery('#node_control').css({
				'display'	:	'block',
				'left'		:	pData.node.left,
				'top' 		:	(1 * pData.node.top) + (1 * pData.node.height) + (1 * 35),
				'marginTop'	:	'7px'
			});
		}
		if(pData.mode != 'add'){
			jQuery.__imageComment__storeNode(pData);
		}
	},
	
	__imageComment__addNewNode:function(pData, e){
		jQuery.__imageComment__hideAllNodes();
		var imagePos = jQuery('#imageComment_image').offset(); 
		var left 	= (1 * e.pageX) - (1 * imagePos.left) - (1 * pData.width/2);
		var top		= (1 * e.pageY) - (1 * imagePos.top) - (1 * pData.height/2);
		
		var newInterface = '<div id="node_-1" class="node_holder">' + pData.nodeInterface + "</div>";
		
		jQuery(pData.root).append(newInterface);
		jQuery('#node_-1').find('.imageComment_newNode').css({
			'position'	: 'absolute',
			'opacity'	: '0.5',
			'fileter'	: 'alpha(opacity=50)',
			'left'		: left,
			'top'		: top,
			'width' 	: pData.width,
			'height'	: pData.height,
			'z-index'	: '99999'
		});
		
		jQuery('#node_-1').find('.imageComment_editBox').css({
			'left'		: left,
			'top'		: (1 * top) + (1 * pData.height),
			'marginTop'	: '5px'
		});
		
		jQuery('#node_control').css({
			'display'	:	'block',
			'left'		:	left,
			'top'		:	(1 * top) + (1 * pData.height) + (1 * 30),
			'marginTop'	:	'5px'
		});
		
		pData.node.id = -1;
		pData.node.userID = pData.userID;
		pData.node.left = left;
		pData.node.top = top;
		pData.node.width = pData.width;
		pData.node.height = pData.height;
		
		var image = jQuery('#imageComment_image');
		pData.node.iWidth = image.width();
		pData.node.iHeight = image.height();
		
		if(pData.editMode == 1){
			jQuery.__imageComment__positioning(jQuery('#node_-1').find('.imageComment_newNode'), pData);
		}
	},
	
	//Show an Ajax Loading 
	__imageComment__ajaxLoadingShow: function(name){
		jQuery(name).css({
			'opacity' 				: '1',
			'filter'				: 'alpha(opacity=100)'
		});
		var loader = '<div class="ajax_loading_screen ui-corner-all10"><div id="loading_pic"><img src="/osr/icons/browse/loading.gif" /></div></div>';
		jQuery(name).append(loader);
		jQuery('.ajax_loading_screen').fadeIn(500);

	},
	
	//Hide an Ajax Loading 
	__imageComment__ajaxLoadingHide: function(){
		jQuery('.ajax_loading_screen').fadeOut(500, function(){
			jQuery(this).remove();
		});
	},
	
	__imageComment__generateExifInfo: function(pData){
		var exif = '<h2>Exif Info</h2><br>';
		var exif = exif + '<table class="exif_info_table" width="100%">';
		for(var i = 0; i < pData.exifCount; i++){
			if(i%2 == 0){
				exif = exif + "</td><tr><td><b>"+ pData.keylist[i] + "</b>:" + pData.valuelist[i] +"</td>";
			}else{
				exif = exif + "<td><b>"+ pData.keylist[i] + "</b>:" + pData.valuelist[i] +"</td>";
			}
		}
		exif = exif + "</tr></table>";
		
		//alert("Sign: " + pData.exifSign);
		jQuery('#imageComment_exif').children().remove();
		var sign = '<div id="imageComment_exif_hide" class="'+ pData.exifClass +'"><span>'+ pData.exifSign +'</span></div>';
		jQuery('#imageComment_exif_hide').append(sign);
		jQuery('#imageComment_exif').append(sign);
		jQuery('#imageComment_exif').append(exif);
	}
});