// <![CDATA[
/**
 * dependency of this plugin:
 *
 * //@var global string http_root
 * //@var global string rp_global_image
 * //@var global string image_loader
 * //@var global string rp_cms
 *
 * //@function close_popup()
 *
*/

// You need an anonymous function to wrap around your function to avoid conflict
(function($){
 
    // Attach this new method to jQuery
    $.fn.extend({ 
         
        // This is where you write your plugin's name
        add_tag: function(options) {
		
			// Set the default values, use comma to separate the settings, example:
            var defaults = {
				targetInput:	'#page_tag', // The target input field that you use to display the tags.
				targetType:		'text', // The target input type.
				targetId: 		'page_tag', // The target input id.
				targetName: 	'page_tag', // The target input name.
				targetTitle:	'TAGS' // The target input title.
            }
                 
            var options =  $.extend(defaults, options);
            
			// return this.click(function(){ // original
			// "this" is already a jQuery object: 
			// When you create the click function you can assign that element to a variable and reference it within:
			var $cm = this.click(function(e){
				
				var o = options;
				var object = $(this);
				
				var target_original = $(o.targetInput);
				var value_current = target_original.val();
				var tag = object.attr('href'); // Store the tag( == string ) which is being clicked.
				
				// Keep this line below for checking.
				//alert(tag); 
				//alert(o.targetId);
				//alert($cm.selector);
				
				value_current = $.trim(value_current);
				
				// Check if the target value is the same as default input hint.
				if (value_current == o.targetTitle) value_current = '';
				
				// Replace the target with a fresh input field.
				target_original.replaceWith("<input type='"+o.targetType+"' name='"+o.targetName+"' id='"+o.targetId+"' value='"+value_current+"' title='"+o.targetTitle+"'/>");
				
				// Get the new replaced target field.
				// Must declare the target again after using replaceWith.
				var target_replaced = $('#'+o.targetId); 
				
				// Split the target_replaced new value into pieces.
				var arrA = target_replaced.val().split(' ');

				// Check if the clicked object's string/ value existed in the array.
				if((idx = arrA.indexOf(tag)) >= 0) 
				{
					arrA.splice(idx,1);
				} 
				else 
				{
					arrA.push(tag);
				}
			  
				// Join the target_replaced new value with regex conditions.
				target_replaced.val( arrA.join(' ').replace(/\s{2,}/,' ').replace(/^\s*/, ''));
				
				// Keep this line below for checking.
				//alert(target.val());
				
				// Check if the new value is empty then set onblur to the target field and attach input hint plugin.
				if(target_replaced.val() == '') 
				{
					target_replaced.blur();
					$('form *[title]').inputHint();
				}
				
				// When the target field is onblur.
				target_replaced.blur(function(){
					
					var value_current = $(o.targetInput).val();
					
					if ( value_current == '') 
					{
						alert('0');
						$(o.targetInput).replaceWith("<input type='"+o.targetType+"' name='"+o.targetName+"' id='"+o.targetId+"' value='' title='"+o.targetTitle+"'/>");
						$($cm.selector).removeClass('clicked');
						$('form *[title]').inputHint();
					}
				});
					
				$(this).toggleClass('clicked');
				
				return false;
				
			});
			
			
        }
    });
     
//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       
})(jQuery);

// ]]>